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

[タスク] 計算練習プログラム(2) その2

概要

課題8-1「計算練習プログラム(2) その1」 のコードを，答えあわせができるようにして完成する．

内容

「答え合わせ」ボタンをクリックしたときに，以下の処理を行うようにする．

ヒント

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

js09-1a.html （例のコード）

参考

[解説] 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>
<body>
<script type="text/javascript">
<!--
document.writeln('<p>ドキュメント出力の例');
    // document.writeln(…) は出力後改行あり
document.write  ('   Hello World! ');
    // document.write(…) は出力後改行なし
document.writeln('Hello World!</p>');
// -->
</script>
</body>

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

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

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

(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>
<body>
<script type="text/javascript">
<!--
document.writeln('<pre>ドキュメント出力の例');
document.write  ('   Hello World! ');
document.writeln('Hello World!</pre>');
// -->
</script>
</body>

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

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

〔ブラウザによる表示〕

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

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

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

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

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

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

〔ブラウザによる表示〕

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

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

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

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

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

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

〔ブラウザによる表示〕

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 js09-2.html とする．

ヒント

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 8-1 9-2</title>
<body>
<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 3 のタスク標準体重プログラム(1)を参考に!
// ・余裕があれば，最初に見出しの行もつけてみよう．

// -->
</script>
</body>

備考

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

js08-1a.html, js08-1c.html js09-2a.html, js09-2c.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 js09-3.html とする．

ヒント

更なるヒント．

備考

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

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