COM271, Week 10
The Date Object
Syllabus | Table of Pages | Assignments | References and Useful Links
Dates are stored as milliseconds since 1/1/1970 Greenwich Mean Time (GMT). Days of the week are counted beginning with 0 = Sunday, as are Months (January = 0). Dates are created with the Date constructor, which allows for precise creation of year, month, date, hour, minute, seconds and milliseconds . Once created, dates remain static (they don't keep track of time and automatically increment themselves).
Manipulating Dates: Date methods include several ways to read and write. Here are several, based on this script:
Script
<script type="text/javascript:>
var today = new Date();
document.write("The full date is now : "+today+"<br />");
document.write("Year: "+today.getFullYear()+"<br />");
document.write("Month: "+today.getMonth()+"<br />");
document.write("Day of month: "+today.getDate()+"<br />);
document.write("Day of week: "+today.getDay()+"<br />");
document.write("Hours: "+today.getHours()+"<br />");
document.write("Minutes: "+today.getMinutes()+"<br />");
document.write("Seconds: "+today.getSeconds()+"<br />");
document.write("Milliseconds: "+today.getgetMilliseconds()+"<br /><hr width="50%" />");
document.write("Time: "+today.getTime()+"<br />");
document.write("Time Zone Offset: "+today.getTimezoneOffset()+"<br />");
</script>
Results
"JavaScript Date Object," W3Schools
Note that the values returned depend on the local computer's internal clock. If that is set improperly, the date information will be wrong. Note also that the values may not be what you think they should be. The month, for example, will be reported by the right name when retrieved from the Date() function, but will have a value of 0-11 from the Date.getMonth() method. The following definitions may clarify these differences.
Date Object Methods (partial)
http://www.w3schools.com/jsref/jsref_obj_date.asp
| Method | Description |
|---|---|
| getDate() | Returns the day of the month (from 1-31) |
| getDay() | Returns the day of the week (from 0-6, 0 = Sunday) |
| getFullYear() | Returns the year (four digits) |
| getHours() | Returns the hour (from 0-23) |
| getMilliseconds() | Returns the milliseconds (from 0-999) |
| getMinutes() | Returns the minutes (from 0-59) |
| getMonth() | Returns the month (from 0-11) |
| getSeconds() | Returns the seconds (from 0-59) |
| getTime() | Returns the number of milliseconds since midnight Jan 1, 1970 |
| getTimezoneOffset() | Returns the time difference between GMT and local time, in minutes |
From W3Schools, here is an example of using Date() to get clock-time and to the day of the week
(The Scroll clock is from the W3Schools page as well, but you're on your own for that one):
Standard Scroll Clock
kurt.grigg@virgin.net
W3Schools.
Script included in <head> tag:
(triggered by <body onload="startTime()">)
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i){
if (i<10) i="0" + i;
return i;}
</script>
HTML & Script embedded in <body> (i.e., in this div)
<div id="txt"></div><script type="text/javascript">
var d=new Date();
var weekday=new Array('Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday');
document.write(weekday[d.getDay()]);
</script>
Comment
Notice the call t=setTimeout('startTime()',500);
The setTimeout() function is a javascript timer, which calls a function after a specified number of milliseconds (1000 milliseconds = 1 second). Here, the call to setTimeout calls the checkTime() function after half a second, setting up an infinite loop. The script will call and report time forever, which is what a good clock should do! (more on JavaScript Timing Events from W3Schools)