JavaScript【 onClick 】～プログラムを呼び出す

今回は、JavaScriptを使って、実際にプログラムを呼び出してみます。
マウスがクリックされた時に使用するイベントハンドラ「onClick」を使って、HTML文書に直接JavaScriptを記述します。

1. 入力文字を出力する

まず、ボタンの onClick 属性の値に、直接プログラムを記述する方法で、入力文字を出力するプログラムを作ってみます。

HTMLのフォーム部品で、入力欄とボタンを作成します（詳しくはHTML 【フォーム】５ ～ input要素（１０）ボタンをご参照下さい）。

そして、このサンプルでは、ボタンの onClick 属性の値に、直接プログラムを記述してみます。

実際に、入力欄に文字を入力して出力ボタンを押してみて下さい。
入力されたテキストがアラート表示されます。

ソースは次の通りです。

<FORM name="sample1">
<INPUT type="text" name="data"><INPUT type="button" value="出力" onClick="var str = document.sample1.data.value; alert(str + 'が入力されました！')">
</FORM>

onClick 属性の値として、２つの命令が設定されています。
（命令は1つずつセミコロン「;」で区切って記述します。最後は省略可能です。）
　

var str = document.sample1.data.value;

この命令は、「変数strに、”sample1″という名前のフォームの中にある”data”という名前の部品の値を代入する」という意味です。
この命令によって、入力欄に入力されたテキストが、変数strの値となります。
　　

alert(str + 'が入力されました！')

この命令は、「変数strの値に “が入力されました！” というテキストを加えてアラート表示させる」という意味です。

少し変わった書き方ですが、このような形でプログラムを呼び出すこともできます。
JavaScriptを呼び出すタグの属性値にそのまま命令を書くので手軽ですが、この記述方法は、複雑なプログラムを組む場合には不向きです。

▲目次へ戻る

２．計算結果を表示する

今度は、SCRIPTタグを使ってJavaScriptを定義する方法で、計算結果を表示するプログラムを作ってみます。

実際に、入力欄に数字を入力して計算ボタンを押してみて下さい。
入力された２つの数字の和が表示されます。

ソースは次の通りです。

<SCRIPT type="text/javascript">
<!--
function culculate() {
     with(document.sample2) {
         var d1 = data1.value;
         var d2 = data2.value;
         data3.value=eval(d1)+eval(d2);
    }
}
//-->
</SCRIPT>

<FORM name="sample2">
    <INPUT type="text" name="data1">
    ＋
    <INPUT type="text" name="data2">
    ＝
    <INPUT type="text" name="data3">
    <INPUT type="button" value="計算"onClick="culculate()">
</FORM>

計算ボタンをクリックすると、culculate()という関数が呼び出されます。
culculate()の内容は、SCRIPTタグの中に定義されています。

SCRIPTタグの使用方法は次の通りです。

スクリプト本文には、プログラムに必要な変数を宣言したり、関数を定義したりします。
ですが、そのどちらもしない用法もあります。

</SCRIPT type="text/javascript">
<!--
    document.write("ご使用中のブラウザは JavaScript が使用可能です。");
//-->
</SCRIPT>

document.writeは、文書中にテキストを書き込むメソッド（関数）で、JavaScriptをサポートしているブラウザなら文章が指定位置に書き込まれます。
ページが読み込まれると、ブラウザは他の文章と混在する形でこのテキストを表示します。
特にイベントを特定していないのに実行される暗黙のイベントの１例です。

▲目次へ戻る