以下の本のChapter6-1の学習記録です!

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

  • 作者: 山田祥寛
  • 出版社/メーカー: 技術評論社
  • 発売日: 2010/11/27
  • メディア: 大型本
  • 購入: 29人 クリック: 673回
  • この商品を含むブログ (48件) を見る
クライアントサイドJavaScriptはイベントドリブンモデルに従っている。
イベントドリブンモデルとは?
・起動するとともにイベントを待機させ、起こったイベントに従って処理を行う。
・ページ内で発生したさまざまな出来事(イベント)に応じて対応する処理(イベントハンドラ)を呼び出し実行するモデル。

必要な情報

イベントドリブンモデルでは以下の3つを定義する必要がある。
・どの要素で発生した
・どのイベントを
・どのイベントハンドラに関連付けるのか
上2つはまとめてもいいのかも。

関連付けの方法(記述方法)

1.タグ内の属性として記述
タグ内で関連付け

<input type="button" value="ダイアログ表示" onclick="fn()">
<script>
var fn = function() {
  alert(clicked);
};
</script>

2.JavaScriptのコード内で記述
JSコード内で関連付け

<input id="btn" type="button" value="ダイアログ表示" />
<script>
window.onload = function(){
  document.getElementById(btn).onclick = function(){
    alert(clicked);
  };
};
</script>
<input id="btn" type="button" value="ダイアログ表示" />
<script>
function fnLiteral () {
  alert(aaa);
}
window.onload = fnLiteral;
</script>

on+<イベント名>に匿名関数を代入したり、関数オブジェクトを代入したりすることで関連付けを行います。(実際は関数にカッコをつけても付けなくても動く…。)
実際はイベントハンドラを使いまわすことはあまりないので匿名関数として記述する場合が多いらしいです。

感想

よくわかるJavaScriptの教科書

よくわかるJavaScriptの教科書

  • 作者: たにぐちまこと
  • 出版社/メーカー: マイナビ
  • 発売日: 2012/03/24
  • メディア: 単行本(ソフトカバー)
  • 購入: 1人 クリック: 52回
  • この商品を含むブログ (3件) を見る
これは深い理解は置いといて動くものを作ろうという本。
JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

  • 作者: 山田祥寛
  • 出版社/メーカー: 技術評論社
  • 発売日: 2010/11/27
  • メディア: 大型本
  • 購入: 29人 クリック: 673回
  • この商品を含むブログ (48件) を見る
それに対してこっちは体系的に理解することを目標にし、何かを作るのは二の次。
前者のほうが真新しさと言うか楽しさはありましたが、後者のような本をちゃんと読むことも大切ですね!