タグ

JavaScriptに関するwaccherのブックマーク (37)

  • XPathGenerator - Hatena::Let

    by mattn 2010-05-27 [2010/05/27 21:53:37] id:cho45氏作のjAutoPagerizeに付属しているXPathジェネレータです。単体でも非常に良い出来なので抜き出してみました。動作確認はGoogle Chromeのみで行っています。たぶんFirefoxでも動きます。 /* * @title XPathGenerator * @description id:cho45氏作のjAutoPagerizeに付属しているXPathジェネレータです。単体でも非常に良い出来なので抜き出してみました。動作確認はGoogle Chromeのみで行っています。たぶんFirefoxでも動きます。 * @include http://* * @license CCPL ( http://creativecommons.org/licenses/by/3.0/ ) *

  • そこそこ規模が大きくても何とかなるjavascriptの設計(URL dispatcherの薦め) | tech.kayac.com - KAYAC engineers' blog

    弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイドの分業が進んだことや表示速度の兼ね合いもあり、単一ファイルに全体を記述しサーバサイドでは全ページでその一ファイルのみを読み込むような形になることが多いです。 単一ファイルの利点としてはサーバサイドの実装に依存せずに任意の機能を追加できることがありますが、欠点として機能毎の切り分けが難しくなると言う点があります。 jQueryを使用して$('.selector')で切り出す方法もありますが、マークアップの全体像を正確に把握できていないと不要なページで間違って実行されてしまう危険性もあります。 そこで、以下のようなJSを先に読み込み、各URL

    そこそこ規模が大きくても何とかなるjavascriptの設計(URL dispatcherの薦め) | tech.kayac.com - KAYAC engineers' blog
  • JavaScriptでのthisとapplyの関係とは - 小池啓仁 ヒロヒト応援ブログ By はてな

    JavaScriptのthisは、自分自身のオブジェクトを参照するキーワードです。 JavaScriptのオブジェクトは、誤解を恐れず言ってしまうとすべて関数です。 (グローバルオブジェクト(大きな関数)や配列(メソッドの無い関数)もある意味関数ととらえられる) 一方、applyですが、一般的には、「当てる」とか「適応する」という意味です。 また、すべての関数は、仕様的にthisとapplyを持っています。 で、apply関数は、他関数が保持しているapply関数にthisを第一引数にしてコールし、他関数をあたかも自オブジェクトに当ててしまうものなのです。 つまり、JavaScriptでのthisとapplyの関係とは、他関数オブジェクトが保持しているapplyメソッドの引数にthisをセットしてコールすると、自関数オブジェクトになってしまう関係かな。 言葉だと、わかり辛いのでサンプルを見

  • JsUnit を使った JavaScript のユニットテスト - WebOS Goodies

    アプリケーションを開発する上で、避けて通れないもの、それがテストです。とくにブラウザごとの非互換性が大きい Web アプリケーションでは、念入りなテストが必要です。でも、テストはあまり創造的な作業ではないし、やったからといってなにか機能が増えるわけでもない。できるだけ手間をかけずに済ませたいところですね。 そんなわけで、日は JavaScript 用のテストフレームワークである JsUnit を利用したユニットテストの方法をご紹介しようと思います。 Ruby のユニットテストの記事でも書きましたが、ユニットテストによるテスト・ファースト開発は開発効率の面でも良い影響があります。まだ導入していない方は、ぜひこの機会に使ってみてください。 JsUnit について 今回利用する JsUnitJava 用の JUnit を参考にして作られた JavaScript 用のユニットテストフレーム

  • 初心者さんのためのWebサイト制作に役立つリンク集

    2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください!」との声が多いのですが、日のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください! ↑私が10年以上利用している会計ソフト! Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため?何のため?Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム(Webサイトのレイアウト)を作成 Webサイトの骨組み: ワイヤーフレームを素早く・

    初心者さんのためのWebサイト制作に役立つリンク集
  • 第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp

    こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無(来は必須ですが)などバリエーションが

    第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp
  • JavaScript Syntax探訪 - 枕を欹てて聴く

    blogめったに書いてない... 2.5年で110件... 前々からJSのScannerを読んだりするのが楽しかったのですが, id:miya2000 さんからの「commentを削除するprogram」という話が出たときに, 結局JSのlexerというものは単体では生成できずParserと密着している(主にRegExpとRegExpとRegExpのせいです)ということがわかり, 自分でも書きたいという考えが浮かんできてC++でずっと書いていました. AST構築までできて, jqueryなどをparse成功 + json形式のtreeにシリアライズする程度になったのですが, せっかくなのでLLVMへのbridgeとか検討しています. LLVMおもしろいー. Constellation/iv · GitHub で, Constellation's gist: 387832 — Gist くら

    JavaScript Syntax探訪 - 枕を欹てて聴く
    waccher
    waccher 2010/05/22
    C++でjavascriptのパーサー
  • 『続・ハイパフォーマンスWebサイト』イベントに参加しました

    こんにちは。Yahoo!検索の高林です。先日、書籍『続・ハイパフォーマンスWebサイト』(オライリー刊)に寄稿させていただいた関係でトークイベントに参加してきました。 お忙しいところ、たくさんの方々に出席していただき、ありがとうございます。 今回のイベントでは、「Yahoo!検索のパフォーマンス向上策全て見せます!」というテーマでYahoo!検索で実際に行っているTipsの紹介と現在、Yahoo!検索で検討しているシステム構成などを発表しました。 そのときの発表内容は、以下のリンクから確認できますのでご興味のある方はご覧ください。 『続・ハイパフォーマンスWebサイト』出版記念トークイベントのビデオを公開 (O'Reilly Japan) トークセッションでは来場者の方々にたくさんの質問をいただきました。今回はそのなかからいくつかピックアップしてご紹介したいと思います。 ――Q: Yaho

    『続・ハイパフォーマンスWebサイト』イベントに参加しました
    waccher
    waccher 2010/05/20
    転送量、リクエスト量、ブラウザの読み込み順を考慮してチューニングしています。
  • Google Chrome 5の新機能とChrome 6の計画 | gihyo.jp

    Google Chrome 5のリリースが刻一刻と迫ってきました。その注目の新機能と開発者向けの変更点に加え、Chrome 6を見据えた今後のスケジュールなどを詳細にお届けしたいと思います。 まず、Chrome 5の最大ニュースはなんといってもMac版、Linux版がそれぞれ正式にリリースされる予定という点です。これまで、Mac版とLinux版はベータ版と開発版が提供されていましたが、ついに安定版がリリースされる予定です。特にMac版はMac OS Xに馴染むようにかなりの改良が加えられているので、注目のリリースとなりそうです。 さて、これまでのリリースを簡単に振り返ってみます。シンプルで高速なブラウザとしてChromeがリリースされてから、Chrome 2では基機能の充実と高速化、Chrome 3ではテーマのサポート、Chrome 4では拡張機能のサポートとブックマーク同期、Chrom

    Google Chrome 5の新機能とChrome 6の計画 | gihyo.jp
    waccher
    waccher 2010/05/20
    wktkしてきます。
  • JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]

    Web 開発や拡張機能開発で JavaScript のコードを書いていると、誰もが一度は次のようなことで悩むかと思います。 ブロックスコープと名前空間 (グローバル変数汚染の回避) 読み書きしやすくデバッグしやすいコードスタイル コールバック関数と this オブジェクトの取り扱い デバッグ方法とデバッグ支援モジュール 非同期処理の書き方 いずれも解決方法は人によって様々で、これが常にベストと言えるものがなさそうですが、私なりにそれぞれ検討したことなどを書いてみようかと思います。もっと良い方法があるとか色々皆さんのご意見やツッコミをいただければ幸いです。 JavaScript では名前空間は言語仕様でサポートされておらず、ライブラリや拡張機能などのコードを書くときにはグローバル変数の使用を最小限に抑える必要があります。先日の Mozilla 勉強会@東京 3rd でも佐藤さんと守山さんの発

    JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]
  • ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌

    ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。

  • hogehoge - addEventListener の第三引数について

    hogehoge @teramako

    hogehoge - addEventListener の第三引数について
  • 404 Blog Not Found:javascript - 勝手に添削 - JavaScript入門

    2007年04月12日23:30 カテゴリLightweight Languages javascript - 勝手に添削 - JavaScript入門 釈迦に説法を承知で。 IT戦記 - 社内勉強会資料 amachang - JavaScript 入門Object.prototype = { /* ... */ }は避けるべし みにくいのでオブジェクトを入れ替える方式に Box.prototype = { speed: 4, move: function() { this.left += this.speed; this.element.style.left = this.left + 'px'; if (this.left > 400) clearInterval(this.id); }, start: function() { var self = this; this.id = s

    404 Blog Not Found:javascript - 勝手に添削 - JavaScript入門
  • Web標準とその周辺技術の学び方 記事一覧 | gihyo.jp

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    Web標準とその周辺技術の学び方 記事一覧 | gihyo.jp
  • 特集:prototype.jsを読み解く|gihyo.jp

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    特集:prototype.jsを読み解く|gihyo.jp
  • これでできる! クロスブラウザJavaScript入門 記事一覧 | gihyo.jp

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    これでできる! クロスブラウザJavaScript入門 記事一覧 | gihyo.jp
  • JavaScript DOM リファレンス

    <body> <h1>JavaScript DOM リファレンス</h1>

  • js2-modeを使ってEmacsでJavaScriptを書く

    更新履歴 2008-06-20: 公開 js2-mode をおとなしくさせる js2-mode は Emacs で JavaScript を書くための major-mode です。 外部の JavaScript 処理系無しに (flymake のように) 文法上のエラーを表示するなど、 かなり意欲的な機能を備えています。 しかしその一方で、js2-mode のデフォルトの挙動はかなり独特です。 ここでは、それらの挙動を他の major-mode とそろえる方法を説明します。 インストール js2-mode はファイル単体で配布されていますので、それを load-path の通った場所に置きます。 % wget http://js2-mode.googlecode.com/files/js2-20080616a.el % mv js2-20080616a.el /PATH/TO/js2.el

  • applyとcallの使い方を丁寧に説明してみる - あと味

    JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは? callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数(メソッド)を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.

    applyとcallの使い方を丁寧に説明してみる - あと味
  • javascript - プロトタイプ的継承完全版 : 404 Blog Not Found

    2006年10月18日21:00 カテゴリLightweight Languages javascript - プロトタイプ的継承完全版 Kazuho@Cybozuさま、いつもありがとうございます。 Kazuho@Cybozu Labs: JavaScript の String 型を継承する 結論から言うと、String 型も継承っぽいことができます。こんな感じ。 おかげでプロトタイプ的継承モデルの完全版が出来ました。 AtomicなObjectを継承 これは、以下のように包括的に出来ます。 var Atomic = function(C){ var P = function(v){ this._v = v; }; P.prototype = new C; P.prototype.valueOf = function(){ return this._v.valueOf(); } P.pro

    javascript - プロトタイプ的継承完全版 : 404 Blog Not Found