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 </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.
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.
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.