Objects, properties
and methods.
What's an object? An object in javascript is a window, a frame, an image, a
form, a text box, the document itself, a radio button... you get the idea.
What is a property? A property is some characteristic of an object... the location
of a document, the background color of a document, whether a radio box is checked
or unchecked, the width of an image, etc.
What is a method? A method is basically a function. A method does something.
For example close() is a method. window.close() closes a window. Not too much
too it.
This is a basic explanation of these three terms (object, property and method).
In reality it can be a little more complicated than that, but for our purposes,
it's clozenuff.
So, what do we do with objects and properties and stuff?? Well, let's get a
little more background. Take for example the text box below.
This is the HTML code for that form...
<FORM NAME="myform">
<INPUT TYPE="text" NAME="mytextbox" VALUE="">
</FORM>
Follow me here. We have the browser window...
window
In the window is this document...
window.document
In the document is a form...
window.document.form
In the form is an input...
window.document.form.input
And the input has a value...
window.document.form.input.value
(Right this moment the value is nothing, but nothing is still a value.)
This is an object hierarchy. This is how you would refer to different properties
of different objects on the page. An imaginary object hierarchy might be...
world.country.state.city.street.house.person.name
This would define the name property of a person. What about his height?
world.country.state.city.street.house.person.height
This is how you must begin to think about a simple web page if you're going
to manipulate its objects and their properties.
Let's go back to the text box we saw earlier. It's HTML code again is
<FORM NAME="myform">
<INPUT TYPE="text" NAME="mytextbox" VALUE="">
</FORM>
And we can theoretically refer to any value contained in that box with...
window.document.form.input.value
Now there's one more thing, a document can obviously contain more than one form,
so to disinguish one form from another, we NAME our forms. Note the form above
is named myform. Same goes with form inputs. A form can have multiple inputs,
so to specify one in particular, we call it by name (in this case there's only
one input and it's name is mytextbox).
If we then use the name of the form and the name of the input, we can now call
on that particular box's value by saying...
window.document.myform.mytextbox.value
Ok Joe, do tell, what the heck do we do with it now?
Well kid, try this on for size...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function HelloBox()
{
alert (window.document.myform.mytextbox.value);
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="mytextbox" VALUE="">
</FORM>
<BR>Enter something in the box and click <A HREF="javascript:HelloBox()">here</A>.
</BODY>
</HTML>
Try it.
Pretty neat I'd say. Do you see what's going on? Study it until you do
| Next>> | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||