Navigator

The "navigator" object is at the top of the heap in JavaScript's object hierarchy. It represents the type of browser the viewer is using - Internet Explorer, Netscape, Opera, etc. You can't change anything about the viewer's browser, but you can use the information below to determine which browser and version the viewer is using.

Detecting what browser the viewer is using to view your pages is called "Browser Detection" and is very important. Internet Explorer and Netscape sometimes use very different JavaScript references to address certain objects. In these cases, you can detect which browser is being used and use IF/ELSE to direct your JavaScript to the appropriate statements.

Browser's Name

The property "navigator.appName" will return the name of the browser that the viewer is using. Check this out yourself by clicking here.

Here's how I made that link above:

<a href="javascript:alert('You are using ' + navigator.appName)">clicking here</a>

Don't forget to use an upper-case "N" in "appName". Capitalization counts in JavaScript.

Internet Explorer returns a value of "Microsoft Internet Explorer" and Netscape returns "Netscape". Opera can be configured to return either of these or "Opera".

Version Number

There are "navigator" properties and methods that can tell you what plugins a browser has, what MIME types are supported, and whether or not cookies and JAVA are enabled. We'll be covering these as we need them. For now we'll just be using "navigator.appName" and "navigator.appVersion".

The "navigator.appVerison" returns the version number of the browser being used. Try it here.

This was made just like the "navigator.appName" box except "navigator.appVersion" was used. Lets make a link that will present both the name and version number.

You'll note that IE's actual version number is actually a string beginning with "4" (on IE 4+). The actual version number, like 5 or 6, is embedded deeper in the string.

<a href="javascript:alert('You are using ' + navigator.appName + ' ' + navigator.appVersion)">clicking here</a>

Notice the space (' ') I added to provide a space between the "navigator.appName" and "navigator.appVerison" when they are displayed in the alert() box. Try the combined alert() box here.

It's occassionally important to know the browser's name and version when coding JavaScript. Some scripts won't run on older browsers and error control of some sort must be added so the viewer's browser doesn't go beserk. This isn't often an issue, but you need to know how to deal with it when it is.

userAgent

The "navigator.userAgent" property returns a string of important information about a browser. It contains some form of the browser's name, version, and the rendering engine being used. Click here to see the string given by your browser.

This string will be critical to us when detecting what browser is being used because of its wealth of information.

Exercises

It helps to use both Internet Explorer and Netscape when working with the "navigator" object. Opera is an invaluable browser to use for previewing because it can be set to mimic newer Netscapes.

It will become more and more important to check your work in all major browsers as we continue. So get Netscape Now. You should try to get the older version 4.7 because it's still being used a lot. Get the newest version, too. In the near future, Netscape 4.x use will fade away to newer Netscape versions, but for now it's still a good idea to get your code to work in older Netscapes.

Using "document.write()" and the "navigator" properties you've just learned, make this page.

If you run into problems, check your capitalization first. Make sure to use "appName", "appVersion", and "userAgent".

To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index