Chapter-13

生物工学科情報処理実習　第1回

JavaScriptによるプログラミング入門

制作・著作: 生物工学科　星　岳彦
オンライン版編集：生物工学科　佐藤　大輔・篠田　績

13.たくさんの結果はセレクトボックスで

　8.と9.でforを使った数表を作ったが、結果の行数が長くなると見にくくなる。そこで、セレクトボックスというフォームを使ってエレガントに表示する方法を学ぶ。

[作業手順]

(1)次のプログラムをcalc7.htmとして入力し、NetscapeNavigatorで実行してみよ。

<HTML>

<HEAD>

<TITLE>JavaScript calc7</TITLE>

/* 結果をセレクトボックスに表示し必要な値を調べやすくした。 */

document.write("<FORM><SELECT NAME=ROOT>") ;

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

document.write("<OPTION>","ROOT(",i,") = ",Math.sqrt(i)) ;

document.write("</SELECT></FORM>")

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

テキストボックスの場合と異なって、this.formでフォームの情報を渡して書き込むことは、セレクトボックスではできない。そこで、プログラムの中から、document.write()を使って、直接セレクトボックスのフォームを書き込むことにして対応する。セレクトボックスは、<FORM><SELECT><OPTION>項目1<OPTION>項目2<OPTION>項目3…</SELECT></FORM>という形で記述できるので、そのまま素直にプログラムにすれば良い。

(2)結果

←戻る	目　次	進む→