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.
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, you 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 a Large Clock Display
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Displaying Times and Dates</title>
</head>
<body>
<h1>Current Date and Time</h1>
<script>
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, you can modify the statement you added in the preceding section. In this example, we 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 select Tools, Web Developer, Web Console. The console displays the error message you created in this example, as shown in Figure 4.4.- In Chrome, from the options menu (three horizontal dots on the right side of the browser bar) select More Tools, Developer Tools. A console displays in the bottom of the browser window. Choose the console tab if it’s not selected.
)
Figure 4.4 Showing an error in the JavaScript console in Firefox.
The error you get in this case, SyntaxError: missing ) after argument list , points to line 22. In this case, clicking the name of the document takes you directly to the highlighted line containing the error, as shown in Figure 4.5.
)
Figure 4.5 Firefox 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 lesson.