私は、自分のHPに占いやクイズなど組み込みたいとJavaScriptの勉強を初めましたので、このHPでは、その目的に絞ったavaScriptの基礎的なものだけを取り上げています。
ここでは[button onclick=" "] [function] [.getElementById()] [innerHTML()]などを使って簡単なコードを紹介しています。
「クリックすると写真が表示」 イベントハンドラーの例
＊＊＊＊＊＊＊＊＊プログラムはここから
＊＊＊＊＊＊＊＊＊＊プログラムはここまで。
もう一度見る場合は、F5でブラウザを再読み込みしてください。
イベントハンドラーが使えれば、いろいろと遊べます
「ボタンをクリックすると写真が表示されます」というように、「＊＊をすると（この場合はボタンをクリックすると）」、何かの動作（この場合は写真の表示）をする…… というものが「イベントハンドラー」「イベントリスナー」と呼ばれるものです。
イベントハンドラーはHTML上に書いてscript部分に渡すという使い方をし、もう一方のイベントリスナーは<script>～</script>の中に書いて用います。
イベントリスナーのほうが利用度が高いのですが、ここでは、動きがわかりやすい「イベントハンドラー」で、「ボタンをクリックすると写真が表示される」という例を取り上げています。
プログラムコード
【HTML部分】
<p><button onclick="myAns();">ボタンをクリックすると写真が出ます</button></p> //①ボタン設置
<div id="myPic">このボタンをクリックするとここに写真を表示します。</div> //②idをつける
【JavaScript部分】
<script>
function myAns() { //③myPicのidのところに説明と写真を表示するための関数
let mySyasin = document.getElementById('myPic');
mySyasin.innerHTML = 'この本は、Indexのページで紹介したおすすめの本です。<br><img src="img/0385.jpg">';
}
</script>
このように、このHPでは、説明しやすいように sprict部分 もHTMLといっしょに書いています。
なお、本文はコピーできないので、画面を右クリックして、ページのソースを表示させてHTML部分をコピーしてください。また、本文の画像もコピーできませんので、自分でコードを書く場合は、別に自分の画像を用意してください。
コードでは、私が作った変数は、前に「my」のついた名前（ここでは myAns myPic mySyasinなど）にしています。 また、画像は「img」というホルダー内に置いていますので、「img/＊＊＊.jpg」などのようなパスになっていますから、自分用に書く場合には適宜変更してください。
【プログラムの流れ】 まず、①HTML部分でボタンを設置して、②文章を置き換える部分にJavaScriptで参照するための「id=myPic」を設定しています。
ボタンのイベントの飛び先を「ｍｙAns」としているのが③のfanction部分で、そこでは、先に書いている説明（myPic部分）を.getElementById で取得して、innerHTML で文章と写真を書き出しています。
最初からこのような説明は理解しにくいと思いますが、「こんなことをJavaScriptを使ってやっている」ということを見ておいてください。
ともかく、この書き方を真似して、変数名などを自分のものに変更して、動かしてみるのが理解への早道だと思います。
ここで使っている、[button onclick=" "] [function] [.getElementById()] [innerHTML()] などは、このHPでよく使っているものです。
イベントハンドラはいろいろなものが用意されています
ボタンがクリックされた、ページを読み込んだ、フォームの内容が変更された… などのときにJavaScriptを実行したいときに用いるものが「イベントハンドラー」で、「マウス操作に関連するもの」「ページの読み込みに関係するもの」「フォームに関連するもの」などがあります。
よく使いそうなものをあげると、マウスをクリックしたとき「onclick」 マウスを文字や写真の上においたとき「onmouseover」 マウスを外したとき「onmouseout」 ページが読み込まれたとき「onload」 別のページに移動したとき[onunload」 エラーが発生したとき「onerror」 フォームの内容が変更されたとき「onchange」 submitボタンがクリックされたとき「onsubmit」 その他があります。 いろいろな場面に使えそうな感じがするでしょう。
使い方は、<button onclick="myAns()> という上のコードにある使い方の他に、<input type="button" value="CLICK"> と書く場合があります。
このHPでは、クイズや占いなどを作る目的ですから、ほとんどにイベントハンドラーやイベントリスナーを使っています。
→こちら .addEventListener('click', my＊＊＊)という、サイコロを振るときにイベントリスナーを使った記事が、またこちらにも、写真をクリックすると説明が出る例など、いろいろなところで使っています。
→こちらで、イベントハンドラとイベントリスナーで書き方を比較しています。
