HTML 组件(HTML COMPONENTS)

【 tulaoshi.com - Web开发 】

　　HTML 组件（HTML COMPONENTS）是IE5。0的主要扩展之一，其也最具革命性，微软的意图是用HTML组件来取代ACTIVEX控件，和ACTIVE控件一样，HTML组件是自持续封闭对象，可以一次开发任意使用，使用HTML组件有很多好处，本文将给您揭示其中的一些！
HTML组件带入了很多新的术语、思想、对象、方法和属性，我将通过一个日历应用给您接受这些，这个日历应用显示当前月的日期、星期并且高亮度显示当前日期。

====HTML行为和HTC行为===

　　HTML组件封装了HTML内容，并可以插入到别的HTML文档中。在HTML组件出现以前，在HMTL文档中使用自定义控制唯一的办法就是使用微软ACTIVEX控件，ACTIVEX控件的一个缺点之一就是使用前必须客户机安装HTML控件，另一方面将主页面下载到客户机，对于DHTML的作者来说HTML控件更具吸引力，因为他们可以使用他们熟悉的语言开发自己的控件和组件，HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，它包括脚本和一系列HTC自定义说明元素，这些元素定义了HTML组件的属性、方法、事件等，所有HTC元素通过对象的ID属性作为对象在脚本中使用，所有方法和属性均可在脚本中动态操作。

　　您可以使用HTC实现以下行为：

　　*设定属性和方法。通过“PROPERTY”和“METHOD”元素定义

　　*设置自定义事件。通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，通过“createEventObject()”方法设置事件环境。
　　*访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。

　　*收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通知HTC两种特殊事件：oncontentready事件和ondocumentready事件 。

　　HTC封装了行为的定义 ，行为的概念第一次出现是在IE5。0中，HTC中的高级行为封装就是行为不能和元素标记分离，在IE5。0中，在脚本中行为可以从元素中分离出来，而在IE5。5中，元素不能和其原始行为分离。

===定义标记和命名空间===

　　HTC的基础是自定义标记，自定义标记的第一次出现是在IE5。0中，它可以让WEB作者通过与结构关联的一系列样式来定义文挡结构，例如：您可以定义一个新标记RIGHT（段落右对其）

HTML XMLNS:DOCJS
HEAD
STYLE
@media all {
DOCJS:RIGHT {text-align:right; width:100}
}
/STYLE
/HEAD
BODY
DOCJS:RIGHT
Read Doc JavaScript's columns, tips, tools, and tutorials
/DOCJS:RIGHT
/BODY
/HTML

　　在Internet Explorer中您要为页面定义自定义标记，必须为该标记提供命名空间，自定义标记是基于XML符号的XML命名空间，正如以下所示。我们使用DOCJS命名空间：

HTML XMLNS:DOCJS

　　XMLNS是XML NameSpace的缩写，我定义了一个叫做RIGHT的自定义标记，要使用该标记必须在该标记前加上正确的XML命名空间前缀：DOCJS:RIGHT,如果命名空间未定义，则在文档解析时，自定义标记将作为未知标记处理尽管页面有未知标记，但不会导致错误，不影响别的标记，并且没有任何行为可以应用在其上，你可以在单个HTML标记中定义多个命名空间：

HTML XMLNS:DOCJS XMLNS:DOCJAVASCRIPT

　===最顶级页面===

　　现在我们将我们注视的焦点转向我们的日历应用例子，该应用包括4个不同页面，canlendar.html为最顶级HTML文档，该页包含了calendar.htc HTC，而canlendar.htc有反过来包含两个别的HTC：day.htc和today.htc,calendar.html内容如下：

HTML XMLNS:MYCAL
HEAD
TITLECalendar Example/TITLE
？IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/
/HEAD

BODY
PClick a day in the calendar to add or modify your schedule./P

MYCAL:CALENDAR/MYCAL:CALENDAR

/BODY
/HTML

　　有几个要点您必须重点注意：第一、命名空间定义在〈HTML〉标记中，我们需要使用在我们要调用的HTC中定义的命名空间，在canlendar.htc中的命名空间是:MYCAL，所以在HTML标记中必须出现XMLNS标识。

　　？IMPORT标记以问号开始以和别的正常标记区别开，该标记要求浏览器导入指定的HTC：calendar.htc,HTC可以有多个命名空间，故在导入时需要指明要使用的命名空间（MYCAL）：

？IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/

　　HTC的主要优点之一就是：浏览器将一直挂起页面解析直到输入文件全部被导入为止。页面处理的异步机制将导致许多问题，浏览器并不等元素已经完全显示才开始解析页面，作为例子，你可以建立一个对象，并且在文挡的顶部访问一个在页面底部的方法，如果对象因为某些原因为准备好，你将会得到一个错误指示没有该对象不存在或该对象不支持你要访问的方法，相信您已经碰到过此类事情了吧！不管这样，？IMPORT 是同步的，并且浏览器会一直等待页面导入完毕并且内容准备好。页面唯一而且重要的一行是调用自定义标记MYCAL:CALENDAR:

MYCAL:CALENDAR/MYCAL:CALENDAR

　　因为页面已经导入，故该调用将会象在calendar.htc所指定的那样建立一个日历。

　　您可能已经注意到HTC可以包含别的HTC，calendar.htc包括两个别的HTML组件，每个月的所有日期:day.htc和与当前日期一致的today.htc,以下是canlendar.htc的顶部15行：

HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY
HEAD
？IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/
？IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/

PUBLIC:COMPONENT tagName="CALENDAR"
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/
/PUBLIC:COMPONENT
SCRIPT LANGUAGE="JavaScript"
!--
function fnInit()
{
defaults.viewLink = document;
}
// --
/SCRIPT

　　第一行在这些HTC会用到的XML命名空间。这些命名空间即包括本页自己要用到的，也包括页面需调用的命名空间（ANYDAY和 TODAY ），注意命名空间并不一定要和HTC文件文件名一致。接着，我们导入这些HTC：

？IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/
？IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/

　　当我们解析到这些行，浏览器将一直等到要导入的文件被导入才继续页面解析（同步导入）。然后我们定义CALENDAR自定义标记：

PUBLIC:COMPONENT tagName="CALENDAR"
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/
/PUBLIC:COMPONENT

　　PUBLIC:COMPONENT用来描述CALENDAR标记，在开始和结束标记之间，您可以将事件附加到CALENDAR标记上，事件oncontentready将在calendar.htc文件全部被导入，并被解析时，指定处理时间的是定义在JAVASCRIPT的函数：fnInit()：

SCRIPT LANGUAGE="JavaScript"
!--
function fnInit()
{
defaults.viewLink = document;
}
// --
/SCRIPT

　　viewLink指定的值非常重要，它是HTML组件的基础，它连接了HTML组件和调用该HTML组件的页面，defaults对象有别的属性并且会在别的地方被覆盖，我们给viewLink属性赋的是HTML文档对象，正因为该连接，我们才可以建立HTC组件和包含页面互访。我们将在后面解释日历的层。注意，尽管在日历中当月的当天框和其他天框、空框的样式不一样，但是我们通过优先级法则来实现在包含页中，HTML组件忽略任何相互冲突的样式定义。calendar.htc的样式定义如下：

STYLE
TD {
background-color:tan;
width:50;
height:50;
}
/STYLE

　　现在将该定义和日历比较，只有空框是的颜色是黄褐色的，我们调用的HTC忽略了这些定义，被调用的页面都嵌入了页面定制。以下调用TODAY:DAY HTML组件：

TODAY:DAY value=' + dayOfMonth + '/TODAY:DAY

　　我们只是简单的传入了当月中的第几天，同样的调用ANYDAY:DAY 也是简单的传入当月中的第几天：

ANYDAY:DAY value=' + dayOfMonth + '/ANYDAY:DAY

===编写日历一===

　　当calendar.html调用 MYCAL:CALENDAR,当月的日历将会显示在页面中，函数setCal()是主要程序段，它初始化一些变量并调用drawCal() 函数。我们也使用了三个别的函数：getMonthName()、 getDays() 和 leapYear()。让我们从最后一个函数开始： getDays()函数接收哪月值和哪年值，并且建立一个有12个元素的数组，用来存放每月的天数，哪一年用来决定是不是闰年，在闰年中二月是29天，而不是闰年是28天。该函数返回指定月份的天数。以下是getDays()：

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (leapYear(year)) ？ 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December

// return number of days in the specified month (parameter)
return ar[month];
}

　　如果指定的年数可以被4整除，那么leapYear()函数将返回“true”，否则返回”false“：

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true; // is leap year
/* else */ // else not needed when statement is "return"
return false; // is not leap year
}
getMonthName()函数返回指定月份的名字：
function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12);
ar[0] = "January";
ar[1] = "February";
ar[2] = "March";
ar[3] = "April";
ar[4] = "May";
ar[5] = "June";
ar[6] = "July";
ar[7] = "August";
ar[8] = "September";
ar[9] = "October";
ar[10] = "November";
ar[11] = "December";

// return name of specified month (parameter)
return ar[month];
}
setCal()函数是主模块，我们在脚本的第一行调用它。该函数为当天（now）、和每月的第
一天（firstDayInstance）建立一个Date对象。用这些对象，setCal()函数解析出关于一个月的第
一天、当日，和最后一天的所有信息。
function setCal() {
// standard time attributes
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var date = now.getDate();
now = null;

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;

// number of days in current month
var days = getDays(month, year);

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year);
}

===ANYDAY 和 TODAY HTCs===

　　ANYDAY组件定义在day,htc中，该组件是日历单元的一个封装。组件的名字是由定义在第一行的XML命名空间决定的。
HTML XMLNS:ANYDAY

　　正如canlenar.htc一样，你只有一个命名空间定义，原因是在该页不用调用其他的HTC，也就是说该HCT是叶子HTC，在 这里我们定义的自定义标签是DAY，同样我们也定义它的行为，实际上，HTML组件的定义就是自定义标签行为的定义，该行为包括一个属性和一个事件：

PUBLIC:COMPONENT tagName="DAY"
PROPERTY NAME="value"/PROPERTY
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/ATTACH
/PUBLIC:COMPONENT

　　注意事件 oncontentready ，当它的调用者calendar.htc要求导入day.htc并且被完全导入，该事件就会产生，事件的处理者是fnInit().我们来看看它：

function fnInit() {
document.body.innerHTML = element.value;
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}
　　fnInit()演示了很多重要的HTC章节。第一行把 element.value 指定给调用页的 innerHTML 属性。HTML组件总是封装在element对象里。value属性一般定义在PROPERTY标签中，作为提醒，实际的值从调用页面传入，canlendar.htc:text += 'TDANYDAY:DAY value=' + dayOfMonth + '/ANYDAY:DAY/TD'

　　单元样式在第二行指定：

document.body.className = "clsDay";

　　样式类 clsDay 定义在该页的别处：

STYLE
.clsDay {
width:50;
height:50;
background-color:lightyellow;
align:center;
text-align:right;
}
/STYLE

　　注意在日历中日期的被填色为亮黄色，这证明HTC的格式的指定模式被它的调用者所支配，即：calendar.htc.fninit()的第三行设置default对象的viewlink属性，viewLink属性是HTML组件的基础，它可以使得一个HTC文档(day.htc)对另一个HTML组件(calendar.htc)来说可见.这儿就是viewLink的设置：

defaults.viewLink = document;

　　注意您需要联接的是整个document对象。fnInit()的最后两行初始化我们将在以后解释的两个内部属性：

element.appointments = "";
element.date = element.value;

　　用于它本身的显示，DAY HTML组件和鼠标点击相关：

BODY onclick="fnShowAppts()"

　　当该天被点击，用户被提醒在该天加上他或她的约会，或者修改已经存在的约会：

function fnShowAppts() {
newAppointments = prompt("Add your appointment:", element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = 'FONT COLOR="red"' + element.date + '/FONT' + "BR" + 'FONT SIZE="1"' + element.appointments + '/FONT';
}

　　这里的输入机制非常原始，用户在约会指定中加入新行标签(BR)，否则他们将都显示在一行。最后innerHTML是日期数据(element.date)和约会指定(element.appointments) 的连接纽带。

　　TODAY HTML组件(today.htc)和ANYDAY组件(day.htc)非常类似。唯一的不同是样式快中的background-color是pink而不是lightyellow,并且字体颜色是blue 而不是red.注意在日历中当前日期是粉红色(pink)背景蓝色的字。

　　下节将列出我们所讲的日历的完整代码和一个不用HTC组件方法实现的日历代码：

====日历主页面===

HTML XMLNS:MYCAL
HEAD
TITLECalendar Example/TITLE
？IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/
/HEAD

BODY
PClick a day in the calendar to add or modify your schedule./P

MYCAL:CALENDAR/MYCAL:CALENDAR

/BODY
/HTML

===CALENDAR HTC===
HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY
HEAD
？IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/
？IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/

PUBLIC:COMPONENT tagName="CALENDAR"
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/
/PUBLIC:COMPONENT

SCRIPT LANGUAGE="JavaScript"
!--
function fnInit() {
defaults.viewLink = document;
}
// --
/SCRIPT

STYLE
TD {
background-color:tan;
width:50;
height:50;
}
/STYLE
/HEAD

BODY
SCRIPT LANGUAGE="JavaScript"
!--

// Copyright 1997 -- Tomer Shiran

setCal();

function leapYear(year) {
if (year % 4 == 0) {// basic rule
return true; // is leap year
}
/* else */ // else not needed when statement is "return"
return false; // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (leapYear(year)) ？ 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December

// return number of days in the specified month (parameter)
return ar[month];
}

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12);
ar[0] = "January";
ar[1] = "February";
ar[2] = "March";
ar[3] = "April";
ar[4] = "May";
ar[5] = "June";
ar[6] = "July";
ar[7] = "August";
ar[8] = "September";
ar[9] = "October";
ar[10] = "November";
ar[11] = "December";

// return name of specified month (parameter)
return ar[month];
}

function setCal() {
// standard time attributes
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var date = now.getDate();
now = null;

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;

// number of days in current month
var days = getDays(month, year);

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
//var headerHeight = 50 // height of the table's header cell
var border = 2; // 3D height of table's border
var cellspacing = 4; // width of table's border
var headerColor = "midnightblue"; // color of table's header
var headerSize = "+3"; // size of tables header font
var colWidth = 60; // width of columns in table
var dayCellHeight = 25; // height of cells containing days of the week
var dayColor = "darkblue"; // color of font representing week days
var cellHeight = 40; // height of cells representing dates in the calendar
var todayColor = "red"; // color specifying today's date in the calendar
var timeColor = "purple"; // color of font representing current time

// create basic table structure
var text = ""; // initialize accumulative variable to empty string
text += 'TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + ''; // table settings
text += 'TH COLSPAN=7 HEIGHT=' + 10 + ''; // create table header cell
text += 'FONT COLOR="' + headerColor + '" SIZE=' + headerSize + ''; // set font for table header
text += monthName + ' ' + year;
text += '/FONT'; // close table header's font settings
text += '/TH'; // close header cell

// variables to hold constant settings
var openCol = 'TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '';
openCol += 'FONT COLOR="' + dayColor + '"';
var closeCol = '/FONT/TD';

// create array of abbreviated day names
var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tues";
weekDay[3] = "Wed";
weekDay[4] = "Thu";
weekDay[5] = "Fri";
weekDay[6] = "Sat";

// create first row of table to set column width and specify week day
text += 'TR ALIGN="center" VALIGN="center"';
for (var dayNum = 0; dayNum 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '/TR';

// declaration and initialization of two variables to help with tables
var dayOfMonth = 1;
var curCell = 1;

for (var row = 1; row = Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += 'TR ALIGN="right" VALIGN="top"';
for (var col = 1; col = 7; ++col) {
if ((curCell firstDay) || (dayOfMonth lastDate)) {
text += 'TD/TD';
curCell++
} else {
if (dayOfMonth == date) { // current cell represents today's date
text += 'TDTODAY:DAY value=' + dayOfMonth + '/TODAY:DAY/TD';
} else {
text += 'TDANYDAY:DAY value=' + dayOfMonth + '/ANYDAY:DAY/TD';
}
dayOfMonth++;
}
}
text += '/TR';
}

// close all basic table tags
text += '/TABLE';
text += '/CENTER';

// print accumulative HTML string
document.write(text);
}

// --
/SCRIPT
/BODY
/HTML

===ANYDAY HTC===

HTML XMLNS:ANYDAY
HEAD
PUBLIC:COMPONENT tagName="DAY"
PROPERTY NAME="value"/PROPERTY
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/ATTACH
/PUBLIC:COMPONENT

STYLE
.clsDay {
width:50;
height:50;
background-color:lightyellow;
align:center;
text-align:right;
}
/STYLE

SCRIPT LANGUAGE="JavaScript"
!--
function fnInit() {
document.body.innerHTML = 'FONT COLOR="red"' + element.value + '/FONT';
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}

function fnShowAppts() {
newAppointments = prompt("Add your appointment:", element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = 'FONT COLOR="red"' + element.date + '/FONT' + "BR" + 'FONT SIZE="1"' + element.appointments + '/FONT';
}
// --
/SCRIPT
/HEAD

BODY onclick="fnShowAppts()"
/BODY
/HTML

===TODAY HTC===

HTML XMLNS:TODAY
HEAD
PUBLIC:COMPONENT tagName="DAY"
PROPERTY NAME="value"/PROPERTY
ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/ATTACH
/PUBLIC:COMPONENT

STYLE
.clsDay {
width:50;
height:50;
background-color: pink;
align:center;
text-align:right;
}
/STYLE

SCRIPT LANGUAGE="JavaScript"
!--
function fnInit()
{
document.body.innerHTML = 'FONT COLOR="blue"' + element.value + '/FONT';
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}

function fnShowAppts()
{
newAppointments = prompt("Add your appointment:", element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = 'FONT COLOR="blue"' + element.date + '/FONT' + "BR" + 'FONT SIZE="1"' + element.appointments + '/FONT';
}
// --
/SCRIPT
/HEAD

BODY onclick="fnShowAppts()"
/BODY
/HTML

===非HTC日历实现===

HTML
HEAD
SCRIPT LANGUAGE="JavaScript"
!--
function fnInit() {
defaults.viewLink = document;
}
// --
/SCRIPT
/HEAD

BODY
SCRIPT LANGUAGE="JavaScript"
!--

// Copyright 1997 -- Tomer Shiran

setCal();

function leapYear(year) {
if (year % 4 == 0) {// basic rule
return true; // is leap year
}
/* else */ // else not needed when statement is "return"
return false; // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (leapYear(year)) ？ 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December

// return number of days in the specified month (parameter)
return ar[month];
}

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12);
ar[0] = "January";
ar[1] = "February";
ar[2] = "March";
ar[3] = "April";
ar[4] = "May";
ar[5] = "June";
ar[6] = "July";
ar[7] = "August";
ar[8] = "September";
ar[9] = "October";
ar[10] = "November";
ar[11] = "December";

// return name of specified month (parameter)
return ar[month];
}

function setCal() {
// standard time attributes
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var date = now.getDate();
now = null;

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;

// number of days in current month
var days = getDays(month, year);

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
//var headerHeight = 50 // height of the table's header cell
var border = 2; // 3D height of table's border
var cellspacing = 4; // width of table's border
var headerColor = "midnightblue"; // color of table's header
var headerSize = "+3"; // size of tables header font
var colWidth = 60; // width of columns in table
var dayCellHeight = 50; // height of cells containing days of the week
var dayColor = "darkblue"; // color of font representing week days
var cellHeight = 40; // height of cells representing dates in the calendar
var todayColor = "red"; // color specifying today's date in the calendar
var timeColor = "purple"; // color of font representing current time

// create basic table structure
var text = ""; // initialize accumulative variable to empty string
text += 'TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + ''; // table settings
text += 'TH COLSPAN=7 HEIGHT=' + 10 + ''; // create table header cell
text += 'FONT COLOR="' + headerColor + '" SIZE=' + headerSize + ''; // set font for table header
text += monthName + ' ' + year;
text += '/FONT'; // close table header's font settings
text += '/TH'; // close header cell

// variables to hold constant settings
var openCol = 'TD BGCOLOR="tan" WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '';
openCol += 'FONT COLOR="' + dayColor + '"';
var closeCol = '/FONT/TD';

// create array of abbreviated day names
var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tues";
weekDay[3] = "Wed";
weekDay[4] = "Thu";
weekDay[5] = "Fri";
weekDay[6] = "Sat";

// create first row of table to set column width and specify week day
text += 'TR ALIGN="center" VALIGN="center"';
for (var dayNum = 0; dayNum 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '/TR';

// declaration and initialization of two variables to help with tables
var dayOfMonth = 1;
var curCell = 1;

for (var row = 1; row = Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += 'TR ALIGN="right" VALIGN="top"';
for (var col = 1; col = 7; ++col) {
if ((curCell firstDay) || (dayOfMonth lastDate)) {
text += 'TD HEIGHT="50" BGCOLOR="tan" /TD';
curCell++
} else {
if (dayOfMonth == date) { // current cell represents today's date
text += 'TD HEIGHT="50" BGCOLOR="pink"' + 'FONT COLOR="blue"' + dayOfMonth + '/TD';
} else {
text += 'TD HEIGHT="50" BGCOLOR="lightyellow"' + 'FONT COLOR="red"' + dayOfMonth + '/TD';
}
dayOfMonth++;
}
}
text += '/TR';
}

// close all basic table tags
text += '/TABLE';
text += '/CENTER';

// print accumulative HTML string
document.write(text);
}

// --
/SCRIPT
/BODY
/HTML