Calling Methods | Dynamic HTML in Action

You can use script to call one of an object's methods, causing an action to occur. In JScript, a method name is always followed by parentheses, as shown here:

 window.open()

This line of script calls the open method of the window object, which causes the browser to open a new window on the screen. Within the parentheses, some methods support arguments, which serve to modify the action taken by the method. For instance, the code window.open( ) opens a new, completely blank window, which is not very useful. Instead, you might want to direct this new window to point to a particular location, have a name, be a certain height, and not have a menu bar. To carry out such instructions, the open method supports a variety of arguments, as you can see in this example:

 window.open("http://www.w3.org","W3","width=40,height=95,menubar=no")

The first argument in this script directs the open method to point the new window to the World Wide Web Consortium home page. The second argument gives the new window the name W3. This name can be used with the TARGET attribute by an anchor in our original document to change the location of the new window. Finally this line of code sets the width and height of the window and directs it not to display a menu bar.

Different objects support different methods, although you will find that some objects overlap in the methods they support. For example, almost every HTML element in Internet Explorer, including IMG, P, SPAN, DIV, and TABLE, supports the scrollIntoView method. If an element is not currently visible on the screen, this method causes the window to scroll until the element is in view. On the other hand, the createCaption method, which creates a CAPTION element for a table, is supported only by the TABLE object.

The window object supports many methods of general use. The following list provides some examples of these methods, supported in modern versions of both Internet Explorer and Netscape Navigator:

alert	Causes an Alert dialog box to appear, containing text and an OK button.
confirm	Causes a Confirm dialog box to appear, containing text and both an OK button and a Cancel button.
close	Used in a script to close a browser window that was opened through the open method.
open	Opens a new browser window.
prompt	Causes a Prompt dialog box to appear, containing text, OK and Cancel buttons, and a text input field.
setInterval	Causes a block of script or a function to be executed repeatedly (each time a specified time interval elapses).
setTimeout	Causes a block of script or a function to be executed once after a specified time interval has elapsed.

You can refer to Appendix C for a complete list of all the standard methods supported by Internet Explorer. Full descriptions of all methods can be found on the SBN Workshop Web site and on the CD that accompanies this book. On the CD see Workshop (References); DHTML, HTML & CSS; DHTML References; Methods. To get to the online version, visit the MSDN Online Resource page at http://msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose DHTML Methods.

Using Methods to Create Dialog Boxes

Some of the most useful methods are alert, prompt, and confirm. These methods create dialog boxes, which allow the browser to interact with users. They are fully supported in versions 3 and later of both Internet Explorer and Netscape Navigator. Code Listing 7-4 demonstrates the use of all these types of dialog boxes. Figures 7-10 through 7-13 show the results.

Code Listing 7-4.

 <HTML> <HEAD> <TITLE>Listing 7-4</TITLE> </HEAD> <BODY> <FORM NAME="F1"> <INPUT TYPE="button"   VALUE="alert button"   onclick="alert(`You clicked the alert button.')"> <P> <INPUT TYPE="button"   VALUE="prompt button"   onclick="document.F1.Text1.value=prompt(`Type below','Here')"> <INPUT TYPE="Text"   NAME="Text1"   SIZE="50"   VALUE="Click each button, starting with the alert button."> <P> <INPUT TYPE="button"   VALUE="confirm button"   onclick="if(confirm(`Click OK')){alert(`Thank you.')}     else{alert(`I said, CLICK OK!!!')}"> </FORM> </BODY> </HTML>

An Alert dialog box gives the user a message with an OK button. When you click the first button shown in Figure 7-10, the browser displays the Alert dialog box shown in Figure 7-11. You can close this dialog box by clicking the OK button or pressing the Enter key.

click to view at full size.

Figure 7-10. Clicking any one of these three buttons produces a dialog box.

click to view at full size.

Figure 7-11. An Alert dialog box.

A Prompt dialog box asks the user to provide information. Clicking the second button shown in Figure 7-10 runs a block of script that opens a Prompt dialog box (Figure 7-12) that asks the user to type some text in a text field. After the user types the text and clicks OK, the text field next to the Prompt button changes to the value typed in the Prompt dialog.

click to view at full size.

Figure 7-12. A Prompt dialog box.

Notice that the first argument specified for the prompt method appears as instructions in the Prompt dialog box, while the second argument is the default text placed in the text entry area. The results of typing New Text into the text entry area can be seen behind the dialog box in Figure 7-13.

click to view at full size.

Figure 7-13. A Confirm dialog box.

A Confirm dialog box presents the user with text as well as OK and Cancel buttons. This type of dialog box is useful when the user is being asked to make a decision. Clicking the third button shown in Figure 7-10 displays the Confirm dialog box (Figure 7-13), which is used as part of an if statement. The if statement in Code Listing 7-4 displays an Alert dialog box with the text Thank you if the expression inside its parentheses evaluates to true. It displays an Alert dialog box chastising the user if the expression evaluates to false. We use the confirm method for the expression. The Confirm dialog box returns true if the user clicks OK and false if the user clicks Cancel. Thus, a user who follows directions and clicks OK is rewarded with Thank you, while the user who clicks Cancel receives a stern reprimand.