【授業メモ】JavaScript for文の応用 多重ループ
for文の応用 多重ループ
繰り返しのfor文に、ループを入れ子にしていくことが可能になる。
★for文のかたち
for ( var i = 1; i <= 3 ; i = i + 1 ){}
＝変数iは1で、3回までループ、そのたびに1ずつ足されていく
★多重ループ
親要素のループにはその都度子要素のループが含まれてしまう
子aのループごとのあいまに親iが入っていく
for ( var i = 1; i <= 3 ; i = i + 1 )
for ( var a =1; a <= 3 ; a = a + 1 ){
document.write(a);
}
document.write(i);
}
123112321233
aの一回目
iの一回目
aの二回目
iの二回目
aの三回目
iの三回目
★for文による九九の考え方
<table width="300" border="1"> ※
<script>
for ( var i = 1; i <= 3 ; i = i + 1 ){
document.write('<tr>');
for ( var a =1; a <= 3 ; a = a + 1 ){
document.write('<td>' + 3 * 1 + '</td>');
}
document.write('</tr>');
}
</script>
</table>
<!--JavaScriptはこういうことを示してる
<table width="300" border="1">
'<tr>''<td>' + 1 * 1 + '</td>''<td>' + 2 * 1 + '</td>''<td>' + 3 * 1 + '</td>''</tr>'
'<tr>''<td>' + 1 * 2 + '</td>''<td>' + 2 * 2 + '</td>''<td>' + 3 * 2 + '</td>''</tr>'
'<tr>''<td>' + 1 * 3 + '</td>''<td>' + 2 * 3 + '</td>''<td>' + 3 * 3 + '</td>''</tr>'
</table>-->
<!--掛け算の結果はこう
<table width="300" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>6</td></tr>
<tr><td>3</td><td>6</td><td>9</td></tr>
</table>-->
※ここのtableタグに直接幅とか指定しているのは練習だからであって、ほんとうはだめ。もしやるとしても、widthのpxはつけたらエラーになるので注意。
★tableタグとJavaScriptで九九の表を作る
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>九九の表</title>
<style>
table {
width: 500px;
border: 1px solid black;
border-collapse: collapse;/*ボーダーが重なっている時に直す方法*/
}
th,td {
border: 1px solid black;
}
th {
background: #999;
}
</style>
</head>
<body>
<h1>九九表</h1>
<table>
<script>
document.write('<tr><th> </th>');
for (var x = 1; x <=9; x = x+1){
document.write('<th>' + x + '</th>');
}
document.write('</tr>');
for (var i = 1; i <= 9; i = i + 1 ) {
document.write('<tr>');
document.write('<th>' + i + '</th>');
for (var a = 1; a <= 9; a = a + 1) {
document.write('<td>' + a * i + '</td>');
}
document.write('</tr>');
}
</script>
</table>
</body>
</html>
★為替表を作る
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>為替表</title>
</head>
<body>
<table>
<script>
document.write('<tr><th>ドル</th><th>円</th></tr>');
var y = 110;
for (var s = 10; s <= 50; s = s + 10) {
document.write( '<tr><td>' + s + '</td>' );
document.write( '<td>' + s * y + '</td></tr>' );
}
</script>
</table>
</body>
</html>
