📄 javascript8.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
a{ text-decoration: none }
p{ line-height:140% }
.text{ font-size: 9pt }
.text{ text-align:justify }
.text11{ font-size: 11pt }
.text11{ text-align:justify }
-->
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>网页教程－JavaScript技术讲座:第八讲 WEB页面信息的交互</title>
</head>
<body>
<p><span class="text">您现在的位置：<a href="javascript:if(confirm('http://www.4gee.com/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/Index.htm'" tppabs="http://www.4gee.com/Index.htm">主页</a>－<a
href="javascript:if(confirm('http://www.4gee.com/colleges/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/colleges/Index.htm'" tppabs="http://www.4gee.com/colleges/Index.htm">网络教室</a>－<a href="Index.htm" tppabs="http://www.4gee.com/colleges/homepages/Index.htm">主页工厂</a>－JavaScript技术讲座:第八讲
WEB页面信息的交互</span></p>
<p align="center"><small><a href="JavaScript7.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript7.htm">上一页</a>
<a href="JavaScript9.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript9.htm">下一页</a></small></p>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><span style="color: rgb(252,177,3)" class="text11">JavaScript技术讲座<br>
第八讲 WEB页面信息的交互</span></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="justify"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>一、窗体基础知识</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>１、什么是窗体对象</b></font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。</font></span></p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><form
Name=Form1></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><INPUT
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Input
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Inpup
byne=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><form
Name=Form2></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><INPUT
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Input
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Form</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Name
="表的名称"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Target
="指定信息的提交窗口"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">action
="接收窗体程序对应的URL"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Method
=信息数据传送方式(get/post)</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">enctype
="窗体编码方式"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">[onsubmit
="JavaScript代码"]></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></Form></font></span></p>
<p align="justify"> </p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>２、窗体对象的方法</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：</font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.mytest.submit()</font></span></p>
<p align="justify"> </p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>３、窗体对象的属性</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗体对象中的属性主要包括以下：elements
name action target encoding method.</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：
</font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">elements[0].Mytable.elements[1]</font></span></p>
<p align="justify"> </p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>４、访问窗体对象</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">在JavaScript中访问窗体对象可由两种方法实现：</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（１）通过访问窗体</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（２）通过数组来访问窗体</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.forms[0]</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.forms[1]</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.forms[2]...</font></span></p>
<p align="justify"> </p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>５、引用窗体的先决条件</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。</font></span></p>
<p align="justify"> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>二、窗体中的基本元素</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。<br>
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:</font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">formName.elements[].methadName
(窗体名.元素名或数组.方法)</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">formName.elemaent[].propertyName(窗体名.元素名或数组.属性)</font></span></p>
<p align="justify"> </p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">下面分别介绍：</font></span></p>
<p align="justify"> </p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>１、Text单行单列输入元素</b></font></span></p>
<dir>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字节)"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 功能：对Text标识中的元素实施有效的控制。</font></span></p>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字节)"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 基本属性：</font></span></p>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Name：设定提交信息时的信息名称。对应于HTML文档中的Name。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Value：用以设定出现在窗口中对应HTML文档中Value的信息。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">defaultvalue：包括Text元素的默认值</font></span></p>
</dir>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字节)"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 基本方法：</font></span></p>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">blur()：将当前焦点移到后台。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">select()：加亮文字。</font></span></p>
</dir>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字节)"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 主要事件：</font></span></p>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">onFocus：当Text获得焦点时，产生该事件。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">OnBlur：从元素失去焦点时，产生该事件。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Onselect：当文字被加亮显示后，产生该文件。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">onchange：当Text元素值改变时，产生该文件。</font></span></p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">例：...</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Form
name="test"></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><input
type="text" name="test" value="this is a javascript" ></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">...</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><script
language ="Javascirpt"></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.mytest.value="that
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -