カレンダー生成

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:メタネタ元?