用JavaScript脚本实现Web页面信息交互


Posted in Javascript onDecember 21, 2006

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

一、窗体基础知识

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

1、什么是窗体对象
窗体(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>
 

2、窗体对象的方法

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

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

除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:
elements[0].Mytable.elements[1]
 
4、访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现:
(1)通过访问窗体

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

除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:
document.forms[0]
document.forms[1]
document.forms[2]...
 
5、引用窗体的先决条件

在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。
 
二、窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (窗体名.元素名或数组.方法)
formName.elemaent[].propertyName(窗体名.元素名或数组.属性)
 
下面分别介绍:
 
1、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>
 

2、textarea多行多列输入元素
 功能:实施对Textarea中的元素进行控制。
 基本属性
name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Default value:元素的默认值。
 方法:
blur():将输入焦点失去
select():将文字加亮后
 事件:
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件
 
3、Select选择元素
 功能:实施对滚动选择元素的控制。
 属性:
name:设定提交信息时的信息名称,对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性:
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
 
 事件:
OnBlur:当select选项失去焦点时,产生该文件。
onFocas:当select获得焦点时,产生该文件。
Onchange:选项状态改变后,产生该事件。
 
4、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>
.....

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

6、radio无线按钮
 功能:实施对一个具单选功能的无线按钮控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
 方法:
chick():选定一个按钮。
 事件:
onclick:单击按钮时,产生该事件。
 
7、hidden:隐藏
 功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值
 
8、Password口令
 功能:实施对具有口令输入的元素的控制。
 属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值
 方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。
 
9、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所示。

用JavaScript脚本实现Web页面信息交互
图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所示。

用JavaScript脚本实现Web页面信息交互
图2  

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

Javascript 相关文章推荐
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
在 IE 中调用 javascript 打开 Excel 表
Dec 21 #Javascript
用js+xml自动生成表格的东西
Dec 21 #Javascript
FCK调用方法..
Dec 21 #Javascript
firefox中JS读取XML文件
Dec 21 #Javascript
URI、URL和URN之间的区别与联系
Dec 20 #Javascript
Javascript SHA-1:Secure Hash Algorithm
Dec 20 #Javascript
Code:findPosX 和 findPosY
Dec 20 #Javascript
You might like
PHP实现懒加载的方法
2015/03/07 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python实现音乐下载的统计
2018/06/20 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python操作excel让工作自动化
2019/08/09 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
综合测评自我鉴定
2013/10/08 职场文书
求职简历自荐信
2013/10/20 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
迎新生欢迎词
2015/01/23 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
导游词之太湖
2019/10/08 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
Oracle中DBLink的详细介绍
2022/04/29 Oracle