日付を挿入する
では、実際にページ内に日付をつけるスクリプトを作っていきましょう。 前ページで解説したように、まずDateオブジェクトを定義します。 このとき、そのオブジェクトの中には時刻に関するデータが搭載されます。 このデータの中から、ここでは日付の表示を行うので、年月日と、おまけ的に曜日を取得します。 あとは、その取得したものを出力すれば完了です。
スクリプト作成
では、早速取り掛かりましょう。 スクリプトの流れとしては、まずDateオブジェクトを定義し、次にそこから必要なデータを取り出してそれぞれ変数の中に格納しておきます。 その次に、曜日に関してはそのままでは意味不明の数値になるので、これを曜日の表示に変えるように記述します。 実例を見ましょう。
例：
<script type="text/javascript">
<!--
var weekd= new Array("日","月","火","水","木","金","土");
var today= new Date();
yy=today.getYear(); // 年を取得…変数yyに格納
mm=today.getMonth()+1; // 月を取得…1を加えて変数mmに格納
dd=today.getDate(); // 日付を取得…変数ddに格納
wd=weekd[today.getDay()]; // 曜日を取得・変換…変数wdに格納
//-->
</script>
かなり簡潔にまとめましたが、これで日付を表示する準備が整います。 順次解説していきます。
スクリプトの1行目では、「weekd」という名前の配列を作成しています。 これは推測が付くと思いますが、曜日の表示を言葉で行うための準備です。 英語が好きな方は、英語で書いてもいいでしょう。 ここでweekdという名前の配列を作り、配列内の0番目の要素から順に「new Array()」の括弧内で定義した値を格納させています。
次の行では、Dateオブジェクトとしてtodayという名前のオブジェクトを作成しています。 todayの中には取得した時刻に関するデータが入っています。 それ以後の各変数の定義は、例中に説明が入っているとおりです。
なお、変数を定義しているところの、曜日の部分に関しては少々勝手が違う記述がされていますね。 この部分は、始めに定義した配列の中から、本日の曜日に表示するべき文字を取得しています。 前ページで「.getDay()」では曜日を、日曜日を開始値として、開始値0からの番号で取得すると説明した通りで、そのままでは0から6の数値が返ってきます。 つまり、もし本日が水曜日だった場合は、「today.getDay()」の値は3になります。 これをそのまま配列の番号に入れ、そこで得られた文字を変数wdの中に格納させるようになっています。 仮に「today.getDay()」で得られた数値が3であれば、配列番号3に収納されている「水」が得られます。
さて、日付に関するデータの取得はこれで終了しています。 後は、これを出力させれば完成です。
データの出力
前項でまとめたデータを表示させるわけですが、この方法としてはいくつかのやり方が考えられます。 ただ、今回は日付という、24時間に1回しか変わらないものを扱っているので、この表示が動的に変化する必要はまったくありません。 ですので、今回は静的に表示内容を書き出す「document.write()」メソッドを利用します。
document.write()メソッドは、それが処理される時点でその位置に括弧内の内容をドキュメントとして表示させます。 括弧内にはHTMLのタグも記述できますが、今回は不要ですね。 これで日付データを書き出すように仕掛けます。 このスクリプトを記述する位置は、書き出す内容を表示したい位置です。 なお、<script>タグはインライン要素として使えますので、<p>タグの中にこれを記述しても文法的な誤りにはなりませんし、正常に処理させることも可能です。 ソース例と、実装例を以下に表示しますね。
ソースコード例
<p>
<script type="text/javascript">
<!--
document.write(yy+"年"+mm+"月"+dd+"日"+wd+"曜日");
//-->
</script>
</p>
実装例：
はい、JavaScriptが有効であれば、上に実装例が表示されていると思います。 なお、ソースコード例の<p>タグにスタイル指定が追加されているのは、単なるおまけです。 本来は不必要ですので、このあたりは適宜調整してください。
なお、ブラウザによっては、2000年問題をクリアしていないJavaScriptを実装しているケースもあり、そういったブラウザでは年の表示がおかしくなる可能性もあります。 これは仕様ですので、そういうブラウザの場合は、ブラウザが古かったと諦めて下さい(核爆)。 冗談はさておき、その点も含めて対処したい場合は、もっと複雑な処理か、年の表示を入れないかのどちらかの対策を講じる必要があるかもしれません。 こちらでは、その対策については説明を割愛します。