Page 1/4 of the JavaScript elementary tutorial (Lesson 5)

Now you know the basic knowledge of computer programming. Next we will continue to study the Document Object Model-DOM ). The DOM click link starts from the window object which is a Document object in each window object ). We will focus on document objects to see how to use them to obtain information from your users and dynamically display new information.

We have read an image array (Images array), an attribute of the file object ). In Lesson 3rd, the 1st images in the file can be modified by changing its src attribute.

Example:

Registry.document.images%0%.src%'some_new_picture.gif ';

This command will change the first image in the document to a new image named some_new_picture.gif. In the DOM, each image in the Image array is also an object. Therefore, the images [0]. src command plays a role as it does for objects. It means to call the Image [0] object in the Image from the image array and set its src attribute. Translate it into: translate.

The Image object has many other interesting attributes. For example, you can let JavaScript check whether an Image has been fully loaded before doing anything else. However, we can only talk about these attributes in future courses. Today, we will talk about feedback forms and how to apply feedback forms in JavaScript.

The feedback form is part of the HTML 1.0 specification. Many people do not know much about it. Many people think that it can only be programmed by the user-side CGI. In fact, even if you are not a CGI programmer, feedback forms provide you with many features. JavaScript can be used to add various functions to the feedback form. In addition, user-side CGI is not required.

If you do not know how feedback forms work, take the relevant courses in the HTML getting started. Then start learning this lesson.

First, in javascript, the feedback form is also stored in an array of objects. You can call the first release of the latest release of document.images000001. you can also use the latest release Doc ument. forms [0] to call the 1st items form in the feedback form array. You can name images in a similar way. For example, if the feedback form

Programming is as follows:

<Form name = "first_form">
<Input type = "text" name = "first_text" size = "40" value = "Power to the primates! ">
</Form>

You can reference the form in either of the following ways:

Var the_form = terraform Doc ument. forms [0];
Var the_same_form = terraform Doc ument. first_form;

More often, you need to reference elements in the form, such as text fields in the above example.

Move the mouse over the link to see what will happen.

Yes, and I know it. No!

By changing the value of the text field, you can achieve this wonderful transformation.

<Form name = "second_form">
<Input type = "text" name = "first_text" value = "Are you happy? ">
</Form>

The link to the text field is changed:

<A href = "#" onMouseOver = "commandid Doc ument. second_form.first_text.value = 'clap Clap! '; "> Yes, and I know it. </a>

<A href = "#" onMouseOver = "too many Doc ument. second_form.first_text.value = 'sour puss! '; "> No! </A>

This means that a form calls 1st forms and sets its value to 'clap! '1000 rows have similar functions. This is very similar to the src used to change an image. Only the text field changes the value.

You can use a similar method to change the value of textareas:

Part 1 Part 2

Form encoding:

<Form name = "third_form">
<Textarea name = "the_textarea" rows = 10 cols = 60>
Mouse over below to see the first verse
The Webmonkey song, adapted from
"I Wanna Be Like You" (The Monkey Song)
From Walt Disney's The Jungle Book
Written by Richard M. Sherman and Robert B. Sherman
</Textarea>
</Form>

Note that the form has a name: third_form, and the text area also has a name: the_textarea.

The link and text field settings are basically the same:

<A href = "#" onMouseOver = "commandid Doc ument. third_form.the_textarea.value = first_part;"> Part 1 </a>
<A href = "#" onMouseOver = "commandid Doc ument. third_form.the_textarea.value = second_part;"> Part 2 </a>

The only difference is that a variable is assigned to textareas instead of a string. This variable has been defined in the HTML header.

The following is the variable string assignment:

Var first_part = "Now I'm the king of the swingers \ nOh, the jungle VIP \ nI 've reached the top and had to stop \ nAnd that's what botherin 'me ";

Note that "\ n" is a line break. If you are writing in a <pre> or textarea, the "\ n" line break is very convenient.

In addition to changing the value of the form element, JavaScript also allows you to detect events in the form. The next lecture will introduce you.