これまではJavaScriptをbody部分に書いていましたが、以下の例のようにhead部分に書くこともできます。まずは解説より先に動かしてみましょう。
【1】テキストエディタで以下のように入力し、ファイル名は「sample003.html」で適当な場所に保存してください。
<html>
<head>
<title>sample003</title>
<script type="text/javascript">
function Calc() {
var a;
var b;
var c;
a = document.form1.txtA.value;
b = document.form1.txtB.value;
c = parseInt(a)+parseInt(b);
document.form1.txtC.value = c;
}
</script>
</head>
<body>
<form name="form1">
<INPUT TYPE="text" NAME="txtA">+
<INPUT TYPE="text" NAME="txtB">=
<INPUT TYPE="text" NAME="txtC">
<br>
<input type="button" name="cmdCalc" value="計算" onclick="Calc()">
</form>
</body>
</html>
【2】保存したら sample003.html をダブルクリックしてWebブラウザで開きます。
【3】画面にテキストボックスが3つとボタンが1つ表示されます。テキストボックスに数字を入力し「計算」ボタンをクリックし、正しく足し算できたら成功です。
【解説】
まず、フォームの中にテキストボックス3つとボタン1つを作り、それぞれに名前をつけています。そしてボタンがクリックされた時 onclick="Calc()" にCalc()というプログラムが動くようになっています。
Calc()の中で変数a、b、cを宣言し、a、bにはテキストボックスで入力した値を入れています。
a = document.form1.txtA.value;
b = document.form1.txtB.value;
テキストボックスに入力された値を取り出すには、documentから書く必要があります。これはdocumentの中にある、form1の中にある、txtAの値というふうにイメージしてください。
次にa、bの変数を使って計算した値を変数cに代入していますが、parseInt()で囲んでいます。
c = parseInt(a)+parseInt(b);
実はテキストボックスから取り出した値は文字として認識されますので、そのまま足し算すると文字の連結になり、思ったような答えになりません。 1+2=12
そこでparseInt()を使って文字を整数に変換しているわけです。
最後に変数cの値を画面上に表示しています。
document.form1.txtC.value = c;
今度はさっきと逆で左辺がテキストボックスで右辺が変数になっています。=は左辺と右辺が等しいという意味ではなく、「左辺に右辺の値を代入する」という意味です。表示するときもdocumentから書く必要があります。
