JavaScript Objects

Unlike strings, numbers, and boolean values, which are primitive data types, objects are compound data types. They comprise multiple data values that can be stored in or retrieved from the object by name. Objects can contain primitive data types, methods, or other objects.

Primitive data stored in objects are properties; they work similar to attributes in HTML entities. Methods are functions that perform an action. An object stored within an object likewise may contain primitive data types, methods, and objects.

Object data is stored or retrieved with the access operator, '.'. The syntax for storing or retrieving primitive data types in objects is as follows:

object_name.object_property = value;

some_variable = object_name.object_property;

For nested objects, the rule applies, but we have to address both the parent and the child object:

parent_object_name.child_object_name.object_property = value;

some_variable = parent_object_name.child_object_name.object_property;

Object methods perform actions. They may or may not return a value, and they may or may not require that the are given values. It depends on the method. The syntax is similar to primitive data types, but the method name is followed by parentheses that enclose the values passed to the method. (Methods that don't receive values are often written with parentheses, like object_name.string_property.length, which returns the number of characters of string_property.)

object_name.object_method(value);  // passes a value but doesn't return one

some_variable = object_name.object_method(value); // passes and returns


some_variable = parent_object_name.child_object_name.object_method(); // only returns

Browser Window Objects

The browser window is organized as an object hierarchy. Understanding this object hierarchy is essential to manipulating the content of a browser window.

The root object in this hierarchy is the Window object, which represents the "current window". The window object is a global object, which means that it is accessible from anywhere. Hence, properties and methods of the window object do not need full addressing. alert(string), for example, is a window method. In order to program an alert message, you could write

window.alert("Help me!");

However, since the window object is global,

alert("Help me!");

will achieve the same thing.

Other objects, properties, and methods must be fully addressed. All our assignments concern the document object, which refers to the content of the browser window. the background color, for example, is a property of the document object, called bgColor. To set or change it, the syntax is as follows:

document.bgColor = "red";

Form input elements are further down the hierarchy. The retrieve the value of a text input field, for example, the syntax is:

some_variable = document.form_name.input_element_name.value;

Note: It is not enough to specify the element name. You must specify input_element_name.value, or you get nothing.
Also, although the browser keeps a record of all elements in the window by number (and hence you could access elements by these numbers), it is easier to remember and access elements if they have a name. Always set a name or ID attribute of HTML entities, like <form id="form1>, <input type="text" name="input1" />, and so on. It will safe time.