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
  • 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
    • Reading Browser Information
    • Supporting Browsers with JavaScript
    • Supporting Non-JavaScript Browsers
    • Workshop: Scripting for Multiple Browsers
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • 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

Supporting Browsers with JavaScript

If you're using features that are on the cutting edge and require a particular browser or version, there are several ways of using JavaScript to steer users in the right direction. The following sections explain three different methods.

Creating a Browser-Specific Page

The easiest solution—and the least polite—is to pick a browser version to support and kick everyone out who isn't using it. This is easy to do with a script in the header or body of the page. Here's a simple example:

<script language="JavaScript" type="text/javascript">
if (navigator.appName.indexOf("Netscape") == -1
|| navigator.appVersion.indexOf("5.0") == -1)
window.alert("Download Netscape now, or else.");
window.location = "http://www.netscape.com/";
</script>

If you're using a non-Netscape browser or a version of Netscape other than 5.0/6.0, this script displays a rude message and sends you to Netscape's Web page. Needless to say, there are more polite ways of saying this.

Branching to Separate Pages

In most cases, it's not hard to support more than one browser. If you want to fine-tune your pages to display perfectly on both Netscape and IE, one convenient way is to create a separate version of the page for each browser. You can then use JavaScript to send the user to the appropriate page.

For example, here is a script that could be placed on the introductory page of a site. After detecting the browser version, it sends the user to the appropriate page.

<script language="Javascript" type="text/javascript">
if (navigator.appName.indexOf("Netscape") > -1
 && navigator.appVersion.indexOf("5") > -1)
    window.location = "netscape.html";
if (navigator.appName.indexOf("Microsoft") > -1
 && navigator.appVersion.indexOf("4") > -1)
    window.location = "ie.html";
window.location = "default.html";
</SCRIPT>

This script sends the user to one of three pages: netscape.html for Netscape 5.x or 6.x, ie.html for Internet Explorer 4.x or later, or default.html for any other browser.

Making a Multiple-Browser Page

The third alternative is to make a single page that supports more than one type of browser. You can use a script in the page to detect the browser, and then use script commands to include different HTML codes in the document depending on the browser.

This method uses only one document, but you might find that it transforms a long, complicated page into a long, impossibly complicated page. A short example of a page that does this is included in this hour's Workshop section.

Using Feature Sensing

The examples so far in this hour have used browser sensing to differentiate between browsers: They look at the navigator object's properties to determine which browser is in use. While this is sometimes the only way to support all browsers, feature sensing is often a better way.

Feature sensing detects whether a feature is supported, rather than being concerned with the exact browser in use. For example, if your script uses dynamic images, you could use this statement to determine whether they are supported:

if (document.images) alert("dynamic images are supported.");

This statement checks for the existence of the images array. If it exists, the browser most likely supports dynamic images—if it doesn't exist, this statement won't cause an error and you'll know dynamic images aren't supported.

Feature sensing has some advantages: First, it doesn't rely on specific browser versions, so a new browser release is less likely to break your script. Second, it's often easier than dealing with all of the possible navigator properties used in different browsers.

Share This