Web开发权威指南+2

内容简介

本书在知名培训机构Big Nerd Ranch 培训教材的基础上编写而成，囊括了Javascript、HTML5、CSS3等现代前端开发人员急需的技术关键点括响应式UI、访问远程Web 服务、用Ember.js 构建应用，等等。此外，还会介绍如何使用前沿开发工具来调试和测试代码，并且充分利用Node.js 和各种开源的npm 模块的强能行开发。 全书分四部分，每部分独立完成一个项目，由浅入深、循序，在构建一系列应用的过程中，介绍Web 开发的核心概念和API。 无论是否拥有Web 开发经验，抑或拥有其台的开发背景，只要对当今流行的工具和开发实践充满兴趣，这本书都能让你受益匪浅。

目录

部分　浏览器编程基础 第1章　配置开发环境　　2 1.1　安装Google Chrome　　2 1.2　安装并配置Atom　　3 1.3　文档和参考资料　　6 1.4　命令行速成　　8 1.4.1　查看当前工作目录　　9 1.4.2　新建目录　　10 1.4.3　切换目录　　10 1.4.4　列出目录中的文件　　11 1.4.5　获取管理员权限　　13 1.4.6　退出程序　　14 1.5　安装Node.jrowser-sync　　15 1.6　拓展阅读：Atom的替代工具　　16 第2章　开始个项目　　18 2.1　搭建Ottergram　　19 2.1.1　开始写HTML　　20 2.1.2　链接到样式表　　23 2.1.3　添加内容　　23 2.1.4　添加图片　　24 2.2　浏览网页　　26 2.3　Chrome工具　　28 2.4　拓展阅读：CSS版本　　30 2.5　拓展阅读：favicon.ico　　30 2.6　中级挑战：添加favicon.ico　　31 第3章　样式　　32 3.1　创建基本样式　　33 3.2　为HTML文件添加样式　　34 3.3　样式的构成　　35 3.4　条样式规则　　36 3.5　样式继承　　39 3.6　图片自适应　　46 3.7　颜色　　48 3.8　调整　　50 3.9　添加字体　　54 3.10　初级挑战：更改颜色　　57 3.11　拓展阅读：优先级！当选择器发生冲突了……　　57 第4章　flexbox响应式布局　　59 4.1　界面拓展　　60 4.1.1　添加大图　　60 4.1.2　缩略图布局　　62 4.2　flexbox　　64 4.2.1　创建flex容器　　65 4.2.2　改变flex-direction　　66 4.2.3　flex项目中的元素分组　　67 4.2.4　flex缩写属　　69 4.2.5　flex项目的排序与对齐方式　　70 4.2.6　居中显示大图　　74 4.3　定位与相对定位　　76 第5章　使用媒体查询完成自适应布局　　83 5.1　重置视口　　84 5.2　添加媒体查询　　86 5.3　初级挑战：屏幕方向　　90 5.4　拓展阅读：flexbox布局通用解决 方案与bug　　90 5.5　挑战：圣杯布局　　90 第6章　Javascript事件处理　　91 6.1　准备锚标签　　92 6.2　个脚本　　95 6.3　Ottergram中的Javascript描述　　96 6.4　声明字符串变量　　97 6.5　操作控制台　　98 6.6　访问DOM元素　　100 6.7　编写setDetails函数　　105 6.8　从函数返回值　　109 6.9　添加事件监听器　　111 6.10　访问所有缩略图　　116 6.11　迭代缩略图数组　　118 6.12　中级挑战：劫持链接　　119 6.13　挑战：的水獭　　120 6.14　拓展阅读：严格模式　　120 6.15　拓展阅读：　　120 6.16　拓展阅读：NodeList对象和HTMLCollection对象　　121 6.17　拓展阅读：Javascript类型　　123 第7章　使用CSS营造视觉效果　　124 7.1　隐藏及显示大图　　124 7.1.1　创建隐藏大图的样式　　126 7.1.2　用Javascript隐藏大图　　128 7.1.3　监听键盘事件　　129 7.1.4　重新显示大图　　132 7.2　使用CSS过渡改　　133 7.2.1　变形　　134 7.2.2　添加CSS过渡效果　　136 7.2.3　使用定时函数　　139 7.2.4　基于类的过渡效果　　140 7.2.5　通过Javascript触发过渡效果　　141 7.3　自定义定时函数　　142 7.4　拓展阅读：强制类型转换的规则　　144 部分　模块、对象及表单 第8章　模块、对象和方法　　146 8.1　模块　　146 8.1.2　模块模式　　147 8.1.3　通过IIFE修改对象　　149 8.2　搭建我们的CoffeeRun吧　　151 8.3　创建数据存储模块　　152 8.4　在命名空间上添加一个模块　　153 8.5　构造函数　　154 8.5.1　构造函数的原型　　155 8.5.2　为构造函数添加方法　　157 8.6　创建Truck模块　　158 8.6.1　添加订单　　160 8.6.2　删除订单　　161 8.7　调试　　163 8.7.1　使用工具定位bug　　165 8.7.2　使用bind设置this　　169 8.8　在页面加载时初始化CoffeeRun　　170 8.9　初级挑战：使用非星迷熟悉的餐车ID　　173 8.10　拓展阅读：模块私有数据　　173 8.11　中级挑战：私有化数据　　174 8.12　拓展阅读：在forEach的回调函数中设置this　　174 第9章　Bootstrap简介　　175 9.1　添加Bootstrap　　175 9.2　创建订单表单　　177 9.2.1　添加文本输入字段　　178 9.2.2　提供单选按钮　　182 9.2.3　添加下拉菜单　　183 9.2.4　添加范围滑块　　185 9.2.5　添加提交按钮和重置按钮　　185 第10章　使用Javascript处理表单　　187 10.1　创建FormHandler模块　　188 10.1.1　jQuery简介　　189 10.1.2　导入jQuery　　189 10.1.3　使用selector参数配置FormHandler实例　　190 10.2　添加提交处理程序　　192 10.2.1　提取数据　　193 10.2.2　接受并调用回调函数　　195 10.3　使用FormHandler　　195 10.4　UI优化　　198 10.5　初级挑战：添加尺　　199 10.6　中级挑战：当滑块滑动时显示其数值　　199 10.7　挑战：添加选择　　199 第11章　从数据到DOM　　100 11.1　建立清单　　101 11.2　创建CheckList模块　　102 11.3　创建行构造函数　　103 11.4　在提交时创建清单行　　108 11.5　通过单击行完成订单　　111 11.5.1　创建CheckList.prototype. removeRow方法　　112 11.5.2　删除被覆盖的条目　　112 11.5.3　编写ClickHandler方法　　113 11.5.4　调用ClickHandler　　115 11.6　初级挑战：在描述中加入浓度信息　　116 11.7　中级挑战：不同口味，不同颜色　　116 11.8　挑战：允许编辑订单　　116 第12章　表单校验　　117 12.1　required属　　117 12.2　使用正则表达式校验表单　　119 12.3　约束校验API　　119 12.3.1　监听input事件　　121 12.3.2　将input事件和有效校验绑定　　122 12.3.3　触发有效检查　　123 12.4　美化有效元素和无效元素　　124 12.5　中级挑战：为脱咖啡因咖行自定义校验　　126 12.6　拓展阅读：Webshim库　　126 第13章　Ajax　　128 13.1　XMLHttpRequest对象　　129 13.2　RESTful Web服务　　129 13.3　RemoteDataStore模块　　130 13.4　向服务器发送数据　　131 13.4.1　使用jQuery的$.post方法　　132 13.4.2　添加回调函数　　132 13.4.3　检查Ajax的请求和响应　　133 13.5　从服务器检索数据　　136 13.5.1　查看响应数据　　136 13.5.2　添加回调函数　　137 13.6　从服务器删除数据　　139 13.7　用RemoteDataStore替换DataStore　　140 13.8　中级挑战：校验远端服务器　　142 13.9　拓展阅读：Postman　　142 第14章　Deferred和Promise　　143 14.1　Promise和Deferred　　144 14.2　返回Deferred　　145 14.3　通过then注册回调函数　　146 14.4　使用then处理失败的情况　　147 14.5　在仅支持回调函数的API上使用Deferred　　149 14.6　为DataStore配置Promise　　153 14.6.1　创建并返回Promise　　154 14.6.2　resolve一个Promise　　155 14.6.3　将其他DataStore方法Promise化　　156 14.7　中级挑战：回退到Datastore　　158 第三部分　实时数据传输 第15章　Node.js入门　　160 15.1　Node和npm　　161 15.1.1　npm init　　162 15.1.2　npm脚本　　163 15.2　Hello, World　　163 15.3　添加一个npm脚本　　165 15.4　用文件提供服务　　166 15.4.1　用fs模块读取文件　　167 15.4.2　处理请求URL　　167 15.4.3　使用path模块　　169 15.4.4　创建自定义模块　　170 15.4.5　使用自定义模块　　170 15.5　错误处理　　171 15.6　拓展阅读：npm模块注册　　172 15.7　初级挑战：创建自定义错误页面　　173 15.8　拓展阅读：MIME类型　　173 15.9　中级挑战：动态提供MIME类型　　174 15.10　挑战：将错误处理放到单独的模块中　　174 第16章　使用WebSocke行实时通信　　175 16.1　配置WebSocket　　176 16.2　测试WebSocket服务器　　178 16.3　创建聊天服务器能　　179 16.4　次聊天！　　181 16.5　拓展阅读：WebSocket库socket.io　　181 16.6　拓展阅读：WebSocket服务　　182 16.7　初级挑战：我重复了我的消息吗？　　182 16.8　中级挑战：Speakeasy　　182 16.9　挑战：聊天机器人　　182 第17章　借助Babel使用ES6　　183 17.1　编译Javascript的工具　　184 17.2　Chattrbox客户端应用程序　　186 17.3　迈出Babel的步　　187 17.4　使用Browserify模块　　189 17.5　新增ChatMessage类　　192 17.6　创建ws-client模块　　195 17.6.1　处理连接　　196 17.6.2　处理事件并发送消息　　197 17.6.3　发出和回应一条消息　　199 17.7　拓展阅读：将其他语言编译成Javascript　　200 17.8　初级挑战：默认导入名称　　201 17.9　中级挑战：提醒连接关闭　　201 17.10　拓展阅读：变量提升　　201 17.11　拓展阅读：箭头函数　　203 第18章　继续ES6探索之旅　　204 18.1　将jQuery安装成一个Node模块　　205 18.2　创建ChatForm类　　205 18.3　创建ChatList类　　208 18.4　使用Gravatar　　210 18.5　请求用户名　　212 18.6　使用会话存储　　214 18.7　格式化和更新消息时间戳。　　216 18.8　初级挑战：给消息添加　　218 18.9　中级挑战：缓存消息　　218 18.10　挑战：独立的聊天室　　219 第四部分　应用架构 第19章　初识MVC和Ember　　222 19.1　Tracker　　223 19.2　Ember：一款MVC框架　　224 19.2.1　安装Ember　　225 19.2.2　创建Ember应用　　226 19.2.3　启动服务器　　227 19.3　安装外部库和插件　　228 19.4　修改配置　　230 19.5　拓展阅读：npm和Bower的安装命令　　234 19.6　初级挑战：限制引入　　234 19.7　中级挑战：添加Font Awesome库　　234 19.8　挑战：自定义NavBar　　235 第20章　路由选择、路由表、模型　　236 20.1　Ember生成器　　237 20.2　嵌套路由　　241 20.3　Ember Inspector　　243 20.4　指派模型　　244 20.5　beforeModel　　246 20.6　拓展阅读：setupController和afterModel　　246 第21章　模型和数据绑定　　248 21.1　定义模型　　248 21.2　创建记录　　250 21.3　get和set　　252 21.4　计算属　　253 21.5　拓展阅读：检索数据　　256 21.6　拓展阅读：保存或删除数据　　257 21.7　初级挑战：修改计算属　　257 21.8　中级挑战：对新的目击记行标记　　257 21.9　挑战：添加称呼　　258 第22章　数据——适配器、序列化器和变换器　　259 22.1　适配器　　261 22.2　内容策略　　264 22.3　序列化器　　265 22.4　变换器　　267 22.5　拓展阅读：Ember CLI Mirage　　267 22.6　中级挑战：内容　　268 22.7　挑战：Mirage　　268 第23章　视图与模板　　269 23.1　Handlebars　　270 23.2　模型　　270 23.3　辅助方法　　270 23.3.1　条件语句　　271 23.3.2　{{#each}}循环　　272 23.3.3　元素属赋值　　274 23.3.4　链接　　276 23.4　自定义辅助方法　　279 23.5　初级挑战：为链接添加鼠标悬浮的内容　　281 23.6　中级挑战：修改日期格式　　282 23.7　挑战：创建一个自定义缩略图辅助方法　　282 第24章　控制器　　283 24.1　新建目击记录　　284 24.2　编辑目击记录　　291 24.3　删除目击记录　　294 24.4　路由动作　　295 24.5　初级挑战：目击记录详情页　　297 24.6　中级挑战：目击日期　　297 24.7　挑战：添加和删除目击者　　297 第25章　组件　　298 25.1　迭代器组件　　298 25.2　“拧干”组件的“水分”　　302 25.3　数据向下，动作向上　　303 25.4　类名绑定　　304 25.5　数据向下　　305 25.6　动作向上　　308 25.7　初级挑战：自定义提示信息　　310 25.8　中级挑战：将导航条转化为组件　　310 25.9　挑战：提示框数组　　311 第26章　后记　　312 26.1　后的挑战　　312 26.2　插播一个广告　　312 26.3　感谢你　　313