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
- Controlling Windows with Objects
- Moving and Resizing Windows
- Using Timeouts
- Displaying Dialog Boxes
- Working with Frames
- Workshop: Creating a Navigation Frame
- Summary
- Q&A
- Quiz
- Exercises
- 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: Creating a Navigation Frame
A common use for frames is to display a navigation frame along the side or top of a page. Using frame objects, you can create a navigation frame that controls the document in another frame.
To begin, you'll need a document to define the frameset. This is the simple part. Listing 11.5 defines a frameset with frames on the left and right.
Example 11.5. An HTML document to divide the window into two frames
<html> <head> <title>Frame Navigation Example</title> </head> <frameset COLS="*,*"> <frame NAME="left" SRC="left.html"> <frame NAME="right" SRC="about:blank"> </frameset> </html>
Next, you will need the document for the left-hand frame, which will act as the navigation frame. Listing 11.6 shows the HTML document for this frame.
Example 11.6. The HTML document for the navigation frame
<html>
<head>
<title>Navigation Frame</title>
</head>
<body>
<p>
Follow one of these links
to load a page into the right-hand
frame:
</p>
<ul>
<li><a HREF="#"
onClick="parent.right.location='order.html';
window.location='ordernav.html'">
Order form</a>
<li><a HREF="#"
onClick="parent.right.location='email.html';
window.location='emailnav.html'">
Email</a>
<li><a HREF="#"
onClick="parent.right.location='sales.html';
window.location='salesnav.html'">
Sales Dept.</a>
<li><a HREF="#"
onClick="parent.right.location='link.html'">
Other Links</a>
</ul>
</body>
</html>
This listing looks complicated, but it actually uses two simple JavaScript statements to do its job. These statements are repeated for each of the links, with a slight variation. Here's one example:
onClick="parent.right.location='email.html';
window.location='emailnav.html'">
These statements are an event handler that loads a document into the right-hand frame, and also loads a new document into the navigation frame. Because the current script is itself in a frame, you need to use the parent keyword before the name of the other frame's object.
To test this script, make sure that you've saved Listing 11.6 as left.html, and then load Listing 11.5 into the browser. Try one of the links. (You can download a complete set of HTML documents for this example from this book's Web site, www.jsworkshop.com.) Figure 11.6 shows Internet Explorer's display of this example.
)
Figure 11.6 The frame example as displayed by Internet Explorer.
Summary | Next Section
Account Sign In
View your cart