JavaScript講座
(メールマガジン編)

9/27日発行 ヨッシーの”ホームページを作ろう!(JavaScript編)”★Vol.14★

日時関係

今回も前回に引き続き日付に関する命令をやってみよう。
前回、現在の時刻を呼び出すプログラムを作ったんだけど、前回やった時刻というのは、
Feb Sep 22 19:00:00 2000
のような、数字とアルファベットの並びだったね。
今回は現在の日時を、
9月22日金曜日19時00分00秒
のようにわかりやすく表示する方法についてやってみよう。

★ 日付・時刻の表示 PartU ★

前回のような、アルファベットと数字の並びはプログラムから直接表示すればよかったんだけど、
今回のような漢字などといっしょに表示するにはそのままでは無理なんだ。
この表示の大まかな方法は、
年、月、日、曜日、時間、分、秒 を別々に呼び出して、それぞれを”月”などの文字とあわせているんだ。
じゃあ、これからその年、月、日、曜日、時間、分、秒を別々に呼び出すプログラムをやっていこう。
まず、前回の方法で、

変数(オブジェクト) = new Date()

のようにして、現在の日付を変数に代入しておこう。
(このような変数の部分を、本ではオブジェクトと書いてあるけど、ここではわかりやすいように変数としておく。)
今、この変数には”現在の時刻”が入っているね。
そこで、この”現在の時刻”の入った変数から月、日などを別々に呼び出そう。

”時刻”変数から好きな値を取り出す

変数(オブジェクト).getYear :  (変数から)を取り出す
変数(オブジェクト).getMonth :  (変数から)を取り出す
変数(オブジェクト).getDate :  (変数から)を取り出す
変数(オブジェクト).getHours :  (変数から)時間を取り出す
変数(オブジェクト).getMinutes :  (変数から)を取り出す
変数(オブジェクト).getSeconds :  (変数から)を取り出す

変数(オブジェクト).getDay

: (変数から)曜日を取り出す

形は全部いっしょだね。

変数(オブジェクト).命令

という形だね。
getYear等は覚えるしかないけど、すべてget〜という形だから、覚えやすいと思う。
忘れたらすぐに本とか見たらいいんだけどね。

さっきも言ったように、まず変数に現在の日時を入れたよね。
だから、この
変数(オブジェクト).getYear
というのは変数(現在の日時)から年だけを取り出すという命令になるんだよ。

じゃあ、これを使って実際にプログラムを作ってみよう。


--日付・時刻の表示するプログラム--

<HTML>
<HEAD>
<TITLE>日付・時刻表示</TITLE>
<SCRIPT language="JavaScript">
today = new Date();
year =
today.getYear();
month =
today.getMonth();
date =
today.getDate();
hours =
today.getHours();
minutes =
today.getMinutes();
seconds =
today.getSeconds();
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write(year,"年",month,"月",date,"日",hours,"時",minutes,"分",seconds,"秒");
</SCRIPT>
</BODY>
</HTML>


--解説--


<HTML>
<HEAD>
<TITLE>日付・時刻表示</TITLE>
<SCRIPT language="JavaScript">
today = new Date();         ←@現在の日付をtodayに代入
year = today.getYear();       ←Atoday(現在の時刻)から年を取り出す。yearに代入。
month = today.getMonth();
date = today.getDate();
hours = today.getHours();
minutes = today.getMinutes();
seconds = today.getSeconds();
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.write(year,"年",month,"月",date,"日",hours,"時",minutes,"分",seconds,"秒");
↑Bそれぞれを使って時刻を表示する
</SCRIPT>
</BODY>
</HTML>


@:today = new Date();
まず、現在の時刻をtodayという変数に代入している。
(これは前回やったのでわかるよね。忘れた人はもう一度前回のところを見直そう。)
A:year = today.getYear();
ここでは、today(現在の時刻)からyear(年)だけを取り出しているんだ。
そして、取り出した年をyearという変数に代入しておくんだよ。
以下、month,date,hours,minutes,secondsも同じようにして変数に代入しているんだよ。
B:Aで代入した変数を使って、自分の好きなように時間を表示することができるよ。


じゃあ、問題をやってみよう。

<問題>
[命令]のところを埋めて、
時刻によってメッセージが次のように変わるようなプログラムを作れ
朝5:00〜10:00  「おはよう〜!」
朝10:00〜昼5:00 「こんにちは〜!」
夕5:00〜夜10:00 「こんばんは〜!」
夜10:00〜朝5:00 「ZZZZ・・・・・」

〜ここから〜
<HTML>
<HEAD>
<TITLE>時刻メッセージ</TITLE>
<SCRIPT language="JavaScript">
[命令1]
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
[命令2]
</SCRIPT>
</BODY>
</HTML>

 


back.gif (1116 バイト) next.gif (705 バイト) top.gif (583 バイト)