CERN European Laboratory for Particle Physics
[Logo]

Introduction to JavaScript


Navigator Object Hierarchy

When loading a document in Navigator, it creates a number of JavaScript objects with property values based on the HTML document and other information. They exist in a hierarchy that reflects the structure of the HTML page. This hierarchy is known as instance hierarchy, because it concerns specific instances of objects rather than object classes. The next figure illustrates this hierarchical structure:

In this hierarchy, the object's "descendants" are properties of the object. For example, a form named myform is an object as well as a property of document, and it is referred as document.myform.

Every page has the following objects:

For example, to refer the value property of a text field named mytext1 in myform, the following syntax can be used:

document.myform.mytext1.value

Document Properties

Document properties are largely content-dependant. They are created based on the HTML in the document: for example, document has a property for each form and each anchor in the document. Some of the document objects can be changed, like a text field value or an image source. But others can only be reflected by their values, and cannot be changed, like the HTML page title.

Some Key Navigator Objects

window Object

The window object has some useful methods like:

It has also some properties you can set like location and status.

document Object

Two of the most important  methods in the document object are write and writeln. These methods allow to write flexible HTML code inside the HTML document.The next example shows a way of personalizing a home page, depending on the visitor:

<HTML>
<HEAD>
    <TITLE>Personalized Welcome</TITLE>
</HEAD>
<BODY>
    <SCRIPT>
        name=prompt("Please enter your name:","Anonymous");
        document.write("<H1>Welcome "+name+"</H1>");
    </SCRIPT>
    <HR>
    The rest of the page.......
</BODY>
</HTML>

And this is the output

Form Object

Each form of the document creates a Form object. All form objects are stored in an array called forms, and they are referred in a document in two ways: by heir names or by their positions. The elements in a form are also stored in an elements array, and can be referred, as forms, by their names or positions. For example, suppose you have the following HTML code:


    <FORM NAME="data">
        <INPUT TYPE="text" NAME="text1" VALUE="Your Name">
    </FORM>
    <FORM NAME="picture">
        <INPUT TYPE="button" NAME="button1" VALUE="Click Me!">
    </FORM>

So  referring to document.forms[0] is the same as referring to document.data and document.forms[1].elements[0] is the same as referring to document.picture.button1.

Using Windows

JavaScript  lets you create and manipulate windows for presenting HTML contents. New windows can be opened, new content can be created, and they can have several uses. One of them will be shown later when creating printable forms.

Opening a Window

To create a window you should use the open method. The syntax for this method is:

window.open(URL, WindowName, WindowFeatures)

The WindowName and WindowFeatures are optional. WindowFeatures is a string containing a comma-separated list determining whether or not to create various standard window features. Some of these features include window size, including or not toolbars, etc...

The following code creates a window called menu with the contents of the file menu.html.

menu=window.open("menu.html")

The next example opens a new window, size 300 by 200 pixels, and no menubar:

home=window.open("http://www.cern.ch/","MainWindow","width=300,height=200,menubar=no");

A second name can be given to a certain window. This way, we can select a window as a target window for more than one HTML document:

menu=window.open("menu.html", "menuWindow");
......
menu2=window.open("menu2.html", "menuWindow");

You can also create a document with the contents you want. The next example shows how to do it:

doc=window.open("","printable");
doc.document.writeln("<HTML><HEAD><TITLE>Print Version</TITLE></HEAD>");
doc.document.writeln("<BODY>");
doc.document.writeln("<H1>Welcome</H1>");
doc.document.write("<HR>");
doc.document.write("Whatever");
doc.document.writeln("</BODY></HTML>");
doc.document.close();

The close() method for the document object closes an output stream and forces data sent to layout to display.

Closing a Window

To close a window, you should use the close method. So, the syntax used is:

windowname.close()

To close the same window where the code is written, one of the following statements can be used:

window.close()

or

self.close()

To close the menu window in the previous example, you should use the syntax:

menu.close()


For comments and changes send e-mail to web.office@cern.ch
Copyright CERN -- Web Office, modified 980129