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
- Using Functions
- Understanding Expressions and Operators
- Using Variables
- Data Types in JavaScript
- Converting Between Data Types
- Workshop: Storing User Data in Variables
- Summary
- Q&A
- Quiz
- Exercises
- 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
Workshop: Storing User Data in Variables
One common use of variables is to store information that comes from the user. As an example, you will now create a script that prompts the user for information and creates an HTML document containing that information.
In this script, we'll create a customized home page for the user. (It won't be a good one, but it will be customized.) You will use the prompt function to prompt for each piece of information. This function is similar to alert, but prompts the user for an entry.
To begin the script, you will prompt for a first name, a last name, and a title for the page. These statements prompt for three variables:
first = prompt("Enter your first name.");
last = prompt("Enter your last name.");
title = prompt("Enter a page title.");
You can now use the contents of the variables to customize the HTML document. Begin with the title the user entered:
document.write("<h1>" + title + "</h1>");
This statement adds the title to the page, enclosed in <h1> (heading 1) tags. Next, we'll make use of the first and last names to give the user credit:
document.write("<h2>By " + first + " " + last + "</h2>");
This begins with an <h2> tag, followed by the word "By", the first name, a space, the last name, and the closing </h2> tag.
To complete this script, add the usual <script> tags and an HTML framework. Listing 4.5 shows the final HTML document.
Example 4.5. A script to create a customized HTML document
<html>
<head>
<title>Customized home page</title>
</head>
<body>
<script LANGUAGE="JavaScript" type="text/javascript">
first = prompt("Enter your first name.");
last = prompt("Enter your last name.");
title = prompt("Enter a page title.");
document.write("<h1>" + title + "</h1>");
document.write("<h2>By " + first + " " + last + "</h2>");
</script>
<p>This page is under construction.</p>
</body>
</html>
To test this script, load the HTML document into a browser. You will be prompted for the three items, one at a time. After you have entered all three, the complete page is displayed. The final page should resemble Figure 4.2.
)
Figure 4.2 The customized HTML page script as seen by Netscape.
Summary | Next Section
Account Sign In
View your cart