前回作った計算機はとてもシンプルで、足し算しかできませんでしたが、四則演算ができるように改良してみることにします。今回もまずは動かしてから解説します。
【1】テキストエディタで以下のように入力し、ファイル名は「sample004.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。
<html>
<head>
<title>sample004</title>
<script type="text/javascript">
function Calc() {
//変数の宣言
var a;
var b;
var c;
var ope;
//フォームから値を取得
a = parseInt(document.form1.txtA.value);
b = parseInt(document.form1.txtB.value);
ope = parseInt(document.form1.selOpe.value);
//セレクトボックスによって処理を変える
switch (ope) {
case 1:
c = a + b;
break;
case 2:
c = a - b;
break;
case 3:
c = a * b;
break;
case 4:
c = a / b;
break;
default:
break;
}
//計算結果を表示
document.form1.txtC.value = c;
}
</script>
</head>
<body>
<form name="form1">
<INPUT TYPE="text" NAME="txtA">
<select name="selOpe" size=1>
<option value="1">＋</option>
<option value="2">－</option>
<option value="3">×</option>
<option value="4">÷</option>
</select>
<INPUT TYPE="text" NAME="txtB"> =
<INPUT TYPE="text" NAME="txtC">
<br>
<input type="button" name="cmdCalc" value="計算" onclick="Calc()">
</form>
</body>
</html>
【2】保存したら sample004.html をダブルクリックしてWebブラウザで開きます。
【3】画面にテキストボックス3つ、セレクトボックス1つ、ボタンが1つ表示されます。テキストボックスに数字を入力し、セレクトボックスで計算方法を選択後、「計算」ボタンをクリックし、正しく計算できたら成功です。
【4】セレクトボックスを切り替えていろいろな計算を試してください。マイナスの計算にも対応しています。
【解説】
// はコメント部分でその1行はプログラム的には無視されますので、メモのような使い方ができます。
まずhtml部分にセレクトボックスを追加しています。セレクトボックスに selOpe という名前を付けて、サイズを1に設定しました。
<select name="selOpe" size=1>
セレクトボックスで選択する項目は以下のように表します。
<option value="1">＋</option>
<option></option>の間に書いた文字がセレクトボックスの選択項目として表示されます。value="" の部分に書いた値は画面には表示されません。しかしプログラムに使われるのは value の値のほうです。つまり value が大事なのです。
次は JavaScript の部分です。今回はフォームから値を取得すると同時に parseInt で整数に変換しています。前もって変換していたほうが実際の計算部分を a + b のようにシンプルに書けるからです。
a = parseInt(document.form1.txtA.value);
以下の部分はセレクトボックスで選択した値(value)を変数 ope に代入している部分です。ope には1 2 3 4 のような数字が入ります。
ope = parseInt(document.form1.selOpe.value);
残るは switch です。switch() は変数 ope に入ってる値により処理を分けて（分岐）います。case の後には ope に入る予定の値を書いておきます。一致する値がある場合は、 break; の前までに書いたプログラムが実行されます。
case 1:
c = a + b;
break;
今回はセレクトボックスを使っていますので予想外の値は入力されないはずですが、もし一致する値がない場合は default の部分が実行されることになっています。といっても default には break; しかありませんから何もしないということになります。
もし break を忘れると次の case 次の case ・・・と処理が行われてしまいますので注意してください。
