読者です 読者をやめる 読者になる 読者になる

【JS】ブラウザオブジェクト

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

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

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

クライアントサイド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の教科書

これは深い理解は置いといて動くものを作ろうという本。
JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

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

それに対してこっちは体系的に理解することを目標にし、何かを作るのは二の次。
前者のほうが真新しさと言うか楽しさはありましたが、後者のような本をちゃんと読むことも大切ですね!