1118 Part IV . JavaScript Core Language Reference Better ways exist to intercept and preprocess user input, but the watch()func tion can be a helpful debugging tool when you want to monitor the hidden workings of scripts. Defining object property getters and setters A future version of the ECMA-262 language specification will likely include a pair of facilities called getter and setter. Until such time as the formal syntax is finalized, you can begin to experiment with this technique in NN6 using temporary syntax that adheres to the likely format (but intentionally uses different keywords until the standard is adopted). When the standard is adopted, a subsequent version of NN will include the standard keywords. I introduced the idea of creating a getter and setter for an object briefly in Chapter 14, where the NN6 syntax style extended properties of some W3C DOM objects to include some of the Microsoft-specific (and very convenient) DOM syn tax. Most notably, you can define a getter for any container to return an array of nested elements just like the IE-only document.all collection. The purpose of a getter is to assign a new property to the prototype of an object and to define how the value returned by the property should be evaluated. A setter does the same, but it also defines how a new value assigned to the property should apply the value to the object. Both definitions are written in the form of anonymous functions, such that reading or writing an object s property value can include sophisticated processing for either operation. Getters and setters are assigned to the prototypeproperty of an object, thus enabling you to customize native and DOM objects. The NN6 syntax fashions get ters, setters, and methods of an object s prototype with the following syntax: object.prototype.__defineGetter__( propName , function) object.prototype.__defineSetter__( propName , function) Note that the underscores before and after the method names are actually pairs of underscore characters (that is, _, _, defineGetter, _, _). This double under score was chosen as a syntax that the ECMA standard will not use, so it will not conflict with the eventual syntax for this facility. The first parameter of the method is the name of the property for which the get ter or setter is defined. This can be an existing property name that you want to override. The second parameter can be a function reference; but more likely it will be an anonymous function defined in place. By using an anonymous function, you can take advantage of the context of the object for which the property is defined. For each property, define both a getter and setter even if the property is meant to be read-only or write-only. To see how this mechanism works, let s use the getter and setter shown in Chapter 14 to add an innerTextproperty to HTML elements in NN6. This property is read/write, so functions are defined for both the getter and setter. The getter defi nition is as follows: HTMLElement.prototype.__defineGetter__( innerText , function () { var rng = document.createRange() rng.selectNode(this) return rng.toString() })
If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.

1117Chapter 41 .Functions and Custom Objects Object watcher methods NN4+ includes two special functions for objects that were designed primarily for use with external debugging tools: watch() and unwatch(). The watch()method instructs JavaScript to keep an eye on a particular property in an object (any JavaScript-accessible object) and execute a function when the value of the property changes by assignment (that is, not by user interaction). You can see how this works in the simplified example of Listing 41-7. Three buttons set the valueproperty of a text box. You can turn on the watch()method, which calls a handler and passes the name of the property, the old value, and the new value. An alert in the listing s function demonstrates what those values contain. Listing 41-7: Object Watching in NN4+ Watching Over You

---

Enter text here:

Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

1116 Part IV . JavaScript Core Language Reference new JavaScript-written page displays the information in an instant. This requires only the image to be downloaded unless the image was precached, as described in the image object discussion in Chapter 18. In this case, everything works instantaneously no waiting for page after page of catalog. If, by now, you think you see a resemblance between this object-within-an-object construction and a relational database, give yourself a gold star. Nothing prevents multiple objects from having the same subobject as their properties like multiple business contacts having the same company object property. More ways to create objects The examples in Listings 41-5 and 41-6 show a way of creating objects that works with all scriptable browsers. If your audience is limited to users with more modern browsers, additional ways of creating custom objects exist. From NN3+ and IE4+, you can use the new Object()constructor to generate a blank object. From that point on, you can define property and method names by simple assignment, as in the following: var Earth = new Object() Earth.diameter = 7920 miles Earth.distance = 93 million miles Earth.year = 365.25 Earth.day = 24 hours Earth.showPlanet = showPlanet // function reference When you create a lot of like-structured objects, the custom object constructor shown in Listing 41-6 is more efficient. But for single objects, the new Object() constructor is more efficient. NN4+ and IE4+ scripters can also benefit from a shortcut literal syntax for creat ing a new object. You can set pairs of property names and their values inside a set of curly braces, and you can assign the whole construction to a variable that becomes the object name. The following script shows how to organize this kind of object constructor: var Earth = {diameter: 7920 miles , distance: 93 million miles , year: 365.25 , day: 24 hours , showPlanet:showPlanet} Colons link name/value pairs, and commas separate multiple name/value pairs. The value portion of a name/value pair can even be an array (using the […]con structor shortcut) or a nested object (using another pair of curly braces). In fact, you can nest arrays and objects to your heart s content to create exceedingly com plex objects. All in all, this is a very compact way to embed data in a page for script manipulation. If your CGI, XML, and database skills are up to the task, consider using a server program to convert XML data into this compact JavaScript version with each XML record being its own JavaScript object. For multiple records, assign the curly-braced object definitions to an array entry. Then your scripts on the client can iterate through the data and generate the HTML to display the data in a variety of forms and sorted according to different criteria (thanks to the JavaScript array- sorting powers).
You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.

1115Chapter 41 .Functions and Custom Objects Adding a custom method You re approaching advanced subject matter at this point, so I merely mention and briefly demonstrate an additional power of defining and using custom objects. A custom object can have a reference to another custom object as a property. Let s extend the planet example to help you understand the implications. Say that you want to beef up the planet page with a photo of each planet. Each photo has a URL for the photo file; each photo also contains other information, such as the copyright notice and a reference number, which displays on the page for the user. One way to handle this additional information is to create a separate object definition for a photo database. Such a definition may look like this: function photo(name, URL, copyright, refNum) { this.name = name this.URL = URL this.copyright = copyright this.refNum = refNum } You then need to create individual photo objects for each picture. One such definition may look like this: mercuryPhoto = new photo( Planet Mercury , /images/merc44.gif , (c)1990 NASA , 28372) Attaching a photoobject to a planetobject requires modifying the planetconstructor function to accommodate one more property. The new planet constructor looks like this: function planet(name, diameter, distance, year, day, photo) { this.name = name this.diameter = diameter this.distance = distance this.year = year this.day = day this.showPlanet = showPlanet this.photo = photo // add photo property } Once the photo objects are created, you can then create each planet object by passing one more parameter a photo object you want associated with that object: // create new planet objects, and store in a series of variables Mercury = new planet( Mercury , 3100 miles , 36 million miles , 88 days , 59 days , mercuryPhoto) To access a property of an photo object, your scripts then have to assemble a reference that works its way through the connection with the planetobject: copyrightData = Mercury.photo.copyright The potential of custom objects of this type is enormous. For example, you can embed all the copy elements and image URLs for an online catalog in a single document. As the user selects items to view (or cycles through them in sequence), a
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

1114 Part IV . JavaScript Core Language Reference an eval()function, look for ways to improve efficiency such that you can reference an object by string. The way to accomplish that streamlining for this application is to place the objects in an array whose index values are the planet names. To assign the custom objects in Listing 41-6 to an array, first create an empty array and then assign the result of each object constructor call to an entry in the array. The modified code section looks like the following (formatted to fit this printed page): // create array var planets = new Array() // populate array with new planet objects planets[ Mercury ] = new planet( Mercury , 3100 miles , 36 million miles , 88 days , 59 days ) planets[ Venus ] = new planet( Venus , 7700 miles , 67 million miles , 225 days , 244 days ) planets[ Earth ] = new planet( Earth , 7920 miles , 93 million miles , 365.25 days , 24 hours ) planets[ Mars ] = new planet( Mars , 4200 miles , 141 million miles , 687 days , 24 hours, 24 minutes ) planets[ Jupiter ] = new planet( Jupiter , 88,640 miles , 483 million miles , 11.9 years , 9 hours, 50 minutes ) planets[ Saturn ] = new planet( Saturn , 74,500 miles , 886 million miles , 29.5 years , 10 hours, 39 minutes ) planets[ Uranus ] = new planet( Uranus , 32,000 miles , 1.782 billion miles , 84 years , 23 hours ) planets[ Neptune ] = new planet( Neptune , 31,000 miles , 2.793 billion miles , 165 years , 15 hours, 48 minutes ) planets[ Pluto ] = new planet( Pluto , 1500 miles , 3.67 billion miles , 248 years , 6 days, 7 hours ) The supreme advantage to this approach comes in a modified doDisplay() function, which can use the string value from the SELECT element directly without any conversion to an object reference: // called from push button to invoke planet object method function doDisplay(popup) { i = popup.selectedIndex planets[popup.options[i].text].showPlanet() } The presence of so many similar objects cries out for their storage as an array. Because the names play a key role in their choice for this application, the named index values work best; in other situations, you may prefer to use numeric indexes to facilitate looping through the array.
Check Tomcat Web Hosting services for best quality webspace to host your web application.

1113Chapter 41 .Functions and Custom Objects Figure 41-1: An external and internal face-lift for an earlier application The onChange event handler in the SELECT list passes that SELECT element s reference to the doDisplay() function. In that function, the SELECT object is assigned to a variable called popup to help you visualize that the object is the popup list. The first statement extracts the index value of the selected item. Using that index value, the script extracts the text. But things get a little tricky because you need to use that text string as a variable name the name of the planet and append it to the call to the showPlanet() method. To make the disparate data types come together, use the eval()function. Inside the parentheses, extract the string for the planet name and concatenate a string that completes the reference to the object s showPlanet() method. The eval() function evaluates that string, which turns it into a valid method call. Therefore, if the user selects Jupiter from the pop-up list, the method call becomes Jupiter.showPlanet(). Now it s time to look back to the showPlanet() function/method definition at the top of the script. When that method runs in response to a user selection of the planet Jupiter, the method s only scope is of the Jupiterobject. Therefore, all references to this.propertyName in showPlanet()refer to Jupiter only. The only possibility for this.name in the Jupiterobject is the value assigned to the name property for Jupiter. The same goes for the rest of the properties extracted in the function/method. Creating an array of objects In Listing 41-6, each of the planet objects is assigned to a global variable whose name is that of the planet. If the idea of custom objects is new to you, this idea probably doesn t sound so bad because it s easy to visualize each variable representing an object. But, as shown in the doDisplay()function, accessing an object by name requires use of the eval() function to convert a string representation to a valid object reference. While it s not too important in this simple example, the eval() function is not particularly efficient in JavaScript. If you find yourself using
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check mysql web server services.

1112 Part IV . JavaScript Core Language Reference Next comes the object constructor function, which performs several important tasks. For one, everything in this function establishes the structure of your custom object: the properties available for data storage and retrieval and any methods that the object can invoke. The name of the function is the name you use later to create new instances of the object. Therefore, choosing a name that truly reflects the nature of the object is important. And, because you probably want to stuff some data into the function s properties to get one or more instances of the object loaded and ready for the page s user, the function definition includes parameters for each of the properties defined in this object definition. Inside the function, you use the this keyword to assign data that comes in as parameters to labeled properties. For this example, I use the same names for both the incoming parameter variables and the properties. That s primarily for conve nience (and is very common practice), but you can assign any variable and prop erty names you want and connect them any way you like. In the planet() constructor function, five property slots are reserved for every instance of the object whether or not any data actually is placed in every property (any unas signed slot has a value of null). The last entry in the planet()constructor function is a reference to the showPlanet() function defined earlier. Notice that the assignment statement doesn t refer to the function with its parentheses just to the function name. When JavaScript sees this assignment statement, it looks back through existing defini tions (those functions defined ahead of the current location in the script) for a match. If it finds a function (as it does here), JavaScript knows to assign the func tion to the identifier on the left side of the assignment statement. In doing this task with a function, JavaScript automatically sets up the identifier as a method name for this object. As you do in every JavaScript method you encounter, you must invoke a method by using a reference to the object, a period, and the method name followed by a set of parentheses. You see that syntax in a minute. The next long block of statements creates the individual objects according to the definition established in the planet() constructor. Similar to an array, an assign ment statement and the keyword new create an object. I assign names that are not only the real names of planets (the Mercuryobject name is the Mercury planet object) but that also can come in handy later when the doDisplay() function extracts names from the pop-up list in search of a particular object s data. The act of creating a new object sets aside space in memory (associated with the current document) for this object and its properties. In this script, you create nine object spaces, each with a different set of properties. Notice that no parameter is sent (or expected at the function) that corresponds to the showPlanet() method. Omitting that parameter here is fine because the specification of that method in the object definition means that the script automatically attaches the method to every version (instance) of the planet object that it creates. The last function definition, doDisplay(), is invoked whenever the user makes a choice from the list of planets in the upper frame. This function is also invoked via the frameset s onLoadevent handler so that an initial table is displayed from the default selected item (see Figure 41-1). Invoking the function from the upper frame s onLoad event handler can cause problems (such as the failure of the other frame) if the frameset is not completely loaded.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

1111Chapter 41 .Functions and Custom Objects var Earth = new planet( Earth , 7920 miles , 93 million miles , 365.25 days , 24 hours ) var Mars = new planet( Mars , 4200 miles , 141 million miles , 687 days , 24 hours, 24 minutes ) var Jupiter = new planet( Jupiter , 88,640 miles , 483 million miles , 11.9 years , 9 hours, 50 minutes ) var Saturn = new planet( Saturn , 74,500 miles , 886 million miles , 29.5 years , 10 hours, 39 minutes ) var Uranus = new planet( Uranus , 32,000 miles , 1.782 billion miles , 84 years , 23 hours ) var Neptune = new planet( Neptune , 31,000 miles , 2.793 billion miles , 165 years , 15 hours, 48 minutes ) var Pluto = new planet( Pluto , 1500 miles , 3.67 billion miles , 248 years , 6 days, 7 hours ) // called from push button to invoke planet object method function doDisplay(popup) { i = popup.selectedIndex eval(popup.options[i].text + .showPlanet() ) } // end script –>

The Daily Planet

---

Select a planet to view its planetary data: Mercury Venus Earth Mars Jupiter Saturn Uranus Neptune Pluto

The first task in the Head is to define the function that becomes a method in each of the objects. You must do this task before scripting any other code that adopts the function as its method. Failure to define the function ahead of time results in an error the function name is not defined. If you compare the data extraction methodology with the function in the array version, notice that the parameter for the index value is gone and the reference to each property begins with this. Later, I return to the custom method after giving you a look at the rest of the Head code.
Looking for affordable and reliable webhost to host and run your business application? Then look no more and go to servlet web hosting services.

1110 Part IV . JavaScript Core Language Reference One item to point out in Listing 41-5 is that because the lower frame isn t filled until the upper frame s document loads, you need to assign some kind of URL for the SRCattribute of the second frame. Rather than add the extra transaction and file burden of a blank HTML document, here you use the javascript:URL to invoke a function. In this instance, I want the value returned from the function (a blank HTML page) to be reflected into the target frame (no voidoperator here). This method provides the most efficient way of creating a blank frame in a frameset. Listing 41-6: Object-Oriented Planetary Data Presentation