The Script Tag - Page 4

All scripts start and end with one common element: the script tag. The HTML document in Example 1-3 is basically one big script tag; there's no other content in the body of the document. As you can see, the syntax is:

<script language="JavaScript">

The browser considers everything within the script tag to be pure JavaScript and nothing else. This is where most of your scripts will reside. script tags can be placed anywhere inside an HTML document, in the head or in the body. In this case, the script tag is placed where the script does its work of printing out a page--in the body. In other documents, you'll see functions defined in a script tag in the head of the document and then called from other script tags placed elsewhere on the page.

You may be asking yourself, "Why is there a language attribute in the script tag?" That's because JavaScript is not the only Web scripting language. VBScript, a scripting language based on the Visual Basic programming language, can also be used. But VBScript is supported only in Internet Explorer, which limits its practical use.

There are also different versions of JavaScript, each supported by different browsers. JavaScript 1.0 appeared in Netscape Navigator 2.0. Since then, JavaScript has evolved to Version 1.5, currently supported by Netscape 6 and Internet Explorer 5.5. JavaScript has also been standardized under the name ECMAScript (ECMA-262).

So, are these different versions something you need to worry about? Usually, no. Most of the scripts in this book use features supported by all the browsers released in the last four years. When they don't, we'll let you know. If a script uses a feature in the latest version of JavaScript, you need to make only a slight modification to your script tag:

<script language="JavaScript 1.5">

Hiding JavaScript from really old browsers

The only problem with putting a script in a Web page is that really old browsers don't understand the script tag and will display the code in the Web page as normal text. But there is a simple way to get around this using HTML comments:

<script language="JavaScript">
<!-- hide me from antiquated technology
JavaScript code
// stop hiding me -->
</script>

Older browsers will ignore the <script> tags and everything between the <!-- and the -- >. These types of comments can only be used at the beginning and the end of a script, and it is important to put these comments on their own lines. If you put them on the same line as some code, that code will be commented out and your script won't work. For more details on how these comments work, see the "A few comments" sidebar, later in this chapter.

We've used the script hiding technique in Example 1-2, so that you can be familiar with what it looks like. But we won't be using it in any of the other examples throughout the book, since virtually all browsers understand the script tag nowadays.

The Date object and variables

The first part of the night and day script detects the time of day, using the system clock on the user's computer. It does this with the Date object, which is built right into JavaScript:

var now = new Date( );
var hour = now.getHours( );

The first line simply creates a new Date object and gives it the name now. In programming parlance, now is called a variable, which is just a fancy way of saying that it's a name associated with a piece of information. Thus, from this point on, the current date and time can be referred to as now. Next the script says, "Take now (the current date and time), ask it for the current hour (getHours( )), and call the answer hour." As you'll understand shortly, getHours() is a method of the Date object. Now we can also refer to the current hour by name, using the variable hour.

As you can see in the night and day script, we create a variable with var followed by the name of the variable. Once we've created a variable, we can assign a value to it with the equal sign followed by the initial value for the variable, as we've done here with now and hour.

A few comments

There are two types of JavaScript comments: one-liners and block comments. One-liners comment out a single line:

// This is a one-line comment

The two forward slashes (//) are what indicate the comment here. Everything after the // is ignored. One-liners can also be used on the same line as some actual code:

var now = new Date() // Create a Date object

Block comments can span multiple lines, so they have both an opening indicator, /*, and a closing indicator, */. For example:

/* This comment
      spans a number
        of lines */

Everything between the /* and the */ is ignored.

Outside of the script tag, we can also use HTML comments:

<!-- This is an HTML comment -->

Now you can see that our technique for hiding JavaScript from really old browsers takes advantage of both HTML and JavaScript comments. The comment that starts the hiding process is a plain HTML comment. The ending comment, however, combines a JavaScript comment with an HTML comment, //-->. As the closing HTML comment (-->) is not valid JavaScript code in itself, we need to add an additional JavaScript comment (//) in front of it to prevent any potential JavaScript error from being generated.

Night and Day - Page 3
Designing with JavaScript, 2nd Edition
Displaying The Page - Page 5