HTML and CSS Reference
In-Depth Information
loop, add the following commands: (1) increase the value of the
monthNum
variable by 1 to keep track of the month being currently written; (2) use the
setDate()
Date
object method to change the day value of the
calendarDay
variable to 1 so that
calendarDay
points to the first day of the current month
being written; (3) use the
setMonth()
Date
object method to change the month
value of the
calendarDay
variable to
monthNum
so that
calendarDay
points
to the current month being written; and (4) call the writeMonthCell()
func-
tion using
calendarDay
and
currentTime
as the parameter values to write the
monthly table within the current yearly calendar table cell.
h. In the last line of the yearly() function, after the
for
loop that writes the table
rows, insert a command to write a closing
</table>
tag to the document.
4. Locate the writeMonthTitle() function farther down in the document. The purpose of
this function is to write the title row for each monthly calendar table. Maria wants to
make this title into a hypertext link that opens a Web page describing events occur-
ring in the selected month. Revise the HTML code written by this function as follows
<tr>
<th class='monthly_title' colspan='7'>
<a href='
month
.htm'>
month
</a>
</th>
</tr>
where
month
is the name of the month.
5. Within the writeDayNames() function, change the values of the
dayName
array from
three-letter abbreviations of the day names to the one-letter abbreviations
S
,
M
,
T
,
W
,
R
,
F
, and
S
.
6. Close the
yearly.js
file, saving your changes.
7. Go to the
calendar.htm
file in your text editor. In the head section of the document,
add links to both the
yearly.css
style sheet and the
yearly.js
external script file.
8. Scroll down the document and locate the
yearly_events
figure box. Insert an embed-
ded script element. Within the script, run the command
yearly()
using the text string
February 11, 2015
as the parameter value.
9. Supplement your code with descriptive comments, and then save your changes to
the file.
10. Open
calendar.htm
in your Web browser. Verify that the yearly calendar shown in
Figure 12-35 is displayed on the Web page.
11. Return to the
calendar.htm
file in your text editor. Change the statement within the
script
element that calls the yearly() function so that no parameter value is pro-
vided (i.e., the function uses the current date). Save your changes and then reload
calendar.htm
in your Web browser. Verify that the calendar for the current year
is displayed, and that the current date is the only one highlighted in the calendar.
Further verify that when you click the title bar in each of the monthly calendars, the
browser opens a Web page containing placeholder text for that month's events.
12. Close any open files. Submit your completed Web site to your instructor, in either
printed or electronic form, as requested.
