onclickやclick　は、ボタンをクリックすると説明文が表示されるというような場合に使うイベントハンドラーやイベントリスナーの例です。

イベントハンドラーとイベントリスナー

イベントハンドラーはHTML上に書くもので、イベントリスナーは<script>～</script>に書く　…　というものと覚えているといいでしょう。

前のページ（→こちら）では、イベントハンドラーの　onclick　を使って、ボタンなどをクリックすると小窓に説明を表示する場合は1行で書けるもので簡単な例を示しましたが、この、クリックする操作やマウスを画像の上に置くという動作をイベントといい、それによって、何かのアクションを起こすのに使われるのがイベントハンドラーやイベントリスナーと呼ばれるものです。

それらを使って、例えば、クリックすると文字や画像を表示するという動作を行いますが、簡単な例でその違いなどを紹介します。

JavaScriptを使って何かの動作をさせる場合に、決まった方法というものが決まっていない（言い換えれば、自由に書くことができる）ので、自分なりのやり方に慣れるようにしないといけないようです。

下の方法（書き方）は「比較的簡単に書けて、エラーもなく、うまく動く例」ですので、参考になれば使ってください。

過去にテキストを表示する「document.write」という書式が一般的に使われていましたが、トラブルが起きる危険性（→こちらで紹介）から、現在はこれを使ってはいけない（非推奨）となっていますから、ここでは、汎用的な命令（メソッドやプロパティーなど）とイベントハンドラーやイベントリスナーを使う方法でテキストを表示させています。

イベントハンドラーonclickを使う　

＊＊＊下の画像をクリックすると説明（回答）が表示されるJavaScriptです。

これはナンバープレートの図柄ですが、どこの市町村のものでしょうか？

＊＊＊ここまでです。　再動作させる場合は「F5」で再読み込してください。

このJavascript（イベントハンドラ）

<p><img src="img/p03-hirakata.jpg" width="300" height="154" alt="テスト画像" onclick="myDraw()"></p> 　//画像をクリックすると変数「myDraw」に飛ぶ。
<p id="myPic">これはナンバープレートの図柄・・・（略）</p>
　　　　　　//このid="myPic"部分の文章を入れ替えて表示する。
<script>
function myDraw() {　　　　　//「myPic」の内容に変えて表示する。
document.getElementById('myPic').textContent = '「ひらパー」　・・・（略）';
}

</script>

コードに示した//以降の文章は注釈です。　

コードのコピーは、画面を右クリックして、ページのソースを表示させて、コピーして利用ください。

画像はすべて「img」というホルダーにおいているので、img/p03-hirakata.jpg　のような表記になっています。　これは読み取れませんので、自分で画像を用意して、指定のホルダーにおいてください。

コード中の「ｍｙ＊＊」のようにmyをつけているのは「変数」で、JavaScriptのメソッドなどと区別できてわかりやすくするために勝手に名付けているものです。

この動作やコードの考え方について

画像をクリックすると、「onclick」で関数の「myDraw」を呼び出して、document.getElementById('myPic').textContent =　で、最初に書いてある文章を「textContent」で新しい文章に変えて表示させています。

このdocumentは「オブジェクト」と呼ばれるもので、「.getElementById（）」は「メソッド」、そして、「.textContent」は「プロパティー」と呼ばれます。

つまり、ここでは、「＝」の右のテキスト文を 「.textContent」で表示しなさい　…　というものです。

メソッドとプロパティーの違い　については、プロパティーはその後ろにイコール「＝」があるもの　…　という覚え方をするとわかりやすいかもしれません。

ここで使った書き方（考え方）は、その他でも使えるでしょうから、これをマネて使うといろいろな場面で使えるでしょう。

「.getElementById(）」は、「idを取得する」という表現をされていることが多いのですが、テキストを書き出す位置を指定する　…　というためのものです。

PR

イベントリスナー　click　を使う

上ではイベントハンドラー「onclick」を使っていますが、これは、HTLM部分にonclickが書かれています。

このイベントハンドラーは簡単で使いやすいのですが、HTMLとscript部分にまたがるとわかりにくくなるという欠点もあるので、そのために、script内で完結させる「イベントリスナー」があります。

少し行数の多いJavaScriptになると、コードが見やすくなるようにJavaScript部分を別ファイルにして読み込ませる場合が多くなるのですが、その場合はイベントハンドラーではなく、script内に「イベントリスナー」をおいてscript内で完結させる方法にしたほうがスッキリするでしょう。

それを見ていただくために、上と同じようなコードを、イベントリスナーを使って書いてみました。　コードから両者の違いを見ておいてください。

＊＊＊＊＊＊＊＊＊＊＊ここからプログラム　画像をクリックすると答えが表示。

ラグビーボールと人工衛星の図柄はどこの市町村のナンバープレートでしょう。

＊＊＊＊＊＊＊＊＊＊＊ここまでがプログラム

再動作させる場合は、「F5」で再読込してください。

イベントリスナーを使ったJavaScript

<p><img id="myDraw2" src="img/p02-higasio.jpg" width="300" height="152" ></p>
<p id="myPic2">ラグビーボールと人工衛星の図柄は・・・（略）</p>

<script>

document.getElementById('myDraw2').addEventListener('click', myTxtdraw ) ;

function myTxtdraw() {
document.getElementById('myPic2').textContent = '大阪府東大阪市の・・・（略）　';
}

</script

このように、上のイベントハンドラーを使った場合との違いは、script内にある1行目です。

myDraw2の画像をクリックすると、.addEventListener（）によって、myTxtdrawという関数を呼び出しに行って、そこで、myPic2の内容を書き換える　…　という動作をしています。

ここでは、HTMLに書いた2行のあとに　<script>～</script>　を書き流していますが、一般的には、</body>の上（すなわちHPの最後部分）にscriptファイルを置くのが普通です。

そして、行数の多い場合は、このページと別のところにおいているファイル（拡張子が「.js」）のファイルを呼びに行くようにします。（このやり方は、こちら　のページでも紹介しています）

PR

分離して書いたJavaScriptを呼び出す書き方

このHPはJavaScriptの説明用なので、全て、HPに上から順にHTMLの中にJavaScriptを書いていますが、例えば、この場合でも、

<p><img id="myDraw2" src="img/p02-higasio.jpg" width="300" height="152" ></p>
<p id="myPic2">ラグビーボールと・・・（略）</p>
<script src="js/mypicture.js"></script>   //mypictureは適当に決めた名前

として、たとえば、「maypicture.js」と勝手な名前をつけたファイルをこのHPと別の場所（ここでは「jsホルダー」）に置くのが一般的です。　

<script>～</script>　の部分を別のホルダーに置いておけば、どこからでも、何回でも、これを引っ張ってきて使えますし、そのscriptファイルは外部から見えないので、他の人からはわからないようにJavaScriptを動作させることができます。これが一般的な書き方です。

PR

---