The Dot Syntax

In the previous objects, properties and methods lesson, you learned that everything has to do with objects. Even the JavaScript syntax has to do with objects. To access an object, property, or method, its reference must include every object that contains it, separated by a dot. This is called the "dot syntax".

The Containment Hierarchy

In order to load a document in a browser window, the entire path to that document must be typed into a browser's location field, e.g. "me.com/folder/page.html". Likewise, the complete path to an object must be included in a reference to a JavaScript object. This path is referred to as the "containment hierarchy". And instead of using forward slashes, you use "dots" or periods.

If I want to access the value of a text field - which is contained in a form - which is contained in an HTML document - I need to include a reference to the document, the form, and finally the text field. And in that order.

document.formName.textFieldName.value

Methods And The Dot Syntax

Methods are also physically attached to their objects via the dot syntax. If I need to focus the mouse cursor inside a text field using the focus() method, I must include the complete containment hierarchy reference of the object to which I will apply the method.

document.formName.TextFieldName.focus()

Referring To Objects By Their HTML Names

In the examples above, I used "formName" and "textFieldName" to indicate those objects. Those names represent the actual name attribute values given to their associated HTML elements, which would look like this:

<form name="formName">

<input type="text" name="textFieldName">

Of course, if my form looked like this:

<form name="frog">

<input type="text" name="legs">

My JavaScript will look like this:

document.frog.legs

The Window Object Reference

Since most of the objects belonging to a web page are contained by the document object, path references almost always include the document object. But since the document is contained by the window object, why is the window reference left off in the examples above?

The window reference is the only exception to the complete object containment hierarchy reference rule. Since the window object is at the top of the object hierarchy, it is assumed. In the case where a method is shared by the window object and another object, omitting it asserts the assumption that it is being invoked on the window object. There lies a potential "gotcha", so be aware of that (see the window tutorial). Although some browsers allow the document reference to be omitted, it is good practice to include it.

Most of the time, the containment structure is obvious. Take a look at this simple org chart of the Document Object Model.

Naming Scriptable Elements

When it comes to naming scriptable elements, the names can be almost anything you wish. In the beginning, I recommend using strange names to signify that the name is not official.

The only restrictions are for naming your scriptable HTML elements are; do not begin names with numbers or dashes, and do not use reserved words. Now a caution: use a name only once per page. Although technically that rule can be broken (as you'll see in the radio buttons lesson), it is very dangerous to use the same name for more than one HTML element. If you were all named Gretta and I said, "Gretta, come here please" (and you all behaved like mindless objects), we'd have chaos as you all tried to come forward. Scriptable objects are no different.


>>Objects, Properties and Methods
>>The Dot Syntax
>>Dot Syntax Alternatives
>>JavaScript Statements
>>JavaScript Placement: Script Tags and Source Files
>>JavaScript Placement: Event Handlers

View Source | Home | Contact