Học JavaScript qua ví dụ part 10 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (950.71 KB, 10 trang )
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
