１．本日の課題
今日は前回のプログラムをもとに、整数の和演算ができる電卓を作成する。
まずは前回のプログラムや、参考としてネットを見ながら次のプログラムを組んだ。
<html>
<head>
<title>電卓</title>
</head>
<body>
<div>
<input type="button" value=1 onclick="inputNumber(1)">
<input type="button" value=2 onclick="inputNumber(2)">
<input type="button" value=3 onclick="inputNumber(3)">
</div>
<div>
<input type="button" value=4 onclick="inputNumber(4)">
<input type="button" value=5 onclick="inputNumber(5)">
<input type="button" value=6 onclick="inputNumber(6)">
</div>
<div>
<input type="button" value=7 onclick="inputNumber(7)">
<input type="button" value=8 onclick="inputNumber(8)">
<input type="button" value=9 onclick="inputNumber(9)">
</div>
<div>
<input type="button" value=0 onclick="inputNumber(0)">
<input type="button" value=+ onclick="inputNumber('+')">
<input type="button" value="=" onclick="result()">
</div>
<input id="answer">
<script>
let answer = document.getElementById("answer");
function inputNumber(num) {
answer.value = answer.value + num;
}
function result() {
answer.value = eval(answer.value);
}
</script>
</body>
</html>
実際に計算できて表示もできていたが、先生からは次の評価を頂いた。
- 「＋」を何回も押してしまえるところがいけない。
- 数字の最初から０を入力できてしまう。
「12+3+45」という式なら良いのだが、このプログラムのままでは「12+++3」のように＋を連続して入力できてしまう。
また、今回作成するのが整数の和演算なので数字の最初が０、例えば「009」というような数値を入力できてはならない。
そこで「＋」と「０」は前の文字が数字でなければ打てなくするようにしなければいけないので、if文とisNaNを使って修正をした。
これらを修正してできたプログラム↓
<html>
<head>
<title>電卓</title>
</head>
<body>
<div>
<input type="button" value=1 onclick="inputNumber(1)">
<input type="button" value=2 onclick="inputNumber(2)">
<input type="button" value=3 onclick="inputNumber(3)">
</div>
<div>
<input type="button" value=4 onclick="inputNumber(4)">
<input type="button" value=5 onclick="inputNumber(5)">
<input type="button" value=6 onclick="inputNumber(6)">
</div>
<div>
<input type="button" value=7 onclick="inputNumber(7)">
<input type="button" value=8 onclick="inputNumber(8)">
<input type="button" value=9 onclick="inputNumber(9)">
</div>
<div>
<input type="button" value=0 onclick="inputNumber(0)">
<input type="button" value=+ onclick="inputNumber('+')">
<input type="button" value="=" onclick="result()">
</div>
<input id="answer">
<script>
let answer = document.getElementById("answer");
function inputNumber(num) {
if (num == '+' || num == 0) {
if (!isNaN(answer.value.slice(-1))) {
answer.value = answer.value + num;
}
} else {
answer.value = answer.value + num;
}
}
function result() {
answer.value = eval(answer.value);
}
</script>
</body>
</html>
ただまた一つ問題点が出てきた。入力する一文字目には「＋」と「０」が打ててしまうということだ。そこで、文字列が空だと入力できないように条件を追加した。
<html>
<head>
<title>電卓</title>
</head>
<body>
<div>
<input type="button" value=1 onclick="inputNumber(1)">
<input type="button" value=2 onclick="inputNumber(2)">
<input type="button" value=3 onclick="inputNumber(3)">
</div>
<div>
<input type="button" value=4 onclick="inputNumber(4)">
<input type="button" value=5 onclick="inputNumber(5)">
<input type="button" value=6 onclick="inputNumber(6)">
</div>
<div>
<input type="button" value=7 onclick="inputNumber(7)">
<input type="button" value=8 onclick="inputNumber(8)">
<input type="button" value=9 onclick="inputNumber(9)">
</div>
<div>
<input type="button" value=0 onclick="inputNumber(0)">
<input type="button" value=+ onclick="inputNumber('+')">
<input type="button" value="=" onclick="result()">
</div>
<input id="answer">
<script>
let answer = document.getElementById("answer");
function inputNumber(num) {
if (num == '+' || num == 0) {
if (!isNaN(answer.value.slice(-1))) {
if (answer.value != '') {
answer.value = answer.value + num;
}
}
} else {
answer.value = answer.value + num;
}
}
function result() {
answer.value = eval(answer.value);
}
</script>
</body>
</html>
完成。条件の部分は「answer.value != ' '」でなく「answer.value != null」だと反映されなかった。
２．本日学んだこと
今日はevalやisNaNなどの新しい関数を学ぶことができた。二回目の修正の際、調べているとNullと空文字の違いというものが出てきた。まだあまりピンと来ていないのでもう少し調べてみる。