Chapter 7. Objects and Object Hierarchies
 | CONTENTS |  |
CONTENTS>>
- Hierarchy of Objects in JavaScript
- User-Defined Objects
- Built-in Objects and Their Properties
- Key Built-in Object Methods
- Summary
In previous chapters, references have been made to objects, properties, and methods. I want to use this chapter to go into detail about the key role of objects in JavaScript and to provide a sense of the hierarchy of objects in HTML and JavaScript. In addition, this chapter introduces the concepts that you need to understand for object-oriented programming (OOP) in JavaScript. Thinking in terms of OOP and writing JavaScript code in OOP is the basis of programming excellence and program optimization.
Hierarchy of Objects in JavaScript
The key to understanding objects in JavaScript is to understand JavaScript's relationship to HTML and HTML's structure. One of the clearest and simplest structures in HTML is the form object. Table 7.1 shows the fundamental hierarchy of objects.
| Window (object) |
| Document (property of window) |
| Form (property of document) |
| Element (property of form) |
| Element value (property of element) |
In JavaScript, to reference the hierarchy, the dot (.) operator serves as a linking device for the different levels in the object hierarchy, with the highest level beginning on the left and working its way to the right. In JavaScript, a generic reference to the value of a form object would look like the following:
window.document.formName.elementName.value Generally, the window object is assumed, so the reference begins with the document object. However, if you are using frames, a frame reference precedes the document reference. On the other end, value is the reference to any contents contained within the object to the left of it. Keeping in mind that an object is a collection of properties, many properties themselves are objects in their own right. Revisiting the hierarchy in Table 7.1, Table 7.2 shows how the object-property chain works.
| Object | Properties |
|---|---|
| Window object | document, form, element, element value |
| Document object | form, element, element value |
| Form object | element, element value |
| Element object | element value |
| Element value | property of element |
To make something actually work within the hierarchy, an example is in order. In this next example, the objects are already defined by HTML, and all that JavaScript will do is provide a literal value. However, as you will see in the script, more than a single object can have their values changed.
<html> <head> <title>Hierarchy</title> <style type="text/css"> h2 { font-size: 18pt; color: #e8b002; font-family: verdana } .clickNote { font-size: 12pt; font-weight:bold; color: #fb503e; background-color:black; font-family: verdana } </style> <script language="JavaScript"> function doIt() { window.document.petstore.puppy.value="Swissy"; window.document.petstore.clicker.value="I\'ve been clicked"; } </script> </head> <body bgcolor="#839063" onLoad="javascript:window.document.petstore.reset()"> <h2>Object Hierarchy Practice</h2> <span class="clickNote">  Click the button:  </span> <form name="petstore"> <input type=text name="puppy"> <input type=button name="clicker" value="Click to change value of text window." onClick="doIt()"> </form> </body> </html> Figure 7.1 shows what appears as soon as the page is loaded or reloaded. An important JavaScript element in the script is the resetting of the text window, which is handled within the <body> tag.
Figure 7.1. The initial page shows a clear text window and a button with specific instructions.
The style sheet simply sets up the colors and provides color values for the background and two of the fonts. The JavaScript function doIt() is made up of two object definitions that follow the hierarchy to a point where a value can be entered for a selected property. The text window was assigned no value in the HTML script, so the only value that it will have is the string literal Swissy that has been assigned to the object. Second, the button object has a value defined for it initially in the HTML script. However, to illustrate how JavaScript can change a property's existing value, it too is defined with a string literal: I\'ve been clicked. The hierarchy begins with window, but usually the top level of the hierarchy is superfluous and window was added only for the sake of showing the entire hierarchy.
A second bit of JavaScript outside of the <script> container is the line in the <body> container:
<body bgcolor="#839063" onLoad= "javascript:window.document.petstore.reset()"> The JavaScript line is within the event handler onLoad using javascript: to specify the code that follows the JavaScript protocol. After the specifier, the reset() method is applied to the form object so that whenever the page loads, the undefined values in the text windows are cleared. Figure 7.2 shows the screen after the indicated button is pressed.
Figure 7.2. After the button has been pressed, both the values of the text window and button object are changed.
User-Defined Objects
Most of the objects discussed so far and those to be discussed in the rest of the book are defined in an HTML script. However, JavaScript provides a way that you can define your own objects with different properties. Each property can be assigned a value, just as with objects in HTML. The object constructor Object() is used to create user-defined objects using the following format:
var userObj = new Object() After the object has been initialized, you can either add new objects to the existing object or add properties and their values. Consider an organization, the Acme Car Company, with the following five departments and two subdivisions:
Management
Research and Development
Finance
Production
Marketing
Sales
Fulfillment
To create a set of objects in JavaScript that reflects the organization, you will need to define an object on the highest level (Acme Car Company) and then the properties for each of the divisions and subdivisions. The initial definitions would be the following:
//Make the objects and properties var acme= new Object(); acme.management = new Object(); acme.management = "Management coordinates everything."; acme.management.rand ="Research and Development works to develop new and better 
products and services."; acme.finance="Finance keeps track of the money."; acme.production = "Production makes the stuff." acme.marketing = new Object(); acme.marketing = "Marketing develops strategies to target markets for the products." acme.marketing.sales = "Sales contacts potential clients and sells the product." acme.fulfillment = "Fulfillment delivers sold products." Because Management and Marketing both have subdivisions, they must be defined as objects as well as being properties of the acme object. Therefore, both Management and Marketing have their own new Object() constructor function that gives each the capacity to have their own properties. However, when acme.management and acme.marketing are defined as two new objects with the application of the new Object() constructor, they become independent objects even though they inherit the properties of the acme object.
To see how to use the objects' properties, the following script displays different elements within the acme object. First, using a for / in loop, the script pulls out all of the properties of the acme object simply to provide evidence that it is an object. Then, to show how to access the values of the object, a display variable adds on the current contents of the two subobjects of the acme object: management and marketing.
<html> <head> <title>Building Objects</title> <style type="text/css"> h2 { font-size:16pt; color: #584095; font-family: verdana } h3 { font-size:14pt; color: #6b8cc1; background-color: black; font-family: verdana } </style> <script language="JavaScript"> var acme= new Object(); acme.management = "Management coordinates everything."; //Part of the acme object. acme.management = new Object(); //Creating new object acme.management.rand ="Research and Development works to develop new and better products and services."; acme.finance="Finance keeps track of the money."; acme.production = "Production makes the stuff."; acme.marketing = "Marketing develops strategies to target markets for the products."; acme.marketing = new Object(); acme.marketing.sales = "Sales contacts potential clients and sells the product."; acme.fulfillment = "Fulfillment delivers sold products."; var display="<h2>First the properties of the acme object</h2>"; for (var counter in acme) { display += counter + "<br>"; } display += "<h3> And now the values of the properties of management and marketing</h3>"; display += acme.management.rand + "<br>"; display += acme.marketing.sales; document.write(display); </script> </head> <body bgcolor="#abc241"> </body> </html> Figure 7.3 shows what the output for the script is in a browser. Keep in mind that in the script, the acme object contains the five major divisions in the company: management, finance, production, marketing, and fulfillment. The for / in loop extracts only the properties of the acme object (the five divisions), not properties of the subobjects (the two subdivisions.)
Figure 7.3. The output is arranged as properties of the acme object and the values of the subobjects.
The two messages that appear at the bottom portion of the output are simply the values of the properties of the two subobjects (management and marketing). To access their values, the script simply placed them into a variable in the following format:
variableName = acme.management.rand; variableName = acme.management.sales; Note that no value property is specified, as has been seen in extracting values from other objects discussed previously in the book. For example, in the previous section of this chapter, a value was assigned to a text window object using this line:
window.document.petstore.puppy.value="Swissy"; The text window's name is puppy, so why not just define the value of puppy using the equal (=) operator without having to specify the value property? As an object, text has two properties: onchange and value. Without specifying which of the two properties you want to reference, JavaScript doesn't know what to do. However, in defining the properties in the previous script where user-definitions created the object, all of the properties of the acme object had their own values. For example, if you write this:
variableName= acme.finance; document.write(varibleName); your output would be
Finance keeps track of the money.
However, if you wrote this:
variableName= acme.marketing; document.write(varibleName); the output would be this:
[object Object]
In the first case, the script provides the complete object, acme.finance. In the second case, only a part of the object, as ultimately defined in the script, was presented, acme.marketing instead of acme.marketing.sales. To extract the initial value of the marketing object, you would need to put the value of acme.marketing into a variable before creating a second object that included sales, acme.marketing.sales. In the same way that a variable's value can change in a script, so can an object's. The last values assignment has the last word in determining what is read as a value in an object.
Built-in Objects and Their Properties
Several important built-in objects have properties that you need to understand for optimal use with JavaScript. This section examines two key objects: the screen and the window. The window properties examined here are specific to the window object and do not refer to virtually every other object that is a property of the window object.
Reading Screen Properties
When a browser opens an HTML page, it does so with the screen properties determined by the viewer's equipment. All screen properties are read-only and are static as far as the designer/developer is concerned. The screen object has five cross-browser properties:
screen.availHeight screen.availWidth screen.colorDepth screen.height screen.width Each one of the screen property values can be assigned to a variable, another property's value, or, as in the next example, an array. When you have the screen data, you are in a position to make changes to your own script for maximizing what the viewer sees on his uniquely configured screen. When you try out the following script, do so on different browsers and different screen settings.
<html> <head> <title>Screen Properties</title> <style type="text/css"> h2 { color: #ef3813; font-family:verdana; font-size:16pt; } .outText { color: #e4c08e; font-family:verdana; font-size:12pt; background-color:#ef3813 } </style> <script language="JavaScript"> function showScreen() { var display="<h2>Your screen has the following characteristics:</h2><div class=outText><b><br>"; var screenSee=new Array(5); screenSee[0] = "Available screen height = " + screen.availHeight; screenSee[1] = "Available screen width = " + screen.availWidth; screenSee[2]= "You have " + (screen.colorDepth) + " bit color."; screenSee[3]= "Your screen is " + screen.height + " pixels high"; screenSee[4]= "and " + screen.width + " pixels wide."; for (var counter=0;counter< screenSee.length;counter++) { display += screenSee[counter] + "<br>"; } display +="<br></b></div>" document.write(display); } showScreen(); </script> </head> <body bgcolor="#fbf4eb"> </body> </html> When you run the program, you will see the setting that you have for your screen on your computer. I tested the script on an iMac and a Dell PC. The iMac returned the following output using Netscape Communicator 6.01:
Available screen height = 580 Available screen width = 800 You have 16 bit color. Your screen is 600 pixels high and 800 pixels wide.
The same script run on my PC has a different outcome because it has different screen settings. Figure 7.4 shows the output on the Dell using Internet Explorer.
Figure 7.4. The screen configuration on the PC shows a higher and wider screen and 32-bit color rather than 16-bit color.
Because you cannot change the viewer's screen options, you might need to change the page that he sees. For example, using either multiple Cascading Style Sheets or images, your program can determine the color depth of the viewer's screen and decide which ones to use depending on the color depth. Designers who feel confined (or smothered) by the 216 web-safe palette might want to provide a wider variety of colors for viewers with more than 8-bit color. Of course, you run the risk that the screen's capacity to display color will be greater than the browser's, but some designers are willing to take this risk when they know that the screen is capable of greater color diversity.
Working with Window Properties
The properties that make up the window encompass the entire web page, so this section deals with only window-level properties. The following key properties are examined:
window.closed window.defaultStatus window.location window.navigator window.defaultStatus window.name window.history
To examine these properties, I used a frameset with three frames. I also developed a dummy page that slips into and out of one of the frames. To integrate the three frames, I created an external Cascading Style Sheet. First, create the style sheet and then create the frameset page.
winProp.css
h3 { color:#c6d699; background-color:#8d6ba8; font-family:verdana; font-size:16pt } .bod { color:#731224; font-family:verdana; font-size:11pt; font-weight:bold; } a:link { color:#731224; background-color:#c6d699 } h2 { color:#8d6ba8; background-color:#c6d699; font-size:14pt; } The frameset is arranged as a typical frame-delineated page. The top frame is named banner, the left column is named menu, and the larger right column is named main. The set provides three different pages that can be examined separately for the script and then viewed as a unit for the output.
winSet.htm
l <html> <frameset rows="35%,*" frameborder=0 framespacing=0 border=0> <frame name="banner" src="frameA.html" border=0> <frameset cols="30%,*" frameborder=0 framespacing=0 border=0> <frame name="menu" src="frameB.html" border=0> <frame name="main" src="frameC.html" border=0> </frameset> </frameset> </html>
The top or banner frame goes through the navigator property. Note that in assigning a property value to the array, the reference is to self.navigator. Using self is simply a substitute for window and is a reminder of a self-referent.
frameA.html
<html> <head> <title>Navigator Properties</title> <link rel="stylesheet" href="winProp.css"> <script language="JavaScript"> var nav= new Array(5); nav[0] ="Code name = " + self.navigator.appCodeName + "<br>"; nav[1] = "Browser name = " + self.navigator.appName + " "; nav[2] = "using version number:" + self.navigator.appVersion+ "<br>"; nav[3] = "Your platform is " + self.navigator.platform+ "<br>"; nav[4] = "and your user agent is " + self.navigator.userAgent; var display="<h3> Navigator Information</h3><div class=bod>" for (var counter=0;counter < nav.length;counter++) { display += nav[counter]; } display +="</div>"; document.write(display); </script> </head> <body bgcolor="#c6d699"> </body> </html> Depending on your system and browser, you can expect a different output from this frame. Try it out on different browsers on your system or, if you have more than one system, try it out on the different systems. The information available about your system and browser using JavaScript can be summarized by the output in the top frame. Other browser-specific properties of the Navigator object are available but are not listed here due to incompatibility problems.
In the second page, the window properties of window.closed, window.name, and window.defaultStatus are used. Note that the page itself can be swapped back and forth with the dummy page, but the window.closed status remains the same, as is evidenced by the message on the frame. Also look at Figure 7.5 to see where in the lower portion of the browser the message has changed due to changes in window.defaultStatus.
Figure 7.5. Information about a web page can be captured by JavaScript to optimize the page design and utility.
frameB.html
<html> <head> <title>Window Properties</title> <link rel="stylesheet" href="winProp.css"> <script language="JavaScript"> var display = "<h3>" + self.name + "</h3>"; display +="<div class='bod'>"; var gone=" "; var alpha=self.closed; if (alpha==false) { var gone=" never "; } display += "This window has" + gone + " been closed.<br>"; //Change the message in the lower left corner self.defaultStatus="\"This window property can be changed.\""; display += "The default status reads: " + self.defaultStatus + "<br></div>"; document.write(display); </script> </head> <body bgcolor="#c6d699""> <p> <a href="dummy.html">Go Dummy </a> </body> </html> The last frame is filled with a single window property, window.location, which identifies where your current page's URL is. It is a simple enough property, but it's one that could be passed to another variable for future reference.
frameC.html
<html> <head> <title>Window Properties</title> <link rel="stylesheet" href="winProp.css"> <script language="JavaScript"> var display="<h3> Where Am I? </h3><div class='bod'>"; display += window.location; document.write(display); </script> </head> <body bgcolor="#c6d699""> </body> </html> Rounding out the dummy page's purpose is nothing more than showing that the initial page that is swapped into and out of the "menu" frame does not have the effect of placing the initial page in a "closed" status. To provide a useful job for the dummy page, the link back to the original page in the menu frame is executed using a method from window.history to illustrate how it is used (see Figure 7.5).
dummy.html
<html> <head> <link rel="stylesheet" href="winProp.css"> </head> <body bgcolor="#976d2c"> <h2>Dummy Page</h2> <a href="javascript:window.history.back()">Back</a> </body > </html>
Key Built-in Object Methods
This section examines built-in object methods in some of the key objects in JavaScript. The three selected objects, window, string, and date, contain some of the most heavily used methods. As you might recall from the discussion of functions in Chapter 6, "Building and Calling Functions," a method is essentially a function attached to an object or property of an object. In looking at the basic methods of the following objects, you should be able to cope with the bulk of methods used regularly in JavaScript.
The Window Methods
At the time of this writing, JavaScript window object has 18 cross-browser methods. Some of the methods, such as alert() and prompt(), have been used in illustrations extensively, and I will not spend time going over them again. Because the window object has so many methods, rather than attempting a large script using all of them, several smaller scripts will be used to illustrate categories of window methods.
In the previous section of this chapter, and in previous chapters in this book, the window object was assumed, so, instead of having to write both the object and the method, only the methods were stated in the scripts. For example, instead of writing this:
window.alert("I don\'t need window to alert.") you can write this:
alert("I don\'t need window to alert.") Likewise, a window method can be prefaced by self. For the most part, though, you do not have to use the window object name. This first script shows how to use two methods in JavaScript, setInterval() and setTimeout(). In showing how to use the methods, the window object is placed in the script to remind you that the method belongs to the window object.
Timing Methods
The first window methods to examine are ones involved in timing actions. The four methods are as follows:
setInterval(script,ms) setTimeout(script,ms) clearInterval(Id) clearTimeout(Id) The setInterval() method repeats a script action every so many milliseconds, initiating the script after the specified number of milliseconds. The setTimeout() method works the same as setInterval(), except that it does not repeat the script. Both clearInterval() and clearTimeout() cancel the actions initiated by the setting methods. In the following script, a coffee cup appears on the screen.
When the left hotspot is clicked, 3 seconds (3,000 milliseconds) elapse and the cup disappears. When the right hotspot is clicked, 5 seconds elapse and then the coffee cup reappears. (See Figure 7.6)
Figure 7.6. The setInterval() and setTimeout() methods add a delay before launching a script.
Two functions named interval() and timeout() do all the work. In the interval() function, a code replaces the coffee cup with a white image that has the effect of removing the cup from the screen. In defining the function, the object and method are placed into a global variable named alpha. The alpha variable is used in the timeout() function to identify the setInterval() method that the developer wants to turn off.
timing.html
<html> <head> <title>Timing Methods</title> <script language="JavaScript"> var cupUp=new Image(); cupUp.src="cupaJava.jpg"; var cupDown=new Image(); cupDown.src="hideJava.jpg"; var alpha; //This variable needs to be global function interval() { alpha=window.setInterval("document.cup.src=cupDown.src",3000); } function timeOut() { window.setTimeout("document.cup.src=cupUp.src",5000); window.clearInterval(alpha); } </script> </head> <body> <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" align="Center"> <tr valign="Middle"> <td align="Center"><img name="cup" src="cupaJava.jpg" alt="java" width="64" height="38"><p> <a href="#" onClick="interval()">Interval</a> <a href="#" onClick="timeOut()">Time Out</a> </td> </tr> </table> </body> </html> To get a good idea of what the setInterval() method does, comment out the line that turns off the interval in the timeout() function:
//window.clearInterval(alpha); By doing so, the interval that makes the coffee cup disappear keeps repeating itself. The cup will keep disappearing after you hit the "Time Out" hotspot as the interval kicks in repeatedly.
Opening, Sizing, and Positioning Windows
This next set of methods includes methods to open and close windows, resize them, and move them. Each of the following window methods is employed in the next example scripts:
open() close() moveBy() moveTo() resizeBy() resizeTo() The open() method has access to most parameters, including height, location, menubar, resizable, scrollbars, status, toolbar, and width. You can use as many or few of these options as you want. Usually, designers have a certain look that they want for a window that is opened from an existing one and tend to turn off everything a Boolean 0, no, or false (as in scrollbars=false). The close() method is always self-referent with a page not part of a frameset. To close an opened window, the window itself must contain the close() method. Within a frameset, however, you can address the frame and window to be closed from another page in the frameset. The other methods are either relative (By) or absolute (To) for movement or resizing. One important difference between browsers can be found in using the moveBy() method. In Netscape Navigator 4 and later, the window stops at the edges of the screen unless UniversalBrowserWrite privileges are invoked; however, Internet Explorer allows a window to be walked right off the screen. (See the note at the end of the script to see how Netscape allows offscreen windows.)
StandardWin.html
<html> <head> <title>Window Control</title> <script language="JavaScript"> function GetStanWin() { open("sampWin.html","sampWin1","toolbar=no,width=200,height=150") //width=640,height=460 recommended design size } function moveRel() { moveBy(20,20) } function moveAbs() { moveTo(20,20) } function shrink() { resizeBy(15,10) } function shrivel() { resizeTo(400,300); } </script> </head> <body bgcolor="white"> <center><p> <h2>Window Control</h2> <form> <input type="button" name="openBut" value="Click to Open New Window" onclick="GetStanWin()"><p>
NOTE
Netscape handles security by using different requests for privileges. One privilege is UniversalBrowserWrite, which allows, among other things, moving windows offscreen.
To invoke the privilege, use the following line:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); The next little sample window has a single method in it, close(). Note that no reference is provided the close() method. Any window with a close() method gets closed, so be careful where you put it.
sampWin.html
<html> <head> <title>Sample Window</title> <script language="JavaScript"> function shutIt() { close(); } </script> </head> <body bgcolor="palegoldenrod"> <h4>This is a sample window.</h4> <a href="#" onClick="shutIt()">Close</a> </body> </html>
Scrolling Methods
This section examines the last group of window methods available for design. Vertical control in an HTML page can be simplified by using anchors that will jump to different vertical positions in a page. However, some of the most interesting designs use a web page's horizontal real estate. Using the different scroll methods in JavaScript, you can create web pages that make full use of the horizontal plane in a web page. In designing pages for monitors with smaller screens, the scroll methods provide a way to have larger pages that are managed horizontally and vertically by scrolling options. Of the three scroll methods available, only two are being discussed. The window.scroll() method has been deprecated and replaced by window.scrollTo() in JavaScript 1.2. The window.scrollBy() method is a relative version of window.scroll().
However, in experimenting with different browsers on different platforms, I found that IE5 on the Macintosh worked with the scrolling method the best, moving either left or right. Both of the major browsers on Windows Me and Windows 2000 had problems scrolling to the right, and the NN 4.7 and NN 6.01 on the Macintosh had similar problems in a movement to the right. Figure 7.7 shows the window scrolling back to the original position on the left.
Figure 7.7. A wide table creates a wide window for scrolling to the left and right.
scroll.html
<html> <head> <title>Scroll</title> <style type="text/css"> .jLeft { font-size: 60pt; font-family: verdana; color:black; font-weight: bold; } a { color:#e39102; } .jRight { font-size:60pt; font-family: verdana; color: #e2d155; font-weight: bold; } </style> <script language="JavaScript"> function goRight() { scroll(600,50); } function goLeft() { scrollBy(-120,0); } </script> </head> <body bgcolor="#e39102"> <table border=0 cellspacing=0 bgcolor="black" width=1200 height=500> <tr> <td align=center valign=middle bgcolor="#e2d155"><span class=jLeft>Java</span><p><a href="#" onClick="goRight()"> Scroll Right</a></td> <td align=center valign=middle bgcolor="#983803"><span class=jRight>Script</span><p><a href="#" onClick="goLeft()"> Scroll Left</a></td> </tr> </table> </body> </html> Summary
This chapter has taken the first major step in introducing the concepts of objects in JavaScript. As was seen, objects exist in a hierarchy in JavaScript, with the window object always being at the top of the heap. Everything else is a property of the window object in one way or another. Objects can be created by the designer/developer to add a needed element to a script, and these objects may have their own properties and values. Likewise, many of the built-in objects have their own properties that provide useful data for fine-tuning and customizing a script to address different configurations that viewers may have.
As you will see in the next chapter, objects are driven by their methods functions associated with a particular object or one of an object's properties. By generating scripts that take advantage of the objects' properties and methods in JavaScript, you can create object-oriented programs. The advantage of object-oriented scripts is that they optimize the script's execution and open up a whole different and important way of organizing and thinking about the use of JavaScript.
| CONTENTS | |
EAN: 2147483647
Pages: 25