Home > JavaScript > Objects, Properties and Methodsprinter version

Objects, Properties and Methods

JavaScript has object-oriented capabilities which make it useful for interacting with the DOM, which is a kind of map that holds information about all the objects on a web page.

In the context of a web page, a JavaScript object is any HTML element within a document that may be accessed using JavaScript.

Objects and Properties

Objects have properties and in some cases these properties are themselves objects. A property can be considered an object if it has it's own properties.

For example, in an HTML document that contains an image, the document is an object that has an image property. The image is itself an object that has a width property.

Objects and properties are a hierarchy and are accessed by separating each object and property with the . character as shown below.

Example of a JavaScript Object

<html>
<head>
</head>
<body>
<img src="graphics/webdesignworkmate_logo.gif" width="242" height="48">
<script language="javascript" type="text/javascript">
// This outputs 242
document.write(document.images[0].width);
</script>
</body>
</html>

In the code above the first object in the hierarchy is document. Image is a property of document but is itself an object that has a property width.

Properties are a bit like variables that may contain any type of data including arrays. And in the case above the image was accessed using an index just like an array.

Since the image was the first image object within the document it was accessed as index 0.

Conveniently, objects may be accessed by their HTML names - making for much more readable code, as shown below.

Example of a JavaScript Named Object

<html>
<head>
</head>
<body>
<img src="graphics/webdesignworkmate_logo.gif" width="242" height="48" name="logo">
<script language="javascript" type="text/javascript">
// This outputs 242
document.write(document.logo.width);
</script>
</body>
</html>

Objects in JavaScript can be treated like associative arrays therefore an alternative way to refer to properties is to use the square brackets syntax.

Alternative Way to Refer to a Property

Methods

A function may be a property of an object and as such is referred to as a method. It is distinguished from other properties by the parenthesis following it that normally contains arguments.

In the examples above, write is a method of the document object that takes a variable or a literal as an argument.

Below is another example of a method that uses an onload event handler (events are covered in the Running a Script Tutorial).

The focus() method, appended after the hierarchy of objects, is used to place the cursor in the text field of a form.

Example of a JavaScript Form Object

Creating Objects

As well as the built in objects of the DOM, it's possible to create your own objects using the Object() constructor along with the new operator.

Once created the values of the properties of the object can be set.

Example of Creating an Object

Alternatively we can handle an object's properties like an associative array using the square brackets syntax.

Alternative Way to Refer to Properties

Previous - Expressions and Operators Next - The Date Object

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP