用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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
基于python指定包的安装路径方法
2018/10/27 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python脚本第一行如何写
2020/08/30 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
质量月活动策划方案
2014/03/10 职场文书
培训讲师岗位职责
2014/04/13 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
初中学习计划书范文
2014/09/15 职场文书
影视后期实训报告
2014/11/05 职场文书
处级干部考察材料
2014/12/24 职场文书
六年级作文之预言作文
2019/10/25 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python