I\'m stuck on Javascript in this case problem: Sean has created the layout of th
ID: 3661804 • Letter: I
Question
I'm stuck on Javascript in this case problem:
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.
The two functions are stored in an external JavaScript file named functions.js. The daily schedules have been stored in files named sunday.htm through saturday.htm.
Complete the following:
1. Use your text editor to open the todaytxt.htm file from the tutorial.10case3 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 </head> 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 ele- ment insert a script element. The script should run the following two commands: a. Write the following HTML code to the Web page:
Today is <br />
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 ele- ment. 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
<iframe src="weekday.htm"></iframe> 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.
todaytxt.htm
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 10
Case Problem 3
Today at the Union
Author:
Date:
Filename: today.htm
Supporting files: back.jpg, friday.htm, functions.js, modernizr-1.5.js,
monday.htm, mw.css,
saturday.htm, schedule.css, sunday.htm, thursday.htm,
tuesday.htm, wednesday.htm
-->
<meta charset="UTF-8" />
<title>Today at the Union</title>
<script src="modernizr-1.5.js"></script>
<link href="mw.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div id="dateBox">
</div>
<h1>MidWest Student Union</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Today at the Union</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Special Events</a></li>
<li><a href="#">Join Us</a></li>
</ul>
</nav>
<section>
<h1>Today at the Union</h1>
<p>
</p>
</section>
<footer>
<address>
MidWest Student Union ·
300 Campus Drive ·
Salina, KS 67401 ·
(785) 555 - 3487
</address>
</footer>
</body>
</html>
functions.js
/*
New Perspectives on HTML and CSS
Tutorial 10
Case Problem 3
Filename: functions.js
This file contains functions used in the today.htm file.
The showDate function displays the date in the format: "Weekday, Month Day, Year"
The weekDay function displays the weekday name
*/
function showDate() {
thisDate = new Date();
var thisWDay=thisDate.getDay();
var thisDay=thisDate.getDate();
var thisMonth=thisDate.getMonth();
var thisYear=thisDate.getFullYear();
var mName = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October","November", "December");
var wdName = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
return wdName[thisWDay]+", "+mName[thisMonth]+" "+thisDay+", "+thisYear;
}
function weekDay(){
thisDate = new Date();
var thisWDay=thisDate.getDay();
var wdName = new Array("sunday", "monday", "tuesday", "wednesday",
"thursday", "friday", "saturday");
return wdName[thisWDay];
}
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 10
Case Problem 3
Today at the Union
Author:
Date:
Filename: today.htm
Supporting files: back.jpg, friday.htm, functions.js, modernizr-1.5.js,
monday.htm, mw.css,
saturday.htm, schedule.css, sunday.htm, thursday.htm,
tuesday.htm, wednesday.htm
-->
<meta charset="UTF-8" />
<title>Today at the Union</title>
<script src="modernizr-1.5.js"></script>
<link href="mw.css" rel="stylesheet" type="text/css" />
<script text="text/javascript" src="functions.js"></script>
</head>
<body>
<header>
<div id="dateBox">
<script type="text/javascript">
document.write("Today is<br />");
window.onload = showDate();
</script>
</div>
<h1>MidWest Student Union</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Today at the Union</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Special Events</a></li>
<li><a href="#">Join Us</a></li>
</ul>
</nav>
<section>
<h1>Today at the Union</h1>
<p>
<script type="text/javascript">
/*
Display the daily schedule in an inline frame.
Daily schedules are stored in the files sunday.htm through saturday.htm.
*/
var weekday = weekday();
weekday = weekday + '.htm'
document.write("<iframe src=weekday></iframe>");
</script>
</p>
</section>
<footer>
<address>
MidWest Student Union ·
300 Campus Drive ·
Salina, KS 67401 ·
(785) 555 - 3487
</address>
</footer>
</body>
</html>