webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

for文 復習 2 かけ算 九九表

  • 予想通りの結果。ここからどうするかを考える…
  • なにを、どのように繰り返すのか、頭を整理するといいのだろう。

f:id:ohta-felica:20160515083005j:plain

 

<script>
var i
for(i=1; i<=9; i++)
{
document.write('<tr><th>'+i+'</th>');
var j
for(j=1; j<=9; j++)
{
document.write('<td>'+i*j+'</td></tr>');
};
};

</script>

 

  • 1列目は 「i」を繰り返す。
  • 「th」にしておけばフォントが太字になるから、「th」にする。
  • まずは、1から9の数字を縦に並べることを考える。
  • 2段階目は、各々の 「i」に対して、1から9を掛けていく。

for(i=1; i<=9; i++)

{

document.write('<tr><th>'+i+'</th>');

}

  • ある「i」の値に対して、1から9を順番にかけていくということは、上のfor文の中で、入れ子構造にすると考える。
  • 新たに変数「j」を設定する。

var j

for(j=1; j<=9; j++)

{

document.write('<td>'+i*j+'</td>');

}

  • このふたつを、入れ子にして組み合わせると…
  • そして、</tr>は、ひとつの「i」に対して1回あればよいから…

for(i=1; i<=9; i++)

{

document.write('<tr><th>'+i+'</th>');

var j

for(j=1; j<=9; j++)

{

document.write('<td>'+i*j+'</td>');

}

document.write('<tr>');

}

 

f:id:ohta-felica:20160515095036j:plain

  • 結局、</tr> の位置だけでしたね。
  • border-collapse: collapse; を忘れているね。