dynamic content:
time-sensitive content

How can I use JavaScript to make my web pages display different messages depending on when they are loaded?

JavaScript has a built-in object, called the Date object, that is packed with methods for helping your code perform many kinds of operations on dates and times. Despite the misleading name, the Date object is really a "point in time" object, because it stores both a date and a time. A Date object does not necessarily store the current time; you can store any value you want in it. (Technically, what the Date object really stores is the number of milliseconds from the beginning of 1970, so you cannot assign a Date object a value before 1970.)

The definitive source of information on how to use the Date object can be found in Netscape's JavaScript Authoring Guide, but for now, let's run through a simple example that demonstrates a little of what the Date object can do. We would like to create a web page that greets the user with one of the following salutations, depending on when it is loaded:

12 a.m. - 3:59 a.m. Good grief, what are you doing up at this time of night?
4:00 a.m. - 10:59 a.m. Good morning. Thanks for tuning in.
11:00 a.m. - 4:59 p.m. Good afternoon. Glad you could make it.
5:00 p.m. - 11:59 p.m. Good evening. Enjoy your stay.

12 a.m. - 3:59 a.m.	Good grief, what are you doing up at this time of night?
4:00 a.m. - 10:59 a.m.	Good morning. Thanks for tuning in.
11:00 a.m. - 4:59 p.m.	Good afternoon. Glad you could make it.
5:00 p.m. - 11:59 p.m.	Good evening. Enjoy your stay.

The first thing we need to do is create a Date object and set its value equal to the current time of day. There are many ways to create Date objects and to initialize them with certain values, but we will use the easiest way since it automatically sets the new Date object's value equal to the current time. The following line of code creates a Date object called current_time and initializes it with the current time:

current_time = new Date ();

Now that we know what time it is, we need to extract the hour portion of the time, since all of the time periods described in the greeting schedule above fall neatly on 1-hour boundaries. The Date object's getHours method is just what we need to get the job done:

hour = current_time . getHours ();

The variable hour now contains a value between 0 and 23 which represents the hour-part of current_time's value. The next step is to test the value of hour with if/then statements and determine which greeting to print:

if (hour < 4)
	greeting = "Good grief, what are you doing up at <em>this</em> time of night?";
else if (hour < 11)
	greeting = "Good morning.  Thanks for tuning in.";
else if (hour < 17)
	greeting = "Good afternoon.  Glad you could make it.";
else
	greeting = "Good evening.  Enjoy your stay.";

Now, since greeting is equal to the message we want to print, all we have to do now is print it:

document . writeln (greeting);

And we're done! Your document now has a custom greeting that changes with the time of day. It's really quite simple, isn't it?

One last note of caution: When you use JavaScript to output text or HTML codes to the document, you should make sure that your code is executed before the document has finished loading. This means that the script should be inlined into the document so that it executes right away, and not as the result of user events taking place after the document has finished loading.

In conclusion, here is the completed document:

And here is what it looks like:

first line in document

last line in document

P.S. If you want to display different images according to the time of day. Just replace the greeting strings in the code above with the appropriate HTML codes. For example:

if (hour == 12)
	document . writeln ("<img src=out_to_lunch.gif>");

Charlton Rose
12/8/96

dynamic content: time-sensitive content

first line in document

last line in document

dynamic content:
time-sensitive content