Working with Arrays, Loops, and Conditional Statements - HTML, CSS, and Dynamic HTML - page 826

Reviewing the Calendar Structure
The calendar you create will be constructed as a Web table. Before you start writing the
code to create this table, you should understand the table's structure. Maria wants the
following class names and IDs assigned to the different parts of the table:

• The entire calendar is set in a Web table with the ID calendar_table .
• The cell containing the calendar title has the ID calendar_head .
• The seven cells containing the days of the week abbreviations all belong to the class
calendar_weekdays .
• The cells containing the dates of the month all belong to the class calendar_dates .
• The cell containing the current date has the ID calendar_today .

These class and ID designations make it easier for page developers to assign differ-
ent styles to the different parts of the calendar. If developers want to change the table's
appearance, they will not have to edit the JavaScript code to do so; instead, they only
will have to modify the style sheet.

Adding the calendar() Function
Because Maria wants the calendar application to be easily available to any page on the
CCC site, you'll place all of the commands that generate the calendar within a single
function named calendar(), stored within the calendar.js file. The first commands you'll
add to the function will use the document.write() method to write the HTML code for
the table element as follows:

function calendar() {
document.write(“<table id = 'calendar_table'>”);
document.write(“</table>”);
}
Note that you place the value of the id attribute within single quotes to avoid confu-
sion with the entire text string written by the document.write() method; that string is
already enclosed within double quotes. You'll add this function now.

To begin work on the calendar() function:

◗ 1. Return to the calendar.js file in your text editor, and then, at the bottom of the

file, add the following code, as shown in Figure 12-4:

function calendar() {
document.write(“<table id = 'calendar_table'>”);
document.write(“</table>”);
}

Figure 12-4 inserting the calendar() function

◗

2. Save your changes to the file.

Next, you'll call this function from within the figure box on Maria's sample
Web page.

◗ 3. Return to the ccc.htm file in your text editor, and then locate the figure

element with the id attribute events within the main section of the document.