Advanced Objects

JavaScript Tutorial 6 More Objects and Properties

You learned about objects and methods in the last tutorial. But, there's one more concept regarding objects that we need to discuss before we move on - Properties. Think of properties as characteristics of an object. Let's consider our car.

Here is our car. As you know, one of the distinguishing characteristics of our car is its color We would represent this as:
car.color

This reference would obviously represent red'.

or car.color= red

That's pretty much all there is to properties. But, let's take it one step further. Let's consider our gas tank:

As you know, we would represent this sub-object as:
car.gastank

You also already know what the JavaScript would look like to fill this gas tank up with gas. It would look like this:

car.gastank.fill(gastype)

But, I think we forgot something very important. If we try to fill our gas tank with gas when it is full, it will overflow, right? Right. So, we need to check our tank to see if we need gas.

Before you fill up your gas tank, you decide whether it is full or empty. You look at your gas gauge to decide if you need gas. What does that gauge tell you? It tells you something about your gas tank. In other words, it relays information about a property of your gastank - in this case how full it is.. If we looked at this gauge as if it were a JavaScript command, it might look something like this:

car.gastank.levelOfGas

If your gastank was full then:

full = car.gastank.levelOfGas

First we referenced the object which we wanted information about, then we named the type of information that we wanted. The type of information we wanted - levelOfGas - was a property of gastank.

Let's say that we don't know the level of gas in our gastank.

?? = car.gastank.levelOfGas

How do we find out the level of gas in our gas tank? Easy - we simply reference the levelOfGas property. We could in fact use a variable to hold the value of levelOfGas like this:

gasLevel = car.gastank.levelOfGas

Our gasLevel variable now holds the value of the amount of gas in our tank. We could now use this value and, for instance, write it to the document:

window.document.write(gasLevel);

Get It??

In conclusion of our real-life comparison to objects, let's make this point:

Properties are Characteristics of Objects

Let's apply these concepts to JavaScript. A good place to start is the window object. Window - has no properties, it only has sub-objects. So, instead let's start with document. Document is a sub-object of window. Really, the document is WHAT'S IN YOUR PAGE. document does have some properties - for instance title. The title property of document represents the value that is displayed in the title bar of a document. Let's access that property of your document.

Type the following into CodeRunner below: Click here to maximize

<html>
<head>
<title>
(Your title)
</title>
</head>
<body bgcolor=white>

<script language=javascript>

</script>

</body>
</html>

Go 'Preview'. When the page comes up, an alert window will display with the same value as the title bar of your document. You just accessed a property of document. Try altering the your script to access the following properties (make sure you pay attention to case):

bgColor
linkColor
vlinkColor

Cool huh? Now, sometimes we can use Javascript to set these values.

Type the following into CodeRunner below: Click here to maximize

<html>
<head>
<title>
(Your title) </title>
</head>
<body bgcolor=white>

<script language=javascript>

</script>

</body>
</html>

As you can see, you defined the background color using the document property bgcolor of your document as "white" according to your <body> tag. But, even though it may have been white for a second, it ended up being blue because you reset the bgColor property with JavaScript. Try doing the same thing to the title property - try to change the title bar value to something else. Then come back.

Bummer, it didn't work. That's because not all of the properties that you can access with JavaScript can be set with JavaScript. But don't worry, most of them can.

Forms

So you might be saying, "Yeah, that's really cool. But, I want to do more than just change some colors of my page." No problem. Let's talk about what else you can do, and discuss what some of the other objects and properties that you can use are. I think that the form object will illustrate what we need to see, so let's use them as an example. The UserActive HTML course only briefly discussed forms (For a quick review of forms...Click here) . This was on purpose. Forms don't really do you any good unless you know CGI (Common Gateway Interface) or JavaScript. I think now is the appropriate time to discuss forms in more detail. What we need to do is - only for a moment - take a step back to review HTML to learn how to make forms. Here we go!

You've seen forms. They're the things you get to type stuff into, click buttons on, etc. Here are some examples:

Click here
To see examples of forms

The first thing you need to know to make a form is that any form input (you'll see what that is in just a minute) must be contained by a form tag. Enter this form tag into your document (make your document look like this):

Type the following into CodeRunner below:
Click here to maximize

<html>
<head>
<title>
(Your title) </title>
</head>
<body bgcolor=white>

<form name=formname>

</form>
</body>
</html>

Let's look at what this does (don't click 'Preview' yet).

In red you see a basic HTML tag which declares a form. In this case, it declares the container tag for the form.

In green you see an attribute to the form tag. This attribute gives the form a name. (the name will be used to reference the form).

In blue you see the closing container tag for the form. This tells the browser that you are completing the form.

Now, this form doesn't do anything yet. Click 'Preview'. You don't see anything. We have to tell the browser to show some things to let people input data. Let's add an input. Add the red stuff to your page (after we add each input type, click 'Preview' to see what it made):

Type the following into CodeRunner below: Click here to maximize

<html>
<head>
<title>
(Your title) </title>
</head>
<body bgcolor=white>

<form name=formname>

<input type=text size=20 name=textinput><br>
</form>
</body>
</html>

You just added input of type text to your form. Click 'Preview' and type some stuff into it when you get there.

OK, let's see what all we did to do that:

<input type=text size=20 name=textinput>

In red you see the tag name. This tells the browser that you are defining some type of form input.

In blue you see the type attribute. This attribute tells the browser that this input is going to be a text field.

In green you see the size attribute. This attribute tells the browser that this text input is going to be 20 characters long.

In purple you see the name attribute. This attribute tells the browser that this input is going to be named textinput. (got any idea what we're going to use that for?)

Finally, notice that this input comes between the <form> and </form> tags. That is because - as you already know - all form inputs must be contained by a form.

Let's try some other input types.

Type the following into CodeRunner below: Click here to maximize

<html>
<head>
<title>
(Your title) </title>
</head>
<body bgcolor=white>

<form name=formname>

<input type=text size=20 name=textinput><br>
I'm Cool <input type=checkbox value="I'm Cool" name=checkinput><br>
</form>
</body>
</html>

That input created a checkbox input. When the checkbox is checked, it will have the value "I'm Cool".

Type the following into CodeRunner below: Click here to maximize

That input created a radio button input (a set of buttons of which only one can be selected at any give time.) Notice that you created two radio inputs with the same name. This creates a set of buttons linked together so that only one or the other can be selected at any given time. When one is selected, the form input named 'radioinput' has the value of the selected radio input.

Type the following into CodeRunner below: Click here to maximize

That input created a textarea input. Notice that it has two tags - an opening and a closing, and that it is not defined using an <input> tag. Instead it has opening and closing - <textarea> and </textarea> - tags. This textarea will have 5 lines and be 20 characters long.

Type the following into CodeRunner below:&nbps; Click here to maximize

<html>
<head>
<title>
(Your title) </title>
</head>
<body bgcolor=white>

<form name=formname>

<input type=text size=20 name=textinput><br>
I'm Cool <input type=checkbox value="I'm Cool" name=checkinput><br>
Yes <input type=radio value='yes' name=radioinput><br>
No <input type=radio value='no' name=radioinput><br>
<textarea cols=5 rows=20 name=textareainput><br>
</textarea><br>
<select name=selectinput><br>
<option name=selectinput value='Value1'>Value 1
<option name=selectinput value='Value2'>Value 2
<option name=selectinput value='Value3'>Value 3
</select><br>
</form>
</body>
</html>

That input type created a select object which is a drop-down list. The items that are defined by the <option> tags are the different options that the user is given. Again, notice how each of the name values are the same. This links the input elements together so that only the selected values are represented by the select input.

And finally...

Type the following into CodeRunner below: Click here to maximize

That may be the most important input of all because as you will see later, you use this a lot with JavaScript.

That input created a click-able button. The label displayed on the button is "Click Me". I want you remember something for later ... Button inputs have event handlers (like onClick. We'll talk more about what to do wi th them later.

So you know how to make forms and inputs, but you don't see why I made you go through learning that. Well, forms are something that are used commonly in JavaScript, and they are a good example of the use of Properties. That's right, there's that word again - Properties.

Before we get into that, let's use the form that you just created to talk a little more about objects. As you probably guessed earlier, we named each of our form elements for a reason. That reason was so that we could refer to those objects at a later time. You see, a form is an object - and because it is inside the body of an HTML document, it is a sub-object of document. So, if we wanted to refer to our form, and we recalled the object referral syntax, we would say:

document.formname

And, if we wanted to refer to one of our form inputs we would say:

document.formname.inputname

For example, for the button you just made a little bit ago. we would reference it like this:

document.formname.buttoninput

So, what does this tell us? It tells us that form is a sub-object of document, and form inputs are sub-objects of a form. This really makes sense if you look at the placement of all of the tags. Form declarations come in between <body> and </body> - that is, they are contained by the HTML document's body. Furthermore, form inputs are sub-objects of form, and correspondingly, for inputs are contained by <form> and </form>, so it makes sense that inputs would inherit from form.

Now, what good does it do for us to only reference a form input? The answer is (drum-roll)
Nothing!!

But, what does do us some good would be finding out some characteristics of our form inputs - for instance the value typed into a text field. Guess what ... value is a property of text inputs. The value property represents what is typed into the text field.

Let's try accessing the value property of our text object and setting it. Add the bold stuff to your document:

Type the following into CodeRunner below: Click here to maximize

Click 'Preview' to see what this does, and then come back.

Neat, huh? It put your name into the text field. How did it do this? Well, it referenced the value property of the text object named textinput , and set it equal to whatever you typed in place of "enter your name here". Get it? Le t's try another:
Click here to maximize

Go try it. Did you see that it made your checkbox have a check mark in it? It did. You see, the checked property of a checkbox represents the current state of that checkbox in terms of a logical . A 1 means that the checkbox is checked; a 0 means the checkbox is unchecked.

Now, all we have done so far is set the properties of form objects. But, in the case of all input properties, they can be both set and read by JavaScript.

What I want you to learn from this tutorial is this: Objects have properties that represent certain characteristics of that object. In all cases those property values can be read, and in many cases, they can also be set.

As we continue through these next tutorials, we are going to work a lot with different properties. But, if you remember that the syntax for properties is:
objectReference.propertyName

You'll have no trouble understanding what we are doing.

Save your stuff!!!