ptg 73 chapter 4 Dialog Boxes 4.1 Interacting with the User Programs like to talk, ask questions, get answers, and respond. In the previous chapter, we saw how the write() and writeln() methods are used to send the document’s output to the browser. The document is defined in an object and write() and writeln() are meth- ods that manipulate the document, make it do something. The document object is defined within a window. The window is also an object and has its own methods. The window object uses dialog boxes to interact with the user. The dialog boxes are created with three methods: • alert() • prompt() • confirm() 4.1.1 The alert() Method The window’s alert() method is used to send a warning to the user or alert him or her to do something. For example, you might let the user know he or she has not entered his or her e-mail address correctly when filling out a form, or that his or her browser doesn’t support a certain plug-in, and so on. The alert box is also commonly used for debugging to find out the results of a calculation, if the program is executing in an expected order, and so on. The alert() method creates a little independent window—called a dialog box—that contains a a user-customized message placed after a small triangle, and beneath it, an OK button. See Figure 4.1. When the dialog box pops up, all execution is stopped until the user clicks the OK button in the pop-up box. The exact appearance of this dialog box might differ slightly on different browsers, but its functionality is the same. Unlike the write() method, the alert() method doesn’t require the window object name in front of it as window.alert(). Because the window is the top-level browser object, it doesn’t have to be specified. This is true with any window object methods you use. From the Library of WoweBook.Com ptg 74 Chapter 4 • Dialog Boxes The message for the alert dialog box is any valid expression, variable, or a string of text enclosed in matching quotes, and sent as a single argument to the alert() method. HTML tags are not rendered within the message string but you can use the escape sequences, \n and \t. A word of caution: Don’t overuse the alert box on your Web site. It can be seriously annoying for visitors. Use the alert box for its intended purpose: to alert visitors about input or processing problems and briefly explain how to correct them. FORMAT alert("String of plain text"); alert(expression); EXAMPLE alert("Phone number is incorrect"); alert(a + b); EXAMPLE 4.1 <html> <head><title>Dialog Box</title></head> <body bgcolor="yellow" text="blue"> <b>Testing the alert method</b><br /> <h2> 1 <script type="text/javascript"> 2 document.write("It's a bird, "); document.write("It's a plane,<br />"); 3 alert("It's Superman!"); </script> </h2> </body> </html> EXPLANATION 1 The <script> tag starts the JavaScript program. The JavaScript engine starts exe- cuting code from here until the closing </script> tag. JavaScript does not under- stand HTML tags unless they are embedded in a string. 2 The document.write() method sends its output to the browser. 3 The alert() method will produce a little dialog box, independent of the current document, and all processing will be stopped until the user clicks the OK button. This little box can be moved around the screen with your mouse. From the Library of WoweBook.Com ptg 4.1 Interacting with the User 75 Figure 4.1 Using the alert() method with Firefox (left) and Internet Explorer (right). EXAMPLE 4.2 <html> <head> <title>Using JavaScript alert box</title> 1 <script type="text/javascript"> 2 var message1="Match your Quotes and "; var message2="Beware of Little Bugs "; 3 alert("Welcome to\nJavaScript Programming!"); 4 alert(message1 + message2); </script </head> </html> EXPLANATION 1 The JavaScript program starts here with the <script> tag. 2 Two variables, message1 and message2 are assigned text strings. 3 The alert() method contains a string of text. Buried in the string is a backslash se- quence, \n. There are a number of these sequences available in JavaScript (see Table 3.1 on page 54). The \n causes a line break between the two strings. The rea- son for using the \n escape sequence is because HTML tags such as <br> are not allowed in this dialog box. After the alert dialog box appears on the screen, the program will stop until the user clicks the OK button. 4 The alert() method not only accepts literal strings of text, but also variables as ar- guments. The + sign is used to concatenate the values of the two strings together and create one string. That string will appear in the alert dialog box as shown in the output in Figure 4.2. From the Library of WoweBook.Com ptg 76 Chapter 4 • Dialog Boxes 4.1.2 The prompt() Method A prompt() method asks the user for some small amount of information such as a pass- word, completion of a form input, or personal information, such as nickname or title. Because JavaScript does not provide a simple method for accepting user input, the prompt dialog box and HTML forms are used (forms are discussed in Chapter 11, “Working with Forms and Input Devices”). The prompt dialog box pops up with a sim- ple textfield box. After the user enters text into the prompt dialog box, its value is returned. This method takes two arguments: a string of text that is normally displayed as a question to the user, prompting the user to do something, and another string of text that is the initial default setting for the box. If this argument is an empty string, nothing is displayed in the box. The prompt() method always returns a value. If the user clicks the OK button, all the text in the box is returned; otherwise null is returned. Figure 4.2 After the first alert box appears and the user clicks OK, the second box appears. FORMAT prompt(message); prompt(message, defaultText); EXAMPLE prompt("What is your name? ", ""); prompt("Where is your name? ", name); From the Library of WoweBook.Com ptg 4.1 Interacting with the User 77 EXAMPLE 4.3 <html> <head> <title>Using the JavaScript prompt box</title> </head> <body> <script type = "text/javascript"> 1 var name=prompt("What is your name?", ""); alert("Welcome to my world! " + name); 2 var age=prompt("Tell me your age.", "Your age: "); 3 if ( age == null){ // If user clicks the Cancel button alert("Not sharing your age with me"); } else{ 4 alert(age + " is young"); } 5 alert(prompt("Where do you live? ", "")); </script> </body> </html> EXPLANATION 1 The prompt() method takes two arguments, one is the text that will prompt the user to respond. This text will appear above the prompt dialog box. The second argument provides default text that will appear at the far left, inside the box. If the second argument is an empty string, the prompt box will be empty. After the user types his or her response in the prompt textbox, the response is returned and as- signed to the variable name. The alert() method displays that value on the screen. 2 The variable called age will be assigned whatever the user types into the prompt box. This time a second argument, “Your age: ”, is sent to the prompt() method. When the prompt box appears on the screen, Your Age: will appear inside the box where the user will type his or her response. 3 If the user clicks the Cancel button, the value returned by the prompt() method is null. This if statement tests to see if the value of age is null. 4 If the return value was null, this line is printed in the alert dialog box. 5 The prompt() method is sent as an argument to the alert() method. After the user has clicked OK in the prompt box, the return value is sent to the alert() method, and then displayed on the screen. See Figures 4.3 through 4.7. From the Library of WoweBook.Com ptg 78 Chapter 4 • Dialog Boxes 4.1.3 The confirm() Method The confirm dialog box is used to confirm a user’s answer to a question. The user must agree before the action is completed. You’ll often see this when placing an online order or deleting a file where a yes or no confirmation determines what will happen next. A question mark will appear in the box with an OK button and a Cancel button. If the user clicks the OK button, true is returned; if he or she clicks the Cancel button, false is returned. This method takes only one argument, the question you will ask the user. Figure 4.3 Prompt without a second default argument. Figure 4.4 Prompt with a second default argument. EXAMPLE 4.4 <html> <head> <title>Using the JavaScript confirm box</title> </head> From the Library of WoweBook.Com ptg 4.1 Interacting with the User 79 <body> <script type="text/javascript"> 1 if(confirm("Are you really OK?") == true){ 2 alert("Then we can proceed!"); } else{ 3 alert("We'll try when you feel better? "); } </script> </body> </html> EXPLANATION 1 The confirm dialog box takes only one argument, the question that you want to ask the user. It returns true if the user clicks the OK button and false if the user clicks the Cancel button. He or she has to click either one to continue. If the re- turn value is equal to true, then the alert() method on line 2 will be executed. The if/else constructs are not discussed until Chapter 6, “Under Certain Conditions,” but the way they are used here is to test a true or false alternative to make the ex- ample a little more meaningful. 2 The user clicked OK. The alert dialog box will display its message (see Figure 4.7). 3 If the user clicked Cancel, this alert dialog box will display its message (see Figure 4.7). Figure 4.5 The confirm dialog box (Firefox). EXAMPLE 4.4 (CONTINUED) From the Library of WoweBook.Com ptg 80 Chapter 4 • Dialog Boxes 4.2 What You Should Know This is a short chapter, but important for interacting with users. You will find yourself using the alert() method more than the prompt() and confirm() methods because it offers a quick way to help debug your programs, such as finding out what is being stored in variables, what is returned from functions, the flow of execution, and so on. Before going on, you should know: 1. To what object the alert(), prompt(), and confirm() methods belong. 2. Why you don’t specify the name of the object with these methods. 3. The purpose of the alert dialog box. 4. How the prompt box works and how many arguments it takes. 5. When you would use the confirm() dialog box. Figure 4.6 The confirm dialog box (Internet Explorer). Figure 4.7 After the user clicks OK (left) or Cancel (right). From the Library of WoweBook.Com ptg 4.2 What You Should Know 81 1. What is wrong with the following alert box? alert("Hello<br />", "world!<br />"); Create a JavaScript program that produces the previous alert box. When the alert dialog box appears, what does the program do? 2. What is the return value of the prompt method if the user doesn’t enter any- thing? Where is the return value stored? 3. Create a JavaScript program that prompts the user for a phone number and then asks the user for confirmation. Exercises Exercises From the Library of WoweBook.Com ptg This page intentionally left blank From the Library of WoweBook.Com . </body> </html> EXPLANATION 1 The <script> tag starts the JavaScript program. The JavaScript engine starts exe- cuting code from here until the closing </script> tag. JavaScript does not under- stand HTML. (right). EXAMPLE 4.2 <html> <head> <title>Using JavaScript alert box</title> 1 <script type="text /javascript& quot;> 2 var message1="Match your Quotes and. Bugs "; 3 alert("Welcome to
JavaScript Programming!"); 4 alert(message1 + message2); </script </head> </html> EXPLANATION 1 The JavaScript program starts here with