JavaScript, jQueryの雑多なメモ

2014年3月31日

ちょっとキレイにまとめる時間がないので、JavaScriptとjQueryの基本的なところの雑多なメモ書きです。調べている途中なので、間違いも含まれているかと思いますが、それはおいおい修正していきます。

＜即時関数＞

JavaScriptで即時関数を使ってその中にいろいろ記述するのは、スコープを作り出すため。JavaScriptでは{}で括るだけでは変数のスコープが閉じないが、関数の中ではスコープは閉じる（ただし、関数の中でも、varをつけない変数はグローバルスコープになる）。
なぜそこまでスコープを閉じる必要があるかというと、JavaScriptでは、一つのドキュメント上にたくさんのライブラリ（ライブラリまでいかなくとも、複数のJavaScriptファイル）が読み込まれることがあるから。そのときに、スコープが閉じていないと、各々のライブラリ変数が一つのドキュメント上で衝突する可能性がある。それを防ぐ為に、即時関数の形でローカルスコープをつくって、その中で変数を定義している。
即時関数の書き方は色々ある。「function() { // なんらかの処理 })();」が最もよく見られるかたちだが、それ以外にも、「!function(){// なんらかの処理}();」という書き方もある。
引数を与える場合は、「function(msg) { console.log(msg);})(‘Hi’);」のように書く。

＜DOM（Document Object Model）＞

DOMは、文書データ（HTML）をどのようにオブジェクトとして表すかを規定する仕様。JavaScriptがHTML要素を扱う為のAPIと捉えてもよい。
HTMLをオブジェクトとして表現するために、「document」というオブジェクトを想定し、document.getElementByIdなどのメソッドで、各htmlタグの要素をオブジェクトとして扱えるようにした。

＜jQuery＞

「$(…)」はjQueryオブジェクトを取得するための関数。jQueryオブジェクトは、内部にDOM要素を保持したオブジェクトである。
「$(…)」の引数の与え方は３種類。
- $(“CSSセレクタ”) … 元々はCSSで使われていた書式を、jQueryにも流用した。
- $(DOMオブジェクト) … $(document)や、$(document.getElementById(‘main’))など。
- $($(…)で指定済みの要素（<-変数名を入れる）)
onメソッドはセレクタで指定した要素に、イベントが発生した時に実行するfunctionを設定する（offは設定の解除）。書き方は複数あるが、とりあえず以下の２つを覚えておく。
- jQueryObject.on(イベント名, function(){})
  - 例）$(“#hogehoge”).on(“expand”, function(){…})
- 調査範囲.on(イベント名, セレクタ, function(){})
  - 例）$(document).on(“pagebeforeshow”, “#hogehoge”, function(){…})
後者は動的に追加される要素に対してもイベントを設定できる。詳しくはこちらを参照。

＜jQuery Mobile＞