HTML and CSS Reference
In-Depth Information
Complete the following:
1. Using your text editor, open
caltxt.htm
and
yeartxt.js
from the
tutorial.12\review
folder, enter
your name
and
the date
in the head section of each file, and then save
the files as
calendar.htm
and
yearly.js
, respectively.
2. Go to the
yearly.js
file in your text editor. Insert a function named
writeMonthcell()
directly below the comment section. The purpose of this function is to place a
monthly calendar within a table cell. The function has two parameters:
calendarDay
and
currenttime
. The
calendarDay
parameter will be used to store a
Date
object
for the first day of the month displayed by the monthly calendar. The
currentTime
parameter will be used to store the value of the date that should be highlighted in
the yearly table. Add the following commands to the function:
a. Write the following HTML code to the document:
<td class='yearly_months'>
b. Call the writeMonth() function using
calendarDay
and
currentTime
as the param-
eter values. The purpose of the writeMonth() function is to write a monthly calen-
dar table within the table cell you just created.
c. Write a closing
</td>
tag to the document to close off the
yearly_months
table cell.
3. Above the writeMonthCell() function, insert the
yearly()
function. The purpose of this
function is to write the entire yearly calendar containing all of the separate monthly
calendars as cells within the larger table. The function has a single parameter named
datestring
that will contain the text string of the date that should be highlighted in
the yearly calendar. Add the following commands to the function:
a. Create the
calendarDay
variable where if
dateString
equals
null
,
calendarDay
equals a
Date
object pointing to the current date and time; otherwise,
calendarDay
equals a
Date
object using the text string specified in the
dateString
parameter.
b. Create a variable named
currenttime
equal to the time value of the
calendarDay
variable. (Hint: Use the
getTime() Date
object method to extract the time value
from
calendarDay
.)
c. Create a variable named
thisyear
equal to the four-digit year value from the
calendarDay
variable.
d. Write the HTML code
<table id='yearly_table'>
<tr>
<th id='yearly_title' colspan='4'>
this year
</th>
</tr>
to the document, where
this year
is the value of the
thisYear
variable. This code
represents the heading of the yearly calendar table.
e. Create a variable named
monthnum
, setting its initial value equal to -1. The pur-
pose of the
monthNum
variable is to keep track of the month value of the current
month being written into the yearly calendar table.
f. Create a
for
loop that writes the HTML code for the three rows of the yearly cal-
endar table using a counter variable named
i
that goes from 1 to 3 in increments of
1. The first command within the
for
loop should write the opening
<tr>
tag to the
document. The last command in the
for
loop should write the closing
</tr>
tag.
g. Within the
for
loop you just created and between the commands that wrote the
opening and closing
<tr>
tags, insert a nested
for
loop that writes the individual
cells of the yearly calendar within each table row. The counter variable
j
of the
nested
for
loop should go from 1 to 4 in increments of 1. In this nested
for