01.日付を表示してみる

ページを開くと日付が表示されている、なんていうサイトを時々見かけることがあります。それをJavaScriptで記載してみましょう。

HTML内の、日付を表示したいところにSCRIPTタグを挿入しましょう。

という具合です。の間にスクリプトを書いていきます。

まず、スクリプト流れから考えてみましょう。
1.日付を取得。
2.日付を特定の書式に表示。

手順1についてですが、日付はクライアントパソコンのシステム時計から取得します。ですから、システム時計が間違った日付で設定されていれば、その通りに表示されてしまいます。(この場合、スクリプト作成者側ではどうすることもできないです。)
手順2に関して今回は「今日はYYYY年MM月DD日(d)」という形式にします。ちなみにYYYY=西暦の年、MM=月、DD=日、d=曜日をここでは指します。

では早速スクリプト作成です。
日付を取得する命令を使うためには日付オブジェクトというものを生成する必要があります。

hiduke = new Date();

という具合に記述します。Dateというのが日付オブジェクトです。オブジェクトのいくつかはそのままオブジェクトを使って、それに備わった命令を使用するのですが、Dateの場合、新しく日付オブジェクトを生成する必要があります。あとの()は命令の際つくものだと覚えて下さい。
newが自分の後に記述したオブジェクトに合った新しいオブジェクトを作りなさいよ、と言っており、それに基づいて日付オブジェクトhidukeが生成されたというわけです。ちなみにhidukeという名前は任意です。JavaScriptで使用する命令や型にあてはまらないような名前にして下さい。
1文の終わりには;(セミコロン)が必要になります。お忘れなく。

Dateには日付を扱う様々な命令が備わっていて、生成されたhidukeにそれが引き継がれています。
その命令の中で今回は以下のものを使用します。

getYear	年を取得。
getMonth	月を取得。
getDate	日を取得。
getDay	曜日を取得。

例えば、年の場合は次のように記述します。

yyyy = hiduke.getYear();

オブジェクトと命令は.(ピリオド)で結びつけます。日付オブジェクトhidukeのgetYear命令を使用するといったところでしょうか。あと命令には()を記述します。それでyyyyが変数になり、ここに年が西暦で格納されます。ちなみにこのyyyyのような変数名も任意です。

年と同様に月と日を求めます。

mm = hiduke.getMonth() + 1;
dd = hiduke.getDate();

ここで1つ注意事項です。getMonthは実際の月より-1少ない値が取得されるため、上記のように+1する必要があります。

続いて曜日を求めてみます。

youbi = hiduke.getDay();

こちらは以下のように数字で返ってきます。

曜日	日	月	火	水	木	金	土
値	0	1	2	3	4	5	6

数字を曜日に置き換える必要があります。配列を使ったやり方が書き方としては一番きれいかと思いますが、今回は単純に条件文で書いてみたいと思います。
条件文はifを使って以下のように記述します。
if (条件式) {
条件式があてはまった際の処理
}
C言語やJavaを経験されている方なら、おなじみの記述ですよね。
実際に記載するとこんな感じです。

if (youbi == 0) {
　　youbi_jp = "日";
}
if (youbi == 1) {
　　youbi_jp = "月";
}
if (youbi == 2) {
　　youbi_jp = "火";
}
if (youbi == 3) {
　　youbi_jp = "水";
}
if (youbi == 4) {
　　youbi_jp = "木";
}
if (youbi == 5) {
　　youbi_jp = "金";
}
if (youbi == 6) {
　　youbi_jp = "土";
}

youbiに格納されている値によってyoubi_jpに日～土を代入しています。
話が少し脱線しますが、条件が等しいか否かは==を使います。=だけだと右辺の値を左辺に代入することになるのでご注意を。

上記のように複数の値で条件分岐する場合、switchを使用して記述もできます。

switch (youbi) {
　　case 0:
　　　　youbi_jp = "日";
　　　　break;
　　case 1:
　　　　youbi_jp = "月";
　　　　break;
　　case 2:
　　　　youbi_jp = "火";
　　　　break;
　　case 3:
　　　　youbi_jp = "水";
　　　　break;
　　case 4:
　　　　youbi_jp = "木";
　　　　break;
　　case 5:
　　　　youbi_jp = "金";
　　　　break;
　　case 6:
　　　　youbi_jp = "土";
}

youbiがcaseに記載した値である時に次のcaseまでの命令を実行するというものです。上記中のbreakはそれより下の命令は実行しないようにというもので、例えばcase 0の命令からcase 1の命令まで処理してしまわないようにしています。

最後は実際に画面に表示する処理です。

document.write("今日は" + yyyy + "年" + mm + "月" + dd + "日" + "(" + youbi_jp + ")です");

ドキュメントオブジェクトdocumentのwrite命令を使っています。
今回のオブジェクトは日付オブジェクト違い、新しくオブジェクトを生成せずに使用できます。
あとwriteの後の()に今日は～の文を入れています。このように命令によっては()内に何かの値を入れる必要がある場合があります。ちなみにこの値のことを引数(ひきすう)と呼びます。
さあ、これで処理は終了です。
まとめて記述してみます。

//はコメントで実際のスクリプト処理の際には//以降の文はその行の改行位置まで無視されます。

上記スクリプトをHTMLの中に組み込んで、以下のように表示されれば成功です。

ということで、今回は日付の表示をご紹介しました。

Webメニューへ