用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 相关文章推荐
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
js 实现验证码输入框示例详解
Sep 23 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
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
文秘专业个人求职信
2013/12/22 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
2014小学年度工作总结
2014/12/20 职场文书
生产现场禁烟通知
2015/04/23 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android