forが好きになれば上達する！

for命令を体験
2つずつ増やす
文字を増やす

for命令を体験

新規のプログラム「loop2.html」を作成し、次のプログラムを入力してください。

<meta charset="UTF-8">
<script type="text/javascript">

for(var i = 0;i < 10;i = i + 1){
    document.write("i="+i+"<BR>");
}

</script>

for(var i = 0;i < 10;i = i + 1){

document.write("i="+i+"<BR>");

}

</script>

どのような結果になるか、想像しながら実行してみてください。

4行目の「for」命令をみていきましょう。まず変数iの初期値は0で繰り返されるたびに1加算されます。繰り返しの終了は「i<10」の条件が成立しない時です。表示結果とプログラムを見比べてイメージ通りか確認してください

for(var i = 0;i < 10;i = i + 1){

4	for(var i = 0;i < 10;i = i + 1){

2つずつ増やす

プログラム「loop2.html」の4行目を次の通り修正してください。

<meta charset="UTF-8">
<script type="text/javascript">

for(var i = 0;i < 10;i = i + 2){
    document.write("i="+i+"<BR>");
}

</script>

for(var i = 0;i < 10;i = i + 2){

document.write("i="+i+"<BR>");

}

</script>

入力が完了したなら、実行しましょう。

ポイントは4行目の「i=i+2」です。1ずつ増やすのではなく2つずつ増やしています。このように繰り返しを制御できますので、変数の初期値、条件、計算式を変更しながら動作を確認してください。

文字を増やす

プログラム「loop2.html」を次のように修正してください。

<meta charset="UTF-8">
<script type="text/javascript">

var str = "";

for(var i = 0;i < 10;i = i + 1){
    str = str + i;
    document.write("str="+str+"<BR>");
}

</script>

var str = "";

for(var i = 0;i < 10;i = i + 1){

str = str + i;

document.write("str="+str+"<BR>");

}

</script>

実行してみてください。

繰り返されるごとに文字が増えていきました。これは、7行目の「str = str + i」で実現しています。

 str = str + i;

7	str = str + i;

変数strは最初は空白””ですが、1回目の繰り返しで変数iの「0」が追加されます。2回目の繰り返しでは、変数strには「0」が格納されており、それに変数iの「1」が追加されます。次のようなイメージになります。

 str = "0" + "1";

7	str = "0" + "1";

3回目でのループでは、次のようになります。

 str = "01" + "2";

7	str = "01" + "2";

このように繰り返されるたびに変数strの文字が追加されていきます。