JavaScriptでも、Javaと同じようにあらゆるアイテムをオブジェクトとして扱い、そのプロパティとメソッドを操作して処理を進めます。HTMLファイルの更新日付を表示する処理を例に、ソースの特徴を見ていきましょう。
- オブジェクトを操作する -
スクリプトの記述されたHTML文書は“document”オブジェクトで、その更新日付は“lastModified”プロパティで参照できます。
文字列を表示するには、documentオブジェクトの“write”メソッドを実行します。従って、Webページの最終更新日は以下のようなソースで表示できます。
<SCRIPT language="JavaScript">
document.write("最終更新日：", document.lastModified);
</SCRIPT>
この場合、Internet Explorerなら
最終更新日：06/01/2002 16:33:02
Netscape Navigatorなら
Sat 01 Jun 2002 04:33:02 PM JST
のように表示されます。
- 最終更新日の表示 -
日本向けに自然な形で表示するには、substrメソッドを使ってdocument.lastModifiedの返す日時の文字列から必要な部分を切り出し、それを並べてやる必要があります。
リスト1のソースは、Internet Explorerで表示すると以下のようになります。
最終更新日は 2002年07月01日 です。
リスト1：ファイルの最終更新日付を表示するJavaスクリプト
- ブラウザによる仕様の相違 -
“lastModified”プロパティの形式はブラウザの持つ仮想マシンの仕様によって異なるため、Internet Explorerでは上記のように表示されますが、Netscape Navigatorでは以下のようになってしまいます。
最終更新日は Jun 年 Sa 月 0 日 です。
Internet ExplorerとNetscape Navigatorとの“lastModified”プロパティの形式は、図1のように異なっています。MozillaはNetscape Navigatorと同じ形式です。
要素番号：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
IE ：0 6 / 0 1 / 2 0 0 2 _ 1 6 : 3 3 : 0 2
Netscape：S a t _ 0 1 J u n _ 2 0 0 2 _ 0 4 : 3 3 : 0 2
Opera ：S a t , _ 0 1 _ J u n _ 2 0 0 2 _ 0 7 : 3 3 : 0 2 ※
^ ^ ^ ^ ^ ^ ^ ^
日 月 年 ←上記ソースで取り出した年月日の要素
※ Opera 6.0では日付と時刻がグリニッジ標準時(GMT)で表示された
- ブラウザの種類を調べる -
ブラウザによる形式の違いという問題を解決するには、ブラウザの種類を調べてブラウザごとに異なる処理を実行させる必要があります。
ブラウザの種類は、navigator.appNameで文字列として取得できるので、これをif文で判別します。Internet Explorerの場合は“Microsoft Internet Explorer”、Netscape Navigatorの場合は“Netscape”という文字列となります。
従って、リスト2のようなソースが考えられます。
ここで問題となるのはOperaです。Internet Explorer互換を謳うOperaはnavigator.appNameに“Microsoft Internet Explorer”という文字列を返すのですが、日付文字列の形式はInternet ExplorerともNetscape Navigatorとも異なっています。
しかし、更新日を表示するだけのために長いソースを書くというのは無駄が多く、あまり合理的ではありません。丁寧な表示を心がけることも大切ですが、更新日付はあくまで目安でしかないので、先に示した
document.write("最終更新日：", document.lastModified);
という形でも充分でしょう。
リスト2：HTMLファイルの最終更新日付を表示するJavaScript
＜補足＞
日付を保持するDateオブジェクトと、そこから年・月・日を読み取るgetYear、getMonth、getDateの各メソッドを呼び出せば、最終更新日の表示処理はリスト3のように書けます。
これならどのブラウザでも正しく表示できそうですが、実際にはDateオブジェクトや各メソッドの仕様が異なるため、Netscape NavigatorやOperaでは正しく表示されません。結局、ブラウザの種類を調べて処理を分岐させることになります。
リスト3：Dateオブジェクトを利用すれば表示を適正化できそうだが…
 |
|
|
