Objects, Properties and Methods

Objects

The JavaScript language is completely centered around objects, and because of this, it is known as an Object Oriented Programming Language. What is an object? Someone once told me that everything is an object. That is true as long as the emphasis in the word "everything" is placed on thing. If not an action or description, the "thing" is probably an object.

In the context of a web page, a JavaScript object is any scriptable HTML element - that is any HTML element within a document that may be accessed through the JavaScript language. Scriptable HTML elements are associated with the Document Object Model, also known as the DOM. (Better yet, see this image diagram, or this image diagram.) Although the browser window is not an HTML element, it too is a scriptable object.

Outside the context of a web page are core objects. These objects are not associated with HTML elements, but with the language itself. Then there are the homemade objects. Both are associated with the JavaScript Object Model. I suggest you read this article about the Difference between JOM and DOM.

A Few JavaScript Objects
window
document
form
image

Object Properties

Objects have properties, which you can think of as characteristics of an object. A JavaScript property has a similar relationship to the object it belongs to that an HTML tag attribute has to the tag that contains it. For example, the JavaScript "value" property is to a text field object as the HTML "width" attribute is to a table tag.

There is one major exception: JavaScript properties can also be objects. In that case, the object-property relationship is more like the relationship an <option> tag has to the <select> tag that contains it. But in JavaScript, there is no difference in how you refer to a plain old property and a property that is also an object. Smile :-) - that makes your life easier.

A Few JavaScript Properties
href (url string in the browser that determines the page your browser loads)
bgColor (background color of the document)
value (the text - or lack thereof - in a form text field) src (path and filename of an image)
Note: A document, although contained by the window and therefore a property of the window object, is also considered an object. The same is true for a form and an image - they are properties of the document object but also objects themselves. The rule for the dual identities is this: a property is also an object if that property has its own properties and methods. It is best to think of objects which are also properties as objects - that way it is clear what you may and may not do with them.

Object Methods

Methods are actions that can be applied directly to objects. Why methods? Within a web page, methods cause a boring old HTML document to react to the end user. This results in a meaningful experience for the end user which would otherwise be completely one-sided.
Method Parameters
Syntactically speaking, methods are signified by parenthesis immediately following their name, e.g. "alert()". These parenthesis sometimes hold values called parameters, which are required by some methods.

A parameter is simply information needed by a method in order to accomplish its task. For instance, the alert() method pops up an alert box. Without a parameter, the alert method will generate a dialog box (using Internet Explorer) alert() which is meaningless. But with a parameter, the alert method will generate a dialog box alert("Hello World") which communicates a message to the end user.

A Few JavaScript Methods
alert() causes an alert dialog box to appear over the page that launched it
write() writes content to a page
focus() causes the mouse cursor to be inserted into a form element
Notice the parenthesis following the above methods? That is how you distinguish a method from a property or object.

Analogy for Objects, Properties and Methods

Lets say the human body is a JavaScript object. Two properties of the body object would be its height and its hand. The height property doesn't really do anything, it is just a characteristic of the body - so it is not an object in and of itself, it is only a property of the body. The hand however can do many things and has its own special characteristics, so it is also considered an object. A writing action of the hand object would be considered a hand method. Just for fun, take a look at what the syntax for telling the hand to write the word 'hello' in JavaScript might look like:
body.hand.write("Hello").


>>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