プログラムでは同じような処理を指定回数繰り返すことがあります。
その時はforループを用います。forループでは、通常カウンタを利用します。そこで使うカウンタ変数の名前は、iだったりjだったりがなぜか多いです。
forループ文は、
for(初期化式; 条件式; ループ処理後実行式){
繰り返し行う処理
}
例えば、一般的なforループの書き方でいうと
var i;
for(i=0; i<10; i++) {
document.write( i + "回目の処理です");
}
この場合、このような処理を順番に行います。
(1)初期化式を実行 ここでは、iに0を代入します。
(2)ここからループに入ります。
(2-1)条件式を確認します。 i<10 → iが10より小さいか
i=0で条件を満たしていますので、ループ処理を実行します。
document.write(i + “回目の処理です
”);
(2-2)処理が終わったので実行式を実行します i++ → iが1になります。
(2-3)条件式を確認します。i<10 → iが10より小さいか
i=1で条件を満たしていますので、ループ処理を実行します。
document.write(i + “回目の処理です
”);
(2-4)処理が終わったので実行式を実行します i++ → iが2になります。
・・・
(2-*)条件式を確認します。i<10 → iが10より小さいか
i=9で条件を満たしていますので、ループ処理を実行します。
document.write(i + “回目の処理です
”);
(2-*)処理が終わったので実行式を実行します i++ → iが10になります。
・・・
(2-*)条件式を確認します。i<10 → iが10より小さいか
i=10で条件を満たしていませんのでループ処理を終了します。
(3)処理を終了します。
となります。
では、実際に今のスクリプトを入力してブラウザでファイルを開いてみましょう。
jsbase.htmlをpractice4.htmlにコピーして開きましょう。そして<script>タグの中で
var i;
for(i=0; i<10; i++) {
document.write( i + "回目の処理です");
}
と入力し、ブラウザでファイルを開いてみましょう、
と表示されたら正解となります。
次にこんなスクリプトを作ってみましょう。
「10回数値を入力します。そして、10個入力した値のうち偶数の数が何個、奇数の数が何個あったかをブラウザに表示しましょう。」
という問題です。javascriptで記述してみます。
- まず、奇数カウンターと偶数カウンターを0で初期化します。
- forループで10回まわす処理を行います。それぞれの処理の中で数値を入力させ、その数値が奇数であれば奇数カウンターを1アップ、偶数であれば偶数カウンターを1アップする処理を行います。
- ループが終わったら、それぞれのカウンターを表示します。
という処理になりますね。
<script>
var i; // カウンタ
var suuchi // 入力した数値を入れる
var gusu = 0; // 偶数の個数
var kisu = 0; // 奇数の個数
for(i=0; i<10; i++){
suuchi = parseInt(prompt((i+1)"個目の数値を入力してください"));
if( suuchi % 2 == 0) { // 余りが0の時は偶数
gusu++; // 偶数カウントをインクリメント
} else {
kisu++;
}
}
// 10個入力が終わったので、偶数と奇数の数を表示する
document.write("偶数の数が" + gusu + "個で、奇数の数が" + kisu + "個です");
</script>
正しく表示を行うことができましたでしょうか。
forループは一見だけでなくforループの中にforループを入れ子にして行うことができます。
今回は九九の表を作るループを作ってみましょう。見た目を考えると表(table)タグを使って作って行くこととしましょう。
前回作成した部分もコメントアウトして、スクリプトを追加しましょう。
手順はどうなるかというと、
- 九九をx × y という形で計算することとする。
- まずは、x=1にして、y=1〜y=9までループさせて表として出力する。
- 次にx=2にして、y=1〜y=9までループさせて表として出力する。
- どんどん続けて、x=9まで進める
ことになります。
では、スクリプトを記していきましょう。
// かける数を縦軸、かけられる数を横軸とする
document.write("<table border='1'>"); //表を開始する
// かけられる数の表示
document.write("tr"); // 行を開始する
document.write(" "); //かける数の場所は空欄
for(i=1;i<10;i++){
document.write("<th>"+i+"</th>"); // かけられる数を表示する
}
document.write("</tr>");
// かける数と答えの表示
for(i=1;i<10;i++){ // かける数のループ
document.write("<tr>"); // 行を開始する
document.write("<th>"+i+"</th>); // かける数を表示
for(j=1;j<10;j++){ // かけられる数のループ
document.write("<td>"+(i*j)+"</td>"); // 掛算の答えを表示
}
document.write("</tr>"); //行を終了する
}
document.write("</table>")
スクリプトの入力が終わったら、ブラウザでファイルを開いてください。
九九の表が表示されましたでしょうか。このような形で繰り返し処理の中で繰り返し処理を行うことができます、