Web开发权威指南.pdf

目 录第一部分 浏览器编程基础第 1 章 配置开发环境 .................................... 21.1 安装 Google Chrome................................. 21.2 安装并配置 Atom ..................................... 31.3 文档和参考资料 ....................................... 61.4 命令行速成 ............................................... 81.4.1 查看当前工作目录 ........................ 91.4.2 新建目录 ...................................... 101.4.3 切换目录 ...................................... 101.4.4 列出目录中的文件 ....................... 111.4.5 获取管理员权限 ........................... 121.4.6 退出程序 ...................................... 131.5 安装 Node.js 和 browser-sync .................. 141.6 延展阅读：Atom 的替代工具 ................. 15第 2 章 开始第一个项目 ............................... 172.1 搭建 Ottergram ........................................ 182.1.1 开始写 HTML .............................. 192.1.2 链接到样式表 .............................. 222.1.3 添加内容 ...................................... 222.1.4 添加图片 ...................................... 232.2 浏览网页 .................................................. 252.3 Chrome 开发者工具 ................................. 272.4 延展阅读：CSS 版本 ............................... 292.5 延展阅读：favicon.ico ............................ 292.6 中级挑战：添加 favicon.ico .................... 30第 3 章 样式 .................................................... 313.1 创建基本样式 .......................................... 323.2 为 HTML 文件添加样式 .......................... 333.3 样式的构成 .............................................. 343.4 第一条样式规则 ...................................... 353.5 样式继承 .................................................. 383.6 图片自适应 .............................................. 453.7 颜色 ......................................................... 473.8 调整空白 .................................................. 493.9 添加字体 .................................................. 533.10 初级挑战：更改颜色............................. 563.11 延展阅读：优先级！当选择器发生冲突了…… ............................................ 56第 4 章 flexbox 响应式布局 ......................... 584.1 界面拓展 .................................................. 594.1.1 添加大图 ...................................... 594.1.2 缩略图水平布局 .......................... 614.2 flexbox ..................................................... 634.2.1 创建 flex 容器 .............................. 644.2.2 改变 flex-direction ................. 654.2.3 flex 项目中的元素分组 ................ 664.2.4 flex 缩写属性 ............................... 684.2.5 flex 项目的排序与对齐方式 ........ 694.2.6 居中显示大图 .............................. 734.3 绝对定位与相对定位 .............................. 75第 5 章 使用媒体查询完成自适应布局 ...... 825.1 重置视口 .................................................. 835.2 添加媒体查询 .......................................... 855.3 初级挑战：屏幕方向 .............................. 895.4 延展阅读：flexbox 布局通用解决方案与 bug ....................................... 895.5 高级挑战：圣杯布局 .............................. 89 2 目 录第 6 章 JavaScript 事件处理 ....................... 906.1 准备锚标签 .............................................. 916.2 第一个脚本 .............................................. 946.3 Ottergram 中的 JavaScript 描述 ............... 956.4 声明字符串变量 ...................................... 966.5 操作控制台 .............................................. 976.6 访问 DOM 元素 ....................................... 996.7 编写 setDetails 函数 .......................... 1046.8 从函数返回值 ........................................ 1086.9 添加事件监听器 .................................... 1106.10 访问所有缩略图 .................................. 1156.11 迭代缩略图数组 .................................. 1176.12 中级挑战：劫持链接 .......................... 1186.13 高级挑战：随机的水獭 ....................... 1196.14 延展阅读：严格模式 .......................... 1196.15 延展阅读：闭包 .................................. 1196.16 延展阅读：NodeList 对象和HTMLCollection 对象 ........................ 1206.17 延展阅读：JavaScript 类型 ................. 122第 7 章 使用 CSS 营造视觉效果 .............. 1237.1 隐藏及显示大图 .................................... 1237.1.1 创建隐藏大图的样式 ................. 1257.1.2 用 JavaScript 隐藏大图 .............. 1277.1.3 监听键盘事件 ............................ 1287.1.4 重新显示大图 ............................ 1317.2 使用 CSS 过渡改变状态 ........................ 1327.2.1 变形 ........................................... 1337.2.2 添加 CSS 过渡效果 .................... 1357.2.3 使用定时函数 ............................ 1387.2.4 基于类的过渡效果 ..................... 1397.2.5 通过 JavaScript 触发过渡效果 ........................................... 1407.3 自定义定时函数 .................................... 1417.4 延展阅读：强制类型转换的规则 ......... 143第二部分 模块、对象及表单第 8 章 模块、对象和方法 ......................... 1468.1 模块 ....................................................... 1468.1.1 模块模式 .................................... 1478.1.2 通过 IIFE 修改对象 ................... 1498.2 搭建我们的 CoffeeRun 吧 ..................... 1518.3 创建数据存储模块 ................................ 1528.4 在命名空间上添加一个模块 ................. 1538.5 构造函数 ............................................... 1548.5.1 构造函数的原型 ........................ 1558.5.2 为构造函数添加方法 ................. 1578.6 创建 Truck 模块 ................................... 1598.6.1 添加订单 .................................... 1608.6.2 删除订单 .................................... 1618.7 调试 ....................................................... 1638.7.1 使用开发者工具定位 bug .......... 1658.7.2 使用 bind 设置 this ................. 1698.8 在页面加载时初始化 CoffeeRun .......... 1708.9 初级挑战：使用非星迷熟悉的餐车 ID ... 1738.10 延展阅读：模块私有数据 ................... 1738.11 中级挑战：私有化数据 ...................... 1748.12 延展阅读：在 forEach 的回调函数中设置 this ................................. 174第 9 章 Bootstrap 简介 ............................... 1759.1 添加 Bootstrap ....................................... 1759.2 创建订单表单 ........................................ 1779.2.1 添加文本输入字段 .................... 1789.2.2 提供单选按钮 ............................ 1829.2.3 添加下拉菜单 ............................ 1839.2.4 添加范围滑块 ............................ 1859.2.5 添加提交按钮和重置按钮 ......... 185第 10 章 使用 JavaScript 处理表单 ........ 18710.1 创建 FormHandler 模块 ..................... 18810.1.1 jQuery 简介 ............................ 18910.1.2 导入 jQuery ............................ 18910.1.3 使用 selector 参数配置FormHandler 实例 ................ 19010.2 添加提交处理程序 .............................. 19210.2.1 提取数据 ................................ 19310.2.2 接受并调用回调函数 ............. 19510.3 使用 FormHandler .............................. 19610.4 UI 优化 ................................................ 198 10.5 初级挑战：添加超级尺寸 ................... 19910.6 中级挑战：当滑块滑动时显示其数值 .... 19910.7 高级挑战：添加选择 ........................... 200第 11 章 从数据到 DOM ............................. 20111.1 建立清单 .............................................. 20211.2 创建 CheckList 模块 .......................... 20311.3 创建行构造函数 .................................. 20411.4 在提交时创建清单行 ........................... 20911.5 通过单击行完成订单 ........................... 21211.5.1 创建 CheckList.prototype.removeRow 方法 ..................... 21311.5.2 删除被覆盖的条目 ................. 21311.5.3 编写 addClickHandler方法 ........................................ 21411.5.4 调用 addClickHandler ......... 21611.6 初级挑战：在描述中加入浓度信息 .... 21711.7 中级挑战：不同口味，不同颜色 ........ 21711.8 高级挑战：允许编辑订单 ................... 217第 12 章 表单校验 ........................................ 21812.1 required 属性..................................... 21812.2 使用正则表达式校验表单 ................... 22012.3 约束校验 API ....................................... 22012.3.1 监听 input 事件 .................... 22212.3.2 将 input 事件和有效性校验绑定 ................................ 22312.3.3 触发有效性检查 ..................... 22412.4 美化有效元素和无效元素 ................... 22512.5 中级挑战：为脱咖啡因咖啡进行自定义校验 .......................................... 22712.6 延展阅读：Webshim 库 ....................... 227第 13 章 Ajax ................................................ 22913.1 XMLHttpRequest 对象 ......................... 23013.2 RESTful Web 服务 ............................... 23013.3 RemoteDataStore 模块 ....................... 23113.4 向服务器发送数据 ............................... 23213.4.1 使用 jQuery 的$.post 方法 .... 23313.4.2 添加回调函数 ......................... 23313.4.3 检查 Ajax 的请求和响应 ....... 23413.5 从服务器检索数据 .............................. 23713.5.1 查看响应数据 ........................ 23713.5.2 添加回调函数 ........................ 23813.6 从服务器删除数据 .............................. 24013.7 用 RemoteDataStore 替换 DataStore ..... 24113.8 中级挑战：校验远端服务器 ............... 24313.9 延展阅读：Postman ............................ 243第 14 章 Deferred 和 Promise ................ 24414.1 Promise 和 Deferred ......................... 24514.2 返回 Deferred .................................... 24614.3 通过 then 注册回调函数 .................... 24714.4 使用 then 处理失败的情况 ................. 24814.5 在仅支持回调函数的 API 上使用 Deferred..................................... 25014.6 为 DataStore 配置 Promise ............... 25414.6.1 创建并返回 Promise ............. 25514.6.2 resolve 一个 Promise .......... 25614.6.3 将其他 DataStore 方法Promise 化 ............................. 25614.7 中级挑战：回退到 Datastore ........... 259第三部分 实时数据传输第 15 章 Node.js 入门 ................................ 26215.1 Node 和 npm ........................................ 26315.1.1 npm init ............................... 26415.1.2 npm 脚本 ................................ 26515.2 Hello, World ........................................ 26515.3 添加一个 npm 脚本 ............................. 26715.4 用文件提供服务 .................................. 26815.4.1 用 fs 模块读取文件 ............... 26915.4.2 处理请求 URL ....................... 26915.4.3 使用 path 模块 ...................... 27115.4.4 创建自定义模块 ..................... 27215.4.5 使用自定义模块 ..................... 27215.5 错误处理 .............................................. 27315.6 延展阅读：npm 模块注册 ................... 27415.7 初级挑战：创建自定义错误页面 ....... 275 4 目 录15.8 延展阅读：MIME 类型 ....................... 27515.9 中级挑战：动态提供 MIME 类型 ....... 27615.10 高级挑战：将错误处理放到单独的模块中 .................................... 276第 16 章 使用 WebSocket 进行实时通信 ..... 27716.1 配置 WebSocket .................................. 27816.2 测试 WebSocket 服务器 ...................... 28016.3 创建聊天服务器的功能 ....................... 28116.4 第一次聊天！ ...................................... 28316.5 延展阅读：WebSocket 库 socket.io .... 28316.6 延展阅读：WebSocket 服务 ............... 28416.7 初级挑战：我重复了我的消息吗？ .... 28416.8 中级挑战：Speakeasy ......................... 28416.9 高级挑战：聊天机器人 ....................... 284第 17 章 借助 Babel 使用 ES6 ................. 28517.1 编译 JavaScript 的工具 ........................ 28617.2 Chattrbox 客户端应用程序 .................. 28817.3 迈出 Babel 的第一步 ........................... 28917.4 使用 Browserify 打包模块 ................... 29117.5 新增 ChatMessage 类 ......................... 29417.6 创建 ws-client 模块 .......................... 29717.6.1 处理连接 ................................ 29817.6.2 处理事件并发送消息 ............. 29917.6.3 发出和回应一条消息 ............. 30117.7 延展阅读：将其他语言编译成JavaScript ............................................. 30217.8 初级挑战：默认导入名称 ................... 30317.9 中级挑战：提醒连接关闭 ................... 30317.10 延展阅读：变量提升......................... 30317.11 延展阅读：箭头函数......................... 305第 18 章 继续 ES6 探索之旅 ..................... 30618.1 将 jQuery 安装成一个 Node 模块 ........ 30718.2 创建 ChatForm 类 ............................... 30718.3 创建 ChatList 类 ............................... 31018.4 使用 Gravatar ....................................... 31218.5 请求用户名 .......................................... 31418.6 使用会话存储 ...................................... 31618.7 格式化和更新消息时间戳 ................... 31818.8 初级挑战：给消息添加特效 ............... 32018.9 中级挑战：缓存消息 .......................... 32018.10 高级挑战：独立的聊天室 ................. 321第四部分 应用架构第 19 章 初识 MVC 和 Ember .................. 32419.1 Tracker ................................................ 32519.2 Ember：一款 MVC 框架 ..................... 32619.2.1 安装 Ember ............................ 32719.2.2 创建 Ember 应用 .................... 32819.2.3 启动服务器 ............................ 32919.3 安装外部库和插件 .............................. 33019.4 修改配置 ............................................. 33219.5 延展阅读：npm 和 Bower 的安装命令 ..................................................... 33519.6 初级挑战：限制引入 .......................... 33619.7 中级挑战：添加 Font Awesome 库 ..... 33619.8 高级挑战：自定义 NavBar ................. 336第 20 章 路由选择、路由表、模型 ......... 33720.1 Ember 生成器 ...................................... 33820.2 嵌套路由 ............................................. 34220.3 Ember Inspector ................................... 34420.4 指派模型 ............................................. 34420.5 beforeModel ....................................... 34720.6 延展阅读：setupController 和afterModel ......................................... 347第 21 章 模型和数据绑定 .......................... 34921.1 定义模型 ............................................. 34921.2 创建记录 ............................................. 35121.3 get 和 set ........................................... 35321.4 计算属性 ............................................. 35421.5 延展阅读：检索数据 .......................... 35721.6 延展阅读：保存或删除数据 ............... 35821.7 初级挑战：修改计算属性 ................... 35821.8 中级挑战：对新的目击记录进行标记 ..................................................... 35821.9 高级挑战：添加称呼 .......................... 359 第 22 章 数据——适配器、序列化器和变换器 ........................................ 36022.1 适配器 .................................................. 36222.2 内容安全策略 ...................................... 36522.3 序列化器 .............................................. 36622.4 变换器 .................................................. 36822.5 延展阅读：Ember CLI Mirage ............ 36822.6 中级挑战：内容安全 ........................... 36922.7 高级挑战：Mirage ............................... 369第 23 章 视图与模板 ................................... 37023.1 Handlebars ........................................... 37123.2 模型 ..................................................... 37123.3 辅助方法 .............................................. 37123.3.1 条件语句 ................................ 37223.3.2 {{#each}}循环 ...................... 37323.3.3 元素属性赋值 ......................... 37523.3.4 链接 ........................................ 37723.4 自定义辅助方法 .................................. 38023.5 初级挑战：为链接添加鼠标悬浮的内容 ...................................................... 38223.6 中级挑战：修改日期格式 ................... 38323.7 高级挑战：创建一个自定义缩略图辅助方法 .............................................. 383第 24 章 控制器 ............................................ 38424.1 新建目击记录 ...................................... 38524.2 编辑目击记录 ...................................... 39224.3 删除目击记录 ...................................... 39524.4 路由动作 .............................................. 39624.5 初级挑战：目击记录详情页 ............... 39824.6 中级挑战：目击日期........................... 39824.7 高级挑战：添加和删除目击者 ........... 398第 25 章 组件 ................................................ 39925.1 迭代器组件 .......................................... 39925.2 “拧干”组件的“水分” ................... 40325.3 数据向下，动作向上........................... 40425.4 类名绑定 .............................................. 40525.5 数据向下 .............................................. 40625.6 动作向上 .............................................. 40925.7 初级挑战：自定义提示信息 ............... 41125.8 中级挑战：将导航条转化为组件 ....... 41125.9 高级挑战：提示框数组 ....................... 412第 26 章 后记 ................................................ 41326.1 最后的挑战 .......................................... 41326.2 插播一个广告 ...................................... 41326.3 感谢你 ................................................. 414