《复件 060901商务网站页面设计技术(3pian_2).doc》由会员分享，可在线阅读，更多相关《复件 060901商务网站页面设计技术(3pian_2).doc（33页珍藏版）》请在三一文库上搜索。
1、本章内容提要这一章共分为3节，主要对JavaScript中的对象和主要的内置函数进行介绍，以便为后续的进一步学习奠定基础。具体内容包括：u JavaScript对象模型及自定义对象u JavaScript的内置对象u JavaScript的主要内置函数第14章javaScript的对象与内置函数14.1 JavaScript对象模型及自定义对象14.1.1 JavaScript中的对象概念面向对象的语言（如Java）以实际问题中所涉及的各种对象为主要研究内容。对象就是现实世界中某个具体的物理实体在计算机中的映射和表示。对象及其属性和方法是掌握面向对象的程序设计技术所必须理解的几个重要概念。 任
2、何一个对象都存在一定的状态，具有一定的行为。如卡车、公共汽车、轿车等都会涉及几个重要的表示其存在状态的物理量，如：载客数、速度、耗油量、自重和车轮数等，另外还有几个重要的行为，如：加速、减速、刹车和转弯等。在面向对象的语言中把描述对象状态的物理量叫做对象的属性。而把对象所具有的行为叫做对象的方法。 javacript的对象（Object），不像基本数据类型（如布尔、数值，宇符）那么简单，它是一种集合性的数据类型。也就是说，每一个对象都可以拥有属于它自己的成员，这些成员依照性质的不同又分为数据成员及函数成员，数据成员用来存放与对象相关的静态数据，如对象的颜色、长度、名称等；而函数成员则是可供调用
3、的函数，用来对对象的属性进行操作，表示对象的行为。所以JavaScript中对象的属性由数据成员表示，而对象的方法由函数成员表示。如将汽车看成是一个对象，那么汽车的颜色，大小，品牌等就是该对象的属性由数据成员表示；而发动，刹车，拐弯等则是汽车对象的方法，由函数成员表示。 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成的。 JavaScript语言是基于对象的（Object-Based）脚本语言，而不是完全的面向对象的（object-oriented）编程。之所以说它是一门基于对象的语言，主要是因为它没有提供像类、抽象、继承、重载等有关面向
4、对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的，但它还是具有面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档的能力。 在JavaScript中可以使用的对象包括：用户自定义的对象、浏览器根据web页面的内容自动提供的对象（如window 和document等）、JavaScript的内置对象（如String、Math、Date等）。14.1.2 JavaScript中对象的使用一、对象实例的创建与删除一个对象在被使用之前，必须存在
5、，否则使用时会出现错误信息。在JavaScript中对于对象的使用（如调用其属性或方法），有两种情况：其一是说该对象是静态对象，即在使用该对象时不需要为它创建实例；而另一种对象则在使用时必须为它创建一个实例，即该对象是动态对象。（一）、创建对象实例语句：我们可以使用new 运算符来为用户自定义对象或预定义对象（如：数组、日期、函数、图像、字符串等）创建一个实例。1、创建对象实例的语法格式：实例名=new 对象名（若干参数）；2、语句说明: 若干参数之间用逗号分隔。（二）、删除对象实例语句：创建好的对象实例还可以用 delete 运算符来删除。语法格式为：delete 实例名；例如：用JavaS
6、cript的内置对象String，创建对象实例Astring。var Astring=new String(abcd)删除对象实例Astring：delete Astring；二、对象属性与方法的调用（一）、对象属性的调用数组是用单一的变量名关联数值的一个序列，在 JavaScript 中属性和数组是密切相关的；事实上，它把对象的所有属性组成一个数组，这个数组叫对象的关联数组（associative array），其数组名同对象的实例名。对象的属性可作为数组的下标使用。因而，在JavaScript中属性既可按一般对象方式访问，也可按数组方式访问，具体如下：1、对象属性调用的基本语法：按对象方式
7、访问：对象实例名.属性名；按数组方式访问：对象实例名 “属性名”；对象实例名数组下标序号。2、对象属性调用语句说明: JavaScript 中对象名和属性名都是大小写敏感的，下标是从 0 开始编号的。 可以通过给属性赋值来定义一个属性。例如：假设Mycomputer 是计算机对象computer的实例，对象computer具有属性生产年限year，则对其访问并赋值的格式为：（1）Mycomputer. year=1999；（2）Mycomputer“ year”=1999；或 Mycomputer0=1999；（二）、对象方法的调用对象的方法实际上就是对象自身的函数。方法调用同属性的调用相似。
8、 对象方法调用的基本语法：对象名.方法名（参数表）；例如：调用JavaScript的内置对象Math的正弦sin()方法，计算sin(PI/2)格式为：var y=0；y=Math.sin(Math.PI/2);（三）对象操作语句WITHwith 语句为一段语句建立缺省的对象，任何无对象的属性引用，都假定使用该缺省的对象。1、WITH语句语法格式：with（对象名）语句片段2、语句说明:语句片段中的属性和方法若未指定所属的对象，则默认对象均指“对象名”。with 语句提供了一种对象和其属性、方法之间的简单表示方式。例如：下面语句中的属性PI、以及方法cos()、sin()并未指定所属的对象，实
9、际上均指JavaScript的内置对象Math。 var s, x, y; var r=10;with(Math)s=PI*r*r;x=r*cos(PI);y=r*sin(PI/2); （四）对象引用关键字thisJavaScript 有一个特殊的关键字：this，用它我们可以在一个方法中引用当前的对象。当我们将其用于 form 属性时，this 关键字引用当前对象的的父表单。如下例当用户按下按钮button1时，文本框对象text1内的内容将以其父表单的名字“myForm”来代替原值“文本框”： 14.1.3.自定义对象的创建JavaScript中允许自己定义对象，创建自定义对象的步骤包括：
10、定义对象的构造函数、注册对象的方法、创建对象的实例，具体如下：一、定义对象的构造函数定义对象的构造函数主要是指明对象的名字（即函数的名字）、各种属性，并进行初始化。具体定义方法可参见“13.4节 JavaScript的函数”中所述的一般函数定义，区别在于，这里函数的名字必须与对象的名字相同。假设我们需要创建的对象名字为computer（计算机），它具有三个属性： brand（品牌）、year（生产年限）、owner（拥有者）。则：该计算机对象computer的构造函数可定义如下：function computer(brand,year,owner) this.brand=brand;this.
11、year=year;this.owner=owner; 注： this必须有，表示“这个对象”即调用该函数的对象。二、定义对象的方法对象的方法就是赋值给某个对象的一个函数。所以，定义一个方法象定义标准函数一样。1、定义对象方法的步骤。 首先，需要定义一个预作为对象方法的函数； 然后 将该函数赋值给对象。2、定义对象方法示例若已经定义了预作为对象方法的函数：function displayComputer() . . ，现在需要把该函数定义为computer（计算机）对象的方法，这里假设方法名字为display。则只需要在构造函数中加入下面的赋值语句，将函数displayComputer()赋值
12、给对象computer的方法display即可。this.display=displayComputer;注：如果准备把一个函数定义为某个对象的方法，则函数体内部即可使用this操作符。三、创建对象的实例：创建自定义对象实例与前面所述一般对象实例的创建相同，也使用NEW语句创建。语法格式为：实例名=new 构造函数名（实际参数表）；例如：调用自定义对象computer（计算机）的构造函数，创建一个brand（品牌）为IBM、year（生产年限）为1996、owner（拥有者）为Li的实例MYComputer，语句格式为：var MYComputer；MYComputer=new compute
13、r(IBM,1996,Li);四、【示例14.1.1】本例子的功能是：说明JavaScript的自定义对象的使用。有关的代码可参见下面的源程序文件：E14_1_1.htm，在浏览器中的显示效果如图14.1.1所示。【源程序清单：E14_1_1.htm】第14章 JavaScript的对象与内置函数使用示例!- Begin /注：如果准备把一个函数定义为某个对象的方法，则函数体内部可使用this操作符 function displayComputer() var result=一台+this.year+年制造的+this.brand+计算机，所有者+this.owner+; document.w
14、riteln(result); /对象的构造函数 function computer(brand,year,owner) this.brand=brand;this.year=year;this.owner=owner;/this必须有 /把函数displayComputer()注册为对象的方法 this.display=displayComputer; /输出“对象属性”的函数 function show(obj_name,obj) var result=,i=; document.writeln(+obj_name+对象实例的属性值如下：); /for(i in obj)语句的使用，以及对
15、象属性的2种引用方法 for(i in obj) result += obj_name+.+i+=+obji+; document.writeln(result); / End -第14.1.3 JavaScript的自定义对象使用示例 !-/创建对象实例 var MYComputer=new computer(IBM,1996,Li); /程序运行时可为对象动态加入属性，但不影响其原来值。 MYComputer.current=Legnd; /创建对象另一个实例 var AnotherComputer=new computer(Microsoft,1998,Wang); /调用输出对象属性的
16、函数 show(我的计算机,MYComputer); show(another,AnotherComputer); /调用对象的“display()方法” document.writeln(调用对象的“display()方法“); MYComputer.display(); AnotherComputer.display(); /- 图 14.1.1 JavaScript自定义对象的应用14.1.4 对象的事件及事件处理一、事件概念JavaScript是基于对象(object-based)的语言。这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-d
17、riven)。它是在用图形界面的环境下，和用户进行交互对话的。通常我们把鼠标或热键的动作称之为事件（Event），事件定义了用户与页面交互时产生的各种操作，是浏览器响应用户交互操作的一种机制。归纳起来，在JavaScript中使用的事件有三大类： 1. 鼠标操作引起的事件当用户在页面中操作鼠标时就会引起鼠标事件。例如，当用户单击超级连接或按钮时，就产生一个鼠标click（单击）操作事件；当用户将鼠标指针移动到元素或控件上方时，则会产生MouseOver (鼠标在上方)事件；而当用户将鼠标指针从元素或控件上方移出时，则会产生MouseOut(鼠标移出)事件。2. 键盘操作引起的事件； 当用户在页
18、面中进行键盘操作时则会引起键盘事件。例如，当用户按下一个键时，就产生一个键盘KeyDown（按下）操作事件；当用户放开一个键时，就产生一个键盘KeyUp（释放按键）事件；而当用户按下并放开一个键时，则产生一个键盘KeyPress（击键）事件；当用户通过键盘输入改变文本框的文字时则会产生一个Change (文本框内容改变) 事件。3. 浏览器自己引起的事件。事件不仅可以在用户通过鼠标或键盘操作与页面进行交互的过程中产生，而且浏览器自己的一些动作也会产生事件。例如，当浏览器载入一个页面时，就会发生load（载入）事件；而当浏览器卸载一个页面时，则会发生unload（卸载）事件等。二、事件处理及处理
19、器浏览器为了响应某个事件而进行的处理过程，叫做事件处理。为了响应用户的事件，例如 Click (鼠标单击)事件, Change (文本框文字改变) 事件, MouseOver (鼠标在元素或控件上方) 事件等。必须首先定义事件处理器(event handler)，由它来调用相应的JavaScript 代码完成对用户的响应。（一）、事件处理器定义； 为了给 HTML 标记定义一个事件处理器来处理一个事件。需要为标记加入一个事件处理器属性，属性值为双引号包含的 JavaScript 代码。1、事件处理器语法在使用上, event handlers 有以下语法格式:其中 是HTML的标记, stat
20、ement1、statement2、statement3 是事件发生时event Handler要执行的JavaScript 代码语句, 各语句之间用分号“ ;” 来分隔，若每行一条语句可省略分号。例如：为按钮定义鼠标单击事件的事件处理器onClick，语法如下：上例的事件处理器 onClick 调用了四条语句，完成了文档背景色的改变和提示。注意单双引号的正确使用。2、事件处理器说明： 事件处理器的名称是在event 前加上一个前缀 on。例如 onClick、onChange、onMouseOver 等等。这些 event handler 若在 HTML 中使用, 例如在 或 标记內, 可不
21、考虑大小写, 但若在 內, 就一定全部要用小写。例如 onclick、onchange、onmouseover。需要注意的是：在event handler內, 有些地方是不能省略上层的父对象的, 例如 onClick=window.close( ) 就不能简写为 onClick=close( ) 。因为，我們很多情况下不知道各版本的浏览器对于简略写法的兼容程度， 所以应该尽量使用标准写法。 在 event handlers中使用的字符名称要放在双引号 或单引号 內, 否则浏览器会将这些字符当作变量来处理。 在一些 event handler 中, 当事件处理器调用一个函数 function (
22、或方法 method)时, 若这个 function 返回值为true, 则 event handler 会正常操作, 若返回值为false , 则 event handler 会取消。（二）常用的事件及事件处理器下表14.1给出了JavaScript 支持的一些常用事件及事件处理器，同时对事件发生的条件和适用的元素或对象进行了说明。表14.1常用的事件及事件处理器事件名称事件发生的条件 适用的元素或对象 事件处理器 Abort 用户中断装载图像（如点击一个链接） Img(图像) onAbort Blur 用户使窗口或表单元素失去焦点，使该对象成为后台对象时Window(窗口)和所有表单元素
23、onBlur Change 用户改变text、Password或texturea元素值时发该事件，同时当select中一个选项状态改变后也会引发该事件。Text（文本框）、Password （密码输入框）textareas（文本区）、select（选择框） onChange Click 用户单击鼠标按钮时Button(按钮)、radio （单选钮）、checkbox（复选框）、submit （提交按钮）、reset（重置按钮）、链接 onClick DragDrop 用户拖放一个对象到浏览器窗口，如拖放一个文件到浏览器窗口 Window(窗口) onDragDrop Error 装载文档或图像
24、出错时Img(图像)、Window(窗口) onError Focus 用户使窗口或表单元素获得焦点，使该对象成为前台对象时 Window(窗口)和所有表单元素 onFocus KeyDown 用户按下一个键 Document(文档)、Img(图像)、链接、表单文本域 onKeyDown KeyPress 用户按下并放开一个键Document(文档)、Img(图像)、链接、表单文本域 onKeyPress KeyUp 用户释放按键 Document(文档)、Img(图像)、链接、表单文本域 onKeyUp Load 当用户载入文档时，Document(文档) onLoad MouseDown
25、用户按下鼠标键 Document(文档)、按钮、链接 onMouseDown MouseMove 用户移动鼠标光标 缺省 onMouseMove MouseOut 用户在一个区域或链接中移出鼠标光标 区域、链接 onMouseOut MouseOver 用户在一个区域或链接上移动鼠标光标 区域、链接 onMouseOver MouseUp 用户释放鼠标按钮 Document(文档)、按钮、链接 onMouseUp Move 用户或脚本移动窗口 Window(窗口) onMove Reset 用户重置表单（按 Reset 按钮） Reset 按钮onReset Resize 用户或脚本改变窗口大
26、小 Window(窗口) onResize Select 当用户选择Text或Textarea对象中的文字时Text（文本框）、textareas（文本区）onSelect Submit 用户提交表单 Submit按钮onSubmit Unload当用户卸载文档，即Web页面退出时Document(文档)onUnload【事件说明】 每种浏览器对每个HTML标记能使用的事件会有所不同,具体内容可以参见其它资料。 浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理器，完成事件处理过程。 JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，以此可以开
27、发出具有交互性，并易于使用的网页。三、事件驱动由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。例如，当用户在按钮上单击鼠标时，产生click事件，由此会启动onClick 这一event handler；这个事件处理器则会调用我们预设的JavaScript代码，完成特定的功能。四、【示例14.1.2】本例子的功能是：说明JavaScript对象的事件及事件处理的使用。有关的代码可参见下面的源程序文件：E14_1_2.htm，在浏览器中的显示效果如图14.1.2图14.1.5所示。【源程序清单：E14_1_2.htm】第14章 JavaScript对象的事件及事件
28、处理.bfont font-size:24px;.nfont font-size:16px;.sfont font-size:10px;.cdiv font-size:12px;.cdiv span cursor:hand;text-decoration:underline;color:blue;第14.1.4 JavaScript对象的事件及事件处理使用示例 点击下面的“大字体”，“中字体”，“小字体”，改变字体大小。大字体显示 |中字体显示 |小字体显示我没有任何变化，你知道吗，呵呵！静夜思（唐朝：李白）床前明月光，疑是地上霜。举头望明月，低头思故乡。相思（唐朝：王维）红豆生南国，春来发几
29、枝？愿君多采撷，此物最相思。1、【示例解析】 本例用页面的Load事件，使访问者进入网页、且在网页下载完时出现警告窗口。 用鼠标的click事件实现改变文章字体大小的功能。 用文本框的change事件，在用户改变text内容时出现警告窗口。 用鼠标的mouseover事件，实现了对JavaScript函数的调用。2、【效果展示】本示例的显示效果如图14.1.2图14.1.5所示。图 14.1.2 JavaScript对象的事件及事件处理的应用图 14.1.3 加载页面时打开的对话框图 14.1.4 改变文本框值时打开的对话框图 14.1.5 鼠标移到按钮上方时打开的对话框及点击确定按钮后页面显
30、示的内容五、【上机实践】 （一）输入源程序E14_1_2.htm，并通过浏览器查看运行效果。（二）分析主要代码的功能，并进行修改后重新运行，观察不同设置对显示效果的影响。14.2 JavaScript的内置对象JavaScript把程序设计中的“常用功能（如数学运算、日期和时间处理、字符串处理等）”设计成”“内置对象、内置函数”，提供给用户使用，为程序设计提供了方便。内置对象包括：String、Math、Date、Array等，它们都有自己的属性和方法，其访问方式也同自定义对象一样。下面进行详细讲述。一、String对象String对象是JavaScript本身内建的一个对象，用来处理与字符串
31、有关的功能。String 对象可用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。 (一) String对象的实例变量的建立1、创建实例的语法如果要建立String对象的实例，可以通过它的构造函数来进行，其格式如下：var 实例变量=new String(参数)例如：建立一个String对象的实例OneString，其值为good。语句如下：var OneString=new String(good)2、说明： 不要将String对象同字符串变量量相混淆，如下例中 s1 为字符串变量，而 s2 为 String 对象： s1 = moon；s2 = new String(moon)
32、可以在一个字符串变量中调用任何 String 对象方法，JavaScript 自动将字符串变量转换为一个临时的 String 对象并调用其方法，然后丢弃该临时 String 对象， 我们也可以在一个字符串变量中使用 String.length 属性。 建议首先使用字符串变量，除非有特殊的需要，因为 String 对象不够直观，如：s1 = 2 + 2/创建字符串变量s2 = new String(2 + 2)/创建 String 对象eval(s1)/返回数值 4eval(s2)/返回字符串 2 + 2（二）String对象的属性String对象的属性length：功能是返回字符串的长度。（三
33、）String对象的方法String对象的方法按功能可以分为四类，具体如下：1、字符串自身处理的方法：（1）charAt(idx)：返回指定位置处的字符。String內的字符 (character) 是一个序列, 排序位置index（索引号或下标）是从 0 开始，由左到右排下去, 包括空格字符, 例如要返回某个位置（index）处的字符, 可使用charAt()方法。语法:stringName.charAt(index)（2）indexOf( searchchr , fromIndex) 从指定位置fromIndex处开始，在原串中查找子字符串searchchr，并返回找到的第一个指定子字符串
34、searchchr的索引（即排序位置，从0开始），若子字符串searchchr不存在，则给出-1。例如：从第5个位置处开始，在x中查找子字符串ing，语句如下：x=Good Morning. What a nice day ! ； document.write( x.indexOf( ing, 5 ) )；/输出为9（3）lastIndexOf(“searchchr”) 在原串中查找子字符串searchchr，并返回找到的最后一个子字符串searchchr的索引（即排序位置，从0开始），若子字符串searchchr不存在，则给出-1。例如：在x中查找子字符串o，并返回找到的最后一个o的索引。语
35、句如下：x=Good Morning. What a nice day ! ； document.write( x.lastindexOf( o) )；/输出为6（4）slice(fromidx,toidx)在原字符串中从第fromidx个位置开始到toidx个位置结束（不包括该位置），提取一个子字符串例如：在x中从第5个位置开始到12个位置结束，提取一个子字符串。语句如下：/输出为Hello, Smith j若沒有参数toidx, 就是抽取至尾部。如果参数toidx为负数,表示从尾部向左数。例如：在x中从第5个位置开始到5个位置结束，提取一个子字符串。语句如下：/输出为Hello, Smit
36、h j（5）substring(fromidx,toidx):功能及语法和 slice( ) 相同，略。（6）substr(fromidx,number) 在原字符串中从第fromidx个位置开始提取number个字符，组成一个新串。若沒有参数number, 就是抽取至尾部。例如：在x中从第5个位置开始，提取7个字符。语句如下：/输出为Hello, Smith j（7）charCodeAt(index)：返回指定位置处的字符的ASCII编码。例如：返回字符串happy，第0个位置处的字符的ASCII编码。语句如下：b=happy.charCodeAt(0) ；/b的值是104(8) fromC
37、harCode(number1, number2, . . . )将各个ASCII编码number1, number2, . . .，转换为相应的字符。例如 65 变为 A, 66变为B, 67变为C 等等。例如：返回ASCII编码对应的字符。语句如下：document.write(String.fromCharCode(65,66,67,68,69) )；/输出为：ABCDEfromCharCode( ) 是一个固定的 method, 由 JavaScript 的 String object调用, 不可用于自定义的 string, 例如 str.fromCharCode(65) 是错误的语法
38、。2、字符串在页面中的外观处理的方法字符串在页面中的外观处理方法多与HTML中的标记对应，主要的方法如下：(1) big()：加大字符串的字号，即为字符添加标记。(2) bold()：粗体显示字符串，即为字符添加标记。 (3) fontcolor(color)：指定字符串显示的颜色，即为字符添加字体颜色标记。(4) sub()：使字符串以下标显示。(5) strike()：为字符串加删除线。3、把字符串转换成HTML元素的方法：这里介绍把字符串转换成HTML超级链接元素的方法 link(URL):通过URL串的不同取值，可以使字符串对象链向不同的页面，从而动态地产生超级链接。 4、其它方法：（
39、1）concat(string2)：将当前串和string2连接，生成新串。 例如：将当前串a和b连接，生成新串。语句如下：a=Good Morning.；b=What a nice day! ；document.write( a.concat(b) )；/输出为：Good Morning. What a nice day!(2) toLowerCase():把字符串中的全部字符转换为小写(3) toUpperCase():把字符串中的全部字符转换为大写。(四)【示例14.2.1】本例子的功能是：说明JavaScript的内置对象String的使用。有关的代码可参见下面的源程序文件：E14_2_1.htm，在浏览器中的显示效果如图14.2.1所示。【源程序清单：E14_2_1.htm】第14.2 JavaScript的内置对象使用示例第14.2 JavaScript的内置对象使用示例 String对象使用示例 字符串自身处理的方法示例： var str=Look At This document.writeln(Loo