JavaScriptの文法。ユーザー定義関数、イベントハンドラを紹介します!

JavaScript ユーザー定義関数 web制作

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文法はこちらから見られます。