Using JavaScript scripts to realize information interaction on Web pages_javascript skills

To achieve dynamic interaction, you must master more complex knowledge about form objects (Form) and frame objects (Frames).

1. Basic knowledge of forms
The form object allows designers to use different elements in the form to interact with client users without having to enter data first. Dynamically change the behavior of web documents.

1. What is a form object
Form: It constitutes the basic element of a Web page. Usually a Web page has one form or several forms, and the Forms[] array is used to achieve access to different forms.

There are three basic elements in Forms[0], while there are only two elements in Forms[1].
The main function of the form object is to directly access the form in the HTML document. It encapsulates the relevant HTML code:

Name ="The name of the table"
Target =" Specify the submission window for information"
action ="Receive the URL corresponding to the form program"
Method = Information data transmission method (get/post)
enctype ="Form encoding method"
[onsubmit ="JavaScript code"]>

2. Methods of the form object
There is only one method of the form object--submit() method. The main function of this method is It is to realize the submission of form information. If you submit the Mytest form, use the following format:
document.mytest.submit()

３. Properties of the form object
The properties in the form object mainly include the following: elements name action target encoding method.
Except for Elements, the others all reflect the status of the corresponding attributes in the logo in the form, which is usually a single form logo; and elements is often an array of multiple form element values, for example:
elements[0].Mytable.elements[1]

４. Accessing the form object
Accessing the form object in JavaScript can be achieved by two methods:
(1) By accessing Form
In the properties of the form object, you must first specify its form name, and then you can access the form through the following identifiers such as: document.Mytable().
(2) Access the form through array
In addition to using the form name to access the form, you can also use the form object array to access the form object. But one thing to note is that the form object is provided by the browser environment, and the array subscripts provided by the browser environment range from 0 to n. Therefore, the form object can be accessed through the following formats:
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、 Prerequisites for referencing a form
The prerequisite for referencing a form in JavaScript is: you must first create the form with an identifier on the page, and place the defining form part before the reference.

2. Basic elements in the form
The basic elements in the form are composed of buttons, radio buttons, check buttons, submit buttons, reset buttons, text boxes, etc.
To access these basic elements in JavaScript, you must use the array subscript or form element name corresponding to a specific form element. Each element is mainly referenced through the attributes or methods of the element. The basic format of its reference is as follows:
formName.elements[].methadName (form name. element name or array. method)
formName.elemaent[].propertyName (form name. element name or array. Properties)

The following are introduced respectively:

1. Text single row and single column input element
Function: Implement effective control over the elements in the Text logo.
Basic attributes:
Name: Set the information name when submitting information. Corresponds to the Name in the HTML document.
Value: used to set the information that appears in the window corresponding to the Value in the HTML document.
defaultvalue: Includes the default value of the Text element
Basic method:
blur(): Moves the current focus to the background.
select(): Highlight text.
Main events:
onFocus: This event is generated when Text gains focus.
OnBlur: This event is generated when the element loses focus.
Onselect: This file is generated when the text is highlighted.
onchange: This file is generated when the value of the Text element changes.
Example:...

...


　

2. textarea Multi-row and multi-column input elements
Function: Implement control of elements in Textarea.
Basic attributes
name: Set the information name when submitting information, corresponding to the Name of the HTML document Textarea.
Value: used to set the information that appears in the window corresponding to the Value in the HTML document. <script> <BR>document.mytest.value="that is a Javascript"; <BR>document.mytest.select(); <BR>document.mytest.blur(); <BR></script>Default value: The default value of the element.
　方法：
blur()：将输入焦点失去
select()：将文字加亮后
　事件：
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
　
３、Select选择元素
　功能：实施对滚动选择元素的控制。
　属性：
name:设定提交信息时的信息名称，对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性：
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
　
　事件：
OnBlur：当select选项失去焦点时，产生该文件。
onFocas:当select获得焦点时，产生该文件。
Onchange:选项状态改变后，产生该事件。
　
４、Button按钮
　功能：实施对Button按钮的控制。
　属性：
Name:设定提交信息时的信息名称，对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
　方法：
click()该方法类似于一个按下的按钮。
　事件：
onclick当单击button按钮时，产生该事件。
例 ：

...
<script> <BR>document.elements[0].value="mytest"; //通过元素访问 <BR>或 <BR>document.testcallvalue="mytest"; // 通过名字访问 <BR></script>
.....

　
５、checkbox检查框
　功能：实施对一个具有复选框中元素的控制。
　属性：
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
　方法：
click()该方法使得框的某一个项被选中。
　事件：
onclick:当框的选被选中时，产生该事件。 　

６、radio无线按钮
　功能：实施对一个具单选功能的无线按钮控制。
　属性：
name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
　方法：
chick():选定一个按钮。
　事件：
onclick:单击按钮时，产生该事件。
　
７、hidden:隐藏
　功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。
　属性：
name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。
defaleitvalue:默认值
　
８、Password口令
　功能：实施对具有口令输入的元素的控制。
　属性：
Name:设定提交信息时的信息名称，对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。
defaultvalu:默认值
　方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。
　
９、submit提交元素
　功能：实施对一个具有提交功能按钮的控制。
　属性：
name:设定提交信息时的信息名称，对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。
　方法
click()相当于按下submit按钮。
　事件：
onclick()当按下该按钮时，产生该事件。
　
三、范例
下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1.htm


<script> <BR>//原来的颜色 <BR>document.bgColor="blue"; <BR>document.vlinkColor="white"; <BR>document.linkColor="yellow"; <BR>document.alinkcolor="red"; <BR>//动态改变颜色 <BR>function changecolor(){ <BR>document.bgColor="red"; <BR>document.vlinkColor="blue"; <BR>document.linkColor="green"; <BR>document.alinkcolor="blue"; <BR>} <BR></script>


 调用动态按钮文档

输出结果见图1所示。


图1

动态按钮程序。
test8_2.htm

　

onClick="alert('You have to put an \'action=[url]\' on the form
tag!!')"> 

<script> <BR>var id,pause=0,position=0; <BR>function banner() { <BR>// variables declaration <BR>var i,k,msg=" 这里输入你要的内容";// increase msg <BR>k=(30/msg.length)+1; <BR>for(i=0;i<=k;i++) msg+=" "+msg; <BR>// show it to the window <BR>document.form2.banner.value=msg.substring(position,position-30); <BR>// set new position <BR>if(position++==msg.length) position=0; <BR>// repeat at entered speed <BR>id=setTimeout("banner()",60); } <BR>// end --> <BR>banner(); <BR></script>

　

 返回



输出结果见图2所示。


图2 　
　　本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。