Embed Size (px)
Citation preview
The Web Wizard’s Guide To JavaScript
Chapter 6
Working with Dates and Times
Chapter Objectives
• To understand JavaScript’s Date object• To learn how to add a clock to a Web page• To find out how to display the time and date in any
format you like• To see how to add a greeting to a Web page that
changes with the time of day• To learn how to add a time-sensitive greeting to
your Web page clock• To discover how to perform calculations based on
dates
The Date Object
• JavaScript contains a set of core objects, including the Date object, that exist independently of any host environment such as a Web browser.
• To use the Date object, you first create an instance of it and then apply a method to obtain date and time information.
• Var currentDate = new Date();
Methods for the Date Object
• getDate()• getDay()• getFullYear()• getHours()• getMilliseconds()• getMinutes()
• getMonth()• getSeconds()• getTime()• getYear()• toLocaleString()
Creating a simple clock• <html><head><title>Basic Clock</title>• <script type="text/javascript" language="JavaScript">• <!--• function showTime(){• /* Callout: A new Date() object is created and stored in a variable. */• var now = new Date();• /* Callout: the toLocaleString() method of the Date object converts the date to a text format used in the visitor's
location. */• document.clock.face.value = now.toLocaleString();• }• //-->• </script>• </head>• <!-- Callout: The setInterval() method causes the clock to be updated every second.-->• <body bgcolor="white" onload="setInterval('showTime()',1000);">• <div align="CENTER">• <h1>A Very Basic JavaScript Clock</h1>
• <form name="clock"><input name="face" size="50"></form>• </div>• </body>• </html>
Creating a Better Clock
• To create customized presentations of the time, you obtain the current hour, minute, and seconds using methods of the Date object.
• These values can be stored as variables and then concatenated (joined together) to create a string of text to express the time.
Creating Dynamic Greetings
• It is possible to vary the information displayed on your Web page according to the time or date.
• If code exists in the HEAD to test for the time of day, you can create variable content in the BODY using the document.write() method.
Text Fields vs. document.write()
• Use document.write() for content that will not change during the visitor’s session.
• Use text fields for content that requires updating during the visitor’s session, such as time of day.
Date Mathematics
• JavaScript’s Math object is a built-in calculator.
• To perform math operations on information obtained from text fields, you first convert the values to numbers using the parseInt() or parseFloat() function.
• Date mathematics allows you to create countdown pages to important events.
Differences in the two objects
• Date Object – an instance is created of it by creation in code
• var currentDate = new Date();
• Math object – Static, which means that we never creates an instance of the object
• Math.abs (x), Math.floor(x), Math.max(x,y)
• Math.min(x,y), Math.random()
