クライアントスクリプトを使用する（前回からの続き）さて、クライアントスクリプトを使用して各ページのヘッダ部分やメニュー部分を表示する方法ですが、以下のHTMLを考えてみましょう。
View Sample
<html>
<head>
〜〜 略 〜〜
<title>My Page Title</title>
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%" bgcolor="#CCFFCC">
<tr>
<td><strong>My Page Title</strong></td>
<td align="right">Last update : 2000/06/05</td>
</tr>
</table>
</body>
</html>
これは、ページのタイトルを table を使用して作成しています。
これをスクリプトで出力するよう為にdrawTitle()という関数を作ります。ページに HTML のコードを出力するには、document オブジェクトの write() メソッドを使用します。
View Sample
<html>
<head>
〜〜 略 〜〜
<title>My Page Title</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
function drawTitle() {
document.write(
"<table cellpadding='4' cellspacing='0' border='0' width='100%' bgcolor='#CCFFCC'>"
+ "<tr><td><strong>My Page Title</strong></td>"
+ "<td align='right'>Last update: 2000/06/05</td></tr></table>");
}
drawTitle();
</script>
</body>
</html>
次に上記のスクリプトを別ファイル（スクリプトファイル）にします。"MyPageTitle.js"という名前のファイルを作成しその中に以下のコードを記述します。
複数のページで共有するコードのため、ページのタイトルと最終更新日をスクリプトを使用して取得するように変更します。
// MyPageTitle.js
function drawTitle() {
document.write(
"<table cellpadding='4' cellspacing='0' border='0' width='100%' bgcolor='#CCFFCC'>"
+ "<tr><td><strong>" + document.title + "</strong></td>"
+ "<td align='right'>Last update: " + document.lastModified + "</td></tr></table>");
}
drawTitle();
スクリプトファイルをインクルードするには、SCRIPT タグの SRC アトリビュートを使用してスクリプトファイルのパスを指定します。
View Sample
<html>
<head>
〜〜 略 〜〜
<title>My Page Title</title>
</head>
<body>
<script type="text/javascript" language="JavaScript" src="./MyPageTitle.js"></script>
</body>
</html>
こうすることによってページの共通要素をクライアント側にキャッシュすることが出来ます。
ただし1つだけ注意点があります。スクリプトを使用できない古いバージョンのブラウザーではこの方法を使用できないということです。スクリプトに対応していないブラウザ用に別のページを用意するか、NOSCRIPT タグを使用するか、もしくは古いブラウザーは見捨てるか、どれかを選択する必要があります。
ちなみに Mic's Studioの場合、スクリプトに対応していないブラウザー用に別のページを用意しています。「そんな！2つのバージョンのページを用意するなんて面倒くさいよ」と思う人もいるかもしれませんが、実は簡単に複数バージョンのページを管理する方法があります。それについては、今後、別のコーナーで取り扱う予定ですのでそちらをご覧ください。