数値計算(その２)
前回の続きです。
# 10/8にtextboxの名称変更と初期値の代入処理を加えました。一度確認してください
3. 実処理(JavaScript)を追加してみる。
(1) 前回作成したcalc.htmlをメモ帳で開く。
(2) 以下の部分を追記する。
<html> <head> <title>四則演算</title> </head>
ここから
<script type="text/javascript"> function Calculate() { frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value); } </script>
ここまで追記
<body> <form name="frm1"> <input type="text" name="firstValue" size="15" value=0>× <input type="text" name="secondValue" size="15" value=0>＝ <input type="text" name="result" size="15" value=0> <br> <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算実行"> </form> </body> </html>
(3) 保存後、デスクトップに作成されたcalc.htmlを実行してください
(4) 左側のテキストボックスに200を入れて、右側のテキストボックスに5を入れてください
(5) 計算実行ボタンを押してください→結果が表示されます
※計算結果が合っているかどうか確認してください。
4. 追加した処理の解説
<html> <head> <title>四則演算</title> </head> <script type="text/javascript"> ← 追加した処理の種別を指定 function Calculate() { frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value); } </script> <body> <form name="frm1"> <input type="text" name="firstValue" size="15" value=0>× <input type="text" name="secondValue" size="15" value=0>＝ <input type="text" name="result" size="15" value=0> <br> <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算実行"> </form> </body> </html>
function Calculate()
{
frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value);
}
まず、このようにある処理に名前を付けて一つの塊として取り扱えるようにしたものを関数と言います。メソッドという呼び方をする場合もありますがほぼ同じものと思ってください(厳密に言うと違いますが、現段階では同じと思って大丈夫です)。
次に関数の中を見てみます。
function Calculate()
functionというのは関数だという事を明示するためのキーワードです。Calculate()というのは関数の名前です。末尾に()をつける理由は関数に対して初期値を渡す場合に利用するためです。とりあえず関数には()を付けるという事を決まりだと思って覚えてください。
frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value);
frm1というのはhtmlの中にあった
<form name="frm1">
を指し示すします。
また、frm1.resultというのはfrm1のタグの中にあるresultという名前のオブジェクト(直訳すると物となります)を指し示します。ちなみにこれは
<input type="text" name="result" size="15" value=0>
inputタグの中のnameが一致するものを指定します。
最後に、frm1.result.valueというのはfrm1のタグの中にあるresultという名前のオブジェクトの取り得るデータ値を表します。これはプロパティ(特性と訳せますが通常はそのままプロパティと呼びます)と呼ばれるものであり、オブジェクトの状態を指し示すデータです。
まとめると、resultと名づけられたテキストボックスの中に入っているデータがfrm1.result.valueなのです。
それと構文について。
frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value);
上で説明した内容を加味してこれを置き換えてみると
掛け算の結果表示テキストボックスの値 = 左側のテキストボックスの値 × 右側のテキストボックスの値
となります。
=の右側から見ていくと、*は掛け算を表す演算子です。それと=は代入を表します。つまり、=の右側の掛け算の演算結果を結果テキストボックスの値として代入すると言うのがこの処理なのです。
分かりにくいところは修正・加筆するので言ってください。
★参考サイト
[HTML/JavaScript]
