This chapter is from the book
This chapter is from the book
This chapter is from the book
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.)
)
FIGURE 4.2 Using JavaScript to display the date and time.
A note about Internet Explorer: Depending on your security settings, the script might not execute, and your browser might display a security warning. In this case, follow your browser’s instructions to allow your script to run. (This happens because the default security settings allow JavaScript in online documents, but not in local files.)
Modifying the Script
Although 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 situation, 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.
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 </h2> tag.
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
<!DOCTYPE html><htmllang="en"><head><title>Displaying Times and Dates</title></head><body><h1>Current Date and Time</h1><scripttype="text/javascript">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>");</script></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 4.3 shows the results.
)
FIGURE 4.3 Displaying 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 preceding section. We’ll use a common error: omitting one of the parentheses. Change the last document.write statement in Listing 4.5 to read
document.write("</h2>";
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 Firefox, you can also select Tools, JavaScript Console from the menu.
In Chrome, select Tools, JavaScript Console from the Options menu. A console displays in the bottom of the browser window. The console is shown in Figure 4.4, displaying the error message you created in this example.
FIGURE 4.4 Showing an error in the JavaScript console in Chrome.
- 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.
Most modern browsers contain JavaScript debugging tools such as the one you just witnessed. You’ll learn more about this in the next chapter.