HTML and CSS Reference
In-Depth Information
Complete the following:
1. Use your text editor to open the
eventstxt.htm
file from the tutorial.11\review folder,
enter
your name
and
the date
in the head section, and then save the file as
events.
htm
in the same folder. Use your text editor to open the
datestxt.js
file from the
tutorial.11\review folder, enter
your name
and
the date
in the comment section, and
then save the file as
dates.js
in the same folder.
2. Go to the
dates.js
file in your text editor. The file contains a single function named
showDateTime()
that displays the date and time of a
Date
object in a formatted text
string. Below this function, insert a function named
changeYear()
that will change
a date's year value if the date already has been passed in the current calendar year.
To create the
changeYear()
function, do the following:
a. Specify two parameters for the
changeYear()
function:
today
and
holiday
.
The
today
parameter is used to store a
Date
object representing the current date.
The
holiday
parameter is used to store a
Date
object representing the date of one
event in Hector's list.
b. In the first line of the function, use the
getFullYear()
method to extract the
four-digit year value from the
today
parameter and store the value in a variable
named
year
.
c. In the second line, use the
setFullYear()
method to set the full year value of the
holiday
parameter to the value of the
year
variable. This changes the date of the
holiday event to the current year.
d. In the third line, create a conditional operator that tests whether the date stored in
the
holiday
parameter is less than the date stored in the
today
parameter; this tests
whether the holiday has already passed. If it is, increase the value of the variable
by 1; otherwise, leave the value of the
year
variable unchanged.
e. In the fourth line of the function, repeat Step c to set the final date of the
holiday
parameter using the revised value of the
year
variable.
3. Below the
changeYear()
function, create a function named
countdown()
that
will return a text string displaying the number of days, hours, minutes, and seconds
between a starting date and a stopping date. Create the function as follows:
a. Specify two parameters for the function:
start
and
stop
. The
start
parameter
will contain a
Date
object for the starting date. The
stop
parameter will contain a
Date
object for the stopping date.
b. In the first line of the function, calculate the time difference between
stop
and
start
, storing the difference in a variable named
time
.
c. Convert the time difference from the
time
variable into integer values for the
days, hours, minutes, and seconds, and then return the text string
days
days,
hours
hrs,
minutes
mins,
seconds
secs
where
days
,
hours
,
minutes
, and
seconds
are variables that store the integer
values of the days, hours, minutes, and seconds, respectively. (Hint: Use the com-
mands in the NYClock() function from the tutorial as a guide for converting the
time difference into days, hours, minutes, and seconds.)
4. Close the file, saving your changes.
5. Go to the
events.htm
file in your text editor. Above the closing
</head>
tag, insert an
external
script
element to access the code in the
dates.js
file. Then, below that ele-
ment, insert a second
script
element for code to be embedded in the
events.htm
file.
6. Within the embedded
script
element, create a function named
showCountdown()
.
The
showCountdown()
function has no parameters. Within the function, do the
following:
a. Create a variable named
today
containing a
Date
object. Use the current date
and time shown in Figure 11-37. Create six additional
Date
objects in variables
named
Date1
through
Date6
. Assign the dates and times from the six events in
