The Date Object
<font color="#ff0000" size=5>WebTV JS "Bug" - Reload Page (cmd-r)</font>



The date object, as has been shown, contains year, month, day, and time in minutes and seconds. It has also been demonstrated that while the clock is ticking in the browser, the only thing displayed when the Date object is accessed is the date at the moment it was clicked on. In this section various aspects of how to get a running clock will be examined for the insights provided in using some of the programming tools already described, and to gain a further understanding of working with object methods and properties. This will be done in some detail to stress the steps, and tests, done when using JS. Programming involves designating what is desired, in what order, and then using the "rules" of the program language to achieve the desired end. Virtually all statements used here have already been described.

The Date object itself can be used in two ways. Either to get the time at the moment, today or for a time that can be specified, other than today:





The distinction between the two is that today*s time was obtained by accessing the present Date object, while any other time is gained by specifying the values within a new Date object for any other time, e.g,,

today=Date()
then=new Date(year, month, day, hour, minute, second);
then=new Date(1998,   0,       6,      18,       15,        36)


The day specified was a Tuesday in 1998. It must be noted that months in the Date object are stored in arrays, and in JS the first element in an array is numbered 0. So here, in defining the month, January is 0 and not 1, and December is 11 and not 12. Remember, also, that hours are in military time.

So as not to create confusion between times that were and times that are, in accessing times a prefix is added as a reminder that the time that is wanted is present time:

var now=new Date();
yrnow=now.getYear();
monow=now.getMonth();
dynow=now.getDay();
hrnow=now.getHours();
minnow=now.getMinutes();
secnow=now.getSeconds()


Looks like more than it is. The date object is "now", and from this all the time details are being accessed (note the "s" in some). These are the details being obtained as of a click:





It may be recalled that hours are in military time and have to be converted to AM/PM. Similarly, the day of the week returns a number starting with 0 for Sunday for the days of the week. This number may be used in writing the string value for the day of a week. Months also are numbered starting with 0 for January. These observations mean, at this point, that some slight modifications have to be introduced to make the results obtained on getting times and dates more in keeping with what is usual. For the month, this can be done by adding 1, to the month number gotten:

monow=now.getMonth()+1


Days of the week can be stored in a linear array by introducing string variables:

 
var wkday=new Array();
wkday[0]="Sun";wkday[1]="Mon";wkday[2]="Tue";wkday[3]="Wed";
wkday[4]="Thu";wkday[5]="Fri";wkday[6]="Sat";


or, more simply,

var wkday=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")


Just like getting a telephone number from memory, only now the locations are declared by making an Array() statement and the stem name for the array is stated. Following this all elements that appear in the array, with the appropriate index, is denoted. Observe that in JS an index is enclosed in square brackets, [ ], and not parentheses, ( ), which is a usual practice. Now when the number for a day of the week is gotten it is the index for a day of the week and can be used to select which day:

day=wkday[dynow]


To obtain AM/PM time from military name any hours less than and including 12 are AM and any hours greater then 12 must have 12 subtracted for PM. This can be done using "if" statements:

if(hour<=12){ap="AM";}else{hour=hour-12;ap="PM";}


Here the memory location for "hour" may contain a number larger than 12 initially. If so, 12 is subtracted from it and the result is stored in the same memory location. With these modifications, the time at access can be read in a more normal fashion:




To display all that has been obtained from these considerations, concatinate all the string variables introducing spaces or colons for the presentation:

timstr=day+" "+hour+":"+min+":"+sec+" "+ap;
document.write(timstr);


Everything needed for a time-keeper is now in place. Just click and the time is obtained. However, what most want is something that keeps time automatically, non-click time. For this use must be made of a Date-object method, setTimeout. This will enable a constructed function, clock(), to reset itself every second. In the setTimeout, the first argument is where it applys, in this instance the JS clock() function, and the second argument when it applys, in this case every 1000 milliseconds or 1 second. It goes like this:

<script>
function clock()
{ALL DATE & TIME CODES AS BEFORE
strtime=month+" "+day+" "+hour+":"+min+":"+sec+" "+ap;
document.nowtime.telltime.value=strtime;
tout=setTimeout("clock()",1000);}
</script>
<form name= "nowtime">:
<input type="text" name="telltime" size=20>
<input type="button" value="Clock" onClick="clock()">
</form>




Properly all of the JS code for this should be placed in the "head" section of a document and in the "body" tag should be placed the event handler:

<body onLoad="clock()">


A button is used here instead for demonstrating what would occur upon loading.

A great deal of information is presented in this example, but not beyond the JS statements that have already been described. The viewer should experiment with variations other than the ones presented. View source to gain the idea used here. It is not the only way. The time-keeper shown below uses all the script previously described. It only differs in the presentation, which will be described later on.



JS Test-Bed 1 - - JS Test-Bed 2

<< PreviousNext >>