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


Posted in Javascript onOctober 11, 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所示。

图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页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript表单常用验证集合
Jan 16 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
基于ts的动态接口数据配置的详解
Dec 18 Javascript
window.open的功能全解析
Oct 10 #Javascript
Array.slice()与Array.splice()的返回值类型
Oct 09 #Javascript
实例:尽可能写友好的Javascript代码
Oct 09 #Javascript
splice slice区别
Oct 09 #Javascript
获取DOM对象的几种扩展及简写
Oct 09 #Javascript
js几个不错的函数 $$()
Oct 09 #Javascript
使用Javascript和DOM Interfaces来处理HTML
Oct 09 #Javascript
You might like
深入php之规范编程命名小结
2013/05/15 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
mongodb和php的用法详解
2019/03/25 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
关于vue面试题汇总
2018/03/20 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
用python制作个视频下载器
2021/02/01 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
班级学习计划书
2014/04/27 职场文书
跳蚤市场口号
2014/06/13 职场文书
小学班主任自我评价
2015/03/11 职场文书
教师读书笔记
2015/06/29 职场文书
职工培训工作总结
2015/08/10 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
Python字符串的转义字符
2022/04/07 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android