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

[解説] フォーム（その1）

概説

HTML には，データを入力して WWW サーバに送信するために フォーム と呼ばれる仕掛けがある．これは，ホームページ中にデータ入力用の部品を並べておき，ページを閲覧した人がデータを入力できるようにしたもので，「送信ボタン」 (これもデータ入力用の部品の一つ) を押すことで，指定したサーバに入力データが送信されるようになっている．

このフォームは，ホームページ (HTML ファイル) に埋め込まれている JavaScript プログラムのデータ入出力に流用することもできる．この場合は，通常「送信ボタン」は用いない．

フォームの構成

フォームは，<form>タグを用いて記述する．データ入力用の部品は <input>， <select>， <option>， <textarea>， <button> 等のタグを用いて記述され，<form> と </form> の間に並べる．

入力データの送信に用いる場合，送信の方法と送信先は <form> タグの action 属性と method 属性で指定するが， JavaScript プログラムの入出力に用いる場合は~~特に指定する必要はなく~~， <form name="f" action=""> のように， ~~代わりに~~ name 属性で名前をつけておく （action属性は必須属性で省略できないので，空値にしてつけておく）．この名前（この例の場合はf）は JavaScript から参照する時に用いる． (→「JavaScript からの参照・代入」)

<form>～</form> 間では，各部品のタグ以外に通常のテキストやタグも記述できるので，部品のレイアウトを整えたり，フォーム中に文章を埋め込んだりするのに用いることもできる．フォームは画面に表示するページの一部なので， <body>～</body> の間に書く．これらのタグ <body> と </body> は省略しない方がよい．

ボタン (フォーム部品)

汎用のボタンとして 汎用ボタン がある．これは，<input> タグの type 属性に "button" を与えることで得られる．

例 2

<input type="button" value="汎用ボタン"
onclick="alert('hello');">

以下に，おもな属性をまとめておく．

属性名	説明
`type`	（`="button"`）
`name`	この入力部品に名前をつける．つけられた名前は JavaScript から参照する時に用いる．汎用ボタンについては，JavaScript から参照されないことも多いので，必ずしも名前を付けなくてもよい．
`value`	ボタン表面に表示する文字列を与える．
`onclick`	ボタンをクリックした時に実行する JavaScript のコード (命令) を記述する．文字列の定数を使用する場合は，属性値を括る二重引用符 (`"`) と区別するために，二重でない引用符 (`'`) を用いる．

また，<button> タグの type 属性に "button" を与えても，汎用ボタンを作成することができる．この場合も，属性は <input> タグの場合とほぼ同様であるが，ボタン表面に表示する内容は，value 属性ではなく，<button>～</button> の間に記述する．

例 3

<button type="button"
onclick="alert('hello');">

<big><b>汎用ボタン</b></big></button>

テキスト(入力)フィールド (フォーム部品)

1行の文字列を入力するための部品として テキスト(入力)フィールド がある．これは，<input> タグの type 属性に値 "text" を与えることで得られる．

例 1

<input type="text" name="txtSample" value="テキスト入力"
size="24">

以下に，おもな属性をまとめておく．

属性名	説明
`type`	（`="text"`）
`name`	この入力部品に名前をつける．つけられた名前は JavaScript から参照する時に用いる．
`value`	フィールド内の初期値を与える．
`size`	フィールドの大きさ(長さ)を与える．
`maxlength`	入力できる文字数の最大値を与える．
`readonly`	このテキストフィールドを入力不可（読み取り専用）にする．出力専用にするときなどに用いる．（属性値，すなわち `=` 以下は，省略した形で記述する本当の属性値は `"readonly"` なので，`readonly="readonly"` と書いてもよいのだが，通常は省略して `readonly` のみを書く．これでも `readonly="readonly"` という意味として扱われる．）

テキストフィールドは，JavaScript のコードで内容を書き込んだり変更したりできるので，それを利用して，情報の出力にも用いられる． (→「JavaScript からの参照・代入」)

その他のフォーム部品

上記のテキスト(入力)フィールド，汎用ボタンの他にも， <input> タグを用いて チェックボックス (type="checkbox") や ラジオボタン (type="radio") などの部品を用意することができる．

また，他のタグを用いれば，複数の選択肢から1つを選ぶ セレクトボックス (<select> と <option> の組み合わせ) や複数行のテキストが入力できる テキストエリア (<textarea>) が用意できる．

(参考: フォーム (その2) 種々のフォーム部品)

JavaScript からの参照・代入

JavaScript プログラムの入出力のためにフォームを用いる場合，プログラム中では，特定のフォーム部品を指定して，その部品が表示している内容（持っている値）を読み取ったり，そのフォーム部品が表示している内容（持っている値）を変更したりする必要がある．

JavaScript プログラムの中では，特定のフォーム部品は以下のように表現される：

document.フォーム名.部品名
document.フォーム名.elements["部品名"]

このフォーム名と部品名には，それぞれフォームを表す <form> タグと部品を表す <input> 等のタグの， name 属性で与えた名前を用いる．通常は前者の表現を用いるが，後者は部品名を名前ではなく文字列で与える表現で，部品名を変数の値や式の計算の結果として与えたい場合などに用いる．

これらの表現によって，個々のフォーム部品に対して，情報を読み取ったり書き込んだりするなど，さまざまな操作を行うことが可能になる．

テキストフィールドの場合，その表示内容（テキストフィールドの値）は，そのテキストフィールドを表す表現に .value を付け加えた形，すなわち，以下のようになる．この value は，そのテキストフィールドの value 属性に対応している．一般に，各フォーム部品の各属性値も同様に，その属性名を . に続けて書くことで参照できる．

document.フォーム名.部品名.value
document.フォーム名.elements["部品名"].value

例えば，あるテキストフィールドが document.f.txtA と表される場合，そのテキストフィールドの値は document.f.txtA.value (または document.f.elements["txtA"].value) となる．

この .value を用いた表現は，JavaScript のプログラム中では，あたかも変数であるかのように用いることができる．式の中に現れた場合，そのテキストフィールドの値がその「表現」の値として用いられ，代入することによって，その値（表示内容）を変更することもできる．

例 4

この例のフォーム部品は，ex4 という名前のフォーム ( <form name="ex4"> ～ </form> ) の中に記述されており，下のテキスト入力フィールドは，次行のタグのように記述されたものである．

参考資料

[解説] 仕事手順の典型的パターン（その4: イベント駆動）

イベントとは

プログラムへの何らかのはたらきかけとなる出来事を イベント という．例えば，以下のようなものはイベントと考えることができる．

マウスの操作 (クリック・ダブルクリック・ポインタの通過・ドラッグの開始/終了など)
キーボードの操作 (キーを押す/離すなど)
その他周辺機器からの信号 (電話(モデム)の着信・インターネットからのデータ受信などなど)

これらのイベントは，プログラムによって検出されて，さまざまな処理のきっかけとなることが多い．

イベント駆動

通常は何もせずにイベントの発生を待ち続け (この状態を イベント待ち と呼ぶ)，何かのイベントが発生するとそれに応じた処理をし，再びイベント待ちに戻る，というような形式のプログラムを イベント駆動 のプログラムと呼ぶ．

この「イベントに応じた処理」をするプログラムコードは，通常 イベントハンドラ と呼ばれ，「イベント待ち」⇔「イベントに応じた処理」の繰り返しは イベントループ と呼ばれる．

したがって，イベント駆動のプログラムは，1つのイベントループと (一般には複数の) イベントハンドラから構成されると考えてよい．流れ図の例を下に示す．図中の「処理A」～「処理Z」の部分がイベントハンドラである．もちろん，クリック以外のイベントについても同様にイベントハンドラが (必要に応じて) 用意される．

なお，考えうる全てのイベントに対応する必要は，必ずしもないので，「自分の仕事」に関係のあるイベントにだけ対応し，それ以外のイベントについては無視するか他のプログラムにまかせるのが普通である．

このイベント駆動の考え方は，ウィンドウシステム (Windowsなど) の GUI (Graphical User Interface) のプログラミングにおいて多く用いられている．

JavaScript のイベントハンドラ

JavaScript において，特にフォーム部品で発生するイベントのイベントハンドラは，そのフォーム部品のタグ内の，on???= という形の属性に記述される．例えば，汎用ボタン (<input type="button" …>) をクリックするというイベントのイベントハンドラは，その汎用ボタンの input タグ中の，onclick= 属性に記述する． (汎用ボタンの項，例2参照) イベントハンドラの記述方法は，他にも JavaScript のコード中で， document.フォーム名.部品名.on??? に関数オブジェクトを代入するとか，addEventListenerメソッドを用いるなどの方法もあるが，授業では触れない．

参考資料

イベントハンドラ (in とほほのJavaScriptリファレンス)

[タスク] BMIプログラム (2)

概要

Part 2 のタスク「BMIプログラム (1)」のプログラムを，入出力にテキストフィールドを用いたイベント駆動の形に書き換える．実際の計算は，関数 keisan() を定義してそこで行うようにする．計算の開始には汎用ボタンを用い，そのイベントハンドラで keisan() を呼び出すようにする．

ファイル名は js07-1.html とする．

ヒント

雛形を以下に示す．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 7-1</title>
<script type="text/javascript">
<!--
// 関数の定義 (計算ボタンのイベントハンドラ)
function keisan() {
    // 入力用テキストフィールドに書き込まれたデータを読み取って，
    // それを元に必要な計算をし，
    // 結果を出力用テキストフィールドに書き込む．(流れ図例)
}
// -->
</script>

<body>
<!-- 見出し -->
<h1>BMIプログラム (2)</h1>
<!-- フォーム -->
<form name="f" action=""><pre>
    <!-- 入力用テキストフィールド -->
    身長(cm)： <input type="text" name="txtHeight">
    体重(kg)： <input type="text" name="txtWeight">
    <!-- 計算開始ボタン -->
    <!-- "keisan();" (keisan関数の呼び出し) がイベントハンドラ -->
    <input type="button" value="計算" onclick="keisan();">
    <!-- 出力用テキストフィールド -->
    BMI： <input type="text" readonly name="txtBmi">
</pre></form>
</body>

備考

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

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

参考資料

[課題] フォーム入出力

課題番号：	7-1, 7-2
課題名：	フォーム入出力
ファイル名：	task07-1.html, task07-2.html
締切：	次回の演習日の直前の日曜日，18:00まで

内容

下記の各々のプログラムについて，BMIプログラム (2) と同様に，入出力にフォームを用いる形に修正する．

標準体重プログラム (1) (task07-1.html)
最大値プログラム (1) (task07-2.html)

参考：元のプログラム（標準体重プログラム(1) と最大値プログラム(1)）のコードと課題（入出力にフォームを用いる形）の雛形例．

報告について

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