migaro_tech2012 90 / 100
10秒後にBOOKのページに移動します
88 送り、そこでHTML を再作成すること により、ポップアップを実現している。 そのため、ポップアップを表示する際に は、画面の再読み込みが必要である。 IBM i でHTML を再作成する理由 は、ポップアップにIBM i のDB 情報 を反映するからである。したがって、 DB 情報を取得しなくてもよい簡易な画 面をポップアップさせたい場合は、再読 み込みの必要がなくなる。 例えば、図3 のような物件情報を照会 する画面で、各物件の間取り画像を表示 するようなポップアップのケースでは、 必要な情報は画像ファイルの保管パスだ けである。それだけの情報ならば、呼出 元画面の読み込み時に取得しておけば、 再度DB 情報を取得する必要がない。そ して再読み込みがなくなれば、ポップ アップの表示速度が上がり、明細ごとの 画像の確認がスムーズになる効果も期待 できる。【図3】 このような、簡易なポップアップの表 示は、JavaScript を利用することで実 現可能である。【図4】 次項から、JavaScript を用いて、再 読み込みの発生しないポップアップの表 示に必要なコーディングを解説する。 【ソース1】 3-1. タグ要素の作成 ポップアップのもととなるタグ要素を 作成する。このタグ要素をHTML 上に 追加することで、ポップアップが表示で きる。 HTML の記述は、ソース2 のように、
タグの中にブロック要素の やインライン要素の タグを記述し、さらにその中に や タグを記述す るといった階層構造になっている。【ソー ス2】 その階層構造における上下の階層の関 係のことを「親子関係」と呼んでいる。 例えば、③と④の関係は タグ が親となり、 タグが子となっ ている。④ と⑤ で見た場合は タグが親となり、 タグが子という関係となる。 また、親要素への処理は、そのまま子 要素にも適用されるという特性を持って いる。親であるタグ要素をHTML に追 加すると、その子であるタグ要素も追加 される。 この親要素は、ソース1 の①にある document.createElement（タグ要素名） メソッドによって、「ParentTag」とい う変数名で作成している。 3-2. タグ要素へ子要素を追加 作成したParentTag の子要素となる タグを追加する。追加する子要素をソー ス1 の②で「ChildTag」という変数名 で作成している。 ParentTag とChildTag は、どちら もタグ要素だが、ソース1 の①と②では、 作成方法が異なる。それは、①がオブジェ クト型として定義されており、②が文字 型として定義されている点である。 理由は、ParentTag がHTML に記述 された状態で考えると分かりやすい。 HTML 上にParentTag を追加する と、HTML は と記述 される。この状態では、タグの中の記述 がないので、画面上には何も表示されな い。HTML を記述する際は、その の中に、子となるタグ 要素を記述して画面を作成していく。 これは、JavaScript でinnerHTML というプロパティを用いることでも可能 である。innerHTML は、タグ要素の中 のHTML 記述という意味のため、文字 型を対象としている。つまり、 の意味を持つ ParentTag の中のHTML 記述として、 ChildTag をinnerHTML で追加するた め、ChildTag は文字型である必要があ るというわけである。この処理は、ソー ス1 の③で行っている。 また、innerHTML は文字型として親 要素の中に記述するため、追加されるタ グ要素の数に制限はなく、タグ要素のス タイルシートなども反映できるという特 徴も持っている。 3-3. HTMLへタグ要素を追加 続いて、親要素として定義されたタグ 要素を、HTML に追加する。 タグ要素をHTML へ追加するには、 ソース1 の④ にあるdocument.body. appendChild（オブジェクト型）という メソッドを用いる。これは、タグ要素を、 HTML 記述内で最上位の階層にあたる タグの子として追加するとい う意味である。引数がオブジェクト型と なっているのは、JavaScript 上でタグ 要素を作成すると、オブジェクト型とし て定義されるからである。 つまり、ChildTag のような文字型変 数として作成した変数は、引数として渡 すことができない。この引数に、オブジェ クト型として作成されたタグ要素の ParentTag を指定することで、HTML にタグ要素を追加できるようにしている のである。 以上の手順で、HTML 上へのタグ要 素の追加が完了し、画面上にポップアッ プを表示可能になった。 なお、ソース1 では、HTML にタグ を追加する処理の他に、ParentTag. style.position などの記述がある。これ は、HTML に追加するタグ要素のスタ イルシートの設定をするための処理であ る。 3-4. HTMLからJavaScriptを呼び出す ここから、ソース1 の関数をHTML 上で呼び出す方法を解説する。 ●イベントハンドラ HTML 上でJavaScript を使用するに は、「イベントハンドラ」を使用する。 イベントハンドラは、画面上で発生す るさまざまなアクションに対して、 JavaScript の処理を行うためのトリ ガーとなる命令である。これには、マウ スをクリックした時に発生するonClick や、マウスカーソルが上に載った時に発 生するonMouseOver など、さまざま な種類が用意されている。 イベントハンドラは、ソース3 のよう にHTML のタグ内に記述する。ソース 3 では、ボタンをクリックすると、「ボ タンがクリックされました。」というメッ セージダイアログが表示される。【ソー ス3】 また、ソース3 のonClick の” ”で囲 まれた中に、JavaScript の処理を記述 する。ここの処理には、簡単な処理以外 は、関数を作成して呼び出すことが多い。 理由は、イベントハンドラ内の処理はそ こでしか使用できないため、別の場所で 同じ処理をしたい場合に再び記述する必