さて、Javasciptによるプログラミング入門は
そろそろ一旦、締めにしたいと思います。
最後に、これまでの総括としてまた「1+1は？」を応用して、
計算プログラムを作っていくことにします。
「1-1は？」ができるものを作る
以前の『プログラミング入門 ⑩「1+1は？」を入力して計算させる』の項で、
「足し算と引き算の両方ができるプログラムを作る」というCallenge課題を出しました。
足し算をするプログラムをおさらいすると以下です。
<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル10-2</title>
<script type="text/javascript"><!--
function sampleExecute() {
var inputValue = document.getElementById("inputText").value;
document.getElementById("resultArea").style.display ="block";
var output = document.getElementById("outputArea");
if (inputValue == "" ) {
output.innerHTML = "値を入力してください。";
return;
}
if (inputValue.indexOf("+") == -1 ) {
output.innerHTML = "「+」を入力してください。";
return;
}
var arrInputValue = inputValue.split("+")
if (isFinite(arrInputValue[0]) == false ||
isFinite(arrInputValue[1]) == false ||
arrInputValue[0] == "" ||
arrInputValue[1] == "" ) {
output.innerHTML = "数値を入力してください。";
return;
}
var value1 = Number(arrInputValue[0]);
var value2 = Number(arrInputValue[1]);
var result = value1 + value2;
output.innerHTML = result;
}
// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル10-2</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;" >
<h3>足し算を入力してください</h3>
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>～実行結果～</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>
そして、引き算をやる場合はどうすれば良いのか？
if文を使って以下のように上手いことやります。
<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル14-1</title>
<script type="text/javascript"><!--
function sampleExecute() {
var inputValue = document.getElementById("inputText").value;
document.getElementById("resultArea").style.display ="block";
var output = document.getElementById("outputArea");
if (inputValue == "" ) {
output.innerHTML = "値を入力してください。";
return;
}
if (inputValue.indexOf("+") == -1 && inputValue.indexOf("-") == -1 ) {
output.innerHTML = "「+」か「-」を入力してください。";
return result;
}
var result = "";
if (inputValue.indexOf("+") != -1) {
var arrInputValue = inputValue.split("+")
if (isFinite(arrInputValue[0]) == false ||
isFinite(arrInputValue[1]) == false ||
arrInputValue[0] == "" ||
arrInputValue[1] == "" ) {
output.innerHTML = "数値を入力してください。";
return;
}
result = Number(arrInputValue[0]) + Number(arrInputValue[1]);
}
else {
var arrInputValue = inputValue.split("-")
if (isFinite(arrInputValue[0]) == false ||
isFinite(arrInputValue[1]) == false ||
arrInputValue[0] == "" ||
arrInputValue[1] == "" ) {
output.innerHTML = "数値を入力してください。";
return;
}
result = Number(arrInputValue[0]) - Number(arrInputValue[1]);
}
output.innerHTML = result;
}
// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル14-1</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;" >
<h3>足し算か引き算を入力してください</h3>
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>～実行結果～</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>
「1×1は？」と「1÷1は？」ができるものを作る
引き算を実装したので、次は掛け算と割り算も実装してみましょう。
割り算は「0で割ること」が禁止されてるので、
0で割ろうとしたら入力チェックでエラーメッセージを表示するようにしたいです。
ここからのプログラムに関しては、筆者が実装したものは後で載せることにします。
できれば各自で作ってみましょう。
- 足し算、引き算、掛け算、割り算が全てできるプログラムを作ろう
「1+1+1+1+1+1+…は？」ができるものを作る
次に、1+1+1+1+1+1+…といつまで続いても計算してくれるプログラムを書いてみましょう。
これは無限に続いても対応可能としたいので、
for文を使うことになります。
ここで、引き算や掛け算までいきなりやろうとするのは難しそうなので、
とりあえず足し算のみとします。
- 無限に足し算ができるプログラムを作ろう
「1+1+1-1+1-1+…は？」ができるものを作る
次に、1+1+1-1+1-1+…といつまで続いても計算してくれるプログラムに、
引き算が混ざっても良いようにしましょう。
さらに難しくなったと思いますが、
分からなかった場合は筆者が作ったものがあるので、
やりたい人はやってみましょう。
ヒントとしては、split関数を二重で使うことになります。
それから、「引き算の計算」⇒「足し算の計算」というように順番でやるようにします。
ちなみに、難しいプログラムを書くときのコツとして、
ややこしい場合はちゃんと紙に書きながら考えると良いです。
- 無限に足し算ができるプログラムに加え、引き算を対応させよう
「1+1-1*1+1/1*…は？」ができるものを作る
さらに追加で、1+1-1*1+1/1*…といつまで続いても計算してくれるプログラムに、
掛け算と割り算が混ざっても良いようにしましょう。
これもやるならば、先ほどと同様でsplit関数を多重で使い、
「引き算の計算」⇒「引き算の計算」⇒「引き算の計算」⇒「足し算の計算」
というように順番でやるようにします。
現時点でこれができたらなかなかプログラミングセンスがあると思います。
- 無限に足し算ができるプログラムに加え、引き算と掛け算と割り算を対応させよう
もっと複雑なものを作る
これよりもっと複雑なものを作る場合は
数式内の「カッコ」まで認識するようにして、
カッコ内の式は先に計算するなどができるかもしれません。
（ちょっと筆者もそこまでは用意していないので）
これはかなり難しいと思いますが、
どうすれば実現できるか考えてみるのも良いかもしれません。
さて、これまでのプログラムの完成品を以下に置いておきます。
◆サンプル14-5（連続した足し算、引き算、掛け算、割り算をする）
ソースコードは[右クリック]⇒[ページのソースを表示]で見ることができるので、
参考にしたい人は見てみてください。
「1+1は？」の計算の中にある基礎
以上。最後は「1+1は？」みたいに単純な計算をしてくれるプログラムを作りました。
これは単純なものですが、プログラミングの基礎となるコード（if文、for文、演算、入力、出力）は一通り含まれています。
それから、「コンピューターで計算をしてくれるものを作った」という達成感も大事です。
プログラミングのすべての基礎となるのは、
「コンピューターを使って便利なものを作る」ということなので。
プログラミングはまだまだ先がありますが、
とりあえず、基礎はこれで一通りできました。
あとはこの基礎を発展させていくためのことを学んでいきましょう。
- プログラミングの基礎はできました。あとはこの基礎をベースに色んなものを作っていきましょう
次の記事
コメント