TOPページ >  JavaScriptの演算および構文 > JavaScript関数の基本

JavaScript関数の基本

ホームページやブログなどのウェブサイトで JacaScript の関数を呼び出す基本的な方法についてご紹介します。

function 関数名(引数) { 関数の内容 }
  1. 関数名:関数を呼び出す際の識別名を指定します。任意名称ですが、オブジェクト名、メソッド名、プロパティ名、true、false、NaN など、JavaScript で予約されている名前は使えません。
  2. 引数:引数がある場合は、引数名を指定します。とくにない場合は、省略できます。複数の引数を指定したい場合は、半角カンマで区切って記述します。
  3. 関数の内容:この関数が呼び出されたときに実行する内容を指定します。

サンプルソースです。

<SCRIPT LANGUAGE="JavaScript">
<!--
function sampleA() {
alert ("sampleA という関数が呼び出されました。\n" +
"OKをクリックすると、sampleC の関数を呼び出します。");
sampleC();
}
function sampleB() {
alert ("sampleB という関数が呼び出されました。\n" +
"OKをクリックすると、sampleC の関数を呼び出します。");
sampleC();
}
function sampleC() {
alert ("sampleC という関数が呼び出されました。");
}
//-->
</SCRIPT>

<form>
<input type="button" value="sampleA" onClick="sampleA()">
<input type="button" value="sampleB" onClick="sampleB()">
</form>

このサンプルは、『 sampleA 』、『 sampleB 』の各ボタンで、 sampleA、sampleB という名前の関数を呼び出します。この関数内では、OK ボタンのある警告メッセージが表示され、OK ボタンを押すと、各関数内から、sampleC という関数を呼び出します。

このソースを表示させると、次のようになります。

次に、引数を用いたサンプルをご紹介します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function sampleD(Data) {
document.sampleForm.sampleText.value = Data ;
}
//-->
</SCRIPT>

<form name="sampleForm">
<input type="button" value="123" onClick="sampleD(123)">
<input type="button" value="ABC" onClick="sampleD('ABC')">
<input type="button" value="いろは" onClick="sampleD('いろは')">
 押されたボタンは、<input type="text" name="sampleText" size="8">です。
</form>

このサンプルは、いずれのボタンを押しても 『 sampleD 』という名前の関数を呼び出しますが、この関数に引数を引き渡しているため、テキストボックス内に表示される文字が異なります。

引数が数値でない場合は、シングルクォート( ' ) で括ります。このソースを表示させると、次のようになります。

 押されたボタンは、です。

引数を使って IF文などで場合分けしてもよいでしょう。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
WHILE文を使って条件が満たされるまで処理を繰り返す
FOR文を使って処理を繰り返す1
IF文を使って処理を条件分けする
JavaScript関数の基本
演算子の優先順位
ビット演算子を使って計算をする
代入演算子を使って計算をする
論理演算子を使って計算をする
比較演算子を使って計算をする
算術演算子を使って計算をする
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス