繰り返し処理と文字の表示
ステップ09では、多重ループの繰り返し処理について学習します。そのほか、ホームページに文字を表示したり、HTMLタグを出力したりできるdocument.write()の利用方法も学習します。
9.1 ２重ループの繰り返し処理
for文を入れ子にして記述すると、２重ループの繰り返し処理を作成できます。同様に、３重ループ、４重ループの繰り返し処理を作成すらｷとも不可能ではありません。まずは、変数「i」の繰り返し処理の中に、変数「j」の繰り返し処理を記述した２重ループを例にして、各処理が実行される手順を確認しておきましょう。
この例の場合、【処理A】と【処理C】はi=1、２、３の計３回が実行されます。一方【処理B】は、i=1のときにj=1～8の８回、i=2のときにj=1～8の８回、i=3のときにj=1～8の８回、と全部で24回実行されます。繰り返し処理の多重ループを利用する場合は、このような特性を十分に理解しておく必要があります。
9.2 ホームページに文字を表示する document.write( )
続いては、より具体的な例で多重ループの活用方法を学習していきましょう。今回はJavaScriptで九九の表を作成してみます。とはいえ、九九の表をメッセージウインドウに表示するのはあまり現実的な話しではありません。そこではJavaScriptを使ってホームページ内に文字を表示する方法から学習していきます。
ホームページに文字を表示する場合はdocument.write()という命令を使い、表示する文字をカッコ内に記述します。このとき、表示する文字を「"」（ダブルクォーテーション）または「'」（シングルクォーテーション）で挟むのを忘れないようにしてください。
また、JavaScriptを記述する場所にも注意しなければいけません。document.write()で文字を表示する場合は、JavaScriptを<body>～</body>の間に記述します。
▼document.write()を使・ｽ文字の表示
9.3 document.write( )でHTMLタグを出力する
document.write()は、通常の文字だけでなく、HTMLタグを出力する場合にも利用できます。たとえば、以下のように記述すると、JavaScriptで画像を表示できます。
この例では、変数「filename」に表示する画像のファイル名「photo01.jpg」代入しています。続いて、「document.write()で「</img src="」、変数「filename」の値、「">」を順に出力します。その結果、「</img src="photo01.jpg">」という文字（タグ）が出力されらｷとになり、ホームページに画像が表示されます。
9.4 JavaScriptで九九の表を作成する
話を元に戻し、JavaScriptで九九の表を作成する方法を解説していきましょう。以下に示したHTMLファイルが、その解答例となります。
▼Sample9_1.html
それでは、HTMLファイルの内容を順に見ながら、各行で処理している内容を解説していきましょう。まずは、HTMLおよびCSSの部分から解説します。
・9～17行目
このホームページのCSSが記載されています。ここでは、tdタグとthタグについて「横幅50ピクセル」「中央揃え」を指定しています。
・22行目
表の開始を示すtableタグです。border="1"で表の枠線を表示しています。
・23～26行目
表の1行目（見出し）をHTMLで作成しています。
・38行目
表の終了を示す</table>が記載されています。
ここまでの記述で、図9-3のように表の1行目（見出し）がホームページに表示されます。
図9-3 HTMLにより表示される部分
九九の表
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|
続いて、表の2～10行目を表示しているJavaScriptについて解説します。
・27～37行目（JavaScriptの範囲）
この範囲がJavaScriptの記述です。bodyタグ内で、表の2～10行目にあたる場所にJavaScriptを記述します。
・29～35行目（ループiの範囲）
変数「i」による繰り返し処理です。この繰り返しでは、九九の表の"行"を作成します。i=1～9の繰り返し実行され、それぞれが表の2～10行目を作成していきます。
・30行目（ループiで実行される処理）
行の開始を示す<tr>、およ左端のセル（見出し）を作成するタグを出力します。<th>～</th>内は、変数「i」により1～9の数値が出力されます。
・31～33行目（ループjで実行される処理）
変数「j」による繰り返し処理です。この繰り替えし処理では、九九の表の"セル"を1ずつ作成していきます。
・32行目（ループjで実行される処理）
セルを示す<td>～</td>を出力します。<td>～</td>内は「i * j」により九九の計算結果が出力されます。
・34行目（ループiで実行される処理）
行の終了を示す。</tr>が出力されます。
このような処理が行われた結果、最終的に以下のような表が表示されます。
図9-4 JavaScriptで作成した九九の表
九九の表
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|
演習
（１）「Sample9_1.html」を参考に、以下のような表をJavaScriptで作成してみましょう。
単価×個数の一覧表
| 個数 | 商品A | 商品B | 商品C |
|---|
※cssを記述し、thタグ、tdタグに以下のような書式を指定します。
・thタグ…background-color:#cccccc; width:80px;
・tdタグ…width:80px; text-algin:center;
※表の1行目まではHTMLで作成し、表の2～11行目をJavaScriptで作成します。
※JavaScriptでは「tanka」という配列に各商品の単価を代入しておきます。
・tanka[0]=300;
・tanka[1]=450;
・tanka[2]=520;
※表の2～11行目は、2重ループの繰り返し処理を使って作成します。各セルの値（単価×個数）は、繰り返し処理の変数「i」「j」と配列「tanka」により計算します。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP08へ
→STEP10へ