Sams Teach Yourself JavaScript in 24 Hours
- Table of Contents
- Copyright
- About the Author
- Acknowledgments
- We Want to Hear from You!
- Reader Services
- Introduction
- Part I: Getting Started
- Hour 1. Understanding JavaScript
- Hour 2. Creating a Simple Script
- Hour 3. How JavaScript Programs Work
- Part II: Learning JavaScript Basics
- Hour 4. Using Functions and Variables
- Hour 5. Using Strings and Arrays
- Hour 6. Testing and Comparing Values
- Hour 7. Repeating Yourself: Using Loops
- Hour 8. Using Math and Date Functions
- Part III: The Document Object Model (DOM)
- Hour 9. Working with the Document Object Model
- Hour 10. Responding to Events
- Hour 11. Using Windows and Frames
- Hour 12. Getting Data with Forms
- Hour 13. Using Graphics and Animation
- Part IV: Moving on to Advanced JavaScript Features
- Hour 14. Creating Cross-Browser Scripts
- Hour 15. Creating Custom Objects
- Hour 16. Working with Sounds and Plug-Ins
- Hour 17. Debugging JavaScript Applications
- Part V: Working with Dynamic HTML (DHTML)
- Hour 18. Working with Style Sheets
- Hour 19. Using Dynamic HTML (DHTML)
- Hour 20. Using Advanced DOM Features
- Part VI: Putting It All Together
- Hour 21. Improving a Web Page with JavaScript
- Hour 22. Creating a JavaScript Game
- Hour 23. Creating DHTML Applications
- Hour 24. JavaScript Tips and Tricks
- Part VII: Appendices
- Appendix A. Other JavaScript Resources
- Appendix B. Tools for JavaScript Developers
- Appendix C. Glossary
- Appendix D. JavaScript Quick Reference
- Appendix E. DOM Quick Reference
Displaying Dialog Boxes
The window object includes three methods that are useful for displaying messages and interacting with the user. You've already used these in some of your scripts. Here's a summary:
- The alert method displays an alert dialog box, shown in Figure 11.3. This dialog box simply gives the user a message.
Figure 11.3 A JavaScript alert dialog box displays a message.
- The confirm method displays a confirmation dialog box. This displays a message and includes OK and Cancel buttons. This method returns true if OK is pressed and false if Cancel is pressed. A confirmation is displayed in Figure 11.4.
Figure 11.4 A JavaScript confirm dialog box asks for confirmation.
- The prompt method displays a message and prompts the user for input. It returns the text entered by the user.
)
)
Creating a Script to Display Dialog Boxes
As a further illustration of these types of dialog boxes, Listing 11.4 shows an HTML document that uses buttons and event handlers to enable you to test dialog boxes.
Example 11.4. An HTML document that uses JavaScript to display alerts, confirmations, and prompts
<html>
<head><title>Alerts, Confirmations, and Prompts</title>
</head>
<body>
<h1>Alerts, Confirmations, and Prompts</h1>
<hr>
Use the buttons below to test dialogs in JavaScript.
<hr>
<form NAME="winform">
<p><input TYPE="button" VALUE="Display an Alert"
onClick="window.alert('This is a test alert.')"></p>
<p><input TYPE="button" VALUE="Display a Confirmation"
onClick="temp = window.confirm('Would you like to confirm?');
window.status=(temp)?'confirm: true':'confirm: false'"></p>
<P><input TYPE="button" VALUE="Display a Prompt"
onClick="var temp = window.prompt('Enter some Text:','This is the default value');
window.status=temp"></p>
</form>
<br>Have fun!
<hr>
</body>
</html>
This document displays three buttons, and each one uses an event handler to display one of the dialog boxes. Let's take a detailed look at each one:
- The alert dialog box is displayed when you click on the first button.
- The confirmation dialog box is displayed when you click the second button, and displays a message in the status line indicating whether true or false was returned. The returned value is stored in the temp variable.
- The third button displays the prompt dialog box. Notice that the prompt method accepts a second parameter, which is used to set a default value for the entry. The value you enter is stored in the temp variable and displayed on the status line. Notice that if you press the Cancel button in the prompt dialog box, the null value is returned.
Figure 11.5 shows the script in Listing 11.4 in action. The prompt dialog box is currently displayed and shows the default value, and the status line still displays the result of a previous confirmation dialog box.
)
Figure 11.5 The dialog box example's output, including a prompt dialog box.
Working with Frames | Next Section
Account Sign In
View your cart