前回のflashcast：フリーで働くITエンジニア集団のブログ: jQueryを使って、htmlとcssを分離するようにjavascriptも分離してみる（GAMEの仕様を決める編）の続きです。
実際にゲームを作っていく前に、今回は、具体的にどうやって分離するかを解説します。
まずは、htmlとcssの分離をやってみましょう。
まずはhtmlに文書構造を表すdivやspanなどのタグと文章を書きます。
タグには、idまたは、classを定義して意味づけをします。
あとは、cssのセレクタで、タグやid、classを指定して、デザインを定義してあげます。
たとえばdivタグに、idを定義して
<div id="test">テスト</div>
cssで、そのidに対して、スタイルを定義します。
#test {
background-color:#555555;
}
こんな感じで作成することによって、htmlとcssを分離することができます。
では、htmlとjavascriptの分離はどうすればいいでしょうか？
たとえば、onClickなどのイベントをhtmlに直接書いたりすることがあると思います。
そういった記述を、jsファイルのほうに書くようにします。
そんなことが可能なのでしょうか？
たとえば、getElementByIDやgetElementsByTagNameなどを使用すれば、ある程度は要素を特定できます。
そうすれば、そのelementに対して、イベントを定義することが可能です。
とはいえ、面倒ですし、いちいちid指定をしたりしなくてはならず、柔軟性がありません。
そこで、jQueryの出番です。
jQueryは、cssと同様のセレクタが使えますので、cssで対象を指定をした時と同じ感覚で、イベント等の設定ができます。
たとえば、さっきのdivタグに、clickイベントを定義する場合は
$("#test").click(start);
といった感じになります。
htmlで定義したidやclassを、cssでもjavascriptでも利用できるので、わかりやすく簡単にイベントが定義できます。
次回は、今回の知識を生かして、今回作るゲームの枠組みを作ってみましょう。
