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