数値計算(その３)
昨日の続きです。
# 昨日は半分寝ながら書いてたので説明がかなり不足してました。
# その部分を補足してあるのでチェケラッチョです。
前回まででとりあえず掛け算をする処理は書き終わりました。これでいつ掛け算を要求されてもすぐに計算する事が出来ます。
もう電卓はゴミ箱に捨てちゃってもいいよ...と言いたいところですが実際に掛け算だけじゃなくて足し算,引き算,割り算といった四則演算くらいはやれるようにしておきたいところです。
4. 他の演算も出来るようにしてみる。
(1) 前回作成したcalc.htmlをメモ帳で開く。
(2) 以下の部分を追記する。
<html> <head> <title>四則演算</title> </head> <script type="text/javascript"> function Calculate() { frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value); } function Add() { frm2.result.value = (frm2.firstValue.value + frm2.secondValue.value); } function Minus() { frm3.result.value = (frm3.firstValue.value - frm3.secondValue.value); } function Divide() { frm4.result.value = (frm4.firstValue.value / frm4.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> <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算実行"> </form> <br> ★足し算 <form name="frm2"> <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> <INPUT type="button" name="buttonadd" onClick="Add()" value="計算実行"> </form> <br> ★引き算 <form name="frm3"> <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> <INPUT type="button" name="buttonminus" onClick="Minus()" value="計算実行"> </form> <br> ★割り算 <form name="frm4"> <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> <INPUT type="button" name="buttondivide" onClick="Divide()" value="計算実行"> </form> <br> </body> </html>
(3) 保存後、デスクトップに作成されたcalc.htmlを実行してください
(4) それぞれの演算を実行してください
# どうみてもおかしな結果が一つ...。
足し算の結果だけがどうひいき目に見ても正しくありません。足し算と言うよりは単に左右の文字を連結しただけのように見えます。
調べてみると、テキストボックスのプロパティであるvalueは通常文字列として扱われるようです。+は足し算だけではなく文字列の連結用の演算子としても使用されるため、結果がこのようになるみたいです。
つまり、テキストボックスの値を文字列ではなく数値に変換してあげればよいのです。
(5) Add()を修正してください
※修正前
function Add()
{
frm2.result.value = (frm2.firstValue.value + frm2.secondValue.value);
}
↓
※修正後
function Add()
{
frm2.result.value = (parseInt(frm2.firstValue.value) + parseInt(frm2.secondValue.value));
}
(6) calc.htmlを再度起動しなおし、改めて計算しなおしてください
足し算の結果もこれで完璧。
まとめ
-
- テキストボックスの値は基本は文字として取り扱われる
- ↑が嫌なら明示的に使用したい型に変換する必要がある
現段階での最終的なcalc.htmlは↓こちら。
<html> <head> <title>四則演算</title> </head> <script type="text/javascript"> function Calculate() { frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value); } function Add() { frm2.result.value = (parseInt(frm2.firstValue.value) + parseInt(frm2.secondValue.value)); } function Minus() { frm3.result.value = (frm3.firstValue.value - frm3.secondValue.value); } function Divide() { frm4.result.value = (frm4.firstValue.value / frm4.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> <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算実行"> </form> <br> ★足し算 <form name="frm2"> <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> <INPUT type="button" name="buttonadd" onClick="Add()" value="計算実行"> </form> <br> ★引き算 <form name="frm3"> <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> <INPUT type="button" name="buttonminus" onClick="Minus()" value="計算実行"> </form> <br> ★割り算 <form name="frm4"> <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> <INPUT type="button" name="buttondivide" onClick="Divide()" value="計算実行"> </form> <br> </body> </html>
[HTML/JavaScript]
とほほのJavaScript入門
