Annotated "Clock"

Sequence of Events:

<BODY onLoad="clock()"> AFTER the Document gets "loaded" then call the clock function
Create the Time String
Place the Time String into the FORM's "time" text field
Every second call the clock function and put a new Time String into the FORM's "time" text field

// define the variables we need for the program
var timeStr, dateStr; // how to declare multiple variables on one line
var now, hours, minutes, seconds;

function clock() {
     now = new Date(); // now becomes an instants of the Date Object
     hours = now.getHours(); // the getHours() pulls out the Hours from the new now Object
     minutes = now.getMinutes();   // the getMinutes() pulls out the Minutes from the new now Object
     seconds = now.getSeconds();   // the getSeconds() pulls out the Seconds from the new now Object

     // below we want to create a String,
     // so here we are concatenating an Empty String with a number
     // and we end up with a string.
     timeStr = "" + hours;

     // minutes are shown as :12 or :09 for example, the ternary operator does just that
     // if minutes are < 10 then add :0 before the number of minutes
     // else if the minutes are > 9 then just add : before the number of minutes
     timeStr += ((minutes < 10) ? ":0" : ":") + minutes;
     // if minutes = 9 we end up with ":0" + 9 = ":09"
     // if minutes = 12 we end up with ":" + 12 = ":12"
     timeStr += ((seconds < 10) ? ":0" : ":") + seconds;

     // once we have created the time string then place that value into
     // the FORM's (called clock) "time" field
     document.clock.time.value = timeStr;

etc...

     // the setTimeout Method says
     // I want you to call the function clock() every 1000 milliseconds or every 1 second
     // since there is no prefix for the setTimeout -
     // we know that it means that it is method of the Window Object
     setTimeout("clock()", 1000);
}

</SCRIPT>

</HEAD>

<BODY onLoad="clock()"> The onLoad Event Handler is executed when the Document or Frameset is fully loaded, which means that all Images have been downloaded and displayed, all subframes have loaded, any Java Applets and Plugins (Navigator) have started running, and so on.

The function clock() will be called after "everything" is loaded

The NAME of the FORM is "clock"
<FORM NAME="clock">
     The NAME of the text field is "time".
     NOTE: the VALUE is an Empty String waiting to be filled with the "TIME".
     Time: <INPUT TYPE="text" NAME="time" VALUE="">
</FORM>

</BODY>
</HTML>