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 snapshot of an exact millisecond in time. It contains information on both date 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:

 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 important to realize that all time in JavaScript is referenced to midnight, January 1, 1970, Greenwich Mean Time. 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     

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

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     

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

 where n = the numeric position of 
           the data element starting at 0

For instance daysOfWeek[3] would yield Wednesday.

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.


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

[ Top of Page  |  Contents ]