InformIT: Sams Teach Yourself JavaScript in 24 Hours

Testing the Script

To test your script, you simply need to load the HTML document you created in a Web browser. Start Netscape or Internet Explorer and select Open from the File menu. Click the Choose File or Browse button, and then find your HTML file. Once you've selected it, click the Open button to view the page.

If you typed the script correctly, your browser should display the result of the script, as shown in Figure 2.1. (Of course, your result won't be the same as mine, but it should be the same as the setting of your computer's clock.)

Figure 2.1 Netscape displays the results of the Date and Time script.

Modifying the Script

While the current script does indeed display the current date and time, its display isn't nearly as attractive as the clock on your wall or desk. To remedy that, you can use some additional JavaScript features and a bit of HTML to display a large clock.

To display a large clock, we need the hours, minutes, and seconds in separate variables. Once again, JavaScript has built-in functions to do most of the work:

hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();

These statements load the hours, mins, and secs variables with the components of the time using JavaScript's built-in date functions.

Once the hours, minutes, and seconds are in separate variables, you can create document.write statements to display them:

document.write("<font size='+5'>");
document.write(hours + ":" + mins + ":" + secs);
document.write("</font>");

The first statement displays an HTML <font> tag to display the clock in a large typeface. The second statement displays the hours, mins, and secs variables, separated by colons, and the third adds the closing </font> tag.

You can add the statements above to the original date and time script to add the large clock display. Listing 2.3 shows the complete modified version of the script.

Example 2.3. The Date and Time script with large clock display

<html>
<head><title>Displaying Times and Dates</title></head>
<body>
<h1>Current Date and Time</h1>
<p>
<script language="JavaScript">
now = new Date();
localtime = now.toString();
utctime = now.toGMTString();
document.write("<b>Local time:</b> " + localtime + "<BR>");
document.write("<b>UTC time:</b> " + utctime);
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
document.write("<font size='+5'>");
document.write(hours + ":" + mins + ":" + secs);
document.write("</font>");
</script>
</p>
</body>
</html>

Now that you have modified the script, save the HTML file and open the modified file in your browser. If you left the browser running, you can simply use the Reload button to load the new version of the script. Try it and verify that the same time is displayed in both the upper portion of the window and the new large clock. Figure 2.2 shows the results.

Figure 2.2 Internet Explorer displays the modified Date and Time script.

Dealing with JavaScript Errors

As you develop more complex JavaScript applications, you're going to run into errors from time to time. JavaScript errors are usually caused by mistyped JavaScript statements.

To see an example of a JavaScript error message, modify the statement you added in the previous section. We'll use a common error: omitting one of the parentheses. Change the last document.write statement to read:

document.write("</font>";

Save your HTML document again and load the document into the browser. Depending on the browser version you're using, one of two things will happen: Either an error message will be displayed, or the script will simply fail to execute.

If an error message is displayed, you're half way to fixing the problem by adding the missing parenthesis. If no error was displayed, you should configure your browser to display error messages so that you can diagnose future problems:

In Netscape Navigator 4.5 or later, type javascript: into the browser's Location field to display the JavaScript console. In Netscape 6, you can also select Tasks, Tools, JavaScript Console from the menu. The console is shown in Figure 2.3, displaying the error message you created in this example.

Figure 2.3 Netscape's JavaScript Console displays an error message.
In Internet Explorer 4.0 or later, select Tools, then Internet Options. On the Advanced page, uncheck the box next to "Disable Script Debugging" and check the box next to "Display a notification about every script error."

The error we get in this case is missing ) after argument list (Netscape) or Expected ')' (Internet Explorer), which turns out to be exactly the problem. Be warned, however, that error messages aren't always this enlightening.

While Internet Explorer displays error dialog boxes for each error, Netscape's JavaScript Console displays a single list of errors and allows you to test commands. For this reason, you may find it useful to install Netscape for debugging and testing JavaScript, even if Internet Explorer is your primary browser.

Workshop: Hiding Scripts from Older Browsers | Next Section

Previous Section