Javascript Lesson 6
Foreword
In this lesson you will learn how to extract a date and time from the Date Object and how to work with arrays.
6.1 The Date Object
The Date object is stand alone object that is often used in JavaScript. It is important that you take some time and understand everything this lesson includes.
The following syntax is used to create a Date object:
var ObjectName = new Date(parameters)
ObjectName is the name you would like to give the object, new is the object construction keyword and 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 do not change.
If the parameters are left out when you create a Date Object, it contains the date and time that your computer clock is at.
The code to do so, will look like this:
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 to determine specific information on a particular date such as what day of the week it falls on and to allow you to do calculations with dates such as getting the number of days between two dates.
These are 5 ways to create a Date Object for a specific date and time:
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 are examples of creating a Date Object for each of the 5 ways:
var myDate = new Date("April 19, 2006 18:44:20")
var myDate = new Date("April 19, 2006")
var myDate = new Date(06,03,19,18,44,20)
var myDate = new Date(06,03,19)
var myDate = new Date(50000)
In the first 4 examples, the date April 19, 2006 gets stored in the object when it is created. A time, 6 pm 44 minutes 20 seconds, is also stored in the first and third example. You should notice that the number 03 is used 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 April is 3.
In the last example, 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 50000 milliseconds (or 50 seconds) past midnight GMT, January 1, 1970.
Here is a full example of how the Date Object can be used.
<script language="JavaScript"> <!-- var myDate = newDate(50000) document.write(myDate) //--> </script>
This example will display all the information it asked, but it will be very disorderly. Also the time that is displayed is not always 50 seconds past midnight GMT, January 1, 1970. The time displayed shows 50 seconds past your local time at the moment it was midnight in Greenwich.
To make the Date Object usefull, you will have to use one of it's 21 methods, displayed beneath. The first 8 methods are used 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.
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 (January = 0)
setDate()
Date within the month
setDay()
Day of week (sunday = 0)
setHours()
Hour of 24-hr day
setMinutes()
Minutes of hour
setSeconds()
Seconds within minute
setTime()
Milliseconds since 01/01/1970
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
Here is an example using these methods:
<script language="JavaScript"> <!-- var myDate = new Date() document.write(myDate.getYear() + " ") document.write(myDate.getMonth() + " ") document.write(myDate.getDate() + " ") document.write(myDate.getDay() + " ") document.write(myDate.getHours() + " ") //--> </script>
Remember that the getMonth() method will display a number representing the month of the year starting with January being 0 (The next part 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.
For the second set of methods, you will need a little different code:
<script language="JavaScript">
<!--
var myDate = new Date()
document.write("Todays date is " + myDate)
myDate.setMonth(9)
myDate.setDate(29)
myDate.setHours(16)
document.write("The new date is " + myDate)
//-->
</script>
6.2 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. The way to do this 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 you wanted to store the days of a week in an Array. All you 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")
To get the data out of the array you have to refer to a particular element of data like this:
daysOfWeek[n]
n = the numeric position of the data element starting at 0
For instance daysOfWeek[5] would return Friday.
You can also declare an Array object and add the elements later like this:
daysOfWeek = new Array()
daysOfWeek[0] = "Sunday"
daysOfWeek[1] = "Monday"
daysOfWeek[2] = "Tuesday"
daysOfWeek[3] = "Wednesday"
daysOfWeek[4] = "Thursday"
daysOfWeek[5] = "Friday"
daysOfWeek[6] = "Saturday"
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 the previous example, the value of daysOfWeek.length would be 7. The prototype property will not be covered here.
The array object has 9 methods: concat, join, pop, push, shift, unshift, reverse, slice, and sort. The sort method sorts the array and the reverse method is a reverse sort. The remaining methods are beyond the scope of this chapter.
6.3 Exercices
- Try to make script that displays today's date in the dd/mm/yy format.
- Make a script that displays today's full date. For example: April 19, 2006. (Use an array to display the month)