Implementing Web page information interaction using JavaScript script

要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

一、窗体基础知识
　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

１、什么是窗体对象
窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

　　在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。
　　窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
Name ="表的名称"
Target ="指定信息的提交窗口"
action ="接收窗体程序对应的URL"
Method =信息数据传送方式(get/post)
enctype ="窗体编码方式"
[onsubmit ="JavaScript代码"]>

　

２、窗体对象的方法
　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：
document.mytest.submit()
　
３、窗体对象的属性
　　窗体对象中的属性主要包括以下：elements name action target encoding method.
　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：
elements[0].Mytable.elements[1]
　
４、访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现：
（１）通过访问窗体
　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。
（２）通过数组来访问窗体
　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用窗体的先决条件
　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。
　
二、窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (窗体名.元素名或数组.方法)
formName.elemaent[].propertyName(窗体名.元素名或数组.属性)
　
下面分别介绍：
　
１、Text单行单列输入元素
　功能：对Text标识中的元素实施有效的控制。
　基本属性：
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。
Value：用以设定出现在窗口中对应HTML文档中Value的信息。
defaultvalue：包括Text元素的默认值
　基本方法：
blur()：将当前焦点移到后台。
select()：加亮文字。
　主要事件：
onFocus：当Text获得焦点时，产生该事件。
OnBlur：从元素失去焦点时，产生该事件。
Onselect：当文字被加亮显示后，产生该文件。
onchange：当Text元素值改变时，产生该文件。
例：...

...

　

２、textarea多行多列输入元素
　功能：实施对Textarea中的元素进行控制。
　基本属性
name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。
Value：用以设定出现在窗口中对应HTML文档中Value的信息。
Default value：元素的默认值。
　方法：
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按钮时，产生该事件。
例：

...

.....

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

６. Radio wireless button
Function: Implement control of a wireless button with radio selection function.
Attributes:
name: Set the information name when submitting information, corresponding to the name of the radio in the HTML document.
value: Used to set the information that appears in the window corresponding to the Value in the HTML document, corresponding to The name of the radio in the HTML document.
length: The number of buttons in the radio button.
defalechecked: Default button.
checked: Indicates whether it is checked or not.
index: The position of the selected button.
Method:
chick(): Select a button.
Event:
onclick: This event is generated when the button is clicked.
　
７. hidden: Hide
Function: Implement control over a region element that does not display text and can input characters.
Attributes:
name: Set the information name when submitting information, corresponding to the Name in the hidden part of the HTML document.
Value: used to set the information that appears in the window corresponding to the Value in the HTML document, corresponding to the value in the hidden HTML document.
defaleitvalue: Default value
　
８、Password
Function: Implement control of elements with password input.
Attributes:
Name: Set the information name when submitting information, corresponding to the name in the password in the HTML document.
Value: used to set the information that appears in the window corresponding to the Value in the HTML document, corresponding to the Value in the password in the HTML document.
defaultvalu: Default value
Method
select(): Highlight the input password field.
blur(): Causes this to lose passward input focus.
focus(): Get password input focus.
　
９. Submit element
Function: Implement control of a button with submit function.
Attributes:
name: Set the information name when submitting information, corresponding to submit in the HTML document.
Value: used to set the information that appears in the window corresponding to the Value in the HTML document, corresponding to the value in the HTML document.
Method
click() is equivalent to pressing the submit button.
Event:
onclick() This event is generated when the button is pressed.
　
3. Example
Below we demonstrate how to change the window color by clicking a button (red), and click "Call dynamic button document" to call a dynamic button document.
test8_1.htm

Call dynamic button document

Implementing Web page information interaction using JavaScript script_Basic knowledge

Figure 2 　
This lecture introduces the method of using JavaScript scripts to realize information interaction on Web pages. It mainly introduces the main functions and uses of the basic elements in the form.

Implementing Web page information interaction using JavaScript script_Basic knowledge