The Web Wizard`s Guide To JavaScript

Transcript The Web Wizard`s Guide To JavaScript

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>

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

The Web Wizard`s Guide To JavaScript

Transcript The Web Wizard`s Guide To JavaScript

Directory