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週目以降も繰り返す事、と書けば簡単。
サビついた頭でどこまでできる事やら。
サビついた頭でなんとか下のフローを考えました。
ピンクの部分が追加したもので、黄色の部分が修正したものです。
これをプログラムにすると、次の様になります。
オマケとして、今日の日付も書かせました。
下のボタンをクリックして、動きを見て下さい。
できたよーっ
次回は、何しようかな~
ぼちぼち画面いじくったりボタンいじくったりしたいけど・・・