［Javascript］ｆｏｒ文の多重ループ
ｆｏｒ文と多重ループ
for文は多重ループ（for文の中にfor文を入れる）にできます
for ( 変数ｉの初期値 ; ; ) {
for ( 変数ｊの初期値 ; ; ) {
処理の結果（J）
}
処理の結果（I）
}
この場合の処理の順序は、次のようになります
- まず変数ｉを参照します
- Ｊの処理を繰り返し行う
- ２の処理の終了後、ｉの処理を行う
【演習１】九九表の作成
<body>
<h3>九九表</h3>
<table 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> ・・・ポイント１
var i;
var j; ・・・ポイント４
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>
＊ポイント
- <table>タグの中にJavascriptを埋め込み
- 横軸の１〜９はHTMLで記述
- 縦軸の１〜９はJavascriptのループを利用。変数ｉが増加。行が作られる
- 変数ｉにかける数字を変数ｊとする
- 変数ｉ×ｊの値が＜td＞セルに表示される。
かつ、変数ｊは９になるまでｉ×ｊを繰り返す - 計算終了後＜tr＞タグを閉じて終了
【演習２】下の表をJavascriptを使って作成する
＜コード＞
<style>
table {
width: 600px;
text-align: center;
}
th {
background: #BFF;
}
</style>
</head>
<body>
<h3>単価×個数の一覧表</h3>
<table border="1">
<tr>
<th>個数</th><th>商品Ａ</th><th>商品Ｂ</th><th>商品Ｃ</th>
</tr>
<script>
var i; //個数
var j; //単価の[ ]の中の数字
var tanka = [300, 450, 520]; //商品単価
for ( i = 1 ; i<= 10 ; i++ ) {
document.write ( '<tr>' ) ;
document.write ( '<th>' + i + '</th>' ) ;
for ( j =0 ; j<=2 ; j++){
document.write ('<td>' + i * tanka[ j ] + '円 </td>') ;
}
document.write ( '</tr>' ) ;
}
</script>
</table>
</body>
</html>
＊ポイント
- １行目はHTMLに記述
- 個数の１〜９と、商品価格はループを使用して表示する
- 単価は配列を使っており、インデックス番号をjで表している
jが1の時 → tanka [ j ]は300
jが2の時 → tanka [ j ]は450
jが3の時 → tanka [ j ]は520
