Handling Cross-Browser Programming Issues

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 all—and 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 Models

Unlike other books, this book is designed to make dealing with cross-browser object models easy—or 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 browser—you'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.1—here, 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 way—as well as all the syntax of the JavaScript language itself—enabling you to deal with cross-browser issues easily.)

Table 1.1 Sample Object Method Entry

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
reset		x	x	x			x	x	x	x
Returns: Nothing

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-fly—as discussed in Chapter 4.

Cross-Browser Issues: Built-in JavaScript Objects

Besides 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:

• Array. Supports creation of arrays.
• Boolean. Supports Boolean values (which can hold only values of True or False).
• Date. Supports working with dates and times.
• Function. Specifies a string of JavaScript code to be compiled as a function.
• Math. Support for many math routines, such as square root.
• Number. Supports numeric data types.
• Object. Provides functionality common to all JavaScript objects.
• RegExp. Supports regular expression string matching.
• String. Supports manipulation of text strings.

And here are the built-in language objects in JScript 5.6:

• ActiveXObject. Supports Internet Explorer ActiveX objects.
• Array. Supports creation of arrays.
• Boolean. Supports Boolean values (which can hold only values of True or False).
• Date. Supports working with dates and times.
• Dictionary. Supports storing key/value data item pairs.
• Enumerator. Supports working with collections of objects.
• Error. Contains information about the errors that have occurred in a script.
• FileSystemObject. Gives you some access to the computer's file system.
• Function. Specifies a string of JavaScript code to be compiled as a function.
• Global. Collects various methods available anywhere in a script together into one object.
• Math. Support for many math routines, such as square root.
• Number. Supports numeric data types.
• Object. Provides functionality common to all JavaScript objects.
• RegExp. Supports regular expression string matching.
• String. Supports manipulation of text strings.
• VBArray. Gives you access to Microsoft Visual Basic safe arrays in the Internet Explorer.

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 Version

One 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

abstract	boolean	break	byte
case	catch	char	class
const	continue	debugger	default
delete	do	double	else
enum	export	extends	false
final	finally	float	for
function	goto	if	implements
import	in	instanceof	int
interface	long	native	new
null	package	private	protected
public	return	short	static
super	switch	synchronized	this
throw	throws	transient	true
try	typeof	var	void
volatile	while	with

Table 1.3 Microsoft's JScript 5.6 Reserved Words

break	delete	function	return	typeof
case	do	if	switch	var
catch	else	in	this	void
continue	false	instanceof	throw	while
debugger	finally	new	true	with
default	for	null	try

Table 1.4 Microsoft's JScript 5.6 Future Reserved Words

abstract	double	goto	native	static
boolean	enum	implements	package	super
byte	export	import	private	synchronized
char	extends	int	protected	throws
class	final	interface	public	transient
const	float	long	short	volatile

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

JavaScript Version	Netscape Navigator Version
1.0	2.0
1.1	3.0
1.2	4.0 to 4.05
1.3	4.06 to 4.7
1.4	Not implemented
1.5	6.0 (ECMA 3 compliant)

Table 1.6 Internet Explorer JScript Version by Browser Version

JScript Version	JavaScript Version	Internet Explorer Version
1.0	1.0	3a
2.0	1.1	3b
3.0	1.2	4.0
4.0	Not implemented	Not implemented
5.0	1.3	5.0
5.5	1.5	5.5 (partly ECMA 3 compliant)
5.6	1.5	6.0 (ECMA 3 compliant)

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 site—these 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.)

• Class definition syntax, both static and dynamic
• Packages, including a versioning mechanism
• Types for program and interface documentation
• Invariant declarations such as const and final
• Private, internal, public, and user-defined access controls
• Introspection facilities
• Overridable basic operators, such as + and [ ]
• Machine types, such as int32, for more faithful communication with other programming languages

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:

• navigator.AppName. The name of the browser application.
• navigator.AppVersion. The version of the browser.
• navigator.UserAgent. More details about the browser.

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 theappVersion property does not give you what you might expect—I'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 text—you 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 http://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.