- T his chapter is devoted to those lovable buttons that invite users to initiate action and make choices with a single click of the mouse button. - For such workhorses of the HTML form, these objects have a limited vocabulary of properties, methods, and event handlers.. - It is important to know when to use which button — especially in the case of the button and submit objects. - Figure 23-1: Comparison of the button object in Navigator 4 for the Windows 95 (left) and Macintosh (right) operating systems. - That label text is the parameter to the VALUE attribute of the button’s definition. - The width of the button on the screen is calculated for you, based on the width of the button’s label text. - For earlier browsers not fitted with element positioning, you can surround a button’s <INPUT>. - However, Navigator 4 and Internet Explorer 4 offer the best solution by letting you specify the precise coordinates of the top-left corner of the button. - Buttons are also highlighted according to the conventions of the host operating system, and you cannot override these conventions with scripting commands.. - Two special variants of the JavaScript button object are the submit and reset button objects. - The submit-style button automatically sends the data within the same form object to the URL listed in the ACTION attribute of the <FORM>. - The partner of the Submit button is the Reset button. - The most common application of the button is to clear entry fields of the last data entered by the user.. - All that distinguishes these three types of buttons from each other in the. - element definition is the parameter of the TYPE attribute. - For buttons not intended to send data to a server, use the “button” style. - A button’s name is fixed in the <INPUT>. - If you change the name of the object, even a soft reload or window resize will restore its original name.. - The precise value of the type property echoes the setting of the TYPE attribute of the <INPUT>. - A button’s visible label is determined by the VALUE attribute of the <INPUT>. - As long as the purpose of either button is clear, you can assign whatever label you like to any of the button objects in the <INPUT>. - Except for Internet Explorer 4’s extraordinary redrawing behavior, all other browsers do not resize the width of the button to accommodate a new name that is longer or shorter than the original. - Moreover, any soft reload or resize of the window restores the original label. - the new label survives a window resizing, but not a soft reload of the page.. - In the following excerpt, the statement toggles the label of a button from “Play”. - btn.value = (btn.value. - A button’s click() method should replicate, via scripting, the human action of clicking that button. - See the discussion of the window.handleEvent() method in Chapter 14 and the event object in Chapter 33 for details on this ubiquitous form element method.. - A click is defined as a press and release of the mouse button while the screen pointer rests atop the button. - In Listing 23-1, I demonstrate not only the onClick= event handler of a button but also how you may need to extract a particular button’s name or value properties from a general-purpose function that services multiple buttons. - tree to perform more sophisticated actions based on the button clicked (or in Navigator 4 and Internet Explorer 4, it would use a switch construction on the btn.value expression).. - if (btn.value. - Related Items: button.onMouseDown= event handler. - button.onMouseUp= event handler. - Therefore, trapping for the components of a click action won’t help you in changing the button’s appearance. - When the cursor leaves the region of the button, the button’s appearance returns to its unpressed look, but any setting you make with the onMouseDown= event handler won’t undo itself with an onMouseUp= counterpart, even after the user releases the mouse button elsewhere. - Related Items: button.onClick= event handler.. - As with a checkbox on a printed form, a mark in the box indicates that the label text is true or should be included for the individual who made that mark. - That’s not to say that a checkbox object cannot perform some limited action in response to a user’s click, but such actions are typically related to the context of the checkbox button’s label text. - If so, the content in the other frame may be more detailed. - Toggling the checkbox changes the complexity level of a document showing in the other frame (using different URLs for each level). - In the <INPUT>. - If you look at the way checkboxes behave in HTML browsers, this location makes sense: The label is not an active part of the checkbox (as it typically is in Windows and Macintosh user interfaces, where clicking the label is the same as clicking the box).. - Naming a checkbox can be an important part of the object definition, depending on how you plan to use the information in your script or document. - For forms whose content goes to a CGI program on the server, you must word the box name as needed for use by the CGI program, so the program can parse the form data and extract the setting of the checkbox. - There may be instances in which one checkbox should automatically check another checkbox elsewhere in the same or other form of the document. - Because the checked property is a Boolean value, you can use its results as an argument for an if clause, as shown in the next example.. - The function, in turn, extracts the checked value of the form’s checkbox object ( checkThis.checked ) and uses its Boolean value as the test result for the if...else construction.. - The if construction compares the current status of the box against its default status. - Be as descriptive as you can with the name, so that the name immediately invokes the vision of the checkbox.. - A checkbox object’s value property is a string of any text you want to associate with the box. - Note that the checkbox’s value property is not the label, as it is for a regular button, but hidden text associated with the checkbox. - But if you place that useful wording in the VALUE attribute of the checkbox definition, you can extract that string via the value property.. - When a checkbox object’s data is submitted to a CGI program, the value property is sent as part of the name=value pair if the box is checked (nothing about the checkbox is sent if the box is unchecked). - From the JavaScript side, don’t confuse this string with the on and off settings of the checkbox: Use the checked property to determine a checkbox’s status.. - If the property is true (the button is checked), the script sets the action property for the entire form to the content of the value property — thus influencing where the form goes on the server side. - form.action = form.checkThis.value } else. - Listing 23-4 (continued). - The intention of the click() method is to enact, via script, the physical act of checking a checkbox ( but without triggering the onClick= event handler).. - Even if it worked flawlessly, your scripts are better served by setting the checked property so that you know exactly what the setting of the box is at any time.. - Therefore, an onClick= event handler in the Mouse checkbox calls a function to set the Mouse Port checkbox to true whenever the Mouse checkbox is set to true. - Because of the nature of radio buttons — a mutually exclusive choice among two or more selections — a group always has multiple visual elements. - This button group lets the user select a favorite member of the Three Stooges:. - <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Moe Howard” CHECKED>Moe. - <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Larry Fine” >Larry. - <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Curly Howard” >Curly. - <INPUT TYPE=”radio” NAME=”stooges” VALUE=”Shemp Howard” >Shemp. - Only one of the six properties contained by a radio button object ( length) applies to the entire group. - To access any button, use an array index value as part of the button group name. - firstBtnValue = document.forms[0].stooges[0].value. - secondBtnValue = document.forms[0].stooges[1].value. - Any time you access the checked , defaultChecked , type , or value property, you must point to a specific button within the group according to its order in the array. - The order depends on the sequence in which the individual buttons are defined in the HTML document.. - tag, the VALUE attribute lets you store any string in the button’s hip pocket. - In the earlier example, the radio button labels were just first names, whereas the value. - properties were set in the definition to the full names of the actors. - To determine which radio button of a group is checked before doing processing based on that choice, you need to construct a repeat loop to cycle through the buttons in the group (shown in the next example). - That one button’s checked property is set to true, whereas all others in the group are set to false.. - In Listing 23-6, I use a repeat loop in a function to look through all buttons in the Stooges group in search of the checked button. - When the loop finds the one whose checked property is true, it returns the value of the index. - In one instance, I use that index value to then extract the value property for display in the alert dialog box. - in the other instance, I use the value to help determine which button in the group is next in line to have its checked property set to true.. - form.stooges[i].value . - form.stooges[i+1].checked = true. - In the script fragment of Listing 23-7 (not among the CD-ROM files), a function is passed a form containing the Stooges radio buttons. - Looping through each of the radio buttons, you look for the one whose CHECKED attribute was set in the <INPUT>. - if (!form.stooges[i].checked). - A radio button group has length — the number of individual radio buttons defined for that group. - The name property, while associated with an entire radio button group, can be read only from individual buttons in the group, such as. - In that sense, each radio button element in a group inherits the name of the group. - But understanding the place of radio button group names in the scheme of JavaScript objects is. - In this case, it lets the alert dialog box show the full name of the selected Stooge.. - The intention of the click() method is to enact, via a script, the physical act of clicking a radio button. - Even if it worked flawlessly, you better serve your scripts by setting the checked properties of all buttons in a group so that you know exactly what the setting of the group is at any time.. - You may see cases in Windows or Mac programs in which highlighting a radio button — at most — activates or brings into view additional, related settings. - however, that if you script such a hidden action for one radio button in a group, you must also script similar actions for others in the same group. - Every time a user clicks one of the radio buttons in Listing 23-8, he or she sets a global variable to true or false, depending on whether the person is a Shemp lover.. - This action is independent of the action taking place when the user clicks on the View Full Name button. - An onUnload= event handler in the <BODY>. - if (form.stooges[i].checked)
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt