Web编程JavaScript部分(精品).ppt

《Web编程JavaScript部分(精品).ppt》由会员分享，可在线阅读，更多相关《Web编程JavaScript部分(精品).ppt（131页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web技术应用基础第六章 脚本语言-JavaScript6.1 脚本语言概述n什么是脚本语言?n嵌入在网页文件中的一种具有程序逻辑的语言n如何执行脚本语言？n脚本语言由集成在浏览器中的脚本引擎来解释执行。n什么时候执行脚本语言？n当浏览器打开一个HTML文档时，会从头到尾逐句解释整个文档中的HTML标签和脚本代码块，如果脚本代码块中有可以执行的语句，浏览器会在读取到该语句时立即解释执行。2/2/202326.2 JavaScript概述n6.2.1 JavaScript的起源nJavaScript是Netscape公司与Sun公司合作开发的，在JavaScript出现之前，浏览器只是一种能够显

2、示超文本文档的软件的基本部分，而在JavaScript出现之后，他们的交互性得到了很大的改善。nJavaScript第一个版本-JavaScript1.0出现在1995年推出的Netscape Navigator2浏览器中。n微软在推出IE3.0时发布了VBScript并以Jscript为名发布了JavaScript的一个版本。2/2/202336.2 JavaScript概述n6.2.1 JavaScript的起源n面对微软公司的竞争，Netscape与Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript语言进行了标准化，结果就是ECMAScript语言。nJscript，J

3、avaScript，ECMAScript实际上是一种语言，但是JavaScript和Java没有任何联系。2/2/202346.2 JavaScript概述n6.2.2 JavaScript运行机制nJavaScript是一种嵌入HTML文档中的、跨平台、基于对象和事件驱动的脚本语言，它既可以在客户端运行也可以在服务器上运行。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。2/2/202356.2 JavaScr

4、ipt概述n6.2.3 JavaScript的特点 n1.JavaScript是一种脚本语言n2.基于对象n3.事件驱动n4.动态n5.安全n6.与平台无关2/2/202366.2 JavaScript概述n6.2.4 JavaScript应用案例图像互换位置 n1.任务要求：单击时交换图象n2.代码示例：例ex6-01.html2/2/202376.3 JavaScript基本语法n6.3.1脚本代码的位置 n1.JavaScript嵌入HTML文件 n应用HTML的标记加入JavaScript代码。n语法：JavaScript代码n可以包含在或标记内，但包含在内的JavaScript脚本在

5、页面装载前运行，所以，函数一般包含在标记内。2/2/202386.3 JavaScript基本语法n6.3.1脚本代码的位置n2.将脚本程序代码放置在一个单独文件中n将JavaScript代码以扩展名“.js”为单独存放，再用标记的“src”属性把该代码调入文档。n语法：Javascript.html2/2/202396.3 JavaScript基本语法n6.3.1脚本代码的位置n3.将脚本程序代码作为属性值 如：hello2/2/2023106.2 JavaScript基本语法n6.2.2 JavaScript书写格式n1、区分大小写n2、用换行符作为一行的终止符n3、如需要把几行代码写在一

6、行中要用“;”分开。n4、注释：一行/或多行/*/。2/2/2023116.2 JavaScript基本语法n6.2.3基本数据类型 n1.数据类型：n数值型：整数和浮点数。n字符型：用 或 括起来的一连串字符或数字。n布尔型：true和false。n空值：null。n2.常量 2/2/2023126.2 JavaScript基本语法n6.2.3基本数据类型 n3.变量:nJavaScript使用关键字“var”声明变量并分配存储空间。变量名必须以字母或下划线开始，后面字符可以是字母、数字或下划线。JavaScript保留字不能做变量名。JavaScript保留字见教材p145。n语法：var

7、 变量名 或 var 变量名=变量值nJavaScript变量采用弱类型表达方式，即声明时可以不说明变量类型，而根据使用时数据类型来确定变量类型。所谓弱类型意味着程序员可以随意改变某个变量的数据类型。var age=thirty;age=30;2/2/2023136.2 JavaScript基本语法n6.2.3基本数据类型 n4.表达式:n表达式是由变量、常量、运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有3种表达式：n算术表达式：num1+23n串表达式：hello+worldn逻辑表达式：A&B2/2/2023146.2 JavaScript基本语

8、法n6.2.3基本数据类型 n5.运算符:n赋值运算符n算术运算符n逻辑运算符n比较运算符n字符串运算符n位运算符2/2/202315其它运算符n新建运算符（new）n新建运算符是一个一元运算符，用于创建JavaScript对象实例，例如：var test=new Object();n删除运算符（delete）n删除运算符用于删除一个对象的属性或者一个数组的某个元素，也可以用于取消它们原有的定义。例如：delete arrayExample10ndelete objectExample.myproperty（假设对象objectExample存在属性myproperty）2/2/202316其

9、它运算符ntypeof运算符n其运算数可以是任意类型，运算结果返回一个字符串，用于表示运算数的类型。数据类型运算结果数据类型运算结果数字型number数组Object字符串String函数function布尔型booleanNullObject对象Object未定义undefined2/2/2023176.3 JavaScript控制结构和函数n6.3.1 JavaScript控制结构 n1.条件语句ifelsen2.switch 语句n3.循环语句 forn4.循环语句 whilen5.break和continuen6.3.2函数 n必须先定义后使用n由于浏览器先执行HTML文档中的部分，通

10、常把自定义函数放在标记内，然后在标记内调用函数。2/2/2023186.3 JavaScript控制结构和函数n6.3.2函数 n定义规则：function 函数名（参数列表）函数体 function.htmln全局变量与局部变量 var.htmln全局变量可以在脚本的任何位置被引用。局部变量只存在于对它作出声明的函数内部。n可以使用var关键字明确地为在函数中使用的变量设定一个作用域。2/2/2023196.3 JavaScript控制结构和函数n6.3.2函数 n参数个数可变的函数n如果要实现的函数参数个数不确定，或者参数个数很多，又不想为每一个参数定义一个变量，可以在定义函数时保留参数列

11、表为空，在函数体内部使用arguments对象来访问调用程序传递的所有参数。例argument.html2/2/2023206.3 JavaScript控制结构和函数n创建动态函数 使用Function对象n语法：var varName=new Function(argument1,lastArgument)n所有参数都必须是字符串型，最后这个参数是函数的功能 代码。例 deffun.htmlnJavaScript中的系统函数nencodeURI:返回一个对URI字符串编码后的结果。ndecodeURI:将已编码的字符串解码后返回。nparseInt:将一个字符串按照指定的进制转化为整数。2/

12、2/2023216.3 JavaScript控制结构和函数nJavaScript中的系统函数nparseInt:格式：parseInt(numString,radix),如果没有第二个参数，则以”0”开头的转化为八进制，以”0 x”开头的转化为十六进制，其余的转化为十进制。如果字符串中包含有不能转化的字符，只取前面部分进行转化，如果完全无法转化，返回一个NaN，需要用isNaN方法进行检测。nparseFloat:将字符串转化为一个小数。nisNan:检测parseInt和parseFloat方法返回值是不是NaN。nescape:返回对一个字符串进行编码后的结果。nunescape:neva

13、l:将参数字符串作为JavaScript表达式进行解释执行。n例:sysfun.htmlvar x;eval(“alert(person1.”+x+”)”);2/2/2023226.4 JavaScript对象 在JavaScript中，对象是客观事物的描述，它有内置对象和用户自定义对象两类。n6.4.1 JavaScript对象概述n对象包含属性和方法，属性是对象的静态特性的描述，是对象的数据，以变量表征（是隶属于某个特定对象的变量），方法是对象动态特性的描述，是对数据的操作，以函数描述（只有某个特定对象才能调用的方法）。n 对象必须存在才能被引用，有3种方法引用对象：n引用JavaScri

14、pt的内建对象n引用浏览器环境提供的对象n创建自定义对象2/2/2023236.4 JavaScript对象n6.4.2自定义对象 n只要定义了一个对象的构造函数，就等于定义了一个对象。n使用new关键字和对象的构造函数就可以创建对象实例。语法格式：nvar objInstance=new objName(参数列表);n创建对象的步骤：n定义对象的构造函数。n使用new关键字和构造函数创建一个对象实例。n可以为对象无限制的添加新成员。function person()var person1=new person();person1.age=20;person1.name=“nice”;aler

15、t(person1.name+”:”+person1.age);function person()var person1=new person();person1.age=20;person1.name=“nice”;function sayFunc()alert(person1.name+”:”+person1.age);person1.say=sayFunc;person1.say();2/2/2023246.4 JavaScript对象nthis关键字n一个构造方法可以创建多个对象实例，各对象实例间没有任何关系，为一个实例增加的属性和方法不会影响到其他对象实例。n但是在构造方法中增加的属

16、性和方法会增加到每个由该构造方法创建的对象实例上。nthis关键字一般在用做对象成员方法的函数中出现，代表某个方法执行时，引用该方法当前的对象实例。function Person(name,age)this.age=age;this.name=name;this.say=sayFunc;2/2/2023256.4 JavaScript对象n6.4.3对象属性和方法的引用 n1.对象属性的引用，有两种方式：（1）使用（.）运算符：对象实例名.属性成员名如：mystudent.name=张三 （2）通过对象实例的下标引用对象实例名属性名字符串如：person1“age”=18 person1“na

17、me”=“nice”testattribute.html 采用第二种方法或eval函数可以实现对对象属性动态访问的效果。var x;var x;alert(person1x);eval(“alert(person1.”+x+”)”);2/2/2023266.4 JavaScript对象n6.4.3对象属性和方法的引用 n2.对象方法的引用 使用（.）运算符引用对象方法：对象实例名.方法名（）如：person1.say()2/2/2023276.4 JavaScript对象n6.4.6 JavaScript对象应用案例 nex6-04.html2/2/2023286.4 JavaScript对象

18、n6.4.4对象的操作 n1.forin语句 forin.html语法：for(变量名in 对象实例名)语句段用于对某个对象的所有属性进行循环操作，在不知道一个对象属性个数的前提下，将一个对象的所有属性名称都依次赋值给一个变量。n2.with语句 with.html语法：with(对象实例名)语句段with(mystudent)id=001name=张三url=http:/ 2/2/2023296.7 JavaScript内置对象 nJavaScript中提供的内部对象按照使用方式分为两种：n动态对象，要先用new关键字创建对象实例，才能引用该对象的方法和属性。n静态对象，无需创建对象实例，通

19、过对象名.属性|方法的形式引用。nObject对象n提供所有 JavaScript 对象通用的功能。Object 对象被包含在所有其它 JavaScript 对象中；在所有其它对象中它的方法和属性都是可用的。在用户定义的对象中可以重定义这些方法，并在适当的时候通过 JScript 调用。nObject 对象提供了一种无须构造函数创建自定义对象的简单方式，格式：obj=new Object()nObject.html2/2/2023306.7 JavaScript内置对象 n6.7.1 String对象 n创建方式：nnewString=new String(stringLiteral)n用字符

20、串文字显式创建（用“”或引起来的字符串被当作一个对象来对待，可以直接在字符串后面加上”.”来调用String对象的属性和方法。）n区别：不能为字符串文字添加属性，而可以为每个用 new String 声明的 String 对象动态添加属性。nString_test.htmlvar gamma,delta;gamma=new String(字符串1);delta=new String(字符串2);gamma.test=10;var alpha,beta;alpha=字符串1;beta=字符串2;alpha.test=10;2/2/2023316.7 JavaScript内置对象 n6.7.1 S

21、tring对象 nString对象属性只有一个：length，用来统计字符串中字符的个数。nString对象的主要方法：String对象的其他方法：anchor 方法|big 方法|blink 方法|bold 方法|charAt 方法|charCodeAt 方法|concat 方法|fixed 方法|fontcolor 方法|fontsize 方法|fromCharCode 方法|indexOf 方法|italics 方法|lastIndexOf 方法|link 方法|match 方法|replace 方法|search 方法|slice 方法|small 方法|split 方法|strike

22、 方法|sub 方法|substr 方法|substring 方法|sup 方法|toLowerCase 方法|toUpperCase 方法|toString 方法|valueOf 方法2/2/2023326.7 JavaScript内置对象 n6.7.2 Math对象 nMath对象提供基本的数学函数和常数，是一个静态对象，不需要创建就可以使用如：var num=Math.sqrt(9)nMath对象的主要属性：nMath对象的主要方法：Math对象的其他方法方法abs 方法|acos 方法|asin 方法|atan 方法|atan2 方法|ceil 方法|cos 方法|exp 方法|flo

23、or 方法|log 方法|max 方法|min 方法|pow 方法|random 方法|round 方法|sin 方法|sqrt 方法|tan 方法2/2/2023336.7 JavaScript内置对象 n6.7.4 Date对象 n1.语法形式：n日期对象实例名=new Date()如：MyDate=new Date()n如果创建日期对象实例时没有特别指明时间，将把机器的系统时间放入MyDate变量。n2.该对象没有属性。n3.Date对象的主要方法：2/2/2023346.7 JavaScript内置对象ntoString()方法n是JavaScript中所有内部对象的一个成员方法，主要

24、作用是将对象中的数据转化成某种格式的字符串表示，具体转换方式取决于对象的类型。n例：查看整数x的十六进制和二进制形式。ntoString.html2/2/2023356.7 JavaScript内置对象 n6.7.3 Array对象 n1.语法格式:n语法：数组对象实例名=new Array()或var 数组名=Array()如：var arr1=new Array()var arr2=new Array(6)var arr3=new Array(“abc”,123,a,8.3)采用数组列表的方式定义：var arr3=“abc”,123,a,8.3 2/2/2023366.7 JavaScr

25、ipt内置对象 n6.7.3 Array对象 n1.语法格式:n如果在创建数组对象实例时没有给出元素个数，数组大小在引用数组时确定。n数值数组：每个元素的下标是一个数字，每增加一个元素，这个数字就依次加1，数组下标从0开始。n如果在填充数组时只给出了元素的值，这个数组就将是一个数值数组，它的各个下标将被自动创建和刷新。n可以在填充数组时为新元素明确的给出下标，下标不局限于整数数字。var lennon=Array();lennonname=John;lennonage=18;var lennon=Array();lennonname=John;lennonage=18;var beatles=

26、Array();beatles0=lennon;beatles0name 的值？2/2/2023376.7 JavaScript内置对象 n6.7.3 Array对象 n2.Array对象的属性与方法n常用属性是length，表示数组长度，即数组元素的个数。n常用方法：njoin()：返回将数组中所有元素连接而成的字符串。nreverse()：将数组元素逆序排列。nsort()：对数组元素进行排序,元素将按照 ASCII 字符顺序进行升序排列。2/2/2023386.7 JavaScript内置对象 n6.7.3 Array对象 n3.JavaScript数组对象的特点n数组元素不要求数据类型

27、相同，即可以给一个数组的不同元素赋于不同类型的值。n数组元素可以是数组对象的实例，这时得到一个二维数组。n数组的长度可以动态变化。n6.3.3 JavaScript基本语法应用案例nex6-03.html array.html(自学)arr10=3arr11=张三arr12=falsevar arr=new Array(2)for(i=1;i8;i+)arri=new Array(3)或 var arr=Array(abc,3);var beatles=Array();beatles0=arr;var arr=new Array(3)arr5=22/2/202339 上机作业n请用javasc

28、ript编写一个参数不确定的函数myFunc，并在该函数中用object对象创建一个自定义对象实例myStudent，通过调用该函数myFunc(“classname”,“c001”,“personname”,“zhang”)可以向myStudent对象中动态增加自己的班级，姓名属性，并且将这些属性用alert方法显示。n编写一个网页，在每次刷新页面时会随机出现一个0-10之间的整数。提示：用Math.random()和Math.round2/2/202340n用substring方法返回一个字符串中指定那部分子字符串。n编写一个网页动态显示显示当前日期和时间。2/2/2023416.8 DO

29、M编程nDHTML图5.1 DHTML的组成 DOM交互性 动态性表现层行为层结构层2/2/2023426.8 DOM编程n什么是DOM？nDOM是一套对文档的内容进行抽象和概念化的方法。nW3C推出的标准化DOM可以让任何一种程序设计语言对使用任何一种标记语言编写的任何一份文档进行操控。nW3C文档对象模型（DOM）是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。nW3C DOM提供了标准的HTML和XML对象集，并有一个标准的接口来访问并操作他们。2/2/2023436.8 DOM编程n什么是DOM？nDOM被分为不同的部分（核

30、心，XML和HTML）和不同的版本（DOM 1/2/3）nW3C的第一个DOM规范DOM1是于1998年10月发布的，主要面对XHTML和XML文档模型。nDOM2是于2000年11月发布的，它制定了样式表文档模型，并说明了如何将样式信息附加到一个文档中，此外还包含了文档遍历方面的内容，提供了一个既完整有全面的事件模型。nDOM3添加了XML(DTD与模式)内容模式的处理，文档检验，文档视图和格式化方面的内容，并添加了一些关键事件和事件组。2/2/2023446.8 DOM编程n什么是HTML DOM？nHTML DOM是针对HTML的文档对象模型 nHTML DOM是独立的语言和平台 n定义

31、了针对HTML的标准对象集合以及访问和操作HTML文档的方法 nHTML DOM是一个W3C的标准 nHTML DOM将HTML文档视为嵌套其他元素的树型结构元素。所有的元素，它们包含的文字以及他们的树型都可以被DOM树所访问到。它们的内容可以修改和删除，并且可以通过DOM建立新的元素。元素的文字和它们的属性被识别为点。2/2/2023456.8 DOM编程A simple document Breakfast 0 1 Lunch 1 0 DocumentBreakfast01Lunch10“A simple document”DOMIntro.html2/2/2023466.8 DOM编程n

32、节点类型:n在DOM中存在着许多不同类型的节点，有些DOM节点类型还包括其他类型的节点。n元素节点n文本节点：在xhtml文档中，文本节点总被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点。n属性节点：所有的属性节点都包含在元素节点内部。DOMIntro.htmldont forget to buy this stuff2/2/2023476.8 DOM编程n节点类型:dont forget to buy this stuffPTitle=a gentle reminderDont forget to buy this stuff元素节点属性节点文本节点2/2/2023486.8

33、DOM编程n在本课程中只讨论利用脚本程序访问DOM对象，以实现对浏览器本身，网页文档以及网页文档中的HTML元素等的操作，从而控制浏览器和网页元素的行为和外观。DOMIntro.html2/2/202349DOM对象模型中各个对象间的层次关系2/2/2023506.8 DOM编程n6.8.1事件驱动与事件处理 nDOM除了定义各种对象外，还定义了各个对象所支持的事件，以及各个事件所对应的用户的具体操作。n检测浏览器和浏览器用户的动作并为这些动作提供相应的处理，这些处理是利用一种特殊格式的编程技术，即事件驱动编程来实现的。n事件是一个由浏览器和JavaScript系统为了响应某些正在发生的情况而

34、隐式创建的对象。事件处理信息包括事件的名称和引发事件的HTML元素。2/2/2023516.8 DOM编程n6.8.1事件驱动与事件处理 n事件不仅在用户对计算机进行的操作的过程中产生，同时浏览器自己的一些工作也会产生事件。n处理事件的程序或函数称为事件处理程序。将事件处理程序连接到事件的过程称为注册。2/2/2023526.8 DOM编程n6.8.1事件驱动与事件处理 nHTML定义了一组事件，浏览器已经实现了这些事件，利用JavaScript可以对这些事件进行处理。这些事件是与HTML标签属性相关联的，它可以将事件和事件处理程序相关联起来。事件说明onBlur失去输入焦点时触发onChan

35、ge输入被修改并失去焦点时触发onFocus获得输入焦点时触发onMouseDown单击鼠标左键时触发onMouseMove在元素中移动鼠标光标时触发onMouseUp释放鼠标左键时触发onKeydown当键盘按下时触发onKeyUp当键盘按键弹起时触发onKeyPress当键盘被按下后并弹起时触发onSelect选择文本时触发onSubmit按下提交按钮时触发2/2/202353处理事件n 通过HTML属性处理事件n事件处理器是作为HTML的属性值来表示和应用的，例如：n n除了直接使用JavaScript代码串，更好的方法是通过事件处理器调用函数，通过函数完成事件处理。function p

36、rintMessage(message)alert(message);step1定义函数定义函数step2调用函数调用函数2/2/202354处理事件n通过JavaScript属性处理事件n同样的功能通过JavaScript属性指定事件处理器来实现：ndocument.forms0.infoButton.onclick=function()alert(按钮的按钮的click事件被触发！事件被触发！);onclick.htmln使用JavaScript的属性来表示事件处理器的好处：n减少了HTML和JavaScript的混合使用，简洁明了。n事件处理器的代码不必是确定的，可以根据需要动态创建和修

37、改。nOnclick_1.html2/2/2023556.8 DOM编程n6.8.2 事件处理程序注册方法：n例：实现屏蔽鼠标右键弹出快捷菜单的功能。（单击鼠标右键将触发document对象上的oncontextmenu事件）nevent1.htmlnevent2.htmlnevent3.html2/2/202356JavaScrpt中的事件处理n处理链接事件n与链接相关的事件一共有九个，常用的有click事件，mouseOver事件和mouseOut事件等等。nmouseOver事件举例：2/2/202357JavaScrpt中的事件处理n定义函数nfunction printMessage

38、(message)n alert(message);n调用函数n 请把鼠标放过来，看看会发生什么事情：）nA_link.html2/2/202358JavaScrpt中的事件处理n处理窗口事件n窗口事件主要用来处理普通的HTML文档以及包含帧结构的HTML文档，常用的有load、unload、blur、focus等事件。nOnload,onunload事件举例2/2/202359JavaScrpt中的事件处理n定义函数nfunction loadHandle()nn alert(窗口执行了load事件！);nnfunction unloadHandle()nn alert(窗口执行了unloa

39、d事件！);n n调用函数nnOnload.html2/2/202360JavaScrpt中的事件处理n处理图形事件n图形事件用于了解图形的加载状况、判断加载过程中是否发生中断或者错误，从而构建丰富多彩的Web应用。n关于图形load事件的例子：2/2/202361JavaScrpt中的事件处理n定义函数function imageLoadHandle()alert(图形加载完成！);n调用函数 2/2/202362JavaScrpt中的事件处理n处理图形映射事件n图形映射是一类比较特殊的图形事件，由分布在不同区域的图形组成，用户单击图形的某个区域，便可以连接与该区域相关的URL。2/2/20

40、2363JavaScrpt中的事件处理n定义函数function messageHandle()alert(您点击的是图形的第二个映射区！);n调用函数 2/2/202364JavaScrpt中的事件处理n处理表单事件n在JavaScript实际应用中，最常处理的事件就是表单事件。n窗体提供了许多图形用户界面控件，帮助用户完成Web交互，例如：文本框、单选框、复选框、按钮等等。n定义函数function checkValid(s)var len=s.length;for(var i=0;ilen;i+)if(s.charAt(i)!=)return false;return true;2/2/

41、202365JavaScrpt中的事件处理n定义函数function cancelHandle()document.forms0.userName.value=;document.forms0.passWord.value=;n调用函数n处理表单事件function okHandle()if(checkValid(document.forms0.userName.value)alert(用户名称不能为空！);else if(checkValid(document.forms0.passWord.value)alert(用户密码不能为空！);else alert(您填写正确！);2/2/2023

42、66JavaScrpt中的事件处理n处理表单事件n调用函数用户名：密码：Form_example.html2/2/202367JavaScrpt中的事件处理n处理错误事件nJavaScript1.1及其以后版本引入了error事件，提供了在脚本执行过程中处理错误的功能。n图像、窗口以及框架对象有error事件，其中image对象的onError事件处理器可以处理与加载图形相关的错误，而windows对象的onError事件处理器可以处理与加载文档相关的错误。n处理错误事件不同于处理其他事件，事件处理函数不需要自己编写，而是由浏览器自动执行，通过3个参数传递错误信息：第一个参数描述所发生错误的信

43、息；第二个参数是一个URL，指明引起错误的JavaScript代码所在的文档；第三个参数是该文档中错误代码所在行的行号。2/2/202368JavaScrpt中的事件处理n处理错误事件n定义函数function errorHandler(errorMessage,url,line)var message=错误信息：+errorMessage+n错误文档的URL：+url+n错误的行号：+line;alert(message);onerror=errorHandler;n实现错误处理功能的关键是通过下面的代码把window的onerror属性设置为错误事件处理器：nonerror=errorHa

44、ndler;2/2/202369JavaScrpt中的事件处理n处理错误事件n如果将错误事件处理函数的名称赋给了window对象的onerror属性，那么发生的错误将会被处理。例如点击按钮时调用不存在的函数okHandle()：n nOnerror.html2/2/2023706.8.3 window对象n6.8.3.1 window对象的构成 nwindow对象是系统内建对象中的顶层对象，指的是浏览器窗口对象。每当窗口含有或是标签就会自动建立window对象。n对window对象的属性和方法的引用，可以省略“window.”这个前缀，如window.alert(“hello”)等价于aler

45、t(“hello”)。2/2/2023716.8.3 window对象n6.8.3.2 window对象属性 属性 描述 closed 获取引用窗口是否已关闭。length 设置或获取集合中对象的数目。opener 设置或获取创建当前窗口的窗口的引用。screenLeft 获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。screenTop 获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。2/2/2023726.8.3 window对象n6.8.3.3 window对象方法n1、windows对象的主要方法：方法 描述 navigate(URL)在当前窗口中装入指定 URL。resize

46、To()将窗口的大小更改为指定的宽度和高度值 moveTo(x,y)将窗口左上角的屏幕位置移动到指定的 x 和 y 位置 setInterval(code,millisec,lang)每经过指定毫秒值后计算一个表达式 clearInterval(ID)取消由setInterval()建立的间隔事件 showModalDialog(URL,args,list)创建一个显示指定 HTML 文档的模式对话框。showModelessDialog(URL,args,list)创建一个显示指定 HTML 文档的非模式对话框。window.html2/2/2023736.8.3 window对象n6.8.

47、3.4 window对象事件nHTML中没有这样的标签，window对象的事件处理器需要作为标签的事件属性设置。nwindow-event.html(请自学)n通用事件2/2/2023746.8.3 window对象n6.8.3.5 window对象的对象属性n1.location对象：用于设置和返回当前网页的URL信息。n属性：href,让浏览器载入一个新的URL文档。如：window.location.href=“http:/”与window.navigate(“http:/”)作用一样。n方法：replace(“url”):载入新的网页 reload()：重新载入（刷新）当前网页2/2/

48、2023756.8.3 window对象n2.event对象：用于设置和获取当前事件的有关信息。n属性：altKey,ctrlKey,shiftKey：分别用来检测事件发生时,alt,ctrl,shift键是否被按下clientX,clientY：设置和返回鼠标相对客户区（窗口中不包括边框和滚动条的区域）顶点的x,y坐标screenX,screenY：设置和返回鼠标相对屏幕顶点的x,y坐标offsetX,offsetY：设置和返回鼠标相对事件源顶点的x,y坐标x,y：设置和返回鼠标相对事件源的父元素顶点的x,y坐标returnValue：设置和返回事件的返回值，以便浏览器判断是否继续对当前事件

49、按默认方式处理。cancelBubble：设置和返回当前事件是否继续向下传递。srcElement：设置和返回事件源对象。keyCode：设置和返回键盘按下时按键的unicode码Button：检索鼠标移动、按下、弹起时使用的是哪个鼠标按键。eventobject.htmlEventobject_onkeypress.html2/2/2023766.8.3 window对象n3.frames对象：windows对象的frames属性是一个数组，是用于对HTML的帧标签或进行编程的JavaScript对象。代表某个窗口所有帧的集合，可以返回各个帧窗口对应的window对象。nframes_1.h

50、tml(自学)nframe.html2/2/2023776.8.3 window对象n4.screen对象n这个对象中的一些属性提供了显示器分辨率和色彩度等信息。n5.clipboardData对象n这个对象提供了读写剪贴板内容的方法。n6.history对象n这个对象提供了重新装载浏览器曾经访问过的url列表中某个url的方法。n7.navigator对象n提供了获取浏览器名称、版本号、所用的操作系统、CPU类型、浏览器的国家语言等方面的属性信息。n8.document对象2/2/2023786.5 window对象在JavaScript中的应用 n6.5.5 window对象应用案例 n1