八. 综合应用

　　最后一个例子演示JavaScript对象的重要性。首先设置好一个 Calendar(日历)对象，然后根据需要显示任何一个月的月历。执行过程不复杂，只需要指定月和年为对象属性，然后让构造器做其它事情即可：

＜script language="JavaScript"＞
/*　　Calendar object, calendar.js
　　　Usage:
　　　obj = new Calendar(mm, yyyy);
　　　created 15.Mar.2001

　　　copyright Melonfire, 2001. all rights reserved.
　　　http://www.melonfire.com/community/columns/trog/

　　　demonstration only - not meant for production enviroments!!
*/

// constructor
function Calendar(month, year)
{

// array of day names
this.days = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");

// array of month names
this.months = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");

// array of total days in each month
this.totalDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

// object properties - month and year
// correction for zero-based array index
this.month = month-1;
this.year = year;

// leap year correction
if (this.year % 4 == 0)
{
this.totalDays[1] = 29;
}

// temporary variable - used later
this.rowCount = 0;

// object method
this.display = display;

// automatically run method display() once object is initialized
this.display();
}

// function to display calendar
function display()
{

// create a Date object
// required to obtain basic date information
// get the first and last day of the month - boundary values for calendar
obj = new Date(this.year, this.month, 1);
this.firstDayOfMonth = obj.getDay();
obj.setDate(31);
this.lastDayOfMonth = obj.getDay();

// start table
document.write("＜table border=0 cellpadding=2 cellspacing=5＞");

// month display
document.write("＜tr＞＜td colspan=7 align=center＞＜font face=Arial
size=-1＞＜b＞" + this.months[this.month] + " " + this.year +
"＜/b＞＜/font＞＜/td＞＜/tr＞");

// day names
document.write("＜tr＞");
for (x=0; x＜7; x++)
{

document.write("＜td＞＜font face=Arial size=-2＞" +
this.days[x].substring(0,3) + "＜/font＞＜/td＞") ;
}
document.write("＜/tr＞");

// start displaying dates
// display blank spaces until the first day of the month
document.write("＜tr＞");
for (x=1; x＜=this.firstDayOfMonth; x++)
{
// this comes in handy to find the end of each 7-day block
this.rowCount++;
document.write("＜td＞＜font face=Arial size=-2＞ ＜/font＞＜/td＞");
}

// counter to track the current date
this.dayCount=1;
while (this.dayCount ＜= this.totalDays[this.month])
{
// use this to find out when the 7-day block is complete and display a new row
if (this.rowCount % 7 == 0)
{
document.write("＜/tr＞\n＜tr＞");
}

// print date
document.write("＜td align=center＞＜font face=Arial size=-1＞" + this.dayCount
+ "＜/font＞＜/td＞");
this.dayCount++;
this.rowCount++;
}
// end table
document.write("＜/tr＞＜/table＞");
}

// eof
＜/script＞

    以下解释一下上面代码的工作过程：

　　最开始的几行设置了包含月和日名的数组以及每个月中总的天数。用一个简单的方程式来判断某年是否为闰年，如果是的话就对二月的总天数进行相应修改。然后控制就传给了对象方法display()，它负责将日历写到页面上。

　　使用了Date对象和一些临时变量之后，就创建了一个表格并用这个月的日期来填充好。document.write()方法负责设置 ＜table＞、＜tr＞ 和 ＜td＞ 标记，然后将日期信息打印到表格单元中。

　　以下代码说明如何使用这个对象：

＜html＞
＜head＞
＜script language="JavaScript" src="calendar.js"＞＜/script＞
＜/head＞