Site Development
Downloads
Help!!
Home
An ExampleTake a look at this clock example. Previously, we've displayed the time using Date() objects, but we weren't able to have them update dynamically without reloading the page. Using the "value" property of a form's textbox, we can make a dynamic clock or timer. This is due to the fact that a textbox (or textarea's) content is dynamic. JavaScript has a property for the content -- "value". The Set UpStart out making the dynamic clock by making and placing a textbox in a form. I've named my form "form1" and the textbox "clock". What we want to do now is to get the hours, minutes, and seconds from the Date() object and make them the value of "clock". We also want to keep repeating this to make the clock dynamic. To keep updating the value presented in "clock", we'll use a setInterval(). The setInterval()The setInterval() for this program will be coded in a function that will begin running after the page is fully loaded. If we ran the actual function to write in the textbox before the box and form were loaded, we'd get an "object missing" error. There'd be no "clock" box to set a value for. To do this we'll use the "onLoad" event in the <body> tag: <body onLoad="start()"> The "start()" function must now be coded to include the setInterval() we'll be using:
<script language="JavaScript"> All this function does is run another function, that we'll eventually call "time()" every second (1000 milliseconds). I chose one-second intervals because that's how often we want our clock to change -- every second. Running faster, in the millisecond range, wouldn't have any effect since the clock only counts off in seconds. The FunctionI tend to code functions from the end result I want backwards. This means I'll be coding the "time()" function by making the display string and setting it as the "clock" box's "value". document.form1.clock.value = updated_time; This is the line that actually puts the time in the "clock" box. Notice that I made up the variable "updated_time" to be the value of "clock". Now we need to set this new variable equal to a string that includes other variables for hours, minutes, and seconds. var updated_time = " " + hours + ":" + minutes + ":" + seconds + " " + tag; Take a minute to look over the above. Notice how I had to insert the colons and some blank spaces. This variable "updated_time" will now be used as the value for "clock". Now, we just need to get the time from the Date() object and assign things to the appropriate variables. This is just the same as the "getHours()", "getMinutes()", and "getSeconds()" stuff we've previously covered. So now when the page loads, the setInterval() will run the "time()" function every second. Each second, the Date() object will be updated. The hours, minutes, and seconds will be assigned to variables. These variables will be used to form a string called "updated_time", which is then displayed in "clock". Summary & Exercises
Here's a list to help you with making dynamic boxes: 1) Make the form and box. Position it wherever you need it on your page. 2) Decide what data you want displayed and figure out the variables you'll need to make up the string to be displayed. 3) Make a new variable and assign it to equal the final string you want displayed. This is where you'll connect all of your variables together to make a single string. Assign this string to the box's value and test it with temporary "stub data". 4) Make the function(s) needed to gather and process the data needed to put into the variables that make up the final display string. You'll note that the coding process begins at the final output and works its way backwards. This is often the best approach to coding new or complex programs. Try making a dynamic random quote generator that will display a new, random quote in a textarea every ten seconds.
|
Form textboxes and textareas can be used to make many dynamic events that would otherwise be impossible without reloading the page. This is because JavaScript can access their "value" property.
To Next Advanced JavaScript Lesson
Back To Advanced JavaScript Index