遊べるJavaScript入門ロゴ

私は、自分のHPに占いやクイズなどを作れるようにとJavaScriptの勉強を初めたのですが、そのために、このHPでは、JavaScriptをつかって自分で動くものを作れるような基礎的なものだけを取り上げています。 

イベントハンドラーを知ればかなり遊べる

「ボタンをクリックすると写真が表示されます」というように、「**をすると(この場合はボタンをクリックすると)」、何かの動作(この場合は写真の表示)をする…… というものが「イベントハンドラー」「イベントリスナー」と呼ばれるものです。

イベントハンドラーはHTML上に書いてscript部分に渡すという使い方をし、もう一方のイベントリスナーは<script>~</script>の中で動くように用いるものです。

イベントリスナーのほうが利用度が高いのですが、ここでは、動きがわかりやすい「イベントハンドラー」で、「ボタンをクリックすると写真が表示される」という例を取り上げます。


PR

「ボタンをクリックすると写真が表示する」イベントハンドラー

*********ここから

このボタンをクリックするとここに写真を表示します。

**********ここまで

もう一度見る場合は、F5でブラウザを再読み込みで。

プログラムコード

【HTML部分】
<p><button onclick="myAns();">ボタンをクリックすると写真が出ます</button></p>
<div id="myPic">このボタンをクリックするとここに写真を表示します。</div>
【JavaScript部分】
<script>
function myAns() {
let mySyasin = document.getElementById('myPic');
mySyasin.innerHTML = 'この本は、Indexのページで紹介したおすすめの本です。<br><img src="img/0385.jpg">';
}
</script>

このように、このHPでは短いプログラムコードしか扱っていませんので、説明しやすいように sprict部分 もHTMLといっしょに書いています。

コードをコピーしたい場合は、本文のコピーができないので、画面を右クリックして、ページのソースを表示させて、それで必要な部分をコピーしてください。

「*****ここから~ここまで」で区切った部分に必要なコードを書くようにしています。 また、ページに必要なCSSがある場合は、</head>の直上に書くようにしていますが、画像はコピーできないようになっているので、自分でコードを書く場合は、自分の画像を用意してください。

コードにあるように、私が勝手に作った変数は、わかりやすくするために、前に「my」のついた名前(ここでは myAns myPic mySyasinなど)にしています。 また、画像は「img」というホルダーに置いていますので、「img/***.jpg」などのようなパスになっていますので、自分のHPに書く場合は適宜変更してください。

このプログラムコードでは、まず、HTML部分でボタンを設置して、文章を置き換える部分にJavaScriptで参照するための「id=myPic」を設定しています。

ボタンのイベントの飛び先を「myAns」として、script部分で関数(function)を作って、先に書いている説明(myPic部分)を.getElementById で取得して、innerHTML で文章と写真を書き出している… というものです。

…… もっとも、最初からこのような説明は理解しにくいでしょうから、「こんなことをJavaScriptを使ってやっている」ということを見ておいて、ともかく、この書き方は基本的なものですから、これを真似して自分なりにアレンジしてHPを書いてみるのが覚える早道だと思います。 

ここで使っている、[button onclick=" "] [function] [.getElementById()] [innerHTML()] などは、このHPでよく使いますので、コードの書き方とともに覚えていくといいでしょう。


PR

イベントハンドラはいろいろなものが用意されています

ボタンがクリックされた、ページを読み込んだ、フォームの内容が変更された… などのときにJavaScriptを実行したいときに用いるものが「イベントハンドラー」で、「マウス操作に関連するもの」「ページの読み込みに関係するもの」「フォームに関連するもの」などがあります。

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

使い方は、<button onclick="myAns()> という上の使い方の他に、<input type="button" value="CLICK"> などといろいろな場合があるので、少しずつマネをして使いながら覚えていくようにすると良いでしょう。

このHPでは、クイズや占いなどを作る目的ですから、ほとんどにイベントハンドラーやイベントリスナーを使っています。

→こちら .addEventListener('click', my***)というイベントリスナーを使った記事があります。

→こちらで、イベントハンドラとイベントリスナーで書き方を比較しています。


記事の目次へ

PR

(来歴)R6.5作成  
PR
AmazonのJavascript本 送料無料

楽天ブックスは品揃え200万点以上!


記事の目次はこちら

電子工作の記事の目次へ