Steven Disbrow is the owner of EGO Systems, a computer consulting firm in Chattanooga, TN. In the past, he has worked as a freelance programmer, Webmaster, editor, writer, and technical instructor. His most recent achievement was the creation of the Advance Shipping Notice Web site for the Tennessee Valley Authority. He can be contacted at [email protected].

LAST TIME¹, I discussed how to create new objects with JavaScript. However, the objects we looked at were abstract objects with no ties to the Web browser. This time, we'll review how to integrate your JavaScript objects with the controls on your Web pages. But before we can do that, we need to look at those HTML controls and see how they themselves can be treated as objects.

BROWSER OBJECTS THAT ARE BUILT INTO JAVASCRIPT
Because JavaScript's main purpose is to enhance Web pages, it should be no surprise that most of the elements of those pages, and of the Web browser itself, are accessible from JavaScript as objects. In fact, almost every browser and Web page element has a corresponding JavaScript object. These objects allow you to directly manipulate the browser and the Web page that it loads.

THE window OBJECT
The "window" object is a built-in JavaScript object that represents the entire browser window. The window object contains various properties, methods, and objects that give you access to and control of almost every element of the Web browser. While by no means a complete list, the following shows some of the more useful properties, methods, and objects that belong to the window object:

1. document object—This object represents the HTML file that is loaded into the browser at this moment. This object contains all of the forms, controls, etc., that you will use to interact with users.
   
2. history object—This JavaScript object contains a list of all URLs that you have visited since starting the Web browser. You can use the "history.back()," "history.forward()," and "history.go(n)" methods to move through this list.
   
3. setTimeout method—This method allows you to queue up a JavaScript statement for execution at a later time.
   
4. open method—This method lets you open a new browser window and load an HTML file into it.

1. write method—This lets you write a string out to the Web browser. This string can contain static text, JavaScript variables, or even HTML codes! (Note, however, that this method works properly only when the page is being loaded.)
   
2. cookie property—This property represents the cookie that is associated with this document.
   
3. location object—This object holds the URL of this document. By assigning a URL to the "href" property of this object, you can cause a new Web page to be loaded.
   
4. form object—This object is used to represent a single form (i.e., a set of "form><>/form>" tags) on the Web page. This object contains each of the objects that represent the controls on that form. (See the discussion of the form object that follows.)
   
5. forms array—This is an array of all of the form objects for this page.

1. length property—This property of the forms array tells you how many individual forms are on this page.
2. submit method—Submits a form just as if the user had clicked a "Submit" button.
3. reset method—Resets a form just as if the user had clicked a "Reset" button.
4. "control" objects—A separate control object (each with its own properties) will be created for every "input>," " select>," and "textarea>" tag that you define between your "form><>/form>" tags.

1. select object—A "select" object represents the pop-up menu that is created by a "select>" tag and its "option>" tags. The options (i.e., the menu items) are held in an array, called "options" inside the select object.
2. check box object—Created by an "input type=checkbox>" tag.
3. radio button object—Created by one or more "input type=radio name=rName>" tags. This object represents all the radio buttons with the same name in this form.
4. text object—Created by an "input type=text>" tag.
5. textarea object—Almost exactly the same as a text object, this is created by a set of "textarea>/textarea>" tags.
6. button objects—Created by "input type= button>," "input type=submit>," and "input type=reset>" tags.

1. A document object. This represents the entire HTML file.
2. A form object with the JavaScript name "form1."
3. A text object with the JavaScript name "text1."
4. A check box object with the JavaScript name "checkbox1."
5. A button object with the JavaScript name "button1."

TYING JAVASCRIPT OBJECTS TO HTML CONTROLS
Now that we know how to define our own JavaScript objects and how JavaScript creates objects for HTML elements, the question is, how do we tie the HTML-derived objects to our custom-made JavaScript objects?

The answer is, event handlers. Almost all HTML controls have the ability to receive events from the Web browser and call a JavaScript function in response. All we need to do is plug our objects into the appropriate event handler and the rest will happen automatically. For example, let's take the simple object we created in our last installment ("anObject") and tie it to an HTML button. The code to do this is shown in Listing 2.

The part we are interested in here is the "input>" tag. Notice the "onClick" handler? It's telling the browser that, when the user clicks on this button, it should call the "sayHello" method of the object named "myObj." That's all there is to it!

A JAVASCRIPT check box OBJECT
Now that we can link JavaScript objects to HTML controls, let's look at a more complex task: using JavaScript to make HTML controls easier to use. For this, let us consider the lowly check box. HTML check boxes are rather simple things, but it can still be a pain to manage a large number of them. By creating a JavaScript check box object, we can use the same code to manage any number of HTML check boxes.

The JavaScript code for a check box object is rather simple. The constructor is shown in Listing 3. As expected, this isn't an overly complicated object. It has two instance variables and three methods.

THE "form" AND "name" VARIABLES
To truly "link" a JavaScript object to an HTML control, you must be able to access that control from your JavaScript code. To do that, you have to know two things about the control: the name of the HTML form it is in and the name of the HTML control itself. The "form" and "name" instance variables allow us to keep track of this information for each control. (We've looked at this concept before.²)

Once we have this information, we use it to access our control by using JavaScript's "eval" method.

The eval method takes a string representing a valid JavaScript statement and executes it as if it had been hard-coded in your HTML file. So, for example, the statement:

eval( "alert( 'Hello World!')");

will display an alert window with the string "Hello World!" in it, just as if you had coded:

alert( 'Hello World!')

By keeping the name of our form and the name of our control inside our object, we can create statements that, when passed to the eval method, let us access our HTML control. For example, in the code we will look at in a moment, our form is named "oCheckBoxExample," and our first check box control is named "testBox1." Inside the "oCheckBoxIsChecked" method, you will see the line of code:

eval( 'checked = document.' + this.form + '.' + 
	this.name + '.checked;');

eval( 'checked = 
	document.oCheckBoxExample.testBox1.checked;');

• oCheckBoxIsChecked—This method merely looks at the "checked" property of the check box and returns it.
• oCheckBoxTurnOn and oCheckBoxTurnOff—These methods are even simpler. We simply set the "checked" property of the box to whatever is desired.