Advanced Methods | Javascript & Objects 		Next

Javascript & Objects

The concept of program objects is important in both Javascript and Java. Objects are self-contained independent sections of code that can be made to work together. Programs written in languages that use these constructs should be designed in terms of how the objects relate to each other, not merely as long strings of sequential instructions. (Objects are now even an integral part of Perl 5, that language's latest release; earlier versions of Perl did not employ objects.)

Java and Perl 5 are object-oriented languages, but Javascript is an object-based language. A difference in the two types of languages is the fact that the former lets you define new objects as you see fit, but the latter primarily lets you use a set of predefined objects.

Javascript has a set of objects that it associates with the browser, its various windows, and many HTML tags. Furthermore, some of these Javascript objects have either methods or properties (or both) that allow one to refer to parts of a web page by referring to the objects. (A method is a function that acts on a specific object, and a property is an aspect or piece of data that characterizes an object.) One consequence of this is that it is sometimes possible to change portions of a web page dynamically with Javascript, without having to invoke a server script or reload the entire page.


The Navigator Object

Javascript has a navigator object that the language associates with the browser itself. This object has four properties that tell you things about the browser you are using (like its name, version number, the operating system it runs on, etc.) These properties are called: appName, appVersion, appCodeName, and userAgent.

In an object-oriented or object-based language one generally refers to a property of an object with a "dot" notation:

object.property
For instance, the navigator object's appName can be accessed via navigator.appName.

We now use a short bit of Javascript code to find that the four properties of the navigator object have the following values for the browser you are currently using:

(Try to view this page with at least two different browsers to see that different results are being shown.)

The Javascript code that produces the above information is:
  
 <script language="Javascript"> 
    <!-- hide script from old browsers 
    document.writeln("navigator.appName = " + 
       navigator.appName + "<br>"); 
    document.writeln("navigator.appVersion = " + 
       navigator.appVersion + "<br>"); 
    document.writeln("navigator.appCodeName = " + 
       navigator.appCodeName + "<br>"); 
    document.writeln("navigator.userAgent = " + 
       navigator.userAgent + "<br>"); 
    // done hiding--> 
 </script>
Some things to note about this code section:

  1. The entire section is set off in a <script> ... </script> tag. You can have any number of these on a page.
  2. This tag has the attribute language="Javascript" to distinguish the language in this code section from other scripting languages that can be used in browsers (e.g., Microsoft's VBScript).
  3. The code is also inside an HTML comment (the section between the lines marked "hide script from old browsers" and "done hiding"). If this were not done, browsers that can't handle Javascript would simply print the code section verbatim. But by placing the code inside an HTML comment these Javascript challenged browsers will not show anything at this point.
  4. The Javascript command for printing a line of text is document.writeln(); the argument between the parentheses is what gets printed.
  5. In the argument of document.writeln() variable names, like navigator.appName, appear literally when placed inside doubles quotes but their value is substituted if the quotes are omitted.
WebTeacher uses Javascript's logic commands and the values of navigator.appName and navigator.appVersion to determine the default customized version of this tutorial for each reader's browser and operating system.

Next