JAVASCRIPT实战:JAVASCRIPT.JQUERY.HTML5.NODE.JS实例大全(第2版)

目 录 **篇 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