Javascript教程 第八讲 WEB页面信息的交互

第八讲WEB页面信息的交互 织梦好,好织梦

  要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。 织梦内容管理系统

一、窗体基础知识 copyright dedecms

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

copyright dedecms

1、什么是窗体对象 本文来自织梦

窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。 织梦内容管理系统

<form Name=Form1>

织梦内容管理系统

<INPUT type=text...>

织梦内容管理系统

<Input type=text...> 内容来自dedecms

<Inpup byne=text...> copyright dedecms

</form> 内容来自dedecms

<form Name=Form2> 本文来自织梦

<INPUT type=text...> 织梦好,好织梦

<Input type=text...>

内容来自dedecms

</form> copyright dedecms

  在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。 内容来自dedecms

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

织梦内容管理系统

<Form 本文来自织梦

Name ="表的名称" dedecms.com

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

copyright dedecms

action ="接收窗体程序对应的URL" 织梦内容管理系统

Method =信息数据传送方式(get/post) 内容来自dedecms

enctype ="窗体编码方式"

织梦好,好织梦

[onsubmit ="JavaScript代码"]>

copyright dedecms

</Form> 本文来自织梦

 

织梦内容管理系统

2、窗体对象的方法 内容来自dedecms

  窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:

dedecms.com

document.mytest.submit() 内容来自dedecms

  本文来自织梦

3、窗体对象的属性 dedecms.com

  窗体对象中的属性主要包括以下:elements name action target encoding method. dedecms.com

  除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例: dedecms.com

elements[0].Mytable.elements[1] 内容来自dedecms

 

内容来自dedecms

4、访问窗体对象

本文来自织梦

在JavaScript中访问窗体对象可由两种方法实现:

copyright dedecms

(1)通过访问窗体

本文来自织梦

  在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.Mytable()。 dedecms.com

(2)通过数组来访问窗体

织梦好,好织梦

  除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:

内容来自dedecms

document.forms[0] 织梦好,好织梦

document.forms[1] 织梦好,好织梦

document.forms[2]...

织梦内容管理系统

  织梦内容管理系统

5、引用窗体的先决条件 copyright dedecms

  在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。 织梦好,好织梦

 

copyright dedecms

二、窗体中的基本元素 copyright dedecms

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:

copyright dedecms

formName.elements[].methadName (窗体名.元素名或数组.方法)

dedecms.com

formName.elemaent[].propertyName(窗体名.元素名或数组.属性)

copyright dedecms

  织梦内容管理系统

下面分别介绍:

内容来自dedecms

  copyright dedecms

1、Text单行单列输入元素 内容来自dedecms

 功能:对Text标识中的元素实施有效的控制。 内容来自dedecms

 基本属性: 织梦内容管理系统

Name:设定提交信息时的信息名称。对应于HTML文档中的Name。 copyright dedecms

Value:用以设定出现在窗口中对应HTML文档中Value的信息。 织梦内容管理系统

defaultvalue:包括Text元素的默认值

dedecms.com

 基本方法:

内容来自dedecms

blur():将当前焦点移到后台。

本文来自织梦

select():加亮文字。 织梦好,好织梦

 主要事件:

织梦内容管理系统

onFocus:当Text获得焦点时,产生该事件。

copyright dedecms

OnBlur:从元素失去焦点时,产生该事件。

本文来自织梦

Onselect:当文字被加亮显示后,产生该文件。 织梦好,好织梦

onchange:当Text元素值改变时,产生该文件。 内容来自dedecms

例:... dedecms.com

<Form name="test">

内容来自dedecms

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

织梦内容管理系统

</form>

内容来自dedecms

...

织梦内容管理系统

<script language ="Javascirpt">

dedecms.com

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

copyright dedecms

document.mytest.select();

copyright dedecms

document.mytest.blur();

copyright dedecms

</script> 织梦内容管理系统

 

dedecms.com

2、textarea多行多列输入元素

织梦内容管理系统

 功能:实施对Textarea中的元素进行控制。 copyright dedecms

 基本属性

dedecms.com

name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。

织梦内容管理系统

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

dedecms.com

Default value:元素的默认值。 copyright dedecms

 方法:

内容来自dedecms

blur():将输入焦点失去

织梦好,好织梦

select():将文字加亮后

dedecms.com

 事件:

织梦好,好织梦

onBlur:当失去输入焦点后产生该事件

内容来自dedecms

onFocus:当输入获得焦点后,产生该文件 织梦好,好织梦

Onchange:当文字值改变时,产生该事件 copyright dedecms

Onselect:当文字加亮后,产生该文件 dedecms.com

 

织梦内容管理系统

3、Select选择元素 织梦好,好织梦

 功能:实施对滚动选择元素的控制。 织梦好,好织梦

 属性:

copyright dedecms

name:设定提交信息时的信息名称,对应文档select中的name。 dedecms.com

Length:对应文档select中的length 织梦好,好织梦

options:组成多个选项的数组

织梦内容管理系统

selectIndex;该下标指明一个选项 内容来自dedecms

select在中每一选项都含有以下属性: 内容来自dedecms

Text:选项对应的文字 织梦内容管理系统

selected:指明当前选项是否被选中 copyright dedecms

Index:指明当前选项的位置 dedecms.com

defaultselected:默认选项 本文来自织梦

  dedecms.com

 事件: copyright dedecms

OnBlur:当select选项失去焦点时,产生该文件。

copyright dedecms

onFocas:当select获得焦点时,产生该文件。 织梦好,好织梦

Onchange:选项状态改变后,产生该事件。

本文来自织梦

 

织梦内容管理系统

4、Button按钮 织梦好,好织梦

 功能:实施对Button按钮的控制。 织梦内容管理系统

 属性:

dedecms.com

Name:设定提交信息时的信息名称,对应文档中button的Name。

织梦内容管理系统

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

本文来自织梦

 方法:

本文来自织梦

click()该方法类似于一个按下的按钮。

织梦好,好织梦

 事件: 内容来自dedecms

onclick当单击button按钮时,产生该事件。 织梦好,好织梦

例 :

本文来自织梦

<Form name="test"> 织梦好,好织梦

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

dedecms.com

</form> 内容来自dedecms

...

内容来自dedecms

<script language="javascirpt"> 织梦好,好织梦

document.elements[0].value="mytest"; //通过元素访问 本文来自织梦

内容来自dedecms

document.testcallvalue="mytest"; // 通过名字访问 织梦好,好织梦

</script>

织梦内容管理系统

..... dedecms.com

  内容来自dedecms

5、checkbox检查框 dedecms.com

 功能:实施对一个具有复选框中元素的控制。 copyright dedecms

 属性:

copyright dedecms

name:设定提交信息时的信息名称。

织梦内容管理系统

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

织梦好,好织梦

Checked:该属性指明框的状态true/false. 织梦内容管理系统

defauitchecked:默认状态 copyright dedecms

 方法: 织梦内容管理系统

click()该方法使得框的某一个项被选中。 本文来自织梦

 事件: 本文来自织梦

onclick:当框的选被选中时,产生该事件。 织梦内容管理系统

  织梦好,好织梦

6、radio无线按钮

本文来自织梦

 功能:实施对一个具单选功能的无线按钮控制。

dedecms.com

 属性: copyright dedecms

name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同

内容来自dedecms

value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。 copyright dedecms

length:单选按钮中的按钮数目。

织梦内容管理系统

defalechecked:默认按钮。 本文来自织梦

checked:指明选中还是没有选中。 内容来自dedecms

index:选中的按钮的位置。 dedecms.com

 方法: copyright dedecms

chick():选定一个按钮。

内容来自dedecms

 事件: 织梦内容管理系统

onclick:单击按钮时,产生该事件。 dedecms.com

 

copyright dedecms

7、hidden:隐藏

织梦好,好织梦

 功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。

dedecms.com

 属性:

dedecms.com

name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。

本文来自织梦

Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。 内容来自dedecms

defaleitvalue:默认值 织梦内容管理系统

  dedecms.com

8、Password口令

织梦内容管理系统

 功能:实施对具有口令输入的元素的控制。 内容来自dedecms

 属性: dedecms.com

Name:设定提交信息时的信息名称,对应HTML文档中password中的name。 内容来自dedecms

Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。 织梦好,好织梦

defaultvalu:默认值

dedecms.com

 方法

本文来自织梦

select():加亮输入口令域。 内容来自dedecms

blur():使这丢失passward输入焦点。 本文来自织梦

focus():获得password输入焦点。

织梦好,好织梦

  copyright dedecms

9、submit提交元素

织梦好,好织梦

 功能:实施对一个具有提交功能按钮的控制。 织梦好,好织梦

 属性: 织梦好,好织梦

name:设定提交信息时的信息名称,对应HTML文档中submit。 织梦内容管理系统

Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。 织梦内容管理系统

 方法 本文来自织梦

click()相当于按下submit按钮。

织梦内容管理系统

 事件:

copyright dedecms

onclick()当按下该按钮时,产生该事件。

内容来自dedecms

 

内容来自dedecms

三、范例

copyright dedecms

下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击“调用动态按钮文档”调用一个动态按钮文档。

本文来自织梦

  内容来自dedecms 
test8_1.htm 织梦好,好织梦 
<html> 
本文来自织梦
<head> 
dedecms.com
<Script Language="JavaScript"> 
织梦好,好织梦
//原来的颜色 

本文来自织梦

document.bgColor="blue"; 

本文来自织梦

document.vlinkColor="white"; 

内容来自dedecms

document.linkColor="yellow"; 

内容来自dedecms

document.alinkcolor="red"; 织梦内容管理系统 
//动态改变颜色 
织梦好,好织梦
  本文来自织梦 
function changecolor(){ 

copyright dedecms

   document.bgColor="red"; 织梦内容管理系统 
   document.vlinkColor="blue"; 本文来自织梦 
   document.linkColor="green"; 
本文来自织梦
   document.alinkcolor="blue"; 织梦内容管理系统 
} 内容来自dedecms 
  

内容来自dedecms

</script> 

内容来自dedecms

</HEAD> 

copyright dedecms

<body bgColor="White" > dedecms.com 
<A href="test8_2.htm"> 调用动态按钮文档</a> copyright dedecms 
  
dedecms.com
<form > 内容来自dedecms 
   <Input type="button"  Value="red" onClick="changecolor()"> 
织梦内容管理系统
</form> 

织梦内容管理系统

</BODY> 

织梦内容管理系统

</HTML> 

copyright dedecms

  本文来自织梦 
输出结果见图1所示。 织梦好,好织梦 
  内容来自dedecms 
 

织梦内容管理系统

织梦好,好织梦

  

织梦好,好织梦

                图1 织梦内容管理系统 
  
dedecms.com
  内容来自dedecms 
动态按钮程序。 
织梦好,好织梦
test8_2.htm dedecms.com 
<HTML> copyright dedecms 
<HEAD> 内容来自dedecms 
</HEAD> 

内容来自dedecms

  copyright dedecms 
<p align="center"> </p> dedecms.com 
<div align="center"><center> 内容来自dedecms 
  织梦内容管理系统 
<table border="0" cellspacing="0" cellpadding="0"> 

copyright dedecms

  <tr> 本文来自织梦 
    <td width="100%"><form name="form2" onSubmit="null"> 

内容来自dedecms

     <p><input type="submit" name="banner" VALUE="Submit" 

织梦好,好织梦

     onClick="alert('You have to put an \'action=[url]\ ' on the form tag!!')"> <br> 
内容来自dedecms
  
织梦好,好织梦
<script language="JavaScript"> 
copyright dedecms
  本文来自织梦 
var id,pause=0,position=0; 

dedecms.com

function banner() { 织梦内容管理系统 
        // variables declaration 本文来自织梦 
   var i,k,msg="    这里输入你要的内容";// increase msg dedecms.com 
        k=(30/msg.length)+1; 
本文来自织梦
        for(i=0;i<=k;i++) msg+=" "+msg; 
copyright dedecms
        // show it to the window 

copyright dedecms

       document.form2.banner.value=msg.substring(position, position-30); 
织梦好,好织梦
        // set new position 

织梦内容管理系统

       if(position++==msg.length) position=0; 

织梦好,好织梦

        // repeat at entered speed  
dedecms.com
        id=setTimeout("banner()",60); } 织梦好,好织梦 
// end --> 内容来自dedecms 
banner(); copyright dedecms 
</script></p> 

本文来自织梦

    </form> 

织梦内容管理系统

    </td> copyright dedecms 
  </tr> 织梦好,好织梦 
</table> 
织梦内容管理系统
</center></div> 本文来自织梦 
  内容来自dedecms 
<p> </p> 

织梦内容管理系统

  内容来自dedecms 
<BODY> 
织梦内容管理系统
<A href="test8_1.htm"> 返回</a> 

织梦好,好织梦

  
copyright dedecms
</BODY> 
本文来自织梦
</HTML> 织梦内容管理系统 
  

织梦好,好织梦

输出结果见图2所示。 
copyright dedecms
 织梦内容管理系统 

dedecms.com

图2 copyright dedecms

  织梦内容管理系统

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

内容来自dedecms