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
Trang 1chapter
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
Trang 2alert("String of plain text");
alert(expression);
E X A M P L E
alert("Phone number is incorrect");
alert(a + b);
E X A M P L E 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>
E X P L A N A T I O N
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
Trang 3Figure 4.1 Using the alert() method with Firefox (left) and Internet Explorer (right).
E X A M P L E 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!");
</script
</head>
</html>
E X P L A N A T I O N
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
Trang 4A 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.
F O RM A T
prompt(message);
prompt(message, defaultText);
E X A M P L E
prompt("What is your name? ", "");
prompt("Where is your name? ", name);
Trang 5E X A M P L E 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>
E X P L A N A T I O N
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
Trang 64.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.
E X A M P L E 4 4
Trang 7<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>
E X P L A N A T I O N
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)
E X A M P L E 4 4 (C O N T I N U E D)
Trang 84.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).
Trang 91 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
E x e r c i s e s
Trang 10ptg