ITコラム

プログラミングノウハウ

2017.09.07

#JavaScript入門

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

1. 入力文字を出力する

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

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

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

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

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

ソースは次の通りです。

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

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

let str = document.sample1.data.value;

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

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

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

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

▲目次へ戻る

2. 計算結果を表示する

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

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

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

ソースは次の通りです。

<SCRIPT type="text/javascript">
function culculate() {
     with(document.sample2) {
         let d1 = data1.value;
         let 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行コメントは、コメントにしたい文の頭に // を付けます（// から行末までがコメントとなります）。
範囲コメントは、コメントにしたい文を /* ～ */ で囲みます。コメント文には日本語全角文字など、どんな文字でも使用可能です。

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

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

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

▲目次へ戻る