変数の演算
変数の便利なところは、四則演算などの計算を自由に実行できることです。そのほか、文字の加算を行うことも可能です。 ステップ05では、変数を使って演算を行う方法を学習します。
5.1 演算子の記述
JavaScriptで変数（数値）を演算する場合は、以下のような演算子を利用して数式を記述します。 「+」や「-」の演算子は一般的な記述と同じですが、「×」は「*」、「÷」は「/」（スラッシュ）と記述する点に注意してください。また、演算子は半角文字で記述しなければいけません。
■JavaScriptで使用できる演算子
| 演算子 | 記述例 | 実行される演算 |
|---|---|---|
| + | a+5 | 足し算（aに5を足す） |
| - | a-3 | 引き算（aから3を引く） |
| * | a*1.05 | 掛け算（aに1.05を掛ける） |
| / | a/6 | 割り算（aを6で割る） |
| % | a%12 | 割り算したときの余り（aを12で割った余りを求める） |
たとえば、以下のようにJavaScriptを記述した場合、変数「a」には「8」が代入されます。
※演算子の前後に挿入されている半角スペースを省略し、数式を続けて記述しても構いません。
もちろん、数式内に変数を記述したり、（）で演算する順序を指定したりすることも可能です。 たとえば、以下のようにJavaScriptを記述した場合、変数「c」には、変数「a」（300）と変数「b」（700）の合計 に1.05を掛けた値、すなわち1050が代入されます。
5.2 プログラムならではの記述方法
JavaScriptでは、以下のように数式を記述する場合がよくあります。このような数式は数学的には正しくない数式となりますが、プログラム的には正しい数式として処理されます。この数式の意味は、変数「a」に3を足した値を、変数「a」に代入するとなります。つまり、変数「a」の値が5であった場合、a+3=8が新しい「a」の値として代入されます。
5.3 インクリメントとデクリメント
そのほか、JavaScriptではインクリメントとデクリメントもよく利用されます。インクリメントは変数の値を１だけ増加させる演算であり、変数名++と記述します。たとえば、以下のように記述した場合、変数「a」の最終的な値は６となります。
※実行ボタンをクリックしてみてください（図5-1）
一方、デクリメントは変数の値を１だけ減少させる演算であり、変数名--と記述します。よって、以下の例の場合、変数「a」の最終的な値は４となります。
※実行ボタンをクリックしてみてください（図5-2）
5.4 文字の足し算
数値だけでなく文字の変数も演算を行うことが可能です。たとえば、以下のように数式を記述すると、変数「str」の最終的な値は“ようこそホームページへ”になります。
※実行ボタンをクリックしてみてください（図5-3）
なお、文字の変数で実行できる演算は足し算だけです。「str - "ホームページ"」のように、文字の引き算を実行することはできません。
5.5 変数に文字を追加して表示する
文字の足し算は、alert ( ) などで文字を表示する場合にも活用できます。たとえば、「yama="富士山"」であった場合、「alert（"答えは"+yama+"です"）」と記述すると、"答えは富士山です"と表示できます。
※実行ボタンをクリックしてみてください（図5-4）
このような記述は、表示する変数の内容が数値であった場合にも有効です。
※実行ボタンをクリックしてみてください（図5-5）
演習
（１）以下のように、変数「a」と「b」の四則演算、および余りを求めるホームページを作成してみましょう。
a=10、b=4について、
変数「a」と「b」の計算結果を表示します。
※「tashizan ( )」「hikizan ( )」「kakezan ( )」「warizan ( )」「amari ( )」という５つの関数を作成し、ボタンをクリックした際に対応する関数が実行されるようにJavaScriptを記述します。
※各関数では、変数「kai」に演算結果を代入し、alert ( ) で答えを表示します。
※変数「a」「b」「kai」はグローバル変数とするため、関数の外で宣言を行います。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP04へ
→STEP06へ