一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。
ここでは、for文による二重ループを使って、九九の表を表示するプログラムを作ってみましょう。
for ( 変数iの初期値 ; 繰り返し条件 ; 変数の変更 ) { for ( 変数jの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 処理の結果 }
この場合の処理の順序は、次のようになります
- まず変数iを参照します
- jの繰り返し条件が終了するまで処理を繰り返し行う
- jの処理の終了後、iの処理を行う
<body> <h3>九九表</h3> <table width="500" border="1"> <tr> <th> </th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th> </tr> <script> for (i=1 ; i<=9 ; i++) { document.write('<tr>'); document.write('<th>' + i + '</th>'); for (j=1 ; j<=9 ; j++) { document.write('<td>' + i*j + '</td>'); } document.write('</tr>'); } </script> </table> </body>
さらに前回の授業で作成した、為替表(ドル)を配列を用いて、他の通貨(ユーロ、元など)も入った、複数の値の為替表を作ってみましょ。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>for文と配列</title> <style> table { border-collapse: collapse; } td,th { width: 50px; text-align: center; } th { background-color: #CCC; } </style> </head> <body> <h3>主要通貨の為替レート</h3> <table width="800px" border="1"> <tr> <th>個数</th><th>米ドル</th><th>ユーロ</th><th>人民元</th><th>ポンド</th> </tr> <script> var rate= new Array(4); rate[0] = 119; rate[1] = 134.6; rate[2] = 18.8; rate[3] = 182.4; document.write ( '<tr>' ) document.write('<th>1</th>'); for ( j =0 ; j<=3 ; j++){ document.write ('<td>' + rate[ j ] + '円 </td>') ; } document.write ( '</tr>' ) ; for ( i = 5 ; i<= 100 ; i+=5) { document.write ( '<tr>' ) ; document.write ( '<th>' + i + '</th>' ) ; for ( j =0 ; j<=3 ; j++){ document.write ('<td>' + i * rate[ j ] + '円 </td>') ; } document.write ( '</tr>' ) ; } </script> </table> </body> </html>
、