WebReference.com - Part 1 of Chapter 6 from Designing with JavaScript (2/4) | WebReference

WebReference.com - Part 1 of Chapter 6 from Designing with JavaScript (2/4)

To page 1current pageTo page 3To page 4
[previous] [next]

Designing with JavaScript, 2nd Edition

Now you begin to see the power behind these properties: they can determine the application name, version, and platform for any browser.

Browser versions  

You might notice something odd about the values of appVersion for Internet Explorer in Table 6-2. For example, IE 3.0 doesn't give the value you would expect: "3.01 (Win95)", for Version 3.01 running on Windows 95. Instead, you get "2.0 (compatible; MSIE 3.01; Windows 95)". This is because, when Internet Explorer 3.0 originally came out, it tried to be compatible with Navigator 2.0 and its implementation of JavaScript. This meant that it needed an appVersion that returned the same value as Navigator 2.0. (Of course, the 3.01 is still in the appVersion string, just not as the primary version number.)

The same situation occurs with Internet Explorer 5, 5.5, and 6, which all report an appVersion of 4.0. It's also important to pay attention to Netscape 6's reported appVersion. Netscape 6 is based on Mozilla, an open-source browser that was rewritten from scratch. However, early Mozilla work was based on Netscape's old browser code, what would have been Netscape Navigator 5. Although there never was a Navigator 5, the version number stuck, so Mozilla-and, thus Netscape 6-returns an appVersion of 5.0.


The first of these, navigator.appName, is the most straightforward; it tells you the name of the browser and nothing more. If you are using Netscape Navigator, the value of appName is "Netscape". If you are using Internet Explorer, the value is "Microsoft Internet Explorer".

The second property, navigator.appVersion, returns both the version number and the browser's platform. According to Table 6-2, when you ask Netscape Navigator 4.0 for its appVersion, the browser returns "4.0 (Win95; I)". While this value makes sense, many of the values listed for appVersion in Table 6-2 don't seem very intuitive. See the "Browser versions" sidebar for details.

The third property, navigator.userAgent, essentially combines the first two properties. The userAgent property is not new to the browser world; it was around long before JavaScript. Many servers use the information gathered from userAgent to determine which browsers are being used to access their sites. For the most part, however, we will use appName and appVersion, because they contain all the information we need.

You can access the properties of the navigator object just as you would those of any other object. For example, to print out the name of a browser, just pass navigator.appName to document.write():

document.write("Welcome all " + 
                navigator.appName + 
                " users.");

There's not much reason to do this, however. The point of checking browser identities is to tailor your pages (or your entire site) for different browsers. The rest of this chapter is all about doing just that.

Browser name and number

The browser's name and major version number (2, 3, 4, etc.) almost always determine which features a browser supports. For example, IE 3 does not support Microsoft's version of Dynamic HTML, but IE 4 and later versions do. Navigator 2 and IE 3 do not support JavaScript image replacement, but all later versions of both browsers do. If you know what browser and version you're dealing with, you know a lot about what kind of documents you can serve.

To determine the browser's name and version, we'll use two of the properties you just learned about: appName and appVersion. To make our browser detection script shorter, we start by assigning the values of these properties to two variables, as shown in Example 6-1.

var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);

Example 6-1: Assigning the values of appName and appVersion to variable

First, the browser's name is assigned to the variable browserName. The second line assigns the browser's version to the variable browserVersion. Note that this line uses a built-in JavaScript function, parseInt(), to extract the integer value (whole number) from navigator.appVersion. It works like this: the appVersion of Netscape 6.01 on Windows Me is "5.0 (Windows; en-US)". When this is passed to parseInt(), the returned value is simply 5, an integer. The appVersion of Internet Explorer 4.0 for Windows 95 is "4.0 (compatible; MSIE 4.0b1; Windows 95)". When this is passed to parseInt(), the returned value is 4.

To page 1current pageTo page 3To page 4
[previous] [next]

Created: December 12, 2001
Revised: December 12, 2001

URL: http://webreference.com/programming/javascript/designing/chap6/1/2.html