商务网站页面设计技术Word格式.docx
《商务网站页面设计技术Word格式.docx》由会员分享，可在线阅读，更多相关《商务网站页面设计技术Word格式.docx（54页珍藏版）》请在冰豆网上搜索。
例如：
用JavaScript的内置对象String，创建对象实例Astring。
varAstring=newString（"
abcd"
）
删除对象实例Astring：
deleteAstring；
二、对象属性与方法的调用
（一）、对象属性的调用
数组是用单一的变量名关联数值的一个序列，在JavaScript中属性和数组是密切相关的；
事实上，它把对象的所有属性组成一个数组，这个数组叫对象的关联数组（associativearray），其数组名同对象的实例名。
对象的属性可作为数组的下标使用。
因而，在JavaScript中属性既可按一般对象方式访问，也可按数组方式访问，具体如下：
1、对象属性调用的基本语法：
按对象方式访问：
对象实例名.属性名；
按数组方式访问：
对象实例名[“属性名”]；
对象实例名[数组下标序号]。
2、对象属性调用语句说明:
JavaScript中对象名和属性名都是大小写敏感的，下标是从0开始编号的。
可以通过给属性赋值来定义一个属性。
假设Mycomputer是计算机对象computer的实例，对象computer具有属性生产年限year，则对其访问并赋值的格式为：
（1）Mycomputer.year=1999；
（2）Mycomputer[“year”]=1999；
或Mycomputer[0]=1999；
（二）、对象方法的调用
对象的方法实际上就是对象自身的函数。
方法调用同属性的调用相似。
对象方法调用的基本语法：
对象名.方法名（参数表）；
调用JavaScript的内置对象Math的正弦sin（）方法，计算sin（PI/2）格式为：
vary=0；
y=Math.sin（Math.PI/2）;
（三）对象操作语句WITH
with语句为一段语句建立缺省的对象，任何无对象的属性引用，都假定使用该缺省的对象。
1、WITH语句语法格式：
with（对象名）{语句片段}
语句片段中的属性和方法若未指定所属的对象，则默认对象均指“对象名”。
with语句提供了一种对象和其属性、方法之间的简单表示方式。
下面语句中的属性PI、以及方法cos（）、sin（）并未指定所属的对象，实际上均指JavaScript的内置对象Math。
vars,x,y;
varr=10;
with（Math）{s=PI*r*r;
x=r*cos（PI）;
y=r*sin（PI/2）;
}
（四）对象引用关键字this
JavaScript有一个特殊的关键字：
this，用它我们可以在一个方法中引用当前的对象。
当我们将其用于form属性时，this关键字引用当前对象的的父表单。
如下例当用户按下按钮button1时，文本框对象text1内的内容将以其父表单的名字“myForm”来代替原值“文本框”：
<
formname="
myForm"
>
<
inputtype="
text"
name="
text1"
value="
文本框"
button"
button1"
显示表单名"
onClick="
this.form.text1.value=this.form.name"
/form>
14.1.3.自定义对象的创建
JavaScript中允许自己定义对象，创建自定义对象的步骤包括：
定义对象的构造函数、注册对象的方法、创建对象的实例，具体如下：
一、定义对象的构造函数
定义对象的构造函数主要是指明对象的名字（即函数的名字）、各种属性，并进行初始化。
具体定义方法可参见“13.4节JavaScript的函数”中所述的一般函数定义，区别在于，这里函数的名字必须与对象的名字相同。
假设我们需要创建的对象名字为computer（计算机），它具有三个属性：
brand（品牌）、year（生产年限）、owner（拥有者）。
则：
该计算机对象computer的构造函数可定义如下：
functioncomputer（brand,year,owner）
{this.brand=brand;
this.year=year;
this.owner=owner;
}
this必须有，表示“这个对象”即调用该函数的对象。
二、定义对象的方法
对象的方法就是赋值给某个对象的一个函数。
所以，定义一个方法象定义标准函数一样。
1、定义对象方法的步骤。
首先，需要定义一个预作为对象方法的函数；
然后将该函数赋值给对象。
2、定义对象方法示例
若已经定义了预作为对象方法的函数：
functiondisplayComputer（）{......}，现在需要把该函数定义为computer（计算机）对象的方法，这里假设方法名字为display。
则只需要在构造函数中加入下面的赋值语句，将函数displayComputer（）赋值给对象computer的方法display即可。
this.display=displayComputer;
如果准备把一个函数定义为某个对象的方法，则函数体内部即可使用this操作符。
三、创建对象的实例：
创建自定义对象实例与前面所述一般对象实例的创建相同，也使用NEW语句创建。
实例名=new构造函数名（实际参数表）；
调用自定义对象computer（计算机）的构造函数，创建一个brand（品牌）为IBM、year（生产年限）为1996、owner（拥有者）为Li的实例MYComputer，语句格式为：
varMYComputer；
MYComputer=newcomputer（"
IBM"
1996,"
Li"
）;
四、【示例14.1.1】
本例子的功能是：
说明JavaScript的自定义对象的使用。
有关的代码可参见下面的源程序文件：
E14_1_1.htm，在浏览器中的显示效果如图14.1.1所示。
【源程序清单：
E14_1_1.htm】
html>
head>
title>
第14章JavaScript的对象与内置函数使用示例<
/title>
scriptlanguage="
JavaScript"
!
--Begin//注：
如果准备把一个函数定义为某个对象的方法，则函数体内部可使用this操作符
functiondisplayComputer（）
{varresult="
一台"
+this.year+"
年制造的"
+this.brand+"
计算机，所有者"
+this.owner+"
br>
"
;
document.writeln（result）;
}
//对象的构造函数
functioncomputer（brand,year,owner）
{this.brand=brand;
//this必须有
//把函数displayComputer（）注册为对象的方法
this.display=displayComputer;
//输出“对象属性”的函数
functionshow（obj_name,obj）
{varresult="
i="
document.writeln（"
h3>
+obj_name+"
对象实例的属性值如下：
/h3>
//for（iinobj）语句的使用，以及对象属性的2种引用方法
for（iinobj）
{result+=obj_name+"
."
+i+"
="
+obj[i]+"
}
//End-->
/script>
/head>
body>
h3align="
center"
>
第14.1.3JavaScript的自定义对象使用示例<
hrsize="
3"
color="
#CC0066"
--//创建对象实例
varMYComputer=newcomputer（"
//程序运行时可为对象动态加入属性，但不影响其原来值。
MYComputer.current="
Legnd"
//创建对象另一个实例
varAnotherComputer=newcomputer（"
Microsoft"
1998,"
Wang"
//调用输出对象属性的函数
show（"
我的计算机"
MYComputer）;
another"
AnotherComputer）;
//调用对象的“display（）方法”
调用对象的“display（）方法“<
MYComputer.display（）;
AnotherComputer.display（）;
//-->
<
/body>
/html>
图14.1.1JavaScript自定义对象的应用
14.1.4对象的事件及事件处理
一、事件概念
JavaScript是基于对象（object-based）的语言。
这与Java不同，Java是面向对象的语言。
而基于对象的基本特征，就是采用事件驱动（event-driven）。
它是在用图形界面的环境下，和用户进行交互对话的。
通常我们把鼠标或热键的动作称之为事件（Event），事件定义了用户与页面交互时产生的各种操作，是浏览器响应用户交互操作的一种机制。
归纳起来，在JavaScript中使用的事件有三大类：
1.鼠标操作引起的事件
当用户在页面中操作鼠标时就会引起鼠标事件。
例如，当用户单击超级连接或按钮时，就产生一个鼠标click（单击）操作事件；
当用户将鼠标指针移动到元素或控件上方时，则会产生MouseOver（鼠标在上方）事件；
而当用户将鼠标指针从元素或控件上方移出时，则会产生MouseOut（鼠标移出）事件。
2.键盘操作引起的事件；
当用户在页面中进行键盘操作时则会引起键盘事件。
例如，当用户按下一个键时，就产生一个键盘KeyDown（按下）操作事件；
当用户放开一个键时，就产生一个键盘KeyUp（释放按键）事件；
而当用户按下并放开一个键时，则产生一个键盘KeyPress（击键）事件；
当用户通过键盘输入改变文本框的文字时则会产生一个Change（文本框内容改变）事件。
3.浏览器自己引起的事件。
事件不仅可以在用户通过鼠标或键盘操作与页面进行交互的过程中产生，而且浏览器自己的一些动作也会产生事件。
例如，当浏览器载入一个页面时，就会发生load（载入）事件；
而当浏览器卸载一个页面时，则会发生unload（卸载）事件等。
二、事件处理及处理器
浏览器为了响应某个事件而进行的处理过程，叫做事件处理。
为了响应用户的事件，例如Click（鼠标单击）事件,Change（文本框文字改变）事件,MouseOver（鼠标在元素或控件上方）事件等。
必须首先定义事件处理器（eventhandler），由它来调用相应的JavaScript代码完成对用户的响应。
（一）、事件处理器定义；
为了给HTML标记定义一个事件处理器来处理一个事件。
需要为标记加入一个事件处理器属性，属性值为双引号包含的JavaScript代码。
1、事件处理器语法
在使用上,eventhandlers有以下语法格式:
tageventHandler="
statement1;
statement2;
statement3；
……"
其中<
tag>
是HTML的标记,statement1、statement2、statement3是事件发生时eventHandler要执行的JavaScript代码语句,各语句之间用分号“;
”来分隔，若每行一条语句可省略分号。
为按钮定义鼠标单击事件的事件处理器onClick，语法如下：
inputtype=buttonvalue=”改变背景色“onClick=”document.bgColor=’red’;
alert（‘背景色变为了红色’）;
document.bgColor=’blue’;
alert（‘背景色又变为了蓝色’）“>
上例的事件处理器onClick调用了四条语句，完成了文档背景色的改变和提示。
注意单双引号的正确使用。
2、事件处理器说明：
事件处理器的名称是在event前加上一个前缀"
on"
。
例如onClick、onChange、onMouseOver等等。
这些eventhandler若在HTML中使用,例如在<
form>
或<
标记內,可不考虑大小写,但若在<
script>
內,就一定全部要用小写。
例如onclick、onchange、onmouseover。
需要注意的是：
在eventhandler內,有些地方是不能省略上层的父对象的,例如onClick="
window.close（）"
就不能简写为onClick="
close（）"
。
因为，我們很多情况下不知道各版本的浏览器对于简略写法的兼容程度，所以应该尽量使用标准写法。
在eventhandlers中使用的字符名称要放在双引号"
"
或单引号'
'
內,否则浏览器会将这些字符当作变量来处理。
在一些eventhandler中,当事件处理器调用一个函数function（或方法method）时,若这个function返回值为true,则eventhandler会正常操作,若返回值为false,则eventhandler会取消。
（二）常用的事件及事件处理器
下表14.1给出了JavaScript支持的一些常用事件及事件处理器，同时对事件发生的条件和适用的元素或对象进行了说明。
表14.1常用的事件及事件处理器
事件名称
事件发生的条件
适用的元素或对象
事件处理器
Abort
用户中断装载图像（如点击一个链接）
Img（图像）
onAbort
Blur
用户使窗口或表单元素失去焦点，使该对象成为后台对象时
Window（窗口）和所有表单元素
onBlur
Change
用户改变text、Password或texturea元素值时发该事件，同时当select中一个选项状态改变后也会引发该事件。
Text（文本框）、Password（密码输入框）textareas（文本区）、select（选择框）
onChange
Click
用户单击鼠标按钮时
Button（按钮）、radio（单选钮）、checkbox（复选框）、submit（提交按钮）、reset（重置按钮）、链接
onClick
DragDrop
用户拖放一个对象到浏览器窗口，如拖放一个文件到浏览器窗口
Window（窗口）
onDragDrop
Error
装载文档或图像出错时
Img（图像）、Window（窗口）
onError
Focus
用户使窗口或表单元素获得焦点，使该对象成为前台对象时
onFocus
KeyDown
用户按下一个键
Document（文档）、Img（图像）、链接、表单文本域
onKeyDown
KeyPress
用户按下并放开一个键
onKeyPress
KeyUp
用户释放按键
onKeyUp
Load
当用户载入文档时，
Document（文档）
onLoad
MouseDown
用户按下鼠标键
Document（文档）、按钮、链接
onMouseDown
MouseMove
用户移动鼠标光标
缺省
onMouseMove
MouseOut
用户在一个区域或链接中移出鼠标光标
区域、链接
onMouseOut
MouseOver
用户在一个区域或链接上移动鼠标光标
onMouseOver
MouseUp
用户释放鼠标按钮
onMouseUp
Move
用户或脚本移动窗口
onMove
Reset
用户重置表单（按Reset按钮）
Reset按钮
onReset
Resize
用户或脚本改变窗口大小
onResize
Select
当用户选择Text或Textarea对象中的文字时
Text（文本框）、textareas（文本区）
onSelect
Submit
用户提交表单
Submit按钮
onSubmit
Unload
当用户卸载文档，即Web页面退出时
Document（文档）
onUnload
【事件说明】
每种浏览器对每个HTML标记能使用的事件会有所不同,具体内容可以参见其它资料。
浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理器，完成事件处理过程。
JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，以此可以开发出具有交互性，并易于使用的网页。
三、事件驱动
由鼠标或热键引发的一连串程序的动作，称之为事件驱动（EventDriver）。
例如，当用户在按钮上单击鼠标时，产生click事件，由此会启动onClick这一eventhandler；
这个事件处理器则会调用我们预设的JavaScript代码，完成特定的功能。
四、【示例14.1.2】
说明JavaScript对象的事件及事件处理的使用。
E14_1_2.htm，在浏览器中的显示效果如图14.1.2－图14.1.5所示。
E14_1_2.htm】
html>
第14章JavaScript对象的事件及事件处理<
--样式表定义-->
STYLEtype="
text/css"
.bfont{font-size:
24px;
.nfont{font-size:
16px;
.sfont{font-size:
10px;
.cdiv{font-size:
12px;
.cdivspan{cursor:
hand;
text-decoration:
underline;
color:
blue;
/STYLE>
--//事件调用的函数
functionkkk（）{
do{username=prompt（"
很高兴认识您，报上名来呀"
"
说呀"
}while（username=="
document.write（"
啊原来是：
+username,"
久仰大名，今后还请您多多关照呀！
//-->
--Load事件定义-->
bodyid=pgcontentclass=nfontonLoad='
alert（"
^_^欢迎光临我的主页"
）'
第14.1.4JavaScript对象的事件及事件处理使用示例<
colo
升级会员 