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