The Web Wizards Guide To JavaScript

1
The Web Wizards Guide To JavaScript

• Chapter 6
• Working with Dates and Times

2
Chapter Objectives

• To understand JavaScripts 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

3
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()

4
Methods for the Date Object

• getDate()
• getDay()
• getFullYear()
• getHours()
• getMilliseconds()
• getMinutes()

• getMonth()
• getSeconds()
• getTime()
• getYear()
• toLocaleString()

5
Creating a simple clock

• lthtmlgtltheadgtlttitlegtBasic Clocklt/titlegt
• ltscript type"text/javascript" language"JavaScrip
  t"gt
• lt!--
• 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()
• //--gt
• lt/scriptgt
• lt/headgt
• lt!-- Callout The setInterval() method causes the
  clock to be updated every second.--gt
• ltbody bgcolor"white" onload"setInterval('showTim
  e()',1000)"gt
• ltdiv align"CENTER"gt
• lth1gtA Very Basic JavaScript Clocklt/h1gt
• ltform name"clock"gtltinput name"face"
  size"50"gtlt/formgt
• lt/divgt

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

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

8
Text Fields vs. document.write()

• Use document.write() for content that will not
  change during the visitors session.
• Use text fields for content that requires
  updating during the visitors session, such as
  time of day.

9
Date Mathematics

• JavaScripts 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.

10
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()