Microsoft Word - 第3章.doc

Size: px

Start display at page:

Download "Microsoft Word - 第3章.doc"

安双诸
9 years ago
Views:

1 第 3 章 JavaScript 基础 JS 即 JavaScript, 属于网络的脚本语言,JavaScript 被数百万计的网页用来改进设计验证表单检测浏览器创建 cookies, 以及更多应用下面学习 JavaScript 的相关知识本章主要内容 : JavaScript 简介 JavaScript 基础流程控制语句函数的定义与调用事件处理常用对象 DOM 技术异常控制语句 3.1 JavaScript 简介 JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言, 主要目的是为了解决服务器端语言, 如 Perl, 遗留的速度问题, 为客户提供更流畅的浏览效果当时服务端需要对数据进行验证, 由于网络速度相当缓慢, 只有 28.8kbps, 验证步骤浪费时间太多于是,Netscape 的浏览器 Navigator 加入了 JavaScript, 提供了数据验证的基本功能 JavaScript 既是一种描述性语言, 也是一种基于对象 (Object) 和事件驱动 (Event Driven), 并具有安全性能的脚本语言使用它的目的是与 HTML 超文本标记语言一起实现在一个 Web 页面中链接多个对象, 并与 Web 客户端实现交互效果无论是在客户端还是在服务器端,JavaScript 应用程序都要下载到浏览器的客户端执行, 从而减轻服务器端的负担 JavaScript 基本结构 JavaScript 代码是用 <script> 标记嵌入 HTML 文档中, 可以将多个脚本嵌入到一个文档中, 只需将每个脚本都封装在 <script> 标记中即可客户端浏览器遇到 <script> 标记时, 将逐行读取内容, 直到遇到 </script> 结束标记为止最后浏览器将检查 JavaScript 语句的语法, 如果有任何错误, 就会在警告框中显示出来, 如果没有错误, 客户端浏览器将编译并执行语句 JavaScript 脚本的基本结构如下

1 JavaScript 简介 JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言, 主要目的是为了解决服务器端语言, 如 Perl, 遗留的速度问题, 为客户提供更流畅的

2 <script language="javascript">  </script> Java Web 实战开发完全学习手册 language 属性用于指定编写脚本使用哪一种脚本语言, 脚本语言是浏览器用于解释脚本的语言, 通过该属性还可以指定使用的脚本语言的版本  是注释标记, 表示结束注释标记, 此标记告知不支持脚本的浏览器忽略标记中包含的语句此标记是可选的, 但最好在脚本中使用此标记, 可确保不支持脚本的浏览器会忽略嵌入到 HTML 文档中的 JavaScript 语句下面通过一个实例了解 JavaScript 的基本用法 <html xmlns=" <head> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>javascript 的基本用法 </title> <script language="javascript"> document.write("javascript 世界欢迎您!"); alert(" 欢迎来到 JavaScript 的脚本世界!"); </script> </head> <body> </body> </html> 在上述代码中,document.write() 方法类似于 Java 语言中的 print() 函数, 表示向页面输出显示信息 alert() 方法表示弹出一个提示框, 用于显示弹出信息, 上述代码执行效果如图 3-1 所示图 3-1 JavaScript 的基本用法 90

-- 表示开始注释标记,--> 表示结束注释标记, 此标记告知不支持脚本的浏览器忽略标记中包含的语句此标记是可选的, 但最好在脚本中使用此标记, 可确保不支持脚本的浏览器会忽略嵌入到 HTML 文档中的 JavaScript 语句下面通过

3 理论上, 可以将 JavaScript 语句放置在 HTML 文档中的任意位置然而, 将其放置在标签 <head></head> 之间是一个良好的编程习惯, 因为这样确保了所有代码在从 body 部分调用之前被阅读和执行 JavaScript 脚本的执行原理了解了 JavaScript 脚本的基本结构, 下面再来了解脚本的执行原理在脚本的执行过程中, 客户端浏览器与应用服务器之间采用请求 / 响应模式进行交互第 3章 JavaScript 基础图 3-2 脚本执行原理如图 3-2 所示, 交互过程如下 (1) 浏览器接收到用户的请求 : 用于输入要访问的网址 ( 包含 JavaScript 脚本 ) (2) 客户端浏览器向服务器请求某个包含 JavaScript 脚本的页面, 浏览器将请求消息发送至服务器, 等待服务器的响应 (3) 应用服务器向客户端浏览器发送响应消息, 也就是把含有 JavaScript 脚本的 HTML 文件发送至客户端, 然后由客户端浏览器由上至下逐行解析 HTML 标记和 JavaScript 脚本, 并将解析结果呈现给用户使用 JavaScript 脚本的好处如下 (1) 含有脚本的页面只需在第一次请求时下载一次即可, 从而减少了不必要的网络通信 (2)JavaScript 脚本是由客户端浏览器执行, 而不是服务器端执行, 从而减轻了服务器端的压力解释型语言对程序来说, 计算机需要一个翻译, 即把程序代码变成由 0 和 1 组成的包含信息的序列计算机可以理解的二进制语言目前存在编译和解释两种翻译类型两种方式都需要对代码进行翻译, 只是翻译的时间不同而已编译型语言在计算机运行代码前, 需要先把代码翻译成计算机可以理解的文件, 如 91

3-2 所示, 交互过程如下 (1) 浏览器接收到用户的请求 : 用于输入要访问的网址 ( 包含 JavaScript 脚本 ) (2) 客户端浏览器向服务器请求某个包含 JavaScript 脚本的页面, 浏览器将请求消息发送至服务器, 等待服务器的响应 (3)

4 EXE 文件, 这个 EXE 文件只需要经过一次编译就可以运行了, 而且除非修改代码, 否则都不需要重新编译, 所以编译型语言的程序执行效率高解释型语言则不同, 解释型语言的程序不需要在运行前编译, 在运行程序时才翻译, 专门的解释器负责在每个语句执行时解释程序代码这样解释型语言每执行一次就要翻译一次, 效率比较低由于 JavaScript 属于解释型语言, 这就表示每句代码只有在运行时, 系统才知道这句代码是否有错, 就是说, 由于编译型语言在运行前进行了编译, 编译器对所有代码都进行了检查, 这样就不会产生一些低级错误但是由于 JavaScript 语言的性质决定了目前的大部分工具对 JavaScript 脚本语言的调试都支持得不是很好, 这就需要开发者更细心更专心地对付这些脚本了 3.2 JavaScript 的基础 Java Web 实战开发完全学习手册 JavaScript 像 Java 一样, 也是一门编程语言, 有其自身的基本数据类型表达式运算符号和逻辑控制语句等基本语法 JavaScript 通过数据类型来处理数字和文字通过变量提供存放信息的地方, 通过表达式完成较为复杂的信息处理等, 下面学习 JavaScript 的基础数据类型在 JavaScript 脚本语言中有如下四种基本数据类型 1. 字符串类型用双引号或单引号括起来的字符或数值, 这是程序中使用最广的一种类型 JavaScript 将字符串类型定义为由 0 个或多个 16 位无符号整数组成的有限序列, 如 "abc123" 或 "" 引号用来表示这是一个字符串类型的值, 注意是英文引号在字符串序列中的每个字符都有一个索引值, 用来定位字符的位置, 例如, 第一个字符的索引值是 0, 第二个字符是 1, 以此类推字符串的长度用一个正整数来表示, 字符串序列中有几个字符, 它的长度就是几, 如 "abc" 的长度是 3, 代码如下所示 <html> <head> </head> <body> <script language="javascript"> var n="abc"; alert(n.length); </script> </body> </html> 运行效果如图 3-3 所示 92

行了编译, 编译器对所有代码都进行了检查, 这样就不会产生一些低级错误但是由于 JavaScript 语言的性质决定了目前的大部分工具对 JavaScript 脚本语言的调试都支持得不是很好, 这就需要开发者更细心更专心地对付这些脚本

5 第 3章图 3-3 非空字符串长度如果没有字符, 像空字符串 "", 它的长度就是 0, 把图 3-3 中的代码变量 n 值变为空, 运行效果如图 3-4 所示 JavaScript 基础图 3-4 空字符串长度对初学者而言, 一个容易混淆的概念就是空字符串, 应该把空字符串和空值 (null) 区分开来例如 : // 空字符串, 表示变量 str 的值是一个字符串, 字符串内容为空 var str = ""; // 空值, 表示变量 str 的值是空 var str = null; JavaScript 不区分单引号或者双引号, 其功能相同, 但应该防止出现引号不匹配的情况, 例如 : var str = 'abc"; // 或 var str = "abc'; 93

// 空字符串, 表示变量 str 的值是一个字符串, 字符串内容为空 var str = ""; // 空值, 表示变量 str 的值是空 var str = null;

6 防止出现这类情况最好的办法是先写一对引号, 再写中间的内容如果想在字符串内使用单 / 双引号作为字符的话, 注意不要与字符串界限符 ( 字符串的开始和结束 ) 发生冲突例如 : var str = "She said "how could this be""; 这是一个错误的字符串格式, 字符串内容中的双引号和字符串界限符发生了冲突, 结果就是语法错误, 避免这种情况最好的方法就是使用单 / 双引号混合, 例如 : var str = "She said 'how could this be'"; Java Web 实战开发完全学习手册这样就不会有问题了, 但如果内容中必须要用双引号, 或者单 / 双引号都要作为字符串的值出现时, 就要使用转义字符了 2. 数值类型包括常用的整数和实数 JavaScript 中的数值类型为 64 位双精度浮点类型, 遵循二进制浮点数算术标准 IEEE 754( 美国电气和电子工程师协会标准 ) IEEE 754 标准详细描述了浮点数的组成及范围大小等数值类型可以通过整数小数及各种不同的进制格式来表示 JavaScript 中没有针对整数的类别, 这跟其他服务端编程语言是不大相同的通常小数和整数会被分别存储在不同的类别中下面观察 JavaScript 中所能表示的各种数值类型及不同的格式 // 十进制 var num = 100; // 十进制小数 var num = 1.919; // 八进制 var num = 010; // 十六进制 var num = 0xFD; // 科学计数法 var num = 9.99e+9; 不管参与运算的变量值是什么进制的数值, 但计算结果仍然会是十进制, 如下面的例子 // 不同格式数值的混合运算 var n1 = 010; var n2 = 0xFD; alert(n1 * n2); 94

学习手册这样就不会有问题了, 但如果内容中必须要用双引号, 或者单 / 双引号都要作为字符串的值出现时, 就要使用转义字符了 2.

7 运行结果如图 3-5 所示第 3章图 3-5 不同格式的数值混合计算的结果数值类型有三个特殊的常量值, 分别是 NaN +Infinity 和 -Infinity (1)NaN NaN 的全称是 Not a Number, 非数值常量表示一个值并不是合法的数值形式, 它通常用来验证一个变量的值是否是数值虽然 NaN 本身是系统已经提供的常量, 但通常不与它进行直接比较, 而且这种比较也是无法得到正确的结果, 例如 : JavaScript 基础 var str1 = 'abc'; alert(str1 == NaN); 运行结果如图 3-6 所示图 3-6 确认变量是否为数值 (1) 从图 3-5 中可以看到, 显然通过与 NaN 比较是不行的, 要想得到正确结果, 应该使用 isnan 函数进行判断 isnan() 函数用于检查其参数是否是非数字值, 例如 : var str1 = 'abc'; alert(isnan(str1)); 运行结果如图 3-7 所示 95

正确的结果, 例如 : JavaScript 基础 var str1 = 'abc'; alert(str1 == NaN); 运行结果如图 3-6 所示图 3-6 确认变量是否为数值 (1) 从图 3-5 中可以看到, 显然通过与 NaN 比较

8 图 3-7 确认变量是否为数值 (2) Java Web 实 (2)+Infinity 正无穷常量表示一个数值表达式的计算结果是无穷大,JavaScript 规定大于或等于 2 的 1024 次方的数为无穷, 例如 : 战开发完全学习手册 alert(math.pow(2,1024)); Math.pow() 返回指定数字的指定次幂运行结果如图 3-8 所示图 3-8 正无穷 (3)-Infinity 负无穷常量与正无穷相反, 但它们的数量级是相同的, 例如 : alert(-math.pow(2, 1024)); 运行结果如图 3-9 所示图 3-9 负无穷 96

9 3. 布尔值使用 true 或 false 表示的值布尔类型也就是真假类型, 这个类型有两个标准值,true ( 真 ) false( 假 ) 布尔值用来表示一个逻辑表达式的结果, 通常用于判断处理, 如 1 < 2, 这个逻辑表达式的值就为 true, 反之则为 false, 如图 3-10 所示第 3章图 3-10 布尔表达式 4. 空值这个类型只有一个值 null null 是一个占位符, 表示一个变量已经有值, 但值为空不同于 undefined,null 值通常产生在程序运行当中当变量不再被使用时, 将变量赋值为 null, 以释放存储空间 5. 引用类型相对于以上的几种基本类型外, 引用类型最大的不同在于变量值的存储方式对基本类型来说, 变量中存储的是值本身, 如图 3-11 所示而引用类型存储 x 的是值所在内存空间的地址, 也就是指针, 如图 3-12 所示 var n = 12345; var n = string ; JavaScript 基础图 3-11 基本类型 var obj = Object; 内存地址 0xFF1D 图 3-12 引用类型引用类型通常被认为是类, 而它的值就是对象对象是一种特殊的值, 相当于集合可以通过 ( 点运算符 ) 访问集合内部的值, 如 obj.name 引用对象的地址是因为, 对象的大小无法像基本类型那样确定, 例如, 数值最大 64bit, 97

空值这个类型只有一个值 null null 是一个占位符, 表示一个变量已经有值, 但值为空不同于 undefined,null 值通常产生在程序运行当中当变量不再被使用时, 将变量赋值为 null, 以释放存储空间 5.

10 布尔值只有真和假等, 集合的大小不是固定的, 计算机在分配存储空间时是在堆上分配而基本类型则是在栈上分配空间, 便于迅速查找变量值字符串类型在 JavaScript 中有点特殊, 在其他编程语言中, 它都是引用类型, 因为字符串的长度不是固定的但在 JavaScript 规范中, 它被定义为基本类型, 但这只是对使用而言下面的例子演示了基本类型和引用类型在存储方面的差异 // 值传递 var num1 = 1; var num2 = num1; num1 = 2; alert(num2); 运行结果如图 3-13 所示 Java Web 实战开发完全学习手册图 3-13 基本类型的值传递图 3-13 演示了基本类型的值传递, 当把变量 num1 的值赋值给变量 num2 时, 是把变量 num1 所存储的值 1 赋给了变量 num2, 所以, 后面把变量 num1 的值改为 2 时, 对变量 num2 没有影响, 变量 num2 的值仍然为 1 而下面的代码就不同了 // 引用传递 var a = Object; var b = a; a.name = 'ylem'; alert(b.name); 运行结果如图 3-14 所示图 3-14 演示了引用类型的引用传递, 变量 a 的值为对象 Object 的指针, 当把变量 a 赋值给变量 b 时,b 存储的只是和 a 一样的指针, 都指向 Object 当通过变量 a 的引用把 Object 的 name 属性改变后, 通过变量 b 的引用也发生了改变, 因为它们引用的是同一个对象 98

3-13 所示 Java Web 实战开发完全学习手册图 3-13 基本类型的值传递图 3-13 演示了基本类型的值传递, 当把变量 num1 的值赋值给变量 num2 时, 是把变量 num1 所存储的值 1 赋给了变量 num2, 所以, 后面把变量 num1 的值改为 2 时,

11 图 3-14 引用类型的引用传递使用引用类型赋值时需要特别小心, 因为被赋值的变量和原变量引用了同一个对象, 修改任意一个引用时, 另一个也会受影响第 3章 JavaScript 基 JavaScript 中的常量常量是一种固定不变的数据类型在 JavaScript 程序中的常量一旦定义了数值, 则会一直保持固定的数值直至程序运行结束 JavaScript 中主要包含以下类型的常量 1. 整型常量 JavaScript 的常量通常又称为字面常量, 它是不能改变的数据, 其整形常量可以用十六进制八进制和十进制来表示其具体值 2. 实型常量实型常量由整数部分和小数部分共同表示, 如和等, 也可以使用科学计数法表示, 如 5E6 和 4E3 等 3. 布尔值布尔常量只有 true 和 false 两种状态, 其主要功能用来说明或代表一种对象的状态或标志, 以说明操作流程础 JavaScript 中的布尔值与 C++ 不同 C++ 可以用 0 或 1 表示其状态, 而 JavaScript 只能用 False 或 True 来表示其状态 4. 字符型常量字符型常量即使用单引号或双引号括起来的一个或几个字符, 如 Hello World JavaScript 1234 和 hello 7.2 等 5. 空值 JavaScript 中只有一个空值 NULL, 表示什么也没有 6. 特殊字符 JavaScript 中以反斜杠 (\) 开头的不可显示的特殊字符, 通常称为控制字符, 可以作为脚本代码的注释 99

整型常量 JavaScript 的常量通常又称为字面常量, 它是不能改变的数据, 其整形常量可以用十六进制八进制和十进制来表示其具体值 2. 实型常量实型常量由整数部分和小数部分共同表示, 如 24.56 和 391.

12 3.2.3 JavaScript 中的变量变量是指可以变化的数据类型, 变量一经定义后可以根本程序的需要而代表不同的数值变量的主要功能是存取数据和提供存放信息的容器变量以非数字的符号来表达变量是常数的相反在变量使用时必须明确变量的命名类型声明和其作用域 1. 变量的声明变量声明语法如下 var 变量名 ; JavaScript 通过关键字 var 来声明一个变量在关键字和变量名之间至少要有一个空格变量名需要遵守一定的规范, 至少不应该出现中文及特殊字符 Java Web 实战开发完全学习手册分号表示代码的分隔, 在 JavaScript 中不是必须的, 如果一行只有一条语句, 分号是可以忽略的, 但笔者的意见是, 除非 JavaScript 中明确规定不能写分号, 否则在任何时候都不要忘记写分号在实际使用脚本代码时, 通常都会对代码进行压缩和混淆, 以便使得网页可以更快地打开, 从增加用户体验, 另一方面混淆代码使得程序更加安全不写分号将很有可能导致压缩后的代码无法使用, 同样的事情还会发生在大括号上, 读者可以在学习语句后了解大括号声明语句告诉浏览器, 这个变量可以用来存放或修改数据未被赋值的变量也是有值的, 要给变量赋值, 需要使用赋值语句 2. 变量的赋值变量的赋值语法如下变量名 = 值 ; 这里的等号 (=) 为赋值运算符通常, 用法更多的是把变量声明和变量赋值这两种操作合二为一, 如 var age = 26; 上述代码声明一个叫做 age 的变量, 并对其进行初始化, 初始化的值为 26 在 JavaScript 中还会发生一些比较奇怪的事情, 例如 : var num = 28; var num = 9; 上面的代码通常会被解释为声明了两个同名的变量, 而这在大多数编程语言中都会引发程序的错误, 但奇怪的事情就发生在 JavaScript 中 JavaScript 把重复的声明和赋值当作对同一变量的重新赋值相当于 : var num = 28; num = 9; 读者在编码过程中应该避免出现这样的情况 JavaScript 是一种弱类型的脚本语言, 在其他强类型语言 ( 如 Java C# C/C++) 中, 声明变量时必须指定变量的具体类型 100

变量的声明变量声明语法如下 var 变量名 ; JavaScript 通过关键字 var 来声明一个变量在关键字和变量名之间至少要有一个空格变量名需要遵守一定的规范, 至少不应该出现中文及特殊字符 Java Web 实战开发完全学习手册分号

13 例如 : int m; // 声明一个整数类型的变量 float n; // 声明一个单精度浮点型的变量 double x;// 声明一个双精度浮点型的变量 char c; // 声明一个字符类型的变量而在 JavaScript 中, 不管什么类型的变量, 声明时都只使用 var 关键字 (var 是变量英文名的缩写 ), 而变量的具体类型是在赋值后才确定的 3. 变量的命名 JavaScript 中的变量命名与其他编程语言相比, 主要遵循如下几点必须是一个有效的变量, 即变量以字母和 $ 和 _ 开头, 而后可以出现数字等变量名中不能存在空格 + - 逗号等其他特殊符号另外,JavaScript 中的变量名是区分大小写的例如 : 第 3章 JavaScript 基 var $_$ = 1; var _$_1 = 2; var Name= Tom ; 础这些都是合法的命名而像下面的代码 var &_& = 1; var 1ab = 1; var._. = 1; 都是不合法命名, 在运行中会出现语法错误 4. 变量的声明和作用域可以在使用 JavaScript 变量前先声明并赋值 JavaScript 是采用动态编译的, 而动态编译的缺点是不易发现代码中的错误, 特别是变量命名方面当使用变量进行声明后, 可以及时发现代码中的错误 JavaScript 中的变量有全局变量和局部变量两种全局变量定义在所有函数体外, 其作用范围是整个函数 ; 而局部变量定义在函数体之内, 只对该函数是可见的, 而对其他函数则是不可见的类型转换不同类型值之间的相互转换在实际开发中使用是非常频繁的最简单的例子就是从网页输入框获取数值进行数学运算之前, 获取的值必须进行转换, 因为所有从网页中获取的文本数据, 都是字符串类型的, 必须先转换成数值类型 1. 转换成数值类型数据有两种方式被转换成其他类型 : 一种是隐式转换 ; 另一种是显式转换 101

变量的命名 JavaScript 中的变量命名与其他编程语言相比, 主要遵循如下几点必须是一个有效的变量, 即变量以字母和 $ 和 _ 开头, 而后可以出现数字等变量名中不能存在空格 + - 逗号等其他特殊符号另外,JavaScript 中的变量名

14 (1) 隐式转换在数据运算过程中, 系统自动把不同的基本数据类型转换成相同类型进行运算, 例如 : // 字符串转数字 alert('777'-677); 运行结果如图 3-15 所示系统会自动把参与运算的基本类型按照系统自己的逻辑进行类型转换, 有时可能不是开发者想要的那样, 例如, 字符串转数值时, 如果把字符串放在运算符的左边, 结果就是一个字符串值, 而不是数值了 Java Web 实战开发完全学习手册 null 转数值的例子如下图 3-15 字符串转数值 // null 转数值 alert(1 - null); 运行结果如图 3-16 所示布尔值转数值的例子如下 // 布尔值转数值 alert(true + false + 1); 运行结果如图 3-17 所示图 3-16 null 转数值 102

运算符的左边, 结果就是一个字符串值, 而不是数值了 Java Web 实战开发完全学习手册 null 转数值的例子如下图 3-15 字符串转数值 // null 转数值

15 undefined 转数值的例子如下图 3-17 布尔值转数值第 3章 // undefined 转数值 alert(1 - undefined); 运行结果如图 3-18 所示 JavaScript 基础图 3-18 undefined 转数值 (2) 显式转换系统无法总是猜中开发者的意图, 所以有时开发者需要自己对数据进行类型转换最简单直接的办法是在字符串前面加正 / 负符号此外,JavaScript 还提供了两种函数用于基本数值类型的转换, 分别是 parseint() 和 parsefloat() parseint() 转换成整数的函数, 只能对字符串类型进行转换, 其他类型被转换的结构都将得到 NaN parseint 的转换过程是从字符串的第一个字符开始依次进行判断, 如果发现字符不是数字字符, 那么将停止转换, 例如,parseInt( 123a1234 ) 的转换结果就是 123 如果字符串的第一个字符是除了减号 ( 表示负数 ) 外的任何非数字字符, 将得到 NaN 的结果, 例如 : alert(parseint('a12345')); 运行结果如图 3-19 所示 103

parseint() 转换成整数的函数, 只能对字符串类型进行转换, 其他类型被转换的结构都将得到 NaN parseint 的转换过程是从字符串的第一个字符开始依次进行判断, 如果发现字符不是数字字符, 那么将停止转

16 图 3-19 parseint 函数的使用 Java Web 实战开发完全学习手册除了 parseint 的基本用法外, 还可以进行转换进制的指定, 例如, 把 16 位的字符转换为数值, 如 alert(parseint('ff',16)); 运行结果如图 3-20 所示图 3-20 parseint 指定转换格式实际上不仅是 16 进制, 还可以是 8 进制, 甚至是 11 进制, 读者可以试着改变这个参数注意, 不要以为默认的 parseint 的结果一定是 10 进制数, 如果字符串第一个字符是 0 的话, 会被转换为 8 进制数, 在使用时一定要注意, 如图 3-21 所示图 3-21 parseint 默认的 8 进制转换 104

16 进制, 还可以是 8 进制, 甚至是 11 进制, 读者可以试着改变这个参数注意, 不要以为默认的 parseint 的结果一定是 10 进制数, 如

17 (2)parseFloat() 转换成小数的函数, 除了转换结果是浮点数外, 也无法指定转换格式, 其他特性与 parseint 没有区别, 例如 : alert(parsefloat('1.12')); 运行结果如图 3-22 所示第 3章图 3-22 parsefloat 函数的使用 JavaScript 基础 2. 转换成字符串类型 JavaScript 没有用于转换字符串类型的函数, 原因很简单, 大部分的数据都是字符串类型的转换成字符串类型很简单, 只需要使用连接符号 + 连接一个字符串类型的值, 就能将其他类型的值拼接成新的字符串, 例如 : alert('yg'+null+undefined+123+true); 运行结果如图 3-23 所示图 3-23 字符串类型的隐式转换图 3-23 完美地诠释了字符串的威力, 所有类型的值都被融合为一个大的字符串 3. 转换成布尔类型在 JavaScript 中, 除了 true 和 false 外, 还有很多值可以表示真或假, 见表

转换成字符串类型 JavaScript 没有用于转换字符串类型的函数, 原因很简单, 大部分的数据都是字符串类型的转换成字符串类型很简单, 只需要使用连接符号 + 连接一个字符串类型的值, 就

18 表 3-1 很多值可以表示真或假数据类型布尔值为假时的值布尔值为真时的值 Undefined undefined 无 Null null 无 String 非空字符串 Number 0 或者 NaN 非 0 Object( 引用类型 ) null 非空对象转义字符 Java Web 实转义字符是一种特殊的字符常量转义字符以反斜线 \ 开头, 后跟一个或几个字符转义字符具有特定的含义, 不同于字符原有的意义, 这有点类似于键盘上的 Shift 表 3-2 中列举了常用的转义字符战开发完全学习手册表 3-2 常用的转义字符及其含义转义字符 Unicode 含义 \b \u0008 退格 t \u0009 横向跳到下一制表位置 \n \u000a 回车换行 \v \u000b 竖向跳到下一制表位置 \f \u000c 走纸换页 \r \u000d 回车 \" \u0022 双引号符 \' \u0027 单引号符 \\ \u005c 反斜线符 \xnn 十六进制代码 nn(n 是 0 到 F 中的一个十六进制数字 ) 表示的字符 \unnnn 十六进制代码 nnnn(n 是 0 到 F 中的一个十六进制数字 ) 表示的 Unicode 除了基本的转义字符 ( \ + 单字符 ) 外, 还有两种特别的格式, 即 \x 和 \u \x 是用 2 位十六进制数字来表示字符, 但不同浏览器对字符的支持不同, 会出现不同的结果, 例如 : // 不同的浏览器结果不同 alert("\x10"); 在 IE 和 FF 下的运行结果分别如图 3-24 图 3-25 所示图 3-24 IE10 的转义结果 106

$习手册表 3-2 常用的转义字符及其含义转义字符 Unicode 含义 \b \u0008 退格 t \u0009 横向跳到下一制表位置 \n \u000a 回车换行 \v \u000b 竖向跳到下一制表位置 \f \u000c 走纸换页 \r \u000d 回车 \" \u0022 双引号符 \'$

19 第 3章图 3-25 FF 的转义结果 \u 是用 4 位十六进制数字来表示字符, 实际上每个字符 ( 包括转义字符 ) 都对应一个此格式的编码, 也就是 Unicode 编码, 例如 : JavaScript 基础 alert("he said \"how could this be\uff01\""); 运行结果如图 3-26 所示图 3-26 Unicode 编码的使用关键字与保留字 JavaScript 关键字是指在 JavaScript 语言中有特定含义, 成为 JavaScript 语法中一部分的那些字 JavaScript 关键字是不能作为变量名和函数名使用的使用 JavaScript 关键字作为变量名或函数名, 会使 JavaScript 在载入过程中出现编译错误 JavaScript 关键字列表 107

20 break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try JavaScript 还有一些保留字, 这些保留字虽然现在没有用到 JavaScript 语言中, 但是将来有可能用到 JavaScript 保留字列表如下 Java Web 实战开发完全学习手册 abstract Double float long short volatile boolean debugger goto native static byte enum implements package super char export import private synchronized class extends int protected throws const final interface public transient 运算符除了加减乘除外,JavaScript 还拥有其他丰富的运算符, 包括常见的大于小于等比较运算符, 还包括可以查看数据类型的 typeof 运算符, 掌握并理解这些运算符, 是学好 JavaScript 的基础 1. 算术运算符虽然是算术运算符, 但它已经超出了算术的范围, 不过读者大可不必担心什么, 它们很简单, 如表 3-3 所示基本的四则运算符在这里仍然有效, 包括可以使用小括号进行优先级的改变加号除了可以做四则运算外, 还可以作为连接符来拼接字符串在 JavaScript 的除法中, 即使两个操作数都是整数, 当无法整除时, 结果是一个小数, 而不是整数还有当除数为 0 时, 并不会引发程序错误, 而是得到一个 Infinity 的结果表 3-3 算术运算符运算符含义操作数类型结果类型 + 加整数小数字符串整数小数字符串 - 减整数小数整数小数 * 乘整数小数整数小数 / 除整数小数整数小数 % 取模 ( 余数 ) 整数小数整数小数 ++ 数值加 1 整数小数整数小数 -- 数值减 1 整数小数整数小数 +value 变量取正整数小数字符串整数小数 -value 变量取负整数小数字符串整数小数 108

enum implements package super char export import private synchronized class extends int protected throws const final interface public transient 3.2.

21 (1)% 运算符取模运算符类似除法运算符, 需要两个操作数 : 除数和被除数返回余数取模运算符常被用来判断一个数是否能被整除例如 : y=5,x=y%2, 则 x=1 (2)++/-- 运算符自增 / 自减运算符, 只需要一个操作数, 必须是变量对操作数的值加 1 或减 1 分为前缀和后缀两种用法, 例如 : // 前缀用法 var y = 5; alert(++y); 运行结果如图 3-27 所示第 3章 JavaScript 基础图 3-27 自增 / 自减运算符的前缀用法又如 : // 后缀用法 var y = 1; alert(y--); 运行结果如图 3-28 所示图 3-28 自增 / 自减运算符的后缀用法 109

22 下面演示前缀用法和后缀用法的混合用法 // 混合用法 var y = 1; --y; alert(y++) 运行结果如图 3-29 所示 Java Web 实战开发完全学习手册图 3-29 混合用法上面的代码详细介绍了自增 / 自减运算符的用法, 对前缀运算符来说, 可以直接认为是变量值加 1, 但后缀运算符有些特殊, 注意, 图 3-28 所示结果并不是 0, 而图 3-29 所示结果也不是 1, 这是因为后缀运算符的优先级比较低, 当在一句代码中涉及多个操作时, 后缀运算符会最后执行所以先以 alert() 输出了 y 的值, 之后 y 的值才发生改变 (3)+value/-value 运算符变量取正 / 负运算符, 只需要一个操作数, 可以是常量正 / 负符号最有用的地方在于可以很容易地将字符串类型的值转换为数值类型, 例如 : alert(typeof +'1234') 运行结果如图 3-30 所示图 3-30 字符串转换数字 110

23 如果字符串中的字符不是有效的数字字符, 那么, 转换结果将得到 NaN 2. 赋值运算符不论哪种编程语言, 赋值运算符都是使用最频繁的运算符只要是有变量的地方, 基本上就会出现赋值运算符除了基本的赋值符号外,JavaScript 还提供了这种复合赋值符号, 在编写代码时, 使用复合赋值运算符, 可以简化代码, 但在使用之前必须了解每种运算符的含义, 如表 3-4 所示的分解表达式针对位移运算和按位操作本书稍后会详细介绍表 3-4 赋值运算符列表运算符含义分解表达式 = 赋值 a = b += 先相加后赋值 a = a+b -= 先相减后赋值 a = a-b *= 先相乘后赋值 a = a*b /= 先相除后赋值 a = a/b %= 先取模后赋值 a = a%b <<= 向左位移后赋值 a = a<<b >>= 向右位移后赋值 a = a>>b >>>= 无符号按位右移后赋值 a = a>>>b 第 3章 JavaScript 基础 3. 关系运算符关系运算符是对两个操作数进行关系判断, 并产生布尔结果的一种运算符例如, 大于小于或等于 JavaScript 中的关系运算符如表 3-5 所示表 3-5 关系运算符运算符含义 < 小于 > 大于 == 等于 === 严格等于 <= 小于等于 >= 大于等于!= 不等于!== 严格不等于 JavaScript 中的关系运算符不仅可以做数值间的比较, 还可以做数值与其他类型值的比较, 更可以做非数值类型间的比较, 但通常这样的比较不具有意义读者更感兴趣的应该是严格等于和严格不等于, 这种运算符在其他编程语言 (C/C++ Java) 中是没有的严格的意思就是不仅比较值本身, 还会对值的类型进行比较, 例如 : alert((123 === '123')+'----'+(123!== '123')) 运行结果如图 3-31 所示 111

24 图 3-31 使用严格等于和严格不等于 Java Web 实战开发完全学习手册图 3-31 所示严格比较运算符的使用方法, 从另一个方面来说, 如果要求不严格, 可以使用非严格判断的等号或不等号进行判断, 例如, 用户从页面输入了一个数值进行比较, 这时就可以直接用字符串进行比较而不需要转换 4. 逻辑运算符与关系运算符相同, 逻辑运算符的结果也是一个布尔值三种逻辑运算符如表 3-6 所示表 3-6 逻辑运算符运算符含义表达式 && 与 a && b 或 a b! 非!a 实际上关系运算也属于一种逻辑运算, 但逻辑运算符可以处理更复杂的关系简单来说, 逻辑运算符可以计算多个关系运算的结果, 例如, 要验证某人年龄的值是既小于 28 又大于 20 的, 这两种关系必须是同时满足的但 JavaScript 中不存在 20<age<28 这种用法, 而逻辑运算符可以完成这种操作运算符 && 逻辑与需要两个操作数, 都是布尔类型逻辑与对两个布尔值进行判断, 如果两个布尔值都为真, 那么, 逻辑和表达式的值就为真, 如果其中任意一个条件为假或者都为假, 那表达式的结果就为假, 例如 : if(age>20 && age<28) alert(age); 运算符逻辑或需要两个操作数, 都是布尔类型逻辑或对两个布尔值进行判断, 只要其中任意一个条件为真, 那表达式的结果就为真否则为假运算符! 逻辑非需要两个操作数, 是布尔类型逻辑非很简单, 对操作的布尔结果执行取反 112

25 运算逻辑运算符经常和关系运算符一起组成逻辑表达式, 例如 : alert((28<20) (50<60)) 运行结果如图 3-32 所示第 3章图 3-32 逻辑运算 4. 位运算符位运算符在各种编程语言中都被认为是一种高级操作, 这主要是因为位运算牵扯到更多的计算机内部原理, 这可能妨碍了很多人学习编程的兴趣如果读者不了解位的概念, 可以先不必阅读此节, 事实上在实际的开发中, 位运算被使用的几率也很小位运算符的运算对象是各种进制的数值类型 ( 包括 8 进制 10 进制 16 进制 ), 但在处理时却使用值的二进制来处理常用的位运算符如表 3-7 所示 JavaScript 基础表 3-7 位运算符运算符含义表达式 & 按位与 a & b 按位或 a b ~ 按位非 ~a ^ 按位异或 a ^ b << 按位左移 a << x >> 按位右移 a >> x >>> 无符号按位右移 a >>> x (1) 按位与对于两个数值, 与操作会对两个数值的二进制位进行逻辑和操作, 例如 : alert(2&3); // 结果为 2 一个二进制的位操作图可以很好地解释这一结果, 如图 3-33 所示从图 3-33 中可以看到与操作实际上就是对二进制数的每一位进行逻辑和操作, 而因为是按照位来做运算的, 所以叫按位与 113

26 图 3-33 按位与运算模型另一个更简易的办法就是把 10 进制数当作二进制数直接进行观察, 例如 : alert(101 & 110); // 结果是 100 Java Web 实战开发完全学习手册 (2) 按位或或操作和与操作的运算方式是相同的, 只是逻辑和操作换成了逻辑或, 例如 : alert( ); (3) 按位非不同于其他位操作, 非操作只有一个操作数, 非运算会对操作数的每一位取反, 0 变成 1,1 变成 0, 例如 : ~5 (4) 按位异或异或操作也采用两个操作数之间进行位操作的方式, 只是运算方式发生了改变如果两个位的值不同, 那么, 结果位则为真, 例如 : alert(1 ^ 2); // 结果是 3, 因为二进制 01^ 10 的结果是 11 alert(10 ^ 01); // 结果是 11 (5) 按位左移左移操作符可以按照二进制格式把一个数值的所有位向左移动, 例如 : alert(1<<1); // 结果是 2 所有位向左移动后, 原有的空位就补 0, 如图 3-34 所示图 3-34 按位左移运算模型每向左移动一次, 相当于把原有数值乘以 2, 如果在频繁的乘法运算中使用位移操作, 114

27 那么, 计算效率将得到显著提高 (6) 按位右移与按位左移相似, 右移就是把数字位向右进行移动注意, 当右移作为除以 2 的运算时, 余数是不显示的, 例如 : alert(21 >> 1); // 结果是 10 但如果运算数包含符号, 结果就不同了, 例如 : alert(-21 >> 1); // 结果是其他运算符除了前面所讲的常用运算符外,JavaScript 还有一些特有的运算符, 如表 3-8 所示表 3-8 其他运算符运算符含义表达式 [ ] 获取对象属性或数组元素 a[1] 或 people[ age ] instanceof 验证对象是否为类的实例 a instanceof b typeof 查看数据类型 typeof a new 构造对象 new A void 取消返回值 JavaScript:void Exp delete 删除元素 delete a in 验证属性 a in b 第 3章 JavaScript 基础 (1) 运算符 [ ] 方括号运算符用于获取对象属性, 或者数组的元素例如, 要获得数组 a 的第一个元素, 则使用 a[0] 访问即可 (2) 运算符 instanceof 实例判断运算符用于判断一个对象是否为一个类的实例例如, 要判断对象 a 是否为数组的实例, 则使用 a instanceof Array 即可, 返回值为布尔类型, 代码如下 var a=new Array(); alert("a instanceof Array:" + (a instanceof Array)); 以上代码判断 a 是否为数组的一个实例运行效果如图 3-35 所示图 3-35 运算符 instanceof 的使用 115

28 (2) 运算符 typeof 类型检查运算符 typeof 运算符返回一个用来表示表达式的数据类型的字符串, 用于查看值的数据类型, 数据值可以是变量或常量可能的字符串有 "number" "string" "boolean" "object" "function" 和 "undefined", 例如 : alert(typeof (123));//typeof(123) 返回 "number" alert(typeof ("123"));//typeof("123") 返回 "string" (3) 运算符 new 对象构造运算符用于构造一个新的对象实例, 例如 : var a=new Array(); Java Web 实战开发完全学习手册 (4) 运算符 void 取消返回值运算符 void 运算符可以取消一个表达式的结果如取消一个函数的返回值, 例如 : alert(void parseint('123abc')); 运行结果如图 3-36 所示图 3-36 void 运算符的使用图 3-36 中的结果是 undefined, 并不是 123, 这是因为 void 消除了函数的返回值但 void 最有用的地方在于 : 通常 JavaScript 伪协议用在 <a> 标签的 href 属性, 或者其他标签的 src 属性中, 如 <img> 标签当在这些属性中使用伪协议时, 所计算的表达式可能会产生某些非 undefined 的值当 href 或者 src 属性得到这些值时, 页面就会被替换成这些值, 而页面本身就被覆盖掉了, 例如 : <html> <body> <a href='javascript:void (1+2)'> 超链接 </a> </body> </html> 116

29 读者可以尝试把其中的 void 去掉是什么效果, 可以更容易地了解 void 的作用 (5) 运算符 delete 删除值运算符, 这可不是 C 语言或数据库中的 delete, 虽然它们貌似相同, 但功能却差得很远在 C 中的 delete 可以删除指针所指向的内存数据, 释放内存空间, 而 JavaScript 的内存管理是自动的 JavaScript 中的 delete 用来删除对象的属性或者数组中的元素, 例如 : delete obj.a; delete obj['a']; // 通过方括号运算符来调用属性 delete array[0]; // 删除数组中的第一个元素当以 delete 操作过对象的属性后, 再次调用这个属性会得到 undefined, 说明对象已经没有这个属性了注意, 这跟属性值为空是不一样的虽然 delete 可以删除一个对象中所有的可删除属性 ( 有些属性无法删除 ), 但对象本身还存在, 如果要释放对象本身, 可以将引用对象的变量赋值为 null (6) 运算符 in 属性验证运算符 in 运算符可以验证一个对象是否包含某属性, 如 a in obj 就是验证对象 obj 是否拥有属性 a 第 3章 JavaScript 基础优先级和结合性看下面的例子 var n1=1 + 2 * 3-4 / 5; 像数学运算样, 程序中的运算符也有先乘除后加减的顺序, 这种基本的结合性规则保证了计算机和现实世界拥有完全相同的处理思路如果想改变运算符本身的结合顺序, 那就必须借助于小括号来达到目的, 例如 : var n2=1 + 2 * (3 4) / 5; 除了从左到右的基本结合规则外, 从右到左也是会经常用到的, 例如 : var x = ; 结合性保证了计算机按照正确的顺序和逻辑来处理运算符和运算数之间的关系, 而在多种运算符混合的代码中, 不同的运算符还需要遵循运算符优先级的顺序进行处理例如 : alert(1<2 && 3<4) 逻辑运算符的优先级默认低于关系运算符, 所以两个逻辑运算被优先处理, 结果就是 true && true 更多的运算符优先级如表 3-9 所示 117

30 Java Web 实战开发完全学习手册表 3-9 运算符的优先级优先级运算符描述结合性由高到低排序 () 括号从左到右递增或递减从右到左! 逻辑非从右到左 * / % 乘法除法取模从左到右 + - 加法减法从左到右 + 拼接从左到右 < <= 小于小于等于从左到右 > >= 大于大于等于从左到右 = =!= 等于不等于从左到右 = = =!= = 等同 ( 类型相同 ) 不等同从左到右 & 按位与从左到右按位或 ^ 按位异或 ~ 按位非 << 按位左移 >> 按位右移 >>> 按位右移, 左边以 0 填充 && 逻辑与从左到右逻辑或从左到右?: 三元条件表达式从右到左 = += -= *= %= <<= >>= 赋值从右到左 3.3 流程控制语句程序是算法的实现, 在实现算法时, 经常会出现重复选择分支等操作, 这些操作控制程序的流程向正确的方向进行 JavaScript 提供了丰富的流程控制语句 if 语句 1. 基本 if 语句 if 语句是使用最多的选择条件语句其含义是如果表达式的值为 true( 真 ) 时, 那么执行语句 1, 否则执行语句 2 如果 if 或 else 后有多行语句, 则大括号必须出现, 否则可省略语法格式如下 if( 表达式 ) 语句 1; else 118

31 语句 2; 条件语句就是一个逻辑表达式当程序流程不需要处理相对的关系时, 可以省略 else else 的使用是根据场景的不同而决定的例如, 某市的驾照理论考试,90 分以上 ( 含 90) 算合格, 其余为不合格 if(score>=90) alert(' 考试通过!'); else alert(' 考试未通过 '); 第 3章 2. 多重 if 语句多重 if 语句表示在 else 之后可以再增加 if 条件的判断, 用于两个以上分支时使用语法如下 if ( 表达式 1) 语句 1 else if ( 表达式 2) 语句 2 else if ( 表达式 3) 语句 3 else 语句 ; JavaScript 基础例如, 某超市搞活动, 消费满 100 减 2 元, 满 200 减 5 元, 满 500 减 20 元, 代码如下 var money = 330; // 消费金额 if(money >= 100 && money < 200) alert(' 减 2 元 '); else if(money >= 200 && money <500) alert(' 减 5 元 '); else if(money >= 500) alert(' 减 20 元 '); else alert(' 消费未达到最低要求 '); 119

32 此代码演示了多重 if 语句的使用, 当前一个条件不满足时, 会顺序判断接下来的条件是否满足, 如果都不满足则执行 else 语句在整个语句中, 一旦有条件满足, 后面的 else...if... 语句则不会被执行注意, 任何 else if 语句都可以在不改变原有流程的情况下被多个单独的 if 语句代替, 例如 : var money = 330; // 消费金额 if(money >= 100 && money < 200) alert(' 减 2 元 '); Java Web 实战开发完全学习手册 if(money >= 200 && money <500) alert(' 减 5 元 '); if(money >= 500) alert(' 减 20 元 '); else alert(' 消费未达到最低要求 '); 从结果上来说, 两段代码并没有区别都能实现判断消费额多少请读者仔细分析一下这两段代码, 如果多重 if 代码段中的第一个 if 条件成立, 下面的所有语句都不会执行而在单 if 代码段中, 除了最后的 else 外, 所有 if 都会被执行一遍, 如果每个 if 语句中不是简单的一句提示信息而是大量操作的话, 多个单 if 语句的性能显然比多重 if 要低得多, 这就是区别 3. 嵌套 if 语句嵌套 if 语句就是在 if 或 else 语句内再包含 if 语句, 并且被包含的 if 或者 else 语句内也可以再嵌套语句语法 : if ( 表达式 1) 语句 1; if ( 表达式 2) 语句 2; else 120

33 语句 3; if ( 表达式 3) 语句 4; 嵌套语句通常用在需要判断具有先后条件的场景中, 例如, 某商城招聘客服人员, 要求如下 : 女性, 年龄为 20~28 岁代码如下 var sex = ' 女 '; var age = 23; if(sex==' 女 ') if(age>=20 && age<=28) alert(' 满足条件!'); else alert(' 不满足条件!'); else alert(' 不满足条件!'); // 性别 // 年龄 // 内层 if // 内层 else // 外层 else 第 3章 JavaScript 基础上面的代码在两层 if 语句中都使用了 else 子句, 因为一旦进入 if,else 则不会执行, 它们是对立的, 所以每个 else 只对同层的 if 起作用一个不成文的规定 :if 语句的嵌套深度不要超过 3 层试想一下, 用户的工作是维护一段具有 10 层以上嵌套深度的代码是什么感觉 switch 语句 switch 语句是跟 if 语句类似的选择语句其含义是当判断条件多于 3 个时, 就可以使用 switch 语句, 这样可以使程序的结构更加清晰 switch 根据一个变量的不同取值执行不同的语句段在执行 switch 语句时, 表达式的值将从上由下与每一个 case 条件语句相比较如果相等, 则执行该 case 语句后的 JavaScript 代码如果没有任何 case 语句与之表达式的值相等, 则执行最后的 default 语句语法格式如下 switch( 表达式 ) case 匹配条件 1: JavaScript 语句 1; break; case 匹配条件 2: JavaScript 语句 2; 121

34 break;... case 匹配条件 m: JavaScript 语句 m; break; default: JavaScript 语句 x; switch 的语法有些类似多个 if 的顺序执行, 但也不完全一样因为没有 break 语句的控制, 将会发生一些预料不到的事情下面来看一个根据运算符号来进行算数的例子 Java Web 实战开发完全学习手册 var ysf='*'; var n1=6; var n2=8; switch(ysf) case '-': alert(n1-n2);break; case '*': alert(n1*n2); break; case '/': alert(n1/n2); break; default: alert(n1+n2); 读者可以试着把代码中的 break 语句去掉这时如果变量 ysf 值为 '-' 的话, 所有的 alert() 语句都会被顺序执行一遍因为没有 break 语句, 程序在执行完匹配的语句后, 所有后面的语句都会被执行, 并且不管是否匹配, 这可不是本例子想展示的效果注意代码中的比较条件, 读者可能已经看出来了,switch 只能对条件进行相等判断, 而不像 if 语句那样支持复杂的逻辑表达式循环语句除了选择语句外, 控制程序流程另一个重要的语句就是循环语句, 可以说只要有条件语句的地方, 基本上都会出现循环语句循环是程序设计语言中反复执行某些代码的一种计算机处理过程, 常见的有按照次数循环和按照条件循环循环语句是由循环体及循环的终止条件两部分组成的要使用循环语句时, 必须要确定循环体及条件 ( 布尔表达式 ) 两个重要因素, 亦即首要考虑的是要重复执行哪些语句, 要重复到什么时候为止下面介绍几种选择语句 1.for 循环语法如下 for( 初始化 ; 条件 ; 更新表达式 ) JavaScript 语句 ; 其中, 初始化参数指定循环的起始值条件是用于判断循环终止时的条件, 若满足条件, 则继续执行循环语句, 否则跳出循环更新表达式是定义循环变量在每次循环时怎样 122

35 变化三个条件之间必须用分号隔开 for 语句中的三个表达式都可以为空, 但分号不能少, 也就是说 for 可以这样写 : for(;;) JavaScript 语句 ; 这就相当于 : while(true) JavaScript 语句 ; 也就是死循环, 下面分析可选的三个表达式的含义例如, 改变 i 的值, 每循环一次, 更新表达式就执行一次, 直到循环结束, 如下面的小例子实现求 1 到 100 的和第 3章 JavaScript 基 var sum; for(var i=1; i<=100; i++) sum+=i; 础 2.for in 循环语法 : for(var in object) JavaScript 语句 ; for...in 循环语句只能用于对象 for...in 语句可以通过循环将对象所有的属性显示出来, 例如 : var n = 3; var s = ''; for(var i in window) n--; s += i+":"+window[i]+'\n'; if(n==0) break; alert(s); 代码显示了 window 对象的前 3 个属性的名称和值, 运行效果如图 3-37 所示 123

36 图 3-37 for in 循环的应用 Java Web 实战开发完全学习手册 for...in 与 for 和 while 语句相比, 使用频率很低, 而且 for...in 语句的效率也不高, 所以在开发时除非必要, 否则最好不使用 for...in 语句 3.while 循环 while 循环是比较容易理解的一种循环控制语句, 即当条件的值为真时, 就重复执行 JavaScript 语句相反, 当条件为假时, 就退出循环语法如下 while( 条件 ) JavaScript 语句 ; 4.do while 语句 do while 和 while 循环非常相似, 区别在于表达式的值是在每次循环结束时检查而不是开始时和正规的 while 循环主要的区别是 do while 的循环语句保证会执行一次 ( 表达式的真值在每次循环结束后检查 ), 然而在正规的 while 循环中就不一定了 ( 表达式真值在循环开始时检查, 如果一开始就为 false 则整个循环立即终止 ) 语法 : do JavaScript 语句 ; while( 条件 ) 5.break 语句 break 语句可用于跳出循环 break 语句跳出循环后, 会继续执行该循环之后的代码 ( 如果有的话 ), 例如 : for (i=0;i<6;i++) 124

37 if (i==4) break; x=x + "The number is " + i + "<br>"; 6.continue 语句 continue 语句和 break 语句相似所不同的是它不是退出一个循环, 而是开始循环的一次新迭代 continue 语句只能用在 while 语句 do while 语句 for 语句或 for in 语句的循环体内, 在其他地方使用都会引起错误! 代码如下 for(var i=1;i<=10;i++) if(i==5) continue; document.write(i); // 输出结果 : 当 i=5 时, 直接跳出本次 for 循环, 继续下次循环 7. 条件表达式语法如下第 3章 JavaScript 基础变量 = 布尔值? 值 1 : 值 2 除了 if 和 switch 两种条件语句外,JavaScript 还提供了一种条件表达式, 用来完成简单的 if 操作, 即如果布尔值为真, 那么将问号后的值 1 赋给变量, 否则, 将冒号后的值 2 赋给变量值 1 或值 2 可以是表达式产生的结果, 例如 : alert(1? 1 :0); 运行结果如图 3-38 所示图 3-38 使用条件表达式 125

38 注意, 条件表达式的分支中并不能执行非赋值的语句, 也就是说在问号或者冒号后面如果是语句的话, 这个语句必须产生一个值, 否则, 程序将出现语法错误 3.4 函数的定义与调用函数是由事件驱动的, 或当它被调用时执行的可重复使用的代码块函数过程中的这些语句用于完成某些有意义的工作通常是处理文本, 控制输入或计算数值通过在程序代码中引入函数名称和所需的参数, 可在该程序中执行 ( 或称调用 ) 该函数函数的定义 Java Web 实战开发完全学习手册函数就是包裹在花括号中的代码块, 前面使用了关键词 function, 语法如下 function functionname() // 这里是要执行的代码函数的调用当调用该函数时, 会执行函数内的代码, 可以在某事件发生时直接调用函数 ( 比如当用户点击按钮时 ), 并且可由 JavaScript 在任何位置进行调用 JavaScript 对大小写敏感关键词 function 必须是小写的, 并且必须以与函数名称相同的大小写来调用函数在调用函数时, 可以向其传递值, 这些值被称为参数, 这些参数可以在函数中使用此外, 还可以发送任意多的参数, 由逗号 (,) 分隔, 例如 : myfunction(argument1,argument2) 当用户声明函数时, 请把参数作为变量来声明, 例如 : function myfunction(var1,var2) // 这里是要执行的代码变量和参数必须以一致的顺序出现第一个变量就是第一个被传递的参数的给定值, 以此类推, 例如 : <button onclick="myfunction('jack','ceo')">click Me!</button> <script> 126

39 function myfunction(name,job) alert("welcome " + name + ", the " + job); </script> 上面的函数会当按钮被单击时提示 "Welcome Jack, the CEO" 函数很灵活, 可以使用不同的参数来调用该函数, 这样就会给出不同的消息, 例如 : <button onclick="myfunction('john','nurse')">click Me!</button> <button onclick="myfunction('lilei','builder')"> Click Me!</button> 3.5 事件处理第 3章事件是 JavaScript 应用跳动的心脏, 当用户与浏览器中 Web 页面进行某些类型的交互时, 事件就发生了事件可能是用户在某些内容上的点击鼠标经过某个特定元素或按下键盘上的某些按键事件还可能是 Web 浏览器中发生的事情, 比如说, 某个 Web 页面加载完成, 或者是用户滚动窗口或改变窗口大小通过使用 JavaScript, 用户可以监听特定事件的发生, 并规定让某些事件发生以对这些事件做出响应 JavaScript 基础事件处理程序事件就是用户或浏览器自身执行的某种动作, 如 click mouseover, 都是事件的名字而相应某个事件的函数就叫事件处理程序 ( 或事件侦听器 ) 1.DOM0 级事件处理程序将一个函数的返回值赋值给一个事件处理程序的属性, 例如 : var btn = document.getelementbyid("mybtn"); btn.onclick = funtion() alert(this.id); //"mybtn" 如果要删除事件, 则把对应的事件赋值为 null 即可, 如 btn.onclick = null 2.DOM2 级事件处理程序 DOM2 级事件定义的两个方法, 用于处理指定和删除事件处理程序的操作 : addeventlistener() 和 removeeventlistener() 所有 DOM 节点都包含这两个方法, 接受 3 个参数 : 处理事件名作为事件处理程序的函数和一个布尔值最后的布尔值参数,true: 表示在捕获阶段调用事件处理程序 ;false: 表示在冒泡阶段调用事件处理程序例如 : var btn = document.getelementbyid("mybtn"); btn.addeventlistener("click",funciton() alert(this.id); 127

40 ,false); 用 DOM2 级方法添加事件处理程序主要的好处是可以添加多个事件处理程序例如 : var btn = document.getelementbyid("mybtn"); btn.addeventlistener("click",funciton() alert(this.id);,false); btn.addeventlistener("click",funciton() alert("hello World!");,false); Java Web 实战开发完全学习手册这两个事件会按照顺序触发通过 addeventlistener() 添加的事件只能用 removeeventlistener() 移除移除时传入的参数需与添加时的参数一致, 也就是说匿名函数将无法移除 var btn = document.getelementbyid("mybtn"); var handler = function() alert(this.id); ; btn.addeventlistener("click", handler, false); btn.removeeventlistener("click", handler, false); 大多数情况下, 都是将事件处理程序添加到事件流的冒泡阶段, 以便兼容各种浏览器 firefox chrome safari opera 支持 DOM2 级事件处理程序 3.IE 事件处理程序 IE 实现了与 DOM 中类似的两个方法 :attachevent() 和 detachevent() 这两个方法都接受两个参数 : 事件处理程序名称和事件处理程序函数由于 IE 只支持时间冒泡, 所以, 通过 attachevent() 添加的事件处理程序都会被添加到冒泡阶段, 例如 : var btn = document.getelementbyid("mybtn"); btn.attachevent("onclick", function() alert("clicked"); ) 注意,attachEvent() 的第一个参数是 onclick 而非 click IE 的 attachevent() 与 DOM0 的 addeventlistener() 的主要区别是事件处理程序的作用域 DOM0 级方法, 事件处理程序会在所属元素的作用域内运行 ;attachevent() 方法, 事件处理程序会在全局作用域中运行, 因此,this 等于 window attachevent() 也可以为一个元素添加多个事件处理程序, 例如 : var btn = document.getelementbyid("mybtn"); btn.attachevent("onclick", function() alert("clicked"); ) btn.attachevent("onclick", function() alert("hello World!"); ) 128

41 与 DOM 方法不同的是, 这些事件处理程序不是以添加顺序执行, 而是以相反的方向执行 detachevent() 的用法与 removeeventlistener() 的用法相同 JavaScript 常用事件 JavaScript 常用事件包括 onclick 事件 onload 事件 onscroll 事件 onblur 事件 onfocus 事件 onchange 事件 onsubmit 事件 onkeydown 事件 settimeout 事件和 cleartimeout 事件等 1. 常用事件 (1)onclick 事件鼠标单击事件, 通常在下列基本对象中产生 : button( 按钮对象 ) checkbox( 复选框 ) 或 ( 检查列表框 ) radio( 单选钮 ) reset buttons ( 重置按钮 ) submit button( 提交按钮 ) 例如, 可通过下列按钮激活 change() 文件第 3章 JavaScript 基 <Form> <Input type="button" Value="" onclick="change()"> </Form> 础 (2)onLoad 事件页面加载事件 : 当页面加载时, 自动调用函数 ( 方法 ) 此方法只能写在 <body> 标签之中! (3)onScroll 事件窗口滚动事件 : 当页面滚动时调用函数此事件写在方法的外面, 且函数名 ( 方法名 ) 后不加括号! 例如 : window.onscroll=move; (4)onBlur 事件失去焦点事件 : 当光标离开文本框是触发调用函数当 text 对象或 textarea 对象及 select 对象不再拥有焦点, 而退到后台时, 引发该文件, 它与 onfocus 事件是一个对应的关系 (5)onFocus 事件光标进入文本框时触发调用函数当用户单击 Text 或 textarea 以及 select 对象时, 产生该事件 (6)onChange 事件 129

42 文本框的 value 值发生改变时调用函数当利用 text 或 textarea 元素输入字符值改变时发该事件, 同时当在 select 表格项中一个选项状态改变后也会引发该事件, 例如 : <Form> <Input type="text" name="test" value="test" oncharge="check('this.test)"> </Form> (7)onSubmit 事件属于 <form> 表单元素, 写在 <form> 表单标签内语法如下 onsubmit="return 函数名 ()" Java Web 实战开发完全学习手册 (8)onKeyDown 事件在输入框中按下键盘上的任何一个键时, 都会触发事件, 调用函数此事件写在方法的外面, 且函数名 ( 方法名 ) 后不加括号! 例如 : document.onkeydown= 函数名 () (9)setTimeout 事件此事件可以以一定的毫秒数定时执行一个已经定义好的函数语法如下 settimeout(" 函数名 ()", 间隔时间 ( 以毫秒为单位 )); (10)clearTimeout( 对象 ) 清除已设置的 settimeout 对象 (11)onMouseOver: 鼠标移动到某对象范围的上方时, 触发事件调用函数在同一个区域之内, 无论怎样移动都只触发一次函数 (12)onMouseOut: 鼠标离开某对象范围时, 触发事件调用函数 (13)onMouseMove: 鼠标移动到某对象范围的上方时, 触发事件调用函数在同一个区域之内, 只要移动一次就触发一次事件调用一次函数 (14)onmouseup: 当鼠标松开时触发 (15)onmousedown: 当鼠标按下键时触发 130

43 2.document 对象常用的方法 (1)document.getElementById() 通过 ID 获得唯一的一个 HTML 元素, 没有 ID 时, 通过 name 查找匹配 (2)document.getElementByName() 获取相同名称的一组元素, 主要用于表单中的复选框 3.Date 对象常用方法 Var a=new Date(); // 创建 a 为一个新的日期对象 y=a.getyear(); //y 的值为从对象 a 中获取年份值, 两位数年份 y1=a.getfullyear(); // 获取全年份数, 四位数年份 m=a.getmonth(); // 获取月份值 (0~11) d=a.getdate(); // 获取日期值 d1=a.getday(); // 获取当前星期值 h=a.gethours(); // 获取当前小时数 m1=a.getminutes(); // 获取当前分钟数 s=a.getseconds(); // 获取当前秒钟数 3.6 常用对象第 3章 JavaScript 基础 JavaScript 常用对象包括 : 数组 (Array) 对象字符串 (String) 对象数学 (Math) 对象及日期 (Date) 对象等数组对象数组对象用于在单个的变量中存储多个值 1. 新建数组 var Obj = new Array();// 新建一个长度为零的数组 var Obj = new Array([size]);// 新建一个指定长度 n 的数组 var Obj = new Array([element0[, element1[,...[, elementn]]]]);// 新建一个指定长度的数组, 并赋值数组中的序列号是从 0 开始计算如果要引用数组中的元素, 则使用 : 数组变量 [i] = 值 ; 变量名 = 数组变量 [i] 2. 动态数组 JavaScript 数组的长度不是固定不变的, 如果要增加数组的长度, 只要直接赋值一个新元素就可以了, 例如 : 数组变量 [ 数组变量. 长度 ] = 值 ; 131

44 Java Web 实战开发完全学习手册 3. 数组常用方法 concat(array1,arrayn): 将两个或两个以上的数组值连接起来, 合并后返回结果 join(string): 将数组中元素合并为字符串,string 为分隔符如省略参数则直接合并, 不再分隔 pop(): 移除数组中的最后一个元素并返回该元素 push(value): 在数组的末尾加上一个或多个元素, 并且返回新的数组长度值 reverse(): 颠倒数组中元素的顺序, 反向排列 shift(): 移除数组中的第一个元素并返回该元素 sort(compare Function): 在未指定排序号的情况下, 按照元素的字母顺序排列, 如果不是字符串类型, 则转换成字符串再排序, 返回排序后的数组 splice(): 从一个数组中移除一个或多个元素, 如果必要, 在所移除元素的位置上插入新元素, 返回所移除的元素 tosource(): 显示对象的源代码 tostring(): 将数组所有元素返回一个字符串, 其间用逗号分隔 unshift(value): 为数组的开始部分加上一个或多个元素, 并且返回该数组的新长度 string 对象 String 对象用于处理文本 ( 字符串 ) 字符串对象的属性如下 Length: 返回字符串的字符长度字符串对象的方法如表 3-10 所示 big() blink() bold() fontcolor(color) fontsize(size) link(url) small() strike() sub() sup() charat(index) concat(string2) indexof(searchstring startindex) lastlndexof(searchstring startindex) 表 3-10 字符串对象的方法与含义方法含义把字符串中的文本变成大字体 (<BIG>) 把字符串中的文本变成闪烁字体 (<BLINK>) 把字符串中的文本变成黑字体 (<B>) 设置字符串中文本的颜色 (<FONT) 把字符串中的文本变成指定大小 (<FONTSIZE=>) 用来把字符串转换 -HTML 链接标记中 (<A HREF=>) 把字符串中的文本变成小字体 (<SMALL>) 把字符串中的文本变成划掉字体 (<STRIKE>) 把字符串中的文本变成下标 (subscript) 字体 (<SUB>) 把字符串中的文本变成上标 (superscript) 字体 (<SUP>) 返回指定索引处的字符连接两条或多条字符串返回字符串中第一个出现指定字符串的位置返回字符串中最后一个出现指定字符串的位置 132

45 slice(startindex, endindex) split(delimiter) substr(startindex, length) substring(startindex, endindex) tolowercase() touppercase() 方法含义续表将部分字符抽出并在新的字符串中返回剩余部分将字符串分配为数组从 startindex 开始取 length 个字符取 startindex 和 endindex 之间的字符, 不包括 endindex 把字符串中的文本变成小写把字符串中的文本变成大写数学对象数学对象 Math 用于执行数学任务数学对象属性如表 3-11 所示表 3-11 数学对象的属性与含义属性含义 E 欧拉常量, 自然对数的底 ( 约等于 2.718) LN2 2 的自然对数 ( 约等于 0.693) LN10 10 的自然对数 ( 约等于 2.302) LOG2E 以 2 为底的 e 的对数.( 约等于 1.442) LOG10E 以 10 为底的 e 的对数 ( 约等于 0.434) PI 的值 ( 约等于 ) 第 3章 JavaScript 基础数学对象的方法如表 3-12 所示表 3-12 数学对象的方法与含义属性含义 SQRT(1/2) 1/2(0.5) 的平方根 ( 即 l 除以 2 的平方根, 约等于 o.707) SQRT(2) 2 的平方根 ( 约等于 1.414) abs(x) 返回数字的绝对值 acos(x) 返回数字的反余弦值 asin(x) 返回数字的反正弦值 atan(x) 返回位于 -PI/2 和 PI/2 的反正切值 ceil(x) 返回比 x 大的最小整数 cos(x) 返回一个数字的余弦值 exp(x) 返回 E^x 值 floor(x) 返回比 x 小的最大整数 log(x) 返回底数为 E 的自然对数 max(x,y) 返回 x 和 y 之间较大的数 min(x,y) 返回 x 和 y 之间较小的数 pow(x,y) 返回 y^x 的值 random() 返回位于 0 到 1 之间的随机函数 round(x) 四舍五入后取整 sin(x) 返回数字的正弦值 sqrt(x) 返回数字的平方根 tan(x) 返回一个角度的正切值 133

46 3.6.4 date 对象 Date 对象用于处理日期和时间日期对象的主要方法如表 3-13 所示 Java Web 实战开发完全学习手册表 3-13 日期对象的方法与含义属性含义 getday() 返回一周中的第几天 (0~6) etyear() getfullyear() 返回年份,2000 年以前为 2 位,2000( 包含 ) 以后为 4 位返回完整的 4 位年份数 getmonth() 返回月份数 (0~11) getdate() 返回日 (1~31) gethours() 返回小时数 (0~23) getminutes() 返回分钟 (0~59) getseconds() 返回秒数 (0~59) getmilliseconds() 返回毫秒 (0~999) gettime() setyear(yearint) setfullyear(yearint) 返回从 1970 年 1 月 1 号 0:0:0 到现在一共花去的毫秒数设置年份,2 位数或 4 位数设置年份,4 位数 setmonth(monthint) 设置月份 (0~11) setdate(dateint) 设置日 (1~31) sethours(hourint) 设置小时数 (0~23) setminutes(minint) 设置分钟数 (0~59) setseconds(secint) 设置秒数 (0~59) setmilliseconds(milliint) 设置毫秒 (0~999) settime(timeint) tosource() 设置从 1970 年 1 月 1 日开始的时间, 毫秒数显示对象的源代码 3.7 dom 技术 DOM 可被 JavaScript 用来读取改变 HTML XHTML 及 XML 文档通过 JavaScript, 用户可以重构整个 HTML 文档可以添加移除改变或重排页面上的项目要改变页面的某个东西,JavaScript 就需要对 HTML 文档中所有元素进行访问的入口, 这个入口, 连同对 HTML 元素进行添加移动改变或移除的方法和属性, 都是通过文档对象模型来获得的 (DOM) dom 的分层结构 DOM 由核心 XML 及 HTML 三部分构成, 其级别分别为 DOM Level 1/2/3 核心 134

47 DOM(Core DOM) 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对 XML 文档的对象 HTML DOM 定义了一套标准的针对 HTML 文档的对象 HTML 文档中的每个成分都是一个节点 DOM 是这样规定的整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点节点彼此都有等级关系 HTML 文档中的所有节点组成了一个文档树 ( 或节点树 ) HTML 文档中的每个元素属性文本等都代表着树中的一个节点树起始于文档节点, 并由此继续伸出枝条, 直到处于这棵树最低级别的所有文本节点为止例如 : 第 3章 JavaScript 基 <html> <head> <title>dom </title> </head> <body> <h1>dom Study</h1> <p>hello World!</p> </body> </html> 础上面所有的节点彼此间都存在关系, 除文档节点之外的每个节点都有父节点如 <head> 和 <body> 的父节点是 <html> 节点, 文本节点 "Hello World!" 的父节点是 <p> 节点大部分元素节点都有子节点比如,<head> 节点有一个子节点 :<title> 节点,<title> 节点也有一个子节点 : 文本节点 "DOM Study" 当节点分享同一个父节点时, 它们就是同级节点, 如 <h1> 和 <p> 是同级节点, 因为它们的父节点均是 <body> 节点节点也可以拥有后代, 后代指某个节点的所有子节点, 或者这些子节点的子节点, 以此类推比如说, 所有的文本节点都是 <html> 节点的后代, 而第一个文本节点是 <head> 节点的后代节点也可以拥有先辈先辈是某个节点的父节点, 或者父节点的父节点, 以此类推比如, 所有的文本节点都可把 <html> 节点作为先辈节点查找并访问节点可通过若干种方法来查找希望操作的元素 1. 通过使用 getelementbyid() 和 getelementsbytagname() 方法 getelementbyid() 和 getelementsbytagname() 这两种方法, 可查找整个 HTML 文档中的任何 HTML 元素, 这两种方法会忽略文档的结构假如希望查找文档中所有的 <p> 元素, getelementsbytagname() 会把它们全部找到, 不管 <p> 元素处于文档中的哪个层次同时, 135

48 getelementbyid() 方法也会返回正确的元素, 不论它被隐藏在文档结构中的什么位置当然这两种方法会提供任何所需要的 HTML 元素, 不论它们在文档中所处的位置! getelementbyid() 可通过指定的 ID 来返回元素 getelementbyid() 语法如下 document.getelementbyid("id"); getelementbyid() 无法工作在 XML 中在 XML 文档中, 用户必须通过拥有类型 ID 的属性来进行搜索, 而此类型必须在 XML DTD 中进行声明 Java Web 实战开发完全学习手册 getelementsbytagname() 方法会使用指定的标签名返回所有的元素 ( 作为一个节点列表 ), 这些元素是用户在使用此方法时所处元素的后代 getelementsbytagname() 可被用于任何的 HTML 元素 getelementsbytagname() 语法如下 document.getelementsbytagname(" 标签名称 "); 或者 document.getelementbyid('id').getelementsbytagname(" 标签名称 "); 下面代码会返回文档中所有 <p> 元素的一个节点列表 document.getelementsbytagname("p") 下面的代码会返回所有 <p> 元素的一个节点列表, 且这些 <p> 元素必须是 ID 为 "maindiv" 的元素的后代 document.getelementbyid('maindiv').getelementsbytagname("p") 2. 通过使用一个元素节点的 parentnode firstchild 以及 lastchild 属性 parentnode firstchild 及 lastchild 这三个属性可遵循文档的结构, 在文档中进行短距离的旅行请看下面这个 HTML 片段 <table> <tr> <td>john</td> <td>lilei</td> <td>hanmeimei</td> </tr> </table> 在上面的 HTML 代码中, 第一个 <td> 是 <tr> 元素的首个子元素 (firstchild), 而最后一个 <td> 是 <tr> 元素的最后一个子元素 (lastchild) 此外,<tr> 是每个 <td> 元素的父节点 (parentnode) 对 firstchild 最普遍的用法是访问某个元素的文本 var x=[a paragraph]; var text=x.firstchild.nodevalue; 136

49 parentnode 属性常被用来改变文档的结构假设您希望从文档中删除带有 Id 为 "maindiv" 的节点 var x=document.getelementbyid("maindiv"); x.parentnode.removechild(x); 首先, 用户需要找到带有指定 ID 的节点, 然后移至其父节点并执行 removechild() 方法 3. 对特殊节点的访问有两种特殊的文档属性可用来访问根节点,document.documentElement 和 document.body 第一个属性可返回存在于 XML 及 HTML 文档中的文档根节点第二个属性是对 HTML 页面的特殊扩展, 提供了对 <body> 标签的直接访问 HTML DOM 节点信息如下 nodename nodevalue 及 nodetype 包含有关于节点的信息每个节点都拥有包含着关于节点某些信息的属性, 这些属性如下 nodename( 节点名称 ) nodevalue( 节点值 ) nodetype( 节点类型 ) nodename nodename 属性含有某个节点的名称元素节点的 nodename 是标签名称属性节点的 nodename 是属性名称文本节点的 nodename 永远是 #text 文档节点的 nodename 永远是 #document 第 3章 JavaScript 基础 nodename 所包含的 XML 元素的标签名称永远是大写的 nodevalue 对于文本节点,nodeValue 属性包含文本对于属性节点,nodeValue 属性包含属性值 nodevalue 属性对于文档节点和元素节点是不可用的 nodetype nodetype 属性可返回节点的类型最重要的节点类型如下元素类型节点类型元素 1 属性 2 文本 3 注释 8 文档 9 137

50 下面通过一个例子向读者展示当一个用户在文档中点击时,HTML 文档的背景颜色如何被改变 Java Web 实战开发完全学习手册 <html> <head> <script type="text/javascript"> function ChangeColor() document.body.bgcolor="red" </script> </head> <body onclick="changecolor()"> Click Me! </body> </html> 图 3-39 图 3-40 分别展示了以上例子页面加载后的效果及单击页面后的效果图 3-39 页面加载后的效果图 3-40 单击页面后的效果 138

51 3.8 with 语句 with 语句并不是用来控制程序流程的语句, 其作用是简化代码的编写 with 语句需要一个对象作为它的参数当 with 语句体内的代码都需要引用这个对象时,with 的作用就显示出来了语法如下 with(object) 语句第 3章例如 : // 不使用 with 语句 alert(math.pow(math.abs(-5), 2)); // 使用 with 语句 with(math) alert(pow(abs(-5), 2)); JavaScript 基础上面两段代码具有相同的效果, 可以看到, 当 with 语句体内的引用越多时, 效果越明显, 但读者要明白, 这只是代码编写上的一种变通, 如果频繁地使用 with 语句, 将导致程序整体性能的降低 3.9 异常控制语句虽然是脚本语言, 但作为一种使用频率很高并且能够创建出大型应用的便捷脚本语言,JavaScript 提供了目前主流编程语言都有的异常控制功能异常控制可以帮助开发者预防那些可能出现的错误, 例如, 使用未定义的变量或在循环语句中导致循环变量变成非数值从而引发程序错误等一旦开发者捕获了这些错误, 就可以做出一些处理, 防止这些错误中断程序或导致其他不好的用户体验, 例如, 可以弹出提示框告诉用户什么地方出现了错误对用户来说, 这就是人性化异常的产生程序中的任何错误都会引发异常, 在 JavaScript 版本 3 中错误地被分为很多类型, 常见的错误包括语法错误类型错误和对象引用错误等 139

52 1. 语法错误语法错误是初学者最容易犯的一种错误常见的错误方式如表 3-14 所示表 3-14 常见的语法错误错误代码错误分析正确代码 int num = 1; JavaScript 中声明变量不区分类型 var num = 1; Function x(int a) 关键字大小写错误, 参数无类型 function x(a) for(i=0; i++) 缺少判断条件 for(i=0; i<1; i++) 语法错误很常见但也最容易避免, 只要在编写代码时仔细检查, 或者使用有提示功能的开发工具就可以最大限度地避免语法错误的发生 2. 类型错误类型错误通常都和对象有关如果对基本类型的变量使用对象操作符 new: Java Web 实战开发完全学习手册 alert(new 1); 系统就会抛出一个严重的类型异常, 如图 3-41 所示图 3-41 FF3 中的异常提示错误提示是说 1 不是一个构造函数, 这种错误通常是不会出现的, 当然前提是在学习过对象的概念以后 3. 对象引用错误这个错误也是由对象引起的, 通常是使用了对象不存在的属性简单来说, 就是程序中使用了一个不存在的东西, 例如, 在函数中使用了一个未声明的变量在 JavaScript 中, 有些其他语言中的异常是不会出现的, 例如, 除数为 0 时将得到一个 Infinity 的值, 而不是抛出错误不同类型的数据之间运算也不会报错, 例如, 数值和字符做运算, 将得到一个 NaN 的值异常的捕获使用 try catch 语句可以对异常进行捕获, 捕获异常可以防止错误对 try catch 语句外的其他流程造成影响, 它就像个家长一样, 随时观察着自己的孩子语法如下 try JavaScript 语句 ; 140

53 catch(e) 异常处理 Finally 异常处理未使用异常捕获时, 一旦程序发生错误, 程序流就会被中断, 之后的代码就不会被执行了, 例如 : var x = ""; x += " 进入 ->"; var j = i; //i 是一个未定义的变量, 发生异常, 中断程序流 x += " 永远不会执行的语句 ->"; 第 3章 // 程序流被中断, 未弹出提示框 alert(x); 遇见这种情况的最好解决办法就是通过增加代码间的 alert() 语句, 这样通过确定哪个 alert() 语句没有执行时, 便可以快速地定位错误代码, 例如 : JavaScript 基础 var x = ""; x += " 进入 ->"; alert(" 跟踪点 1"); var j = i; //i 是一个未定义的变量, 发生异常, 中断程序流 alert(" 跟踪点 2"); x += " 永远不会执行的语句 ->"; // 程序流被中断, 未弹出提示框 alert(x); 执行的结果是只有跟踪点 1 可以出现在提示框中, 而之后就发生了异常使用 try catch 语句后不但可以防止程序流被中断, 还能得到错误的具体信息, 例如 : var x = ""; try x += " 进入 ->"; var j = i; //i 是一个未定义的变量, 发生异常 x += " 永远不会执行的语句 ->"; catch(e) x += " 异常处理 1->"; // 未被捕获的异常, 可以解除下面的注释来观察效果 //var j = i; finally x += " 异常处理 2"; 141

54 // 程序流未被中断, 弹出提示框 alert(x); 运行结果如图 3-42 所示 Java Web 实战开发完全学习手册图 3-42 错误提示使用 try catch 语句对错误代码进行监控后会捕获异常, 错误就只会影响 try 后面的大括号内的语句执行, 并没有影响 try catch 语句外的 alert() 语句执行, 所以, 浏览器弹出了提示框从图 3-41 中可以看到异常出现后 try...catch 语句的执行顺序 (1) 在错误语句之后的语句是不会被执行的 (2) 抛出的错误被 try catch 语句捕获后进入 catch 子句,catch 子句可以获取发生异常的具体信息例如 : //e 是一个错误对象, 当异常发生时系统会自动将一个错误对象当作 catch 子句的参数传递过来 try //... catch(e) // 显示错误信息 alert(e.message) (3) 无论异常是否发生, 最后 finally 子句都会被执行, 但它是可以省略的, 就像 if 语句中的 else 子句也不是必需的虽然 catch 语句本身是用来捕获异常的, 但 catch 子句中包含的代码同样可能发生异常, 这些异常需要进行再次捕获, 否则将影响外层的异常捕获, 例如, 代码中 catch 子句中注释的语句部分, 就需要在 catch 子句中嵌套 try catch 语句 142

55 3.10 本章小结本章主要介绍了 Javascript 的相关知识分别从 JavaScript 的基础 ( 数据类型常量变量运算符 ) JavaScript 的流程控制语句函数的定义与调用循环语句和 JavaScript 的常用事件和对象, 以及 dom 和异常的相关知识来介绍, 使读者了解了 JavaScript 基本结构和 JavaScript 脚本的执行原理 3.11 上机练习第 3章 1. 使用嵌套循环打印一个由组成的矩形, 矩形有 5 行, 每行 9 个提示 : 外层循环控制打印行数内层循环控制打印列数 2. 使用嵌套循环打印 9 9 乘法表 3. 写出一个冒泡排序算法 JavaScript 基础 143

展开

Microsoft Word - 01.DOC

Microsoft Word - 01.DOC 第 1 章 JavaScript 简介 JavaScript 是 NetScape 公司为 Navigator 浏览器开发的, 是写在 HTML 文件中的一种脚本语言, 能实现网页内容的交互显示当用户在客户端显示该网页时, 浏览器就会执行 JavaScript 程序, 用户通过交互式的