Sams Teach Yourself JavaScript in 24 Hours

Supporting Non-JavaScript Browsers

Some visitors to your site will be using browsers that don't support JavaScript at all. These aren't just a few holdouts using ancient browsersactually, there are more non-JavaScript browsers than you might think:

• Both Internet Explorer and Firefox include an option to turn off JavaScript, and some users do so. More often, the browser might have been set up by their ISP or employer with JavaScript turned off by default, usually in a misguided attempt to increase security.

• Some corporate firewalls and personal antivirus software block JavaScript.

• Some ad-blocking software mistakenly prevents scripts from working even if they aren't related to advertising.

• More and more mobile phones are coming with web browsers these days, and most of these support little to no JavaScript.

• Some disabled users use special-purpose browsers or text-only browsers that might not support JavaScript.

As you can see, it would be foolish to assume that all of your visitors will support JavaScript. Two techniques you can use to make sure these users can still use the site are discussed in the following sections.

Using the <noscript> Tag

One way to be friendly to non-JavaScript browsers is to use the <noscript> tag. Supported in most modern browsers, this tag displays a message to non-JavaScript browsers. Browsers that support JavaScript ignore the text between the <noscript> tags, whereas others display it. Here is a simple example:

<noscript>
This page requires JavaScript. You can either switch to a browser
that supports JavaScript, turn your browser's script support on,
or switch to the <a href="nojs.html">Non-JavaScript</a> version of
this page.
</noscript>

Although this works, the trouble is that <noscript> is not consistently supported by all browsers that support JavaScript. An alternative that avoids <noscript> is to send users with JavaScript support to another page. This can be accomplished with a single JavaScript statement:

<script language="JavaScript" type="text/javascript">
window.location="JavaScript.html";
</script>

This script redirects the user to a different page. If the browser doesn't support JavaScript, of course, the script won't be executed, and the rest of the page can display a warning message to explain the situation.

Keeping JavaScript Optional

Although you can detect JavaScript browsers and display a message to the rest, the best choice is to simply make your scripts unobtrusive. Use JavaScript to enhance rather than as an essential feature, keep JavaScript in separate files, assign event handlers in the JavaScript file rather than in the HTML, and browsers that don't support JavaScript will simply ignore your script.

In those rare cases where you absolutely need JavaScriptfor example, an AJAX application or a JavaScript gameyou can warn users that JavaScript is required. However, it's a good idea to offer an alternative JavaScript-free way to use your site, especially if it's an e-commerce or business site that your business relies on. Don't turn away customers with lazy programming.

One place you should definitely not require JavaScript is in the navigation of your site. Although you can create drop-down menus and other fancy navigation tools using JavaScript, they prevent users' non-JavaScript browsers from viewing all of your site's pages. They also prevent search engines from viewing the entire site, compromising your chances of getting search traffic.

Avoiding Errors

If you've made sure JavaScript is only an enhancement to your site, rather than a requirement, those with browsers that don't support JavaScript for whatever reason will still be able to navigate your site. One last thing to worry about: It's possible for JavaScript to cause an error, or confuse these browsers into displaying your page incorrectly.

This is a particular concern with browsers that partially support JavaScript, such as mobile phone browsers. They might interpret a <script> tag and start the script, but might not support the full JavaScript language or DOM. Here are some guidelines for avoiding errors:

• Use a separate JavaScript file for all scripts. This is the best way to guarantee that the browser will ignore your script completely if it does not have JavaScript support.

• Use feature sensing whenever your script tries to use the newer DOM features, such as document.getElementById().

• Test your pages with your browser's JavaScript support turned off. Make sure nothing looks strange, and make sure you can still navigate the site.

Try It Yourself Creating an Unobtrusive Script As an example of unobtrusive scripting, you can create a script that adds functionality to a page with JavaScript without compromising its performance in older browsers. In this example, you will create a script that creates graphic check boxes as an alternative to regular check boxes. By the Way Note: See Hour 11, "Getting Data with Forms," for the basics of working with forms in JavaScript. Let's start with the final result: Figure 15.3 shows this example as it appears in Firefox. The first check box is an ordinary HTML one, and the second is a graphic check box managed by JavaScript. Figure 15.3. The graphic check box example in action. [View full size image] The graphic check box is just a larger graphic that you can click on to display the checked or unchecked version of the graphic. Although this could just be a simple JavaScript simulation that acts like a check box, it's a bit more sophisticated. Take a look at the HTML for this example in Listing 15.2. Listing 15.2. The HTML File for the Graphic Check box Example <html> <head> <title>Graphic Checkboxes</title> </head> <body> <h1>Graphic Checkbox Example</h1> <form name="form1"> <p> <input type = "checkbox" name="check1" id="check1"> An ordinary checkbox. </p><p> <input type = "checkbox" name="check2" id="check2"> A graphic checkbox, created with unobtrusive JavaScript. </p> </form> <script language="JavaScript" type="text/javascript" src="checkbox.js"> </script> </body> </html> If you look closely at the HTML, you'll see that the two check boxes are defined in exactly the same way with the standard <input> tag. Rather than substitute for a check box, this script actually replaces the regular check box with the graphic version. The script for this example is shown in Listing 15.3. Listing 15.3. The JavaScript File for the Graphic Check box Example function graphicBox(box) { // be unobtrusive if (!document.getElementById) return; // find the object and its parent obj = document.getElementById(box); parentobj = obj.parentNode; // hide the regular checkbox obj.style.visibility = "hidden"; // create the image element and set its onclick event img = document.createElement("IMG"); img.onclick = Toggle; img.src = "unchecked.gif"; // save the checkbox id within the image ID img.id = "img" + box; // display the graphic checkbox parentobj.insertBefore(img,obj); } function Toggle(e) { if (!e) var e=window.event; // find the image ID img = (e.target) ? e.target : e.srcElement; // find the checkbox by removing "img" from the image ID checkid = img.id.substring(3); checkbox = document.getElementById(checkid); // "click" the checkbox checkbox.click(); // display the right image for the clicked or unclicked state if (checkbox.checked) file = "checked.gif"; else file="unchecked.gif"; img.src=file; } //replace the second checkbox with a graphic graphicBox("check2"); This script has three main components: The graphicBox() function converts a regular check box to a graphic one. It starts by hiding the existing check box by changing its style.visibility property, and then creates a new image node containing the unchecked.gif graphic and inserts it into the DOM next to the original check box. (These DOM features were described in the previous hour.) It gives the image an id attribute containing the text img plus the check box's id attribute to make it easier to find the check box later. The Toggle() function is specified by graphicBox() as the event handler for the new image's onClick event. This function removes img from the image's id attribute to find the id of the real check box. It executes the click() method on the check box, toggling its value. Finally, it changes the image to unchecked.gif or checked.gif depending on the state of the real check box. The last line of the script file runs the graphicBox() function to replace the second check box with the id attribute check2. Using this technique has three important advantages. First, it's an unobtrusive script. The HTML has been kept simple, and browsers that don't support JavaScript will display the ordinary check box. Second, because the real check box is still on the page but hidden, it will work correctly when the form is submitted to a server-side script. Last but not least, you can use it to create any number of graphic check boxes simply by defining regular ones in the HTML file and adding a call to graphicBox() to transform each one. By the Way See Hour 19, "Using Graphics and Animation," for details on the image manipulation features used in this example. To try this example, save the JavaScript file as checkbox.js, and be sure the HTML file is in the same folder. You'll also need two graphics the same size, unchecked.gif and checked.gif, in the same folder. You can download all of the files you need for this example from this book's website.