Sc283(1) 情報科学応用演習I 資料 (Part 8)　

[解説] JavaScript による HTML ページ生成

一般に，ホームページは HTML 形式で記述される． これまで授業で作成したファイルも，実は HTML で形式記述されたホームページであり． JavaScript は <script …>〜</script> タグに記述された HTML の一要素である． (→[解説] JavaScript の書き方)

これまで入出力に用いてきた document.write(…) や document.writeln(…) は， JavaScript でこの HTML 形式の文書の一部を生成する仕組みである． したがって，ファイル中に直接 HTML 形式のタグやテキストを書くのと， 同じタグやテキストを document.write(…) や document.writeln(…) で出力するのとは，見かけ上は等価である． したがって，下の (A) のページは，(B) と等価になり，ブラウザ上では (C) のように表示される． （参考）

(A) - 〔プログラム実行前のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<script type="text/javascript">
<!--
document.writeln('<p>ドキュメント出力の例');
    // document.writeln(…) は出力後改行あり
document.write('   Hello World! ');
    // document.write(…) は出力後改行なし
document.writeln('Hello World!</p>');
// -->
</script>

(B) - 〔プログラムを実行した結果のHTML〕

（<script …>〜</script>） が置き換えられると考えてよい．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<p>ドキュメント出力の例
   Hello World! Hello World!</p>

(C) - 〔ブラウザによる表示〕

ドキュメント出力の例 Hello World! Hello World!

このとき，JavaScript プログラムとして document.writeln(…) 等を含むページが画面に表示されるまでに，2段階の変換（プログラム実行前のHTML → プログラムを実行した結果のHTML → ブラウザによる表示）が行われることに注意すること．

その際，複数個の空白や document.writeln(…) による改行は，HTML における場合と同じ扱いになるので，通常は単一の空白と同じ扱いになるが，<pre> タグを併用した場合はそれぞれ，空白・改行としての意味を持つ．（下の例参照）

〔プログラム実行前のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<script type="text/javascript">
<!--
document.writeln('<pre>ドキュメント出力の例');
document.write('   Hello World! ');
document.writeln('Hello World!</pre>');
// -->
</script>

〔プログラムを実行した結果のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<pre>ドキュメント出力の例
   Hello World! Hello World!</pre>

〔ブラウザによる表示〕

ドキュメント出力の例
   Hello World! Hello World!

<script …>〜</script> の外側で <pre> タグを使用しても，同じような効果が得られる．（下の例参照）

〔プログラム実行前のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<pre><script type="text/javascript">
<!--
document.writeln('ドキュメント出力の例');
document.write('   Hello World! ');
document.writeln('Hello World!');
// -->
</script></pre>

〔プログラムを実行した結果のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<pre>ドキュメント出力の例
   Hello World! Hello World!
</pre>

〔ブラウザによる表示〕

ドキュメント出力の例
   Hello World! Hello World!

このようにプログラムでページ内容を出力することにって計算結果を画面に表示したり， 分岐処理や反復処理を 併用することで，さまざまな条件によって表示内容を変えたり， 繰り返しのある内容を効率よく表示したりできる．

〔プログラム実行前のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<script type="text/javascript">
<!--
var x;
x=2;
document.write('<p>' + x + 'の平方根は');
if (x >= 0) document.writeln(Math.sqrt(x) + 'です．</p>');
else document.writeln('ありません．</p>');
x=-1;
document.write('<p>' + x + 'の平方根は');
if (x >= 0) document.writeln(Math.sqrt(x) + 'です．</p>');
else document.writeln('ありません．</p>');
// -->
</script>

〔プログラムを実行した結果のHTML〕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<p>2の平方根は1.4142135623730951です．</p>
<p>-1の平方根はありません．</p>

〔ブラウザによる表示〕

2の平方根は1.4142135623730951です．

-1の平方根はありません．

なお，HTML は " を含むことが多いので， 文字列リテラルは， "" ではなく '' で括る形式を用いることが多い．

[タスク] 標準体重表

概要

適当な範囲の身長それぞれについて，標準体重を計算して表にする． 例えば，下の (A) のような表示を得るためには， (B) のような (HTML形式の) 出力を document.write(…) や document.writeln(…) を用いて生成すればよい．

(A)

140, 43.12
141, 43.7382
142, 44.3608

　… 中略 …

180, 71.28

(B)

<pre>
140, 43.12
141, 43.7382
142, 44.3608

　… 中略 …

180, 71.28
</pre>

(B) のような出力を得るには，まず最初の<pre>を出力しておき， 2行目以降の実際のデータ （身長と標準体重の対） は，1行分の出力をする命令を， 必要な回数だけ反復するようにする． 最後の</pre>は，反復後に改めて出力させる．

なお，ファイル名は js08-1.html とする．

ヒント

雛形を以下に示す．また，流れ図例も示す． （流れ図例 - できれば自分で書いてみよう）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 8-1</title>
<script type="text/javascript">
<!--
var min, max, x;    // 身長の下限，上限，for の制御変数
min = 140; max = 180;

// ・ここで身長ごとの標準体重を表示する．(ここは自分で!!)
// ・必要なタグ(<pre>と</pre>)も document.writeln(…) で出力する．
// ・for ステートメントで x の値を min から max まで 1 ずつ変えながら，
// 　身長と標準体重を document.writeln(…) で一行ずつ表示する．
// ・標準体重の計算は Part 2 のタスク標準体重プログラム(1)を参考に!
// ・余裕があれば，最初に見出しの行もつけてみよう．

// -->
</script>

備考

以下に例を示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)

js08-1a.html, js08-1c.html （雛形，例のコードと流れ図）

[タスク] 九九表

概要

掛け算九九の表を作成する．例えば，下の (A) のような表示を得るためには， (B) または (C) のような （document.write(…) や document.writeln(…) による HTML形式の） 出力を生成すればよい．

(A)

123456789
24681012141618
… 中略 …
91827364554637281

(B)

<table border>
<tr><td>1</td><td>2</td><td>3</td> … 中略 … <td>9</td></tr>
<tr><td>2</td><td>4</td><td>6</td> … 中略 … <td>18</td></tr>

　　… 中略 …

<tr><td>9</td><td>18</td><td>27</td> … 中略 … <td>81</td></tr>
</table>

(C)

<table border>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>

	… 中略 …

<td>72</td>
<td>81</td>
</tr>
</table>

なお，ファイル名は js08-2.html とする．

ヒント

更なるヒント．

備考

以下に例を示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)

js08-2d.html （雛形，例のコードと流れ図）

[課題] 計算練習プログラムのフォーム

課題番号： 8-1
課題名： 計算練習プログラムのフォーム
ファイル名：task08-1.html
締切： 次回の演習日の直前の日曜日，18:00まで

内容

下図のような計算練習プログラム用の画面を表示するコードを作成する． 練習問題は [タスク] 計算練習プログラム (1) と同様， 1〜10の自然数同士の足し算とする．

スクリーンショット

ただし，フォームの名前 (name) は f， 各問題の解答欄，正誤欄の名前 (name) は si, ci (i は問題番号)， 正答数欄，誤答数欄の名前 (name) は ok, ng とする． また，各テキストフィールドのサイズ (size) は 3 とする．

今回は練習問題を作成してフォームを表示するだけとし，答え合わせのためのコードなどは実装しない． したがって，[答え合わせ] ボタンの onclick 属性は記述しなくて良い．

ヒント

下のような HTML を生成することを考えればよい．

<h1>計算練習プログラム (2)</h1>
<form name="f">
<table border>
<tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr>
<tr><td>1</td><td>4 + 10 =</td>
    <td><input type="text" name="s1" size="3"></td>
    <td><input type="text" name="c1" size="3" readonly></td></tr>
<tr><td>2</td><td>2 + 1 =</td>
    <td><input type="text" name="s2" size="3"></td>
    <td><input type="text" name="c2" size="3" readonly></td></tr>

	… 中略 …

<tr><td>10</td><td>1 + 8 =</td>
    <td><input type="text" name="s10" size="3"></td>
    <td><input type="text" name="c10" size="3" readonly></td></tr>
</table>
<input type="button" value="答え合わせ">
正答数：<input type="text" name="ok" size="3" readonly>
誤答数：<input type="text" name="ng" size="3" readonly>
</form>

更なるヒント．

問題作成には，myRandom(…) を定義して用いるとよい．

報告について

Moodle の課題ページからファイルを提出すること．ファイル名はすべて半角文字とする．