var thetime=new Date();
As you can see, we are not assigning the new variable a direct value. Instead, the code above defines the variable as a new instance of the date object. This means we can use this variable in order to access the method functions of the date object. What are the method functions? Well, here a list of some of them:
|Method Function||What the Function Does|
|getHours()||Returns the current number of hours into the day: (0-23)|
|getMinutes()||Returns the current number of minutes into the hour: (0-59)|
|getSeconds()||Returns the current number of seconds into the minute: (0-59)|
|getDay()||Returns the number of days into the week: (0-6)|
|getMonth()||Returns the number of months into the year: (0-11)|
|getYear()||Returns the number of years into the century: (0-99)|
These are not all of the method functions, but they are enough to create a decent clock. Our example clock for this tutorial will only use the first three, but the rest my be useful to you to customize your clock.
Now, suppose we want to get the number of hours into the day. We could do this by defining a variable and giving it the value of the getHours() method function. However, the following line will give you an error:
Why? Well, remember that the getHours() function is a method function of the date object. In order to get that value for our variable, we have to use our instance of the date object we created earlier:
var thetime=new Date();
This is part of object-oriented programming. Once we have created an object, we are able to access its member functions with what is called "the dot operator". By placing the dot between our object name (thetime) and its member function, we are able to execute the member function. In this case, the function simply returns a value (the number of hours into the day). We are using this value as the value of our new variable, nhours.
We have used the dot operator in the past, when we used the document.write() function. The write() function is a member function of the document object, and the function writes text to the screen.
An advantage of using objects is that objects can hold multiple values, where variables can only keep one value at a time. An object can also use any member functions it may have, like we did above. So, our date object named thetime can use all of the member functions. Now we can start getting the rest of the values for our clock. Let's get the hours, minutes, and seconds:
var thetime=new Date();
See how we were able to use our object named thetime to grab three different values? It's almost fun, then again...yes, a bit more complicated than having a pre-defined object to use.
With these values and a bit of extra coding, we can create a clock like the one below:
Not bad, but now we must get into the extra coding we need to get the clock running smoothly. Remember, thetime.getHours() returns the number of hours into the day. This value is a number between 0 and 23. What can we do if we do not want a 24 hour clock, if we don't want 11:24 P.M. to be 23:24? To get around that, we need some code that will change any number over 12 back to 1,2,3,4, and so on. We can do this by subtracting 12 from our variable nhours when it has a value greater than 12:
if (nhours>=13) nhours-=12;
is shorthand for:
Also, if the hour is 0, we know that is 12 A.M., so we need to make the zero into a 12. if (nhours==0) nhours=12;
Now, when the number of hours is 14, the script changes it to 14-12=2. Just what we needed.
We don't have the same problem for the minutes and seconds, but they present a problem of their own. Suppose the number of minutes into the hour is 32. This value is fine, the script will display a 32. However, what if the value is 2? The script would display something like this:
What? Yes, we need a way to get a zero in there so the clock is readable. We want it to say 11:02. So now we need something to add in a zero before the 2 if the number of minutes (nmins) is less than 10. Let's try this:
This code will add in the character 0 in front of the 2 if the number of minutes is less than ten. Another little problem out of the way, but we will also need to do this for the seconds:
Had enough? Me too, but this clock still has another value we need to get. The clock displays A.M. or P.M. for morning and evening hours. This isn't to terrible. We can define another variable, let's call it AorP. We need the value to be "P.M." if the hour is greater than 12, and "A.M." otherwise. Here we go:
One problem though. You need to place this section of code before our code that changes the clock to a twelve hour system. Otherwise, the hours will never get past 12, and it will always read A.M. Why? This is because when we change the clock to the twelve hour system, we change the value of nhours so that it is 0-12 in all cases. So, we must get our AorP value before we change the time system.
Now, I'll give you the code for the script:
You may have noticed we are accessing a form value and changing it in this line:
So, you now know we need a form in the body of the document. Here is the one that goes with the script:
<FORM name="clockform"> Current Time: <INPUT TYPE="text" name="clockspot" size="15"> </FORM>
Also, you can see that we use the setTimeout() function to run our startclock() function again after one second. In this way, the clock will refresh every second so that you get a constantly running clock with the seconds ticking away.
Of course, how do we get the thing started to begin with? The browser won't just run the startclock() function on its own. It needs some kind of event to happen. Well, how about when the page loads? Excellent choice, let's use the onLoad event. The onLoad command is used as an attribute in the body tag, much like defining a text color:
I'm not sure I could handle that text color for long, but now we can see how the onLoad command will be put to work:
Now, you can go make use of this clock if you need one. Otherwise, you have gotten a rather unorthodox introduction to objects and object-oriented programming. Well, maybe I'll add a more orthodox tutorial on the subject sometime, if I can stop saying the word orthodox. You know, I think the last half of this paragraph has been extremely unorthodox. Oops, I think I had better get going now..
Well, that does it for now, lets go to the next section:
JS Clock 2.
||By: John Pollock||