5月7日(木)1、2コマ目
今日、やったこと
- [練習問題]練習問題3
- [練習問題 解説]練習問題3
- イベントとイベントハンドラ
今日のホワイトボード
[練習問題 解説]練習問題3
正解例をあげておきます。
3-1
オブジェクトの配列を作る問題。
3-2
配列の要素の最小値、最大値を検索。
3-3
オブジェクトにメソッドを追加。
メソッドからプロパティにアクセスするには
this.プロパティ名
でアクセス。
3-4
メソッドは
プロパティ名: function() { }
を
プロパティ名() { }
と ：function を省略できる。
3-5
メソッドの引数。
3-6
3-4のオブジェクトを配列化。
3-7
プロパティを関数が代入された変数にすることで、メソッドを作ることもできる。
HTMLのイベント処理をJavaScriptで行う
HTMLのボタンクリックやテキストボックス入力などのイベントが発生した際、JavaSriptで処理を行うことができる。
タグのonXXX属性でイベントとイベントハンドラを紐づけ
イベントとイベントハンドラ（処理を行う関数）の紐づけはタグの onXXX属性 で設定できる。（下図の上）
|
| 図 タグのOnXXX属性でイベントとイベントハンドラを紐づけ（上図の上） |
イベントハンドラに自作関数を指定
当然、自作関数をイベントハンドラに指定することもできる。
JavaScriptでタグとイベント、イベントハンドラを紐づけ
タグのOnXXX属性を使わずに、JavaScriptだけでタグとイベント、イベントハンドラの設定もできる。
①querySelector()関数でタグを取得
②取得したタグのonXXXプロパティにイベントハンドラ(関数)への参照をセット
 |
| 図 onclickプロパティに関数への参照を代入する |
ブラウザはJavaScriptをいつ実行する
HTMLファイルを上から順に読み込む。
JavaScriptが含まれていたら、順に実行する。
以下は動かない。
ブラウザはHTMLを上から下へ順に評価する。
querySelector()関数で、id=btn1のタグを探すとき、まだこのタグが登場していないため、querySelector()関数は見つけることができない。
|
| 図 ブラウザはHTMLファイルを上から下へ評価する |
以下のように、id=btn1のタグを指定後、querySelector()関数でタグを探す。
また、onclick=の右辺はイベントハンドラ関数への参照。
showAlert("押されました")だと関数を実行し、戻り値をonclickに代入することになる。
関数への参照を作るには、無名関数を使う。
onXXXの代わりにaddEventListener()関数を使う
onXXXの代わりにaddEventListener()関数でイベントとイベントハンドラを設定できる。
addEventListener()の第2引数は関数名。=> 引数指定はできない。
|
| 図 addEventListener()関数でイベントとイベントハンドラを紐づけ |
addEventListener()関数でイベントハンドラに値を渡す
addEventListener()の第2引数をオブジェクトにすれば、イベントハンドラに引数を渡すことができる。
〇イベントハンドラ関数の引数
引数はなし。
× function showAlert(msg)
〇 function showAlert( )
〇第2引数のオブジェクト
- プロパティ名handleEventでイベントハンドラの関数名を指定
- イベントハンドラ関数内では this.プロパティ名 でオブジェクト内のプロパティにアクセスできる
となっている。
 |
| 図 addEventListener()でイベントハンドラに値を渡す |
次回は
練習問題。
