本書(shū)在知名培訓(xùn)機(jī)構(gòu)Big Nerd Ranch培訓(xùn)教材的基礎(chǔ)上編寫(xiě)而成，囊括了、HTML5、CSS3等現(xiàn)代前端開(kāi)發(fā)人員急需的技術(shù)關(guān)鍵點(diǎn)，包括響應(yīng)式UI，訪(fǎng)問(wèn)遠(yuǎn)程Web服務(wù)，用Ember.js構(gòu)建應(yīng)用，等等。此外，還會(huì)介紹如何使用前沿開(kāi)發(fā)工具來(lái)調(diào)試和測(cè)試代碼，并且充分利用Node.js和各種開(kāi)源的npm模塊的強(qiáng)大功能來(lái)進(jìn)行開(kāi)發(fā)。 全書(shū)分四部分，每部分獨(dú)立完成一個(gè)項(xiàng)目，由淺入深、循序漸進(jìn)，在構(gòu)建一系列應(yīng)用的過(guò)程中，介紹Web開(kāi)發(fā)的核心概念和API。 無(wú)論是否擁有Web開(kāi)發(fā)經(jīng)驗(yàn)，抑或擁有其他平臺(tái)的開(kāi)發(fā)背景，只要對(duì)當(dāng)今流行的工具和開(kāi)發(fā)實(shí)踐充滿(mǎn)興趣，這本書(shū)都能讓你受益匪淺。

目錄

第1章　配置開(kāi)發(fā)環(huán)境　　2
1.1 安裝Google Chrome　　2
1.2 安裝并配置Atom　　3
1.3 文檔和參考資料　　6
1.4 命令行速成　　8
1.4.1 查看當(dāng)前工作目錄　　9
1.4.2 新建目錄　　10
1.4.3 切換目錄　　10
1.4.4 列出目錄中的文件　　11
1.4.5 獲取管理員權(quán)限　　12
1.4.6 退出程序　　13
1.5 安裝Node.js和browser-sync　　14
1.6 延展閱讀：Atom 的替代工具　　15
第2章　開(kāi)始第壹個(gè)項(xiàng)目　　17
2.1 搭建Ottergram　　18
2.1.1 開(kāi)始寫(xiě)HTML　　19
2.1.2 鏈接到樣式表　　22
2.1.3 添加內(nèi)容　　22
2.1.4 添加圖片　　23
2.2 瀏覽網(wǎng)頁(yè)　　25
2.3 Chrome開(kāi)發(fā)者工具　　27
2.4 延展閱讀：CSS 版本　　29
2.5 延展閱讀：favicon.ico　　29
2.6 中級(jí)挑戰(zhàn)：添加favicon.ico　　30
第3章　樣式　　31
3.1 創(chuàng)建基本樣式　　32
3.2 為HTML文件添加樣式　　33
3.3 樣式的構(gòu)成　　34
3.4 第壹條樣式規(guī)則　　35
3.5 樣式繼承　　38
3.6 圖片自適應(yīng)　　45
3.7 顏色　　47
3.8 調(diào)整空白　　49
3.9 添加字體　　53
3.10 初級(jí)挑戰(zhàn)：更改顏色　　56
3.11 延展閱讀：優(yōu)先級(jí)！當(dāng)選擇器發(fā)生沖突了……　　56
第4章　flexbox響應(yīng)式布局　　58
4.1 界面拓展　　59
4.1.1 添加大圖　　59
4.1.2 縮略圖水平布局　　61
4.2 flexbox　　63
4.2.1 創(chuàng)建flex容器　　64
4.2.2 改變flex-direction　　65
4.2.3 flex項(xiàng)目中的元素分組　　66
4.2.4 flex縮寫(xiě)屬性　　68
4.2.5 flex項(xiàng)目的排序與對(duì)齊方式　　69
4.2.6 居中顯示大圖　　73
4.3 絕dui定位與相對(duì)定位　　75
第5章　使用媒體查詢(xún)完成自適應(yīng)布局　　82
5.1 重置視口　　83
5.2 添加媒體查詢(xún)　　85
5.3 初級(jí)挑戰(zhàn)：屏幕方向　　89
5.4 延展閱讀：flexbox布局通用解決方案與bug　　89
5.5 高ji挑戰(zhàn)：圣杯布局　　89
第6章　事件處理　　90
6.1 準(zhǔn)備錨標(biāo)簽　　91
6.2 第壹個(gè)腳本　　94
6.3 Ottergram中的 描述　　95
6.4 聲明字符串變量　　96
6.5 操作控制臺(tái)　　97
6.6 訪(fǎng)問(wèn)DOM元素　　99
6.7 編寫(xiě)setDetails函數(shù)　　104
6.8 從函數(shù)返回值　　108
6.9 添加事件監(jiān)聽(tīng)器　　110
6.10 訪(fǎng)問(wèn)所有縮略圖　　115
6.11 迭代縮略圖數(shù)組　　117
6.12 中級(jí)挑戰(zhàn)：劫持鏈接　　118
6.13 高ji挑戰(zhàn)：隨機(jī)的水獺　　119
6.14 延展閱讀：嚴(yán)格模式　　119
6.15 延展閱讀：閉包　　119
6.16 延展閱讀：NodeList對(duì)象和HTMLCollection 對(duì)象　　120
6.17 延展閱讀：類(lèi)型　　122
第7章　使用CSS營(yíng)造視覺(jué)效果　　123
7.1 隱藏及顯示大圖　　123
7.1.1 創(chuàng)建隱藏大圖的樣式　　125
7.1.2 用 隱藏大圖　　127
7.1.3 監(jiān)聽(tīng)鍵盤(pán)事件　　128
7.1.4 重新顯示大圖　　131
7.2 使用CSS過(guò)渡改變狀態(tài)　　132
7.2.1 變形　　133
7.2.2 添加CSS過(guò)渡效果　　135
7.2.3 使用定時(shí)函數(shù)　　138
7.2.4 基于類(lèi)的過(guò)渡效果　　139
7.2.5 通過(guò)觸發(fā)過(guò)渡效果　　140
7.3 自定義定時(shí)函數(shù)　　141
7.4 延展閱讀：強(qiáng)制類(lèi)型轉(zhuǎn)換的規(guī)則　　143
第二部分 模塊、對(duì)象及表單
第8章　模塊、對(duì)象和方法　　146
8.1 模塊　　146
8.1.1 模塊模式　　147
8.1.2 通過(guò)IIFE修改對(duì)象　　149
8.2 搭建我們的CoffeeRun吧　　151
8.3 創(chuàng)建數(shù)據(jù)存儲(chǔ)模塊　　152
8.4 在命名空間上添加一個(gè)模塊　　153
8.5 構(gòu)造函數(shù)　　154
8.5.1 構(gòu)造函數(shù)的原型　　155
8.5.2 為構(gòu)造函數(shù)添加方法　　157
8.6 創(chuàng)建Truck模塊　　159
8.6.1 添加訂單　　160
8.6.2 刪除訂單　　161
8.7 調(diào)試　　163
8.7.1 使用開(kāi)發(fā)者工具定位bug　　165
8.7.2 使用bind 設(shè)置this　　169
8.8 在頁(yè)面加載時(shí)初始化CoffeeRun　　170
8.9 初級(jí)挑戰(zhàn)：使用非星迷熟悉的餐車(chē)ID　　173
8.10 延展閱讀：模塊私有數(shù)據(jù)　　173
8.11 中級(jí)挑戰(zhàn)：私有化數(shù)據(jù)　　174
8.12 延展閱讀：在forEach的回調(diào)函數(shù)中設(shè)置this　　174
第9章　Bootstrap簡(jiǎn)介　　175
9.1 添加Bootstrap　　175
9.2 創(chuàng)建訂單表單　　177
9.2.1 添加文本輸入字段　　178
9.2.2 提供單選按鈕　　182
9.2.3 添加下拉菜單　　183
9.2.4 添加范圍滑塊　　185
9.2.5 添加提交按鈕和重置按鈕　　185
第10章　使用 處理表單　　187
10.1 創(chuàng)建FormHandler 模塊　　188
10.1.1 jQuery簡(jiǎn)介　　189
10.1.2 導(dǎo)入jQuery　　189
10.1.3 使用selector參數(shù)配置FormHandler 實(shí)例　　190
10.2 添加提交處理程序　　192
10.2.1 提取數(shù)據(jù)　　193
10.2.2 接受并調(diào)用回調(diào)函數(shù)　　195
10.3 使用FormHandler　　196
10.4 UI 優(yōu)化　　198
10.5 初級(jí)挑戰(zhàn)：添加超級(jí)尺寸　　199
10.6 中級(jí)挑戰(zhàn)：當(dāng)滑塊滑動(dòng)時(shí)顯示其數(shù)值　　199
10.7 高ji挑戰(zhàn)：添加選擇　　200
第11章　從數(shù)據(jù)到DOM　　201
11.1 建立清單　　202
11.2 創(chuàng)建CheckList模塊　　203
11.3 創(chuàng)建行構(gòu)造函數(shù)　　204
11.4 在提交時(shí)創(chuàng)建清單行　　209
11.5 通過(guò)單擊行完成訂單　　212
11.5.1 創(chuàng)建CheckList.prototype.removeRow方法　　213
11.5.2 刪除被覆蓋的條目　　213
11.5.3 編寫(xiě)addClickHandler方法　　214
11.5.4 調(diào)用addClickHandler　　216
11.6 初級(jí)挑戰(zhàn)：在描述中加入濃度信息　　217
11.7 中級(jí)挑戰(zhàn)：不同口味，不同顏色　　217
11.8 高ji挑戰(zhàn)：允許編輯訂單　　217
第12章　表單校驗(yàn)　　218
12.1 required屬性　　218
12.2 使用正則表達(dá)式校驗(yàn)表單　　220
12.3 約束校驗(yàn)API　　220
12.3.1 監(jiān)聽(tīng)input事件　　222
12.3.2 將input事件和有效性校驗(yàn)綁定　　223
12.3.3 觸發(fā)有效性檢查　　224
12.4 美化有效元素和無(wú)效元素　　225
12.5 中級(jí)挑戰(zhàn)：為脫咖啡因咖啡進(jìn)行自定義校驗(yàn)　　227
12.6 延展閱讀：Webshim 庫(kù)　　227
第13章　Ajax　　229
13.1 XMLHttpRequest對(duì)象　　230
13.2 RESTful Web服務(wù)　　230
13.3 RemoteDataStore模塊　　231
13.4 向服務(wù)器發(fā)送數(shù)據(jù)　　232
13.4.1 使用jQuery的$.post 方法　　233
13.4.2 添加回調(diào)函數(shù)　　233
13.4.3 檢查Ajax的請(qǐng)求和響應(yīng)　　234
13.5 從服務(wù)器檢索數(shù)據(jù)　　237
13.5.1 查看響應(yīng)數(shù)據(jù)　　237
13.5.2 添加回調(diào)函數(shù)　　238
13.6 從服務(wù)器刪除數(shù)據(jù)　　240
13.7 用RemoteDataStore替換DataStore　　241
13.8 中級(jí)挑戰(zhàn)：校驗(yàn)遠(yuǎn)端服務(wù)器　　243
13.9 延展閱讀：Postman　　243
第14章　Deferred和Promise　　244
14.1 Promise和Deferred　　245
14.2 返回Deferred　　246
14.3 通過(guò)then注冊(cè)回調(diào)函數(shù)　　247
14.4 使用then處理失敗的情況　　248
14.5 在僅支持回調(diào)函數(shù)的API上使用Deferred　　250
14.6 為DataStore配置Promise　　254
14.6.1 創(chuàng)建并返回Promise　　255
14.6.2 resolve一個(gè)Promise　　256
14.6.3 將其他DataStore方法Promise 化　　256
14.7 中級(jí)挑戰(zhàn)：回退到Datastore　　259
第三部分 實(shí)時(shí)數(shù)據(jù)傳輸
第15章　Node.js入門(mén)　　262
15.1 Node和npm　　263
15.1.1 npm init　　264
15.1.2 npm腳本　　265
15.2 Hello, World　　265
15.3 添加一個(gè)npm腳本　　267
15.4 用文件提供服務(wù)　　268
15.4.1 用fs 模塊讀取文件　　269
15.4.2 處理請(qǐng)求URL　　269
15.4.3 使用path模塊　　271
15.4.4 創(chuàng)建自定義模塊　　272
15.4.5 使用自定義模塊　　272
15.5 錯(cuò)誤處理　　273
15.6 延展閱讀：npm模塊注冊(cè)　　274
15.7 初級(jí)挑戰(zhàn)：創(chuàng)建自定義錯(cuò)誤頁(yè)面　　275
15.8 延展閱讀：MIME類(lèi)型　　275
15.9 中級(jí)挑戰(zhàn)：動(dòng)態(tài)提供MIME類(lèi)型　　276
15.10 高ji挑戰(zhàn)：將錯(cuò)誤處理放到單獨(dú)的模塊中　　276
第16章　使用WebSocket進(jìn)行實(shí)時(shí)通信　　277
16.1 配置WebSocket　　278
16.2 測(cè)試WebSocket服務(wù)器　　280
16.3 創(chuàng)建聊天服務(wù)器的功能　　281
16.4 第壹次聊天！　　283
16.5 延展閱讀：WebSocket庫(kù)socket.io　　283
16.6 延展閱讀：WebSocket服務(wù)　　284
16.7 初級(jí)挑戰(zhàn)：我重復(fù)了我的消息嗎？　　284
16.8 中級(jí)挑戰(zhàn)：Speakeasy　　284
16.9 高ji挑戰(zhàn)：聊天機(jī)器人　　284
第17章　借助Babel使用ES6　　285
17.1 編譯的工具　　286
17.2 Chattrbox客戶(hù)端應(yīng)用程序　　288
17.3 邁出Babel的第壹步　　289
17.4 使用Browserify 打包模塊　　291
17.5 新增ChatMessage 類(lèi)　　294
17.6 創(chuàng)建ws-client 模塊　　297
17.6.1 處理連接　　298
17.6.2 處理事件并發(fā)送消息　　299
17.6.3 發(fā)出和回應(yīng)一條消息　　301
17.7 延展閱讀：將其他語(yǔ)言編譯成　　302
17.8 初級(jí)挑戰(zhàn)：默認(rèn)導(dǎo)入名稱(chēng)　　303
17.9 中級(jí)挑戰(zhàn)：提醒連接關(guān)閉　　303
17.10 延展閱讀：變量提升　　303
17.11 延展閱讀：箭頭函數(shù)　　305
第18章　繼續(xù)ES6 探索之旅　　306
18.1 將jQuery 安裝成一個(gè)Node 模塊　　307
18.2 創(chuàng)建ChatForm 類(lèi)　　307
18.3 創(chuàng)建ChatList 類(lèi)　　310
18.8 初級(jí)挑戰(zhàn)：給消息添加te效　　320
18.9 中級(jí)挑戰(zhàn)：緩存消息　　320
18.10 高ji挑戰(zhàn)：獨(dú)立的聊天室　　321
第四部分 應(yīng)用架構(gòu)
第19章　初識(shí)MVC和Ember　　324
19.1 Tracker　　325
19.2 Ember：一款MVC 框架　　326
19.2.1 安裝Ember　　327
19.2.2 創(chuàng)建Ember應(yīng)用　　328
19.2.3 啟動(dòng)服務(wù)器　　329
19.3 安裝外部庫(kù)和插件　　330
19.4 修改配置　　332
19.5 延展閱讀：npm和Bower 的安裝命令　　335
19.6 初級(jí)挑戰(zhàn)：限制引入　　336
19.7 中級(jí)挑戰(zhàn)：添加Font Awesome 庫(kù)　　336
19.8 高ji挑戰(zhàn)：自定義NavBar　　336
第20章　路由選擇、路由表、模型　　337
20.1 Ember生成器　　338
20.2 嵌套路由　　342
20.3 Ember Inspector　　344
20.4 指派模型　　344
20.5 beforeModel　　347
20.6 延展閱讀：setupController和afterModel　　347
第21章　模型和數(shù)據(jù)綁定　　349
21.1 定義模型　　349
21.2 創(chuàng)建記錄　　351
21.3 get和set　　353
21.4 計(jì)算屬性　　354
21.5 延展閱讀：檢索數(shù)據(jù)　　357
21.6 延展閱讀：保存或刪除數(shù)據(jù)　　358
21.7 初級(jí)挑戰(zhàn)：修改計(jì)算屬性　　358
21.8 中級(jí)挑戰(zhàn)：對(duì)新的目擊記錄進(jìn)行標(biāo)記　　358
21.9 高ji挑戰(zhàn)：添加稱(chēng)呼　　359
18.4 使用Gravatar　　312
18.5 請(qǐng)求用戶(hù)名　　314
18.6 使用會(huì)話(huà)存儲(chǔ)　　316
18.7 格式化和更新消息時(shí)間戳　　318
第22章　數(shù)據(jù)——適配器、序列化器和變換器　　360
22.1 適配器　　362
22.2 內(nèi)容安全策略　　365
22.3 序列化器　　366
22.4 變換器　　368
22.5 延展閱讀：Ember CLI Mirage　　368
22.6 中級(jí)挑戰(zhàn)：內(nèi)容安全　　369
22.7 高ji挑戰(zhàn)：Mirage　　369
第23章　視圖與模板　　370
23.1 Handlebars　　371
23.2 模型　　371
23.3 輔助方法　　371
23.3.1 條件語(yǔ)句　　372
23.3.2 {{#each}}循環(huán)　　373
23.3.3 元素屬性賦值　　375
23.3.4 鏈接　　377
23.4 自定義輔助方法　　380
23.5 初級(jí)挑戰(zhàn)：為鏈接添加鼠標(biāo)懸浮的內(nèi)容　　382
23.6 中級(jí)挑戰(zhàn)：修改日期格式　　383
23.7 高ji挑戰(zhàn)：創(chuàng)建一個(gè)自定義縮略圖輔助方法　　383
第24章　控制器　　384
24.1 新建目擊記錄　　385
24.2 編輯目擊記錄　　392
24.3 刪除目擊記錄　　395
24.4 路由動(dòng)作　　396
24.5 初級(jí)挑戰(zhàn)：目擊記錄詳情頁(yè)　　398
24.6 中級(jí)挑戰(zhàn)：目擊日期　　398
24.7 高ji挑戰(zhàn)：添加和刪除目擊者　　398
第25章　組件　　399
25.1 迭代器組件　　399
25.2 “擰干”組件的“水分”　　403
25.3 數(shù)據(jù)向下，動(dòng)作向上　　404
25.4 類(lèi)名綁定　　405
25.5 數(shù)據(jù)向下　　406
25.6 動(dòng)作向上　　409
25.7 初級(jí)挑戰(zhàn)：自定義提示信息　　411
25.8 中級(jí)挑戰(zhàn)：將導(dǎo)航條轉(zhuǎn)化為組件　　411
25.9 高ji挑戰(zhàn)：提示框數(shù)組　　412
第26章　后記　　413
26.1 zui后的挑戰(zhàn)　　413
26.2 插播一個(gè)廣告　　413
26.3 感謝你　　414