|
Before we discuss this short script, it is essential that you know how the page looks. Figure 22-9 shows the initial appearance. The user types any numeric expression (such as 4 + 6 * 15) in the upper left field, and, after pressing compute, the result appears in the upper right field. The “clear result” button deletes the value in that field. As you can see, the form contains four elements. The first two are text objects—each with its own unique attributes. The first button, named computeButton, uses an onClick event handler to call the compute function with the object reflecting the entire form. The second button provides the only means for clearing the result field (the upper right one). The onClick event handler of this object is a single, immediate statement. Its onFocus event handler creates a read-only field by calling the blur method. Since the entire form object is assigned to compute’s form parameter, the property form.result.value refers to the content of the top right text object, whereas form.expression.value refers to the text inside the first field. The text in the first field is evaluated, and the numeric result becomes its value. If the left field contains the expression “5 * 3 – 2”, for example, then eval returns 13 which is placed in the second text object by assigning 13 to its value property. Methodsclick()A button’s click() method simulates the user’s action of clicking that button. It causes the same action as would a human click, except that the button’s onClick event handler is not triggered. Since their only usefulness is in triggering the onClick event handler, this method is not useful for TYPE="button" buttons. On some platforms, a visual border effect is created when invoking this method. You will probably never need to use this method, but here is an example for your reference:
document.forms[0].elements[0].click()
PropertiesnameA button’s name property is an exact reflection of the NAME attribute and is read-only. In order to respond correctly to an event, the onClick event handler function commonly uses this property to figure out which button was clicked. Here is an example of how to reference this property:
var buttonName = document.forms[0].elements[0].name
valueA button’s value is the visual label you give the button by assigning it to the VALUE attribute of the <INPUT> tag. All form elements defined by <INPUT> tag feature this attribute. As far as buttons are concerned, the length of the string determines the button’s size. The VALUE attribute can be more than one word, and should generally be enclosed by quotation marks. The VALUE attribute is reflected in JavaScript by the value property. Although it is unlikely you will ever need to extract the property’s value, its modification may be useful. Suppose you have a single button on a Web page, and you want its label to change whenever the user clicks the button. You can implement such behavior by modifying the value property as a response to the click event. Netscape Navigator 3.0 enables explicit JavaScript setting of event handlers, so you can even modify the event handler’s script along with the button’s label, to create a “new” button on the fly (without reloading the page). Example 22-6 uses these features to create a simple stopwatch.
<HTML> <HEAD> <TITLE>stopwatch (timer)</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // set initial values var timerRunning = false var timerID = null // create instance of Date object representing current time var initial = new Date() // start timer function start() { // set the button's label to "stop" document.forms[0].general.value = "stop" // assign the stop function reference to the button's onClick event handler document.forms[0].general.onclick = stop // ask if the user wants to reset the timer if (confirm("Would you like to reset the timer?")) // set global variable to new time initial = new Date() // assign milliseconds since 1970 to global variable startTime = initial.getTime() // make sure the timer is stopped stopTimer() // run and display timer showTimer() } // set button to initial settings function stop() { // set the button's label to "start" document.forms[0].general.value = "start" // assign the start function reference to the button's onClick event handler document.forms[0].general.onclick = start // stop timer stopTimer() } // stop timer function stopTimer() { // if the timer is currently running if (timerRunning) // clear the current timeout (stop the timer) clearTimeout(timerID) // assign false to global variable because timer is not running timerRunning = false } function showTimer() { // create instance of Date representing current timer var current = new Date() // assign milliseconds since 1970 to local variable var curTime = current.getTime() // assign difference in milliseconds since timer was cleared var dif = curTime – startTime // assign difference in seconds to local variable var result = dif / 1000 // if result is not positive if (result < 1) // attach an initial "0" to beginning result = "0" + result // convert result to string result = result.toString() // if result is integer if (result.indexOf(".") == –1) // attach ".00" to end result += ".00" // if result contains only one digit after decimal point if (result.length – result.indexOf(".") <= 2) // add a second digit after point result += "0" // place result in text field document.forms[0].display.value = result // call function recursively immediately (must use setTimeout to avoid overflow) timerID = setTimeout("showTimer()", 0) // timer is currently running timerRunning = true } // --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="text" NAME="display" VALUE="" onFocus="this.blur()"> <INPUT TYPE="button" NAME="general" VALUE="start" onClick="start()"> </FORM> </BODY> </HTML>
Example 22-6. A simple timer with an adjusting button |
||||||||||||||||||||
With any suggestions or questions please feel free to contact us |