Learning JavaScript | Links | Reference | Scripts | Lessons | Lab |
8. Date Object
and Array Object
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)
WhereObjectName 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.
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 |
|
|
|
|
getFullYear() |
Use in place of getYear() |
|
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 |
|
|
|
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
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
daysOfWeek[n]
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.
Lesson 8
Review
Lesson 8
Assignments
- Write a simple script that uses
the Date object to get today's date and then uses an array to
display the day of the week as a friendly string. The results
should be something like "Today is Saturday".
Sample output- Write a script that will display today's date in the format "mm/dd/yy", example 3/4/99.
Sample Output- Write a script that will display today's date in the format
month string, DD, YYYY. example March 4, 1999.
Sample output- 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.).
Sample Output - Write a script that will display today's date in the format "mm/dd/yy", example 3/4/99.