This page introduces another one of Java Script's built-in objects. Specifically, the navigator object. As implied by its name, the navigator object contains information about the browser used. Let's see how we can use this.
Set up an HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
</body>
</html>
Between the comment tags, enter the following lines:
document.write("<p><h2>All about your browser</h2>");
document.write("<ul><li><b>Code name</b>: ");
document.write("<li><b>App name</b>: ");
document.write("<li><b>App version</b>: ");
document.write("<li><b>User agent</b>: ");
document.write("<li><b>Language</b>: ");
document.write("<li><b>Platform</b>: </ul></p>");
As you can tell, we used a whole bunch on document.write commands here. By saving and testing this page in the browser, it is much easier to see what this code does. The HTML tags in them create a bulleted list (<ul> tag for unordered list) and each bullet item is defined using the list tag (<li>). Notice that the <ul> tag begins on line 2 and is not closed until line 7 with the closing tag </ul>. This makes the entire body of the page bulleted.
Now we can get this code to do something with some more Java Script.
Above this code we just entered, enter the following lines:
var browserCodeName = navigator.appCodeName;
var browserAppName = navigator.appName;
var browserVersion = navigator.appVersion;
var browserUserAgent = navigator.userAgent;
var browserLanguage = navigator.language;
var browserPlatform = navigator.platform;
These six lines we entered simply store the navigator information specified in the indicated variable. As mentioned earlier, these properties of the navigator object store information. All we are doing is setting six different variables to the indicated navigator information. I chose to set these variables like so because we are about to display the information on the web page we are creating. Setting these variables to this information makes the code cleaner and easier to read. Also, a computer accesses information in a variable much faster than it does the property of an object. While this example actually may slow the computer down, we are storing a minimal amount of information in comparison to modern computing power.
Modify the document.write commands we wrote earlier to read as follows:
document.write("<ul><li><b>Code name</b>: " + browserCodeName);
document.write("<li><b>App name</b>: " + browserAppName);
document.write("<li><b>App version</b>: " + browserVersion);
document.write("<li><b>User agent</b>: " + browserUserAgent);
document.write("<li><b>Language</b>: " + browserLanguage);
document.write("<li><b>Platform</b>: " + browserPlatform + "</ul></p>");
As you see, this simply displays what is stored in the specified variables through a basic document.write command. We used some HTML in these commands as well. The first line opens an unordered list using the <ul> tag, then uses the <li> tag. This tag simply creates a part of the list. In this case, it creates a bullet. An unordered list (<ul>) uses bullets, as opposed to an ordered list (<ol>), which uses numbers. Each <li> tag used creates a new bullet. The list is closed at the end of line 6 where you see the </ul> tag.
When you run this page, it should become apparent what these properties do. Many people fool around with JavaScript by not allowing users to view their web page with certain browsers. You may experiment further with the navigator object at your leisure, but here are some more examples:
As you noticed, these navigator properties return information (as do most properties). You can test several values and fool around with people. Using the example I provide, you may say:
if (browserAppName == "Microsoft Internet Explorer")
{
alert("Your browser sucks!");
} else {
alert("Good choice! I love " + browserAppName + "!");
}
Or you might redirect them to Mozilla or Netscape's site using window.location. Use your imagination if you want to fuss with the navigator object. However, do not underestimate it. It can prove to be very handy. A website may test the browser before it loads then load another website according to the browser. Some web page features may not display properly in certain browsers. So in such a case, a web developer may want to redirect the visitor to a page that is set up with features compatible to the user's browser.
Now we can move on to Page 11.