webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

for文の多重ループ

for文でのインクリメント/デクリメント演算子

f:id:yachin29:20180412142647p:plain



上記のインクリメント演算子を使って
2から100まで2づつ増えていくfor文を作成しましょう。




一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。
ここでは、for文による二重ループを使って、九九の表を表示するプログラムを作ってみましょう。

for ( 変数iの初期値 ;  繰り返し条件  ;  変数の変更  ) {
   for (   変数jの初期値 ; 繰り返し条件  ;   変数の変更 ) {
        処理の結果
   }
 処理の結果
}

この場合の処理の順序は、次のようになります

  1. まず変数iを参照します
  2. jの繰り返し条件が終了するまで処理を繰り返し行う
  3. jの処理の終了後、iの処理を行う


まずは3x3の表を作って見ましょう。

<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th>
</tr>
<script>
for (i=1 ; i<=3 ; i++) {
     document.write('<tr>');
     document.write('<th>' + i + '</th>');

     for (j=1 ; j<=3 ; j++) {
          document.write('<td>' + i*j  + '</td>');
     }

     document.write('</tr>');
}
</script>
</table>
</body>


見出しセルを入れたバージョン

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3x3の表組|javascript</title>
<style>
table {
  width:700px;
  margin:50px auto 0;
  border: 1px solid #000;
  border-collapse:collapse;/*隣同士のセルの線を1つにまとめる*/
}
th,tr,td {
  border: 1px solid #000;
}
th {
  background:#FFCC99;
}
</style>
</head>

<body>
<script>
document.write('<table>');

	document.write('<tr>');//見出しセル用の行
	document.write('<th></th>');//左上のカラのセル
for(var k = 1; k <=9; k++){
	document.write('<th>' + k +'</th>');
}
	document.write('</tr>');

//九九の生成部分
for (var i = 1 ; i <= 9 ; i++) {
	document.write('<tr>');
   document.write('<th>' + i + '</th>');
	for(var j = 1;j <=9; j++){
		document.write('<td>' +i * j + '</td>');
	}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>