New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 10 Case 3 MidWest Student Union
MidWest Student Union Sean Lee manages the Web site for the student union at MidWest University in Salina, Kansas. The student union provides daily activities for the students on campus. As Web site manager, part of Sean’s job is to keep the Web site up to date on the latest activities sponsored by the union. At the beginning of each week, she revises a set of seven Web pages detailing the events for each day in the upcoming week.
Sean would like the Web site to display the current day’s schedule in an inline frame within the Web page titled Today at the Union. To do this, her Web page must be able to determine the day of the week and then load the appropriate file into the frame. She would also like the Today at the Union page to display the current day and date. Figure 10-39 shows a preview of the page she wants you to create.
Sean has created the layout of the page, and she needs you to write the scripts to insert the current date and the calendar of events for the current day. To assist you, she has located two functions:
• The showDate() function returns a text string containing the current date in the format Weekday, Month Day, Year. The function has no parameter values.
• The weekDay() function returns a text string containing the name of the current weekday, from Sunday through Saturday. This function also has no parameter values.
Complete the following:
1. Use your text editor to open the todaytxt.htm file from the tutorial.10\case3 folder included with your Data Files. Enter your name and the date in the comment section of the file and save it as today.htm.
2. In the head section just above the closing tag, insert a script element accessing the functions.js file.
3. Scroll down the file and locate the div element with the id dateBox. Within this element insert a script element. The script should run the following two commands:
a. Write the following HTML code to the Web page:
b. Write the text string returned by the showDate() function to the Web document.
4. Scroll down the file and locate the h1 heading with the text Today at the Union. Within the empty paragraph that follows this heading, insert another script element. Within the script element, do the following:
a. Insert the following multiline comment:
Display the daily schedule in an inline frame.
Daily schedules are stored in the files sunday.
htm through saturday.htm.
b. Insert a command to write the HTML code
to the Web page, where weekday is the text string returned by the weekDay() function.
5. Save your changes to the document.
6. Open today.htm in your Web browser. Verify that it shows the current date and that the daily schedule matches the current weekday.
7. If you have the ability to change your computer’s date and time, change the date to different days of the week and reload (not simply refresh) the Web page. Verify that the date and the daily schedule change to match the new date you selected. Debug your code as necessary.
8. Submit your completed files to your instructor.