Methods of Objects

  1. Introduction
  2. Methods in Action
  3. Example

Introduction

This issue concludes the introduction to the three fundamental parts of object-based programming with coverage of methods (see previous issues for introductions to objects and properties). Objects are similar to your house since they both have many features or properties. Having a house is nice, and it serves a basic purpose, but it would be much more useful if the properties of your house could be manipulated, i.e., you could switch on and off the lights, open and close the doors and turn on and off the water. Let's consider preparing the baby's bath water. Changing the appropriate properties of the house would require a few steps to achieve the desired result. In Java terms, we could think of preparing the bath this way:

window.document.myHouse.water = "on"
window.document.myHouse.watertemp = "warm"
window.document.myHouse.watersize = "small"

The properties of the myHouse object include water, watertemp and watersize. If drawing the baby's bath water is done often, it would be convenient to have a single action that completed this process. In JavaScript, object methods do just that and save your coding effort. Continuing the example, the bath water could be prepared using a method like this:
window.document.myHouse.bath(baby,warm,small)

The object here is still the house, but now the object has the ability to understand what a bath is. The bath is prepared by adding the method name to the end of the object. This addition looks just like a property except for the parentheses. Inside the parentheses are placed the arguments that are passed to the method (the order of method arguments are specific to each method and separated by commas with no spaces). While this example may appear a bit confusing, don't worry, the methods for an object are predetermined and limited.

If we really did have a house object, we could check the owner's manual to see a list of the building's properties as well as its methods. That list might look something like this:
House object properties list: color, temperature, power, residents, address, bedrooms
House object methods list: bath(), garage(), cook(), television()

Each method would then have a chapter in the user's manual that introduced exactly how it worked. The television method could have these instructions:
television(time,channel,program,volume)

It all seems easy enough, and really it is that simple. Additional instructions would tell us exactly how to format the arguments:
television(hhmm.mmyyyy, [value1-100], String[, value]);

Methods are very picky about receiving just the right type of information in just the write place. If any part is left out, there could be an error. Arguments contained in brackets are optional. It is not at all uncommon to have optional arguments, but we must remember that the positions of following arguments need to be maintained. In this example, the television channel may be included or left out. If we left it out, the method would be called in this way:
myHouse.television(1230.001998,,"I Love Lucy",10);

Notice the location for the channel, between the two adjacent commas, with no value. Arguments that are not optional cannot be left out in this way, although they can sometimes be given empty values. If we did not bother to name the television program, the argument would look like this:
myHouse.television(1230.001998,32,"",10)


Methods in Action

The Window object is at the top of the JavaScript object hierarchy (see Listing 1) which is used when addressing objects. Remember we need to precede the name of an object with the name of the object it is contained in. In this example, we will work with the Window object, so no preceding names are required. We could give our window an actual name, or just call it by its default name of "window."


Listing 1. The JavaScript object hierarchy

Window
|_Location
|_History
|_Frames
|_Navigator
__|_Document
__|___Anchor
__|___Applet
__|___Link and Area
__|___Image
__|___Form
____|___Button
____|___Checkbox
____|___FileUpload
____|___Hidden
____|___Password
____|___Radio
____|___Reset
____|___Select
____|___Submit
____|___Text
____|___Textarea


Listing 2. Properties and methods of the Window object

Properties: frames, length, name, opener, parent, self, top, status, defaultStatus
Methods: alert(), blur(), close(), confirm(), focus(), open(), prompt(), scroll(), setTimeout(), clearTimeout()


This object has a number of properties and methods (see listing 2). One very useful method of the window object is opening a new window. The open window method follows this structure:
window.open(URL, windowName [, "windowFeatures"]);

The features that can be included in the windowFeatures argument must be separated by commas and collectively enclosed in a single pair of quotation marks. The argument may include:
toolbar,location,directories,status,menubar,scrollbars,resizable,copyhistory,width,height

Since all these features are really just one collective argument being passed to the method, they follow a specific formatting style. Any of the options can be written like this: toolbar=0, which means do not include a toolbar in the new window (the same can done by simply not including the option). Turning on the options is done by setting the option equal to one: toolbar=1, or by just including the option: toolbar.
window.open("","My New Window","");

This line will open a new window, with no connection to a URL address, titled "My New Window" and has no toolbar, status bar or any of the other features possible. The width and height features are set equal to integers to give the window the dimensions you want. By copying the code in Listing 3 to a blank text document, you can see just how useful this Window method can be (remember to save the document as a plain text only file and give it the ending .html). To test the file, open your browser and use the open page or open file command in the File menu.


Listing 3. HTML document that opens a new window

You can copy the HTML code and JavaScript code by using your browser's View Page Source command in the View menu.


Here is an example of using object methods in JavaScript code.

Write a short message then click the button.

Place a message here: