The JavaScript Diaries: Part 5 - Page 3

[previous] [next]

The JavaScript Diaries: Part 5

We'll pretend that we have a group that meets every Saturday at a different person's home. Each weekly meeting will be posted on a Web site. To begin, we'll create a function that we can call from somewhere on the Web page:

  function meeting() {
  }

When creating a function it's always a good idea to put in the closing curly bracket so you don't forget it. Next, let's declare some local variables and initialize them with an assigned value:

  var text = "The meeting this week will be at ";
  var nowDate = new Date();
  var currDate = nowDate.getDate();

The first variable, text, has a value of the string: "The meeting this week will be at." (Note the space after the word "at.") The other two variables may look a little strange. They are using JavaScripts objects. I'll explain (on a basic level) what we have done but we'll learn more about objects in another installment.

The second variable, nowDate, is assigned the value of the current date. This is done by using the reserved word new and the Date object. The date that is used is taken from the user's own computer. (This can be changed and we'll look at it in more detail later in another installment.)

The third variable, currDate, is then assigned the value of the current day's date, i.e., if it's June 2, 2005, then the day's value would be 2. This is accomplished by using the getDate object to extract the current day's date from the variable nowDate, which it obtained from the Date object on the preceding line.

At this point, I suspect that some of you are a bit (perhaps thoroughly) confused. Basically, here's what we've done. We have assigned the current date, i.e., June 2, 2005, to the variable nowDate. We then took and extracted the day's date itself, i.e., 2, and assigned it to the variable currDate. Now we can use that value to make comparisons. Now, let's create a set of if/else statements. In order to do that, let's assume that for the month we're looking at, the Saturday meetings would fall on the 4th, 11th, 18th, and 25th and that we would post this script on the first day of the month:

  if (currDate < 5) {
    document.write(text + "Steve's house");
  }
  else if ((currDate < 12) && (currDate > 4)) {
    document.write(text + "Nancy's house");
  }
  else if ((currDate < 19) && (currDate > 11)) {
    document.write(text + "Mike's house");
  }
  else {
    document.write(text + "Sally's house");
  }

The first conditional statement says: "If the value of the variable currDate is less than 5, then concatenate the value of the variable text to the string, 'Steve's house,' and write it to the document." This will be executed if the date falls between the 1st and the 4th of the month. The script will then end. If the statement is false, it will proceed on to the next conditional statement. The next conditional statement says: "If the value of the variable currDate is less than 12 and greater than 4, then concatenate the value of the variable text to the string, 'Nancy's house,' and write it to the document." This will be executed if the date falls between the 5th and the 11th of the month. The script will then end. If the statement is false, it will proceed on to the next conditional statement. The next conditional statement says: "If the value of the variable currDate is less than 19 and greater than 11, then concatenate the value of the variable text to the string, 'Mike's house,' and write it to the document." This will be executed if the date falls between the 12th and the 18th of the month. The script will then end. If the statement is false, it will proceed on to the next conditional statement. Finally, the last conditional statement says: "Concatenate the value of the variable text to the string 'Sally's house,' and write it to the document." This will be executed if the date falls after the 18th of the month. The script will then end.

Next, we need to call the function from the Web page where we want the message to be displayed. We would do that by putting the function meeting(); on the page between script tags. Here is what the script looks like in its entirety:

<script type="text/javascript">
<!--
function meeting() {
  var text = "The meeting this week will be at ";
  var nowDate = new Date();
  var currDate = nowDate.getDate();
  if (currDate < 5) {
    document.write(text + "Steve's house");
  }
  else if ((currDate < 12) && (currDate > 4)) {
    document.write(text + "Nancy's house");
  }
  else if ((currDate < 19) && (currDate > 11)) {
    document.write(text + "Mike's house");
  }
  else {
    document.write(text + "Sally's house");
  }
}
//-->
</script>

And the function call:

<script type="text/javascript">
<!--
  meeting();
//-->
</script>

That's it. There is probably a better way of doing this but what you see was for demonstration purposes only. It would be easier if the script figured out the dates, then we wouldn't have to change it every month. Perhaps later we'll revisit this script and see what we can do to make it better.

[previous] [next]

Created: June 10, 2005

URL: