日々のメモ帳

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

JavaScriptの勉強 7日目(イベント その2)

  暑い……_(:3 」∠)_ CanvasjQueryのどちらを先にをやるべきか悩みつつ、JavaScriptを使ったWebページを作ってみようと思うので考え中。少しずつ写経するだけの状態からは抜け出さないといけないと思うので…とりあえずCODEPREPで勉強しようかなと思います。

 

◆ボタンのクリック

f:id:kouzi_prog:20180516163425p:plain

  ボタンを押すと画面の表示が更新されるコードです。GitHubの方にも置いてます。

github.com

 ここの「イベント2.html」。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <title>ボタンのクリック</title>

    <script> 

   window.onload = function() {        

    document.getElementById("yes").onclick = yeshandler;                      document.getElementById("no").onclick = nohandler;

           }

      function yeshandler(e) {                       document.getElementById("status").textContent = "はいが選ばれました"               }

           function nohandler(e) {        document.getElementById("status").textContent = "いいえが選ばれました"             }

    </script>

 </head>
<body>

    <button id="yes">はい</button>

    <button id="no">いいえ</button>

    <h2 id="status"></h2>

</body>

</html>

 

 都合上コメントを削除しましたが、"function yeshandler(e)"と

"function nohandler(e)"は以下のように一つにまとめる事ができます。

 

function  myhandler(e) {

    document.getElementById("status").textContent =

        e.target.textContent + "が選ばれました"

}

  myhandler()の中にあるe.targetの変数eはイベントハンドラが呼び出される時の引数で、ブラウザが値を設定してくれます。変数eのtargetプロパティにはイベントを発生させた要素、すなわちbutton要素への参照が格納されます。つまり、このプロパティをみればどのボタンが押下されたかが分かるのです。あとは、要素のtextContentプロパティからボタン野良別文字列を取得し、その内容を設定します。

 

 しかし、一口にイベントといっても多くのバリエーションがあり、それぞれに付随する情報は異なります。例えばinput要素でスライダバーが操作された時は、値が変化した旨の情報があれば充分ですが、canvas要素などでマウスが操作されたのであれば座標情報も必要となるでしょう。

 

 明日からは関数オブジェクトをやっていきます。それが終わったらcanvasもやってみようかなと。