Displaying The Page - Page 5

Now that we have the current hour, we need to do something with it. This script's whole purpose is to use that information to display (or "print," in programmer-speak) the appropriate content.

This brings us to one of the most useful applications of JavaScript: the ability to "print" HTML directly onto a Web page. This is done with a method called document.write( ):

document.write("<img height='150' width='250' src='photo-day.jpg'>");

Everything between the double quotes in the call to document.write( ) is printed onto the page. This example prints the HTML to display the image, but you can print any text or HTML this way, including tables, forms, or whatever.

As you'll see as we progress through this book, much of what you do in JavaScript involves functions and methods. In JavaScript, a function is simply a name for a set of instructions to the Web browser. Methods are similar, but there's a subtle difference; see the sidebar "Objects, properties, and methods" later in this chapter for the details. Some methods, like document.write( ), are built into JavaScript; we'll be using lots of built-in methods in this book. JavaScript also allows you to define your own functions, as we'll discuss in Chapter 2.

Putting it all together

You now have two pieces of knowledge: how to get the current time in hours and how to print out the page. But how do you combine the two so you can print appropriate content based on the hour? You use something called an if statement. if statements use a very simple concept: "If this condition is true, then do that." In JavaScript, the simplest form of an if statement looks like this:

if ( this is true ) {
  run this code
}

It looks like fractured English, and there's a reason after all, JavaScript is a language. Every if statement consists of the word if followed by a statement in parentheses and then a block of code in braces. The parentheses contain the condition that is being checked. The braces contain the code that is run if the condition is met. Consider the following code:

if (hour > 22) {
  document.write("My, it's getting late!");
}

If the variable hour is greater than 22, meaning it is later than 10 P.M. (hours are specified with a 24-hour clock), the code prints a message about how late it is.

An if statement can also have an else portion that contains code that is run if the condition isn't met:

if ( this is the case ) {
  then run this code
}
else {
  otherwise run this code
}

This is the format we're using in the night and day script, where we're checking the hour and displaying the time-appropriate graphic and promotional text. If the hour is between 4 A.M. and 4 P.M., we'll serve the daytime photo; if it's between 4 P.M. and 4 A.M., we'll serve the nighttime photo. Here is a simplified version of the code from Example 1-3:

if (hour >= 4 && hour <= 16) {
  document.write("<image src='photo-day.jpg'>");
}
else {
  document.write ("<image src='photo-night.jpg'>");
}

The first line says, "If the value of the variable hour is greater than or equal to 4 and less than or equal to 16, run the code in braces." You probably remember the greater-than or equal (>=) and less-than or equal (<=) signs from math class; the double ampersands (&&) mean "and".

What happens if it's 7 P.M? Since we weren't testing for this time, the else statement applies. With else, we're saying, "If the condition isn't true, then do this instead." If it's 7 P.M., it's not between 4 A.M. and 4 P.M., so the script runs the code following the word else. In this case, the code prints out the nighttime image and text.

The Script Tag - Page 4
Designing with JavaScript, 2nd Edition
Document Properties - Page 6