1、网页设计与制作教程,机械工业出版社同名教材 配套电子教案2005.8,4.1 JavaScript简介 4.2 在网页中插入JavaScript的方法及定义 4.3 JavaScript的基本数据类型和表达式 4.4 JavaScript的程序结构 4.5 基于对象的JavaScript语言 4.6 JavaScript的内置对象 4.7 自定义对象 4.8 DOM对象及编程 4.9 JavaScript的对象事件处理程序,第4章 网页特效JavaScript,脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。脚本程序既可以在服务器端运行（称为服务器脚本，例如ASP脚本、PHP脚
2、本等），也可以直接在浏览器端运行（称为客户端脚本）。JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用它的目的是与HTML、CSS一起实现在一个Web页面中链接多个对象，与Web客户交互的作用。 JavaScript不是Java，只不过两者类似。JavaScript语言的前身叫作Livescript，自从Sun公司推出著名的Java语言后，Netscape公司引进了Sun公司有关Java的程序概念，将Livescript重新进行设计，并改名为JavaScript。,4.1 JavaScript简介,JavaScript的脚本程
3、序包括在HTML中，使之成为HTML文档的一部分。其格式为：JavaScript语言代码;JavaScript语言代码; .在网页中最常用的定义脚本的方法是使用.标记，将其插入到HTML文档的.或.之间，多数情况下最好放到.标记之间，这样可以让JavaScript程序代码先于其他代码第一个被加载执行。 【例4-1】,4.2 在网页中插入JavaScript的方法及定义 4.2.1 在HTML文档中嵌入脚本程序,可以把脚本保存在一个扩展名为.js的文本文件中，供需要该脚本的多个HTML文件引用。要引用外部脚本文件，使用script标记的src属性指定外部脚本文件的URL。其格式为：.【例4-2】
4、,4.2 在网页中插入JavaScript的方法及定义 4.2.2 链接脚本文件,可以在HTML表单的输入标记符内添加脚本，以响应输入的事件。 【例4-3】,4.2 在网页中插入JavaScript的方法及定义 4.2.3 在标记内添加脚本,在一个HTML文档中，可以有多个脚本程序块，它们可以放在和中，浏览器将依次执行。【例4-4】,4.2 在网页中插入JavaScript的方法及定义 4.2.4 多脚本网页,JavaScript有4种基本的数据类型。number（数值）类型：可为整数和浮点数。在程序中并没有把整数和实数分开，这两种数据可在程序中自由转换。整数可以为正数、0或者负数；浮点数可以
5、包含小数点、也可以包含一个“e”（大小写均可，表示10的幂），或者同时包含这两项。string（字符）类型：字符是用单引号“”或双引号“”来说明的。boolean（布尔）类型：布尔型的值为true或false。object（对象）类型：对象也是JavaScript中的重要组成部分，用于说明对象。,4.3 JavaScript的基本数据类型和表达式 4.3.1 基本数据类型,1. 基本常量(1) 字符型常量使用单引号“”或双引号“”括起来的一个或几个字符。如 “123“、abcABC123、“This is a book of JavaScript“等。(2) 数值型常量整型常量：其整型常量可以
6、使用十进制、十六进制、八进制表示其值。实型常量：实型常量是由整数部分加小数部分表示，如12.32、193.98。可以使用科学或标准方法表示：6E8、2.6e5等。(3) 布尔型常量布尔常量只有两个值：True或False。JavaScript只能用True或False表示其状态，不能用1或0表示其状态。,4.3 JavaScript的基本数据类型和表达式 4.3.2 常量,2. 特殊常量(1) 空值JavaScript中有一个空值null，表示什么也没有。例如，试图引用没有定义的变量，则返回一个null值。(2) 控制字符与C/C+语言一样，JavaScript中同样有以反斜杠“”开头的不可显
7、示的特殊字符。 通常称为控制字符（这些字符前的“”叫转义字符）。例如：b：表示退格 f：表示换页 n：表示换行 r：表示回车t：表示Tab符号 ：表示单引号本身 “：表示双引号本身,4.3 JavaScript的基本数据类型和表达式 4.3.2 常量,1. 变量的命名JavaScript中的变量命名同其他计算机语言非常相似，变量名称的长度是任意的，但要区分大小写。另外，还必须遵循以下规则： 第一个字符必须是一个字母（大小写均可）、或下划线“_”或一个美元符“$”。 后续字符可以是字母、数字、下划线或美元符。除下划线“_”字符外，变量名中不能有空格、“+”、“-”、“，”或其他特殊符号。 不能使
8、用JavaScript中的关键字作为变量。在JavaScript中定义了40多个类键字，这些关键是JavaScript内部使用的，不能作为变量的名称。如var、int、double、true不能作为变量的名称。,4.3 JavaScript的基本数据类型和表达式 4.3.3 变量,2. 变量的类型JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，声明变量尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。3. 变量的声明JavaScript变量可以在使用前先作声明，并可赋值。通过使用var关键字对变量作声明。对变量作声明的最大好处就是能及时发现代码
9、中的错误，因为JavaScript是采用动态编译的，而动态编译是不易发现代码中的错误，特别是变量命名方面。变量的声明和赋值语句var的语法为：var 变量名称1 = 初始值1 , 变量名称2 = 初始值2 . ;一个var可以声明多个变量，其之间用“,”分隔。,4.3 JavaScript的基本数据类型和表达式 4.3.3 变量,4. 变量的作用域对于变量还有一个重要性，那就是变量的作用域。在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是全部函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其他函数则是不可见的。,4.3 JavaScr
10、ipt的基本数据类型和表达式 4.3.3 变量,1. 算术运算符JavaScript中的算术运算符有单目运算符和双目运算符。双目运算符：+（加）、-（减）、*（乘）、/（除）、%（取模）。单目运算符：+（递加1）、-（递减1）。 2. 字符串运算符字符串运算符“+”用于连接两个字符串。例如：“abc“+“123“。 3. 比较运算符比较运算符首先对它的操作数进行比较，然后再返回一个true或false值，有8个比较运算符：（大于）、=（大于等于）、=（等于）、!=（不等于）。,4.3 JavaScript的基本数据类型和表达式 4.3.4 运算符和表达式,4. 布尔运算符在JavaScript
11、中增加了几个布尔逻辑运算符：!（取反）、&=（与之后赋值）、&（逻辑与）、|=（或之后赋值）、|（逻辑或）、=（异或之后赋值）、（逻辑异或）、?:（三目操作符）、|（或）、=（等于）、|=（不等于）。其中三目操作符主要格式如下： 操作数 ? 结果1 : 结果2若操作数的结果为真，则表达式的结果为结果1，否则为结果2。 5. 位运算符位运算符分为位逻辑运算符和位移动运算符。,4.3 JavaScript的基本数据类型和表达式 4.3.4 运算符和表达式,6. 运算符的优先顺序表达式的运算是按运算符的优先级进行的。下面运算符按其优先顺序由高到低排列：算术运算符：+、-、*、/、%、+、-。字符串运
12、算符：+。位移动运算符：、。位逻辑运算符有：&、|、-、。比较运算符：、=、=、!=。布尔运算符：!、&=、&、|=、|、=、?:、|、=、|=。,4.3 JavaScript的基本数据类型和表达式 4.3.4 运算符和表达式,1. 赋值语句赋值语句的功能是把右边表达式的值赋值给左边的变量。其格式为：变量名 = 表达式 ;像C语言一样，JavaScript也可以采用变形的赋值运算符，如x+=y等同于x=x+y，其他运算符也一样。 2. 注释语句在JavaScript的程序代码中，可以插入注释语句以增加程序的可读性。注释语句有单行注释和多行注释之分。单行注释语句的格式为：/ 注释内容多行注释语句
13、的格式为：/* 注释内容注释内容 */,4.4 JavaScript的程序结构 4.4.1 简单语句,4. 输入字符串在JavaScript中常用的输入字符串的方法是利用window对象的prompt()方法以及表单的文本框。(1) 用window对象的prompt()方法输入字符串window对象的prompt()方法的功能是弹出对话框，让用户输入文本，其格式为：prompt(提示字符串, 缺省值字符串) ; (2) 用文本框输入字符串使用Blur事件和onBlur事件处理程序，可以得到在文本框中输入的字符串。Blur事件和onBlur事件的具体解释可参考本章后面的内容。 【例4-5】 【例
14、4-6】,4.4 JavaScript的程序结构 4.4.1 简单语句,1. 条件语句JavaScript提供了if、if else和switch三种条件语句。条件语句也可以嵌套。(1) if语句if语句是最基本的条件语句，它的格式与C+是一样的，其格式为： if (条件) 语句段1;语句段2;. ; 【例4-7】,4.4 JavaScript的程序结构 4.4.2 程序控制流程,(2) if else语句if else语句的格式为：if (条件)语句段1;else语句段2;若“条件”为true，则执行语句段1；否则执行语句段2。“条件”要用( )括起来。若if后的语句段有多行，则必须使用花括
15、号将其括起来。,4.4 JavaScript的程序结构 4.4.2 程序控制流程,(3) switch语句分支语句switch根据一个变量的不同取值采取不同的处理方法。switch语句的格式为： switch (变量) case 特定数值1 :语句段1;break;case 特定数值2 :语句段2;break;default :语句段3; 【例4-8】,4.4 JavaScript的程序结构 4.4.2 程序控制流程,2. 循环语句JavaScript中提供了多种循环语句，有for、while和do while语句，还提供用于跳出循环的break语句，用于终止当前循环并继续执行下一轮循环的co
16、ntinue语句，以及用于标记一个语句的label。(1) for循环语句for循环语句的格式为：for (初始化; 条件; 增量)语句段;for实现条件循环，当“条件”成立时，执行语句段，否则跳出循环体。 【例4-9】,4.4 JavaScript的程序结构 4.4.2 程序控制流程,(2) while循环语句while循环语句的格式为：while (条件)语句段;当条件表达式为真时就执行循环体中的语句。“条件”要用( )括起来。有时可用while语句代替for语句。while语句适合条件复杂的循环，for语句适合已知循环次数的循环。 【例4-10】,4.4 JavaScript的程序结构
17、4.4.2 程序控制流程,(3) do while语句do while语句是while的变体，其格式为：do语句段;while (条件) do while语句的循环体至少要执行一次，而while语句的循环体可以一次也不执行。不论使用哪一种循环语句，都要注意控制循环的结束标志，避免出现死循环。,4.4 JavaScript的程序结构 4.4.2 程序控制流程,(4) 标号语句label语句用于为语句添加标号。在任意语句前放上标号，都可为该语句指定一个标号。其格式为：标号名称: 语句;label语句常常用于标记一个循环、switch或if语句，且与break或continue语句联合使用。(5)
18、break语句break语句的功能是无条件跳出循环结构或switch语句。一般break语句是单独使用的，有时也可在其后面加一个语句标号，以表明跳出该标号所指定的循环体，然后执行循环体后面的代码。【例4-11】,4.4 JavaScript的程序结构 4.4.2 程序控制流程,(6) continue语句continue语句的功能是结束本轮循环，跳转到循环的开始处，从而开始下一轮循环；而break则是结束整个循环。continue可以单独使用，也可以与语句标号一起使用。【例4-12】,4.4 JavaScript的程序结构 4.4.2 程序控制流程,1. 函数的定义 JavaScript并不区
19、分函数（Function）和过程（Procedure），在JavaScript中只有函数。 JavaScript也遵循先定义函数，后调用函数的规则。函数的定义通常放在HTML文档头中，也可以放在其他位置，但最好放在文档头，这样就可以确保先定义后使用。定义函数的格式为：function 函数名(参数1, 参数2, . )语句段; .return 表达式; / return语句指明被返回的值 【例4-13】,4.4.3 函数,2. 函数的调用(1) 无返回值的调用如果函数没有返回值或调用程序不关心函数的返回值，可以用下面的格式调用定义的函数：函数名(传递给函数的参数1, 传递给函数的参数2, .
20、);例如，例4-8程序代码中的hello();和message(“Hi“); 语句，由于hello()函数没有返回值，所以可以使用这种方式。(2) 有返回值的调用如果调用程序需要函数的返回结果，格式：变量名=函数名(传递给函数的参数1, 传递给函数的参数2, . );例如，result = multiple(10,20); 语句。对于有返回值的函数调用，也可以在程序中直接利用其返回的值。例如，document.write(multiple(10,20);,4.4.3 函数,(3) 在超链接标记中调用函数当单击超链接时，可以触发调用函数。有两种方法： 使用标记的onClick属性调用函数，其格式
21、为：热点文本 使用标记的href属性，其格式为：热点文本 【例4-14】,4.4.3 函数,(4) 在装载网页时调用函数有时希望在装载（执行）一个网页时仅执行一次JavaScript代码，这时可使用标记的onLoad属性，代码形式为：function 函数名(参数表) 当网页装载完成后执行的代码;网页的内容【例4-15】,4.4.3 函数,3. 全局变量与局部变量根据变量的作用范围，变量又可分为全局变量和局部变量。全局变量是在所有函数之外的脚本中定义的变量，其作用范围是这个变量定义之后三所有语句，包括其后定义的函数中的程序代码和它后面的其他.标记中的程序代码。局部变量是定义在函数代码之内的变量
22、，只有在该函数中且位于这个变量定义之后的程序代码可以使用这个变量。局部变量对其后的其他函数和脚本代码来说都是不可见的。如果在函数中定义了与全局变量同名的局部变量，则在该函数中且位于这个变量定义之后的程序代码使用的是局部变量，而不是全局变量。 【例4-16】,4.4.3 函数,4. JavaScript内置的函数(1) escape()和unescape()escape()和unescape()函数的功能是对字符串进行编码和解码。在许多URL地址中，会看到%加数字的情况，这是由于采用了ISO-Latin-1字符集进行编码。可以采用unescape()函数对字符串进行解码，也可以用escape()
23、函数对字符串进行编码。(2) eval()eval(字符串)函数将字符串所代表的运算或语句，作为一个表达式执行。因为在JavaScript中编写的每条表达式语句都是事先明确固定的，不能根据运行时的情况进行变动。,4.4.3 函数,(3) parseInt()和parseFloat()在使用表单时，常将文本框中的字符串按照需要转换为整数和浮点数，这样的操作就要用到parseInt()函数和parseFloat()函数，它们可以分别将字符串转换为整型数和浮点数。例如：var int0=parseInt(“6.8“); 则int0的值为6。parseInt()函数不是对字符串所代表的数值四舍五入，而
24、是进行截尾操作。又如：var float0=parseFloat(“6.8“); 则float0的值为6.8。(4) isNaN()NaN意为not a number，即不是一个数值。isNaN()函数用于判断表达式是否是一个数值。若isNaN()返回的值为true，则表达式不是数值；反之，则是一个数值。,4.4.3 函数,1. 对象(1) 对象的概念JavaScript中的对象是由属性（properties）和方法（methods）两个基本的元素的构成的。用来描述对象特性的一组数据，也就是若干个变量，称为属性；用来操作对象特性的若干个动作，也就是若干函数，称为方法 (2) 对象的使用要使用一
25、个对象，有下面三种方法：引用JavaScnPt内置对象。由浏览器环境中提供。创建新对象。 一个对象在被引用之前必须已经存在。,4.5 基于对象的JavaScript语言,(3) 对象的操作语句在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。 for.in语句。for.in语句的基本格式为：for(变量 in 对象)代码块;该语句的功能是用于对某个对象的所有属性进行循环操作，它将一个对象的所有属性名称逐一赋值给一个变量，并且不需要事先知道对象属性的个数。【例4-17】,4.5 基于对象的JavaScript语言, with语句。 with语句的基本格式为：with(对象)代
26、码块;该语句的功能用于声明一个对象，代码块中的语句都被认为是对这一对象属性进行的操作。这样，当需要对一个对象进行大量操作时，就可通过with语句来替代一连串的“对象名”，从而节省不少代码。,4.5 基于对象的JavaScript语言, this关键字。this用于将对象指定为当前对象。 new关键字。使用new可以创建指定对象的一个实例。其创建对象实例的格式为：对象实例名=new 对象名(参数表); delete操作符。delete操作符可以删除一个对象的实例。其格式为： delete 对象名;,4.5 基于对象的JavaScript语言,2. 对象的属性在JavaScript中，每一种对象都
27、有一组特定的属性。对象属性的引用有三种方式。(1) 点（）运算符把点放在对象实例名和它对应的属性之间，以此指向一个惟一的属性。属性的使用格式为：对象名.属性名 = 属性值;例如：一个名为person的对象实例，它包含了sex、name、age三个属性，对它们的赋值可用如下代码：person.sex=“female“;person.name=“Jane“;person.age=18;,4.5 基于对象的JavaScript语言,(2) 对象的数组下标通过“对象下标”的格式也可以实现对象的访问。在用对象的下标访问对象属性时，下标是从0开始，而不是从1开始的。(3) 通过字符串的形式实现通过“对象字
28、符串”的格式实现对象的访问。person“sex“=“female“;person“name“=“Jane“;person“age“=18;,4.5 基于对象的JavaScript语言,3. 对象的事件事件就是对象上所发生的事情。事件是预先定义好的、能够被对象识别的动作，如单击（Click）事件、双击（DblClick）事件、装载（Load）事件、鼠标移动（MouseMove）事件等，不同的对象能够识别不同的事件。通过事件，可以调用对象的方法，以产生不同的执行动作。有关JavaScript的事件，后面将详细介绍。,4.5 基于对象的JavaScript语言,4. 对象的方法一般来说，方法就是要
29、执行的动作。JavaScript的方法是函数。如Window对象的关闭（Close）方法、打开（Open）方法等。 方法只能在代码中使用，其用法依赖于方法所需的参数个数以及它是否具有返回值。在JavaScript中，对象方法的引用非常简单。只需在对象名和方法之间用点分隔就可指明该对象的某一种方法，并加以引用。其格式为： 对象名.方法()例如，引用person对象中已存在的一个方法howold()，则可使用： document.write(person.howold();,4.5 基于对象的JavaScript语言,1. 数组对象的定义方法数组对象的定义有三种方法： var 数组对象名=new
30、Array();var 数组对象名=new Array(数组元素个数);var 数组对象名=new Array(第1个数组元素的值, 第2个数组元素的值, .); 除使用以上三种方法定义数组对象外，还可以直接用 定义数组并赋值。例如： var order=1,2,3,4,5,6;其效果与用var order=new Array(1,2,3,4,5,6)相同。 【例4-18】 【例4-19】,4.6 JavaScript的内置对象 4.6.1 数组（Array）对象,2. 数组对象的属性数组对象的属性主要是length，它用于获得数组中元素的个数，即数组中最大下标加一。3. 数组对象的方法sor
31、t(function)：在不指定参数时，用于对数组中的字符串元素按字母（对应的ASCII码）顺序进行排序，若有元素不是字符串类型，则先转换为字符串类型，再排序。指定参数时，所指定的参数是一个排序函数。reverse()：颠倒数组中元素的顺序。concat(array1,.,arrayn)：用于将n个数组合并到array1数组中。,4.6 JavaScript的内置对象 4.6.1 数组（Array）对象,join(string)：将数组中的所有元素合并为一个字符串，其间用string参数分隔。省略参数时，直接合并，不加分隔。slice(start,stop)：返回数组从start起，stop止
32、的不部分。start和stop为负数时，分别表示倒数第start或倒数第stop个元素。tostring()：返回一个字符串，其中包含了数组中的所有元素，每个元素用逗号分隔。【例4-20】,4.6 JavaScript的内置对象 4.6.1 数组（Array）对象,1. 字符串对象的定义方法String对象是动态对象，需要创建对象实例后才能引用它的属性或方法。有两种方法可创建一个字符串对象。其格式为：字符串变量名 = “字符串“;字符串变量名 = new String(“字符串“);2字符串对象的属性字符串对象的最常用属性是length，功能是得到字符串的字符个数。例如：var myUrl=“
33、http:/“;var myUrlLen=myUrl.length; / 或 var myUrlLen=“http:/“.length;,4.6 JavaScript的内置对象 4.6.2 字符串（String）对象,3字符串对象的方法String对象的方法主要用于字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。anchor(字符串)：为字符串对象中的内容两端加上HTML的定位锚点标记，如同 文本 。例如：var strcmp=“机械工业出版社网站“;strcmp=strcmp.anchor(“机工“);得到的strcmp值为：机械工业出版社网站,4.6 Jav
34、aScript的内置对象 4.6.2 字符串（String）对象,1. 日期对象的定义方法 创建日期对象实例，并赋值为当前时间，其格式为：var 日期对象名 = new Date(); 创建日期对象实例，其格式为：var日期对象名 = new Date(milliseconds); 使用特定的表示日期和时间的字符串string，为创建的对象实例赋值。其格式为：var日期对象名 = new Date(string); 按照年、月、日、时、分、秒、毫秒的顺序，为创建的对象实例赋值。其格式为：var日期对象名 = new Date(year,month,day,hours,mintues,secon
35、ds,milliseconds);,4.6 JavaScript的内置对象 4.6.3 日期（Date）对象,2. 日期对象的方法(1) 获取日期、时间的方法获得日期、时间的方法主要有：getYear()：得到当前年份数。getMonth()：得到当前月份数，0代表一月，1代表二月，11代表12月。getDate()：得到当前日期数。getDay()：得到当前星期几。getHours()：得到当前小时数。getMinutes()：得到当前分钟数。getSeconds()：得到当前秒数。getTimeZoneOffset()：得到时区的偏移信息。,4.6 JavaScript的内置对象 4.6.
36、3 日期（Date）对象,(2) 设置日期和时间的方法设置日期、时间的方法主要有：setFullYear()：设置年份。setMonth()：设置月份。setDate()：设置日数。setHours()：设置小时。setMinutes()：设置分钟。setSeconds()：设置秒数。,4.6 JavaScript的内置对象 4.6.3 日期（Date）对象,(3) 格式转换的方法格式转换的方法主要有：toGMTString()：转换成格林威治标准时间表达的字符串。toLocaleString()：转换成以当地时间表达的字符串。toString()：把时间信息转换为字符串。parse：从表示时
37、间的字符串中读出时间。UTC：返问从格林威治标准时间到指定时间的差距（单位为毫秒）。,4.6 JavaScript的内置对象 4.6.3 日期（Date）对象,在JavaScript中可以使用内置对象，也可以创建用户自定义对象，但必须为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。这里介绍两种自定义对象的方法。 1. 初始化对象这是一种通过初始化对象的值，来建立自定义对象的方法。初始化对象的一般格式为： 对象= 属性1:属性值1;属性2:属性值2;.属性n:属性值n;,4.7 自定义对象,2. 定义对象的构造函数这种方法的一般格式为：function 对象名(属性1,
38、属性2,.属性n)this.属性1=属性值1;this.属性2=属性值2;.this.属性n=属性值n;this.方法1=函数名1;this.方法2=函数名2;.this.方法m=函数名m;,4.7 自定义对象,1. 属性它的主要属性有：closed：用于判断一个窗口是否被关闭。 2. 方法window对象的主要方法有：open(URL,windowName,parameterList)：根据页面地址、窗口名称、窗口风格打开一个窗口。alert(text)：弹出警告框，参数为警告信息。confirm(text)：弹出确认框，参数为确认信息。prompt(text,defaultText)：弹出
39、提示框，参数为提示信息和缺省值。,4.8 DOM对象及编程 4.8.1 窗口对象（windows）,1. 属性主要属性有：title：文档标题。lastmodified：文档最后修改时间。URL：文档对应的页面地址。cookie：用来创建和获得信息Cookie。bgcolor：文档的背景色。fgcolor：文档的前景色。location：保存文档所有的页面地址信息。alinkcolor：激活链接的颜色。linkcolor：链接的颜色。vlinkcolor：已浏览过的链接颜色。,4.8 DOM对象及编程 4.8.2 文档对象（document）,2. 方法它的主要方法有：write(text)：
40、向页面内写文本或标签（不换行）。writeln(text)：向页面内写文本或标签，在最后一个字符后换行。open()：打开一个新文档。close()：关闭当前文档。,4.8 DOM对象及编程 4.8.2 文档对象（document）,1. 属性protocol：通信协议。host：页面所在Web服务器的主机名称。port：服务器通信的端口号。pathname：页面在服务器上的路径。hash：页面跳转的锚标信息。search：提交到服务器上进行搜索的信息。hostname：记录主机名称和端口号，中间用“:”分开。href：完整的URL地址。2. 方法assign(URL)：将页面导航到另一个地址
41、上去。reload：将页面全部刷新。replace(URL)：使用制定的URL所对应页面代替当前页 面。,4.8 DOM对象及编程 4.8.3 位置对象（location）,1. 属性其主要属性是length，它反映浏览器访问历史记录的数量。2. 方法主要方法有：back()：加载前一个浏览过的URL。forward()：加载后一个浏览过的URL。go(int)：载入相对与整数个位置之前或之后的链接。 例如，history.go(6)表示进入历史清单中后面的第6个URL，history.go(-3)表示进入历史清单之前的第3页。 【例4-21】,4.8 DOM对象及编程 4.8.4 历史对象（
42、History）,在JavaScript中，事件是预先定义好的、能够被对象识别的动作，事件定义了用户与网页交互时产生的各种操作。例如，单击按钮时，就产生一个事件，告诉浏览器发生了需要进行处理的单击操作。浏览器自己的一些动作也可能产生事件，例如，浏览器载入个网页时，就会产生Load事件。当事件发生时，JavaScript将检测两条信息，即发生的是哪种事件和哪个对象接收了事件。 对象事件有三类： 用户引起的事件，如网页装载、表单提交等。 引起页面之间跳转的事件，主要是超级链接。 表单内部与界面对象的交互，包括界面对象的改变等。这类事件可以按照应用程序的具体功能自由设计。,4.9 JavaScrip
43、t的对象事件处理程序 4.9.1 对象的事件,1. 浏览器事件浏览器事例主要由Load、unLoad、DragDrop以及Submit等事件组成。(1) Load事件Load事什发生在浏览器完成一个窗口或一组帧的装载之后。onLoad句柄在Load事件发生后由JavaScript自动调用执行。因为这个事什处理函数可在其他所有的JavaScript程序和网页之前被执行，可以用来完成网页中所用数据的初始化，如弹出一个提示窗口，显示版权或欢迎信息，弹出密码认证窗口等。例如：网页开始显示时并不触发Load事件，只有当所有元素包含图像、声音等被加载完成后才触发Load事件。,4.9 JavaScript
44、的对象事件处理程序 4.9.2 常用的事件及处理,(2) Unload事件Unload事件发生在用户在浏览器的地址栏中输入一个新的URL，或者使用浏览器工具栏中的导航按钮，从而使浏览器试图载入一个新的网页。在浏览器载入一个新的网页之前，自动产生一个Unload事件，通知原有网页中的JavaScript脚本程序。onUnload事件句柄与onLoad事件句柄构成一对功能相反的事件处理模式。使用onLoad事件句柄可以初始化一个网页，而使用onUnload事件句柄则可以结束网页。,4.9 JavaScript的对象事件处理程序 4.9.2 常用的事件及处理,(3) Submit事件Submit事件
45、在完成信息的输入，准备将信息提交给服务器处理时发生。onSubmit句柄在Submit事件发生时由JavaScript自动调用执行。onSubmit句柄通常在标记中声明。为了减少服务器的负担，可在Submit事件处理函数中实现最后的数据校验。如果所有的数据验证都能通过，就可返回一个true值，让JavaScript向服务器提交表单，把数据发送给服务器；否则，就返回一个false值，禁止发送数据，且给用户相关的提示，让用户重新输入数据。 【例4-22】,4.9 JavaScript的对象事件处理程序 4.9.2 常用的事件及处理,2. 鼠标事件(1) MouseDown事件当按下鼠标的某一个键时
46、发生MouseDowm事件。在这个事件发生后，JavaScript自动调用MouseDown句柄。(2) MouseMove事件移动鼠标时，发生MouseMove事件。这个事件发生后，JavaScript自动调用onMouseMove句柄。(3) MouseUp事件释放鼠标上一个键时，发生MouseUp事件。在这个事件发生后，JavaScript自动调用onMouseUp句柄。 与MouseDown事件一样，如果MouseUp事件处理函数返回false值，与鼠标操作密切有关的其他操作，例如拖放、选定文本以及激活超级链接都无效，因为这些操作首先都必须产生MouseUp事件。,4.9 JavaSc
47、ript的对象事件处理程序 4.9.2 常用的事件及处理,2. 鼠标事件(4) MouseOver事件当鼠标指针在一个对象上面时，发生MouseOver事件。在MouseOver事件发生后，JavaScript自动调用执行onMouseOver句柄。(5) MouseOut事件MouseOut事件发生在鼠标指针离开一个对象时。在这个事什发生后，JavaScript自动调用onMouseOut句柄。这个事件适用于区域、层及超链接对象。 (6) Click事件C1ick事件可在两个地方发生。首先，在一个表单上的某个对象被单击时发生；其次，在单击一个超级链按时发生。onClick事件句柄在C1ick
48、事件发生后由JavaScript自动调用执行。,4.9 JavaScript的对象事件处理程序 4.9.2 常用的事件及处理,2. 鼠标事件(7) Blur事件B1ur事件是在一个表单中的选择框、文本输入框中失去焦点时，即在表单其他区域单击鼠标时发生。即使此时当前对象的值没有改变，仍会触发onBlur事件。onBlur事件句柄在Click事件发生后，由JavaScript自动调用执行。(8) Focus事件在一个选择框、文本框或者文本输入区域得到焦点时发生Focus事件。onFocus事件句柄在Click事件发生时由JavaScript自动调用执行。用户可以通过单击对象，也可通过键盘上的Tab
49、键使一个区域得到焦点。onFocus句柄与onBlur句柄功能相反。,4.9 JavaScript的对象事件处理程序 4.9.2 常用的事件及处理,3. 键盘事件 (1) KeyDown事件在键盘上按下一个键时，发生KeyDown事件。在这个事件发生后，由JavaScript自动调用onKeyDown句柄。该句柄适用于浏览器对象document、图像、超级链接以及文本区域。(2) KeyPress事件在键盘上按下一个键时，发生KeyDown事件。在这个事件发生后，由JavaScript自动调用onKeyPress句柄。该句柄适用于浏览器对象Document、图像、超级链接以及文本区域。KeyDown事件总是发生在KeyPress事件之前。如果这个事件处理函数返回false值，就不会产生KeyPress事件。,4.9 JavaScript的对象事件处理程序 4.9.2 常用的事件及处理,
