ITコラム

JavaScript

2017.09.07

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

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

１．入力文字を出力する

まず、ボタンの 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 属性の値として、２つの命令が設定されています。
（命令は１つずつセミコロン「;」で区切って記述します。最後は省略可能です。）
　

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タグは必ず終了タグ</SCRIPT>を必要とします。
これを付け忘れると、プログラムが正常に動作せず、ページの表示にも影響を及ぼします。

●SCRIPTタグを入れる位置は、HTMLのヘッダ内（<HEAD>?</HEAD>の間）に入れることが多いですが、<BODY>?</BODY>内に入れることもできます。
（入れる位置と処理内容によっては、エラーとなる場合もあります。）

●１つの HTML内に、SCRIPTタグをいくつでも使用できます（それぞれに終了タグ</SCRIPT>が必要）。

●SCRIPTタグは、特に言語を指定しない場合、デフォルトでJavaScriptとなりますが、通常は属性で言語を指定します。
言語の指定の仕方は、type属性を使って、type=”text/javascript” と記述することが推奨されています（以前は、 language=”JavaScript”のようにlanguage属性が使われていました）。

●<SCRIPT>?</SCRIPT>間に直接プログラムを書き込むことが出来ますが、コメントタグ <!– ? //–>でプログラムを囲むことが推奨されています。
これは JavaScript に対応していないブラウザが、スクリプトデータそのものを表示してしまうのを防ぐためです。

●<SCRIPT>?</SCRIPT>間に入れるスクリプトには、半角英数字と記号のみを使用します。
但し ” ” または ‘ ‘ で囲んだリテラル（文字列データ）には、全角文字も使用できます。
インデントには半角スペースまたはタブを使用します（全角スペースは不可）。

●スクリプト本文内で使用できるコメントには１行コメントと範囲コメントがあります。
１行コメントは、コメントにしたい文の頭に // を付けます（// から行末までがコメントとなります）。
範囲コメントは、コメントにしたい文を /* ? */ で囲みます。コメント文には日本語全角文字など、どんな文字でも使用可能です。

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

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

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

▲目次へ戻る