JavaScript实战—JavaScript、jQuery、HTML5、Node.js实例大全
JavaScript实战—JavaScript、jQuery、HTML5、Node.js实例大全
第一篇 JavaScript实战篇
1 JavaScript概述
1.1 认识JavaScript
1.1.1 浏览器战争
1.1.2 寄生语言
1.1.3 DHTML、DOM和W3C
1.1.4 动态语言和静态语言
1.2 配置JavaScript开发环境
1.2.1 EditPlus
1.2.2 Adobe Dreamweaver
1.2.3 Sublime Text
1.2.4 JetBrains WebStorm
1.2.5 Aptana Studio
1.3 在Web页面中使用JavaScript
1.3.1 直接内嵌JavaScript代码
1.3.2 引用JavaScript文件
1.3.3 让收藏夹做更多事情
1.4 高效率的开发
1.4.1 熟悉语法
1.4.2 自动完成
1.4.3 使用成熟框架和便捷工具
1.5 相关参考
2 用JavaScript验证表单
2.1 最简单的表单验证——禁止空白的必填项目
2.1.1 最简单表单的HTML结构
2.1.2 绑定验证功能
2.1.3 绑定验证的另一种方式
2.2 处理各种类型的表单元素
2.2.1 input、textarea、hidden和button
2.2.2 checkbox、radio和select
2.3 用正则来校验复杂的格式要求
2.3.1 认识JavaScript正则
2.3.2 JavaScript正则符号及其说明
2.3.3 正则验证输入邮箱
2.4 改善用户体验
2.4.1 什么是用户体验
2.4.2 表单的用户体验改善
2.5 相关参考
3 用JavaScript实现照片展示
3.1 功能设计
3.1.1 HTML、CSS和JavaScript的分层关系
3.1.2 照片展示功能设计
3.2 照片加载与定位
3.2.1 HTML代码
3.2.2 CSS代码
3.2.3 JavaScript代码
3.3 响应鼠标动作
3.3.1 响应小照片单击动作
3.3.2 响应小照片上一组或下一组单击动作
3.4 响应键盘动作
3.4.1 常见键盘按键对应的ASCII码值
3.4.2 响应键盘动作
3.5 代码分离带来的红利
3.6 相关参考
4 AJAX——无刷新的用户体验
4.1 认识AJAX
4.1.1 AJAX是技术不是编程语言
4.1.2 同步与异步
4.1.3 AJAX与JSON
4.1.4 AJAX是如何工作的
4.2 XMLHttpRequest对象的常见方法和属性
4.2.1 XMLHttpRequest对象方法
4.2.2 XMLHttpRequest对象属性
4.3 检查待注册的用户名是否存在
4.3.1 客户端进行检测
4.3.2 服务器端获取数据
4.4 用Ajax提交数据给服务器
4.4.1 客户端部分
4.4.2 服务端部分
4.5 相关参考
5 瀑布流布局
5.1 瀑布流简介
5.1.1 瀑布流是不是万金油
5.1.2 穿过瀑布流看水帘洞
5.2 固定列宽的简单瀑布流实现
5.2.1 简单的HTML结构
5.2.2 让瀑布流动起来
5.3 非固定列宽的复杂瀑布流
5.3.1 非固定列宽瀑布流的争议
5.3.2 用Masonry实现任意非固定列宽瀑布流
5.4 延迟加载图片
5.4.1 延迟加载是何方神圣
5.4.2 延迟加载运用实例
5.5 相关参考
6 用户控件的构造——目录树视图
6.1 功能设计
6.2 树视图的最简化实现
6.2.1 树视图的HTML结构和数据结构
6.2.2 用递归最简化显示树
6.3 类和抽象
6.3.1 基于对象（Object-Based）和面向对象（Object-Oriented）
6.3.2 用JavaScript创建一个类
6.3.3 静态属性、方法和动态属性、方法
6.3.4 JavaScript继承
6.3.5 私有属性和方法
6.3.6 抽象
6.4 复杂的树视图
6.4.1 闭包隔离变量污染
6.4.2 省去new关键字调用控件
6.4.3 丰富控件方法
6.5 相关参考
第二篇 HTML 5+CSS 3实战篇
7 HTML 5概述
7.1 什么是HTML 5
7.1.1 差点夭折的HTML 5
7.1.2 HTML 5的前世今生
7.1.3 HTML 5理念
7.2 HTML 5的新特性
7.2.1 语义化
7.2.2 CSS 3
7.2.3 本地存储/离线应用
7.2.4 音频/视频多媒体
7.2.5 画布Canvas
7.2.6 本地文件访问
7.2.7 开放字体格式WOFF
7.2.8 地理位置
7.2.9 微数据
7.2.10 XMLHttpRequest Level 2
7.2.11 新的HTML Forms
7.2.12 其他特性及未来发展
7.3 有哪些浏览器支持HTML 5
7.4 如何书写HTML 5
7.4.1 HTML 5和XHTML的对比
7.4.2 HTML 5书写的误区
7.5 相关参考
8 焕然一新的表单
8.1 E-mail和URL类型的输入元素
8.1.1 各浏览器内核一览
8.1.2 各浏览器对E-mail和URL类型的支持情况
8.1.3 全球顶级域名
8.1.4 E-mail类型的使用
8.1.5 URL类型的使用
8.2 数值输入
8.2.1 各浏览器对number类型的支持情况
8.2.2 number类型的属性与使用
8.3 日期选择器
8.3.1 各浏览器对日期选择器的支持情况
8.3.2 日期选择器类型与使用
8.4 用datalist来实现自动提示
8.4.1 各浏览器对datalist的支持情况
8.4.2 各浏览器datalist的效果对比
8.4.3 datalist让input自动提示更智能
8.5 相关参考
9 在Web页面中轻松控制多媒体视频和音乐
9.1 在页面中插入视频和音频
9.1.1 容器和编解码器
9.1.2 使用HTML 5 Video和Audio API的好处
9.1.3 浏览器支持性检测
9.1.4 使用video/audio元素
9.1.5 使用source元素来兼容
9.2 video/audio元素的属性
9.2.1 通过HTML设置的属性
9.2.2 通过JavaScript设置的属性
9.3 video/audio元素的事件
9.3.1 video/audio元素的主要事件
9.3.2 设置当前播放位置
9.4 video/audio元素的方法
9.4.1 通过JavaScript控制的方法
9.4.2 鼠标悬停播放，移开暂停
9.5 综合应用——打造属于自己的视频播放器
9.5.1 界面设计
9.5.2 CSS 3+HTML布局
9.5.3 用JavaScript控制播放器
9.6 相关参考
10 用CSS 3画一个哆啦A梦
10.1 CSS 3简介
10.1.1 CSS 3历史情况
10.1.2 CSS 3的支持情况
10.2 阴影和文本阴影
10.2.1 阴影（box-shadow）
10.2.2 文本阴影（text-shadow）
10.3 圆角
10.3.1 圆角（border-radius）属性
10.3.2 圆角变圆与半圆
10.4 渐变
10.4.1 线性渐变
10.4.2 放射渐变
10.5 综合应用——画一个哆啦A梦
10.5.1 头部和脸部
10.5.2 脖子和铃铛
10.5.3 身体和四肢
10.5.4 让眼睛动起来
10.6 相关参考
11 酷炫的CSS 3动画效果——3D旋转方块
11.1 文本描边和文本填充色
11.1.1 文本描边（text-stroke）
11.1.2 文本填充（text-fill-color）
11.2 变形和变形原点
11.2.1 变形（transform）
11.2.2 变形原点（transform-origin）
11.3 简单应用——飞行旋转文本
11.3.1 过渡动画（transition）
11.3.2 自定义动画（animation）和@keyframes
11.3.3 飞行旋转的文本
11.4 综合应用——3D旋转方块
11.5 相关参考
12 一个可以离线的内容管理系统
12.1 功能设计
12.2 Web储存和应用缓存
12.2.1 本地存储（LocalStorage）
12.2.2 会话存储（SessionStorage）
12.2.3 应用程序缓存
12.2.4 搭建支持应用缓存的服务器
12.2.5 神奇的manifest file文件清单
12.3 HTML 5本地存储
12.3.1 Web IndexedDB
12.3.2 Web Sql Database
12.4 编写内容管理系统
12.4.1 可离线的HTML、JS和CSS
12.4.2 添加数据
12.4.3 列表和查询数据
12.4.4 更新数据
12.4.5 删除数据
12.4.6 前端交互
12.5 相关参考
13 SVG动画
13.1 什么是SVG
13.1.1 SVG的历史
13.1.2 SVG的优缺点
13.1.3 SVG的Hello world
13.1.4 SVG的调用方式
13.2 SVG形状
13.2.1 矩形（rect）
13.2.2 圆形（circle）
13.2.3 椭圆（ellipse）
13.2.4 线（line）
13.2.5 折线（polyline）
13.2.6 多边形（polygon）
13.2.7 路径（path）
13.3 SVG滤镜
13.3.1 高斯模糊滤镜（feGaussianBlur）
13.3.2 色彩转换滤镜（feColorMatrix）
13.3.3 位移滤镜（feOffset）
13.4 SVG渐变
13.4.1 线性渐变（linearGradient）
13.4.2 放射渐变（radialGradient）
13.5 制作简单的SVG动画——太阳系
13.5.1 SVG绘制的太阳和地球公转轨迹
13.5.2 贴图地球和地月系统
13.5.3 太阳系
13.6 相关参考
第三篇 HTML 5 Canvas实战篇
14 Canvas的初步应用——再画一个哆啦A梦
14.1 什么是Canvas
14.1.1 Canvas起源
14.1.2 Canvas的支持情况
14.1.3 Canvas优缺点及与SVG的对比
14.1.4 Canvas与JavaScript
14.1.5 Canvas的发展
14.1.6 Canvas标签的使用
14.2 绘制形状和文字
14.2.1 直线（lineTo）
14.2.2 矩形（rect）
14.2.3 圆（arc）
14.2.4 弧和圆角（arcTo）
14.2.5 贝塞尔曲线（quadraticCurveTo）
14.2.6 绘制文本（fillText）和strokeText
14.3 颜色、风格和阴影
14.3.1 线性渐变（createLinearGradient）
14.3.2 放射渐变（createRadialGradient）
14.3.3 阴影
14.4 再画一个哆啦A梦
14.4.1 准备工作
14.4.2 绘制头和脸
14.4.3 绘制眼睛和鼻子
14.4.4 绘制嘴巴和胡须
14.5 相关参考
15 Canvas的高级应用——制作飞行游戏
15.1 转换
15.1.1 放大和缩小
15.1.2 平移和旋转
15.1.3 矩阵转换
15.2 合成
15.2.1 用Photoshop控制图形合成
15.2.2 使用Canvas控制图形合成
15.3 碰撞检测
15.3.1 圆形碰撞检测
15.3.2 矩形碰撞检测
15.4 让游戏动起来
15.4.1 打飞机游戏设计
15.4.2 移动的星空
15.4.3 加载资源
15.4.4 我方战机、敌机和子弹
15.4.5 让游戏动起来
15.5 相关参考
16 Canvas的另类应用——压缩和解压
16.1 绘制图片
16.1.1 绘制外部载入的图片
16.1.2 Canvas给视频加字幕
16.2 像素级操作
16.2.1 反转颜色-底片效果
16.2.2 灰度控制——黑白灰效果
16.2.3 透明度控制
16.2.4 倒影
16.3 实现压缩解压功能
16.3.1 载入位图
16.3.2 压缩位图
16.3.3 保存到本地
16.4 相关参考
第四篇 jQuery实战篇
17 jQuery简介
17.1 什么是jQuery
17.1.1 jQuery的历史
17.1.2 为什么要使用jQuery
17.2 编写jQuery代码
17.2.1 下载jQuery
17.2.2 简单应用jQuery
17.2.3 调试jQuery程序
17.3 基于jQuery的UI插件
17.3.1 基于jQuery的扩展——jQuery UI插件
17.3.2 下载jQuery UI插件
17.3.3 简单应用jQuery UI插件
17.3.4 其他UI框架
17.4 相关参考
18 用动态效果来响应浏览者
18.1 jQuery库基础
18.1.1 jQuery库的核心方法——$()
18.1.2 jQuery库延迟等待加载模式
18.1.3 jQuery对象与DOM对象间的转换
18.2 基础选择器
18.2.1 简单选择器
18.2.2 进阶选择器
18.2.3 高级选择器
18.3 过滤选择器
18.3.1 jQuery所支持的过滤器
18.3.2 页面中的经典导航条
18.4 操作DOM对象
18.4.1 jQuery关于元素的操作
18.4.2 关于表的经典效果
18.4.3 jQuery关于节点的操作
18.4.4 超级链接提示效果
18.4.5 图片预览效果
18.5 响应事件
18.5.1 绑定和删除事件
18.5.2 jQuery所支持的事件和事件类型
18.5.3 表单动态效果
18.6 实现动态效果
18.6.1 jQuery库所支持的动画方法
18.6.2 实现可折叠的列表
18.6.3 淡入淡出效果
18.7 相关参考
19 用户交互操作、进度条和滑动条美化页面
19.1 页面中的交互操作
19.1.1 jQuery UI所支持的拖动组件
19.1.2 jQuery UI所支持的拖放组件
19.1.3 模拟Windows系统“回收站”
19.2 页面中的进度条效果
19.2.1 jQuery UI所支持的进度条工具集
19.2.2 实现进度条效果
19.3 页面中滑动条效果
19.3.1 jQuery UI所支持的滑动条工具集
19.3.2 实现图片滑块滚动条效果
19.3.3 实现简单颜色调色器
19.4 相关参考
20 用工具集实现酷炫的页面
20.1 实现“手风琴”效果
20.1.1 jQuery UI所支持的折叠面板工具集
20.1.2 实现经典的导航菜单
20.2 设计页面中各种对话框效果
20.2.1 jQuery UI所支持的对话框工具集
20.2.2 实现弹出和确认信息对话框效果
20.3 处理页面中的日期
20.3.1 jQuery UI所支持的日期选择器工具集
20.3.2 实现日期输入框
20.3.3 实现选取时间段功能
20.4 实现幻灯和分页效果
20.4.1 jQuery UI所支持的选项卡工具集
20.4.2 经典的选项卡效果
20.4.3 实现幻灯效果
20.4.4 实现分页效果
20.5 相关参考
第五篇 Node.js实战篇
21 Node.js简介
21.1 什么是Node.js
21.1.1 Node.js是平台
21.1.2 Node.js不是万能的
21.2 获取、安装和配置Node.js
21.2.1 Node.js获取
21.2.2 Node.js的安装
21.2.3 Node.js的配置
21.3 Node.js与其他服务器脚本语言的比较
21.4 Node.js与客户端JavaScript脚本的比较
21.5 相关参考
22 构造一个最简单的Web服务器
22.1 Node.js中脚本文件的组织
22.1.1 CommonJS规范
22.1.2 Node.js中的模块
22.1.3 HTTP协议
22.2 建立服务、路径处理与响应
22.2.1 用6行代码创建的Web服务器
22.2.2 让Web服务器响应和处理不同路径
22.3 异步与文件处理
22.3.1 智能的404提示
22.3.2 文件格式MIME协议
22.3.3 响应不同类型的文件
22.4 处理文件上传
22.4.1 安装并使用Node.js第三方模块
22.4.2 用node-formidable处理上传图片
22.5 相关参考
23 基于Express框架的Http服务器
23.1 引入Express框架
23.1.1 Express与Connect
23.1.2 在Node.js环境下安装Express
23.1.3 用Express搭建简单Web应用
23.2 Express的程序控制
23.2.1 模板引擎ejs
23.2.2 中间件（middleware）
23.3 Express的请求解析
23.3.1 路由routes
23.3.2 Request对象
23.4 Express的响应控制
23.4.1 wirte、end、send输出响应到客户端
23.4.2 JSON、JSONP输出响应到客户端
23.4.3 设置cookie
23.4.4 其他响应控制
23.5 相关参考
24 构造一个基于Socket的聊天系统
24.1 建立Socket服务器
24.1.1 安装Socket.IO
24.1.2 聊天室服务端
24.2 HTML 5中的Web Socket
24.2.1 Web Socket协议
24.2.2 Nginx对Web Socket的支持
24.2.3 Web Socket常用API
24.3 在Node.js中操作数据库
24.3.1 操作MS SQL Server
24.3.2 操作MySQL
24.3.3 操作MongoDB
24.4 完善聊天系统
24.4.1 聊天室客户端
24.4.2 Socket.IO常见API
24.5 相关参考
思维导图
防止博客图床图片失效，防止图片源站外链：
http://www.processon.com/chart_image/5e5b2ac4e4b02bc3ad6a0c22.png)
思维导图在线编辑链接：
