ミニレポート第 5 回課題を出題します. 課題を良く読んで指示に従ってください.
サーバ側が動的なコンテンツを作成する CGI と異なり, クライアントサイド・スクリプトでは 動的コンテンツをクライアントが作成します.
クライアントサイドスクリプトには以下の特徴がある.
スクリプトは実行タイミングで大きく 2 つに分けられる.
wtest.html のヘッダに meta 要素として以下の行を挿入せよ.
スクリプト言語が指定されなかった場合のデフォルトとして ECMAScript を指定している.
HTML 文書の読み込み時にダイナミックな文書を作成する例について説明する.
教科書 p.147 の例 9.21 を wtest.html 上に作成せよ. この例はスクリプト言語として javascript を使用する. document.lastModified でファイル更新日時をとりだし, document.write でその文字列を出力する.
文書読み込み時にすべての script が出現順に評価され, 出力文字列に HTML ソースが置き換えられる.
イベントに応じて繰り返しダイナミックな文書を作成する例について説明する.
教科書 p.147 例 9.22 を wtest.html 上に作成し,動作を確認せよ.
このスクリプトは言語を指定していないので,デフォルトの ECMAScript として実行される.
HTML 文書内の要素をオブジェクトとしてプログラムから呼び出して使うときの 手順を定めたのが DOM.
例えば,文書に最初に登場するフォーム中の,2 番めの要素の内容 をプログラムで取り出したいとき, などに利用できる.この手順はこれまでブラウザが独自に実装して きており,そのオブジェクトモデルを DOM Level0 と呼ぶ. 教科書図 9.8 は JavaScript で使われるオブジェクトの階層構造である.
上記の例を取り出す方法が教科書例 9.25 である.
DOM Level 0 まではブラウザの独自仕様であったが, 標準化をめざして W3C から DOM Level 1 が勧告された. 文書の構成要素をツリー構造で表す.それぞれのノードに共通の属性 (表 9.2), 固有の属性(表 9.3 は Element ノードに適用できるメソッド)がある. 文字列データの文字列を取り出すこともできる.
wtest.html に以下のコードを挿入せよ.
<script type="text/javascript"> var h2List=document.getElementsByTagName("h2"); document.write("この文書の 2 番めの h2 :", h2List.item(1).firstChild.data); </script>
上記のコードは
というステップで,文書の 2 番めの h2 要素を表示するスクリプトである. item(1) の引数を書き換え,表示が変わることを確認せよ.
サーバ側でスクリプトを動作させる方法に関して説明します.
クライアントからのリクエストに応じ,HTML 文書を送信する前に 文書中に埋め込まれたスクリプトをサーバが処理する. サーバ側でプログラムが動作すると言う点で CGI に似ており, 同じ目的に使われる.CGI とサーバサイドスクリプトの違いとして 以下の点があげられる.
Apache などのサーバがサポートしているサーバサイド・インクルード(SSI) は,リクエストされた HTML にコメントの形で埋め込まれている SSI 命令(例 9.32参照) をサーバが処理し, 処理結果でその場所を書き換えた HTML 文書をユーザに送信する.(図 9.10 参照) ファイル更新日の取得や他のファイルの取り込みなど単純な処理ができる.
SSI では単純なデータの取り出し,書き換えなどしか処理できない. さらに高度で柔軟な処理をサーバ側で行う方式を サーバサイド・スクリプトと呼ぶ.
Microsoft IIS などがサポートしている ASP のほか,Server-Side Java Script, PHP, XSSI, JSP などがある.