Webアプリ開発事始 第21回

XMLとプログラミング(2)
~JavaScriptによる検索処理の実例
長谷川裕行
有限会社 手國堂

items.html~Webページ(リスト2)

ユーザーに提示する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の第1引数はFORMタグで定義しているFORMオブジェクトで、フォーム内に定義された各コントロールオブジェクトの集合への参照を保持しています。第2引数は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


トップページ
部品リスト~mr_parts.xml(リスト1)
items.html~Webページ(リスト2)
画面のデザイン
JavaScriptの呼び出し
FORMタグによるユーザーインターフェイス
コマンドボタンの動作
finditem.js~検索処理のJavaScript(リスト3)
スタイルシートのパターンマッチング
あとがき

Copyright © GrapeCity inc. All rights reserved.