Objects, Properties, And Methods - Page 8

There are millions of "objects" in the real world: trees, telephones, people... almost everything we deal with is an object. You could even say that we live in an object-oriented world. Because of this, some programming languages, such as Java and C++, are object-oriented as well. JavaScript is also an object-oriented language, although it does things a little differently than Java or C++, so some programmers don't consider it a true object-oriented language. Regardless, you should treat JavaScript as an object-oriented language.

In JavaScript, there are a large number of objects, the majority of which will be discussed in this book. For example, the page is an object: document. The (browser) window is an object as well: window. Another one we encountered in this chapter is Date, which refers to the date and time showing on the user's computer.

In JavaScript, we can do things not only to objects but also to their properties. For instance, in our first script, the status bar is a property of the window object, referred to as window.status.

To understand how this works, it's helpful to relate it to real life. Let's be a little abstract and think of your car in terms of JavaScript. First of all, let's create a new Car object, which we'll call myCar:

var myCar = new Car( );

You saw this syntax in the night and day script, when we created a new Date object. Now we can begin to manipulate the myCar object, and in the process learn a few things about object-oriented programming.

The Property Concept

Your car has many different properties: color, brand, horsepower, and price, to name a few. What if you want to paint your car red? In JavaScript terms, you would change the color property of your car to red, like so:

myCar.color = "red";

Your car object, myCar, is separated from its property, color, by a dot. This is the equivalent of saying, "the color of myCar." After you have referred to your car's color property in this way, you can then do something with that property.

In this example, the color property of myCar is set to "red" using =. This is like finishing the sentence, "I want the color of myCar... to be red."

To apply this to JavaScript, let's introduce another property of the window object: location. Simply put, the location property controls the location of the window (i.e., the file that is currently being displayed). The following code, for example, takes the (browser) window to a document located at http://www.yahoo.com:

window.location = "http://www.yahoo.com";

Just as color is a property of your car, location is a property of the browser window. To change the location of the window, use the same syntax you used before, separating the window object from its location property with a dot and setting the combination to a value.

Methods to the madness

With properties, we can change certain attributes of our objects, but to do more with JavaScript, we have to use methods. A method, like a function, is simply a name for a set of instructions to the browser. The difference is that a method is directly associated with an object and operates on that object exclusively.

Think about it again in terms of your car: myCar. In addition to having properties, your car has actions that you can do to it, such as accelerate, brake, and honk. These actions, when associated with the car object, are referred to as methods. To accelerate your car object, you might run its accelerate( ) method:

myCar.accelerate( );

This looks like a property, but it has one important difference: those parentheses indicate that this is a method. A more useful accelerate( ) method would allow you to tell the car object by how much you want to accelerate. Perhaps you could pass it the speed in miles per hour:

myCar.accelerate(15);
This would accelerate the car by 15 miles per hour.

In the night and day script, we used the getHours() method of the Date object to get the current hour and the document.write( ) method to display some HTML on the page. You always pass the document.write( ) method a value, as you did with myCar.accelerate( ). The value that you pass to document.write( ), most likely some text or HTML, is displayed on the page:

document.write("My, it's getting late!");

There are a multitude of objects in JavaScript, and therefore a multitude of properties and methods as well. Learning to use JavaScript is largely a matter of learning how to manipulate the properties and methods of built-in objects to achieve the effects you want.

What Else Can You Do With The Date? - Page 7
Designing with JavaScript, 2nd Edition
Time Shifts - Page 9