読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

for文の多重ループ

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

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

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

  1. まず変数iを参照します
  2. jの繰り返し条件が終了するまで処理を繰り返し行う
  3. jの処理の終了後、iの処理を行う
<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</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>

さらに前回の授業で作成した、為替表(ドル)を配列を用いて、他の通貨(ユーロ、元など)も入った、複数の値の為替表を作ってみましょ。
f:id:yachin29:20150930135655j:plain

<!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>

広告を非表示にする