JavaScript 스크립트를 이용한 웹페이지 정보 상호작용 구현_기본지식

要实现动态交互，必须掌握有关窗体对象(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:当框的选被选中时，产生该事件。 　

６.라디오 무선 버튼
기능: 라디오 선택 기능으로 무선 버튼 제어를 구현합니다.
속성:
name: 정보 제출 시 HTML 문서의 라디오 이름에 해당하는 정보 이름을 설정합니다.
value: 값에 해당하여 창에 표시되는 정보를 설정하는 데 사용됩니다. HTML 문서의 라디오 이름에 해당하는 HTML 문서입니다.
길이: 라디오 버튼에 있는 버튼의 수입니다.
defalechecked: 기본 버튼.
checked: 체크 여부를 나타냅니다.
색인: 선택한 버튼의 위치입니다.
메소드:
chick(): 버튼을 선택합니다.
이벤트:
onclick: 이 이벤트는 버튼을 클릭할 때 생성됩니다.
　
７.숨김: 숨김
기능: 텍스트를 표시하지 않고 문자를 입력할 수 있는 영역 요소에 대한 제어를 구현합니다.
속성:
name: 정보 제출 시 HTML 문서의 숨겨진 부분에 있는 이름에 해당하는 정보 이름을 설정합니다.
값: HTML 문서의 값, 숨겨진 HTML 문서의 값에 해당하여 창에 표시되는 정보를 설정하는 데 사용됩니다.
defaleitvalue: 기본값
　
８、Password
기능: 비밀번호 입력으로 요소 제어를 구현합니다.
속성:
이름: 정보 제출 시 HTML 문서의 비밀번호에 있는 이름에 해당하는 정보 이름을 설정합니다.
값: HTML 문서의 비밀번호 값에 해당하는 HTML 문서의 값에 해당하는 창에 표시되는 정보를 설정하는 데 사용됩니다.
defaultvalue: 기본값
메서드
select(): 입력된 비밀번호 필드를 강조 표시합니다.
blur(): 비밀번호 입력 포커스를 잃게 만듭니다.
focus(): 비밀번호 입력 포커스를 가져옵니다.
　
９. 제출 요소
기능: 제출 기능으로 버튼 제어를 구현합니다.
속성:
name: 정보 제출 시 HTML 문서의 제출에 해당하는 정보 이름을 설정합니다.
값: HTML 문서의 값에 해당하는 HTML 문서의 값에 해당하여 창에 나타나는 정보를 설정하는 데 사용됩니다.
메소드
click()은 제출 버튼을 누르는 것과 같습니다.
이벤트:
onclick() 이 이벤트는 버튼을 눌렀을 때 생성됩니다.
　
3. 예시
아래에서는 버튼(빨간색)을 클릭하여 창 색상을 변경하고, "동적 버튼 문서 호출"을 클릭하여 동적 버튼 문서를 호출하는 방법을 보여줍니다.
test8_1.htm





동적 버튼 문서 호출

출력 결과는 그림 1과 같습니다.

사진 1

동적 버튼 프로그램.
test8_2.htm

　

< ;div align="center">

onClick="alert('양식
태그에 'action=[url]'을 넣어야 합니다!!')">