Handling Cross-Browser Programming Issues
| Nothing's more annoying than working hard on a script that performs beautifully when you test it, only to get email from users telling you that your script doesn't work at alland that you should test your JavaScript before embedding it in web pages. With so many browser types, and so many browser versions, it's very hard to get any but the most rudimentary scripts to run for all users unless you pay attention to cross-browser compatibility issues. The biggest such issue is what properties, methods , and events are supported by what browser objects, and I'll start by taking a look at that issue here. Cross-Browser Issues: Differing Object ModelsUnlike other books, this book is designed to make dealing with crossbrowser object models easyor at least easier. When there's an incompatibility , I'll point it out. For each property, method, and event of the various browser objects, I'm going to list which browser, and which version of which browser, supports them. That information will give you what you need to deal with nearly all cross-browser issues. You don't have to worry about what will work in what browseryou'll be able to look it up directly in the reference material for the properties, methods, and events of the various objects. For example, you can quickly see all the browser versions that support the reset method in the sample entry in Table 1.1here, NS2 stands for Netscape Navigator 2.0, IE5 stands for Internet Explorer 5.0, and so on. (I'll present all objects' properties, methods, and events this wayas well as all the syntax of the JavaScript language itselfenabling you to deal with cross-browser issues easily.) Table 1.1. Sample Object Method Entry
This method simulates clicking the Reset button in a form, which resets the data in the form's controls back to their default values (which you can set with most controls' VALUE attribute). This method causes the onreset event to occur. Syntax: form .reset() . Note in particular the two entries for Internet Explorer versions 3a and 3b in Table 1.1; two different Internet Explorer versions 3.0 were released, and I'll label them 3a and 3b. You can tell the difference between these browsers with object detection detecting the existence of objects on-the-flyas discussed in Chapter 4. Cross-Browser Issues: Built-in JavaScript ObjectsBesides the browser objects that you work with in most JavaScript scripts, JavaScript itself has some built-in objects that deserve mention, and a few chapters in this book are devoted to them. The available objects differ to some degree between JavaScript and JScript. In particular, here are the built-in objects in JavaScript 1.5 and what they do:
And here are the built-in language objects in JScript 5.6:
When covering the properties, methods, and events of these objects, I'll indicate which browsers, and what versions of those browsers (just as with the browser objects). Cross-Browser Issues: Core Language and Language VersionOne area where some compatibility has finally appeared is in the core JavaScript language itself. Both the JavaScript language in the Netscape Navigator and the JScript language in the Internet Explorer are now compliant with the ECMA standard ECMAScript version 3. That means when it comes to the core language itself, which we'll be learning in the next two chapters, you usually don't have to worry about incompatibilities if you're dealing with recent browsers. The JavaScript language itself is made up of various keywords, and we'll become familiar with these keywords in the next two chapters, which are on the syntax of JavaScript. These keywords are called reserved words in JavaScript, because they are already part of the JavaScript language and may not be used for any other purpose. For reference, you'll find the reserved words in JavaScript 1.5 in Table 1.2, and the reserved words in JScript 5.6 in Table 1.3. JScript 5.6 also reserves some words for possible future use, and you'll find them in Table 1.4. Table 1.2. Netscape's JavaScript 1.5 Reserved Words
Table 1.3. Microsoft's JScript 5.6 Reserved Words
Table 1.4. Microsoft's JScript 5.6 Future Reserved Words
Despite the recent compliance with the ECMA version 3 standard, however, earlier versions of the browsers support different versions of JavaScript, and that introduces incompatibilities. That means it's often important to know what version of JavaScript you're working with; so I'll put that information into a set of tables here. You'll find the JavaScript version listed by Netscape Navigator version in Table 1.5, and the JScript version (as well as which JavaScript version each JScript version matched) listed by Internet Explorer version in Table 1.6. Note that Internet Explorer 3.0 actually had two releases, which I'll call 3a and 3b throughout the book, which supported JavaScript 1.0 and 1.1 respectively. Table 1.5. Netscape Navigator JavaScript Version by Browser Version
Table 1.6. Internet Explorer JScript Version by Browser Version
In fact, to further complicate the version issue, Netscape is already hard at work on JavaScript 2.0, now in the planning stages. You can find information about this version of JavaScript as it's being designed at http://www.mozilla.org/js/language/js20/introduction/index.html. How will JavaScript 2.0 differ from JavaScript 1.5? Here's the current list of additions in JavaScript 2.0 as it appears on the JavaScript 2.0 sitethese items are quoted from that site. (Note that these items will make sense only if you've already programmed in JavaScript and have some object-oriented programming experience.)
With all these compatibility issues going on, it is often important to know which browser and version you're using. So how do you know? I'll take a look at that now. Cross-Browser Issues: Which Browser Are You Using?We'll deal in depth with cross-browser programming throughout the book, especially in Chapter 4, and an important part of that is knowing what browser version your script is executing in. That's where the navigator browser object comes in; this object is another of the browser objects you work with in JavaScript. Here are the relevant properties of this object:
The following script displays these properties in a web page: (Listing 01-07.html on the web site) <HTML> <HEAD> <TITLE> Checking Your Browser Type </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("navigator.appName: " + navigator.appName) document.write("<BR><BR>") document.write("navigator.appVersion: " + navigator.appVersion) document.write("<BR><BR>") document.write("navigator.userAgent: " + navigator.userAgent) </SCRIPT> <H1>Checking Your Browser Type</H1> </BODY> </HTML> The + operators in this code are used to join text strings together, as we'll see in the next chapter. (Here, I'm joining the text "navigator.appName: " to the actual value of navigator.appName , and so on for navigator.appVersion and navigator.userAgent .) You can see the results of this script in the Internet Explorer in Figure 1.12, and in the Netscape Navigator in Figure 1.13. Note the appVersion property does not give you what you might expectI'm using Internet Explorer 6.02, but appVersion is reported as 4.0, and I'm also using Netscape Navigator 6.2, but appVersion is reported as 5.0. To find the true browser version, you must search the userAgent textyou can see the text "MSIE 6.0" for Internet Explorer and "Netscape6/6.2" for Netscape Navigator in these two figures, which give the correct version. Figure 1.12. Getting browser information in the Internet Explorer. Figure 1.13. Getting browser information in the Netscape Navigator. Why do both userAgent property values begin with "Mozilla" (as seen in these figures)? Mozilla is Netscape's free development browser that is a developer community effort to test new innovations in web browsing. In the early days of JavaScript, many scripts would search the userAgent property for the word Mozilla to determine whether the browser supported JavaScript, and that's why that property still begins with "Mozilla" . Tip The Mozilla browser is available at www.mozilla.org for free; it's a cutting edge browser that implements the various ECMA and W3C standards for JavaScript, but it's not in widespread use compared to the two main browsers available. Checking the properties of the navigator object is one way to see what type of browser you're working with, and we'll work with this technique in Chapter 4. However, even the same version of a browser can have different capabilities on different platforms (such as Windows or the Mac). A better technique, as we'll see in Chapter 4, is to use direct object detection, which enables you to check for the existence of a browser object before you try to use it in your script. More on this in Chapter 4.  | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
