10/11/2009 Learning JavaScript - Date Object and …

S to p Mis s ing Ca lls W hile Y o u' re Online !

Get the details on the CallWave Internet Ansering Machine
FRE E 3 0 -d a y Tria l in US

Date Object and Array Object

(Lesson 8)

I think that you will find this lesson and the next to be a lot of fun. This lesson
introduces you to two stand alone objects, the Date Object and the Array
Object. You will learn how to extract a date and time from the Date object. The
next lesson will continue our discussion of the Date object and will show you
how to make several different clocks.

The Date Object

The Date object is a very powerful stand alone object that you will use often.
You will benefit if you take some time and understand just how to

create a Date object,

change the information stored in the object
extract information from the object in a format you want

Use the following syntax to create a Date object

var ObjectName = new Date(parameters)

where ObjectName is the name of the object

new is the object construction keyword
paremeters are optional and can
define a specific date
The Date object you create is a s na p s ho t o f a n e xa c t millis e c o nd in time .
It contains information on both d a te and time . It is important to understand that
once the Date object is created, the date and time that it contains does not
change unless acted on by one of its many methods.

If the parameters are left out when you create a Date object as shown below, the
object then contains the date and time that your computer clock is at.

var today = new Date()

You can also create a Date object for a specific date and time. You will want to
do this to be able determine specific information on a particular date such as
what day of the week it falls on and to allow you to do date math such as
calculating the number of days between two dates. The 5 ways to create a Date
object for a specific date and time are shown below:

new Date("Month dd, yyyy hh:mm:ss")

new Date("Month dd, yyyy")
new Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)

Here is a example of creating a Date object for each of the 5 ways:

javascriptmall.com/learn/lesson8.htm 1/5
10/11/2009 Learning JavaScript - Date Object and …
var myDateTime = new Date("May 1, 1999 12:00:00")
var myDateTime = new Date("May 1, 1999")
var myDateTime = new Date(99,04,01,12,00,00)
var myDateTime = new Date(99,04,01)
var myDateTime = new Date(100)

In each of the first 4 examples the date May 1, 1999 gets stored in the object
when it is created. A time, 12 noon, is also stored in the first and third examples.
Notice that I used the number 04 in the third and fourth example for the month. In
JavaScript, counting for the months starts with 0. Therefore the first month,
January, is 0 and May is 4.

The last example probably looks a little strange to you. It is imp o rta nt to
re a lize tha t a ll time in J a v a S c rip t is re fe re nc e d to mid nig ht, J a nua ry
1, 1970, Gre e nwic h Me a n T ime . As stated before, this elapsed time is
measured in milliseconds. Therefore this example sets the time to 100
milliseconds past midnight GMT, January 1, 1970.

Lab Time - Lab -

Try creating a Date object in the lab using each of the methods shown above.
Remember you can use the document.write() method to display your results.
Try the last one with the number 0. This should yield the date and time that the
count for the Date object was started. You might be surprised that the answer is
not the expected January 1, 1970 at 12 am. Why is yours different? Give up?
Here's the answer.

The Date object does not have any properties but it has 21 methods, listed in
the following table. I have grouped them according to how they are used. Use
the first 8 methods to extract specific date and time information from the object.
The next 8 methods allow you to change specific information in the Date object.
The last 5 methods are rather specialized.

Date Object Methods

Method Description

getYear() Year minus 1900

getMonth() Month of Year (Jan = 0)
getDate() Date within the month
getDay() Day of week (sun = 0)
getHours() Hour of 24-hr day
getMinutes() Minutes of hour
getSeconds() Seconds within minute
getTime() Milliseconds since 1/1/70

setYear() Year minus 1900

setMonth() Month of Year (Jan = 0)
setDate() Date within the month
setDay() Day of week (sun = 0)
setHours() Hour of 24-hr day
setMinutes() Minutes of hour
setSeconds() Seconds within minute
setTime() Milliseconds since 1/1/70

javascriptmall.com/learn/lesson8.htm 2/5
10/11/2009 Learning JavaScript - Date Object and …
getTimezoneOffset() Minutes offset from GMT
toGMTString() String in universal format
getLocalString() String in system's format
parse("string") String to milliseconds
UTC(value) Date from GMT

Lab Time - Lab -

I recommend that you go back to the lab and try some of the above methods so
that you will understand them better. I will start you out. Type the following in the
proper place in between the script tags in the BODY section.

var myDateTime = new Date()

document.write(myDateTime.getMonth())

Remember that this one will display a number representing the month of the
year starting with January being 0 (The next section on Arrays will show you how
to change this into something a little more user friendly). Also, note that the
getDay() method returns a number to represent the day of the week and it starts
with Sunday being 0. The method getDate() will display the number of
milliseconds that have elapsed since the magic date of January 1, 1970.
Realize how big number this can be. For instance a day has 60 x 60 x 24 x 1000
= 86,400,000 milliseconds in it. When you get to this one press the Test button
several times to see how rapidly this number changes.

You will need a little different setup to test the second set of methods. This is
one that should work.

var myDateTime = new Date()

document.write("Todays date is " + myDateTime)
myDateTime.setMonth(5)
document.write("The new date is " + myDateTime)

The Array Object

Take another look at the "Date Object Methods" table above. What if I wanted
to store a ll this data in a variable so that I can easily recall it. How would I do it?
The answer is to use an Array. The Array is ideal for storing the type of data that
is contained in a table. In programming, an array is defined as an ordered
collection of data.

Suppose I wanted to store the days of a week in an Array. It could not be easier.
All I have to do is make a new Array and populate its elements at the same
time. Here's how to do it.

daysOfWeek = new Array("Sunday", "Monday",

"Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday")

Getting the data out of the array is just as easy. You refer to a particular element
of data like this

javascriptmall.com/learn/lesson8.htm 3/5
10/11/2009 Learning JavaScript - Date Object and …
daysOfWeek[n]

where n = the numeric position of

the data element starting at 0

For instance d a y s OfW e e k [ 3] would yield W e d ne s d a y .

You can declare an Array object and add the elements later if you want like this.

daysofWeek = new Array()

daysofWeek[0] = "Sunday"
daysofWeek[1] = "Monday"
daysofWeek[2] = "Tuesday"
and etc.

The value of the elements can be of any type. The values of the different
elements of the same Array can be of different types too.

The Array object has two properties, length and prototype. The length property
tells you how many elements the Array contains. For instance in our example
the value of daysofWeek.length would be 7 assuming that we finished the
Array by putting all of the days in it. The prototype property is a little complex
and will not be covered here.

The array object has 9 methods: concat, join, pop, push, shift, unshift, reverse,
slice, and sort. The sort method does what it's name implies and sorts the array.
The reverse is a reverse sort. These methods are more complex than I have
implied here but will work as advertised on the simple arrays we are dealing
with here. The remaining 7 methods of the Array object are beyond the scope of
this class.

Assignment
Note: See Appendix 4 to learn how to make your date scripts Y2K compatible.

1. Write a simple script using the Date object to get today's date and then
using an array to display the day of the week as a friendly string. The
results should be something like "Today is Saturday".
Solution Source

2. Write a script that will display today's date in the format "mm/dd/yy",
example 3/4/99.
Solution Source

3. Write a script that will display today's date in the format

month string , DD, YYYY. example March 4, 1999.
Solution Source

4. Write a script that will display the current time. Don't worry if the format
doesn't look just right. We will learn how to improve on this in the next
lesson. example 9:3:31 (The format on the minutes should be 03, we will
learn how fix this.).
Solution Source

javascriptmall.com/learn/lesson8.htm 4/5
10/11/2009 Learning JavaScript - Date Object and …
Jo in t h e Co mmissio n Ju n ct io n Ne t w o rk
B E S T Re v e n u e S h a rin g Ne t w o rk I h a v e f o u n d !
Earn money on your Site, over 1000 merchant programs.

[ Top of Page | Contents ]

© 1999 - 2004 by Ray Stott - All Rights Reserved.

javascriptmall.com/learn/lesson8.htm 5/5