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

Enter Click Open Load Page Concept

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

目次

 1.入力文字を出力する
 2.計算結果を表示する

1.入力文字を出力する

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

HTMLのフォーム部品で、入力欄とボタンを作成します(詳しくはHTML 【フォーム】5 ? input要素(10)ボタンをご参照下さい)。

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

 
下の入力欄に文字を入力して出力ボタンを押して下さい。


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

ソースは次の通りです。

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

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

var str = document.sample1.data.value;

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

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

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

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

▲目次へ戻る

2.計算結果を表示する

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

 
下の入力欄に数字を入力して計算ボタンを押して下さい。


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

ソースは次の通りです。

<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>内に入れることもできます。
(入れる位置と処理内容によっては、エラーとなる場合もあります。)

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

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

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

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

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

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

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

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です