ユーザーに提示するWebページは“items.html”という名前のHTML文書で、画面1のようなデザインとします。HTMLの内容はリスト2のようになります。
- 画面のデザイン -
「部品ID：」と書かれたテキストボックスに部品IDを入力して[検索]ボタンをクリックすると、リスト1のXML文書“mr_parts.xml”から該当する部品の情報を検索し、下部のテキストボックスに部品名と単価が、以下のような形式で表示されるようにします。
| 部品ID |
：100001 |
| 部品名 |
：キーボード(106) |
| 単価 |
：7800円 |
ここでは、他のXML文書でも動作を試せるよう、「ファイル：」と書かれたテキストボックスに検索対象のXML文書名を入力できるようにしておきます。
 画面1：部品データ検索用のWebページ
- JavaScriptの呼び出し -
実際の検索処理は、fineditem.js内にJavaScriptで記述しています。
短いソースなら、HTML文書内に直接記述しても構いませんが、ここではソースが長いので別ファイルとし、以下のようにしてHTML内に挿入しています。
<SCRIPT LANGUAGE="JavaScript" SRC="finditem.js"></SCRIPT>
- FORMタグによるユーザーインターフェイス -
テキストボックスとコマンドボタンは、FORMタグで生成します。
<FORM ...>以下の定義箇所を見れば、各テキストボックスの名前(id属性)が以下のようになっていることが分かります。
部品IDを入力するテキストボックス：itemId
ファイル名を入力するテキストボックス：fname
それぞれ規定値として、HTMLファイルを開いたときに以下の値を表示します。
itemId：100001
fname：mr_parts.xml
- コマンドボタンの動作 -
コマンドボタンはINPUTタグで以下のように定義しています。
<INPUT type="button" value="検索" OnClick="finditem(controls,xml)">
<INPUT type="button" value="クリア" OnClick="output.value=''">
[検索]ボタンには、OnClickイベントでJavaScriptの“finditem”を呼び出すよう設定しています。finditemの第１引数はFORMタグで定義しているFORMオブジェクトで、フォーム内に定義された各コントロールオブジェクトの集合への参照を保持しています。第２引数はXML文書を示すXML IDです。
XML IDは、以下のように<xml>タグによって識別子“id”に値を代入することで定義されます。
<xml id="xml"></xml>
これによってXMLデータアイランドが定義され、HTML文書内でXML文書を扱えるようになります。後述するJavaScript(finditem.js)でここにXML文書を読み込ませ、DOMを介してアクセスします。
検索結果を表示するテキストボックスは“output”という名前でreadonly属性を付け、ユーザーが入力できないようにしておきます。
<TEXTAREA name="output" rows="3" cols="30" readonly> </TEXTAREA>
リスト2：部品検索用のHTMLファイル～items.html
 |
|
|
