JavaScript 스크립트를 사용하여 웹 페이지에서 정보 상호 작용 실현_javascript 기술

역동적인 상호작용을 이루기 위해서는 폼 객체(Form)와 프레임 객체(Frames)에 대한 보다 복잡한 지식을 습득해야 합니다.

1. 양식에 대한 기본 지식
양식 개체를 사용하면 디자이너는 먼저 데이터를 입력하지 않고도 양식의 다양한 요소를 사용하여 웹 문서의 동작을 동적으로 변경할 수 있습니다.

1. 폼 객체란 무엇인가요?
폼: 웹 페이지의 기본 요소를 구성합니다. 일반적으로 웹 페이지에는 하나 또는 여러 개의 양식이 있으며 Forms[] 배열은 다양한 양식에 액세스하는 데 사용됩니다.

Forms[0]에는 세 가지 기본 요소가 있는 반면, Forms[1]에는 두 가지 요소만 있습니다.
양식 개체의 주요 기능은 HTML 문서의 양식에 직접 액세스하는 것입니다. 이는 관련 HTML 코드를 캡슐화합니다.

Name ="The name of the table"
Target = " 정보 제출 창 지정"
action ="폼 프로그램에 해당하는 URL 받기"
Method = 정보 데이터 전송 방식(get/post)
enctype ="폼 인코딩 방식"
[onsubmit ="JavaScript code"]>

2. 폼 객체의 메소드
폼 객체의 메소드는 submit() 메소드 하나만 있습니다. 이 방법의 주요 기능은 양식 정보 제출을 실현하는 것입니다. Mytest 양식을 제출하는 경우 다음 형식을 사용하십시오:
document.mytest.submit()

3. 양식 개체의 속성
양식 개체의 속성에는 주로 다음이 포함됩니다.
요소를 제외하고 나머지는 모두 양식의 로고에 있는 해당 속성의 상태를 반영합니다. 이는 일반적으로 단일 양식 로고이고 요소는 종종 여러 양식 요소 값의 배열입니다. 예:
elements[0].Mytable.elements[1]

4. 양식 개체에 액세스
JavaScript에서 양식 개체에 액세스하는 방법은 두 가지입니다.
(1 ) 양식
에 액세스하여 양식 개체의 속성에서 먼저 양식 이름을 지정한 후 document.Mytable()과 같은 식별자를 통해 양식에 액세스할 수 있습니다.
(2) 배열을 통해 양식에 액세스
양식 이름을 사용하여 양식에 액세스하는 것 외에도 양식 개체 배열을 사용하여 양식 개체에 액세스할 수도 있습니다. 다만 한 가지 주목할 점은 폼 객체는 브라우저 환경에서 제공되며, 브라우저 환경에서 제공하는 배열 첨자의 범위는 0부터 n까지라는 점이다. 따라서 양식 개체에 다음 형식을 통해 접근할 수 있습니다:
document.forms[0]
document.forms[1]
document.forms[2]...
　
五、 양식 참조 전제 조건
JavaScript에서 양식을 참조하기 위한 전제 조건은 먼저 페이지에 식별자가 있는 양식을 생성하고 참조 앞에 양식 정의 부분을 배치해야 한다는 것입니다.

2. 폼의 기본 요소
폼의 기본 요소는 버튼, 라디오 버튼, 체크 버튼, 제출 버튼, 재설정 버튼, 텍스트 상자 등으로 구성됩니다.
JavaScript에서 이러한 기본 요소에 액세스하려면 특정 양식 요소에 해당하는 배열 아래 첨자 또는 양식 요소 이름을 사용해야 합니다. 각 요소는 주로 요소의 속성이나 메소드를 통해 참조됩니다. 참조의 기본 형식은 다음과 같습니다.
formName.elements[].methadName (폼 이름. 요소 이름 또는 배열. 메서드)
formName.elemaent[].propertyName (폼 이름. 요소 이름 또는 배열. 속성)

다음이 각각 소개됩니다.

1. 텍스트 단일 행 및 단일 열 입력 요소
기능: 텍스트 로고의 요소에 대한 효과적인 제어를 구현합니다.
기본 속성:
이름: 정보 제출 시 정보 이름을 설정합니다. HTML 문서의 이름에 해당합니다.
값: HTML 문서의 값에 해당하는 창에 표시되는 정보를 설정하는 데 사용됩니다.
defaultvalue: Text 요소의 기본값을 포함합니다.
기본 메소드:
blur(): 현재 포커스를 배경으로 이동합니다.
select(): 텍스트를 강조 표시합니다.
주요 이벤트:
onFocus: 이 이벤트는 텍스트에 포커스가 있을 때 생성됩니다.
OnBlur: 이 이벤트는 요소가 포커스를 잃을 때 생성됩니다.
Onselect: 이 파일은 텍스트가 강조 표시될 때 생성됩니다.
onchange: 이 파일은 Text 요소의 값이 변경될 때 생성됩니다.
예:...

...


　

2. 다중 행 및 다중 열 입력 요소
기능: 텍스트 영역에서 요소 제어를 구현합니다.
기본 속성
name: 정보 제출 시 HTML 문서 텍스트 영역의 이름에 해당하는 정보 이름을 설정합니다.
값: HTML 문서의 값에 해당하는 창에 표시되는 정보를 설정하는 데 사용됩니다. <script> <BR>document.mytest.value="that is a Javascript"; <BR>document.mytest.select(); <BR>document.mytest.blur(); <BR></script>기본값: 요소의 기본값입니다.
　方法：
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页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。