spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 5

[previous] [next]

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


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");
  }
  1. 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.

  2. 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.

  3. 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.

  4. 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.

home / programming / javascript / diaries / 5

[previous] [next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

Created: June 10, 2005

URL: