第九回 「四則演算」
前回は繰り返し処理と変数を利用して１〜１０までの値を表示しました。それが以下のものでした。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write(i+1);
// --></script>
</body>
</html>
今回は四則演算について説明します。
JavaScriptでの四則演算は
加算 +
減算 -
乗算 *
除算 /
となっています。あと、余りを求める剰余は%です。
演算の表記は数学と同じで
1 + 2 * 3
のように記述します。この結果は7となります。演算の優先順位をかえる場合は()を使います。例えば
(1 + 2) * 3
のようになります。この場合の結果は9となります。数学では()、{}、[]でくくっていきますが、JavaScriptでは()を何重にもくくって書きます。例えば
((1 + 2) * 3) / 3
となります。ここまでは整数値しか出てきませんでしたが、小数値も使うことができます。例えば
0.25 * 4.01
のように普通に記述します。負数は先頭に-をつけます。
JavaScriptでは四則演算以外にも複雑な演算を行う命令があらかじめ用意されています。これに関しては、別の機会に説明します。
せっかく四則演算を覚えたので繰り返し処理とあわせてかけ算の九九で２の部分を表示させるプログラムを作成してみましょう。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write(i * 2);
// --></script>
</body>
</html>
結果は表示されましたが、数字が横に連続して表示されてしまいよく分からない状態です。１回の結果ごとに改行するようにしてみましょう。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write(i * 2);document.write("<br>");
// --></script>
</body>
</html>
実行してみると以前と結果が全然変わっていません。どうしてでしょうか？ ぱっと見ただけでは問題なさそうですが、この書き方では、期待通りの動作をすることはありません。
複数の命令を繰り返し処理させるには別の書き方をしなければいけません。複数の命令を繰り返し処理させる場合は{}で囲みます。つまり以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) { document.write(i * 2);document.write("<br>");}
// --></script>
</body>
</html>
ブラウザ上で動作させてみると、今度は期待通りの結果になります。{と}で囲まれた部分は「ブロック」として１つの塊とみなされます。これはfor()命令以外でもif()命令など他の部分でも使われます。
上記スクリプトは、もっと短く記述することができます。それについては、また次回説明します。