《JavaScript实战：JavaScript、jQuery、HTML5、Node.js实例大全》从最流行的前端应用场景出发，结合当下热门技术（AJAX、jQuery UI、瀑布流、HTML5、Node.js、CSS3），用最浅显的例子带领大家走向IT前沿。

《JavaScript实战：JavaScript、jQuery、HTML5、Node.js实例大全》分为5篇共24章：第一篇介绍JavaScript的基础知识，用原生的JavaScript做表单验证、照片展示、抽象树控件等；第二篇认识HTML5的流行特性，如新表单验证、CSS3动画、离线API及多媒体；第三篇学习强大的Canvas，它是网页游戏的基础；第四篇学习用jQuery 3.x进行实战开发；第五篇通过Node.js了解JavaScript强大的后端开发功能。

《JavaScript实战：JavaScript、jQuery、HTML5、Node.js实例大全》是了解JavaScript技术最好的图书，其丰富的参考资料和指南能够成为读者必要的参考工具，成为前端开发初学者绝佳的选择。

前  言

读懂本书

兴趣是第一位老师

歌德说过：“哪里没有兴趣，哪里就没有记忆。”技术会有非常多的知识点需要记忆，为了帮助读者容易地记住，在本书中，笔者收集了很多有趣的技术背景资料，期望读者都能够爱上JavaScript，爱上它所应用的各行各业。

还记得儿时的故事吗

小时候，总是偷偷地跑到老大爷那里听他讲过去奇奇怪怪的故事。后来，读了书，上了学，才知道那是历史。“读史使人明智，读诗使人灵透，数学使人精细，物理使人深沉，伦理使人庄重，逻辑修辞使人善辩。”英国哲学家弗朗西斯?培根把历史列在各科之首，足见其重要性。中国古言道“知古可以鉴今”，本书不仅讲技术还介绍了相关技术的来龙去脉，通过这些，让我们可以做一个有方向感的技术开发者。

基础知识与发展趋势

庄子说过：“水之积也不厚，则其负大舟也无力”，所以本书不仅介绍了JavaScript当下最主流和热门的发展应用，还包括JavaScript原生语法基础及其应用，尤其是对初学时需要注意的方方面面均有提示，以帮助读者少走弯路。

本书改版说明

Web前端技术日新月异，jQuery、Node.js还有HTML5的变化都非常大，为了跟上前端的变化，本书也进行了更新，jQuery已经从当初的1.X升级到了3.X，Node.js也从0.X更新到了8.X，HTML5和CSS3也完成了定稿，并确定了各种技术的使用场景。

这是一本实例书，也是一本引导书，本书是要教会你写代码，而不是教会你语法。本书涉及的工具和技术如下。

本书涉及的软件或工具

Firebug Aptana Studio MySQL

EditPlus Google Chrome MongoDB

Dreamweaver Mozilla Firefox Photoshop

Sublime Text Internet Explorer Nginx

WebStorm SQL Server

本书涉及的技术或框架

CSS3 Canvas Express框架

CSS Sprites HTML5 Video Connect

Transform HTML5 Audio Socket.IO

用户体验 SVG WebSocket

jQuery LocalStorage node-formidable

jQuery UI SessionStorage ejs

AJAX IndexedDB 闭包

DHTML Node.js 重构

JSON CommonJS 防止变量污染

JSONP MIME Masonry

HTML5 HTTP 延迟加载

正则 NPM

本书涉及的一些案例

淘宝工具“如意淘” 自定义树控件

搜狗云输入法 淘宝哇哦

有道云笔记——网页剪报 重大哀悼日的黑白滤镜

小米手机产品图集页面 打飞机

自己动手构造一个Web服务器 哆啦A梦

基于Express框架的HTTP服务器 图片的压缩和解压

构造一个基于Socket的聊天系统 DoS攻击与防范

本书特点

● 本书不是纯粹的理论知识介绍，也不是高深的技术研讨，完全从基础出发，用最简单的、典型的示例引申出核心知识，最后指出了通往“高精尖”进一步深入学习的道路。

● 本书没有深入介绍某一个知识块，而是全面介绍JavaScript涉及的前端领域、后端应用范围，能够系统性地观看到这门语言的全貌，以便在学习的过程中不至于迷失方向。

● 本书人文与技术结合，基础与参考结合，有大量的名人名言、名人轶事和参考资料，能激活读者的阅读兴趣且能够时时为读者提供参考。

● 本书旨在引导读者进行更多技术上的创新，每章最后都会用技术点参考的方式扩大读者的阅读范围。

● 本书代码遵循重构原理，避免代码污染，真心希望读者能编写出优秀的、简洁的、可维护的代码。

适用读者

● 爱好网页设计的大中专院校或职校的学生。

● 准备从事前端开发的人员。

● 喜欢或从事网页设计并对前端感兴趣的人员。

● 想扩展前端知识面的读者。

● JavaScript、jQuery、Node.js的爱好者。

下载地址

本书示例源代码下载地址（注意数字与字母大小写）如下：

https://pan.baidu.com/s/1Bp4FRpOERC9ghpjOPY2xHg

（密码：ha6w）

也可扫描右边二维码获取网址。如果下载有问题，请联系电子邮箱booksaga@163.com，邮件主题为“JavaScript实战—JavaScript、jQuery、HTML5、Node.js实例大全（第2版）”。

本书由张泽娜主笔，其他参与创作的还有王晓华、常新峰、林龙、王亚飞、薛燚、王刚、李雷霆、管书香、薛福辉、陈晓珺、陈云香，排名不分先后。

编  者

2018年3月 

目  录

第一篇  JavaScript实战篇

第1章  JavaScript概述 3

1.1  认识JavaScript 3

1.1.1  浏览器战争 3

1.1.2  寄生语言 5

1.1.3  DHTML、DOM和W3C 5

1.1.4  动态语言和静态语言 6

1.2  配置JavaScript开发环境 7

1.2.1  EditPlus 7

1.2.2  Adobe Dreamweaver 8

1.2.3  Sublime Text 9

1.2.4  JetBrains WebStorm 9

1.2.5  Aptana Studio 10

1.3  在Web页面中使用JavaScript 12

1.3.1  直接内嵌JavaScript代码 12

1.3.2  引用JavaScript文件 13

1.4  高效率的开发 13

1.4.1  熟悉语法 13

1.4.2  自动完成 15

1.4.3  使用成熟框架和便捷工具 16

1.5  相关参考 17

第2章  用JavaScript验证表单 18

2.1  最简单的表单验证——禁止空白的必填项目 18

2.1.1  最简单表单的HTML结构 19

2.1.2  绑定验证功能 20

2.1.3  绑定验证的另一种方式 21

2.2  处理各种类型的表单元素 23

2.2.1  input、textarea、hidden和button 23

2.2.2  checkbox、radio和select 26

2.3  用正则来校验复杂的格式要求 30

2.3.1  认识JavaScript正则 30

2.3.2  JavaScript正则符号及其说明 31

2.3.3  正则验证输入邮箱 33

2.4  改善用户体验 34

2.4.1  什么是用户体验 34

2.4.2  表单的用户体验改善 35

2.5  相关参考 40

第3章  用JavaScript实现照片展示 41

3.1  功能设计 41

3.1.1  HTML、CSS和JavaScript的分层关系 42

3.1.2  照片展示功能设计 42

3.2  照片加载与定位 43

3.2.1  HTML代码 43

3.2.2  CSS代码 43

3.2.3  JavaScript代码 46

3.3  响应鼠标动作 48

3.3.1  响应小照片单击动作 48

3.3.2  响应小照片上一组或下一组单击动作 49

3.4  响应键盘动作 49

3.4.1  常见键盘按键对应的ASCII码值 49

3.4.2  响应键盘动作 50

3.5  代码分离带来的红利 52

3.6  相关参考 52

第4章  AJAX——无刷新的用户体验 53

4.1  认识AJAX 53

4.1.1  AJAX是技术不是编程语言 53

4.1.2  同步与异步 54

4.1.3  AJAX与JSON 55

4.1.4  AJAX是如何工作的 56

4.2  XMLHttpRequest对象的常见方法和属性 58

4.2.1  XMLHttpRequest对象方法 59

4.2.2  XMLHttpRequest对象属性 61

4.3  检查待注册的用户名是否存在 63

4.3.1  客户端进行检测 63

4.3.2  服务器端获取数据 64

4.4  用AJAX提交数据给服务器 65

4.4.1  客户端部分 65

4.4.2  服务端部分 67

4.5  相关参考 68

第5章  瀑布流布局 69

5.1  瀑布流简介 69

5.1.1  瀑布流是不是万金油 69

5.1.2  穿过瀑布流看水帘洞 70

5.2  固定列宽的简单瀑布流实现 72

5.2.1  简单的HTML结构 73

5.2.2  让瀑布流动起来 74

5.3  非固定列宽的复杂瀑布流 76

5.3.1  非固定列宽瀑布流的争议 76

5.3.2  用Masonry实现任意非固定列宽瀑布流 77

5.4  延迟加载图片 79

5.4.1  延迟加载是何方神圣 79

5.4.2  延迟加载运用实例 80

5.5  相关参考 83

第6章  用户控件的构造——树视图 84

6.1  功能设计 84

6.2  树视图的最简化实现 85

6.2.1  树视图的HTML结构和数据结构 85

6.2.2  用递归最简化显示树 86

6.3  类和抽象 89

6.3.1  基于对象（Object-Based）和面向对象（Object-Oriented） 89

6.3.2  用JavaScript创建一个类 89

6.3.3  静态属性、方法和动态属性、方法 90

6.3.4  JavaScript继承 91

6.3.5  私有属性和方法 92

6.3.6  抽象 92

6.4  复杂的树视图 93

6.4.1  闭包隔离变量污染 93

6.4.2  省去new关键字调用控件 93

6.4.3  丰富控件方法 94

6.5  相关参考 100

第二篇  HTML5+CSS3实战篇

第7章  HTML5概述 103

7.1  什么是HTML5 103

7.1.1  差点夭折的HTML5 104

7.1.2  HTML5的前世今生 104

7.1.3  HTML5理念 106

7.2  HTML5的新特性 106

7.2.1  语义化 106

7.2.2  CSS3 107

7.2.3  本地存储/离线应用 108

7.2.4  音频/视频多媒体 109

7.2.5  画布Canvas 109

7.2.6  本地文件访问 109

7.2.7  开放字体格式WOFF 109

7.2.8  地理位置 110

7.2.9  微数据 110

7.2.10  XMLHttpRequest Level 2 111

7.2.11  新的HTML Forms 111

7.2.12  其他特性及未来发展 111

7.3  有哪些浏览器支持HTML5 112

7.4  如何书写HTML5 113

7.4.1  HTML5和XHTML的对比 113

7.4.2  HTML5书写的误区 114

7.5  相关参考 115

第8章  焕然一新的表单 116

8.1  E-mail和URL类型的输入元素 116

8.1.1  各浏览器内核一览 116

8.1.2  各浏览器对E-mail和URL类型的支持情况 117

8.1.3  全球顶级域名 118

8.1.4  E-mail类型的使用 120

8.1.5  URL类型的使用 121

8.2  数值输入 122

8.2.1  各浏览器对number类型的支持情况 122

8.2.2  number类型的属性与使用 122

8.3  日期选择器 123

8.3.1  各浏览器对日期选择器的支持情况 123

8.3.2  日期选择器类型与使用 123

8.4  用datalist来实现自动提示 125

8.4.1  各浏览器对datalist的支持情况 125

8.4.2  各浏览器datalist的效果对比 125

8.4.3  datalist让input自动提示更智能 126

8.5  相关参考 127

第9章  在Web页面中轻松控制多媒体视频和音乐 128

9.1  在页面中插入视频和音频 128

9.1.1  容器和编解码器 128

9.1.2  使用HTML5 Video和Audio API的好处 130

9.1.3  浏览器支持性检测 131

9.1.4  使用video/audio元素 131

9.1.5  使用source元素来兼容 132

9.2  video/audio元素的属性 133

9.2.1  通过HTML设置的属性 133

9.2.2  通过JavaScript设置的属性 134

9.3  video/audio元素的事件 135

9.3.1  video/audio元素的主要事件 135

9.3.2  设置当前播放位置 136

9.4  video/audio元素的方法 137

9.4.1  通过JavaScript控制的方法 137

9.4.2  鼠标悬停播放，移开暂停 138

9.5  综合应用——打造属于自己的视频播放器 138

9.5.1  界面设计 138

9.5.2  CSS3+HTML布局 139

9.5.3  用JavaScript控制播放器 141

9.6  相关参考 147

第10章  用CSS3画一个哆啦A梦 148

10.1  CSS3简介 148

10.1.1  CSS3历史情况 148

10.1.2  CSS3的支持情况 149

10.2  阴影和文本阴影 149

10.2.1  阴影（box-shadow） 150

10.2.2  文本阴影（text-shadow） 151

10.3  圆角 153

10.3.1  圆角（border-radius）属性 153

10.3.2  圆角变圆与半圆 154

10.4  渐变 154

10.4.1  线性渐变 154

10.4.2  放射渐变 156

10.5  综合应用——画一个哆啦A梦 157

10.5.1  头部和脸部 158

10.5.2  脖子和铃铛 162

10.5.3  身体和四肢 163

10.5.4  让眼睛动起来 168

10.6  相关参考 169

第11章  酷炫的CSS3动画效果—3D旋转方块 170

11.1  文本描边和文本填充色 170

11.1.1  文本描边（text-stroke） 171

11.1.2  文本填充（text-fill-color） 171

11.2  变形和变形原点 172

11.2.1  变形（transform） 172

11.2.2  变形原点（transform-origin） 175

11.3  简单应用——飞行旋转文本 176

11.3.1  过渡动画（transition） 177

11.3.2  自定义动画（animation）和@keyframes 178

11.3.3  飞行旋转的文本 179

11.4  综合应用——3D旋转方块 181

11.5  相关参考 183

第12章  一个可以离线的内容管理系统 184

12.1  功能设计 184

12.2  Web储存和应用缓存 185

12.2.1  本地存储（LocalStorage） 185

12.2.2  会话存储（SessionStorage） 186

12.2.3  应用程序缓存 186

12.2.4  搭建支持应用缓存的服务器 187

12.2.5  神奇的manifest file文件清单 188

12.3  HTML5本地存储 190

12.3.1  Web IndexedDB 190

12.3.2  Web SQL Database 193

12.4  编写内容管理系统 195

12.4.1  可离线的HTML、JS和CSS 195

12.4.2  添加数据 196

12.4.3  列表和查询数据 197

12.4.4  更新数据 198

12.4.5  删除数据 199

12.4.6  前端交互 199

12.5  相关参考 200

第13章  SVG动画 201

13.1  什么是SVG 201

13.1.1  SVG的历史 201

13.1.2  SVG的优缺点 202

13.1.3  SVG的Hello World 203

13.1.4  SVG的调用方式 204

13.2  SVG形状 204

13.2.1  矩形（rect） 205

13.2.2  圆形（circle） 206

13.2.3  椭圆（ellipse） 206

13.2.4  线（line） 206

13.2.5  折线（polyline） 207

13.2.6  多边形（polygon） 207

13.2.7  路径（path） 207

13.3  SVG滤镜 208

13.3.1  高斯模糊滤镜（feGaussianBlur） 209

13.3.2  色彩转换滤镜（feColorMatrix） 209

13.3.3  位移滤镜（feOffset） 210

13.4  SVG渐变 211

13.4.1  线性渐变（linearGradient） 211

13.4.2  放射渐变（radialGradient） 212

13.5  制作简单的SVG动画——太阳系 213

13.5.1  SVG绘制的太阳和地球公转轨迹 214

13.5.2  贴图地球和地月系统 214

13.5.3  太阳系 215

13.6  相关参考 216

第三篇  HTML5 Canvas实战篇

第14章  Canvas的初步应用—再画一个哆啦A梦 219

14.1  什么是Canvas 219

14.1.1  Canvas起源 219

14.1.2  Canvas的支持情况 220

14.1.3  Canvas优缺点及与SVG的对比 220

14.1.4  Canvas与JavaScript 221

14.1.5  Canvas的发展 222

14.1.6  Canvas标签的使用 222

14.2  绘制形状和文字 223

14.2.1  直线（lineTo） 223

14.2.2  矩形（rect） 225

14.2.3  圆（arc） 227

14.2.4  弧和圆角（arcTo） 227

14.2.5  贝塞尔曲线（quadraticCurveTo） 229

14.2.6  绘制文本（fillText）和strokeText 230

14.3  颜色、风格和阴影 231

14.3.1  线性渐变（createLinearGradient） 231

14.3.2  放射渐变（createRadialGradient） 233

14.3.3  阴影 234

14.4  再画一个哆啦A梦 235

14.4.1  准备工作 235

14.4.2  绘制头和脸 235

14.4.3  绘制眼睛和鼻子 236

14.4.4  绘制嘴巴和胡须 237

14.5  相关参考 238

第15章  Canvas的高级应用—制作飞行游戏 239

15.1  转换 239

15.1.1  放大和缩小 239

15.1.2  平移和旋转 241

15.1.3  矩阵转换 243

15.2  合成 244

15.2.1  用Photoshop控制图形合成 244

15.2.2  使用Canvas控制图形合成 245

15.3  碰撞检测 247

15.3.1  圆形碰撞检测 247

15.3.2  矩形碰撞检测 248

15.4  实现打飞机游戏 248

15.4.1  打飞机游戏设计 249

15.4.2  移动的星空 249

15.4.3  加载资源 251

15.4.4  我方战机、敌机和子弹 251

15.4.5  让游戏动起来 254

15.5  相关参考 255

第16章  Canvas的另类应用—压缩和解压 256

16.1  绘制图片 256

16.1.1  绘制外部载入的图片 257

16.1.2  Canvas给视频加字幕 258

16.2  像素级操作 259

16.2.1  反转颜色—底片效果 260

16.2.2  灰度控制——黑白灰效果 261

16.2.3  透明度控制 262

16.2.4  倒影 264

16.3  实现压缩解压功能 266

16.3.1  载入位图 266

16.3.2  压缩位图 266

16.3.3  保存到本地 267

16.4  相关参考 268

第四篇  jQuery实战篇

第17章  jQuery简介 271

17.1  什么是jQuery 271

17.1.1  jQuery的历史 272

17.1.2  为什么要使用jQuery 273

17.2  编写jQuery代码 275

17.2.1  下载jQuery 275

17.2.2  简单应用jQuery 276

17.2.3  调试jQuery程序 277

17.3  基于jQuery的UI插件 280

17.3.1  基于jQuery的扩展——jQuery UI插件 280

17.3.2  下载jQuery UI插件 281

17.3.3  简单应用jQuery UI插件 284

17.3.4  其他UI框架 286

17.4  相关参考 290

第18章  用动态效果来响应浏览者 291

18.1  jQuery库基础 291

18.1.1  jQuery库的核心方法——$() 291

18.1.2  jQuery库延迟等待加载模式 293

18.1.3  jQuery对象与DOM对象间的转换 294

18.2  基础选择器 295

18.2.1  简单选择器 295

18.2.2  进阶选择器 298

18.2.3  高级选择器 303

18.3  过滤选择器 307

18.3.1  jQuery所支持的过滤器 307

18.3.2  页面中的经典导航条 310

18.4  操作DOM对象 313

18.4.1  jQuery关于元素的操作 313

18.4.2  关于表的经典效果 315

18.4.3  jQuery关于节点的操作 317

18.4.4  超级链接提示效果 319

18.4.5  图片预览效果 320

18.5  响应事件 323

18.5.1  绑定和删除事件 323

18.5.2  jQuery所支持的事件和事件类型 325

18.5.3  表单动态效果 328

18.6  实现动态效果 334

18.6.1  jQuery库所支持的动画方法 334

18.6.2  实现可折叠的列表 336

18.6.3  淡入淡出效果 338

18.7  相关参考 340

第19章  用户交互操作、进度条和滑动条美化页面 341

19.1  页面中的交互操作 341

19.1.1  jQuery UI所支持的拖动组件 341

19.1.2  jQuery UI所支持的拖放组件 343

19.1.3  模拟Windows系统“回收站” 345

19.2  页面中的进度条效果 349

19.2.1  jQuery UI所支持的进度条工具集 349

19.2.2  实现进度条效果 350

19.3  页面中滑动条效果 352

19.3.1  jQuery UI所支持的滑动条工具集 352

19.3.2  实现图片滑块滚动条效果 354

19.3.3  实现简单颜色调色器 357

19.4  相关参考 359

第20章  用工具集实现酷炫的页面 360

20.1  实现“手风琴”效果 360

20.1.1  jQuery UI所支持的折叠面板工具集 360

20.1.2  实现经典的导航菜单 362

20.2  设计页面中各种对话框效果 363

20.2.1  jQuery UI所支持的对话框工具集 364

20.2.2  实现弹出和确认信息对话框效果 365

20.3  处理页面中的日期 368

20.3.1  jQuery UI所支持的日期选择器工具集 368

20.3.2  实现日期输入框 371

20.3.3  实现选取时间段功能 372

20.4  实现幻灯和分页效果 374

20.4.1  jQuery UI所支持的选项卡工具集 374

20.4.2  经典的选项卡效果 375

20.4.3  实现幻灯效果 377

20.4.4  实现分页效果 379

20.5  相关参考 382

第五篇   Node.js 实战篇

第21章  Node.js简介 385

21.1  什么是Node.js 385

21.1.1  Node.js是平台 385

21.1.2  Node.js不是万能的 386

21.2  获取、安装和配置Node.js 388

21.2.1  Node.js的获取 388

21.2.2  Node.js的安装 389

21.2.3  Node.js的配置 390

21.3  Node.js与其他服务器脚本语言的比较 391

21.4  Node.js与客户端JavaScript脚本的比较 392

21.5  相关参考 393

第22章  构造一个最简单的Web服务器 394

22.1  Node.js中脚本文件的组织 395

22.1.1  CommonJS规范 395

22.1.2  Node.js中的模块 395

22.1.3  HTTP协议 396

22.2   建立服务、路径处理与响应 398

22.2.1  用6行代码创建的Web服务器 398

22.2.2  让Web服务器响应和处理不同路径 399

22.3  异步与文件处理 401

22.3.1  智能的404提示 401

22.3.2  文件格式MIME协议 404

22.3.3  响应不同类型的文件 406

22.4  处理文件上传 409

22.4.1  安装并使用Node.js第三方模块 409

22.4.2  用node-formidable处理上传图片 411

22.5  相关参考 413

第23章  基于Express框架的HTTP服务器 414

23.1  引入Express框架 414

23.1.1  Express与Connect 414

23.1.2  在Node.js环境下安装Express 415

23.1.3  用Express搭建简单Web应用 416

23.2  Express的程序控制 418

23.2.1  模板引擎ejs 418

23.2.2  中间件（middleware） 422

23.3  Express的请求解析 423

23.3.1  路由routes 423

23.3.2  Request对象 424

23.4  Express的响应控制 425

23.4.1  write、end、send输出响应到客户端 426

23.4.2  JSON、JSONP输出响应到客户端 427

23.4.3  设置cookie 428

23.4.4  其他响应控制 428

23.5  相关参考 428

第24章  构造一个基于Socket的聊天系统 429

24.1  建立Socket服务器 429

24.1.1  安装Socket.IO 430

24.1.2  聊天室服务端 431

24.2  HTML5中的Web Socket 432

24.2.1  Web Socket协议 432

24.2.2  Nginx对Web Socket的支持 433

24.2.3  Web Socket常用API 433

24.3  在Node.js中操作数据库 434

24.3.1  操作MS SQL Server 434

24.3.2  操作MySQL 436

24.3.3  操作MongoDB 440

24.4  完善聊天系统 442

24.4.1  聊天室客户端 442

24.4.2  Socket.IO 常见API 443

24.5  相关参考 444

Web前端时代来临，市场选择了Node.js，选择了JavaScript，而今JavaScript变身为前后台通杀的编程语言，必将成为与Java、PHP、Python同等分量的语言。JavaScript能够做到的事情越来越多，想使用JavaScript做更多事情的人也将越来越多。

本书使用JavaScript发展历史上的经典范例讲述JavaScript最重要的原生基础，结合当前Web前端件开发实践，选用jQuery和CSS3讲解主流应用，展望未来前端技术的发展，加入HTML5和Node.js这两项潜力技术，紧紧把握移动端和服务端这两个热门发展方向。内容图文并茂，能使读者耳目一新；行文妙趣怡然，阅读轻松惬意；案例、代码精雕细琢，易于复用和扩展。

张泽娜，深资Web开发工程师，从99年始混迹于网络，精通Web前端开发和服务器脚本语言技术，善于扑捉潜力技术，是为数不多的程序员兼心理咨询师。有10年以上Web开发经验，具有7年以上前端系统架构和技术团队带领经验，追求高效编程、快乐编程。