Chapter 9

In this chapter we looked in more detail at the Date object, particularly with respect to world time and local time. We also looked at how to create timers to trigger code on a web page.

Question 1

Create a web page with an advertisement image at the top. When the page loads, select a random image for that advertisement. Every four seconds, make the advertisement change to a different image making sure a different advertisement is selected until all the advertisement images have been seen.

<html>
<head>
<script language=JavaScript>
    
var imagesSelected = new Array(false,false,false);
var noOfImages = 3;
var totalImagesSelected = 0;
    
function window_onload()
{
   setInterval("switchImage()",4000);
}
    
function switchImage()
{
    
   var imageIndex;
    
   if (totalImagesSelected == noOfImages)
   {
      for (imageIndex = 0; imageIndex < noOfImages; imageIndex++)
      {
         imagesSelected[imageIndex] = false;
      }
    
      totalImagesSelected = 0;
   }
    
var selectedImage = Math.floor(Math.random() * noOfImages) + 1;
while (imagesSelected[selectedImage - 1] == true)
{
      selectedImage = Math.floor(Math.random() * noOfImages) + 1;
   }
   totalImagesSelected++;
   imagesSelected[selectedImage - 1] = true;
   document.imgAdvert.src = "AdvertImage" + selectedImage + ".jpg";
    
}
    
</script>
</head>
<body onload="window_onload()">
<img src="AdvertImage1.jpg" name="imgAdvert">
</body>
</html>

Save this as ch09_q1.htm.

This solution is based on the example in the chapter, Adverts.htm, where we displayed three images at set intervals one after the other. The first difference is that we select a random image each time, rather than the images in sequence. Secondly, we make sure we don't select the same image twice in one sequence by having an array, imagesSelected, with each element of that array being true or false depending on whether the image has been selected before. Once we've shown each image, we reset the array and start the sequence of selecting images randomly again.

The final difference between this solution and the example in the chapter is that we set the timer going continuously with setInterval(). So, until the user moves to another page our random display of images will continue.

Question 2

Create a form that gets the user's date of birth. Then, using that information, tell her what day she was born on.

<html>
<head>
<script language=JavaScript>
    
var days = new Array();
days[0] = "Sunday";
days[1] = "Monday";
days[2] = "Tuesday";
days[3] = "Wednesday";
days[4] = "Thursday";
days[5] = "Friday";
days[6] = "Saturday";
    
function dayOfWeek()
{
    
   var form = document.form1;
   var date = parseInt(form.txtDate.value)
   var year = parseInt(form.txtYear.value)
    
   if (isNaN(date) || isNaN(year))
   {
      alert("Please enter a valid whole number");
   }
   else
   {
      if (date < 1 || date > 31)
      {
         alert("Day of the month must be between 1 and 31");
      }
      else
      {
         userDate = date + " ";
         userDate = userDate +
                    form.selMonth.options[form.selMonth.selectedIndex].value;
         userDate = userDate + " " + year;
         var dateThen = new Date(userDate);
         alert(days[dateThen.getDay()]);
      }
   }
}
</script>
</head>
<body>
<P>Find the day of your birth</P>
<P>
<form name=form1>
<input type=text name=txtDate size=2 maxlength=2>
<select name=selMonth>
   <option selected value="Jan">Jan</option>
   <option selected value="Feb">Feb</option>
   <option selected value="Mar">Mar</option>
   <option selected value="Apr">Apr</option>
   <option selected value="May">May</option>
   <option selected value="Jun">Jun</option>
   <option selected value="Jul">Jul</option>
   <option selected value="Aug">Aug</option>
   <option selected value="Sept">Sept</option>
   <option selected value="Oct">Oct</option>
   <option selected value="Nov">Nov</option>
   <option selected value="Dec">Dec</option>
</select>
<input type=text name=txtYear size=4 maxlength=4>
<br>
<input type="button" value="Day of the week"
      onclick="dayOfWeek()" name=button1>
</form>
</P>
    
</body>
</html>

Save this as ch09_q2.htm.

The solution is surprisingly simple. We create a new Date object based on the date entered by the user. Then we get the day of the week using the Date object's getDay() method. This returns a number, but by defining an array of days of the week to match this number, we can use the value of getDay() as the index to our days array.

We also do some basic sanity checking to check that the user has entered numbers and that in the case of the date, it's between 1 and 31. We could have defined a select element as the method of getting the date and only having number from 1 to 31. Of course, for either way, we don't check whether invalid dates are entered (for example, the 31st of February). You might want to try this as an additional exercise.

Note

Hint: To get the last day of the month, get the first day of the next month then subtract 1.