if文の条件判断と並んで、プログラムに欠かせない制御がループです。ループを使うと、プログラムは簡潔になります。
たとえば「こんにちは」という文字列をブラウザに10回表示したい場合はどうすればいいでしょう。document.writeメソッドを10回書いても、もちろんできますが、回数が100回、1000回となると大変です。今回紹介するループを使うと数行でこれができるようになります。またループ回数も容易に変更できます。もっとも基本的なのはfor文です。今回は昭和と西暦を対応されたものを出力します。
実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>for文のループ</title> </head> <body> <table> <tr> <th>和暦</th> <th>西暦</th> </tr> <script> var i; for( i = 1 ; i <= 63 ; i ++ ){ document.write("<tr><td>", i, "</td> "); document.write("<td>", i + 1925, "</td></tr>"); } </script> </table> </body> </html> |
for文の書き方
1 2 3 |
for(初期化式; 条件式; 制御変数の更新){ } |
初期化式とはループの制御変数を初期化する式です。条件式が設立する間だけ、ループを繰り返し実行されます。最後の式で、制御変数を更新します。
サンプルコードの例だと「i = 1」で、ループ開始前に変数iが「1」に初期化されています。「i <= 63」で、変数iが63以下ならずっとループされています。最後の「i++」は、ループするたびに、変数iの値を1増やす式です。結果として、変数iの値が1,2,3,4,5,6…と増えていき63回処理が実行されます。変数iのようなループを制御する変数を制御変数と呼びます。
変数の値を1ずつ増やす演算子
for文の増減式で使用したi++の++は変数の値を1増やす演算子です。ですので以下の2つの処理は同じです。
1 2 |
i++; i = i + 1; |
数を1増やす処理は頻発するため、こういう記述方法が用意されています。
同様に1減らすのは「--」があります。
これらの演算子は、変数の後ろ、または前に書きます。
1 2 |
++i; //変数iの値を1増やす i--; //変数iの値を1減らす |
ただし、式の中で使用する場合は、どちら側に置くかで値の変化するタイミングが変わりますので注意が必要です。前に記述した場合は、式の実行前に変化します。下記の例だと変数iの値は、変数jに代入される前に1増やされ変数jの値は2になります。
1 2 |
i = 1; j = ++1; //変数iの値は2、変数jの値も2 |
後ろに記述すると、式の実行後に変化します。下記の例だと、変数iの値は、変数jに代入されてから1増やされて2になります。
1 2 |
i = 1; j = i++; //変数iの値は2、変数jの値は1 |
制御変数の名前
ループカウントして使用する制御変数の名前には「i」「j」「k」といったアルファベットの小文字のi以降がよく使われます。なんでかは分かりません。プログラミングの教科書ではiとかkとかが使われます。なんでかはわかりません。制御変数には分かりやすい名前をつけても大丈夫です。