Taking Advantage of Dialog Boxes

[ LiB ]

Taking Advantage of Dialog Boxes

In addition to opening a window and displaying HTML, JavaScript provides you with access to several predefined pop-up dialog boxes you can use to interact with visitors . The three types of dialog boxes are listed here:

  • Alert dialog box

  • Prompt dialog box

  • Confirm dialog box

You have already seen these dialog boxes in use in previous examples. The following sections explain in detail just how you can use the window object's alert(), prompt() , and confirm() methods to take full advantage of these dialog boxes.

Testing Pop-Up Dialog Boxes

The example that follows shows how you can use all three of the window object's methods to create pop-up dialog boxes:

 <HTML>   <HEAD>     <TITLE> Script 4.10 - Testing pop-up dialog boxes</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       function AlertUsr(msg) {           window.alert(msg);       }       function PromptUsr(msg) {           age = window.prompt(msg,55);       }       function ConfirmUsr(msg) {           answer = window.confirm(msg);       }      // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY>     <FORM>       <INPUT NAME="button1" TYPE="button" VALUE="Alert"         onClick="AlertUsr('This is an alert prompt!')">       <INPUT NAME="button2" TYPE="button" VALUE="Prompt"         onClick="PromptUsr('This is a prompt. How old are you?')">       <INPUT NAME="button3" TYPE="button" VALUE="Confirm"         onClick="ConfirmUsr('This is a confirmation!')">     </FORM>   </BODY> </HTML> 

The script in the head section defines three functions, one for each method. The AlertUsr() function executes the window object's alert() method by passing the message that it receives as an argument. No other arguments are supported.

 function AlertUsr(msg) {   window.alert(msg); } 

The PromptUsr() function executes the window object's prompt() method and passes it two arguments. The first argument is the message to be displayed in the prompt, and the second argument is a default value that is automatically displayed in the dialog box's text field. If you want to leave the text field empty, you should type empty quotation marks ("") in place of the argument. If you choose not to include the second argument, the word undefined appears in the text field when the dialog box pops up. This is both unattractive and inconvenient for the user .

 function PromptUsr(msg) {   age = window.prompt(msg,55); } 

The ConfirmUsr() function executes the window object's confirm() method, passing it the message it receives as an argument. No other arguments are supported.

 function ConfirmUsr(msg) {   answer = window.confirm(msg); } 

To test each function, I next defined a form with three buttons in the body section of the code. I added an onClick event handler to each button and assigned the event handler to one of the functions. For example, for the button named button1 , the onClick event handler executes the AlertUsr() function and passes it the text 'This is an alert prompt!' as shown here:

 <INPUT NAME="button1" TYPE="button" VALUE="Alert"   onClick="AlertUsr('This is an alert prompt!')"> 

NOTE

Notice the use of the single quotes around the message text in the onClick event handler.The single quotes are used because the JavaScript statement assigned to the onClick event handler must itself be placed within double quotes. Any time you have quotes inside other quotes, you must differentiate the pairs of quotes. I could have reversed things and used single quotes on the outside and double quotes on the inside; the result would have been the same.

Figure 4.10 shows what the page will look like if you load it using Netscape Navigator.

Figure 4.10. Testing the window object's pop-up dialog boxes

graphic/04fig10.gif


Figure 4.11, 4.12, and 4.13 show how each of these pop-up dialogs look when opened by Netscape Communicator.

Figure 4.11. An alert dialog box as it appears in Netscape Communicator

graphic/04fig11.gif


Figure 4.12. A prompt dialog box as it appears in Netscape Communicator

graphic/04fig12.gif


Figure 4.13. A confirm dialog box as it appears in Netscape Communicator

graphic/04fig13.gif


Adding a Welcome Message

One very polite way to make use of the window object's alert() method is to display a welcome message to visitors when they visit your Web page. As the following example shows, this can be done by placing an alert() statement in the body section of the HTML page.

 <HTML>   <HEAD>     <TITLE>Script 4.11 - Adding a simple welcome message</TITLE>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       window.alert('Welcome to my Web Site!');     // End hiding JavaScript statements -->     </SCRIPT>   </BODY> </HTML> 

NOTE

Greeting messages are commonly created by using the onLoad event handler inside the <BODY> tags.

Figure 4.14 shows the result of loading the previous example in Netscape Navigator.

Figure 4.14. Displaying a generic greeting when visitors first access your main Web page

graphic/04fig14.gif


Using the Visitor's Name in a Message

A more sophisticated greeting involves using the window object's prompt() method to ask the user to type his name and then to display a greeting that uses that name. The following example demonstrates this technique:

 <HTML>   <HEAD>     <TITLE> Script 4.12 - Using the visitor's name in a message</TITLE>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       your_name = window.prompt('Welcome! What is your name?','');       window.alert('Thanks for visiting us ' + your_name +       '.  We hope that you enjoy your experience!');     // End hiding JavaScript statements -->     </SCRIPT>   </BODY>  </HTML> 

This example uses both the prompt() and the alert() methods to communicate with the user. The prompt() method is used to gather information that is then used by the alert() method to thank the user for visiting.

Figure 4.15 shows the first part of the interaction that the user sees when this page loads. Notice that the prompt dialog box does not display an initial message or an undefined message.

Figure 4.15. Using the window object's prompt() method to collect user input

graphic/04fig15.gif


If the user clicks on OK, the alert dialog box appears, as shown in Figure 4.16.

Figure 4.16. Using the window object's alert() method to send the user an informational message

graphic/04fig16.gif


NOTE

Have you ever wondered how it is that some Web sites seem to remember who you are and can greet you by name every time you visit? It's because they have been baking cookies.Tomorrow, I will show you how to bake some cookies of your own. Cookies are small, harmless pieces of information you can store on the visitor's computer and retrieve the next time they return. For example, after you collect a visitor's name, you can store that information as a cookie.The next time the visitor returns to your Web page, you can check to see whether the visitor has been to your Web site before by looking to see whether the visitor's computer has stored one of your cookies. If you find the cookie, you can greet the visitor by name. If your script cannot find your cookie, the script can prompt for the visitor's name and save it for the next visit.

Of course, there are many other benefits to asking for the user's name. For example, you can store it in a variable and reference it repeatedly to interact with the user or to thank the user for visiting when the onUnload event handler executes to signify that the user is leaving or closing the page. If your page also includes a form, you can use the user's name to fill in a name field and save the user some typing.

[ LiB ]


Learn JavaScript In a Weekend
Learn JavaScript In a Weekend, Second Edition
ISBN: 159200086X
EAN: 2147483647
Year: 2003
Pages: 84

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net