HTML Goodies: Script Tip: Week 28

Hello, Tipper…

If I could save time in a bottle…

I‘d put it into JavaScript…. We’ll wrap this one up today, so let’s get started.

Here’s the script and result one more time:

The main thrust of this Script Tip will be to discuss the setTimeout() command, but first we do have to quickly look at how the script goes about displaying the time into the text box. If you’ve been following the Script Tips up to this point, this is old hat to you by now. Here’s the code that does it:

var printIt = “Time: ” +nhr+ “:” +nmin+ “:” +nnsec+ “:” +nampm
document.clock.clockface.value = printIt

I set up a variable and gave it the name “printIt.” That variable represents the text string “Time:” and then the altered returns we created up above. The hour return (nhr) is placed first, followed by a semicolon, then the minutes return (nmin) followed by a semicolon, then the seconds return (nnsec) followed by a
semicolon, and finally the return of “AM” or “PM” depending on the hour. The format gives us the familiar TIME:##:##:##:PM format we’ve all come to know and love.

The next line of code takes the variable “printIt” and sticks it in the text box. The hierarchy statement starts with “document” because that’s where the clock will sit. Remember that the name of the form is “clock,” the name of the text box is “clockface,” and finally the value is what goes in the text box. In this case it’s the value of “printIt.”

Make sense? Good. Now on to something new:

var KeepItGoing=setTimeout(“RunningTime()”,”1000″)

This is a wonderful thing to have in your hip pocket. setTimeout() is a command that basically makes the script wait a specified amount of time. In the case of this script, the setTimeout() is making the script wait one second before looping though the script again. Here’s the concept:

• I always set up my setTimeout() statements as variables. Why? That’s the way I learned it. That’s the way I’ve always done it. In reality you don’t need the var varname =. I’ve just always used it and it helps me keep it all straight in my gray matter.
  
• The command setTimeout() is used to alert the browser that the script is to wait a set amount of time, then run a function.
  
• The stuff inside the parentheses are “parameters” that the setTimeout is to work upon. The format is to first list the function name that will run. It is always the function name that the setTimeout() is sitting within. Note the format of surrounding the function name in quotes and keeping the parentheses after the function name.
  
• There is a comma separating the two items in the setTimeout parentheses. That’s important.
  
• Next is the amount of time the script should wait before running the script again. In this case I have it set to run every second. Remember that JavaScript counts in milliseconds, so “1000” is equal to one second.
  

The entire line sits last in the function. So the concept is: The functions runs, waits a second, runs again, waits a second, runs again… etc.

Each time the script runs, at least the second is updated. The effect to the viewer is that the clock is running smoothly, when in reality it’s a single script running again and again every second. It’s a great effect.

Once again, let me point out that the way I have displayed the script is not really the best method. This is a clock and really should fire without any input from the viewer. I would suggest that you trigger the function to start running by using an onLoad command in the HTML document’s BODY flag. It looks much
better than what I have running here.

Enjoy it! We start a new one next week.

Next Week: New Script! A Year 2000 Countdown (by request…)