Testing the Script
To test your script, you simply need to load the HTML document you created in a web browser. If you typed the script correctly, your browser should display the result of the script, as shown in Figure 4.2. (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.)
Modifying the Script
hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds();
After the hours, minutes, and seconds are in separate variables, you can create document.write statements to display them:
document.write("<p><strong>"); document.write(hours + ":" + mins + ":" + secs); document.write("</p></strong>");
The first statement displays an HTML
<h2> header tag to display the clock as a second-level header element. The second statement displays the hours, mins, and secs variables, separated by colons, and the third adds the closing
You can add the preceding statements to the original date and time script to add the large clock display. Listing 4.5 shows the complete modified version of the script.
LISTING 4.5 The Date and Time Script with Large Clock Display
<title>Displaying Times and Dates
<h1>Current Date and Time
>now = new Date(); localtime = now.toString(); utctime = now.toGMTString(); document.write("<p><strong>Local time:</strong> " + localtime + "</p>"); document.write("<p><strong>UTC time:</strong> " + utctime + "</p>"); hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); document.write("<h2>"); document.write(hours + ":" + mins + ":" + secs); document.write("</h2>");
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 4.3 shows the results.
FIGURE 4.3 Displaying the modified Date and Time script.
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 halfway 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 Internet Explorer, select Tools, Internet Options. On the Advanced page, uncheck the Disable Script Debugging box and check the Display a Notification About Every Script Error box. (If this is disabled, a yellow icon in the status bar still notifies you of errors.)
The error we get in this case is Uncaught SyntaxError and it points to line 25. In this case, clicking on the name of the script takes you directly to the highlighted line containing the error, as shown in Figure 4.5.
FIGURE 4.5 Chrome helpfully points out the offending line.