商务网站页面设计技术Word格式.docx

1、例如：用JavaScript的内置对象String，创建对象实例Astring。var Astring=new String（abcd）删除对象实例Astring：delete Astring；二、对象属性与方法的调用（一）、对象属性的调用数组是用单一的变量名关联数值的一个序列，在 JavaScript 中属性和数组是密切相关的；事实上，它把对象的所有属性组成一个数组，这个数组叫对象的关联数组（associative array），其数组名同对象的实例名。对象的属性可作为数组的下标使用。因而，在JavaScript中属性既可按一般对象方式访问，也可按数组方式访问，具体如下：1、对象属性调用的基

2、本语法： 按对象方式访问：对象实例名.属性名； 按数组方式访问：对象实例名 “属性名”；对象实例名数组下标序号。2、对象属性调用语句说明: JavaScript 中对象名和属性名都是大小写敏感的，下标是从 0 开始编号的。 可以通过给属性赋值来定义一个属性。假设Mycomputer 是计算机对象computer的实例，对象computer具有属性生产年限year，则对其访问并赋值的格式为：（1）Mycomputer. year=1999；（2）Mycomputer“ year”=1999；或 Mycomputer0=1999；（二）、对象方法的调用对象的方法实际上就是对象自身的函数。方法调用同

3、属性的调用相似。 对象方法调用的基本语法：对象名.方法名（参数表）；调用JavaScript的内置对象Math的正弦sin（）方法，计算sin（PI/2）格式为：var y=0；y=Math.sin（Math.PI/2）;（三）对象操作语句WITHwith 语句为一段语句建立缺省的对象，任何无对象的属性引用，都假定使用该缺省的对象。1、WITH语句语法格式：with（对象名）语句片段语句片段中的属性和方法若未指定所属的对象，则默认对象均指“对象名”。with 语句提供了一种对象和其属性、方法之间的简单表示方式。下面语句中的属性PI、以及方法cos（）、sin（）并未指定所属的对象，实际上均指J

4、avaScript的内置对象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中允许自己定义对象，创建自定义对象的步骤包括：定义对象的构

5、造函数、注册对象的方法、创建对象的实例，具体如下：一、定义对象的构造函数定义对象的构造函数主要是指明对象的名字（即函数的名字）、各种属性，并进行初始化。具体定义方法可参见“13.4节 JavaScript的函数”中所述的一般函数定义，区别在于，这里函数的名字必须与对象的名字相同。假设我们需要创建的对象名字为computer（计算机），它具有三个属性： brand（品牌）、year（生产年限）、owner（拥有者）。则：该计算机对象computer的构造函数可定义如下：function computer（brand,year,owner） this.brand=brand;this.year=y

6、ear;this.owner=owner; this必须有，表示“这个对象”即调用该函数的对象。二、定义对象的方法对象的方法就是赋值给某个对象的一个函数。所以，定义一个方法象定义标准函数一样。1、定义对象方法的步骤。 首先，需要定义一个预作为对象方法的函数； 然后 将该函数赋值给对象。2、定义对象方法示例若已经定义了预作为对象方法的函数：function displayComputer（） . . ，现在需要把该函数定义为computer（计算机）对象的方法，这里假设方法名字为display。则只需要在构造函数中加入下面的赋值语句，将函数displayComputer（）赋值给对象comput

7、er的方法display即可。this.display=displayComputer;如果准备把一个函数定义为某个对象的方法，则函数体内部即可使用this操作符。三、创建对象的实例：创建自定义对象实例与前面所述一般对象实例的创建相同，也使用NEW语句创建。实例名=new 构造函数名（实际参数表）；调用自定义对象computer（计算机）的构造函数，创建一个brand（品牌）为IBM、year（生产年限）为1996、owner（拥有者）为Li的实例MYComputer，语句格式为：var MYComputer；MYComputer=new computer（IBM,1996,Li）;四、【示例

8、14.1.1】本例子的功能是：说明JavaScript的自定义对象的使用。有关的代码可参见下面的源程序文件：E14_1_1.htm，在浏览器中的显示效果如图14.1.1所示。【源程序清单：E14_1_1.htm】html headtitle第14章 JavaScript的对象与内置函数使用示例script language=JavaScript!- Begin /注：如果准备把一个函数定义为某个对象的方法，则函数体内部可使用this操作符 function displayComputer（） var result=一台+this.year+年制造的+this.brand+计算机，所有者+thi

9、s.owner+br; document.writeln（result）; /对象的构造函数 function computer（brand,year,owner） this.brand=brand;/this必须有 /把函数displayComputer（）注册为对象的方法 this.display=displayComputer; /输出“对象属性”的函数 function show（obj_name,obj） var result=,i= document.writeln（h3+obj_name+对象实例的属性值如下：/h3 /for（i in obj）语句的使用，以及对象属性的2种引用

10、方法 for（i in obj） result += obj_name+.+i+=+obji+ / End -/script/headbodyh3 align=center 第14.1.3 JavaScript的自定义对象使用示例hr size=3 color=#CC0066-/创建对象实例 var MYComputer=new computer（ /程序运行时可为对象动态加入属性，但不影响其原来值。 MYComputer.current=Legnd /创建对象另一个实例 var AnotherComputer=new computer（Microsoft,1998,Wang /调用输出对象属

11、性的函数 show（我的计算机,MYComputer）;another,AnotherComputer）; /调用对象的“display（）方法” 调用对象的“display（）方法“ /html图 14.1.1 JavaScript自定义对象的应用14.1.4 对象的事件及事件处理一、事件概念JavaScript是基于对象（object-based）的语言。这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动（event-driven）。它是在用图形界面的环境下，和用户进行交互对话的。通常我们把鼠标或热键的动作称之为事件（Event），事件定义了用户与页面交互时

12、产生的各种操作，是浏览器响应用户交互操作的一种机制。归纳起来，在JavaScript中使用的事件有三大类： 1. 鼠标操作引起的事件当用户在页面中操作鼠标时就会引起鼠标事件。例如，当用户单击超级连接或按钮时，就产生一个鼠标click（单击）操作事件；当用户将鼠标指针移动到元素或控件上方时，则会产生MouseOver （鼠标在上方）事件；而当用户将鼠标指针从元素或控件上方移出时，则会产生MouseOut（鼠标移出）事件。2. 键盘操作引起的事件；当用户在页面中进行键盘操作时则会引起键盘事件。例如，当用户按下一个键时，就产生一个键盘KeyDown（按下）操作事件；当用户放开一个键时，就产生一个键盘

13、KeyUp（释放按键）事件；而当用户按下并放开一个键时，则产生一个键盘KeyPress（击键）事件；当用户通过键盘输入改变文本框的文字时则会产生一个Change （文本框内容改变） 事件。3. 浏览器自己引起的事件。事件不仅可以在用户通过鼠标或键盘操作与页面进行交互的过程中产生，而且浏览器自己的一些动作也会产生事件。例如，当浏览器载入一个页面时，就会发生load（载入）事件；而当浏览器卸载一个页面时，则会发生unload（卸载）事件等。二、事件处理及处理器浏览器为了响应某个事件而进行的处理过程，叫做事件处理。为了响应用户的事件，例如 Click （鼠标单击）事件, Change （文本框文字改

14、变） 事件, MouseOver （鼠标在元素或控件上方） 事件等。必须首先定义事件处理器（event handler），由它来调用相应的JavaScript 代码完成对用户的响应。（一）、事件处理器定义；为了给 HTML 标记定义一个事件处理器来处理一个事件。需要为标记加入一个事件处理器属性，属性值为双引号包含的 JavaScript 代码。1、事件处理器语法在使用上, event handlers 有以下语法格式:tag eventHandler=statement1;statement2;statement3；其中 是HTML的标记, statement1、statement2、stat

15、ement3 是事件发生时event Handler要执行的JavaScript 代码语句, 各语句之间用分号“ ;” 来分隔，若每行一条语句可省略分号。为按钮定义鼠标单击事件的事件处理器onClick，语法如下：input type=button value=”改变背景色 “ onClick=”document.bgColor=red ;alert（背景色变为了红色 ） ;document.bgColor=blue ;alert（背景色又变为了蓝色） “上例的事件处理器 onClick 调用了四条语句，完成了文档背景色的改变和提示。注意单双引号的正确使用。2、事件处理器说明： 事件处理器的名

16、称是在event 前加上一个前缀 on。例如 onClick、onChange、onMouseOver 等等。这些 event handler 若在 HTML 中使用, 例如在 或 标记內, 可不考虑大小写, 但若在 內, 就一定全部要用小写。例如 onclick、onchange、onmouseover。 需要注意的是：在event handler內, 有些地方是不能省略上层的父对象的, 例如 onClick=window.close（ ） 就不能简写为 onClick=close（ ） 。因为，我們很多情况下不知道各版本的浏览器对于简略写法的兼容程度， 所以应该尽量使用标准写法。 在 ev

17、ent handlers中使用的字符名称要放在双引号 或单引号 內, 否则浏览器会将这些字符当作变量来处理。 在一些 event handler 中, 当事件处理器调用一个函数 function （或方法 method）时, 若这个 function 返回值为true, 则 event handler 会正常操作, 若返回值为false , 则 event handler 会取消。（二）常用的事件及事件处理器下表14.1给出了JavaScript 支持的一些常用事件及事件处理器，同时对事件发生的条件和适用的元素或对象进行了说明。表14.1常用的事件及事件处理器事件名称事件发生的条件 适用的元素

18、或对象 事件处理器 Abort 用户中断装载图像（如点击一个链接） Img（图像） onAbort Blur 用户使窗口或表单元素失去焦点，使该对象成为后台对象时Window（窗口）和所有表单元素 onBlur Change 用户改变text、Password或texturea元素值时发该事件，同时当select中一个选项状态改变后也会引发该事件。Text（文本框）、Password （密码输入框）textareas（文本区）、select（选择框） onChange Click 用户单击鼠标按钮时Button（按钮）、radio （单选钮）、checkbox（复选框）、submit （提交按

19、钮）、reset（重置按钮）、链接 onClick DragDrop 用户拖放一个对象到浏览器窗口，如拖放一个文件到浏览器窗口 Window（窗口） onDragDrop Error 装载文档或图像出错时Img（图像）、Window（窗口） onError Focus 用户使窗口或表单元素获得焦点，使该对象成为前台对象时 onFocus KeyDown 用户按下一个键 Document（文档）、Img（图像）、链接、表单文本域 onKeyDown KeyPress 用户按下并放开一个键onKeyPress KeyUp 用户释放按键 onKeyUp Load 当用户载入文档时，Document（

20、文档） onLoad MouseDown 用户按下鼠标键 Document（文档）、按钮、链接 onMouseDown MouseMove 用户移动鼠标光标 缺省 onMouseMove MouseOut 用户在一个区域或链接中移出鼠标光标 区域、链接 onMouseOut MouseOver 用户在一个区域或链接上移动鼠标光标 onMouseOver MouseUp 用户释放鼠标按钮 onMouseUp Move 用户或脚本移动窗口 onMove Reset 用户重置表单（按 Reset 按钮） Reset 按钮onReset Resize 用户或脚本改变窗口大小 onResize Sele

21、ct 当用户选择Text或Textarea对象中的文字时Text（文本框）、textareas（文本区）onSelect Submit 用户提交表单 Submit按钮onSubmit Unload当用户卸载文档，即Web页面退出时Document（文档）onUnload【事件说明】 每种浏览器对每个HTML标记能使用的事件会有所不同,具体内容可以参见其它资料。 浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理器，完成事件处理过程。 JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，以此可以开发出具有交互性，并易于使用的网页。三、事件驱动由鼠标

22、或热键引发的一连串程序的动作，称之为事件驱动（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】html第14章 JavaScript对象的事件及事件处理STYLE type=text/css.bfont font-size:24px;.nfont font

23、-size:16px;.sfont font-size:10px;.cdiv font-size:12px;.cdiv span cursor:hand;text-decoration:underline;color:blue;/STYLE- /事件调用的函数function kkk（）dousername=prompt（很高兴认识您，报上名来呀,说呀while（username=document.write（啊原来是：+username,久仰大名，今后还请您多多关照呀！/-Load事件定义-body id = pgcontent class = nfont onLoad=alert（_欢迎光临我的主页）第14.1.4 JavaScript对象的事件及事件处理使用示例 colo