- Learning Web Scripting Basics
- How JavaScript Fits into a Web Page
- Exploring JavaScript's Capabilities
- Displaying Time with JavaScript
- Testing the Script
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Displaying Time with JavaScript
One common use of JavaScript is to display dates and times in the browser, and that’s where we’ll start putting some scripting pieces together. Because JavaScript runs on the browser, the times it displays will be in the user’s current time zone. However, you can also use JavaScript to calculate “universal” (UTC) time.
Your script, like most JavaScript programs, begins with the HTML <script> tag. As you learned earlier in this chapter, you use the <script> and </script> tags to enclose a script within the HTML document.
To begin creating the script, open your favorite text editor and type the beginning and ending <script> tags as shown:
<scripttype="text/javascript"></script>
In this script, you’ll use JavaScript to determine the local and UTC times and then display them in the browser. Fortunately, all the hard parts, such as converting between date formats, are built in to the JavaScript interpreter—this is one of the reasons that displaying dates and times is a good starting place for beginners.
Storing Data in Variables
To begin the script, you will use a variable to store the current date. You will learn more about variables in Chapter 16, “Using JavaScript Variables, Strings, and Arrays,” but for now just understand that a variable is a container that can hold a value—a number, some text, or, in this case, a date.
To start writing the script, add the following line after the first <script> tag. Be sure to use the same combination of capital and lowercase letters in your version because JavaScript commands and variable names are case sensitive.
now = new Date();
This statement creates a variable called now and stores the current date and time in it. This statement and the others you will use in this script use JavaScript’s built-in Date object, which enables you to conveniently handle dates and times. You’ll learn more about working with dates in Chapter 17, “Using JavaScript Functions and Objects.”
Calculating the Results
Internally, JavaScript stores dates as the number of milliseconds since January 1, 1970. Fortunately, JavaScript includes a number of functions to convert dates and times in various ways, so you don’t have to figure out how to convert milliseconds to day, date, and time.
To continue your script, add the following two statements before the final </script> tag:
localtime = now.toString(); utctime = now.toGMTString();
These statements create two new variables: localtime, containing the current time and date in a nice readable format, and utctime, containing the UTC equivalent.
Creating Output
You now have two variables—localtime and utctime—which contain the results we want from our script. Of course, these variables don’t do us much good unless we can see them. JavaScript includes several ways to display information, and one of the simplest is the document.write statement.
The document.write statement displays a text string, a number, or anything else you throw at it. Because your JavaScript program will be used within a web page, the output will be displayed as part of the page. To display the result, add these statements before the final </script> tag:
document.write("<p><strong>Local time:</strong> " + localtime +
"</p>");
document.write("<p><strong>UTC time:</strong> " + utctime +
"</p>");
These statements tell the browser to add some text to the web page containing your script. The output will include some brief strings introducing the results, and the contents of the localtime and utctime variables.
Notice the HTML elements, such as <p> and <strong>, within the quotation marks—because JavaScript’s output appears within a web page, it needs to be formatted using HTML.
Adding the Script to a Web Page
You should now have a complete script that calculates a result and displays it. Your listing should match Listing 4.3.
LISTING 4.3 The Complete Date and Time Script
<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>");</script>
To use your script, you’ll need to add it to an HTML document. If you use the general template you’ve seen in the chapters so far, you should end up with something like Listing 4.4.
LISTING 4.4 The Date and Time Script in an HTML Document
<!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>");</script></body></html>
Now that you have a complete HTML document, save it with an .html extension.