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
Workshop: Creating Back and Forward Buttons
One common use for the back and forward methods of the history object is to add your own Back and Forward buttons to a Web document. This can improve the user interface of your pages.
As an example of the use of the history object, you will now create a script that displays Back and Forward buttons and uses these methods to navigate the browser.
You will use graphic images for the Back and Forward buttons. You can use the images from this book's Web site or make your own images to match the other graphics on your page.
Here's the part of the script that will handle the Back button:
<a HREF="javascript:history.back()"> <img BORDER = 0 SRC="left.gif"> </a>
This uses a javascript: URL to execute a command when the user clicks on a link. In this case, the link is the left-arrow image. The script for the Forward button is nearly identical:
<a HREF="javascript:history.forward()"> <img BORDER = 0 SRC="right.gif"> </a>
With these out of the way, you just need to build the rest of an HTML document. Listing 9.2 shows the complete HTML document, and Figure 9.2 shows a browser's display of the document. After you load this document into a browser, visit other URLs and make sure the Back and Forward buttons work.
)
Figure 9.2 The Back and Forward buttons in Internet Explorer.
Example 9.2. A Web page that uses JavaScript to include Back and Forward buttons
<html> <head><title>Graphic Back and Forward Buttons</title> </head> <body> <h1>Graphical Back and Forward Buttons</h1> <hr> <p>This page allows you to go back or forward to pages in the history list. These should be equivalent to the back and forward arrow buttons in the browser's toolbar.</p> <hr> <a HREF="javascript:history.back()"> <IMG BORDER = 0 SRC="left.gif"> </a> <a HREF="javascript:history.forward()"> <IMG BORDER = 0 SRC="right.gif"> </a> <hr> </body> </html>
Summary | Next Section
Account Sign In
View your cart