This chapter is from the book

This chapter is from the book

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.

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.

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:

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
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.

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.