関数の書き方・使い方について

HOME
更新日:2010.01.17
HOME > JavaScript入門 > 関数

関数を使う

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より先に読み込まれるからです。 もし関数を呼び出す時に、当の関数がまだ読み込まれていないとエラーが出ます。 ということで、関数はヘッダーに記入するのがベターと言えるでしょう。



ページトップへ

前へ  INDEXへ  次へ