 1.イベントハンドラを使いこなせ |
<html><head>
<script language="JavaScript">
function clickhere(){
alert("クリックしたな〜");
}
</script></head>
<body>
<a href="JavaScript:clickhere();">ここをクリック</a>
</body></html>
|
…え？ このプログラムは、さっき書いたものと同じじゃないかって？ …そうです（笑）。それでは、もう少し凝ったものを書いてみましょうか。当たりの場所を探す、「宝探しゲーム」です。
<html><head>
<script language="JavaScript">
function clickhere1(){
alert("はずれ");
}
function clickhere2(){
alert("あたり");
}
function clickhere3(){
alert("はずれ");
}
</script></head>
<body>
宝探しゲーム！ どこか好きなところをクリックしてね。<br>
<a href="JavaScript:clickhere1();">その１</a><br>
<a href="JavaScript:clickhere2();">その２</a><br>
<a href="JavaScript:clickhere3();">その３</a><br>
</body></html>
|
このゲームでは、その２をクリックしたときのみ、関数「clickhere2()」が実行され、当たりが表示されるようになっています。ちょっとゲームっぽくなったと思いませんか？
しかし、このプログラムは、<script>内に同じような関数を３つも書いているので、少し無駄が多くなっています。ちょっと修正しましょう。
<html><head>
<script language="JavaScript">
function clickhere(n){
if(n==2) alert("あたり");
else alert("はずれ");
}
</script></head>
<body>
宝探しゲーム！ どこか好きなところをクリックしてね。<br>
<a href="JavaScript:clickhere(1);">その１</a><br>
<a href="JavaScript:clickhere(2);">その２</a><br>
<a href="JavaScript:clickhere(3);">その３</a><br>
</body></html>
|
関数が、clickhere １つだけになりました。その代わり、括弧の中に数字が入っています。これを専門用語で「引数（ひきすう）」と言います。
タグ<a href="JavaScript:clickhere(1);">の部分では、引数の中身は数値（又は文字列）、関数のfunction clickhere(n)の部分では、引数の中身は変数です。これは例えば、「関数clickhere(1)を実行するときは、nに1を代入しなさいよ」ということになります。
関数clickhereの中身は、if文が書かれていて、n==2の時、すなわち clickhere(2)が実行されたときのみ、当たりを表示するプログラムになっています。
とりあえず宝探しゲームの完成です。しかし、この程度のプログラムならHTMLの<a>タグを駆使すれば作れそうです。そこで、もう少しJavaScriptらしさを出すために、「１回しかクリックできない」ようにしてみます。
<html><head>
<script language="JavaScript">
var count=0;
function clickhere(n){
count++;
if(count==1){
if(n==2) alert("あたり");
else alert("はずれ");
}
else{
alert("２回もクリックしちゃ、ダメダメ！");
}
}
</script></head>
<body>
宝探しゲーム！ どこか好きなところを１回だけクリックしてね。<br>
<a href="JavaScript:clickhere(1);">その１</a><br>
<a href="JavaScript:clickhere(2);">その２</a><br>
<a href="JavaScript:clickhere(3);">その３</a><br>
</body></html> |
ここでは、変数 count を使って、クリックした数をカウントしています。まず、ページがロードされたときに、変数 count を初期値０で宣言し、clickhere(n)が実行されるたびに１を加えます（count++）。そして、count が１ならクリック１回目と見なし、nを判定するif文へ移ります。count が２以上なら、別のメッセージを表示します。
なお、リロード（更新）すると、全ての変数がリセットされるので注意してください。
さて、宝探しゲームでは、リンクをクリックしたときに関数を実行しました。この「クリックする」といった動作をまとめて「イベントハンドラ」と呼びます。主なイベントハンドラを下に挙げます。宝探しゲームの中身を変更して、いろいろ試してみましょう。
| イベントハンドラ | 内容 | 使用例 |
|---|---|---|
| onClick | リンクやボタンがクリックされたときに実行。<a href="JavaScript:clickhere(2);">と同じ。 | <a href=# onClick="clickhere(2);">*1 |
| onMouseOver | マウスがリンクの上に乗ったとき実行。 | <a href=# onMouseOver="clickhere(2);"> |
| onMouseOut | マウスがリンクから離れたとき実行。 | <a href=# onMouseOut="clickhere(2);"> |
| onLoad | ページがロード完了されたときに実行。 | <body onLoad="clickhere(2);"> |
| onUnload | 他のページへ移動するときに実行。 | <body onUnload="clickhere(2);"> |
| onChange | テキストボックス等の中身が変更されたときに実行。 | <form><input type=text onChange="clickhere(2);"></form> |
| onSubmit | 送信ボタンを押したときに実行。 | <form onSubmit="clickhere(2);"><input type=submit></form> |
*1 a href=# は、リンク先がないことを示します。試しにクリックしてみると分かりますが、ページはどこにも移動しません。（ページを移動させたい場合は、a href= の後にファイル名を入れてください）