Javascript Tutor - Lesson 6

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 command. A method does something. For example, close() is a method. window.close() closes a window object. Not too much to 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 that particular person. What about his height?

 
world.country.state.city.street.house.person.height

We could back up a little and say that population might be a property of the city object...

 
world.country.state.city.population

This is how you must begin to think about a simple web page if you're going to manipulate its objects and their properties.

Now 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>

We can generically refer to a value contained in a text box with...

 
window.document.form.input.value

Now there's one more thing, a document can obviously contain more than one form, so one way to distinguish one form from another, is to 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 will 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, that was confusing (but interesting). But do tell, what the heck do we do with it now?

Well, try this on for size...

 
<html>
<head>
<title></title>
 
<script type="text/javascript">
 
function HelloBox()
{
   alert(window.document.myform.mytextbox.value);
}
 
</script>
 
</head>
<body>
 
<form name="myform">
<input type="text" name="mytextbox" value="">
</form>
 
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.

I'll jump ahead here and have you take a quick look at the JavaScript Authoring Guide included with this tutorial. In that reference, near the bottom of the left frame, you'll find links to Objects, Properties and Methods. It will give you an idea of some of the things you have to work with.

<< BACK NEXT >>