header.gif (6771 bytes)

Lesson 5-More on objects & accessing forms

Ok, we are ready to see how to access forms-manipulate them, validate them, etc. Before we start diving in head first, lets just take a even closer look at the object concept of JavaScript, which will all tie in with accessing forms. In this section, we'll look at:

Red_CurlyC035.gif (285 bytes) More on the object model of JavaScript

Whether are not you know it, almost everything on your page is an instance of a object. Since they are objects, like the window object, they can be accessed and played around with. Now that we know a little more about objects, lets talk about what objects really are, and where things stand in terms of all the objects in JavaScript. An object is a "tool" that contains properties and methods, allowing it to do things. Lets use a typical example. In real life, a car would be the object, the leather seats, power steering would be the properties, and the car's ability to move around is the object's method. In JavaScript, its just like that, however, properties of one object may itself be another object, which in turn contains other properties. This is important, and I will talk a little more about this. The below is the JavaScript Object tree, which lists, in order, each object, and also, the precedence of the objects:

Red_CurlyC035.gif (285 bytes) The JavaScript Object Tree

objhier.gif (3174 bytes)
IMPORTANT: THIS IMAGE WAS TAKEN FROM THE NETSCAPE JAVASCRIPT AUTHORING GUIDE. FULL CREDIT FOR THE ABOVE IMAGE GOES THERE.

If you want to access something further down below the tree from the object "window", you use the (dot) operator to specify your choice. For example, if you want to write something to the current document, you would do something like the following: window.document.write("Hola") However, we all know that the "window" part is omitted for most references. The reason why you could write document.write("Hola")instead of window.document.write("Hola")is because JavaScript assumes you are talking about the current window. Lets have a look at how form objects are accessed:

Red_CurlyC035.gif (285 bytes) Accessing forms using JavaScript

To access a form within a page, do this:
document.formname.elementname.value

For example, say you have a form like this:

<form name="test">
<input type="text" size="10" value="good"
name="boxes">
</form>

Notice that we have given the form, and the element, a name. This is to access and point to what you want when using JavaScript. Ok, now we want JavaScript to alert us the value inside this box.

<input type="button" name="g" value="Click Here>>"
onclick="alert(document.test.boxes.value)"

Click here for output:

Note how we got to the value of the element of the form object-by going down the JavaScript object tree. Try altering the text in the text box, and try clicking above again. You will see that it will alert the new entry each time.

Ok, so whenever you create a form, always remember to give both the form and the element a distinct name in which JavaScript can then acquire to access the element. Is this the only way? No. You could use arrays, but I will not talk about that in this section; this is generally the better way to access forms in that it will not confuse you by asking you to keep track of each form using its index number.

Lets do an illustration with multiple boxes.

Basic Calculator-Enter a math expression in the first box, and than use the calculate button to get the answer. Ex: 25*(6-5)

.
Answer:

<form name="example">
<input type="text" size="20" name=
"calculator">

<input type="button" name="B1" value="Calculate" onclick="cal()">

<input type="reset" name="B2" value="Reset">

Answer:<input type="text" size="20" name="answer">
</form>

<script>
function cal()
{
document.example.answer.value=
eval(document.example.calculator.value)
}
</script>

The key here is the code within the script tags:

document.example.answer.value=eval(document.example.calculator.value)

Basically, we are saying: put whatever is in the right-hand-side, and stuff it into the left hand side. Hay, but wait! What is eval(.................) in the above? It is a built in function that "evaluates" what's in the first box before stuffing it into the second one. eval(something) is a built in function that "makes sense" of any thing you put in the function and than outputs it. If we simply do this, without using the eval function:

document.example.answer.value=document.example.calculator.value

If we type: (3*5)+7
You would get:
(3*5)+7
As opposed to:
22

Don't expect to understand fully the eval function right now...just understand its role in this example. We will come back to this function, because its such an important one; in the mean time, don't worry about it. Now, there is one small problem with this example: Try inputting letters (ie: l*we) into it, and you will get an error message. That's because, of course, you cannot calculate letters, but your code does not know that! It attempts to, and out pops JavaScript errors-we shall discuss validating forms in the next lesson.

Finally, lets do another example using what we've learned before, event handlers, with forms. You may have seen the below example used on the net:

Move your mouse over the links:

.

Here's the "core" code for the first link:

<a href="resources.htm"
onMouseover="document.myform.mytextarea.value='blablabla...'
onMouseout="document.myform.mytextarea.value=''"
>Web Resources</a>

As you can see, we used the event handers we had learned before to give the textarea box different text, depending on the state of the mouse. When the mouse moves over it, we supply the box with the text we want it to display, and when it moves out, we reset it. Note that resetting it is by giving it a value of null, or ''

NOTE:
When we want to "line break" text using JavaScript in a textarea, we use "\n" If you don't line break text when it exceeds the width of the textarea box, scrollbars will appear to accommodate the new text. For example:
document.a.b.value="Text with no line breaks...very ugly."

document.a.b.value="Text WITH line\n breaks...very good!."

Note: IE 4.x will automatically line-break text in either case, so that might be why you're saying to yourself: "I don't see no difference in the two!"

Lesson 6