▲
}
★・・・関数名 ♦・・・引数【省略可】 ▲・・・定義する内容 |
プログラムの中で繰り返し行われる計算や作業をまとめ、何度でも繰り返し使えるようにしたものを関数と言います。JavaScriptでは、あらかじめ用意されている関数のほかに、ユーザが独自に関数を定義できます。一度関数として定義しておけば、簡単に一連の処理を呼び出して実行させることができます。
関数は次のように定義します。
関数名
functionに続けて任意の関数名を命名規則に沿って指定します。その関数が、どのような処理を行っているのかがわかりやすい名前を付けておくとよいでしょう。
引数
引数とは関数内での処理に必要な数値や文字列などの情報で、この引数の値を変えれば同じ関数でも処理結果を変えることができます。処理に引数が必要な場合は、渡された引数を関数が呼び出された時に受け取るための変数を()内に指定します。「,」(カンマ)で区切れば複数の引数を指定可能です。引数が必要ないときは、空のままにしておきます。
定義する内容
関数で実際に定義する内容は{ }の間に記述します。関数の中から他の関数を呼び出すこともできます。
次の関数msg2はダイアログを表示した後、関数msg3を呼び出すという2つの動作を行うものとして定義されます。
alert(“この関数はonclickによって呼び出されました。”);
msg3();
}
return
returnは関数の処理を終了し、呼び出し元に処理を返します。returnの後に値(戻り値)を指定すると、呼び出し元にその値を返すことができます。
alert(“OK”);
return 1;
}
i = myFunc(); //iには1が入る
関数の呼び出し
functionは関数を定義するだけなので、スクリプトが読み込まれただけでは実行されません。実際に動作させるにはイベントやほかの関数によって関数が呼び出される必要があります。これを関数の呼び出しと言い、関数名()のように記述します。
JavaScript
alert(“ページをロードすると関数msg1が呼び出されます。”);
}
function msg2(a) {
alert(“ボタンをクリックすると関数msg2が呼び出されます。\n引数は ” + a + ” です。”);
msg3();
}
function msg3() {
alert(“関数msg3は関数msg2の内部から呼び出されます。”);
}
HTML
<form id=”sample_form”>
<input type=”button” value=”Click!” onclick=”msg2(2)” />
</form>
</body>
サンプルではまずページの読み込みが完了したとき(onloadイベント発生時)に関数msg1が実行されます。ボタンがクリックされたときには関数msg2が実行されます。関数msg2の中では関数msg3の呼び出しが行われるので、続けて関数msg3が実行されます。