Laboratory: Introduction to Functions

Exercise 1: Writing a function for Old Macdonald

Remember the Old MacDonald song? All the verses of the Old MacDonald song are the same. The only thing that changes from verse to verse, is the animal and the sound. Suppose we want to print on a web page several verses of the song. This situation is a good candidate for defining and using a function! The function we will define will print on the page one verse of the song. Then, we will call/invoke/use the function as many times as the number of verses we wish to print.


<html>
<head> <title> Old MacDonald and New Functions!</title>
   <script TYPE="text/JavaScript">
   //Define function in the HEAD part of your document:


   </script>
</head>

<body>

   <script type="text/JavaScript">
     // Call your function here
    
    
   </script>
</body>
</html>

Create a new file oldMac.html, on your Desktop. (You can use the code given above as your starting point.)
Define a JavaScript function oldMacVerse() that displays one verse of the Old MacDonald song. Should this function have any arguments?
Invoke the function several times with different animals and sounds.
The resulting page should look something like this Old MacDonald page. Of course, feel free to use any animals/sounds you would like!
Give the viewer of your page the chance to input their favorite animal and sound.
As an alternative, you can implement Old MacDonald using jQuery and cloning (similar to the extra credit from the last assignment). Check out the source code to understand how it works.

Exercise 2. Improved Fortune-telling

In our first lab on conditionals, we used the Date object and conditional statements (if - else) to create a simple fortune-telling page using document.write to output a fortune to the page based on the time when the page was loaded. Take a quick look at the source code to review the solution.

To implement a more sophisticated scheme (similar to what we will do for the assignment this week), we will use if-statements that test multiple conditions to identify more specific time intervals. We will also learn to test the page for different loading times, which will be helpful on the assignment, as well.

Here is a version of the fortune-telling page using jQuery and functions. View the source code to understand how the code works. We will use this page as a starting point, so save your own copy: (File > Save Page As --> Web Page, HTML only). You'll need to download your own copy of the two image files (thumbsUp.png and thumbsDown.png), as well.

In this fortune-telling page, the second is derived from the Date object, and we only have to wait 30 seconds at the most to test the two possible conditions of seconds greater or less than 30.

In today's exercise and in the assignment, we are interested in the hour, minute and day to determine what to display at a specific time.

It would be quite inconvenient to wait until midnight or until another day to fully test your program. So, we have supplied a function promptDayHourMinute(), which prompts for a test value for the time. You can then experiment with how your program works at various times, without having to wait for the real time to match the particular conditions you are testing for.

To use the function, your must load its definition from an external JavaScript file by adding the following line in the HEAD of your file:

<head>
<script type="text/JavaScript"
    src="http://cs.wellesley.edu/~cs110/js/promptDayHourMinute.js">
</script>
</head>

You must also call/invoke the function in your JavaScript to use it; do so at the beginning of your JavaScript code (after your code for getting the real seconds):

	 	var now = new Date();
		var seconds = now.getSeconds();
		
		promptDayHourMinute();
		
		// the rest of your fortune-telling program

The promptDayHourMinute() function sets three global variables for you:

Day which is the day of the week, as an integer 0 (Sunday) to 6 (Saturday)
Hour which is the hour of the day, using a 24-hour (military) clock, where 0 is the hour just after midnight, 1 is 1:00 am, ... 12 is noon, 13 is 1pm ... 22 is 10pm, and 23 is 11pm.
Minute which is the minute of the hour, as an integer from 0 to 59.

Your code must use the variables Day, Hour, and Minute.

In the current page, the optimistic fortune shows if seconds <= 30, and the pessimistic fortune shows otherwise. Change your program so that the fortune shown is based on the Hour and Minute, rather than seconds: specifically, show the optimistic fortune starting at 4:30 PM, up to but not including 10:45 PM. Show the pessimistic fortune the rest of the time.

How do you specify this time interval in JavaScript? You must verify the following conditions:

hour == 16 AND minute >= 30 (times in the range 4:30PM to 4:59PM)
- OR -
hour > 16 AND hour < 22 (times in the range 5:00PM to 9:59PM)
- OR -
hour == 22 AND minute < 45 (times in the range 10:00PM to 10:44PM)

This is written in JavaScript as:

if (  (Hour == 16 && Minute >= 30) ||
      (Hour > 16 && Hour < 22) || 
      (Hour == 22 && Minute < 45) ) {
    /* display the optimistic message */
}

Input some times between 16:30 and 22:45 (up to but not including 22:45), and look for the optiimistic fortune to appear.

NOTE: it is especially important to test the border conditions. For 22:45, the pessimistic fortune should appear.

Change your program so that the optimistic message only shows on Wednesday or Thursday between 4:30 PM and 10:45 PM.

The best way to do this is to nest your existing conditional statement inside one that tests for the Day of the week:

if (Day == 3 || Day == 4) { //it is Wed or Thur

	//if it is in the  period 4:30PM to 11:44PM 
	// (16:30 to 22:44)
	if ((Hour == 16 && Minute >= 30) ||
        (Hour > 16 && Hour < 22) ||
        (Hour == 22 && Minute <45) ) {
      		document.write("optimistic message");
	} else { //the hour is not in 16:30 to 22:44
            document.write("pessimistic message");
	}
 } 
 else { // it is not Wed or Thur
       document.write("pessimistic message");
 }

When prompted, enter Day = 3 or 4, and some times between 4:30 and 10:45, and look for the optimistic fortune to appear. Then, try the other values for Day with those same times, and look for the pessimistic fortune.

NOTE: it is important to define a set of test values which will thoroughly verify your program. What other combinations should be tested?