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].
the objects we looked at were abstract objects with no ties to the Web browser. This time,
But before we can do that, we need to look at those HTML controls and see how they themselves
can be treated as objects.
These objects allow you to directly manipulate the browser and the Web page that it loads.
THE window OBJECT
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:
THE document OBJECT
- 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.
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.
- setTimeout method—This method allows you to queue
- open method—This method lets you open a new browser
window and load an HTML file into it.
The "document" object is probably the object that you will work
with the most. It represents the Web page that is loaded in the browser and contains all of the
elements (forms, controls, links, etc.) that you will use to interact with users. Here is a list
of some of the more useful objects and methods in the document object:
THE form OBJECT/forms ARRAY
- write method—This lets you write a string out to
(Note, however, that this method works properly only when the page is being loaded.)
- cookie property—This property represents
the cookie that is associated with this document.
- 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.
- 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
- forms array—This is an array of all of the
form objects for this page.
The "form" object is the object that contains all of the actual
controls (check boxes, buttons, etc.) that you use to interact with the user.
The "forms" array is an array that holds all of the
form objects on the page. Here are some of the important
properties and methods of a form object and the forms array:
- length property—This property of the forms
array tells you how many individual forms are on this page.
- submit method—Submits a form just as if
the user had clicked a "Submit" button.
- reset method—Resets a form just as if
the user had clicked a "Reset" button.
- "control" objects—A separate control
object (each with its own properties) will be created for every
select>," and "textarea>" tag that you
define between your "form><>/form>" tags.
object is created when the Web page is loaded. Those objects, and their corresponding HTML tags are:
- 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.
- check box object—Created by an "input type=checkbox>" tag.
- 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.
- text object—Created by an "input type=text>" tag.
- textarea object—Almost exactly the same as a text object, this is created by a set of "textarea>/textarea>" tags.
- button objects—Created by "input type=
button>," "input type=submit>," and "input type=reset>" tags.
Take a look at the block of HTML code shown in Listing 1.
WHAT'S IN A NAME?
- A document object. This represents the entire HTML file.
Notice in the example that we've given each element on our page a "name="
creates for these HTML elements. For this reason, it is very important that you give all of your HTML
controls and forms names! These names will allow you to quickly and easily access your HTML elements
variable names! This means no spaces, and the names must start with an alphabetic character or underscore!
USING NAMES TO ACCESS HTML ELEMENTS
thinking ahead, you may already realize how to use this hierarchy to get to the object you want.
But, in case you don't, here's an example.
A text object has a property called "value."
This "value" property contains the actual text that is displayed
in the text box. So, if we wanted to get the text out of our "text1"
text box (which we defined in Listing 1) and put it in a variable called
"theText", we would code:
theText = document.form1.text1.value;
Notice that, in order to get to the value, we proceed from the largest object
(the document object) down to the smallest
(the text object).
for HTML elements, the question is, how do we tie the HTML-derived objects to our custom-made
The answer is, event handlers. Almost all HTML controls have the ability to receive
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!
check boxes are rather simple things, but it can still be a pain to manage a large number of them.
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 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.2)
Once we have this information, we use it to access our control by using
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;');
parentheses. The resulting string will give us an eval call that looks like
eval( 'checked =
it had been hard-coded directly in the HTML file.
THE oCheckBox METHODS
shows all the source code needed to implement and test our check box object. The methods of the
oCheckBox object are:
As you can see, this is a very simple object, but we can easily reuse it to manage as many check
boxes as are needed.
- 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.
Of course, check boxes are very simple controls, and they don't usually need much "managing." But,
this simple example should already have you thinking about how to use this same technique to
enhance other HTML controls. So, next time, we'll look at how to use this technique to give
new features (like data validation) to other HTML controls.
1. Disbrow, S., "Your own private Idaho()," Java Report, Vol. 4, No. 4, Apr. 1999, pp. 66-69.
Quantity reprints of this article can be purchased by phone: 717.560.2001, ext.39 or by email: [email protected].