カレンダー生成
404 Blog Not Found:javascript - カレンダーを作るのソースを
JavaScriptの勉強がてら読んでみることにしました。
ネタ元のネタ元*1はエロと風俗情報満載 どう抜く?だったので、
danさんのソースを読む前にまず自分もRubyで書いてみることにしました。
で、以下がRubyで書いたみたものです。
require "date" class Calendar def initialize end def disp_month(month = Date.today.month) year = Date.today.year disp(year, month) end def disp_year(year = Date.today.year) 1.upto(12) do |month| disp(year, month) end end def disp(year, month) first_day = Date.new(year, month, 1) last_day = Date.new(year, month, -1) # Date#wday は週の何日目かを表す。日曜が0。月曜を0にしたいので-1する。 wday = first_day.wday - 1 # 日曜日の場合は-1なので6にする。 wday = 6 if wday == -1 puts first_day.strftime("%Y %B").center(20) puts "--------------------" puts "Mo Tu We Th Fr Sa Su" print " " * (wday) 1.upto(last_day.day) do |day| print "%2d " % day wday += 1 if wday == 7 puts wday = 0 end end print "\n\n" end end c = Calendar.new #c.disp_month c.disp_year
そして実行結果。
長いので途中ではしょります。
2008 January -------------------- Mo Tu We Th Fr Sa Su 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 2008 February -------------------- Mo Tu We Th Fr Sa Su 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 2008 March -------------------- Mo Tu We Th Fr Sa Su 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ・ ・
けっこう前に書いたやつが残っていたので、
それを元に少し書き直しました。
関数しかなかったのをクラスに包んでみたりとか。
JavaScriptの方は、読んでみて気になったところを少し。
- 月ごとの日数を持つ配列の宣言がキレイ。leap(year) は year がうるう年なら 1 を返し、そうれでなければ 0 を返す関数。
var months = [31, 28 + leap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- dofw1 って何の略だろう?
- Dateクラスのインスタンスを生成するところで、いらない引数ははしょった方が見やすいと思った。
具体的には
var dofw1 = (new Date(year, m, 1, 0, 0, 0)).getDay();
を
var dofw1 = (new Date(year, m, 1)).getDay();
に書き換えた方が見やすい。
- caption タグって何だろう?と思ったら table の子供に持たせるタグだった。表題ってことね。
- br タグに clear="all" って属性つけると以降テキストのまわりこみを中止させられる。
- previousSibling.value
以下で this.previousSibling は input タグの手前の空白を示す。
<input type="text" size="4" value="2008" /> <input type="submit" onclick="alert(this.previousSibling.value);" />
手前の input ではないので注意!
JavaScript と HTML を実際に設置して動かしてみたときに、
ハマったのがコレでした。
DOM を全然理解できないことを痛感(´・ω・`)
*1:メタネタ元?