まずは簡単な四則演算を行います。
二つの変数 aに5を、bに10を代入し、その和、差、積、商を画面に表示させます。
画面には
a = 5 , b=10の時
a + b = 15
a - b = -5
a × b = 50
a ÷ b = 0.5
と表示させるものとします。
javascriptで使用する主な演算記号は以下の通りです。
加算 : +
減算 : -
乗算 : *
除算 : /
剰余 : %
べき乗 : **
となります。掛け算は×、割り算は÷を数学では使いますが、コンピュータプログラムはそれぞれ*(アスタリスク) /(スラッシュ)を使います。
さて、ここで、javascriptで間違いやすい記号の一つである
「+」について説明します。
いや、いま加算の記号として+を使うって説明したじゃないか。その通りです。
実はこの+(プラス)演算子ですが、
javascriptでは二つの意味を持ちます。
一つ目は、
足し算を表す記号
二つ目は、
文字と文字を連結する記号
なのです。
実際にいろいろやってみます。
jsbase.htmlをコピーし、practice2.htmlを作成してください。
その<script>タグ内に以下の記述をしてみましょう。(行番号は無視してください)
document.write(2+3);
document.write("<br>");
document.write("a" + "b");
document.write("<br>");
document.write(2 + 3 + "a" + "b");
document.write("<br>");
document.write("a" + "b" + 2 + 3);
document.write("<br>");
2,5,8,11行目は、<br>タグですので、HTMLの改行をさせる命令になります。
1行目は、2と3の和を表示する命令になりますので、
5が表示されます。
4行目は、aという文字とbという文字をつなげる命令なので、
abが表示されます。
7行目は、2と3を足し、それにaという文字とbという文字をつなげる命令になりますので、
5abと表示されます。
問題は10行目になります。
aという文字とbという文字をくっつけた後2と3の和を表示する命令、つまり
ab5と表示するのかと思ったら、
ab23と表示をされます。
これは、+の意味(役割)が変わってしまったために発生しています。
本来足し算記号の+ですが、同じ行で+の記号を
一度でも「文字と文字をくっつける」という機能で働かせたら、同じ行内のそれ以降の+は、もう足し算の記号としては機能しません。
文字と文字をくっつける働きに変わりました。
ですから、aとbと2と3をつないだ文字、つまり、
ab23が表示されました。
もし、この式でab5と表示させるためには、計算式の部分を()でくくってあげます。
掛け算と足し算の中で足し算を優先させようと思うと、括弧でくくりますね。それと同じ考え方になります。
document.write("a" + "b" + 2 + 3);
// ではなく
document.write("a" + "b" + ( 2 + 3 ) );
として、まず2と3の足し算を優先させると、ab5と表示されます。プログラムを変更して確認してください。
では、本来の課題のプログラムを書いていきましょう。先ほどスクリプトを記述したpractice2.htmlのスクリプト部分を削除して、以下のスクリプトを改めて記述してください。
var a = 5;
var b = 10;
document.write("a = " + a + ", b = " + b + "の時
");
document.write("a + b = " + (a+b) + "<br>");
document.write("a - b = " + (a-b) + "<br>");
document.write("a × b = " + (a*b) + "<br>");
document.write("a ÷ b = " + (a/b) + "<br>");
このように書くことで、正しい結果を導き出すことが出来ます。
ちなみに、&times; は、HTML特殊文字で×を表し、&divide; はHTML特殊文字で÷を表します。特殊文字については、「HTML 特殊文字」で検索すると様々な文字が表示できることがわかります。
予定した表示が出れば正解です。