【1】テキストエディタで以下のように入力し、ファイル名は「sample006.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。
<html>
<head>
<title>sample006</title>
<script type="text/javascript">
function Calc() {
//変数の宣言
var a;
var b;
var c;
var ope;
//withを使って簡潔に書く
with (document.form1) {
a = parseInt(txtA.value);
b = parseInt(txtB.value);
ope = parseInt(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;
case 5:
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>
<option value="5">％</option>
</select>
<INPUT TYPE="text" NAME="txtB"> =
<INPUT TYPE="text" NAME="txtC">
<br>
<input type="button" name="cmdCalc" value="計算" onclick="Calc()">
<input type="reset" value="クリア">
</form>
</body>
</html>
【2】保存したら sample006.html をダブルクリックしてWebブラウザで開きます。
【3】「クリア」ボタンが表示されます。
【4】前回までと同じ動きをすることを確認してください。また、「クリア」ボタンを押すとテキストボックスがクリアされることも試してください。
【解説】
JavaScript の構文 with を使うと似たようなプログラムを簡潔に短くかけます。例えば前回までのプログラムでは、以下のように document.form1. の部分を繰り返し書いていました。
a = parseInt(document.form1.txtA.value);
b = parseInt(document.form1.txtB.value);
ope = parseInt(document.form1.selOpe.value);
そこで、with の後の()に繰り返し書いていた document.form1 を書くと、構文withの中では省略できるようになります。最後の 「.」 ドットは不要です。
with (document.form1) {
a = parseInt(txtA.value);
b = parseInt(txtB.value);
ope = parseInt(selOpe.value);
}
使うときは、
with () {
}
のようにwith内だけで有効なことに注意してください。また、1行しかプログラムが無い時はそのまま書いたほうが早いです。同じような行数が増えるほど効果的な構文です。
最後に「クリア」ボタンの部分ですが、以下のようにhtmlを1行追加するだけで、特にプログラムを書くことなく動きます。
<input type="reset" value="クリア">
