Section 2: Objects, Properties and Methods

Javascript works with things called Objects. Objects are basically things that Javascript knows about. Every object has Properties and Methods. Properties are, well, properties of the object, and a Method of an object is an action which Javascript knows how to do with the object.

For example, the document is one of the objects Javascript knows about. It is basically the page you look at in the browser window. One method of the document object is write. When we give the command document.write("Text");, we are telling Javascript to do the action write with the document object.

Sound confusing? Would more examples help? We'll be seeing many examples as we go along!

The document object has many different properties. There is, for example, referrer, lastModified, linkColor, bgColor, fgColor, title, URL, and many more.

Another important object is the window object, referring to the actual browser window itself, rather than the document that the window is displaying. Some properties of window are location, status and navigator.

The properties of an object can be accessed the same way as the methods, so for example window.navigator refers to the navigator property of the window object. In this case, the navigator property is itself also an object, with its own properties! The navigator object contains information about what browser you are using to surf the net. Some of its properties include appName, appVersion, and platform.

(In fact, every property of every object is actually an object! Objects are all that Javascript knows about!)

How do we access the properties of the navigator object? Say if we want to use the appName property? Well, remember that navigator itself is a property of another object, the window, so to refer to the navigator object, we would use "window.navigator". Then, to refer to the appName property of this, we would use "window.navigator.appName" (without the quotes!).

Don't get too confused by this talk of navigator being an object, and also a property of another object. remember that in Javascript, everything is an object.

Here is an example where we access some of the properties of these objects, and display them on the screen.

<h3>Some "document" properties:</h3>
<script>
  document.write("<br> <b>Where you came from:</b> ");
  document.write(document.referrer);
  document.write("<br> <b>When this file was last changed:</b> ");
  document.write(document.lastModified);
  document.write("<br> <b>The colour of the links:</b> ");
  document.write(document.linkColor);
  document.write("<br> <b>The colour of the background:</b> ");
  document.write(document.bgColor);
  document.write("<br> <b>The colour of the text:</b> ");
  document.write(document.fgColor);
  document.write("<br> <b>The Title of the document:</b> ");
  document.write(document.title);
  document.write("<br> <b>The URL of the document:</b> ");
  document.write(document.URL);
</script>

<hr>

<h3>Some "window" properties:</h3>
<script>
  document.write("<br> <b>The URL of this window:</b> ");
  document.write(window.location);
  document.write("<br> <b>Information About the Browser:</b> ");
  document.write(window.navigator);
</script>

<hr>

<h3>Some "navigator" properties:</h3>
<script>
  document.write("<br> <b>The Name of the browser you are using:</b> ");
  document.write(window.navigator.appName);
  document.write("<br> <b>The Version of your browser:</b> ");
  document.write(window.navigator.appVersion);
  document.write("<br> <b>Your Operating System:</b> ");
  document.write(window.navigator.platform);
</script>

Follow this link to see this example in action.

Note here that we used commands like

Instead of

This is because we don't want to display the phrase document.title on the screen. Instead, we want to display the title of the document. Think about the difference between these:

and