JavaScriptのabc
4.Dateオブジェクト


● Dateオブジェクトでカレンダー作り(その1)


目新しい言葉が並ぶと難しく感じるなー。

「オブジェクト」?

そこで、本題に入る前に、「Script要素」、「オブジェクト」、「メソッド」と言った難しそうな言葉を判り易く整理しておきます。

例えば、「こんにちは」と書くScript要素に注目すると・・・

イラスト

 

今回はオブジェクトの1種類である「Dateオブジェクト」を使いながら、慣れて行きます。

日付や時刻を処理する「Dateオブジェクト」の使い方は、「Document」オブジェクトとは少々違います。

ポイントは、オブジェクトから「インスタンス」を作り、これを利用する点です。「インスタンス」を作った後に、これをオブジェクトとして、さまざまなメソッドを組み合わせます。

例えば、下に2行のScript要素を書きましたが、1行目では現在の日時情報を抽出するオブジェクトDate()から変数「d」と言うインスタンス(新しいオブジェクト)を作り、2行目でメソッド「getFullYear()」を使ってこのdの年情報を取り出しダイアログに書かせています。

var d = new Date();
alert(d.getFullYear() + "年");

1行目のおさらいをすると、インスタンスの作り方は「新しいオブジェクトを作りますよ」と言う意味で「new」を使い、下の様に書いています。

var 新変数 = new Date();

「Dateオブジェクト」の()内の引数に年、月、日、時刻の情報を入れると、それで設定した情報を取り出せます。カレンダー作りで使います。

2行目では年情報を取り出すメソッドを使いましたが、「Dateオブジェクト」メソッドとして他にもたくさん有ります。代表的なものを下に書きます。

・getMonth・・・「月」を取り出す(0~11)

・getDate・・・「日」を取り出す(1~31)

・getDay・・・「曜日」を取り出す(0~6)

・getHours・・・「時間」を取り出す(0~24)

・getMinutes・・・「分」を取り出す(0~59)

・getSeconds・・・「秒」を取り出す(0~59)

・setFullYear・・・「年」を設定する(4ケタの数字)

・setMonth・・・「月」を設定する(0~11)

・setDate・・・「日」を設定する(1~31)

・setDay・・・「曜日」を設定する(0~6)

・setHours・・・「時間」を設定する(0~24)

・setMinutes・・・「分」を設定する(0~59)

・setSeconds・・・「秒」を設定する(0~59)

では、ここで現在の年、月、日、曜日、時、分、秒を画面に書かせてみます。プログラムは下の様に、「head」部でDate()のインスタンスnowを定義し、body部でnowのメソッドgetFullYear()、getMonth() 、getDate()、now.getDay()、getHours()、getMinutes()、getSeconds()を使います。

プログラム

下のボタンをクリックして、動きを見て下さい。

ボタン

どうでしょう?

よくよく見ると、曜日が日月火水木金土の表示ではなく数字表示になっています。

これは、「getDay」で取り出す曜日情報が数字だからです。この数字情報を「日月火水木金土」に変換する方法は・・・

まず、下の様に、head部に新たな配列変数weekdayを定義します。

var weekday = [”日”,”月”,”火”,”水”,”木”,”金”,”土” ];

次に、body部の中の1行(曜日記入の行)を、次の様に修正します。

document.write(‘<p>‘ + now.getDay() + ”曜日” + ‘</p>‘);
          
document.write(‘<p>‘ + weekday[now.getDay()] + ”曜日” + ‘</p>‘);

下のボタンをクリックして見て下さい。

ボタン

 

今回はここまでにします。 今回は、次の事を学びました。

1.Dateオブジェクトやそのメソッドの理解

次回は、このオブジェクトを使って、カレダー作りしてみます。


● Dateオブジェクトでカレンダー作り(その2)


イラスト

今回は新しいネタは、一切無し!!

Dateオブジェクトを組み合わせたロジックをひたすら考えるのみ。

しかーしッ、「ロジックなんてものは年寄りの考えるものではない」と悟った時にはすでに遅し

 

頭がサビついて、まわらん。

 

「まわらなければ、まわる範囲でやっちゃおう」と言う訳で、とりあえず希望の年月の1カ月分の日にちと曜日を縦に並べる事にしました。

 

まわらない頭で考えたロジックが下のフローでありんす。不細工だけど「date<date2」の条件分岐を2か所入れたところがミソ。

本当に不細工だこと。

フロー

 

これをプログラムにすると、次の様になります。

プログラム

 

どうやらこうやら出来ました。

下のボタンをクリックして、動きを見て下さい。

ボタン

 

やれやれ、ようやくここまで来ました。

次回は、カレダーの形にしてみせましょう。


● Dateオブジェクトでカレンダー作り(その3)


今回も新しいネタは、無し。

先回Dateオブジェクトを組み合わせて1カ月の日にちと曜日を順番に並べる事ができたので、今回は、これを横に1週間分のマスを作って順番に入れて行けば良いのだが・・・

ミソになるのは、「ついたち」を正しく1週目の該当の曜日のマスに入れる事、その前に位置するマスには空白を入れる事、それ以降のマスに順番に次の日を入れて行く事、これを2週目以降も繰り返す事、と書けば簡単

 

サビついた頭でどこまでできる事やら。

 

サビついた頭でなんとか下のフローを考えました。

ピンクの部分が追加したもので、黄色の部分が修正したものです。

フロー

 

これをプログラムにすると、次の様になります。

オマケとして、今日の日付も書かせました。

プログラム

 

下のボタンをクリックして、動きを見て下さい。

ボタン

 

イラスト

できたよーっ

次回は、何しようかな~

ぼちぼち画面いじくったりボタンいじくったりしたいけど・・・

ページトップ

前ページ←

→次ページ

コーナー