LESSON 08 The Date Class
CLASS VS OBJECT
A class
is a set of rules that defines how objects are created. We can have many objects of one class. A real-world example for a class is Human
with every person being an example of a Human object.
THE DATE CLASS
The Date
class is a built-in class that allows us to create Date objects. These objects contain a date and time.
We can
create a Date object that contains the current date and time. We can also create a Date object for a
different time.
THE PRESENT DATE AND TIME
We can
create a Date object containing the present date and time by using:
var d = new Date();
DISPLAYING A DATE OBJECT ON SCREEN
We can
simply display the Date object d like we do normal variables.
document.write(d);
EXAMPLE 1 DISPLAYING DATE
The following
script will display the date and time that the page is loaded at.
<html>
<body>
The current date is:
<script type="text/javascript">
var d = new Date();
document.write(d);
</script>
</body>
</html>
Click here to see this in action.
A DIFFERENT DATE/TIME
There
are a few ways to creating a Date object that refers to another date or
time. While this is not normally that
useful, we will look at a few example statements.
var d1 =
new Date(); //creates
current date/time
var d2 =
new Date("July 1, 2009"); //creates
a Date object with the date of July 1st, 2009
var d3 =
new Date(2009, 5, 1); //creates
a Date object with July 1st, 2009... Note that the month number is off by one... January is 0, July is 5, December is 11.
var d4 = new Date(2009, 5, 1, 13,
35, 59); //creates a Date
object for July 1st 2009 with time 1:35pm and 59 seconds.
var dw = "July 1, 2009";
var d5 = new Date(dw); //creating a date based on a
string variable that contains the date
GETTING MORE SPECIFIC DETAILS
We can
get specific details from a Date object.
For example, we can get specifically the hour or the month stored in the
date. The following examples show you
how to do this.
GETTING THE YEAR
var d =
new Date();
var y =
d.getFullYear(); //y
will get a 4-digit year from the Date object example: 2009
GETTING THE MONTH
var d =
new Date();
var m =
d.getMonth(); //m
will get a number representing the month example: 3 (representing the month
April)
NOTE
The
number for the months is off by one.
The number 0 represents January.
The number 1 represent February.
The number 11 represents December.
GETTING THE DAY OF THE WEEK
var d =
new Date();
var dow
= d.getDay(); //dow
will get a the day of the week as a number example: 0 (representing Sunday)
NOTE
For day
of the week, 0 represents Sunday, 1 represents Monday, ... , 6 represents Saturday.
GETTING THE HOURS & MINUTES
var d =
new Date();
var h =
d.getHours(); //h will get a
number between 0 and 23 representing the hours of the day example: 12
(representing noon)
var m =
d.getMinutes(); //m will get a
number between 0 and 59 representing the number of minutes past the hour
example: 34
GETTING THE SECONDS AND MILLISECONDS
var d =
new Date();
var s =
d.getSeconds(); //s will get the
number of seconds past the minute (0 - 59) example: 56
var ms =
d.getMilliseconds(); //ms will
get the number of milliseconds past the second (0 999) example: 943
NO UPDATE
The date
object doesnt update itself. It stores
the date and time of when the object is created.
EXAMPLE 2 WEEK DAY OR WEEKEND?
The
following program will display a message if it is a weekend day. Otherwise, it will display a different
message.
<html>
<body>
<script type="text/javascript">
var d = new Date();
var dow = d.getDay();
if (dow == 0 || dow == 6) //if
Sunday or Saturday
{
document.write("I hope you are having a good weekend.");
}
else
{
document.write("I hope you are having a good week.");
}
</script>
</body>
</html>
Click here to see this script in action.
EXAMPLE 3 TIMING
The
following program stores the date when button 1 is clicked and again when
button 2 is clicked. The dates are
displayed in text fields. The third
button then compares the difference in seconds between the two dates.
<html>
<head>
<script type="text/javascript">
var d1; //declared
above the functions so that they work inside any of the functions
var d2;
function setTime1()
{
d1=new Date();
f.tf1.value = d1;
}
function setTime2()
{
d2=new Date();
f.tf2.value = d2;
}
function compare()
{
var s1 =
d1.getSeconds();
var s2 =
d2.getSeconds();
f.tf3.value = s2
- s1;
}
</script>
<body>
<form name="f">
<input type="button" value="Time 1"
onClick="setTime1();"> <input type="text"
name="tf1" size="40"><br>
<input type="button" value="Time 2"
onClick="setTime2();"> <input type="text"
name="tf2" size="40"><br>
<input type="button" value="Compare"
onClick="compare();"> <input type="text"
name="tf3" size="5"> seconds<br>
</form>
</body>
</html>
Click here to see this script in action.
NOTE ERRORS?
The
program above has an error. The seconds
comparision gives a negative value at times.
Can you figure out why? Try the
program out a few times.
Also, what happens if you wait exactly one minute between clicks?
NOTE 2 GLOBAL VARIABLES
Variables
that are created inside a function are local to that function. If we want to share a variable in different
functions, we need to declare it above the first function. Such a variable is called a global variable.
EXAMPLE 4 TIMING (FULLY FUNCTIONAL)
This
code is the same as the code in Example 3 except for the compare()
function. Instead of comparing only the
seconds, we will also compare the minutes and hours. Again though, if the day changes between the two clicks, we would
have problems.
function compare()
{
var difs =
d2.getSeconds() - d1.getSeconds();
var difm =
d2.getMinutes() - d1.getMinutes();
var difh =
d2.getHours() - d1.getHours();
f.tf3.value =
difh * 3600 + difm * 60 + difs; //3600
seconds in one hour, 60 seconds in one minute
}
Click here to see this code in action.