Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• 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
    • Understanding Event Handlers
    • Using Mouse Events
    • Using Keyboard Events
    • Using the onLoad and onUnload Events
    • Workshop: Adding Link Descriptions to a Web Page
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • 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: Adding Link Descriptions to a Web Page

One of the most common uses for an event handler is to display a message on the status line when the user moves the mouse over a link. For example, moving the mouse over the Order Form link might display a message like "Order a product or check an order's status" on the status line.

Status line descriptions like these are typically displayed with the onMouseOver event handler. You will now create a script that displays messages in this manner and clears the message using the onMouseOut event handler. You'll use functions to simplify the process.

To begin the script, you will define a function to display a message on the status line. Although you don't need to use a function, it makes your job a bit easier. For example, a link with an event handler that displays a message on the status line might look like this:

<a href="order.html"
    onMouseOver="window.status='Order a product'; return true">
Order Form</a>

In this example, the return true statement is necessary to prevent the status message from being overwritten immediately by the URL display. As you can see, this makes the <a> tag complicated—and there isn't even a way to clear the message.

Using a function simplifies the link tags slightly. More importantly, it will make it easy to add other features (such as graphics) at a later time. You will call the describe function to display a message. Here is the definition for this function:

<script LANGUAGE="JavaScript" type="text/javascript">
function describe(text) {
    window.status = text;
    return true;
}
</script>

This function accepts a parameter called text. The contents of this variable are placed on the status line. Because the function returns a true value, the status line will continue to display this message until it is cleared. To clear the message, you can create a small function, clearstatus, to call using the onMouseOut handler:

function clearstatus() {
    window.status="";
}

Last but not least, your HTML document needs to include the actual links, with the appropriate event handlers to call these two functions. Listing 10.2 shows the complete HTML document with three typical links.

Example 10.2. The complete descriptive links example

<html>
<head>
<title>Descriptive Links</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function describe(text) {
    window.status = text;
    return true;
}
function clearstatus() {
     window.status="";
}
</script>
</head>
<body>
<h1>Descriptive Links</h1>
<p>Move the mouse pointer over one of
these links to view a description:</p>
<ul>
<li><a HREF="order.html"
    onMouseOver="describe('Order a product'); return true"
    onMouseOut="clearstatus()">
Order Form</a>
<li><a HREF="email.html"
    onMouseOver="describe('Send us a message'); return true"
    onMouseOut="clearstatus()">
Email</a>
<li><A HREF="complain.html"
    onMouseOver="describe('Insult us, our products, or our families'); return true"
    onMouseOut="clearstatus()">
Complaint Department</a>
</ul>
</body>
</html>

In this example, the functions are defined in the header portion of the document. Each link includes onMouseOver and onMouseOut event handlers to call the two status line functions.

To test the script, load it into a browser; this script should work on any JavaScript-capable browser. Internet Explorer's display of the example is shown in Figure 10.2.

Figure 10.2 Internet Explorer's display of the descriptive links example.

Share This