- 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
- Exercises
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 other JavaScript programs, begins with the HTML <script> tag. As you learned earlier in this lesson, 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 here:
<script></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 Lesson 22, “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, making sure to use the same combination of uppercase 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 Lesson 22.
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 days, dates, or times.
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 you want from your script. Of course, these variables don’t do you much good unless you can see them. JavaScript includes several ways to display information, and one of the simplest is by using 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 script should match Listing 4.3.
Listing 4.3 The Complete Date and Time Script
<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>");
</script>
To use your script, you need to add it to an HTML document. If you use the general template you’ve seen in the lessons 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>
<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>");
</script>
</body>
</html>
Now that you have a complete HTML document, save it with an .html extension.