Learn Advanced JavaScript Programming

Table of Contents

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.

Methods

click()

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()

Properties

name

A 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

value

A 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

Table of Contents