このHPのJavascriptは、「できるといいなぁ」という簡単な動作の方法を紹介しています。

ここでは、ボタンをクリックすると写真が表示するものです。

「ボタンを押すと何かの動作をする」という場合に、イベントハンドラーというものを使います。　

これには、[button onclick=" "]　や　[function]　[.getElementById()]　[innerHTML()] などがあり、これらの使い方の基本がわかると、いろいろ応用できるでしょう。

イベントハンドラー　onclick　の使用例

「ボタンをクリックすると写真が表示されます」というように、「＊＊をすると（この場合はボタンをクリックすると）」、何かの動作（この場合は写真の表示）をする……　というものに「イベントハンドラー」「イベントリスナー」があります。（イベントリスナーはこちらの別のページで紹介しています）

＊＊＊＊＊まず、その例で、ボタンを押してプログラミムを動作させてみましょう。

ボタンをクリックすると写真が出ます

＊＊＊＊＊＊＊＊＊＊サンプルプログラムはここまで。

これだけの単純な内容ですが、ボタンをクリックすると、説明文が新しい説明文に変わり、そして、その下に画像が表示されます。

写真や文章を変えルト、いろいろな場面に使えるものです。

入れ替えるための説明文や画像はあらかじめ準備しておいて、<script>～</script>の中に書くといいのです。

（注）もう一度動作をさせる場合は、F5を押してブラウザの再読み込みしてください。

イベントハンドラーを使うと、いろいろと遊べます

イベントハンドラーはHTML上に書いてscript部分に渡す…　という使い方で、もう一方のイベントリスナーは、HTML上に書くのではなく、　<script>～</script>　の中に書いて用います。

<script>～</script>のスクリプト部分にまとめて記述するので、イベントリスナーのほうが利用（応用）しやすいのですが、ここでは、動きがわかりやすい「イベントハンドラー」で、「ボタンをクリックすると写真が表示される」という例を取り上げています。

イベントハンドラはいろいろなものがあります

「ボタンがクリックされた」「ページを読み込んだ」「フォームの内容が変更された」　などが「イベント」ですが、それによってなにかをさせたいときに用いるものが「イベントハンドラー」です。

大きく分けて「マウス操作に関連するもの」「ページの読み込みに関係するもの」「フォームに関連するもの」などがあります。

よく使いそうなものをあげると、マウスをクリックしたとき「onclick」　マウスを文字や写真の上においたとき「onmouseover」　マウスを外したとき「onmouseout」　ページが読み込まれたとき「onload」　別のページに移動したとき[onunload」　エラーが発生したとき「onerror」　フォームの内容が変更されたとき「onchange」　submitボタンがクリックされたとき「onsubmit」　その他があります。　

PR

プログラムコードの説明

【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>

②③のように、私が作った変数は、前に「my」のついた名前（ここでは　myAns　myPic　mySyasinなど）にしてコードが見やすいようにしています。　

また、画像は「img」というホルダー内に置いていますので、「img/＊＊＊.jpg」などのようなパスになっています。　自分用に適宜変更してください。

【プログラムの流れ】　まず、①HTML部分でボタンを設置して、②文章を置き換える部分にJavaScriptで参照するための「id=myPic」にしています。

③のfanction部分では、ボタンのイベントの飛び先を「ｍｙAns」として、先に書いている説明（myPic部分）を　.getElementById　で取得して、　innerHTML　で文章と写真を書き出すう動作をさせています。

このように、説明を文字で書くとわかりにくくなりますが、「こんなことをJavaScriptを使ってやっている」ということを見ておいてください。

ともかく、この書き方を真似して、変数名などを自分のものに変更して、動かしてみるのが理解への早道だと思います。　

ここで使っている、[button onclick=" "]　[function]　[.getElementById()]　[innerHTML()]　などは、このHPのいろいろなところで使っているので、「こうすればいい」というところを見ておいてください。

PR

更に動作を付け加えて改良しましょう

上のコードでは、「id」で指定した部分の文章を画像に置き換えていますが、その他の方法もたくさんあるので、まず、自分なりに使える方法を「使えるようになる」ようにすると良いでしょう。

ここでは、　<button onclick="myAns()>　という使い方ですが、それ以外に、<input type="button" value="CLICK"> と書いて使う場合もこのHPの他のページで使っています。

このHPは、クイズや占いなどの簡単なプログラムを動かせるのが目的なので、イベントハンドラーやイベントリスナーを多用しています。

→こちら　.addEventListener('click', my＊＊＊)という、サイコロを振るときにイベントリスナーを使った記事が、またこちらにも、写真をクリックすると説明が出る例など、いろいろなところで使っています。

PR

---