以下に簡単な例を示します。
下の2つのボタンで、左の方を押してください。
それぞれのボタンをクリックください。
これは、一つのボタンでalert関数を2回実行させています。ボタンの
onclick="命令部分"の命令部分は、
セミコロンで区切ることで、複数書くことができますが、
一般には次に示すように、自分で希望する機能(function)を実現するための命令を作り、その命令をonclickで指定するのが
基本的な作り方です。
上記のようなhtmlは、次のような内容になります。
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
function left_click(){
alert("左のボタンが押されました。");
alert("そうです。よくできました。");
}
function right_click(){
alert("これは右のボタンですよ!");
alert("性格判断:あなたは、ひねくれものです。");
}
// -->
</script>
</head>
<body>
<p>
下の2つのボタンで、左の方を押してください。<br>
<input type="button" value="ボタン1" onclick="left_click()">
<input type="button" value="ボタン2" onclick="right_click()">
</p>
</body>
</html>
上記において、この色の範囲で
関数(かんすう)と呼ばれる2つの命令を作っています。
left_clickとright_clickの名前の命令です。
javascriptのプログラムにおいて alert関数は、作らなくても始めから使える関数です。
対してleft_clickとright_clickは、自作した関数になります。そしてこれらを
onclick="命令部分"の命令部分に指定して
クリック時に実行できるように書いています。
クリックにより実行させたい関数を指定する場合、
関数名に()を付ける表現です。
この関数名は、関数として存在する名前を正しく書かないと実行する時にエラーが起きます。
関数は javascriptの命令を書ける範囲 で次のように作ります。
下記でabc2が、関数の名前
を書くのところで、 abc2 の名前をつけた場合の例です。
関数の名前はアルファベットや数値の組み合わせで管理しやすい名前にします。
しかし、予約されて使えない名前(function や if など)があり、その名前は使えません。
番号が付く予約された名前は無いので、番号をつけてしまうのも一つの方法です。
ですが 番号から始まる名前は許されません。
また、記号を名前に含めることは許されませんが、半角アンダーライン「 _ 」と
半角ドル記号「 $ 」は使うことができます。
function abc2(){
}
この関数を作る表現は、
function から始まり、半角スペースの後で
名前を書きます。
そしてその直後に ( ) を書きます。
それから { から } で囲むことで関数の範囲を指定し、
それで一つの関数が出来上がります。
そしてこの中に 行わせたい命令を順番に並べます。
各命令は、一つの命令の最後に; のセミコロンを付る規則になっています。
行わせたい順番に命令を並べれば、その順番で実行する規則です。
使える命令は、たくさんあります。ここで使っている命令は、
alert関数だけですが 以降でたくさん紹介していきます。
このようにして作る記述部分は、関数の定義と呼ばれます。
このページの例では、 javascriptの命令を書ける範囲 で
2つの関数を定義していますが、何個作っても構いません。
またこの並べる順番も、自由で決まっていません。(順不同です)
さてこのように作った関数は、実行させる記述を書かなければ、勝手に実行しません。
実行させる記述は関数呼び出しの記述といいます。
それが、ボタンなどのonclick="関数呼び出しの記述部分"です。
なお、 javascriptの命令を書ける範囲 でも 関数呼び出しの記述などの命令を記述することができます。 下記はそこで alert 関数だけを 使った例です。
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
alert("ページを\n開きます。");
// -->
</script>
</head>
<body>
ページを開く時にalert関数を実行
</body>
</html>
上記は、こので動作を確認できます。
このように関数の定義の外側に書いた命令は、記述順番に従って、ページを開いた時に実行します。
上記ボタンで確認してください。
(関数の定義の内側は、関数呼び出しを行わせないと実行しません)
このページは、ボタンクリックなどの確認すべき操作をすべて行わないと指示のページへのボタンが有効になりません。