欢迎光临
免费的PDF电子书下载网站
当前位置：网志栈 > 计算机/网络 > JavaScript与jQuery网页前端开发与设计 PDF下载

JavaScript与jQuery网页前端开发与设计 PDF下载

2020-12-21 分类：计算机/网络 阅读(1051)

编辑推荐

知识点全面，体系结构清晰，重点突出、文字准确，内容组织循序渐进，并有书中案例都是以*标准为基础，介绍JavaScript与jQuery的*发展，且在实际开发工作中经常碰到的问题在案例中都有体现，更贴近实用 ；

内容简介

本书从零开始讲解JavaScript与jQuery技术，全书以项目为驱动，循序渐进、案例丰富。全书共分13章，主要内容包括4个部分。*部分是概述篇，即第1章，内容主要有JavaScript与jQuery的简介、发展史和特点，以及开发工具的选择。第二部分是JavaScript技术篇，包括第2～5章的内容。这4章循序渐进地介绍了JavaScript入门、JavaScript数据类型与运算符、JavaScript语句与函数、JavaScript DOM和BOM。第三部分是jQuery技术篇，包括第6～12章的内容。这7章由浅入深地介绍了jQuery入门、jQuery选择器与过滤器、jQuery事件、jQuery特效、jQuery HTML DOM、jQuery遍历、jQuery AJAX技术。第四部分是综合篇，即第13章，其中提供了3个完整的项目实例，包括图片轮播、手动切换图片、AJAX天气预报查询功能的设计与实现，综合应用了全书所学知识，让读者所学即所用。 　　本书可作为高校计算机相关专业JavaScript和jQuery课程的实践教材，也可作为学习JavaScript和jQuery开发的自学教材或培训教材。

作者简介

暂无

JavaScript与jQuery网页前端开发与设计 PDF下载

目录

第1章 ； 绪论... 3
1.1 ； JavaScript概述... 3

  
   1.1.1
   ； JavaScript简介... 3

  
   1.1.2
   ； JavaScript起源... 3

  
   1.1.3
   ； JavaScript和Java. 3

  
   1.1.4
   ； JavaScript的特点... 4
1.2 ； jQuery概述... 4

  
   1.2.1
   ； jQuery简介... 4

  
   1.2.2
   ； jQuery的发展史... 4

  
   1.2.3
   ； jQuery的特点... 5

  
   1.2.4
   ； jQuery的版本比较... 5
1.3 ； Web开发工具... 6

  
   1.3.1 ； A
  dobe Dreamweaver 6

  
   1.3.2
   ； Sublime Text 7

  
   1.3.3
   ； Notepad . 7

  
   1.3.4
   ； EditPlus 7
1.4 ； 本章小结... 8
习题1. 9
第二部分 ； JavaScript技术篇
第2章 ； ；JavaScript入门... 13
2.1 ； JavaScript的实现... 13
2.2 ； JavaScript的使用... 13

  
   2.2.1
   ； 内部JavaScript 14

  
   2.2.2
   ； 外部JavaScript 15
2.3 ； JavaScript的语法... 16

  
   2.3.1
   ； JavaScript中的大小写... 16

  
   2.3.2
   ； JavaScript中的分号... 16

  
   2.3.3
   ； JavaScript中的注释.............................................................................. 16

  
   2.3.4
   ； JavaScript中的代码块... 17
2.4 ； JavaScript变量... 17

  
   2.4.1
   ； 变量的声明... 17

  
   2.4.2
   ； 变量的命名规范... 19

  
   2.4.3
   ； JavaScript关键字和保留字... 20
2.5 ； 本章小结... 20
习题2. 20
第3章 ； ；JavaScript数据类型与运算符... 22
3.1 ； JavaScript基本数据类型... 22

  
   3.1.1
   ； ；Undefined类型... 22

  
   3.1.2
   ； Null类型... 24

  
   3.1.3
   ； String类型... 25

  
   3.1.4
   ； Number类型... 36

  
   3.1.5
   ； Boolean类型... 43
3.2 ； JavaScript对象类型... 44

  
   3.2.1
   ； 本地对象... 44

  
   3.2.2
   ； 内置对象... 54

  
   3.2.3
   ； 宿主对象... 57
3.3 ； JavaScript类型转换... 57

  
   3.3.1
   ； 转换成字符串... 57

  
   3.3.2
   ； 转换成数字... 59

  
   3.3.3
   ； 强制类型转换... 63
3.4 ； JavaScript运算符... 64

  
   3.4.1
   ； 赋值运算符... 64

  
   3.4.2
   ； 算术运算符... 65

  
   3.4.3
   ； 逻辑运算符... 66

  
   3.4.4
   ； 关系运算符... 70

  
   3.4.5
   ； 相等性运算符... 72

  
   3.4.6
   ； 条件运算符... 74
3.5 ； 本章小结... 74
习题3. 74
第4章 ； ；JavaScript语句与函数... 76
4.1 ； JavaScript条件语句... 76

  
   4.1.1
   ； 几种if语句... 76

  
   4.1.2
   ； switch语句... 78
4.2 ； JavaScript循环语句... 80

  
   4.2.1
   ； for循环... 80

  
   4.2.2
   ； for-in循环... 82

  
   4.2.3
   ； while循环... 83

  
   4.2.4
   ； do-while循环... 85

  
   4.2.5
   ； break和continue. 86
4.3 ； JavaScript函数... 88

  
   4.3.1
   ； 函数的基本结构... 88

  
   4.3.2
   ； 函数的调用... 88

  
   4.3.3
   ； 函数的返回值... 89
4.4 ； 本章小结... 91
习题4. 91
第5章 ； ；JavaScript DOM和BOM.. 92
5.1 ； 文档对象模型... 92

  
   5.1.1
   ； 查找HTML元素... 92

  
   5.1.2
   ； DOM HTML. 95

  
   5.1.3
   ； DOM CSS. 98

  
   5.1.4
   ； DOM事件... 100

  
   5.1.5
   ； DOM节点... 102
5.2 ； 浏览器对象模型... 106

  
   5.2.1
   ； Window对象... 106

  
   5.2.2
   ； Screen对象... 107

  
   5.2.3
   ； Location对象... 108

  
   5.2.4
   ； History对象... 109

  
   5.2.5
   ； Navigator对象... 110
5.3 ； 本章小结... 112
习题5. 112
第三部分 ； jQuery技术篇
第6章 ； ；jQuery入门... 115
6.1 ； jQuery的下载和使用... 115

  
   6.1.1
   ； jQuery的下载... 115

  
   6.1.2
   ； jQuery的使用... 116
6.2 ； jQuery的语法... 116

  
   6.2.1
   ； 基础语法结构... 116

  
   6.2.2
   ； 文档就绪函数... 116

  
   6.2.3
    jQuery名称冲突... 117
6.3  本章小结... 118
习题6. 119
第7章  jQuery选择器与过滤器... 120
7.1  jQuery选择器... 120

  
   7.1.1
    基础选择器... 120

  
   7.1.2
    属性选择器... 128

  
   7.1.3
    表单选择器... 129

  
   7.1.4
    层次选择器... 132

  
   7.1.5
    jQuery CSS选择器... 138
7.2  jQuery过滤器... 140

  
   7.2.1
    基础过滤器... 140

  
   7.2.2
    子元素过滤器... 147

  
   7.2.3
    内容过滤器... 155

  
   7.2.4
    可见性过滤器... 161
7.3  本章小结... 165
习题7. 165
第8章  jQuery事件... 166
8.1  jQuery事件概述... 166

  
   8.1.1
    事件的含义... 166

  
   8.1.2
    jQuery事件的语法格式... 166
8.2  常用jQuery事件... 167

  
   8.2.1
    文档/窗口事件... 167

  
   8.2.2
    键盘事件... 172

  
   8.2.3
    鼠标事件... 175

  
   8.2.4
    表单事件... 186
8.3  jQuery事件的绑定与解除... 193

  
   8.3.1
    jQuery事件的绑定... 193

  
   8.3.2
    jQuery事件的解除... 197

  
   8.3.3
    jQuery临时事件... 201
8.4  本章小结... 202
习题8. 203
第9章  jQuery特效... 204
9.1  jQuery隐藏和显示... 204

  
   9.1.1
    jQuery hide() 204

  
   9.1.2
    jQuery show() 205

  
   9.1.3
    jQuery toggle() 207
9.2  jQuery淡入和淡出... 208

  
   9.2.1
    jQuery fadeIn() 208

  
   9.2.2
    jQuery fadeOut() 209

  
   9.2.3
    jQuery fadeToggle() 211

  
   9.2.4
    jQuery fadeTo() 213
9.3  jQuery滑动... 216

  
   9.3.1
    jQuery slideDown() 216

  
   9.3.2
    jQuery slideUp() 216

  
   9.3.3
    jQuery slideToggle() 219
9.4  jQuery动画... 220

  
   9.4.1
    改变元素的基本属性... 221

  
   9.4.2
    改变元素的位置... 223

  
   9.4.3
    动画队列... 225
9.5  jQuery方法链接... 227
9.6  jQuery停止动画... 229
9.7  本章小结... 232
习题9. 232
第10章  jQuery HTML DOM.. 233
10.1  jQuery获取和设置... 233

  
   10.1.1
    jQuery text() 233

  
   10.1.2
    jQuery html() 236

  
   10.1.3
    jQuery val() 238

  
   10.1.4
    jQuery attr() 239

  
   10.1.5
    jQuery css() 241
10.2  jQuery添加... 244

  
   10.2.1
    jQuery append()和prepend() 244

  
   10.2.2
    jQuery after()和before() 248
10.3  jQuery删除... 251

  
   10.3.1
    jQuery remove() 251

  
   10.3.2
    jQuery empty() 253

  
   10.3.3
    jQuery removeAttr() 255
10.4  jQuery类属性... 256

  
   10.4.1
    jQuery addClass() 257

  
   10.4.2
    jQuery removeClass() 257

  
   10.4.3
    jQuery toggleClass() 259
10.5  jQuery尺寸... 261
10.6  本章小结... 264
习题10. 264
第11章  jQuery遍历... 265
11.1  HTML家族树简介... 265
11.2  jQuery后代遍历... 266

  
   11.2.1
    jQuery children() 266

  
   11.2.2
    jQuery find() 268
11.3  jQuery同胞遍历... 270

  
   11.3.1
    jQuery siblings() 270

  
   11.3.2
    jQuery next()、nextAll()和nextUntil() 272

  
   11.3.3
    jQuery prev()、prevAll()和prevUntil() 276
11.4  jQuery祖先遍历... 280

  
   11.4.1
    jQuery parent() 280

  
   11.4.2
    jQuery parents() 282

  
   11.4.3
    jQuery parentsUntil() 284
11.5  本章小结... 286
习题11. 286
第12章  jQuery AJAX技术... 288
12.1  jQuery AJAX简介... 288

  
   12.1.1
    什么是AJAX.. 288

  
   12.1.2
    jQuery 
   AJAX
  .. 288
12.2  jQuery AJAX常用方法... 289

  
   12.2.1
    jQuery AJAX load()方法... 289

  
   12.2.2
    jQuery AJAX get()方法... 293

  
   12.2.3
    jQuery AJAX post()方法... 295

  
   12.2.4
    jQuery AJAX ajax()方法... 298

  
   12.2.5
    jQuery AJAX更多方法介绍... 302
12.3  jQuery AJAX事件... 303
12.4  本章小结... 304
习题12. 305
第四部分  综合篇
第13章  综合应用设计实例... 309
13.1  jQuery图片轮播特效的设计与实现... 309

  
   13.1.1
    界面设计... 309

  
   13.1.2
    图片轮播特效的实现... 316

  
   13.1.3
    完整代码展示... 318
13.2  jQuery手动切换图片的设计与实现... 322

  
   13.2.1
    界面设计... 322

  
   13.2.2
    图片切换特效的实现... 325

  
   13.2.3
    完整代码展示... 327
13.3  jQuery AJAX天气预报查询的设计与实现... 329

  
   13.3.1
    准备工作... 330

  
   13.3.2
    界面设计... 334

  
   13.3.3
    天气预报查询的实现... 342

  
   13.3.4
    完整代码展示... 345
本章小结... 350
附录  课后习题参考答案... 351
参考文献..................................................................................................................... 362

前沿

JavaScript和HTML、CSS一起被称为“Web前端开发的三大技术”，该技术目前几乎被所有的主流浏览器支持，也应用于市面上绝大部分网站中。随着JavaScript的广泛使用，基于JavaScript的框架也层出不穷。jQuery是JavaScript框架中的优秀代表，也是目前网络上使用范围最广泛的JavaScript函数库。

本书从零开始讲解JavaScript与jQuery技术，全书以项目为驱动，循序渐进、案例丰富，既可作为JavaScript、jQuery初学者的入门教程，也可为具有一定Web前端基础的读者进一步学习提供参考。

全书分13章，主要内容包括以下4个部分。

第一部分是概述篇，即第1章，内容主要有JavaScript与jQuery的简介、发展史和特点，以及开发工具的选择。

第二部分是JavaScript技术篇，包括第2～5章的内容。这4章循序渐进地介绍了JavaScript入门、JavaScript数据类型与运算符、JavaScript语句与函数、JavaScript DOM和BOM。

第三部分是jQuery技术篇，包括第6～12章的内容。这7章由浅入深地介绍了jQuery入门、jQuery选择器与过滤器、jQuery事件、jQuery特效、jQuery HTML DOM、jQuery遍历、jQuery AJAX技术。

第四部分是综合篇，即第13章，其中提供了3个完整的项目实例，包括图片轮播、手动切换图片、AJAX天气预报查询功能的设计与实现，综合应用了全书所学知识，让读者所学即所用。

本书精选的相关例题共136个，均在浏览器中调试通过。考虑到旧版浏览器的兼容性，本书选用的jQuery版本为
1.12.3
，使用该版本的相关源代码允许向下兼容IE6～IE8、Opera 12.1x、Safari5.1等浏览器。

本书还提供了电子资源供读者下载，包括例题源代码、课后习题答案、教学PPT与教学大纲。

最后，在此郑重感谢清华大学出版社的魏江江主任为本书的出版所付出的辛勤劳动，特别感谢敬爱的周泉先生和任萱女士对本书的出版给予的倾力帮助，感谢家人和朋友们给予的关心和鼓励，同时也要感谢我的丈夫刘嵩先生多年来对我的工作的一贯支持。

愿本书能够对读者学习Web前端新技术有所帮助，并真诚地欢迎读者批评指正。希望能与读者朋友们共同学习成长，在浩瀚的技术之海不断前行。

 

作  者

2018年3月

免费在线读

JavaScript数据类型与运算符绪论本章主要内容是JavaScript数据类型与运算符，主要包括基本数据类型、对象、类型转换、运算符的用法。
本章是全书的绪论部分，主要介绍JavaScript、jQuery概述以及Web开发工具的选择。JavaScript和HTML、CSS一起被称为“Web前端开发的三大技术”，当今所有的浏览器都支持JavaScript，无须额外安装第三方插件；而jQuery是一个轻量级的跨平台JavaScript函数库，它化简了JavaScript代码的复杂度，其语法能让用户更方便地选取和操作HTML元素、处理各类事件、实现JavaScript特效与动画，并且能为不同类型的浏览器提供更便捷的API用于AJAX交互。
本章学习目标：
掌握JavaScript的基本数据类型与对象类型；
掌握JavaScript类型转换方法；
· 掌握JavaScript运算符的使用。了解JavaScript的概念与特点；
· 了解jQuery的概念与特点；
掌握任意一款Web开发工具。
13.1 JavaScript基本数据类型JavaScript概述
1.1.1 JavaScript简介JavaScript是一种轻量级的直译式编程语言，基于ECMAScript标准（注：一种由ECMA国际组织通过ECMA-262标准化的脚本程序语言）。通常在HTML网页中使用JavaScript为页面增加动态效果和功能。JavaScript和HTML、CSS一起被称为“Web前端开发的三大技术”，目前JavaScript已经广泛应用于Web开发，市面上绝大多数网页都使用了JavaScript代码，可以说当今所有的浏览器都支持JavaScript，无须额外安装第三方插件。
1.1.2 JavaScript起源JavaScript最早是在1995年由网景（Netscape）公司的BrendanEich用了十天时间开发出来的，用于当时的网景导航者（NetscapeNavigator）浏览器2.0版。最初这种脚本语言的官方名称为LiveScript，后来应用于网景导航者浏览器2.0B3版的时候正式更名为JavaScript。更名的原因是因为当时网景公司与Sun公司开展了合作，网景公司的管理层希望在他们的浏览器中增加对Java技术的支持。此名称容易让人误以为该脚本语言是和Java语言有关，但实际上该语言的语法风格与Scheme更为接近。

JavaScript数据类型与运算符绪论

本章主要内容是JavaScript数据类型与运算符，主要包括基本数据类型、对象、类型转换、运算符的用法。

本章是全书的绪论部分，主要介绍JavaScript、jQuery概述以及Web开发工具的选择。JavaScript和HTML、CSS一起被称为“Web前端开发的三大技术”，当今所有的浏览器都支持JavaScript，无须额外安装第三方插件；而jQuery是一个轻量级的跨平台JavaScript函数库，它化简了JavaScript代码的复杂度，其语法能让用户更方便地选取和操作HTML元素、处理各类事件、实现JavaScript特效与动画，并且能为不同类型的浏览器提供更便捷的API用于AJAX交互。

本章学习目标：

  • 掌握JavaScript的基本数据类型与对象类型；
  • 掌握JavaScript类型转换方法；
  • ·         掌握JavaScript运算符的使用。了解JavaScript的概念与特点；
  • ·         了解jQuery的概念与特点；
  • 掌握任意一款Web开发工具。

13.1  JavaScript基本数据类型JavaScript概述

1.1.1 JavaScript简介

JavaScript是一种轻量级的直译式编程语言，基于ECMAScript标准（注：一种由ECMA国际组织通过ECMA-262标准化的脚本程序语言）。通常在HTML网页中使用JavaScript为页面增加动态效果和功能。JavaScript和HTML、CSS一起被称为“Web前端开发的三大技术”，目前JavaScript已经广泛应用于Web开发，市面上绝大多数网页都使用了JavaScript代码，可以说当今所有的浏览器都支持JavaScript，无须额外安装第三方插件。

1.1.2  JavaScript起源

JavaScript最早是在1995年由网景（Netscape）公司的BrendanEich用了十天时间开发出来的，用于当时的网景导航者（NetscapeNavigator）浏览器2.0版。最初这种脚本语言的官方名称为LiveScript，后来应用于网景导航者浏览器2.0B3版的时候正式更名为JavaScript。更名的原因是因为当时网景公司与Sun公司开展了合作，网景公司的管理层希望在他们的浏览器中增加对Java技术的支持。此名称容易让人误以为该脚本语言是和Java语言有关，但实际上该语言的语法风格与Scheme更为接近。

1.1.3  JavaScript和Java

因为名称相近，JavaScript常被误以为和Java有关，但事实上它们无论从概念还是从设计都是毫无关联的两种语言。JavaScript是Netscape公司的BrendanEich发明的一种轻量级语言，主要应用于网页开发，无须事先编译；而Java是由Sun公司的JamesGosling发明的一种面向对象程序语言，根据应用方向又可分为J2SE（Java2标准版）、J2ME（Java2微型版）和J2EE（Java2企业版）3个版本，需要先编译再执行。JavaScript是为了让非程序开发者快速上手使用的语言，而Java是更高级、更复杂的一种面向专业程序开发者的语言，比JavaScript的难度大、应用范围更广。

1.1.4  JavaScript的特点

1．脚本语言

JavaScript是一种直译式的脚本语言，无须事先编译，可以在程序运行的过程中逐行解释使用。该语言适合非程序开发人员使用。

2．简单性

JavaScript具有非常简单的语法，其脚本程序面向非程序开发人员。HTML前端开发者都有能力为网页添加JavaScript片段。

3．弱类型

JavaScript无需定义变量的类型，所有变量的声明都可以用统一的类型关键词表示。在运行过程中，JavaScript会根据变量的值判断其实际类型。

4．跨平台性

JavaScript语言是一种Web程序开发语言，它只与浏览器的支持情况有关，与操作系统的平台类型无关。目前，JavaScript可以在无须安装第三方插件的情况下被大多数主流浏览器完全支持，因此JavaScript程序在编写后可以在不同类型的操作系统中运行，适用于个人计算机、笔记本式计算机、平板式计算机和手机等各类包含浏览器的设备。

5．大小写敏感

JavaScript语言是一种大小写敏感的语言，例如字母a和A会被认为是不同的内容。同样，在使用函数时也必须严格遵守大小写的要求使用正确的方法名称。

1.2  jQuery概述

1.2.1  jQuery简介

jQuery这个名称来源于JavaScript和Query（查询）的组合，是一个轻量级的跨平台JavaScript函数库，拥有MIT软件许可协议。目前，主流浏览器基本上都支持jQuery。jQuery秉承“write less,do more（写的更少，做的更多）”的核心理念，其语法能让用户更方便地选取和操作HTML元素、处理各类事件、实现JavaScript特效与动画，并且能为不同类型的浏览器提供更便捷的API用于AJAX交互。jQuery也能让开发者基于JavaScript函数库开发新的插件。jQuery通用性和可扩展性相结合，它的出现将改变人们对JavaScript的使用方式。

1.2.2  jQuery的发展史

jQuery最早是在2006年1月由一位美国的软件工程师John Resing在纽约BarCamp（注：一种国际研讨会网络，由参与者互相分享Web技术）上发布的，John Resing既是jQuery的创造者，也是jQuery JavaScript函数库的核心开发者。最初的jQuery 1.0版正式发布于2006年4月26日，经历多次升级，2017年3月发布的jQuery 3.2.1版为当前的最新版本。目前，jQuery由Timmy Willison所领导的开发团队负责进行维护。

截止到2015年，jQuery已成为网络上使用范围最广泛的JavaScript函数库。根据Libscore（注：一个在线JavaScript函数库收集统计平台，通过网络爬虫跟踪抓取流量排名最高的前一百万个网站上的JavaScript函数库并统计排名）的最新统计数据得出结论，目前流量排名最高的百万个网页中超过69%都在使用jQuery（如图1-1所示），其中比较著名的网站有百度、腾讯、淘宝、新浪、Twitter、eBay、Linkedln等。

 

图1-1  jQuery在最流行的百万个网站中的使用情况

（数据来源：Libscore，2017年10月4日）

1.2.3  jQuery的特点

1．轻量级封装

网页使用jQuery所需要引用的JS文件只有32KB左右，几乎不会影响页面的加载     速度。

2．化简JavaScript

jQuery的选择器化简了JavaScript查找DOM对象的代码复杂度，基本上只需要一行代码就可以查找各种HTML元素或更改指定元素的CSS样式。

3．兼容CSS3

兼容CSS3的选择器语法规则，可以根据元素的样式快速查找HTML元素。

4．跨浏览器支持

jQuery支持目前所有的主流浏览器，例如IE、Firefox、Safari、Opera、Chrome等，因此开发者不用担心浏览器的兼容性问题。

1.2.4  jQuery的版本比较

目前jQuery共有3种版本，解释如下。

  • ·         jQuery 1.x版本：该版本是使用最为广泛的jQuery版本，适用于绝大多数Web前端项目开发，兼容性较高。该版本未来不会再增加新的功能，官网只做BUG维护。其最终版为2016年5月发布的jQuery 1.12.4版。
  • ·         jQuery 2.x版本：

该版本与之前的1.x系列有一样的API，但是不支持IE6～IE8，因此使用人数相对较少。该版本未来同样不会再增加新的功能，官网只做BUG维护。其最终版为2016年5月发布的jQuery 2.2.4版。由于IE8目前仍然比较普及，建议用户下载1.x系列。除非能确保没有任何用户使用IE6～IE8版本来访问程序，再去使用2.x系列版本。

  • ·         jQuery 3.x版本：

该版本是目前最新的jQuery版本，最近一次是在2017年3月发布的jQuery 3.2.1版。该版本只支持IE9 、Opera最新版，以及其他主流浏览器的最新版及前一版。

需要注意的是，如果需要兼容IE6～IE8、Opera 12.1x或者Safari 5.1等旧版本的浏览器，官方建议使用jQuery 1.12.x。

1.3  Web开发工具

JavaScript和jQuery源代码文件均为纯文本内容使用，计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容，因此本书不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软件，例如Adobe Dreamweaver、Sublime Text、Notepad 和EditPlus。

1.3.1  AdobeDreamweaver

Adobe Dreamweaver是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或 “织梦”。该软件最初的1.0版是在1997年由美国的Macromedia公司发布的，后来该公司于2005年被Adobe公司收购。Dreamweaver也是当时第一套针对专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

Dreamweaver支持HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分和预览视图（如图1-2所示），在开发者修改代码部分时预览视图会随着修改内容实时变化。

图1-2 Dreamweaver可视化开发界面

    Dreamweaver也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver的预览视图难以达到与所有浏览器完全一致的效果。如需考虑跨浏览器兼容问题，预览画面仅能作为辅助参考。

1.3.2  Sublime Text

Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果（如图1-3所示）。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复关闭之前的编辑状态。

图1-3 Sublime Text开发界面

1.3.3  Notepad

Notepad 的名称来源于Windows系列操作系统自带的记事本Notepad，在此基础上多了两个加号，立刻带了质的飞越。这是一款免费开源的纯文本编辑器（如图1-4所示），具有完整中文化接口并支持UTF-8技术。由于它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

图1-4 Notepad 开发界面

1.3.4  EditPlus

EditPlus是由韩国的Sangil Kim（ES-Computing）公司发布的一款文字编辑器，支持HTML、CSS、JavaScript、PHP、Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能，例如在CSS源文件中输入字母b加上空格就会自动生成border:1px solid red语句（如图1-5所示）。开发者可以自行编辑快捷键所代表的代码块，然后在开发过程中使用快捷方式让EditPlus自动完成指定代码内容。

图1-5 EditPlus开发界面

1.4  本章小结

本章首先介绍了JavaScript基础知识，包括JavaScript简介、起源、JavaScript与Java的不同之处以及JavaScript的特点；其次详细介绍了jQuery背景知识，包括jQuery简介、发展史和特点；最后介绍了4款Web开发工具，分别是Adobe Dreamweaver、Sublime Text、Notepad 以及EditPlus。

习题1

什么是JavaScript？它有哪些特点？

JavaScript与哪两个技术被称为“Web前端开发的三大技术”？

什么是jQuery？它有哪些特点？

jQuery有哪几类版本？如果需要兼容旧版本浏览器（例如IE6～IE8），选择哪个版本更好?

 

 

 

第2章  JavaScript入门

本章主要内容是JavaScript基础知识，包括JavaScript的实现原理、使用方式、语法规则，以及变量的声明与命名规范等内容。

本章学习目标：

l    了解完整JavaScript实现的组成部分；

l    掌握JavaScript的使用方式；

l    掌握JavaScript的基本语法规则；

l    掌握JavaScript的变量声明与命名规范。

2.1  JavaScript的实现

JavaScript有5种原始类型，分别是Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。

JavaScript提供了typeof方法用于检测变量的数据类型，该方法会根据变量本身的数据类型给出对应名称的返回值。其语法格式如下。

 

typeof 变量名称

 

对于指定的变量使用typeof方法，其返回值是提示数据类型的文本内容，常见5种情况，如表3-1所示。

表3-1  typeof方法的常见返回值一览表

返  回  值

示    例

解    释

undefined

var x;

alert(x);

该变量未赋值

boolean

var x = true;

alert(x);

该变量为布尔值

string

var x = "Hello";

alert(x);

该变量为字符串

number

var x = 3.14;

alert(x);

该变量为数值

object

var x = null;

alert(x);

该变量为空值或对象

 


3.1.1
  Undefined类型

所有Undefined类型的输出值都是undefined。若需要输出的变量从未声明过，或者使用关键字var声明过但是从未进行赋值，此时会显示undefined字样。例如：

 

alert(y); //返回值为undefined，因为变量y之前从未使用关键字var进行声明

或

var x;

alert(x); //返回值也是undefined，因为未给变量x赋值

 

【例3-1】 JavaScript基础数据类型Undefined的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript变量之Undefined类型

6.     

7.     

8.         

JavaScript变量之Undefined类型

9.         

10.         ＜script＞

11.             //声明变量msg

12.             var msg;

13.             //在alert()方法中使用变量msg

14.             alert(msg);

15.        

16.    

17.

 

运行效果如图3-1所示。

 

图3-1  JavaScript基础数据类型Undefined的简单应用效果

【代码说明】

本例使用关键字var声明了变量msg，但未对其进行初始赋值就直接使用alert(msg)方法要求在对话框中显示该变量内容。由图3-1可见，此时显示出来的结果为undefined。


3.1.2
  Null类型

null值表示变量的内容为空，可用于初始化变量，或者清空已经赋值的变量。例如：

 

var x=99;

x=null;

alert(x); //此时返回的值是null而不是99

 

【例3-2】 JavaScript基础数据类型Null的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript变量之Null类型

6.     

7.     

8.         

JavaScript变量之Null类型

9.         

10.         ＜script＞

11.             //声明变量msg

12.             var msg=99;

13.             //将变量msg赋值为null

14.             msg=null;

15.             //在alert()方法中使用变量msg

16.             alert(msg);

17.        

18.    

19.

 

运行效果如图3-2所示。

 

图3-2 JavaScript基础数据类型Null的简单应用效果

【代码说明】

本例使用关键字var声明了变量msg并将其赋值为null，然后使用alert(msg)方法要求在对话框中显示该变量内容。由图3-2可见，此时显示出来的结果为null。


3.1.3
  String类型

在JavaScript中String类型用于存储文本内容，又称为字符串类型。在为变量进行字符串赋值时需要使用引号（单引号或双引号均可）括住文本内容。例如：

 

var country=

China

;

或

var country="

China

";

 

与JavaScript不同的是，在Java中使用单引号声明单个字符、使用双引号声明字符串，而在JavaScript中没有区分单个字符和字符串，因此两种声明方式任选一种都是有效的。

如果字符串内容本身也需要带上引号，则用于包围字符串的引号不可以和文本内容中的引号相同。如果字符串本身带有双引号，则使用单引号包围字符串，反之亦然。例如：

 

var dialog=Today is a gift, that is why it is called "Present".;

或

var dialog="Today is a gift, that is why it is called Present. ";

 

此时字符串内部的引号会默认保留字面的样式。

String对象中包含了一系列方法，常用方法如表3-2所示。

表3-2  JavaScript String对象常见方法一览表

方  法  名

解    释

charAt()

返回指定位置上的字符

charCodeAt()

返回指定位置上的字符的Unicode编码

concat()

连接字符串

indexOf()

正序检索字符串中指定内容的位置

lastIndexOf()

倒序检索字符串中指定内容的位置

match()

返回匹配正则表达式的所有字符串

replace()

替换字符串中匹配正则表达式的指定内容

search()

返回匹配正则表达式的索引值

slice()

根据指定位置节选字符串片段

split()

把字符串分割成字符串数组

substring()

根据指定位置节选字符串片段

toLowerCase()

将字符串中的所有字母都转换为小写

toUpperCase()

将字符串中的所有字母都转换为大写

 

1．字符串长度

在字符串中每一个字符都有固定的位置，其位置从左往右进行分配。这里以单词HELLO为例，其位置规则如图3-3所示。

 

图3-3  字符位置对照图

首字符H从位置0开始，第2个字符L是位置1，以此类推，直到最后一个字符O的位置是字符串的总长度减1。

用户可以使用String对象的属性length获取字符串的长度。例如：

 

var s="Hello";

var slen=s.length; //返回值是变量s的字符串长度，即5

 

【例3-3】 JavaScript获取字符串长度的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript获取字符串长度

6.     

7.     

8.         

JavaScript获取字符串长度

9.         

10.         ＜script＞

11.             //声明变量msg

12.             var msg="Hello JavaScript!";

13.             //获取字符串长度

14.             var len=msg.length;

15.             alert("Hello JavaScript!的字符串长度为：" len);

16.        

17.    

18.

 

运行效果如图3-4所示。

 

图3-4  JavaScript获取字符串长度的简单应用效果

【代码说明】

本例使用关键字var声明了变量msg并将其赋值为"Hello JavaScript!"，然后使用字符串类型的length属性获取其字符长度并使用alert()方法显示出来。由图3-4可见，此时显示出来的结果为17，因为空格和感叹号各算1个字符位置，所以总长度为5 1 10 1=17。

2．获取字符串中的单个字符

在JavaScript中可以使用charAt()方法获取字符串指定位置上的单个字符，其语法结构如下。

 

charAt(index)

 

其中，index处填写需要获取的字符所在位置。

例如：

 

var msg="Hello JavaScript";

var x=msg.charAt(0); //表示获取msg中的第1个字符，返回值为H

 

如果需要获取指定位置上单个字符的字符代码，可以使用charCodeAt()方法，其语法结构如下。

 

charCodeAt(index)

 

其中，index处填写需要获取的字符所在位置。

例如：

 

var msg="Hello JavaScript";

var x=msg.charCodeAt(0); //表示获取msg中的第1个字符的字符代码，返回值为72

 

【例3-4】 JavaScript获取字符串中单个字符的应用

 

1. 

2. 

3.     

4.         

5.          JavaScript获取字符串中的单个字符

6.     

7.     

8.         

JavaScript获取字符串中的单个字符

9.         

10.         ＜script＞

11.             //声明变量msg

12.             var msg="Hello JavaScript";

13.             //获取字符串中的单个字符

14.             var letter=msg.charAt(10);

15.             //获取字符串中单个字符的代码

16.             var code=msg.charCodeAt(10);

17.             alert("Hello JavaScript在第10位上的字符为：" letter "
其字符代

                码为：" code);

18.        

19.    

20.

 

运行效果如图3-5所示。

 

图3-5  JavaScript获取字符串中单个字符的应用效果

【代码说明】

本例使用关键字var声明了变量msg并将其赋值为"Hello JavaScript"，然后使用字符串类型的charAt()方法获取其中第10位上的字符，并且用charCodeAt()方法获取该字符的代码，最后用alert()方法将结果显示出来。由图3-5可见，此时显示出来的结果为S，其对应的字符代码为83。alert()方法中的
为转义字符，表示换行。

3．连接字符串

在JavaScript中可以使用concat()方法将新的字符串内容连接到原始字符串上，其语法结构如下。

 

concat(string1, string2,...,stringN);

 

该方法允许带有一个或多个参数，表示按照从左往右的顺序依次连接这些字符串。

例如：

 

var msg="Hello";

var newMsg=msg.concat(" JavaScript");

alert(newMsg); //返回值为"Hello JavaScript"

 

用户也可以直接使用加号（ ）进行字符串的连接，其效果相同，上述代码可改为      如下。

 

var msg="Hello";

var newMsg=msg " JavaScript";

alert(newMsg); //返回值为"Hello JavaScript"

 

【例3-5】 JavaScript连接字符串的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript连接字符串

6.     

7.     

8.         

JavaScript连接字符串

9.         

10.         ＜script＞

11.             //声明变量s1、s2、s3

12.             var s1="Hello";

13.             var s2="Java";

14.             var s3="Script";

15.             //连接字符串

16.             var msg=s1.concat(s2, s3);

17.             alert(msg);

18.        

19.    

20.

 

运行效果如图3-6所示。

 

图3-6  JavaScript连接字符串的简单应用效果

【代码说明】

本例在JavaScript中首先声明了3个字符串变量，即s1、s2和s3，然后对s1使用concat()方法连接s2和s3形成新的变量msg，最后使用alert()语句测试输出变量msg的效果。由图3-6可见，变量msg为变量s1、s2和s3的连接。

本例也可以直接使用加号（ ）连接3个变量实现同样的效果，写成var msg = s1 s2 s3。注意使用concat()方法只会连接形成新的返回值，不会影响变量s1的初始内容。

4．查找字符串是否存在

使用indexOf()和lastIndexOf()方法可以查找原始字符串中是否包含指定的字符串内容，其语法格式如下。

 

indexOf(searchString, startIndex)

或

lastIndexOf(searchString, startIndex)

 

其中，searchString参数位置填入需要用于对比查找的字符串片段，startIndex参数用于指定搜索的起始字符，该参数内容如果省略则按照默认顺序搜索全文。

indexOf()和lastIndexOf()方法都可以用于查找指定内容是否存在，如果存在，其返回值为指定内容在原始字符串中的位置序号；如果不存在，则直接返回-1。它们的区别在于indexOf()是从序号0的位置开始正序检索字符串内容，而lastIndexOf()是从序号最大值的位置开始倒序检索字符串内容。

【例3-6】 JavaScript检测字符串是否存在的简单应用

分别使用indexOf()与lastIndexOf()方法查找字符串中是否包含指定的字母。

 

1. 

2. 

3.     

4.         

5.          JavaScript检测字符串是否存在

6.     

7.     

8.         

JavaScript检测字符串是否存在

9.         

10.        

查找字母y在字符串"Happy Birthday"中的位置

11.         ＜script＞

12.             //声明变量msg

13.             var msg="Happy Birthday";

14.             //检测字符y存在的位置（正序）

15.             var firstY=msg.indexOf("y");

16.             //检测字符y存在的位置（倒序）

17.             var lastY=msg.lastIndexOf("y");

18.             alert(indexOf("y")： firstY \nlastIndexOf("y")： lastY);

19.        

20.    

21.

 

运行效果如图3-7所示。

 

图3-7  JavaScript检测字符串是否存在的简单应用效果

【代码说明】

本例在JavaScript中声明了变量msg作为测试样例，并检测其中字母y存在的位置，分别使用indexOf()和lastIndexOf()方法进行正序和倒序检测并获取返回值，最后使用alert()方法输出返回结果。

由图3-7可见，对于同一个字母y使用indexOf()和lastIndexOf()方法获取位置的结果不同，正序查找的结果为4，倒序查找的结果为13。原因是原字符串msg中包含了不止一个字母y，而这两个方法会返回在字符串中查找到的第1个符合条件的字符位置，因此结果不同。需要注意的是，JavaScript是大小写敏感的脚本语言，因此如果本例查找大写字母Y会获取返回值-1，表示该字符不存在。

5．查找与替换字符串

在JavaScript中使用match()、search()方法可以查找匹配正则表达式的字符串内容。

match()方法的语法格式如下。

 

match(regExp)

 

在参数regExp的位置需要填入一个正则表达式，例如match(/a/g)表示全局查找字母a，后面的小写字母g是英文单词gobal的首字母简写，表示全局查找，其返回值为符合条件的所有字符串片段。关于正则表达式的更多用法，读者可查阅本章3.2节中的相关内容。

search()方法的语法格式如下。

 

search(regExp)

 

在参数regExp的位置同样需要填入一个正则表达式，不同之处在于search()方法的返回值是符合匹配条件的字符串索引值。

在JavaScript中使用replace()方法可以替换匹配正则表达式的字符串内容。

replace()方法的语法格式如下。

 

replace(regExp, replaceText)

 

在参数regExp的位置需要填入一个正则表达式，在参数replaceText的位置填入需要替换的新的文本内容。例如replace(/a/g,"A")表示把所有的小写字母a都替换为大写形式。该方法的返回值是已经替换完毕的新字符串内容。

【例3-7】 JavaScript查找与替换字符串

分别使用match()、search()与replace()方法查找与替换字符串。

 

1. 

2. 

3.     

4.         

5.          JavaScript查找与替换字符串

6.     

7.     

8.         

JavaScript查找与替换字符串

9.         

10.        

用于查找和替换的字符串为"Happy New Year 2016"

11.         ＜script＞

12.             //声明变量msg

13.             var msg="Happy New Year 2016";

14.             //检测字符y是否存在

15.             var result1=msg.search(/y/);

16.             //全局查找数字

17.             var result2=msg.match(/d/g);

18.             //将小写字母a全部替换为大写字母A

19.             var result3=msg.replace(/a/g,"A");

20.             alert(search(/y/g)： result1 \nmatch(/\d/g)： result2

                 \nreplace(/a/g,"A")： result3);

21.        

22.    

23.

 

运行效果如图3-8所示。

 

图3-8  JavaScript查找与替换字符串

【代码说明】

本例在JavaScript中声明了变量msg作为测试样例，分别使用match()、search()与replace()方法查找和替换字符串，最后使用alert()方法输出全部的返回结果。

由图3-8可见，search()方法可获取指定内容的所在索引位置，而match()方法是把符合条件的所有字符串以逗号隔开的形式全部展现出来。其中，d表示数字0～9的任意一个字符，/g表示全局查找。replace()方法将原字符串中所有的小写字母a均替换成大写字母的形式。如果没有加全局字符g，则只会替换其中第1个小写字母a。

6．获取字符串片段

在JavaScript中可以对字符串类型的变量使用slice()和substring()方法截取其中的字符串片段，slice()方法用于去掉指定片段，substring()方法用于节选指定片段。

slice ()方法的语法格式如下。

 

slice(start, end)

 

其中，start参数位置填写需要删除的字符串的第1个字符位置，end参数位置填写需要删除字符串的结束位置（不包括该位置上的字符），如果end参数省略，则默认填入字符串长度。如果填入的属性值为负数，表示从字符串的最后一个位置开始计算，例如-1表示倒数第1个字符。

substring()方法的语法格式如下。

 

substring(start, end)

 

与slice()方法的语法结构类似，其中start参数位置填写需要节选的字符串的第1个字符位置，end参数位置填写需要节选字符串的结束位置（不包括该位置上的字符）。同样，如果end参数省略，则默认填入字符串长度。

当参数均为非负数时，substring()与slice()方法获取的结果完全一样，只有当参数值存在负数情况时这两个方法才会有所不同：substring()方法会忽略负数，直接将其当作0来处理；而slice()方法会用字符串长度加上该负数值，计算出对应的位置。

例如：

 

var msg="happy";                    //该字符串长度为5位

var result1=msg.substring(1, -1);   //返回值为h

var result2=slice(1, -1);           //返回值为app

 

其中，substring(1, -1)会忽略负数，直接当作0来对待，因此实际运行的是substring(1, 0)方法。由于此时结束位置比开始位置靠前，JavaScript会自动对调位置转换成substring(0, 1)方法，最终获得返回值h；而slice(1,-1)会将负数加上字符串长度换算成slice(1,4)方法，因此最终获得返回值app。

【例3-8】 JavaScript获取字符串片段的简单应用

分别使用substring()与slice()方法获取字符串片段。

 

1. 

2. 

3.     

4.         

5.          JavaScript获取字符串片段

6.     

7.     

8.         

JavaScript获取字符串片段

9.         

10.        

分别使用substring()和slice()方法节选字符串"Happy Birthday"

11.         ＜script＞

12.             //声明变量msg

13.             var msg="Happy Birthday";

14.             //使用substring节选指定位置范围的字符串

15.             var result1=msg.substring(0,5);

16.             //使用slice节选指定位置范围的字符串

17.             var result2=msg.slice(0,-9);

18.             alert(substring(0,5)： result1 \nslice(0,-9)： result2);

19.        

20.    

21.

 

运行效果如图3-9所示。

 

图3-9 JavaScript获取字符串片段的简单应用效果

【代码说明】

本例在JavaScript中声明了变量msg作为字符串测试样例，其中字符串内容为"Happy Birthday"，共计14个字符位置，分别使用substring(0,5)和slice(0,-9)方法进行字符串节选，最后使用alert()方法输出返回结果。

由图3-9可见，substring(0,5)方法获取了从第0位开始到第5位结束（不包括第5位本身）的所有字符。slice(0,-9)方法因为带有负数-9，表示倒数第9位字符，将其加上字符串长度换算后得到slice(0,5)，在没有负数的情况下与substring(0,5)效果完全相同，因此得到同样的结果。

7．字符串大小写转换

在JavaScript中可以对字符串类型的变量使用toLowerCase()和toUpperCase()方法转换其中存在的大小写字母，toLowerCase()表示将所有字母转换为小写，toUpperCase()表示将所有字母转换为大写。

【例3-9】 JavaScript字符串大小写转换

对字符串分别使用toLowerCase()和toUpperCase()方法进行大小写转换。

 

1. 

2. 

3.     

4.         

5.          JavaScript字符串大小写转换

6.     

7.     

8.         

JavaScript字符串大小写转换

9.         

10.        

将字符串"Merry Christmas"分别转换为全大写和全小写的形式。

11.         ＜script＞

12.             //声明变量msg

13.             var msg="Merry Christmas";

14.             //将字符串转换为全大写形式

15.             var upper=msg.toUpperCase();

16.             //将字符串转换为全小写形式

17.             var lower=msg.toLowerCase();

18.             alert(全大写： upper \n全小写： lower);

19.        

20.    

21.

 

运行效果如图3-10所示。

 

图3-10  JavaScript字符串大小写转换的效果

8．转义字符

在前面的例题中可以看到alert()方法中带有
符号，表示换行，这种符号称为转义字符。与C语言、Java语言相似，在JavaScript中String类型也包含一系列转义字符，具体情况如表3-3所示。

表3-3  JavaScript常用转义字符对照表

转 义 字 符

含    义

换行

空一个Tab格，相当于4个空格



空格符

回车符

f

换页符

\

反斜杠

\

单引号

"

双引号

nnn

八进制代码nnn表示的字符，n是0～7中的一个八进制数字，范围是000～377

xnn

十进制代码nn表示的字符，n是0～F中的一个十六进制数字，范围是00～FF

unnn

十六进制代码nnn表示的字符，n是0～F中的一个十六进制数字

【例3-10】 JavaScript转义字符的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript转义字符的简单应用

6.     

7.     

8.         

JavaScript转义字符的简单应用

9.         

10.         ＜script＞

11.             alert("双引号 "
单引号 \");

12.        

13.    

14.

 

运行效果如图3-11所示。

 

图3-11  JavaScript转义字符的简单应用效果


3.1.4
  Number类型

在JavaScript中使用Number类型表示数字，其数字可以是32位以内的整数或64位以内的浮点数。例如：

 

var x = 9;

var y = 3.14;

 

Number类型还支持使用科学记数法、八进制和十六进制的表示方式。

1．科学记数法

对于极大或极小的数字也可以使用科学记数法表示，格式如下。

 

数值e倍数

 

上述格式表示数字后面跟指数e再紧跟乘以的倍数，其中数值可以是整数或浮点数，倍数允许为负数。例如：

 

var x1=3.14e8;

var x2=3.14e-8;

 

变量x1表示的数是3.14乘以10的8次方，即314000000；变量x2表示的数是3.14乘以10的-8次方，即0.0000000314。

【例3-11】 JavaScript科学记数法的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript科学记数法

6.     

7.     

8.         

JavaScript科学记数法

9.         

10.         ＜script＞

11.             var x1=3e6;

12.             var x2=3e-6;

13.             alert(3e6= x1 \n3e-6= x2);

14.        

15.    

16.

 

运行效果如图3-12所示。

 

图3-12 JavaScript科学记数法的简单应用效果

2．八进制与十六进制数

在JavaScript中，Number类型也可以用于表示八进制或十六进制的数。

八进制的数需要用数字0开头，后面跟的数字只能是0～7（八进制字符）中的一个。

例如：

 

var x=010; //这里相当于十进制的8

 

十六进制的数需要用数字0和字母x开头，后面跟的字符只能是0～9或A～F（十六进制字符）中的一个，大小写不限。例如：

 

var x=0xA; //这里相当于十进制的10

或

var x=0xa; //等同于0xA

 

虽然Number类型可以使用八进制或十六进制的赋值方式，但是在执行代码时仍然会将其转换为十进制结果。

【例3-12】 JavaScript八进制与十六进制数

 

1. 

2. 

3.     

4.         

5.          JavaScript八进制与十六进制数

6.     

7.     

8.         

JavaScript八进制与十六进制数

9.         

10.         ＜script＞

11.             //八进制数

12.             var x1=020;

13.             //十六进制数

14.             var x2=0xAF;

15.             alert(八进制数020= x1 \n十六进制数0xAF= x2);

16.        

17.    

18.

 

运行效果如图3-13所示。

 

图3-13  JavaScript八进制与十六进制数的输出结果

【代码说明】

本例为变量x1赋值了0开头的数字代表八进制数，为变量x2赋值了0x开头的数字代表十六进制数，并使用alert()语句将其显示在消息提示对话框中。由图3-13可见，最终显示结果会自动转换为十进制数。注意，如果需要正常表示十进制整数，则不要使用数字0开头，以免被误认为是八进制数。

3．浮点数

如果要定义浮点数，必须使用小数点，并且小数点后面至少跟一位数字。例如：

 

var x=3.14;

var y=5.0;

 

即使小数点后面的数字为0也被认为是浮点数类型。

如果浮点数类型的小数点前面的整数位为0，可以省略。例如：

 

var x=.15; //等同于0.15

 

浮点数可以使用toFixed()方法规定小数点后保留几位数，其语法格式如下。

 

toFixed(digital)

 

其中，参数digital换成小数点后需要保留的位数即可。例如：

 

var x=3.1415926;

var result=x.toFixed(2); //返回值为3.14

 

该方法遵循四舍五入的规律，即使进位后小数点后面只有0也会保留指定的位数。        例如：

 

var x=0.9999;

var result=x.toFixed(2); //返回值为1.00

 

需要注意的是，在JavaScript中使用浮点数进行计算有时会产生误差。例如：

 

var x=0.7 0.1;

alert(x);//返回值会变成0.7999999999999999，而不是0.8

 

这是由于表达式使用的是十进制数，但实际的计算是转换成二进制数进行计算再转回十进制结果的，在此过程中可能会损失精度。此时使用自定义函数将两个加数都乘以10进行计算后再除以10还原。

【例3-13】 JavaScript浮点数类型的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript浮点数类型的简单应用

6.     

7.     

8.         

JavaScript浮点数类型的简单应用

9.         

10.       

11.             浮点数的加法运算。

12.        

13.         ＜script＞

14.         //直接将两数相加

15.         var result1=0.7 0.1;

16.         //将浮点数转换成整数后相加再还原

17.         var result2=(0.7*10 0.1*10)/10;

18.         //输出结果

19.         document.write("0.7 0.1=" result1 "
(0.7*10 0.1*10)/10=" result2);

20.        

21.    

22.

 

运行效果如图3-14所示。

 

图3-14  JavaScript浮点数类型的简单应用效果

【代码说明】

本例用于测试两个浮点数在进行算术运行时导致的误差，并给出了解决办法。事实上，目前JavaScript尚不能解决该问题，必须手动将浮点数放大10的倍数成为整数再进行计算才能避免误差，未来也可以使用自定义函数处理此类问题。

4．特殊Number值

在JavaScript中，Number类型还有一些特殊值，如表3-4所示。

表3-4  JavaScript中Number类型的特殊值

特  殊  值

解    释

Infinity

正无穷大，在JavaScript中使用Number.POSITIVE_INFINITY表示

-Infinity

负无穷大，在JavaScript中使用Number.NEGATIVE_INFINITY表示


NaN

非数字，在JavaScript使用Number.NaN表示

Number.MAX_VALUE

数值范围允许的最大值，大约等于1.8e308

Number.MIN_VALUE

数值范围允许的最小值，大约等于5e-324

 

1）Infinity

Infinity表示无穷大，有正、负之分。当数值超过了JavaScript允许的范围时就会显示为Infinity（超过上限）或-Infinity（超过下限）。例如：

 

var x=9e30000;

alert(x); //因为该数字已经超出上限，返回值为Infinity

 

在比较数字大小时，无论原数据值为多少，认为结果为Infinity的两个数相等，同样两个-Infinity也是相等的。例如：

 

var x1=3e9000;

var x2=9e3000;

alert(x1==x2);  //判断变量x1与x2是否相等，返回值为true

 

上述代码中变量x1与x2的实际数据值并不相等，但是由于它们均超出了JavaScript可以接受的数据范围，因此返回值均为Infinity，从而在判断是否相等时会返回true（真）。

在JavaScript中使用数字0作为除数不会报错，如果正数除以0返回值就是Infinity，负数除以0返回值为-Infinity，特殊情况“0除以
0”
的返回值为NaN（非数字）。例如：

 

var x1=5/0;     //返回值是Infinity

var x2=-5/0;    //返回值是-Infinity

var x3=0/0;     //返回值是NaN

 

Infinity不可以与其他正常显示的数字进行数学计算，返回结果均是NaN。例如：

 

var x=Number.POSITIVE_INFINITY;

var result=x 99;

alert(result);  //返回值为NaN

 

【例3-14】 JavaScript特殊值Infinity的应用

 

1. 

2. 

3.     

4.         

5.          JavaScript特殊值Infinity

6.     

7.     

8.         

JavaScript特殊值Infinity

9.         

10.         ＜script＞

11.             var x1=2e9000;

12.             var x2=-2e9000;

13.             var result=x1 x2;

14.             alert("x1(2e9000)=" x1 "
x2(-2e9000)=" x2 "
x1 x2=" result);

15.        

16.    

17.

 

运行效果如图3-15所示。

2）NaN

NaN表示的是非数字（Not a Number），该数值用于表示数据转换成Number类型失败的情况，从而无须抛出异常错误。例如将String类型转换为Number类型。NaN因为不是真正的数字，不能用于进行数学计算，并且即使两个数值均为NaN，它们也不相等。

 

图3-15 JavaScript特殊值Infinity的输出结果

例如将英文单词转换为Number类型会导致转换结果为NaN，具体代码如下。

 

var x="red";

var result = Number(x); //返回值为NaN，因为没有对应的数值可以转换

 

JavaScript还提供了用于判断数据类型是否为数值的方法isNaN()，其返回值是布尔值。当检测的数据无法正确转换为Number类型时返回真（true），其他情况返回假（false）。

其语法规则如下。

 

isNaN(变量名称)

 

例如：

 

var x1="red";

var result1=isNaN(x1);  //返回值是真（true）

 

var x2="999";

var result2=isNaN(x2);  //返回值是假（false）

 

【例3-15】 JavaScript特殊值NaN的应用

 

1. 

2. 

3.     

4.         

5.          JavaScript特殊值NaN

6.     

7.     

8.         

JavaScript特殊值NaN

9.         

10.         ＜script＞

11.             var x1="hello";

12.             var x2=999;

13.             var result1=Number(x1);

14.             alert(x1(hello)不是数字： isNaN(x1) \nx2(999)不是数字： isNaN(x2)

                  \nx1转换为数字的结果为： result1);

15.        

16.    

17.

 

运行效果如图3-16所示。

 

图3-16  JavaScript特殊值NaN的输出结果


3.1.5
  Boolean类型

布尔值（Boolean）在很多程序语言中被用于进行条件判断，其值只有两种——true（真）和false（假）。

布尔类型的值可以直接使用单词true或false，也可以使用表达式。例如：

 

var answer=true;

var answer=false;

var answer=(1>2);

 

其中，1>2的表达式不成立，因此返回结果为false（假）。

【例3-16】 JavaScript Boolean类型的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript Boolean类型的简单应用

6.     

7.     

8.         

JavaScript Boolean类型的简单应用

9.         

10.         ＜script＞

11.             var x1=Boolean("hello");

12.             var x2=Boolean(999);

13.             var x3=Boolean(0);

14.             var x4=Boolean(null);

15.             var x5=Boolean(undefined);           

16.             alert("hello:" x1 "
999:" x2 "
0:" x3 "
null:" x4 "

                
undefined:" x5);

17.        

18.    

19.

 

运行效果如图3-17所示。

 

图3-17  JavaScript Boolean类型的简单应用效果

3.2  JavaScript对象类型

在JavaScript中对象类型分为3种，即本地对象、内置对象和宿主对象。本地对象（native object）是ECMAScript定义的引用类型；内置对象（built-in object）指的是无须实例化可以直接使用的对象，其实也是特殊的本地对象；宿主对象（host object）指的是用户的机器环境，包括DOM和BOM。


3.2.1
  本地对象

1．Array对象

在JavaScript中可以使用数组（Array）类型在单个变量中存储一系列的值。例如：

 

var mobile=new Array();

var mobile [0]="苹果";

var mobile [1]="三星";

var mobile [2]="华为";

 

数组是从0开始计数的，因此第1个元素的下标是[0]，后面每新增一个元素下标加1。使用Array类型存储数组的特点是无须在一开始声明数组的具体元素数量，可以在后续代码中陆续新增数组元素。

如果一开始就可以确定数组的长度，即其中的元素不需要后续动态加入，可以直接写成如下形式。

 

var mobile=new Array("苹果", "三星", "华为");

或

var mobile=["苹果", "三星", "华为"];

 

此时数组元素之间使用逗号隔开。

Array对象还包含了length属性，可以用于获取当前数组的长度，即数组中元素的个数。如果当前数组中没有包含元素，则length值为0。例如：

 

var mobile=["苹果", "三星", "华为"];

var x=mobile.length; //这里x值为3

 

Array对象还包含了一系列方法用于操作数组，常用方法如表3-5所示。

表3-5  JavaScript Array对象的常用方法

方 法 名 称

解    释

concat(array1,array2,…, arrayN)

用于在数组末尾处连接一个或者多个新的数组或数组元素。其中参数array1为必填内容，后面的参数个数不限，均为可选内容。参数内容可以是数组或数组元素的值

join(separator)

把数组中的所有元素用指定的分隔符进行分割，并在同一个字符串中显示出来。其中separator参数表示指定的自定义分隔符。该参数为可选内容0，在不填写的情况下默认用逗号分隔

pop()

删除数组中的最后一个元素，并返回该元素的值。如果数组内容是空的，则该方法返回undefined，并且不进行操作

push(element1, element2,…,elementN)

在数组的结尾处插入一个或者多个元素，并返回最新数组长度。其中参数element1为必填内容，表示至少添加一个元素，后面的参数个数不限，均为可选内容

reverse()

用于将数组中的所有元素倒序重组。该方法会直接更改原始数组，而不是生成一个新的数组

shift()

删除数组中的第1个元素，并返回该元素的值。如果数组内容为空，则该方法返回undefined，并且不进行操作

slice(start, end)

用于返回数组中指定了开始与结束范围的一系列元素。其中参数start为必填内容，表示从第几个元素开始选取；参数end为可选内容，表示选取到第几个元素结束，并且不包括该元素本身。如果没有指定end参数，则一直选取到数组的最后一个元素结束。如果这两个参数填写了负数，则表示从数组末尾开始计算个数。例如-1表示最后一个元素，-2表示倒数第2个元素，以此类推

toString()

用于把数组元素显示在同一个字符串中，并且用逗号分隔，相当于没有指定分隔符的join()方法的使用

unshift(element1,…, elementN)

在数组的开头插入一个或多个元素，并返回最新数组长度。其中参数element1为必填内容，表示至少添加一个元素，后面的参数个数不限，均为可选内容

 

【例3-17】 JavaScript Array对象的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript Array对象的简单应用

6.     

7.     

8.         

JavaScript Array对象的简单应用

9.         

10.         ＜script＞

11.         //使用new Array()构建数组对象

12.         var students=new Array();

13.         students[0]="张三";

14.         students[1]="李四";

15.         students[2]="王五";

16.        

17.         //直接声明数组对象

18.         var mobile=["Nokia","HTC","iPhone"];

19.         alert(students "
" mobile);

20.        

21.    

22.

 

运行效果如图3-18所示。

 

图3-18 JavaScript Array对象的简单应用效果

【代码说明】

本例分别使用了两种不同的声明方式创建数组，并在最后使用alert()语句在弹出的提示框中显示这两个数组的内容。由图3-18可见，两种声明方式均可成功使用Array对象创建数组，并对数组元素进行赋值。

2．Date对象

在JavaScript中使用Date对象处理与日期、时间有关的内容，有4种初始化方式，列举如下。

 

//表示获取当前的日期与时间

new Date();

//使用表示日期时间的字符串定义时间，例如填入 May 10, 2000 12:12:00

new Date(dateString);

//使用从
1970年1月1日
到指定日期的毫秒数定义时间，例如填入1232345

new Date(milliseconds);

//自定义年、月、日、时、分、秒和毫秒，时、分、秒和毫秒参数省略时默认为0

new Date(year, month, day, hours, minutes, seconds, milliseconds);

 

用户可以通过Date对象的一系列方法分别获取指定的内容，Date对象的常用方法如表3-6所示。

表3-6  JavaScript Date对象的常用方法

方 法 名 称

解    释

Date()

获取当前的日期和时间

getDate()

获取Date对象处于一个月里面的哪一日（1～31）

getDay()

获取Date对象处于星期几（0～6），其中0表示星期日

getMonth()

获取Date对象处于几月份（0～11），其中0表示一月份

getFullYear()

获取Date对象的完整年份（4位数）

getHours()

获取Date对象的小时（0～23）

getMinutes()

获取Date对象的分钟（0～59）

getSeconds()

获取Date对象的秒（0～59）

getTime()

返回
1970年1月1日
至今经历的毫秒数

setDate()

重新设置Date对象中的日期，精确到天

setFullYear()

重新设置Date对象中的年份，年份必须为4位数的完整表达

setHours()

重新设置Date对象中的小时（0～23）

setMinutes()

重新设置Date对象中的分钟（0～59）

setMonth()

重新设置Date对象中的月份（0～11）

setSeconds()

重新设置Date对象中的秒（0～59）

setTime()

重新以
1970年1月1日
至今经历的毫秒数设置Date对象

toDateString()

将Date对象的日期部分转换为字符串

toLocaleDateString()

根据本地时间格式将Date对象的日期部分转换为字符串

toLocaleTimeString()

根据本地时间格式将Date对象的时间部分转换为字符串

toLocaleString()

根据本地时间格式将Date对象的日期和时间转换为字符串

toUTCString()

根据世界时间格式将Date对象的日期和时间转换为字符串

 

【例3-18】 JavaScript Date对象的简单应用

 

1. 

2. 

3.     

4.         

5.          JavaScript Date对象的简单应用

6.     

7.     

8.         

JavaScript Date对象的简单应用

9.         

10.         ＜script＞

11.         //获取当前日期时间对象

12.         var date=new Date();

13.         //获取年份

14.         var year=date.getFullYear();

15.         //获取月份

16.         var month=date.getMonth() 1;

17.         //获取天数

18.         var day=date.getDate();

19.         //获取星期

20.         var week=date.getDay();

21.         alert("当前是" year "年" "" month "月" day "日，星期" week);

22.        

23.    

24.

 

运行效果如图3-19所示。

 

图3-19  JavaScript Date对象的简单应用效果

【代码说明】

本例声明了当前的日期时间对象date，然后分别获取其中的年、月、日与星期，并使用alert()语句在弹出的提示框中显示组合内容。由于月份的取值范围是0～11，因此如果要显示实际月份，需要将获取到的月份值再进行加1处理。

3．RegExp对象

RegExp对象表示正则表达式（regular expression），通常用于检索文本中是否包含指定的字符串，其语法格式如下。

 

new RegExp(pattern [, attributes])

 

参数解释如下。

  • pattern：该参数为字符串形式，用于规定正则表达式的匹配规则或填入其他正则表达式。
  • attributes：该参数为可选参数，可以包含属性值g、i或者m，分别表示全局匹配、区分大小写匹配与多行匹配。

例如：

 

var pattern=new RegExp([0-9], g);

 

上述代码表示声明了一个用于全局检索文本中是否包含数字0～9的任意字符的正则表达式。

它还有一种简写形式，格式如下。

 

/pattern/[attributes]

 

前面用于全局检索数字0～9的正则表达式声明可修改为如下内容。

 

var pattern=/[0-9]/g;

 

两种写法效果完全相同，需要注意参数attributes均仅适用于参数pattern为匹配规则字符串的情况。如果参数pattern填写的是其他正则表达式，则参数attributes必须省略     不写。

JavaScript中常用的正则表达式如表3-7所示。

表3-7  JavaScript中常用的正则表达式

括号表达式

解    释

[0-9]

查找0～9的数字

[a-z]

查找从小写字母a到小写字母z之间的字符

[A-Z]

查找从大写字母A到大写字母Z之间的字符

[A-z]

查找从大写字母A到小写字母z之间的字符

[abc]

查找括号之间的任意一个字符

[^abc]

查找括号内字符之外的所有内容

(red|blue|green)

查找“|”符号间隔的任意选项内容

量词表达式

解    释

n

查找任何至少包含一个n的字符串

n*

查找任何包含0个或多个n的字符串

n?

查找任何包含0～1个n的字符串

n{X}

查找包含X个n的字符串

n{X,Y}

查找包含X或Y个n的字符串

n{X,}

查找至少包含X个n的字符串

n$

查找任何以n结束的字符串

^n

查找任何以n开头的字符串

?=n

查找任何后面紧跟字符n的字符串

?!n

查找任何后面没有紧跟字符n的字符串

元  字  符

解    释

.

查找除了换行符与行结束符以外的单个字符

w

查找单词字符。w表示word（单词）

W

查找非单词字符

d

查找数字字符。d表示digital（数字）

D

查找非数字字符

s

查找空格字符。s表示space（空格）

S

查找非空格字符

查找换行符

f

查找换页符

查找回车符

查找制表符

续表

元  字  符

解    释

xxx

查找八进制数字xxx对应的字符，如果没有找到则返回null。例如130表示的是大写字母X

xdd

查找十六进制数字dd对应的字符，如果没有找到则返回null。例如x58表示的是大写字母X

uxxxx

查找十六进制数字xxxx对应的Unicode字符，如果没有找到则返回null。例如u0058表示的是大写字母X

注：量词表达式中的n可以替换成其他任意字符。

 

在RegExp对象创建完毕后有两种方法用于检索文本，如表3-8所示。

表3-8  JavaScript中RegExp对象的方法

方  法  名

解    释

exec()

该方法适用于具有参数的情况，每次运行都按照顺序从文本中找到对应的字符串，直到全部找完，再次运行会返回null值

test()

用于检索文本中是否包含指定的字符串

 

1）exec()方法的应用

exec()方法用于检索文本中匹配正则表达式的字符串内容，其语法格式如下。

 

RegExpObject.exec(string)

 

该方法如果找到了匹配内容，其返回值为存放有检索结果的数组；如果未找到任何匹配内容，则返回null值。  

例如：

 

var pattern=new RegExp("e");        //检索文本中是否包含小写字母e的正则表达式

var result1=pattern.exec("Hello "); //返回值为e，因为字符串中包含小写字母e

var result2=pattern.exec("Hello "); //返回值为null，因为字符串后续内容中不包含小                                     //写字母e

 

如果查到的内容较多，可以使用while循环语句进行检索。例如：

 

var s="Hello everyone";             //初始字符串

var pattern=new RegExp("e");        //检索文本中是否包含小写字母e的正则表达式

var result;                         //用于获取每次的检索结果

//while循环

while((result=pattern.exec(s))!=null){

    alert(result);                   //输出本次检索结果

}

 

关于while循环的更多内容可查阅第4章的4.2节。

【例3-19】 JavaScript正则表达式exec()方法的简单应用

使用exec()匹配符合正则表达式的字符串。

1. 

2. 

3.     

4.         

5.          JavaScript正则表达式exec()方法的应用

6.     

7.     

8.         

JavaScript正则表达式exec()方法的应用

9.         

10.        

原始字符串为："Happy New Year 2016"

11.         ＜script＞

12.         //原始字符串

13.         var s="Happy New Year 2016";

14.         //定义正则表达式，用于全局检索字母N是否存在

15.         var pattern=/N/g;

16.         //第一次匹配结果

17.         var result1=pattern.exec(s);

18.         //第二次匹配结果

19.         var result2=pattern.exec(s);

20.         alert("第一次匹配结果:" result1 "
第二次匹配结果:" result2);

21.        

22.    

23.

 

运行效果如图3-20所示。

 

图3-20  JavaScript正则表达式exec()方法的应用效果

2）test()方法的应用

test()方法用于检测文本中是否包含指定的正则表达式内容，返回值为布尔值，其语法格式如下。

 

RegExpObject.test(string)

 

其中，RegExpObject指的是自定义的RegExp对象；参数string指的是需要被检索的文本内容。如果文本中包含该RegExp对象指定的内容，返回值为true，否则返回值为false。该方法只用于无参数的情况，并且只检索一次，一旦检索到了就停止并提供返回值。

例如：

 

var pattern=new RegExp("e");        //检索文本中是否包含小写字母e的正则表达式

var result=pattern.test("Hello ");  //返回值为true，因为字符串中包含小写字母e

 

【例3-20】 JavaScript正则表达式test()方法的应用

使用test()匹配符合正则表达式的字符串。

 

1. 

2. 

3.     

4.         

5.          JavaScript正则表达式test()方法的应用

6.     

7.     

8.         

JavaScript正则表达式test()方法的应用

9.         

10.        

原始字符串为："Happy New Year 2016"

11.         ＜script＞

12.         //原始字符串

13.         var s="Happy New Year 2016";

14.         //定义正则表达式，用于全局检索字母N是否存在

15.         var pattern=/N/g;

16.         //匹配结果

17.         var result=pattern.test(s);

18.         alert("查找字母N的匹配结果:" result);

19.        

20.    

21.

 

运行效果如图3-21所示。

 

图3-21  JavaScript正则表达式test()方法的应用效果

4．Object对象

在JavaScript中所有类型都是对象，例如字符串、数字、数组等，这些可以带有属性和方法的变量称为对象。例如String对象包含了length属性用于获取字符串长度，也包含了substring()、indexOf()等方法用于处理字符串。

属性是与对象相关的值，方法是对象可执行的动作。例如将学生作为现实中的对象，具有学号、姓名、班级、专业等属性值，也可以具有选课、学习和考试等行为动作。

在JavaScript中创建student对象的写法如下。

 

var student=new Object();

student.name="张三";             //姓名

student.id="2016010212";        //学号

student.major="计算机科学与技术"; //专业

//学习方法

student.study=function(){

    alert("开始学习");

};

 

上述代码为student对象添加了name、id和major属性以及study()方法，分别用于表示学生的姓名、学号、专业属性和学习的行为动作。对象名称为自定义，其内部的属性和方法均可以根据实际需要自定义名称与数量。

获取对象中的指定属性有两种方法：一是对象变量名称后面加点（.）和属性名称（对象名.属性名）；二是对象变量名称后面使用中括号和引号包围属性名称（对象名["属性     名"]）。

这里仍然以上面的student对象为例，获取其中学生姓名的写法如下。

 

var result=student.name;

或

var result=student["name"];

 

另外还可以用该方法直接修改对象中的属性值，例如将之前的学生姓名“张三”换成新内容“李四”。

 

student.name="李四";

alert(student.name); //此时的输出结果不再是张三，而是修改后的李四

 

【例3-21】 JavaScript Object对象的简单应用

创建自定义名称的Object对象。

 

1. 

2. 

3.     

4.         

5.          JavaScript Object对象的简单应用

6.     

7.     

8.         

JavaScript Object对象的简单应用

9.         

10.        

11.             自定义ticket对象表示电影票信息。

12.        

13.         ＜script＞

14.             //自定义JavaScript对象ticket表示电影票

15.             var ticket=new Object();

16.             //电影票主题

17.             ticket.topic="海底总动员";

18.             //电影票时间

19.             ticket.time="2016年10月1日14:30";

20.             //电影票价格

21.             ticket.price="25元";

22.             //电影票座位号

23.             ticket.seat="8排6号";

24.             alert("电影主题: " ticket.topic "
电影时间: " ticket.time "

                 电影票价格: " ticket.price "
座位号: " ticket.seat);

25.        

26.    

27.

 

运行效果如图3-22所示。

 

图3-22 JavaScript Object对象的简单应用效果


3.2.2
  内置对象

1．Global对象

在JavaScript中Global对象又称为全局对象，其中包含的属性和函数可以用于所有的本地JavaScript对象。Global对象的全局属性和方法分别如表3-9和表3-10所示。

表3-9  Global对象的全局属性一览表

属 性 名 称

解    释

Infinity

表示正无穷大的数值，在数值超过了JavaScript规定的范围时使用

java

表示引用的一个java包，是Packages.java的简写


NaN

表示非数值（Not a Number），通常在其他类型转换成Number类型时使用

Packages

表示JavaPackage对象，是所有java包的根

undefined

表示未声明或未赋值的变量值

表3-10  Global对象的全局方法一览表

属 性 名 称

解    释

decodeURI()

解码URI

decodeURIComponent()

解码URI组件

encodeURI()

把字符串编码为URI

encodeURIComponent()

把字符串编码为URI组件

escape()

对字符串进行编码

eval()

将JavaScript字符串转换为脚本代码

getClass()

返回Java对象的类

isFinite()

判断某个值是否为无穷大

isNaN()

判断值是否为数字

Number()

把对象的值转换为数字类型

parseInt()

把字符串转换为整数

parseFloat()

把字符串转换为浮点数

String()

把对象的值转换为字符串类型

unescape()

对使用escape()编码的字符串进行解码

 

2．Math对象

在JavaScript中Math对象用于数学计算，无须初始化创建，可以直接使用关键字Math调用其所有的属性和方法。Math对象的常用属性和常用方法分别如表3-11和表3-12所示。

表3-11  Math对象的常用属性

属 性 名 称

解    释

E

返回算术常量e（约为2.718）

LN2

返回log以算术常量e为底的2的对数（约为0.693）

LN10

返回log以算术常量e为底的10的对数（约为2.302）

LOG2E

返回log以2为底的算术常量e的对数（约为1.414）

LOG10E

返回log以10为底的算术常量e的对数（约为0.434）

PI

返回圆周率π的值（约为3.1415926）

SQRT1_2

返回数字2的平方根的倒数（约为0.707）

SQRT2

返回数字2的平方根（约为1.414）

表3-12  Math对象的常用方法

方法名称

解    释

使 用 示 例

示例中result的值

abs(x)

返回数字的绝对值

var x =-100;

var result = abs(x);

100

续表

方法名称

解    释

使 用 示 例

示例中result的值

ceil(x)

使用进一法返回整数值，即舍去小数点和后面的所有内容，整数部分加1

var x = 3.1415;

var result = ceil(x);

4

cos(x)

返回数字的余弦值，x指的是弧度值

var x = Math.PI/2;

var result = cos(x);

0

floor(x)

使用去尾法返回整数值，即舍去小数点和后面的所有内容，整数部分不变

var x = 3.1415;

var result = floor(x);

3

max(x,y)

返回两个数之间的最大值

var x = 2, y = 3;

var result = max(x, y);

3

min(x,y)

返回两个数之间的最小值

var x = 2, y = 3;

var result = min(x, y);

2

pow(x,y)

返回x的y次方

var x = 2, y = 3;

var result = pow(x, y);

8

random()

返回[0,1)的随机数

var result = random();

0～1的随机浮点数

round(x)

返回数字四舍五入后的整数

var x = 3.1415;

var result = round(x);

3

sin(x)

返回数字的正弦值，x指的是弧度值

var x = Math.PI/2;

var result = sin(x);

1

sqrt(x)

返回数字的平方根

var x = 9;

var result = sqrt(x);

3

tan(x)

返回数字的正切值，x指的是弧度值

var x = Math.PI/4;

var result = tan(x);

1

注：角度值360°相当于弧度值2π。

 

【例3-22】 JavaScript Math对象的简单应用

使用Math对象中的部分属性和方法计算球体的体积，公式为V=4/3πR3。

 

1. 

2. 

3.     

4.         

5.          JavaScript Math对象的简单应用

6.     

7.     

8.         

JavaScript Math对象的简单应用

9.         

10.        

11.             已知球体半径为
100m
，使用Math对象计算球体的体积。

12.             公式：V=4/3πR3

13.         

14.         ＜script＞

15.         //初始化球体半径

16.         var R=100;

17.         //计算球体的体积

18.         var V=4/3*Math.PI*Math.pow(R,3);

19.         //四舍五入后显示计算结果

20.         alert("半径为100的球体体积是：" Math.round(V) "m³");

21.        

22.    

23.

 

运行效果如图3-23所示。

 

图3-23  JavaScript Math对象的简单应用效果


3.2.3
  宿主对象

宿主对象包括HTML DOM（文档对象模型）和BOM（浏览器对象模型），具体内容和用法请参考第6章。

3.3  JavaScript类型转换


3.3.1
  转换成字符串

在JavaScript中，布尔值类型（Boolean）和数字类型（Number）均可使用toString()方法把值转换为字符串形式。

布尔值类型（Boolean）的toString()方法只能根据初始值返回true或者false。例如：

 

var x=true;

var result=x.toString(); //返回"true"

 

数字类型（Number）使用toString()方法有两种模式，即默认模式和基数模式。

在默认模式中，toString()不带参数直接使用，此时无论是整数、小数或者科学记数法表示的内容都会显示为十进制的数值。例如：

 

var x1=99;

var x2=99.90;

var x3=1.25e8;

 

var result1=x1.toString(); //返回值为"99"

var result2=x2.toString(); //返回值为"99.9"

var result3=x3.toString(); //返回值为"125000000"

 

如果小数点后面是以0结束，那么在转换成String类型时最末端的0都会被省略，本例中变量x2的返回值就是"99.9"，而不是原始的"99.90"；使用科学记数法表示的数值也会显示成计算后的十进制完整结果，本例中变量x3的返回值就是"125000000"，而不是"1.25e8"本身。

在基数模式下，需要在toString()方法的括号内部填入一个指定的参数，根据参数指示把原始数据转换为二进制、八进制或十六进制数。其中，二进制对应基数2，八进制对应基数8，十六进制对应基数16。例如：

 

var x=10;

var result1=x.toString(2); //声明将原始数据转换成二进制数，返回值为"1010"

var result2=x.toString(8); //声明将原始数据转换成八进制数，返回值为"12"

var result3=x.toString(16); //声明将原始数据转换成十六进制数，返回值为"A"

 

由此可见，对于同一个变量使用toString()方法进行转换，如果填入的基数不同会导致返回完全不同的结果。

【例3-23】 JavaScript 转换字符串类型的简单应用

使用toString()方法将变量值转换为字符串类型。

 

1. 

2. 

3.     

4.         

5.          JavaScript转换字符串类型的简单应用

6.     

7.     

8.         

JavaScript转换字符串类型的简单应用

9.         

10.        

11.             将数值200分别转换为二进制、八进制和十六进制数。

12.        

13.         ＜script＞

14.         //初始化变量

15.         var x=200;

16.         //转换为二进制

17.         var result1=x.toString(2);

18.         //转换为八进制

19.         var result2=x.toString(8);

20.         //转换为十六进制

21.         var result3=x.toString(16);

22.         //输出结果

23.         alert("toString(2):" result1 "
toString(8):" result2 "
toString(16):

             " result3);

24.        

25.    

26.

 

运行效果如图3-24所示。

 

图3-24  JavaScript转换字符串类型的简单应用效果


3.3.2
  转换成数字

JavaScript提供了两种将String类型转换为Number类型的方法，即parseInt()和parseFloat()，其中parseInt()用于将值转换为整数，parseFloat()用于将值转换为浮点数。这两种方法仅适用于对String类型的数字内容的转换，其他类型的返回值都是NaN。

1．parseInt()方法

parseInt()方法转换的原理是从左往右依次检查每个位置上的字符，判断该位置上是否为有效数字，如果是则将有效数字转换为Number类型，直到发现不是数字的字符，停止后续的检查工作。例如：

 

var x="123hello";

var result=parseInt(x); //返回值是123，因为h不是有效数字，停止检查

 

如果需要转换的字符串从第一个位置就不是有效数字，则直接返回NaN。例如：

 

var x="hello";

var result=parseInt(x);//返回值是NaN，因为第一个字符h就不是有效数字，直接停止检查

 

由于parseInt()只能进行整数数字的转换，因此即使检测到某个字符位置上是小数点也会认为不是有效数字，从而终止检测和转换。例如：

 

var x="3.14";

var result=parseInt(x); //返回值是3，因为小数点不是有效数字，停止检查

 

parseInt()方法还有一个参数二，可以用于声明需要转换的数字为二进制、八进制、十进制、十六进制等。例如：

var x="10";

var result1=parseInt(x, 2);     //表示原始数据为二进制，返回值为2

var result2=parseInt(x, 8);     //表示原始数据为八进制，返回值为8

var result3=parseInt(x, 10);    //表示原始数据为十进制，返回值为10

var result4=parseInt(x, 16);    //表示原始数据为十六进制，返回值为16

 

有一种特殊情况需要注意：如果原始数据为十进制数，但是前面以数字0开头，则最好使用参数二进行特别强调，否则会被默认转换为八进制数。例如：

 

var x="010";

var result1=parseInt(x);        //表示原始数据为八进制，返回值为8

var result2=parseInt(x, 10);    //表示原始数据为十进制，返回值为10

var result3=parseInt(x, 8);     //表示原始数据为八进制，返回值为8

 

因此，如果是声明十进制数，尽量避免使用0作为开头的写法。

【例3-24】 JavaScript转换整数类型的简单应用

使用parseInt()方法将变量值转换为整数类型。

 

1. 

2. 

3.     

4.         

5.          JavaScript转换整数类型的简单应用

6.     

7.     

8.         

JavaScript转换整数类型的简单应用

9.         

10.        

11.             var x="3.99";

12.        

13.         ＜script＞

14.         //初始化变量x

15.         var x="3.99";

16.         //直接使用 号

17.         var result1=x 1;

18.         //转换为整数后使用 号

19.         var result2=parseInt(x) 1;

20.         //输出结果

21.         alert("x 1=" result1 "
parseInt(x) 1=" result2);

22.        

23.    

24.

 

运行效果如图3-25所示。

 

图3-25  JavaScript转换整数类型的简单应用效果

【代码说明】

本例声明了变量x并赋值为字符串"3.99"作为测试用例，变量result1的返回值为直接使用加号（ ）连接变量x和数字1的结果；变量result2的返回值为使用parseInt()方法对变量x进行类型转换后再与数字1相加的结果。

由图3-25可见，当直接使用加号（ ）时会默认为是两个字符串的连接，并没有进     行加法计算，只有先将变量x转换为整数类型后才进行了数学运算，其中字符串"3.99"转换后为数字3。这是由于加号的特殊性，既可以做数学运算符号也可以做字符串的连接      符号。

2．parseFloat()方法

parseFloat()方法的转换原理与parseInt()方法类似，都是从左往右依次检查每个位置上的字符，判断该位置上是否为有效数字，如果是则将有效数字转换为Number类型，直到发现不是数字的字符，停止后续的检查工作。

与parseInt()方法类似，如果需要转换的字符串从第一个位置就不是有效数字，则直接返回NaN。例如：

 

var x="hello3.14";

var result=parseFloat(x);//返回值是NaN，因为第一个字符h就不是有效数字，停止检查

 

与parseInt()方法不同的是，小数点在parseInt()方法中也被认为是无效字符，但是在parseFloat()方法中首次出现的小数点被认为是有效的。例如：

 

var x="3.14hello";

var result=parseFloat(x); //返回值是3.14，因为h不是有效数字，停止检查

 

如果同时出现多个小数点，只有第一个小数点是有效的。例如：

 

var x="
3.14.15
.926";

var result=parseFloat(x); //返回值是3.14，因为第二个小数点不是有效数字，停止检查

 

parseFloat()和parseInt()还有一个不同之处：parseFloat()方法只允许接受十进制的表示方法，而parseInt()方法允许转换二进制、八进制和十六进制数。

对于八进制数，如果是最前面带有数字0的形式，会直接忽略0转换为普通十进制数。例如：

 

var x="010";

var result1=parseInt(x);        //默认为八进制数，返回值为8

var result2=parseFloat(x);      //默认为十进制数，返回值为10

 

对于十六进制数，如果出现字母，则直接按照字面的意思认为是无效的字符串。例如：

 

var x="A";

var result1=parseInt(x, 16);    //parseInt()允许十六进制数，返回值为10

var result2=parseFloat(x);      //parseFloat()不允许十六进制数，返回值为NaN

 

【例3-25】 JavaScript转换浮点数类型的简单应用

使用parseFloat()方法将变量值转换为浮点数类型。

 

1. 

2. 

3.     

4.         

5.          JavaScript转换浮点数类型的简单应用

6.     

7.     

8.         

JavaScript转换浮点数类型的简单应用

9.         

10.        

11.             不同内容的字符串转换浮点数的结果。

12.        

13.         ＜script＞

14.         //纯字母的情况

15.         var result1=parseFloat("hello");

16.         //多个小数点的情况

17.         var result2=parseFloat("12.12.13");

18.         //既有数字又包含字母的情况

19.         var result3=parseFloat("3.14PI");

20.         //输出结果

21.         alert("hello=> " result1 "
12.12.13=> " result2 "
3.14PI=> "

             result3);

22.        

23.    

24.

 

运行效果如图3-26所示。

 

图3-26 JavaScript转换浮点数类型的简单应用效果


3.3.3
  强制类型转换

一些特殊的值无法使用toString()、parseInt()或parseFloat()方法进行转换，例如null、undefined等，此时可以使用JavaScript中的强制转换（Type Casting）对其进行转换。

在JavaScript中有3种强制类型转换函数，解释如下。

  • Boolean(value)：把指定的值强制转换为布尔值。
  • Number(value)：把指定的值强制转换为数值（整数或浮点数）。
  • String(value)：把指定的值强制转换为字符串。

1．Boolean()函数

JavaScript中的所有其他类型都可以使用类型转换函数Boolean()转换成布尔值，再进行后续计算。

当需要转换的值为非空字符串时，Boolean()函数的返回值为true；当需要转换的值为空字符串时会返回false。例如：

 

var result1=Boolean("hello");       //非空字符串的返回值为true

var result2=Boolean("");            //空字符串的返回值为false

 

当需要转换的值为数字时，整数0的返回值为false，其余所有整数与浮点数的返回值为true。例如：

 

var result1=Boolean(0);             //数字0的返回值为false

var result2=Boolean(999);           //非0整数的返回值为true

var result3=Boolean(3.14);          //浮点数的返回值为true

 

当需要转换的值为null或undefined时，Boolean()函数的返回值均为false。例如：

 

var result1=Boolean(null);          //返回值为false

var result2=Boolean(undefined);     //返回值为false

 

当需要转换的值本身就是布尔值时会转换成原本的值。例如：

 

var result1=Boolean(true);          //返回值为true

var result2=Boolean(false);         //返回值为false

2．Number()函数

在JavaScript中Number()函数可以将任意类型的值强制转换为数字类型。当需要转换的内容为符合语法规范的整数或小数时，Number()将调用对应的parseInt()或parseFloat()方法进行转换。例如：

 

var x=Number("2");          //返回值为整数2

var y=Number("2.9");        //返回值为浮点数2.9

 

当需要转换的值为布尔值时，true会转换为整数1，false会转换为整数0。例如：

 

var x=Number(true);         //返回值为整数1

var y=Number(false);        //返回值为整数0

 

与直接使用parseInt()和parseFloat()方法进行数字类型转换不同的是，如果需要转换的值为数字后面跟随超过一个小数点或其他无效字符，Number()会返回NaN。例如：

 

var x="
2.12.13
";

var result1=parseInt(x);    //返回值为整数2

var result2=parseFloat(x);  //返回值为浮点数2.12

var result3=Number(x);      //返回值为NaN

 

当需要转换的值为null或undefined时，Number()函数分别返回0和NaN。例如：

 

var x1=null;                //null值

var x2;                         //undefined值

var result1=Number(x1);     //返回整数0

var result2=Number(x2);     //返回NaN

 

当需要转换的值为其他自定义对象时，返回值均为NaN。例如：

 

var student=new Object();

var result=Number(student); //返回NaN

 

3．String()函数

在JavaScript中String()函数可以将任意类型的值强制转换为字符串类型并保留字面内容，这与toString()的转换方法类似。与toString()方法的不同之处在于，String()函数还可以将null、undefined类型强制转换为字符串类型。例如：

 

var x=null;

var result1=String(x);      //返回值为字符串"null"

var result2=x.toString();   //发生错误，无返回值

3.4  JavaScript运算符


3.4.1
  赋值运算符

在JavaScript中，=运算符专门用来为变量赋值，因此也称为赋值运算符。在声明变量时可以使用赋值运算符对其进行初始化，例如：

var x1=9;           //为变量x1赋值整数9

var x2="hello";     //为变量x2赋值字符串"hello"

 

用户也可以使用赋值运算符将已存在的变量值赋给新的变量，例如：

 

var x1=9;           //为变量x1赋值整数9

var x2=x1;          //将变量x1的值赋给新声明的变量x2

 

另外还可以使用赋值运算符为多个变量连续赋值，例如：

 

var x=y=z=99;       //此时变量x、y、z的赋值均为整数99

 

赋值运算符的右边还可以接受表达式，例如：

 

var x=100 20;       //此时变量x将赋值为120

 

这里使用了加法（ ）运算符形成的表达式，在运行过程中会优先对表达式进行计算，然后再对变量x进行赋值。加法运算符属于算术运算符的一种，接下来将介绍常用的各类算术运算符。


3.4.2
  算术运算符

在JavaScript中所有的基本算术均可以使用对应的算术运算符完成，包括加、减、乘、除、求余等。算术运算符的常见用法如表3-13所示。

表3-13  算术运算符的常见用法

运算符

解    释

示    例

变量result的返回值

加号，将两端的数值相加求和

var x=3, y=2;

var result = x y;

5

-

减号，将两端的数值相减求差

var x=3, y=2;

var result = x-y;

1

*

乘号，将两端的数值相乘求积

var x=3, y=2;

var result = x * y;

6

/

除号，将两端的数值相除求商

var x=4, y=2;

var result = x / y;

2

%

求余符号，将两端的数值相除求余数

var x=3, y=2;

var result = x % y;

1

自增符号，数字自增1

var x=3;

x ;

var result = x;

4

--

自减符号，数字自减1

var x=3;

x--;

var result = x;

2

 

其中，加号还有一个特殊用法，即可用于连接文本内容或字符串变量。例如：

 

var s1="Hello";

var s2=" JavaScript";

var s3=s1 s2; //结果是Hello JavaScript

 

如果将字符串和数字用加号相连，则会先将数字转换为字符串，再进行连接。例如：

 

var s="Hello";

var x=2016;

var result=s x;//结果是Hello2016

 

在上述代码中即使字符串本身也是数字内容，使用加号连接仍然不会进行数学运算。例如：

 

var s="2015";

var x=2016;

var result=s x;//结果是20152016，而不是两个数字相加的和

 

将赋值运算符（等号）和算术运算符（加、减、乘、除、求余数）结合使用可以达到简写的效果，具体用法如表3-14所示。

表3-14  运算符组合一览表

运算符组合

格    式

解    释

=

x = y

等同于x = x y

-=

x -= y

等同于x = x - y

*=

x *= y

等同于x = x * y

/=

x /= y

等同于x = x / y

%=

x %= y

等同于x = x % y

 


3.4.3
  逻辑运算符

逻辑运算符有3种类型，即NOT（逻辑非）、AND（逻辑与）和OR（逻辑或）。逻辑运算符使用的符号与对应关系如表3-15所示。

表3-15  逻辑运算符一览表

运 算 符

解    释

！

逻辑非，表示对布尔值结果再次反转。例如原先为true，加上！符号后返回值就变为false

&&

逻辑与，表示并列关系。注意，在&&符号前后的条件均为true，返回值才为true；只要有一个条件为false，则返回值就为false

||

逻辑或，表示二选一的关系。在||符号前后的条件只要有一个为true，返回值就为true；如果两个条件都为false，则返回值才为false

 

在进行逻辑运算之前，JavaScript中自带的抽象操作ToBoolean会将运算条件转换为逻辑值，转换规则如表3-16所示。

表3-16  ToBoolean的转换规则

值

示    例

转 换 结 果

布尔值真（true）

var x = true;

维持原状，仍为true

布尔值假（false）

var x = false;

维持原状，仍为false

null

var x = null;

false

undefined

var x = undefined;

false

续表

值

示    例

转 换 结 果

非空字符串

var x = "Hello";

true

空字符串

var x = "";

false

数字0

var x = 0;

false


NaN

var x =
NaN
;

false

其他数字（非0或NaN）

var x = 99;

true

对象

var student = new Object();

true

 

1．逻辑非运算符

在JavaScript中，逻辑非运算符（NOT）与在C语言和Java语言中相同，使用感叹号（！）并放置在运算内容左边。逻辑非运算符的返回值只能是布尔值，即true或者false。逻辑非的运算规则如表3-17所示。

表3-17  逻辑非运算符的规则一览表

运算数类型

示    例

返  回  值

数字0

var result = !0;

true

其他非0的数字

var result = !99;

false

对象

var student = new Object();

var result = !student;

false

空值null

var x = null;

var result = !x;

true


NaN

var x =
NaN
;

var result = !x;

true

未赋值undefined

var x;

var result = !x;

true

 

2．逻辑与运算符

在JavaScript中，逻辑与运算符（AND）使用双和符号（&&）表示，用于连接符号前后的两个条件判断，表示并列关系。当两个条件均为布尔值时，逻辑与的运算结果也是布尔值（true或者false），判断结果如表3-18所示。

表3-18  逻辑与（&&）的布尔值对照表

条件1

条件2

返  回  值

真（true）

真（true）

真（true）

真（true）

假（false）

假（false）

假（false）

真（true）

假（false）

假（false）

假（false）

假（false）

 

由表3-18可见，在条件1和条件2本身均为布尔值的前提下，只有当两个条件均为真时（true），逻辑与的返回值才为真（true），只要有一个条件为假（false），逻辑与的返回值就为假（false）。

另外还有一种特殊情况：当条件1为假（false）时，无论条件2是什么内容（例如null值、undefined、数字、对象等），最终返回值都是假（false）。原因是逻辑与有简便运算的特性，即如果第一个条件为假（false），直接判断逻辑与的运行结果为假（false），不再执行第二个条件。例如：

 

var x1=false;

var result=x1&&x2; //因为x1为false，可以忽略x2直接判断最终结果

alert(result);      //该语句的执行结果为false

 

由于条件1为false，逻辑与会直接判定最终结果为false，忽略条件2。因此，即使本例中条件2的变量未声明也不影响代码的运行。

但是如果条件1为真（true），无法判断最终结果，此时仍然需要判断条件2。例如上例中修改变量x1的值为真（true），代码如下。

 

var x1=true;

var result=x1&&x2;  //因为未声明变量x2，所以执行时发生错误

alert(result);      //该语句不会被执行

 

此时由于逻辑与需要判断条件2的值，所以会发现变量x2从未被声明过，从而在执行时发生错误，导致后续语句不会被执行。

如果存在某个条件是数字类型，则先将其转换为布尔值再继续判断。其中，数字0对应的是假（false），其他非0数字对应的都是真（true）。例如：

 

var x1=0;           //对应的是false

var x2=99;          //对应的是true

var result=x1&&x2;  //结果是false

 

逻辑与运算符的返回值不一定是布尔值，如果其中某个条件的返回值不是布尔值，有可能出现其他返回值。逻辑与的运算规则如表3-19所示。

表3-19  逻辑与（&&）特殊情况规则一览表

运算数类型

示    例

返  回  值

一个是对象，一个是布尔值

var student = new Object();

var result = student&&true;

返回对象类型，即student

两个都是对象

var student1 = new Object();

var student2= new Object();

var result = student1&&student2;

返回第二个对象，即student2

一个是空值null，一个是布尔值

var x = null;

var result = x&&true;

null

存在NaN

var x = 100 / 0;

var result = x&&true;


NaN

存在未赋值undefined

var x;

var result = x&&true;

undefined

注：以上所有情况均不包括条件1为假（false），因为此时无论条件2是什么内容，最终返回值都是假（false）。

 

3．逻辑或运算符

在JavaScript中，逻辑或运算符（OR）使用双竖线符号（||）表示，用于连接符号前后的两个条件判断，表示二选一的关系。当两个条件均为布尔值时，逻辑或的运算结果也是布尔值（true或者false）。判断结果如表3-20所示。

表3-20  逻辑或（||）的布尔值对照表

条件1

条件2

返  回 值

真（true）

真（true）

真（true）

真（true）

假（false）

真（true）

假（false）

真（true）

真（true）

假（false）

假（false）

假（false）

 

由表3-20可见，在条件1和条件2本身均为布尔值的前提下，只有当两个条件均为假（false）时，逻辑或的返回值才为假（false），只要有一个条件为真（true），逻辑或的返回值就为真（true）。

另外还有一种特殊情况：当条件1为真（true）时，无论条件2是什么内容（例如null值、undefined、数字、对象等），最终返回值都是真（true）。原因是逻辑或也具有简便运算的特性，即如果第一个条件为真（true），直接判断逻辑或的运行结果为真（true），不再执行第二个条件。例如：

 

var x1=true;

var result=x1||x2;  //因为x1为true，可以忽略x2直接判断最终结果

alert(result);      //该语句的执行结果为true

 

由于条件1为真（true），逻辑或会直接判定最终结果为真（true），忽略条件2。因此，即使本例中条件2的变量未声明也不影响代码的运行。

但是如果条件1为假（false），无法判断最终结果，此时仍然需要判断条件2。例如上例中修改变量x1的值为假（false），代码如下。

 

var x1=false;

var result=x1||x2;  //因为未声明变量x2，所以执行时发生错误

alert(result);      //该语句不会被执行

 

此时由于逻辑或需要判断条件2的值，所以会发现变量x2从未被声明过，从而在执行时发生错误，导致后续语句不会被执行。

和逻辑与运算符类似，如果存在某个条件是数字类型，则先将其转换为布尔值再继续判断。其中，数字0对应的是假（false），其他非0数字对应的都是真（true）。例如：

 

var x1=0;           //对应的是false

var x2=99;          //对应的是true

var result=x1||x2;  //结果是true

 

逻辑或运算符的返回值也不一定是布尔值，如果其中某个条件的返回值不是布尔值，有可能出现其他返回值。逻辑或的运算规则如表3-21所示。

表3-21  逻辑或（||）特殊情况规则一览表

运算数类型

示    例

返  回  值

条件1为false，条件2为对象

var student = new Object();

var result = false||student;

返回对象类型，即student

两个都是对象

var student1 = new Object();

var student2= new Object();

var result = student1||student2;

返回第一个对象，即student1

条件1为false，条件2为null

var x = null;

var result = false||x;

null

条件1为false，条件2为NaN

var x = 100 / 0;

var result = false||x;


NaN

条件1为false，条件2为undefined

var x;

var result = false||x;

undefined

注：以上所有情况均不考虑条件1为真（true），因为此时无论条件2是什么内容，根据逻辑或的简便运算特性，最终返回值都是真（true）。

 


3.4.4
  关系运算符

在JavaScript中关系运算符共有4种，即大于（>）、小于（<）、大于等于（>=）和小于等于（<=），用于比较两个值的大小，返回值一定是布尔值（true或false）。

1．数字之间的比较

数字之间的比较完全依据数学中比大小的规律，当条件成立时返回真（true），否则返回假（false）。例如：

 

var result1=99>0;       //符合数学规律，返回true

var result2=1<100;      //不符合数学规律，返回false

 

此时只要两个运算数都是数字即可，整数或小数都可以依据此规律进行比较，并且返回对应的布尔值。

2．字符串之间的比较

当两个字符串比大小时是按照从左往右的顺序依次比较相同位置上的字符，如果字符完全一样，则继续比较下一个。

如果两个字符串在相同位置上都是数字，则仍然按照数学上的大小进行比较。例如：

 

var x1="9";

var x2="1";

var result=x1>x2;       //返回true

 

此时从数学概念上来说9大于1，因此返回值是真（true）。

如果两个数字的位数不一样，仍然只对相同位置上的数字比大小，不按照数学概念看整体数值大小。例如：

 

var x1="9";

var x2="10";

var result=x1>x2;       //返回true

 

虽然从数学概念上来说10应该大于9，但是由于字符串同位置比较原则，此时比较的是变量x1中的9和变量x2中的1，得出结论9大于1，因此返回值仍然是真（true）。

由于JavaScript是一种大小写敏感的程序语言，所以如果相同位置上的字符大小写不同可以直接作出判断，因为大写字母的代码小于小写字母的代码。例如：

 

var x1="hello";

var x2="HELLO";

var result=x1>x2;       //返回true

 

在该例中按照从左往右的顺序先比较两个字符串的第一个字符，即变量x1中的h和变量x2中的H。由于大写字母的代码小于小写字母的代码，因此返回值是真（true）。此时已判断出结果，所以不再继续比较后续的字符。

如果大小写相同，则按照字母表的顺序进行比较，字母越往后越大。例如：

 

var x1="hello";

var x2="world";

var result=x1>x2;       //返回false

 

在上例中同样按照从左往右的顺序先比较两个字符串的第一个字符，即变量x1中的h和变量x2中的w。按照字母表的顺序h在先、w在后，所示返回值是假（false）。此时已判断出结果，所以不再继续比较后续的字符。

如果不希望两个字符串之间的比较受到大小写字母的干扰，而是无论大小写都按照字母表顺序比大小，可以将所有字母都转换为小写或大写的形式，再进行大小的比较。

使用toLowerCase()方法可以将所有字母转换为小写形式，例如：

 

var x1="ball";

var x2="CAT";

var result1=x1>x2;      //返回true

var result2=x1.toLowerCase()>x2.toLowerCase();      //返回false

 

本例给出了变量result1作为参照，当未进行大小写转换时，由于大写字母小于小写字母，即使字母c在字母表更后的位置，也只能返回真（true）；使用了toLowerCase()方法将字母全部转换为小写形式后，结果符合字母表顺序排序的要求，返回假（false）。

使用toUpperCase()方法可以将所有字母转换为大写形式，例如：

 

var x1="ball";

var x2="CAT";

var result1=x1>x2;      //返回true

var result2=x1.toUpperCase()>x2.toUpperCase();      //返回false

 

本例使用了toUpperCase()将所有字母转换为大写再进行比较，与之前使用toLowerCase()方法将所有字母转换为小写的原理相同，这里不再赘述。

3．字符串与数字的比较

当字符串与数字比大小时，总是先将字符串强制转换为数字再进行比较。例如：

var x1="100";

var x2=99;

var result1=x1>x2;  //返回true

 

如果字符串中包含字母或其他字符导致无法转换为数字，则直接返回假（false）。例如：

 

var x1="hello";

var x2=99;

var result1=x1>x2;  //返回false

 

因为变量x1的字符串在强制转换为数字时会变成NaN类型，当用NaN类型与数字类型比大小时默认返回假（false）。无论中间的关系运算符是哪一种，所产生的结果都是一样的，即使修改本例中的最后一行代码为相反的含义（var result1=x1
< p="">
<>


3.4.5
  相等性运算符

在JavaScript中相等性运算符共有4种，即等于（==）、非等于（!=）、全等于（===）和非全等于（!==），用于判断两个值是否相等，返回值一定是布尔值（true或false）。

1．等于和非等于运算符

在JavaScript中，判断两个数值是否相等用双等于符号（==），只有两个数值完全相等时返回真（true）；判断两个数值是否不相等使用感叹号加等于号（!=），在两个数值不一样的情况下返回真（true）。

在使用等于或非等于运算符进行比较时，如果两个值均为数字类型，则直接进行数学逻辑上的比较判断是否相等。例如：

 

var x1=100;

var x2=99;

alert (x1 == x2);       //返回false

 

若需要进行比较的数据存在其他数据类型（例如字符串、布尔值等），要先将运算符前后的内容尝试转换为数字再进行比较判断，转换规则如表3-22所示。

表3-22  数据类型转换规则表

数 据 类 型

示    例

转 换 结 果

布尔值（真）

true

1

布尔值（假）

false

0

字符串（纯数字内容）

"99"

99

字符串（非纯数字内容）

"99hello123"


NaN

空值

null

null

未定义的值

undefined

undefined

注：在进行数字转换时，null、undefined不可以进行转换，需保持原值不变，并且在判断时null与undefined被认为是相等的。

 

在进行了数据类型转换后仍然不是数字类型的特殊情况判断规则如表3-23所示。

表3-23  相等性特殊情况规则一览表

运算数类型

示    例

返  回  值

其中一个为null，另一个为undefined

var x1=null;

var x2;

var result = (x1==x2);

true

两个值均为null

var x1 = null;

var x2 = null;

var result = (x1==x2);

true

两个值均为undefined

var x1;

var x2;

var result = (x1==x2);

true

其中一个为数字，另一个为NaN

var x1 = 5;

var x2 = parseInt("a");

var result = (x1==x2);

false

两个值均为NaN

var x1 = parseInt("a");

var x2 = parseInt("b");

var result = (x1==x2);

false

 

2．全等于和非全等于运算符

全等号由3个连续的等号组成（===），也用于判断两个数值是否相同，作用和双等号（==）类似，但是全等号更加严格，在执行判断前不进行任何类型转换，两个数值必须数据类型相同并且内容也相同才返回真（true）。例如：

 

var x1=100;

var x2="100";

var result1=(x1 == x2);         //返回true

var result2=(x1 === x2);        //返回false

 

本例中变量x1为数字类型，变量x2是字符串类型。虽然它们的内容都是100，参照变量result1使用了普通双等号（==），返回结果为真（true）；但是变量result2使用全等号（===）会判定为假（false），因为它们数据类型不相同，数字不能等于字符串。所以全等号更为严谨，只要数据类型不同则直接判断为假（false），不再进行数字转换。

非全等号由感叹号和两个连续的等号组成（!==），用于判断两个数值是否不同。它有两种情况返回真（true），一是两个数值的数据类型不相同，二是两个数值虽然数据类型一样，但是内容不相同；其他情况均返回假（false）。继续使用上例中的变量x1和x2判断非全等，代码如下。

 

var x1=100;

var x2="100";

var result1=(x1 != x2);         //返回false

var result2=(x1 !== x2);        //返回true

 

此时参照变量result1使用的是普通非等于号（!=），因此会先把变量x2转换为数字再进行判断，得出两者相等的结论，最后返回结果为假（false）。变量result2使用的是非全等于号（!==），因此首先判断两个数值的数据类型。由于变量x1是数字，变量x2是字符串，数据类型不相同，因此直接返回真（true），不再继续判断数据的内容。


3.4.6
  条件运算符

JavaScript中的条件运算符语法和Java语言相同，语法格式如下。

 

变量=布尔表达式条件 ? 结果1 : 结果2

 

该格式使用问号（?）标记前面的内容为条件表达式，返回值以布尔值的形式出现。问号后面是两种不同的选择结果，使用冒号（:）将其隔开，如果条件为真则把结果1赋给变量，否则把结果2赋给变量。

例如使用条件运算符进行数字大小比较，代码如下。

 

var x1=5;

var x2=9;

var result=(x1>x2)? x1: x2;

 

本例中变量result将被赋予变量x1和x2中的最大值。表达式判断x1是否大于x2，如果为真则把x1值赋给result，否则把x2值赋给result。显然x1>x2的返回值是false，因此变量result最终会被赋成x2的值，最终答案为9。

3.5  本章小结

本章首先介绍了JavaScript的基本数据类型，包括Undefined、Null、String、Number和Boolean类型；其次介绍了JavaScript的3种对象类型，分别是本地对象、内置对象和宿主对象。然后讲解了JavaScript不同类型之间的转换方法，包括转换成字符串、数字和强制类型转换；最后在JavaScript运算符部分根据运算符的不同功能分别介绍了赋值运算符、算术运算符、逻辑运算符、关系运算符、相等性运算符以及条件运算符。

习题3

1．JavaScript的基本数据类型有哪些？

2．试举出5种水果的名称，并使用Array数组对象进行存储。

3．请使用Date对象获取今天的年月日。

4．已知“varmsg = "Merry Christmas";”，请分别解答以下内容。

（1）试获取字符串长度。

（2）试获取字符串中的第5个字符。

（3）试分别使用indexOf()和exec()方法判断字符串中是否包含字母a。

5．请分别说出下列内容中变量x的运算结果。

（1）varx = 9 9;

（2）varx = 9 "9";

（3）varx = "9" "9";

6．请分别说出下列数据类型转换的结果。

（1）parseInt("100plus101")

（2）parseInt("010")

（3）parseInt("3.99")

（4）parseFloat("
3.14.15
.926")

（5）parseFloat("A",16)

7．请分别说出下列布尔表达式的返回值。

（1）("100" > "99" ) && ( "100" > 99 )

（2）("100" == 100 ) && ( "100" === 100 )

（3）(!0 ) && ( !100 )

（4）("hello" > "javascript" ) || ( "hello" >"HELLO" )

8．转义字符
的作用是什么？怎样使用转义字符输出双引号？

 

 

JavaScript与jQuery网页前端开发与设计 pdf下载声明

本pdf资料下载仅供个人学习和研究使用，不能用于商业用途，请在下载后24小时内删除。如果喜欢，请购买正版

pdf下载地址

版权归出版社和作者所有，下载链接已删除。如果喜欢，请购买正版！

链接地址：JavaScript与jQuery网页前端开发与设计

标签：

相关推荐

随机推荐

热门标签

图像 多媒体 (3653)程序设计 (788)mysql (15)redis (6)分布式 (4)kafka (2)红包 (2)缓存 (1)事务 (1)elasticsearch (1)postgresql (1)MongoDB (1)TCP/IP (1)高并发 (1)无广告免费影视 (1)免费HTTP代理 (1)