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. 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 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". Other browsers, like Opera, will generally return either the IE or Netscape appNames depending on how they analyze and render web pages.

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.

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

Exercises

It helps to use both Internet Explorer and Netscape when working with the "navigator" object. It will become more and more important to check your work in both browsers as we continue. So get Netscape Now. You should try to get the older version 4.7 because it's used more than the current version 6.1. You should try both, but make a habit of checking your work in version 4.7.

Using "document.write()" and the two "navigator" properties you've just learned, make this page. That last property is "navigator.userAgent" and represents what the client's browser is sending to the server to define their browser's user agent. Don't worry about this other than getting it to display using "navigator.userAgent".

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