日々のメモ帳

プログラミングで学んだ事や趣味でやっている事などを記録しています。

JavaScriptの勉強 6日目(イベント その1)

 JavaScriptの大事な分野。勉強に使っている本に色々書いているので「あー、そういうことね理解した(※していない)」を回避するために情けないですが2回に分けます

 

◆イベント、イベントハンドラ

 

 イベントとは何らかの事象の事です。JavaScriptにとってのイベントは、文章が読み込まれた、マウスがクリックされた、マウスが移動した、キーが押下された、タイマーの時間が来た、といったものです。

 

イベントハンドラ

 

 イベントが発生した時に実行される関数を「イベントハンドラ」と呼びます。例えば、誕生日というイベントにとっては、誕生日パーティーがイベントハンドラに該当するでしょう。JavaScriptでは「プロパティに関数を代入する」という方法でイベントハンドラを設定します。

 

<!DOCTYPE html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>イベントハンドラの使用例</title>

    <script> window.onload = init;  


                  function  init() {

                      var h = document.getElementById("title");

                      h.textContent = "はじめまして";

                   }

 

    </script>

</head>
<body>

    <h1 id="title">こんにちは</h1>

</body>

</html>

 <script>~</script>において、まずはwindowオブジェクトのonloadプロパティにイベントハンドラinitを登録しています。こうすると、文章の読み込み完了後に関数initがが呼び出されます。イベントハンドラ関数initの中では、「id="title"」という要素を取得し、そのtextContentプロパティに文字列を代入することで表示を「はじめまして」に更新しています。