第一部分　流覽器程式設計基礎

第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.js和browser-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　編寫addClickHandler方法 113

11.5.4　調用addClickHandler 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章　使用WebSocket進行即時通信 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