Writing for the World Wide Web
  Home Course Information Assignments Schedule Class Notes Resources Student Pages
Class Notes
Planning Site Navigation
Organizing WWW Files
Using Webpage Editors
Upload / Download (FTP)
Visual Design
Appropriate Use of Technology
Unix Commands
Cascading Style Sheets
JavaScript		 System Detection
Sometimes you want to create code that will act a certain way on one browser, but a different way on another browser. A good example of this is, with the "war" between Netscape and Microsoft, the different browsers create some of their own features that don't work on the opposing browser. There are JavaScript functions that allow your HTML document to recognize things like the browser type, browser version, screen size, and color-depth. Here are a couple lines of code that will display this information:

<script language="JavaScript">
document.write(navigator.appName + "<br />");
document.write(navigator.appVersion + "<br />");
document.write(screen.width + " x " + screen.height + "<br />");
document.write(Math.pow(2,screen.colorDepth) + "<br />");
</script>

Here is a basic breakdown of what each part means:

  • navigator—contains all of the information about the browser that is viewing the website
  • .appName—the part of navigator that stores the name of the browser that is viewing the website
  • .appVersion—the part of navigator that stores the version of the browser that is viewing the website
  • screen—contains all of the information about the screen that is viewing the website
  • .width—the part of screen that stores the width of the screen that is viewing the website; this number is measured in pixels
  • .height—the part of screen that stores the height of the screen that is viewing the website; this number is measured in pixels
  • .colorDepth—the part of screen that stores the color-depth of the screen that is viewing the website; this number is measured in bits, a measurement referring to the method computers use to store information: X number of bits is equal to two to the power of X bits, or 2x
  • Math.pow(2,screen.colorDepth)—this Math function calculates the actual number of colors that a particular monitor is using from the .colorDepth bits

The above lines of code will create the following display:

Notice the version variable also displays other information, like the language in which the browser is written (which should be [en]) and the operating system information.

Home | Course Information | Assignments | Schedule | Class Notes | Resources | Student Pages