WEB页面信息的交互

• JavaScript
• WEB页面
• 信息
• 交互

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

一、窗体基础知识

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

１、什么是窗体对象

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

<form Name=Form1>

<INPUT type=text...>

<Input type=text...>

<Inpup byne=text...>

</form>

<form Name=Form2>

<INPUT type=text...>

<Input type=text...>

</form>

      在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。

      窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

<Form

Name ="表的名称"

Target ="指定信息的提交窗口"

action ="接收窗体程序对应的URL"

Method =信息数据传送方式(get/post)

enctype ="窗体编码方式"

[onsubmit ="JavaScript代码"]>

</Form>

２、窗体对象的方法

      窗体对象的方法只有一个--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元素值改变时，产生该文件。

      例：...

<Form name="test">

<input type="text" name="test" value="this is a javascript" >

</form>

...

<script language ="Javascirpt">

document.mytest.value="that is a Javascript";

document.mytest.select();

document.mytest.blur();

</script>

２、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按钮时，产生该事件。

      例 ：

<Form name="test">

<input type="button" name="testcall" onclick=tmyest()>

</form>

...

<script language="javascirpt">

document.elements[0].value="mytest"; //通过元素访问

或

document.testcallvalue="mytest"; // 通过名字访问

</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
<html>
<head>
<Script Language="JavaScript">
//原来的颜色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//动态改变颜色
function changecolor(){
   document.bgColor="red";
   document.vlinkColor="blue";
   document.linkColor="green";
   document.alinkcolor="blue";
}
</script>
</HEAD>
<body bgColor="White" >
<A href="test8_2.htm"> 调用动态按钮文档</a>
<form >
<Input type="button"  Value="red" onClick="changecolor()">
</form>
</BODY>
</HTML>

      输出结果见图1所示。

 图1

      动态按钮程序。

 test8_2.htm
<HTML>
<HEAD>
</HEAD>
<p align="center"></p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><form name="form2" onSubmit="null">
     <p><input type="submit" name="banner" VALUE="Submit"
     onClick="alert('You have to put an \'action=[url]\' on the form
tag!!')"> <br>
<script language="JavaScript">
var id,pause=0,position=0;
function banner() {
        // variables declaration
   var i,k,msg="    这里输入你要的内容";// increase msg
        k=(30/msg.length)+1;
        for(i=0;i<=k;i++) msg+=" "+msg;
        // show it to the window
       document.form2.banner.value=msg.substring(position,position-30);
        // set new position
       if(position++==msg.length) position=0;
        // repeat at entered speed
        id=setTimeout("banner()",60); }
// end -->
banner();
</script></p>
    </form>
    </td>
  </tr>
</table>
</center></div>
<p></p>
<BODY>
<A href="test8_1.htm"> 返回</a>
</BODY>
</HTML>

      输出结果见图2所示。

图2

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