・手順(8) 電卓のロジックを記述しよう
イベントが設定できたら、電卓のロジックを記述してみます。各ボタンを押したとき、pushButton()関数が呼ばれるようになっています。この関数では、ボタンが押された時の処理を記述します。
電卓では普通の計算式とは違って、画面に表示する値と実際の計算する値を分けて考えないといけないので、ちょっと頭を捻る必要があるかもしれません。
押すボタン | 画面の表示 |
---|---|
[3] | [3] |
[+] | [3] [+] |
[5] | [5] [+] |
[=] | [8] [=] |
ここでは、一時的な計算結果を覚えておくtempと、画面に出力するdispという2つの変数を利用することで、電卓を再現できるようにしています。
var op = ""; // どの演算を行うか?
var temp = 0; // 一時的な計算結果を保存する変数
var disp = ""; // 画面に出力する変数
function pushButton(n) {
if (n == "C") {
reset();
updateDisp();
}
~省略~
else if (0 <= n && n <= 9 || n == ".") {
disp += "" + n;
updateDisp();
} else {
calc_temp();
disp = "";
op = n;
updateDisp();
if (n == "=") {
disp = temp;
temp = 0;
}
}
}
// 実際の計算処理
function calc_temp() {
switch (op) {
case "+": temp = temp + parseFloat(disp); break;
case "-": temp = temp - parseFloat(disp); break;
case "*": temp = temp * parseFloat(disp); break;
case "/": temp = temp / parseFloat(disp); break;
case "%": temp = temp % parseFloat(disp); break;
default:
if (disp != "") {
temp = temp + parseFloat(disp);
}
break;
}
disp = "";
op = "";
}