Level1 3. 日付、曜日、時刻を表示しよう

[実行結果]

[プログラム]


<script type="text/javascript" charset="Shift_JIS">

   Hizuke=new Date();           //今現在の日付情報を取得し 変数Hizuke に入れる
   Toshi=Hizuke.getFullYear();  //変数Hizuke から年のデータ－を抜き出す
   Tsuki=Hizuke.getMonth()+1;   //変数Hizuke から月のデータ－を抜き出す
   Hi=Hizuke.getDate();         //変数Hizuke から日のデータ－を抜き出す
   Youbi=Hizuke.getDay();       //変数Hizuke から曜日のデータ－を抜き出す
   Ji=Hizuke.getHours();        //変数Hizuke から時のデータ－を抜き出す
   Fun=Hizuke.getMinutes();     //変数Hizuke から分のデータ－を抜き出す
   Byou=Hizuke.getSeconds();    //変数Hizuke から秒のデータ－を抜き出す

   Week=new Array("日","月","火","水","木","金","土");   //曜日の設定

   document.write(Toshi+"年"+Tsuki+"月"+Hi+"日 "+Week[Youbi]+"曜日 "+Ji+"時"+Fun+"分"+Byou+"秒");

</script>

[解説]

いきなりプログラムが長くなりましたが内容は簡単なので引かないでください^^; ちゃんと最初からゆっくりと説明していきます。

まずはHizuke=new Date();からいってみましょう。
Hizuke=new Date();
では日付情報が入っているnew Date()を変数Hizuke に代入します。なぜ代入するかは次に説明します。

Toshi=Hizuke.getFullYear();
Tsuki=Hizuke.getMonth()+1;
Hi=Hizuke.getDate();
Youbi=Hizuke.getDay();
Ji=Hizuke.getHours();
Fun=Hizuke.getMinutes();
Byou=Hizuke.getSeconds();

では変数Hizuke つまりnew Date()から各必要な情報を引き出しています。
Hizuke.getFullYear();では年の値を抜き出します。
Hizuke.getMonth()+1;では月の値、
Hizuke.getDate();では日付の値、
Hizuke.getDay();では曜日、
Hizuke.getHours();では時間の値、
Hizuke.getMinutes();では分の値、
Hizuke.getSeconds();では秒の値
を情報を引き出しています。

ではわざわざ変数Hizuke になぜ代入するかというとこちらの方が見たときに分かりやすいからです。 別に代入しなくても Toshi=new Date().getFullYear();
Tsuki=new Date().getMonth()+1;
とやってもいいのですが、なんか分かりくいでしょ？一回しか使わないならこれでもいいのですが何回も似たようなことを繰り返しているのでこの方法の方が分かりやすいのです。

あとなぜHizuke.getMonth()+1;だけが + 1になっているかといいますと 0 から始まっているからです。つまりこのままだと0月～11月になってしまうので 1 を足してあげないといけないのです。

[日付情報一覧]

.getFullYear()		年
.getMonth()		月
.getDate()		日
.getDay()			曜日
.getHours()		時間
.getMinutes()		分
.getSeconds()		秒
.getMilliseconds()		ミリ秒

で各日付に関する情報を引き出せます。

ここで一度整理するために各値を参照してみましょう。
となっています。

ここでみてもらいたいのは Youbi の値です。 曜日の情報もJavaScriptでは数値で入っています。 これも月と同じように 0 から始まっています。 0なら日曜日 1ならば月曜日 … 6ならば土曜日というようになっています。これを踏まえてから次の説明を読んでください。

Week=new Array("日","月","火","水","木","金","土");
ではWeekという変数に曜日の日～土の情報を書き込んでいるのです。 new Array() は配列を宣言するものです。

配列

配列というのはタンスと考えてもらうと分かりやすいかと思います。

Week=new Array();
で Week というタンスの名前を決めます。

Week=new Array("日","月","火","水","木","金","土");
で、タンスの引き出しの上から順に日から土までのデータを入れていきます。データーを区切るのには ,(コンマ) で区切っていきます。ここで注意するのは引き出しの番号は0から始まっているということです。

ここで上から３番目のデータ("火")を引き出したいときは
Week[2]
と書きます。タンスの引出しは0から始まっているので３番目はWeek[2]となります、ここは間違えやすいので注意してください。

あと配列にはもうひとつのやり方があります。同じようにタンスを使って説明していきます。

まず Week=new Array(7); とやり配列の数を宣言します。つまりタンスの棚の数を始めに決めておきます。

次にタンスの棚の中にデータを入れていきます。

Week[0]="日";
Week[1]="月";
Week[2]="火";
Week[3]="水";
Week[4]="木";
Week[5]="金";
Week[6]="土";

とやると Week[?] のなかにデーターが入っていきます。このやり方だと普通に変数の中にデーターを入れる感じでできるのでこちらのほうが理解しやすいと思います。ただしちょっとめんどくさいですが(^_^;)

さてちょっと説明が飛んでしまいましたが続いて
document.write(Toshi+"年"+Tsuki+"月"+Hi+"日 "+Week[Youbi]+"曜日 "+Ji+"時"+Fun+"分"+Byou+"秒");
の説明をします。文字の表示については１．文字の表示でやったので説明は割合します。ここで説明するのは曜日のところです。

Week[Youbi]
となっていますがなにをやっているのかというと Week の中からデーターを取り出しています。

くどいようですがもう一回確認のために書きます。
配列の説明でやったとおり Week[0] ～ Week[6] にそれぞれ日から土までのデータが入っています。例えば Week[3] ならば水というデーターが入っています。

変数Youbi には曜日の数値が入っています。月曜日なら 1 、土曜日なら 6 が Youbi に入っています。

つまり水曜日ならば Youbi は 3 となり
Week[Youbi]はWeek[3]と同じことになり水が参照されます
金曜日なら Youbi は 5 となり
Week[Youbi]にはWeek[5]と同じ金が表示されるわけです。

くどいぐらい細かく書きましたが理解できましたか？これが理解できればあとはポンポンと理解できていくと思います。

３．日付、曜日、時刻を表示しよう

[実行結果]

[プログラム]

[解説]

[日付情報一覧]

配列