📄 js8.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0055)http://www.pinluo.com/book/javascript/js8.htm -->
<HTML><HEAD><TITLE>第八讲 WEB页面信息的交互 - 品络科技 pinluo.com</TITLE>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>TABLE.MsoNormalTable {
FONT-SIZE: 10pt; FONT-FAMILY: "Times New Roman"; mso-style-parent: ""
}
</STYLE>
<META content="MSHTML 6.00.2800.1476" name=GENERATOR></HEAD>
<BODY>
<DIV align=center>
<TABLE id=table1 height=607 cellSpacing=0 cellPadding=0 width=800
background=js8.files/sc1.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=560 border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<P align=center> </P></TD></TR>
<TR>
<TD>
<P align=center><IMG height=34 src="js8.files/sc.jpg" width=226
border=0></P></TD></TR>
<TR>
<TD>
<P align=center>
<P align=center><FONT color=#ff0000>第八讲 WEB页面信息的交互</FONT>
<P> <FONT
size=2>要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。</FONT>
<P><FONT size=2>一、窗体基础知识</FONT>
<P><FONT size=2>
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。</FONT>
<P><FONT size=2>1.什么是窗体对象</FONT>
<P><FONT size=2>
窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。<BR>
<form Name=Form1><BR> <INPUT
type=text...><BR> <Input
type=text...><BR> <Inpup
byne=text...><BR>
</form><BR> <form
Name=Form2><BR> <INPUT
type=text...><BR> <Input
type=text...><BR>
</form><BR>
在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。<BR>
窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：<BR>
<Form<BR> Name ="表的名称"<BR>
Target ="指定信息的提交窗口"<BR> action
="接收窗体程序对应的URL"<BR> Method
=信息数据传送方式(get/post)<BR> enctype
="窗体编码方式"<BR> [onsubmit
="JavaScript代码"]><BR> </Form></FONT>
<P><FONT size=2>2.窗体对象的方法</FONT>
<P><FONT size=2>
窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：<BR>
document.mytest.submit()</FONT>
<P><FONT size=2>3.窗体对象的属性</FONT>
<P><FONT size=2> 窗体对象中的属性主要包括以下：elements name
action target encoding method.<BR>
除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：
<BR> elements[0].Mytable.elements[1]</FONT>
<P><FONT size=2>4.访问窗体对象</FONT>
<P><FONT size=2>
在JavaScript中访问窗体对象可由两种方法实现：</FONT>
<P><FONT size=2> (1)通过访问窗体<BR>
在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。</FONT>
<P><FONT size=2>(2)通过数组来访问窗体<BR>
除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：<BR>
document.forms[0]<BR>
document.forms[1]<BR> document.forms[2]...</FONT>
<P><FONT size=2>5.引用窗体的先决条件</FONT>
<P><FONT size=2>
在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。</FONT>
<P><FONT size=2>二、窗体中的基本元素</FONT>
<P><FONT size=2>
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。<BR>
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:<BR>
formName.elements[].methadName (窗体名.元素名或数组.方法)<BR>
formName.elemaent[].propertyName(窗体名.元素名或数组.属性)<BR>
下面分别介绍：</FONT>
<P><FONT size=2>1.Text单行单列输入元素</FONT>
<P><FONT size=2>
功能：对Text标识中的元素实施有效的控制。<BR>
基本属性：<BR>
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。<BR>
Value：用以设定出现在窗口中对应HTML文档中Value的信息。<BR>
defaultvalue：包括Text元素的默认值<BR>
基本方法：<BR> blur()：将当前焦点移到后台。<BR>
select()：加亮文字。<BR> 主要事件：<BR>
onFocus：当Text获得焦点时，产生该事件。<BR>
onBlur：从元素失去焦点时，产生该事件。<BR>
onselect：当文字被加亮显示后，产生该文件。<BR>
onchange：当Text元素值改变时，产生该文件。<BR>
例：...<BR> <Form
name="test"><BR> <input type="text"
name="test" value="this is a javascript" ><BR>
</form><BR> ...<BR>
<script language ="Javascirpt"><BR>
document.mytest.value="that is a Javascript";<BR>
document.mytest.select();<BR>
document.mytest.blur(); <BR>
</script></FONT>
<P><FONT size=2>2.textarea多行多列输入元素</FONT>
<P><FONT size=2>
功能：实施对Textarea中的元素进行控制。<BR>
基本属性<BR>
name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。<BR>
Value：用以设定出现在窗口中对应HTML文档中Value的信息。<BR> Default
value：元素的默认值。<BR> 方法：<BR>
blur()：将输入焦点失去<BR>
select()：将文字加亮后<BR> 事件：<BR>
onBlur:当失去输入焦点后产生该事件<BR>
onFocus:当输入获得焦点后，产生该文件<BR>
onchange:当文字值改变时，产生该事件<BR>
onselect:当文字加亮后，产生该文件</FONT>
<P><FONT size=2>3.Select选择元素</FONT>
<P><FONT size=2>
功能：实施对滚动选择元素的控制。<BR> 属性：<BR>
name:设定提交信息时的信息名称，对应文档select中的name。<BR>
Length:对应文档select中的length<BR>
options:组成多个选项的数组<BR>
selectIndex;该下标指明一个选项<BR>
select在中每一选项都含有以下属性：<BR>
Text:选项对应的文字<BR>
selected:指明当前选项是否被选中<BR>
Index:指明当前选项的位置<BR>
defaultselected:默认选项<BR> 事件：<BR>
onBlur：当select选项失去焦点时，产生该文件。<BR>
onFocas:当select获得焦点时，产生该文件。<BR>
onchange:选项状态改变后，产生该事件。</FONT>
<P><FONT size=2>4.Button按钮</FONT>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -