関数を使う
JavaScriptの命令は、関数にして1まとめにすることができます。 こうすることにより、同じ処理を繰り返し使用することができます。 また何かの計算をさせて、その結果を出力するためにも使うことができます。
関数でまとまった処理を行う
まずは処理を1まとめにしてみましょう。 HTMLのヘッダーに以下のように記入して下さい。
<script type="text/javascript">
<!--
function Aisatu(){
alert("おはよう");
alert("こんにちは");
alert("こんばんは");
}
// -->
</script>
次にBODY内にボタンを2つ配置して、以下のように記入して下さい。
<form> <input type="button" value="ボタン1" onclick="Aisatu()"><br> <input type="button" value="ボタン2" onclick="Aisatu()"> </form>
サンプル(別窓)
上記のサンプルを見て下さい。 どちらのボタンを押しても同じアラートが表示されたと思います。 このように関数を指定しておくと、簡単に同じ処理を行わせることができます。
関数の記入法
では詳しく見ていきましょう。関数を指定するのはfunctionです。 半角空けて、関数名を指定します。 (上の場合はAisatuが関数名です)。 関数名は好きなものを指定できます。
関数名の後に括弧()をつけます。 この中には引数と言うものが入りますが、この説明は次ページで行います。 今回は引数を使わないので空のままにしておきます。
次に半角中括弧{}を付け、 その中に処理を記入していきます。 よくこの半角中括弧を閉じ忘れてエラーが出ることがあるので、気をつけましょう。 これで関数の指定は終わりです。
関数の呼び出し方
関数を呼び出す方法ですが、イベント内の場合は関数名を指定するだけでOKです。 ボタンのonClickイベントには関数名しか書いていないと思います。 イベント以外の場所に記入する場合は、JavaScriptであることを明示しなければいけません。
●Aタグ内に記入する場合 <a href="JavaScript:Aisatu()">クリック</a> ●body内で記入する場合 <script type="text/javascript"> <!-- Aisatu(); // --> </script>
関数を記入するのはヘッダーでもBODY内でも構いませんが、私はヘッダーをお勧めします。 ヘッダーはBODYより先に読み込まれるからです。 もし関数を呼び出す時に、当の関数がまだ読み込まれていないとエラーが出ます。 ということで、関数はヘッダーに記入するのがベターと言えるでしょう。