for文(反復文)

今度はfor文です。

for文もwhile文のように反復文です。

for文は (変数宣言及バリュー代入;　条件式;　増減式) こんな風に使い、条件が真の間命令文を実行します。

構造は次のようです。

for文の構造

for(変数宣言及バリュー代入;　条件式;　増減式){
    条件が真の間に実行する命令文;
}

では、どうやって作動するがもっと詳しくみてみましょう。次のソースは1から10まで出力するソースです。

for(a = 1; a <= 10; a++){
    document.write(a);
}

for文の実行順番

1. (a = 1) 変数宣言及バリュー代入, 変数a宣言及バリュー1を代入

2. (a <= 10) 条件実行, 変数aのバリューが 10と小さいか等しい間に命令文実行

3. (document.write(a)) ２番で命令文を実行するので、document.write(a)が実行され1を出力

4. (a++) 増減式を実行し、変数aのバリューは1から2になる。

5. (a <= 10) 条件実行, 変数aのバリューが 10と小さきか等しい間に命令文を実行

3. (document.write(a)) ２番で命令文を実行するので、document.write(a)が実行され2を出力

4. (a++) 増減式を実行し、変数aのバリューは2から3になる。

5. (a <= 10) 条件実行, 変数aのバリューが 10と小さきか等しい間に命令文を実行

3. (document.write(a)) ２番で命令文を実行するので、document.write(a)が実行され3を出力

4. (a++) 増減式を実行し、変数aのバリューは3から4になる。

(a++) 増減式を実行し、変数aのバリューは10から11になる。

11 だからもう、実行しないしfor文から出る

絵で見るfor文の順番

番号順にfor文は作動します。

ではテストしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - JavaScript</title>
<script type="text/javascript">
    for(a = 1; a <= 10; a++){
        document.write(a);
    }
</script>
</head>
<body>
</body>
</html>

結果

for文の中のfor文　二重for文

二重for文としたらなんか難しく聞こえるが、ただfor文の中にfor文を宣言するのです。

つまり、for文の条件が真である時実行する命令文もfor文です。^^

二重for文の構造

for(変数宣言及バリュー代入;　条件式;　増減式){
    for(変数宣言及バリュー代入;　条件式;　増減式){
    }
}

１番目のfor文の条件が真のであると２番目のfor文が作動し、２番目のfor文の条件が真のである間、２番目の命令文を執行し、２番目のfor文の条件が偽になると２番目のfor文を出て、１番目のfor文を実行してから条件が真だったら２番目のfor文を実行します。

理解可能な簡単なソースをみてみましょう。

for(a = 1; a <= 3; a++){
    document.write("<br />"+a+"１番目のfor文によって出力されました。<br /><br />");
    for(b = 1; b <= 3;b++){
        document.write(b+"2番目のfor文によって出力されました。<br />");
    }
}

上のソースで青いボックスは１番目のfor文で、赤いボックスは２番目のfor文です。

１番目のfor文のaが１であり、条件式によってaが3より小さいか等しいと青いボックスを実行します。

今aが1なので現在の条件式が真ですので青いボックスを実行します。

青いボックスを見ると　１番目のfor文によって出力されました。　という文字が出力文によって出力され、その後２番目のfor文に入ります。

２番目のfor文を見るとbは１でありbが3より小さいか等しいと書いてあります。

なので条件式は真なので青いボックスを実行します。

青いボックスを実行すると　2番目のfor文によって出力されました。　という文字が出力文によって実行されます。

その次は増減式です。b++を実行すると

bは1から2になりまた　2番目のfor文によって出力されました。　という文字が出力され増減式によってbは3になります。

条件は3より小さいか等しい間ですから３は３と小さいか等しいので

また　2番目のfor文によって出力されました。　という文字が出力されます。

増減式によってbは3から4になります。　４は条件に偽なのでfor文から出ます。

では、今までは１番目のfor文のaが1の時の実行文は全部実行されました。

なので１番目の実行文を実行したから増減式a++が作動されaは１から２になります。

１番目のfor文の条件なaが3より小さいか等しいと条件が真なのでまた２番目のfor文が作動します。

そう上のよう２番目のfor文はまた最初から作動してbのバリューはまた１になり

出力文を出力し、増減式によってbは2になり条件は真なので実行文を実行し、その後条件式によって３になります。

条件が真なので出力文を出力し増減式によってまた４になり
４は条件に偽なので２番目のfor文から出ます。

１番目の条件文に戻って１番目のfor文でaは2になったから増減式によってaは３になり条件に真なので

実行文を実行し２番目のfor文をまだ作動されます。

ではソースでみてみましょう。

 
<!DOCTYPE html>
<html>
<head>
<title> coreasur - JavaScript</title>
<style type="text/css">
</style> 
<script type="text/javascript">
for(a = 1; a <= 3; a++){
    document.write("<br />"+a+"１番目のfor文によって出力されました。<br /><br />");
    for(b = 1; b <= 3;b++){
        document.write(b+"2番目のfor文によって出力されました。<br />");
    }
}
</script>
</head>
<body>
</body>
</html>

結果

제가 처음에 for문을 겪을때 무슨 말인지 못알아 먹어서 모르시는 분께서 아시도록 최대한 설명을 해봤는데 잘 되었는지 모르겟네요. ㅜㅜ

私はfor文について最初勉強する時に全然理解できなかったのでできるだけ詳しく説明してみましたが、ちゃんと出来たか知りません。

今度はきゅうきゅうです。

二重for文を利用して作るきゅうきゅう

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur JavaScript</title>
<script type="text/javascript">
    for(a = 2; a<=9; a++){
        document.write(a+"<br />");
        for(b = 1; b<=9;b++){
            document.write(a+"*"+b+"="+(a*b)+"<br />");
        }
        document.write(a+"<br />");
    }
</script>
</head>
<body>
</body>
</html>

結果

ではこれでfor文は終わりです。ありがとうございます。