窗体基础知识

一、窗体基础知识<o:p></o:p>

　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。<o:p></o:p>

１、什么是窗体对象<o:p></o:p>

窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。<o:p></o:p>

<form Name=Form1><o:p></o:p>

<INPUT type=text...><o:p></o:p>

<Input type=text...><o:p></o:p>

<Inpup byne=text...><o:p></o:p>

</form><o:p></o:p>

<form Name=Form2><o:p></o:p>

<INPUT type=text...><o:p></o:p>

<Input type=text...><o:p></o:p>

</form><o:p></o:p>

　　在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。<o:p></o:p>

　　窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：<o:p></o:p>

<Form<o:p></o:p>

Name ="表的名称"<o:p></o:p>

Target ="指定信息的提交窗口"<o:p></o:p>

action ="接收窗体程序对应的URL"<o:p></o:p>

Method =信息数据传送方式(get/post)<o:p></o:p>

enctype ="窗体编码方式"<o:p></o:p>

[onsubmit ="JavaScript代码"]><o:p></o:p>

</Form><o:p></o:p>

　<o:p></o:p>

２、窗体对象的方法<o:p></o:p>

　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：<o:p></o:p>

document.mytest.submit()<o:p></o:p>

　<o:p></o:p>

３、窗体对象的属性<o:p></o:p>

　　窗体对象中的属性主要包括以下：elements name action target encoding method.<o:p></o:p>

　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例： <o:p></o:p>

elements[0].Mytable.elements[1]<o:p></o:p>

　<o:p></o:p>

４、访问窗体对象<o:p></o:p>

在JavaScript中访问窗体对象可由两种方法实现：<o:p></o:p>

（１）通过访问窗体<o:p></o:p>

　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。<o:p></o:p>

（２）通过数组来访问窗体<o:p></o:p>

　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：<o:p></o:p>

document.forms[0]<o:p></o:p>

document.forms[1]<o:p></o:p>

document.forms[2]...<o:p></o:p>

　<o:p></o:p>

５、引用窗体的先决条件<o:p></o:p>

　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。<o:p></o:p>

　<o:p></o:p>

二、窗体中的基本元素<o:p></o:p>

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:<o:p></o:p>

formName.elements[].methadName (窗体名.元素名或数组.方法)<o:p></o:p>

formName.elemaent[].propertyName(窗体名.元素名或数组.属性)<o:p></o:p>

　<o:p></o:p>

下面分别介绍：<o:p></o:p>

　<o:p></o:p>

１、Text单行单列输入元素<o:p></o:p>

<!----><!----><!---->　功能：对Text标识中的元素实施有效的控制。<o:p></o:p>

<!----><!----><!---->　基本属性：<o:p></o:p>

Name：设定提交信息时的信息名称。对应于HTML文档中的Name。<o:p></o:p>

Value：用以设定出现在窗口中对应HTML文档中Value的信息。<o:p></o:p>

defaultvalue：包括Text元素的默认值<o:p></o:p>

<!----><!----><!---->　基本方法：<o:p></o:p>

blur()：将当前焦点移到后台。<o:p></o:p>

select()：加亮文字。<o:p></o:p>

<!----><!----><!---->　主要事件：<o:p></o:p>

onFocus：当Text获得焦点时，产生该事件。<o:p></o:p>

OnBlur：从元素失去焦点时，产生该事件。<o:p></o:p>

Onselect：当文字被加亮显示后，产生该文件。<o:p></o:p>

onchange：当Text元素值改变时，产生该文件。<o:p></o:p>

例：...<o:p></o:p>

<Form name="test"><o:p></o:p>

<input type="text" name="test" value="this is a javascript" ><o:p></o:p>

</form><o:p></o:p>

...<o:p></o:p>

<script language ="Javascirpt"><o:p></o:p>

document.mytest.value="that is a Javascript";<o:p></o:p>

document.mytest.select();<o:p></o:p>

document.mytest.blur(); <o:p></o:p>

</script><o:p></o:p>

　<o:p></o:p>

２、textarea多行多列输入元素<o:p></o:p>

<!----><!----><!---->　功能：实施对Textarea中的元素进行控制。<o:p></o:p>

<!----><!----><!---->　基本属性<o:p></o:p>

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。<o:p></o:p>

Value：用以设定出现在窗口中对应HTML文档中Value的信息。<o:p></o:p>

Default value：元素的默认值。<o:p></o:p>

<!----><!----><!---->　方法：<o:p></o:p>

blur()：将输入焦点失去<o:p></o:p>

select()：将文字加亮后<o:p></o:p>

<!----><!----><!---->　事件：<o:p></o:p>

onBlur:当失去输入焦点后产生该事件<o:p></o:p>

onFocus:当输入获得焦点后，产生该文件<o:p></o:p>

Onchange:当文字值改变时，产生该事件<o:p></o:p>

Onselect:当文字加亮后，产生该文件<o:p></o:p>

　<o:p></o:p>

３、Select选择元素<o:p></o:p>

<!----><!----><!---->　功能：实施对滚动选择元素的控制。<o:p></o:p>

<!----><!----><!---->　属性：<o:p></o:p>

name:设定提交信息时的信息名称，对应文档select中的name。<o:p></o:p>

Length:对应文档select中的length<o:p></o:p>

options:组成多个选项的数组<o:p></o:p>

selectIndex;该下标指明一个选项<o:p></o:p>

select在中每一选项都含有以下属性：<o:p></o:p>

Text:选项对应的文字<o:p></o:p>

selected:指明当前选项是否被选中<o:p></o:p>

Index:指明当前选项的位置<o:p></o:p>

defaultselected:默认选项<o:p></o:p>

　<o:p></o:p>

<!----><!----><!---->　事件：<o:p></o:p>

OnBlur：当select选项失去焦点时，产生该文件。<o:p></o:p>

onFocas:当select获得焦点时，产生该文件。<o:p></o:p>

Onchange:选项状态改变后，产生该事件。<o:p></o:p>

　<o:p></o:p>

４、Button按钮<o:p></o:p>

<!----><!----><!---->　功能：实施对Button按钮的控制。<o:p></o:p>

<!----><!----><!---->　属性：<o:p></o:p>

Name:设定提交信息时的信息名称，对应文档中button的Name。<o:p></o:p>

Value:用以设定出现在窗口中对应HTML文档中Value的信息。<o:p></o:p>

<!----><!----><!---->　方法：<o:p></o:p>

click()该方法类似于一个按下的按钮。<o:p></o:p>

<!----><!----><!---->　事件：<o:p></o:p>

onclick当单击button按钮时，产生该事件。<o:p></o:p>

例 ： <o:p></o:p>

<Form name="test"><o:p></o:p>

<input type="button" name="testcall" onclick=tmyest()><o:p></o:p>

</form><o:p></o:p>

...<o:p></o:p>

<script language="javascirpt"><o:p></o:p>

document.elements[0].value="mytest"; //通过元素访问<o:p></o:p>

或 <o:p></o:p>

document.testcallvalue="mytest"; // 通过名字访问<o:p></o:p>

</script> <o:p></o:p>

.....<o:p></o:p>

　<o:p></o:p>

５、checkbox检查框<o:p></o:p>

<!----><!----><!---->　功能：实施对一个具有复选框中元素的控制。<o:p></o:p>

<!----><!----><!---->　属性：<o:p></o:p>

name:设定提交信息时的信息名称。<o:p></o:p>

Value:用以设定出现在窗口中对应HTML文档中Value的信息。<o:p></o:p>

Checked:该属性指明框的状态true/false.<o:p></o:p>

defauitchecked:默认状态<o:p></o:p>

<!----><!----><!---->　方法：<o:p></o:p>

click()该方法使得框的某一个项被选中。<o:p></o:p>

<!----><!----><!---->　事件：<o:p></o:p>

onclick:当框的选被选中时，产生该事件。<o:p></o:p>

　<o:p></o:p>

６、radio无线按钮<o:p></o:p>

<!----><!----><!---->　功能：实施对一个具单选功能的无线按钮控制。<o:p></o:p>

<!----><!----><!---->　属性：<o:p></o:p>

name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同<o:p></o:p>

value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。<o:p></o:p>

length:单选按钮中的按钮数目。<o:p></o:p>

defalechecked:默认按钮。<o:p></o:p>

checked:指明选中还是没有选中。<o:p></o:p>

index:选中的按钮的位置。<o:p></o:p>

<!----><!----><!---->　方法：<o:p></o:p>

chick():选定一个按钮。<o:p></o:p>

<!----><!----><!---->　事件：<o:p></o:p>

onclick:单击按钮时，产生该事件。<o:p></o:p>

　<o:p></o:p>

７、hidden:隐藏<o:p></o:p>

<!----><!----><!---->　功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。<o:p></o:p>

<!----><!----><!---->　属性：<o:p></o:p>

name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。<o:p></o:p>

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。<o:p></o:p>

defaleitvalue:默认值<o:p></o:p>

　<o:p></o:p>

８、Password口令<o:p></o:p>

<!----><!----><!---->　功能：实施对具有口令输入的元素的控制。<o:p></o:p>

<!----><!----><!---->　属性：<o:p></o:p>

Name:设定提交信息时的信息名称，对应HTML文档中password中的name。<o:p></o:p>

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。<o:p></o:p>

defaultvalu:默认值<o:p></o:p>

<!----><!----><!---->　方法<o:p></o:p>

select():加亮输入口令域。<o:p></o:p>

blur():使这丢失passward输入焦点。<o:p></o:p>

focus():获得password输入焦点。<o:p></o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

javaScript 的事件驱动 <o:p></o:p>

、事件驱动 JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。<o:p></o:p>

它主要有以下几个事件：<o:p></o:p>

（１）单击事件onClick　　当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：<o:p></o:p>

• button（按钮对象） <o:p></o:p>
• checkbox（复选框）或（检查列表框） <o:p></o:p>
• radio （单选钮） <o:p></o:p>
• reset buttons（重要按钮） <o:p></o:p>
• submit buttons（提交按钮） <o:p></o:p>

例：可通过下列按钮激活change()文件：<o:p></o:p>

<Form><o:p></o:p>

<Input type="button" Value=“ ” onClick="change()"><o:p></o:p>

</Form><o:p></o:p>

　　在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例： <o:p></o:p>

<Input type="button" value=" " onclick=alert("这是一个例子"）;<o:p></o:p>

（２）onChange改变事件<o:p></o:p>

　　当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。<o:p></o:p>

例： <Form><o:p></o:p>

<Input type="text" name="Test" value="Test" onChange="check('this.test)"><o:p></o:p>

</Form><o:p></o:p>

（３）选中事件onSelect<o:p></o:p>

　　当Text或Textarea对象中的文字被加亮后，引发该事件。<o:p></o:p>

（４）获得焦点事件onFocus<o:p></o:p>

　　当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。<o:p></o:p>

（５）失去焦点onBlur<o:p></o:p>

　　当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。<o:p></o:p>

（６）载入文件onLoad<o:p></o:p>

　　当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。<o:p></o:p>

（７）卸载文件onUnload<o:p></o:p>

　　当Web页面退出时引发onUnload事件，并可更新Cookie的状态。<o:p></o:p>

一 浏览器对象层次及其主要作用<o:p></o:p>

　　除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。<o:p></o:p>

<!----><!----><!---->　浏览器对象(Navigator)<o:p></o:p>

提供有关浏览器的信息<o:p></o:p>

<!----><!----><!---->　窗口对象(Windows)<o:p></o:p>

Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。<o:p></o:p>

<!----><!----><!---->　位置对象(Location)<o:p></o:p>

Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。<o:p></o:p>

<!----><!----><!---->　历史对象(History)<o:p></o:p>

History对象提供了与历史清单有关的信息。<o:p></o:p>

<!----><!----><!---->　文档对象(Document) <o:p></o:p>

document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。<o:p></o:p>

 <o:p></o:p>

　　编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。<o:p></o:p>

<o:p> </o:p>

二、常用对象的属性和方法<o:p></o:p>

　　JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。<o:p></o:p>

　　在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。<o:p></o:p>

1、常用内部对象<o:p></o:p>

　　在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。<o:p></o:p>

　　对JavaScript内部对象的引用，以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。<o:p></o:p>

１)、串对象<o:p></o:p>

• string对象：内部静态性。 <o:p></o:p>
• 访问properties和methods时，可使用（.）运算符实现。 <o:p></o:p>
• 基本使用格式：objectName.prop/methods <o:p></o:p>

（１）串对象的属性<o:p></o:p>

　　该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例：<o:p></o:p>

mytest="This is a JavaScript"<o:p></o:p>

mystringlength=mytest.length<o:p></o:p>

　　最后mystringlength返回mytest字串的长度为20。<o:p></o:p>

（２）串对象的方法<o:p></o:p>

　　string对象的方法共有１９个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。<o:p></o:p>

其主要方法如下：<o:p></o:p>

• 锚点anchor()：该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name="")一样。通过下列格式访问:string.anchor(anchorName)。 <o:p></o:p>
• 有关字符显示的控制方法 <o:p></o:p>

big字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。<o:p></o:p>

• 字体颜色方法；fontcolor(color) <o:p></o:p>
• 字符串大小写转换 <o:p></o:p>

toLowerCase()－小写转换，toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式:<o:p></o:p>

string=stringValue.toUpperCase和string=stringValue.toLowerCase。<o:p></o:p>

• 字符搜索：indexOf[charactor,fromIndex] <o:p></o:p>

从指定formIndtx位置开始搜索charactor第一次出现的位置。<o:p></o:p>

• 返回字串的一部分字串：substring(start,end) <o:p></o:p>