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 output to the browser. A method is how you do something, and JavaScript methods are the action words, the "doers" of the JavaScript language. They make things happen.

JavaScript 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

We saw in the last chapter that the write() and writeln() were JavaScript methods used to send output to the Web page. Another way to send output to the browser is with the alert() method. The alert() method creates a little independent box ”called a dialog box ”which contains a small triangle with an exclamation point. A user-customized message is placed after the triangle, and beneath it, an OK button. When the dialog box pops up, all execution is stopped until the user presses the OK button in the pop-up box. The exact appearance of this dialog box may differ slightly on different browsers, but its functionality is the same.

The message for the alert dialog box is a string of text (or a valid expression) enclosed in double 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 .

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> 1  <script language="JavaScript">  2          document.write("<font size='+2'>");            document.write("It's a bird, "); 3          document.write("It's a plane, <br>"); 4  alert("It's Superman!");  5  </script>  </body>     </html>

EXPLANATION

The <script> tag starts the JavaScript program. The JavaScript engine starts executing code from here until the closing </script> tag. JavaScript does not understand HTML tags unless they are embedded in a string.
The document.write() method sends its output to the browser. The HTML font tag is embedded in the string and will be sent to the browser for rendering.
This is another document.write() method that outputs its text followed by a newline <br> .
The alert() method will produce a little dialog box, independent of the current document, and all processing will be stopped until the user presses the OK button. This little box can be moved around the screen with your mouse.
A closing </script> tag ends the JavaScript program. The output is shown in Figure 4.1.

Figure 4.1. Example 4.1 output using Netscape (left) and Internet Explorer (right).

Example 4.2

 <html>     <head>     <title>Using JavaScript alert box</title> 1   <script language="JavaScript"> 2  alert("Welcome to\nJavaScript Programming!");  3       var message1="Match your Quotes and "; 4       var message2="Beware of Little Bugs "; 5  alert(message1 + message2);  </script     </head>     </html>

EXPLANATION

The JavaScript program starts here with the <script> tag.
The alert() method contains a string of text. Buried in the string is a backslash sequence, \n . There are a number of these sequences available in JavaScript (see Table 3.1 on page 32). The \n causes a line break between the two strings. The reason for using the \n escape sequence is because HTML tags such <br> are not allowed in this dialog box. After the alert dialog box appears on the screen, the program will stop until the user presses the OK button.
The string "Match your Quotes and " is assigned to a variable called message1 .
The string "Beware of Little Bugs " is assigned to the variable message2 .
The alert() method not only accepts literal strings of text, but also variables as arguments. The + sign is used to concatenate the values of the two string together and create one string. That string will appear in the alert dialog box as shown in the output in Figure 4.2.

Figure 4.2. Output from Example 4.2.

4.1.2 The Prompt Box

Since JavaScript does not provide a simple method for accepting user input [as it does for sending output with document.write() ], the prompt dialog box and HTML forms are used (forms are discussed in Chapter 11, "The Document Objects: Forms, Images, and Links"). The prompt dialog box pops up with a simple textfield box. After the user enters text into the prompt dialog box, its value is returned. The prompt dialog box takes two arguments: a string of text that is normally displayed as a question to the user, prompting him to do something, and another string of text which 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 presses the OK button, all the text in the box is returned; otherwise null is returned.

FORMAT

 prompt(message); prompt(message, defaultText);

Example:

 prompt("What is your name? ", ""); prompt("Where is your name? ", name);

Example 4.3

 <html>     <head>     <title>Using the JavaScript prompt box</title>     </head>     <body>         <script language = "JavaScript"> 1  var name=prompt("What is your name?", "");  2           document.write("<br>Welcome to my world! "                + name + ".</font><br>"); 3  var age=prompt("Tell me your age.", "Age");  4           if ( age == null){    //  If user presses the cancel button  5              alert("Not sharing your age with me"); 6           }             else{ 7              alert(age + " is young");             } 8  alert(prompt("Where do you live? ", ""));  </script>     </body>     </html>

EXPLANATION

The return value of the prompt() method is assigned to the variable called name . 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 typed his response in the prompt textbox, the response was assigned to the variable name . The document.write() method displays that value on the screen.
The variable called age will be assigned whatever the user types into the prompt box. This time a second argument, "Age" , is sent to the prompt() method. When the prompt box appears on the screen, the word Age will appear inside the box where the user will type his response.
If the user presses 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 .
If the return value was null , this line is printed in the alert dialog box.
This closing curly brace terminates the if block.
If the user did type something in the prompt dialog box, the return value was assigned to variable age , and is displayed by the alert dialog box.
The prompt() method is sent as an argument to the alert() method. After the user has pressed 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.

Figure 4.3. Prompt without a default argument.

Figure 4.7. The response is in an alert box.

Figure 4.4. Prompt with a default argument.

graphics/04fig04.jpg

Figure 4.5. Prompt without a default.

graphics/04fig05.jpg

Figure 4.6. User types in the prompt box.

graphics/04fig06.jpg

4.1.3 The Confirm Box

The confirm dialog box is used to confirm a user's answer to a question. A question mark will appear in the box with an OK button and a Cancel button. If the user presses the OK button, true is returned; if he presses the Cancel button, false is returned. This method takes only one argument, the question you will ask the user.

Example 4.4

 <html>     <head>     <title>Using the JavaScript confirm box</title>     </head>     <body>         <script language = "JavaScript">             document.clear  // Clears the page  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

The confirm dialog box takes only one argument, the question that you want to ask the user. It returns true if the user presses the OK button and false if he presses the Cancel button. He has to press either one in order to continue. If the return value is equal to true , then the alert() method on line 2 will be executed (see Figure 4.8).

Figure 4.8. The confirm dialog box.
The user pressed OK. The alert dialog box will display its message (see Figure 4.9).

Figure 4.9. After the user presses OK (left) or Cancel (right).
If the user pressed Cancel, this alert dialog box will display its message (see Figure 4.9).

4.1 Interacting with the User