5、計算


もう少し実用的なものとして「電卓」を作って見ましょう。
これまでの知識で、電卓のプログラムがもうできるのです。

1、演算子

電卓の機能は「+−×÷」の四則演算ですが、
JavaScriptで、この計算に使う主な符号は次表の通りです。
足し算引き算掛け算割り算余り算
演算子


2、電卓

まずJavaScriptで計算をする自作命令を作ります。
たとえば「足し算」の場合

function tasizan(){


}

のよう名前で作ります。
そして、その中にプログラムを書きます

function tasizan(){
dt3=dt1+dt2;
}

のように書けばdt1という名前の置場の中身とdt2という名前の置場の中身とを加えてdt3という名前の置場に納めます。
他の計算も同じです。

次にHTMLの<FORM>と<INPUT>を使ってデータ−の入出力窓を作ります。
この書き方は前節でやりましたね。

そして記号のボタンをクリックしたら、それぞれの自作命令が実行されるようにしておきます。
ボタンは の5通り作ります。
そしてボタンごとに

onClick="tasizan()"
onClick="hikizan()"
.....
のように、その計算が書かれた命令が呼ぶ出せるように、個々の<INPUT>タグの中に書いておきます。

また、各計算ごとに、<FORM>の窓のデータをJavascriptの置場に移す命令や、数字を数に変換する命令をプログラムしていると面倒なので
データ取込む自作命令

function dt_in(){

}

データ書出す自作命令

function dt_out(){

}

も作っておいて、例えば足し算の自作命令のプログラムするときには

function tasizan(){
dt_in();
dt3=dt1+dt2;
dt_out();
}

と呼ぶ出して使うようにします。


できあがった「電卓」は次のようなものです。




3、体験しよう

上の窓に数字を入力して、演算記号のボタンを押してく試してください。

それでは次のソースをコピーして「メモ帳」に貼り付け、HTMLファイルとして保存した上で、そのファイルをダブルクリックして開いてみてください。
<html> <head> <title>javascript_no05</title> <script language = "javascript"> <!-- //データ取込み function dt_in(){ dt1 = document.keisan.dt_11.value ; dt1 = parseInt(dt1) ; dt2 = document.keisan.dt_12.value ; dt2 = parseInt(dt2) ; } //データ書出し function dt_out(){ document.keisan.dt_13.value=dt3; } //足し算 function tasizan(){ dt_in(); dt3=dt1+dt2; dt_out(); } //引き算 function hikizan(){ dt_in(); dt3=dt1-dt2; dt_out(); } //掛け算 function kakezan(){ dt_in(); dt3=dt1*dt2; dt_out(); } //割り算 function warizan(){ dt_in(); dt3=dt1/dt2; dt_out(); } //余り算 function amarizan(){ dt_in(); dt3=dt1%dt2; dt_out(); } //--> </script> </head> <body> <!----------入出力窓と演算ボタン-----------> <form name="keisan"> <table border=0 width=300> <tr> <td></td> <td> <input type=text name="dt_11" value=""> </td> </tr> <tr> <td> <!--演算ボタン--> <input type=button value="+" onClick="tasizan()"> <input type=button value="−" onClick="hikizan()"> <input type=button value="*" onClick="kakezan()"> <input type=button value="/" onClick="warizan()"> <input type=button value="%" onClick="amarizan()"> </td> <td> <input type=text name="dt_12" value=""> </td> </tr> <tr><td colspan=2><hr></td></tr> <tr> <td></td> <td> <input type=text name="dt_13" value=""> </td> </tr> </table> </form> <!-- --> </body> </html>