|
|
|
Methodsclick()The click() method emulates a button click on the calling radio object. It does not, however, trigger the button’s onClick event handler. Example 22-8 demonstrates the use of this method to create a “Christmas lights” effect.
<HTML>
<HEAD>
<TITLE>Blinking lights</TITLE>
</HEAD>
<BODY onLoad="animate()">
<SCRIPT LANGUAGE="JavaScript">
<!--
// create row of radio buttons
lay(20)
// set index of lamp to start animation
var current = 0
// set speed (pause in milliseconds between each movement)
var speed = 100
function lay(num) {
// assign "greater than" character to variable
var gt = unescape("%3e")
// open form
document.write("<FORM NAME='animation'" + gt)
// use loop to lay radio buttons down (all buttons in same group)
for (var i = 0; i < num; ++i) {
document.write("<INPUT TYPE='radio' NAME='lamps'" + gt)
}
// close form
document.write("</FORM" + gt)
}
function animate() {
// click next radio button
document.animation.lamps[current].click()
// if radio button is the last one reset variable to 0
(otherwise increment)
current = (current == document.animation.lamps.length – 1) ? 0
: ++current
// recursive call after speed milliseconds
timerID = setTimeout("animate()", speed)
}
;
// -->
</SCRIPT>
</BODY>
</HTML>
Example 22-8. A radio button animation The function lay() prints a form with a given number of radio objects. Notice a very important technique to encode the greater than character. This character (“>”) is assigned to the variable gt via the unescape() function. You may recall from Chapter 3, Writing Your First Script, that Netscape uses a different HTML comment than other browsers. While standard browsers terminate a comment with a greater-than character (“>”), Navigator uses a three-character string (“-->”) instead. Therefore, if a greater than character is really placed in the script, it terminates the comment that hides the script from browsers which do not support JavaScript (specified by the <SCRIPT> tag). When creating a JavaScript-powered Web page, you should be sure to use this technique whenever possible, especially to close HTML tags that are printed via document.write. You can also use less than operators instead of greater than ones, simply by reversing the order of the operands of a conditional statement. If your page is based on JavaScript, though, you may choose to disregard other browsers because they probably won’t be able to display the page anyway. Nevertheless, if you are using JavaScript only to add some special effects, you should use this technique to make it clearly viewable with any browser, even with those that do not feature JavaScript. Yahoo, for example, used this technique to create a “Yahoo Remote” for its page. The button that launched this JavaScript device was printed by a script, so browsers without JavaScript didn’t even see the button. Had the greater than character not been escaped, the whole page (not just one button) would have been scrambled for users without JavaScript-enabled browsers. Back to the lay() function. It is important to name the form for later access—animation is chosen. A simple for loop is executed to print num (the parameter) radio objects named lamps (belong to the same group). Notice that all HTML tags are printed in the following fashion:
document.write("<TAG ATTRIBUTES" + gt)
As explained before, the value of gt is a greater than character (a one-character string). See the preceding section for a complete explanation on the motivation for this encoding. The second function, animate(), is responsible for the actual animation. A global variable, current, is already defined and initialized to 0. The function’s main task is to invoke the click() method associated with the radio object of index current. Note that all radio objects are elements of a unique array—document.animation.lamps. The second statement handles the boundary case when the checking loop needs to advance from the last button of the row to the first one (wraparound). The expression current == document.animation.lamps.length – 1 evaluates to true when the value of current is equal to the index of the last element in the document.animation.lamps array (the last radio button). In this case, current is set to 0, forcing the first button on the row to be checked next. In all other cases, the value of current is incremented, advancing the checked radio button. Note that when a radio button belonging to a group is clicked, any previously selected button is deselected. The last statement of the function recursively calls itself after a pause of speed milliseconds (speed is a global variable). PropertiescheckedThe checked property evaluates to a Boolean value. If its calling radio object is checked (highlighted), the value of checked is true; otherwise it is false. Due to the structure of a radio object group, the checked property of a single radio object in a group is always true. You can set the value of checked in order to modify the radio object’s display. Since all buttons of a group can be deselected, setting a checked property to false simply deselects the calling radio object, without causing any side effects to the other buttons. Checking an empty radio object, however, does deselect any previously highlighted member of the group. See the listings for the checkbox object for full coverage of this property. defaultCheckedThe defaultChecked property reflects the HTML CHECKED attribute. Refer to the section about the checkbox object for further details. nameThe name property initially reflects the NAME attribute in the HTML definition. See the listings for the checkbox object’s name property for a complete explanation. valueThe value property initially corresponds to the VALUE attribute of a radio button HTML tag, but it can be adjusted to any valid string. Once again, refer to the listings for the checkbox object for the syntax and a full description. Select ObjectHTML SyntaxScrolling menus are a flexible means of input you can use on your forms. The <SELECT> tag is used to create various types of scrolling menus. This is the common way to enable the user to select an option from a list. The <SELECT> tag is specified by a <SELECT>…</SELECT> pair. You should always specify the menu’s name in the following fashion:
<SELECT NAME="anyName">
It is preferred to use a name that meets the JavaScript identifier naming conventions. As you might expect, the interior of the <SELECT>…</SELECT> portion includes the list’s options. An option is specified in the following form:
<OPTION VALUE="optionValue">optionText
For example, the following element creates a simple menu of computer firms:
<SELECT NAME="comp"> <OPTION VALUE="http://www.microsoft.com/">Microsoft <OPTION VALUE="http://home.netscape.com/">Netscape <OPTION VALUE="http://www.sun.com/">Sun </SELECT>
|
||||||||||||||||||||||
|
With any suggestions or questions please feel free to contact us | ||||||||||||||||||||||||
){kind=link}
){kind=link}