JavaScriptのユーザー定義関数と、セットで使用するイベントハンドラについて簡単に紹介していきます。
JavaScript ユーザー定義関数
ユーザー定義関数は、名前を付けてプログラムをまとめたものです。
まとめたプログラムを実行したいときは、名前を呼び出すだけで可能です。
文法はこちら。
function 関数名(引数){
スクリプトを記述
}関数名は任意の名前がつけられます。
また、引数にはスクリプト内容に引き渡すための補足データを記述します。これは省略もできます。
これはあくまでもプログラム待機状態なので、呼び出さないとプログラムは実行されません。
呼び出し方はこれです。
関数名();
こんな感じで、1度ユーザー定義関数を準備しておけばいつでも簡単にプログラムを実行することが出来ます。
JavaScript イベントハンドラ
続いてイベントハンドラの紹介です。
イベントハンドラは、先ほどのユーザー定義関数をある動作(イベント)をきっかけにして呼び出すときに使うものです。ユーザー定義関数とセットで使います。
JavaScriptには、ボタンをクリックしたとき、フォームが入力されたときなど、細かいイベントに応じてスクリプトを実行する機能があります。
実際の記述方法と、簡単なイベントハンドラを紹介します。
<タグ イベントハンドラ=“関数名()”>
イベントハンドラは、スクリプト内に記述するのではなく、こんな感じでhtmlタグの中に書き込みます。
イベントハンドラの動作を紹介
| イベントハンドラ | 動作 |
| onclick | クリックしたとき |
| ondblclick | ダブルクリックしたとき |
| onblur | フォーカスが外れたとき |
| onfocus | フォーカスが当たったとき |
| onchange | フォームの入力内容が変更されたとき |
| onerror | 読み込みが失敗したとき |
| onload | 読み込んだとき |
| onmousemove | マウスが移動したとき |
| onmouseup | マウスをクリックして離れたとき |
| onmousedown | マウスをクリックしたとき |
| onmouseover | マウスポインタが乗ったとき |
| onmouseout | マウスポインタが離れたとき |
| onreset | リセットボタンが押されたとき |
| onsubmit | 送信ボタンが押されたとき |
| onselect | テキストが選択されたとき |
| onkeyup | キーを押して離れたたとき |
| onkeydown | キーを押したとき |
最後に
スクリプトを動かすきっかけとして、ユーザー定義関数とイベントハンドラはよく使います。
ユーザー定義関数はいってしまえば、スクリプトをまとめたものなので、これ自体は簡単に使えるようになると思います。実際のスクリプト部分は他の記事をご覧ください。
他のJavaScript文法はこちらから見られます。


