このHPのJavascriptは、クリックすると写真を表示するという方法です。専門的な内容ではありません。

ここでは、ボタンをクリックするとJavaスクリプトで写真が表示するものですが、「ボタンを押すと何かの動作をする」という場合には、イベントハンドラーやイベントリスナーというものを使いますが、ここでは、HTML上に書くイベントハンドラーを取り上げます。　

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

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

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

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

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

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

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

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

下のコードのように、イベントハンドラー部分はHTMLに書き、入れ替えるための説明文や画像はあらかじめ準備しておいて、<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」にしています。Pを大文字にしているのは、やはり見やすくするためです。

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

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

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

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

PR

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

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

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

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

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

PR

---