プログラミング最初の一歩 JavaScriptイベント
これまではHTMLを開いたときにJavaScriptが実行されました。そうではなく、ユーザが何かをしたタイミングでJavaScriptは実行することができます。それがイベントです。例えば、ボタンを押したときにこの関数を実行する、このタグの上にマウスカーソルが来たらこの関数を実行する、といった具合です。イベントにはあらかじめ決まった名前が付いています。例えば、何かをクリックしたとき、というのは、onClick というイベントが発生します。これはタグの属性として書くことが出来ます。例えば、Pタグの部分をクリックしたら kansu() という関数を実行することにします。これは以下のように書くことができます。
<p id="p1" onclick="kansu()"> これはテストです。 </p>
onClick=の後には通常のJavaScriptを書くことが可能です。
関数 kansu() の中でPタグの色を赤に変えることにします。
このHTMLファイル全文は以下のようになります。
<html>
<body>
<h1>javascriptのテスト</h1>
<p id="p1" onclick="kansu()">
これはテストです。
</p>
<script type="text/javascript">
function kansu()
{
document.all.p1.style.color = "red";
}
</script>
</body>
</html>
このHTMLファイルを開いたとき、「これはテストです」と画面が出ているところをクリックすると、文字が赤に変わります。
例えば、ボタンを押したとき、というようなイベントを作りたいのであれば、まずボタンをHTMLタグで作る必要があります。それは以下のようなタグです。
<input type="button" value="ボタン">
このタグはボタンが表示されそのボタンに「ボタン」という時が表示されます。
それにOnClickイベントを付けます。例えば、以下のような感じです。
<input type="button" value="ボタン" onclick="kansu()">
これでそのボタンを押したときに kansu() が呼ばれて実行されることになります。
他にも様々なイベントがあります。例えば、マウスのカーソルがその上に来たら何か関数を実行したい、という場合には、onMouseOverというイベントを使います。例えば、ボタンの上にカーソルが来たら、という場合には以下のようにします。
<input type="button" value="ボタン" onmouseover="kansu()">
なお、イベントに対応する関数を書く場合には、以下のようにheadタグ内にscriptタグを作ってプログラムを書くのが普通です。例えば、以下のような感じです。
<html>
<head>
<script type="text/javascript">
function kansu()
{
document.all.p1.style.color = "red";
}
</script>
</head>
<body>
<h1>javascriptのテスト</h1>
<p id="p1" onclick="kansu()">
これはテストです。
</p>
</body>
</html>
問題12-2：
ボタンを押したときにH1タグの部分の色を赤（red）にしてみましょう。