Web開發權威指南 Web开发权威指南

Chris Aquino，Web開發專家，Big Nerd Ranch講師。
作為開發者，他希望能給用戶提供有意義的數據體驗；作為主管和講師，他致力於幫助他的團隊和學生構建出更好的Web。
平時喜歡發條玩具、濃縮咖啡和格式燒烤。

Todd Gandee，前端工程師，Big Nerd Ranch講師。擁有十餘年的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獲取管理員權限12 
1.4.6退出程序13 
1.5安裝Node.js和browser—sync 14 
1.6延展閱讀：Atom的替代工具15 

第2章開始第一個項目17 
2.1搭建Ottergram 18 
2.1.1開始寫HTML 19 
2.1.2鏈接到樣式表22 
2.1.3添加內容22 
2.1.4添加圖片23 
2.2瀏覽網頁25 
2.3Chrome開發者工具27 
2.4延展閱讀：CSS版本29 
2.5延展閱讀：favicon.ico 29 
2.6中級挑戰：添加favicon.ico 30 

第3章樣式31 
3.1創建基本樣式32 
3.2為HTML文件添加樣式33 
3.3樣式的構成34
3.4第一條樣式規則35 
3.5樣式繼承38 
3.6圖片自適應45 
3.7顏色47 
3.8調整空白49 
3.9添加字體53 
3.10初級挑戰：更改顏色56 
3.11延展閱讀：優先級！當選擇器發生衝突了…… 56 

第4章flexbox響應式佈局58 
4.1界面拓展59 
4.1.1添加大圖59 
4.1.2縮略圖水平佈局61 
4.2flexbox 63 
4.2.1創建flex容器64 
4.2.2改變flex—direction 65 
4.2.3flex項目中的元素分組66 
4.2.4flex縮寫屬性68 
4.2.5flex項目的排序與對齊方式69 
4.2.6居中顯示大圖73 
4.3絕對定位與相對定位75 

第5章使用媒體查詢完成自適應佈局82 
5.1重置視口83 
5.2添加媒體查詢85 
5.3初級挑戰：屏幕方向89 
5.4延展閱讀：flexbox佈局通用解決方案與bug 89 
5.5高級挑戰：聖杯佈局89 

第6章JavaScript事件處理90 
6.1準備錨標籤91 
6.2第一個腳本94
6.3Ottergram中的JavaScript描述95 
6.4聲明字符串變量96 
6.5操作控制台97 
6.6訪問DOM元素99 
6.7編寫setDetails函數104 
6.8從函數返回值108 
6.9添加事件監聽器110 
6.10訪問所有縮略圖115 
6.11迭代縮略圖數組117 
6.12中級挑戰：劫持鏈接118 
6.13高級挑戰：隨機的水獺119 
6.14延展閱讀：嚴格模式119 
6.15延展閱讀：閉包119 
6.16延展閱讀：NodeList對象和HTMLCollection對象120 
6.17延展閱讀：JavaScript類型122 

第7章使用CSS營造視覺效果123 
7.1隱藏及顯示大圖123 
7.1.1創建隱藏大圖的樣式125 
7.1.2用JavaScript隱藏大圖127 
7.1.3監聽鍵盤事件128 
7.1.4重新顯示大圖131 
7.2使用CSS過渡改變狀態132 
7.2.1變形133 
7.2.2添加CSS過渡效果135 
7.2.3使用定時函數138 
7.2.4基於類的過渡效果139 
7.2.5通過JavaScript觸發過渡效果140
7.3自定義定時函數141 
7.4延展閱讀：強制類型轉換的規則143 

第二部分模塊、對象及表單

第8章模塊、對象和方法146 
8.1模塊146 
8.1.1模塊模式147 
8.1.2通過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模塊159 
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.1jQuery簡介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 196 
10.4UI優化198 
10.5初級挑戰：添加超級尺寸199 
10.6中級挑戰：當滑塊滑動時顯示其數值199 
10.7高級挑戰：添加選擇200 

第11章從數據到DOM 201 
11.1建立清單202 
11.2創建CheckList模塊203 
11.3創建行構造函數204 
11.4在提交時創建清單行209 
11.5通過單擊行完成訂單212 
11.5.1創建CheckList.prototype.removeRow方法213 
11.5.2刪除被覆蓋的條目213 
11.5.3編寫addClickHandler方法214
11.5.4調用addClickHandler 216 
11.6初級挑戰：在描述中加入濃度信息217 
11.7中級挑戰：不同口味，不同顏色217 
11.8高級挑戰：允許編輯訂單217 

第12章表單校驗218 
12.1required屬性218 
12.2使用正則表達式校驗表單220 
12.3約束校驗API 220 
12.3.1監聽input事件222 
12.3.2將input事件和有效性校驗綁定223 
12.3.3觸發有效性檢查224 
12.4美化有效元素和無效元素225 
12.5中級挑戰：為脫咖啡因咖啡進行自定義校驗227 
12.6延展閱讀：Webshim庫227 

第13章Ajax 229 
13.1XMLHttpRequest對象230 
13.2RESTfulWeb服務230 
13.3RemoteDataStore模塊231 
13.4向服務器發送數據232 
13.4.1使用jQuery的$ .post方法233 
13.4.2添加回調函數233 
13.4.3檢查Ajax的請求和響應234 
13.5從服務器檢索數據237 
13.5.1查看響應數據237 
13.5.2添加回調函數238 
13.6從服務器刪除數據240
13.7用RemoteDataStore替換DataStore 241 
13.8中級挑戰：校驗遠端服務器243 
13.9延展閱讀：Postman 243 

第14章Deferred和Promise 244 
14.1Promise和Deferred 245 
14.2返回Deferred 246 
14.3通過then註冊回調函數247 
14.4使用then處理失敗的情況248 
14.5在僅支持回調函數的API上使用Deferred 250 
14.6為DataStore配置Promise 254 
14.6.1創建並返回Promise 255 
14.6.2resolve一個Promise 256 
14.6.3將其他DataStore方法Promise化256 
14.7中級挑戰：回退到Datastore 259 

第三部分實時數據傳輸

第15章Node.js入門262 
15.1Node和npm 263 
15.1.1npminit 264 
15.1.2npm腳本265 
15.2Hello，World 265 
15.3添加一個npm腳本267 
15.4用文件提供服務268 
15.4 .1用fs模塊讀取文件269 
15.4.2處理請求URL 269 
15.4.3使用path模塊271
15.4.4創建自定義模塊272 
15.4.5使用自定義模塊272 
15.5錯誤處理273 
15.6延展閱讀：npm模塊註冊274 
15.7初級挑戰：創建自定義錯誤頁面275 
15.8延展閱讀：MIME類型275 
15.9中級挑戰：動態提供MIME類型276 
15.10高級挑戰：將錯誤處理放到單獨的模塊中276 

第16章使用WebSocket進行實時通信277 
16.1配置WebSocket 278 
16.2測試WebSocket服務器280 
16.3創建聊天服務器的功能281 
16.4第一次聊天！283 
16.5延展閱讀：WebSocket庫socket.io 283 
16.6延展閱讀：WebSocket服務284 
16.7初級挑戰：我重複了我的消息嗎？284 
16.8中級挑戰：Speakeasy 284 
16.9高級挑戰：聊天機器人284 

第17章借助Babel使用ES6285 
17.1編譯JavaScript的工具286 
17.2Chattrbox客戶端應用程序288 
17.3邁出Babel的第一步289 
17.4使用Browserify打包模塊291 
17.5新增ChatMessage類294 
17.6創建ws—client模塊297
17.6.1處理連接298 
17.6.2處理事件並發送消息299 
17.6.3發出和回應一條消息301 
17.7延展閱讀：將其他語言編譯成JavaScript 302 
17.8初級挑戰：默認導入名稱303 
17.9中級挑戰：提醒連接關閉303 
17.10延展閱讀：變量提升303 
17.11延展閱讀：箭頭函數305 

第18章繼續ES6探索之旅306 
18.1將jQuery安裝成一個Node模塊307 
18.2創建ChatForm類307 
18.3創建ChatList類310 
18.8初級挑戰：給消息添加特效320 
18.9中級挑戰：緩存消息320 
18.10高級挑戰：獨立的聊天室321 

第四部分應用架構

第19章初識MVC和Ember 324 
19.1Tracker 325 
19.2Ember：一款MVC框架326 
19.2.1安裝Ember 327 
19.2 .2創建Ember應用328 
19.2.3啟動服務器329 
19.3安裝外部庫和插件330 
19.4修改配置332 
19.5延展閱讀：npm和Bower的安裝命令335 
19.6初級挑戰：限制引入336
19.7中級挑戰：添加FontAwesome庫336 
19.8高級挑戰：自定義NavBar 336 

第20章路由選擇、路由表、模型337 
20.1Ember生成器338 
20.2嵌套路由342 
20.3EmberInspector 344 
20.4指派模型344 
20.5beforeModel 347 
20.6延展閱讀：setupController和afterModel 347 

第21章模型和數據綁定349 
21.1定義模型349 
21.2創建記錄351 
21.3get和set 353 
21.4計算屬性354 
21.5延展閱讀：檢索數據357 
21.6延展閱讀：保存或刪除數據358 
21.7初級挑戰：修改計算屬性358 
21.8中級挑戰：對新的目擊記錄進行標記358 
21.9高級挑戰：添加稱呼359 
18.4使用Gravatar 312 
18.5請求用戶名314 
18.6使用會話存儲316 
18.7格式化和更新消息時間戳318 

第22章數據——適配器、序列化器和變換器360 
22.1適配器362 
22.2內容安全策略365 
22.3序列化器366 
22.4變換器368
22.5延展閱讀：EmberCLIMirage 368 
22.6中級挑戰：內容安全369 
22.7高級挑戰：Mirage 369 

第23章視圖與模板370 
23.1Handlebars 371 
23.2模型371 
23.3輔助方法371 
23.3.1條件語句372 
23.3.2{{#each} }循環373 
23.3.3元素屬性賦值375 
23.3.4鏈接377 
23.4自定義輔助方法380 
23.5初級挑戰：為鏈接添加鼠標懸浮的內容382 
23.6中級挑戰：修改日期格式383 
23.7高級挑戰：創建一個自定義縮略圖輔助方法383 

第24章控制器384 
24.1新建目擊記錄385 
24.2編輯目擊記錄392 
24.3刪除目擊記錄395 
24.4路由動作396 
24.5初級挑戰：目擊記錄詳情頁398 
24.6中級挑戰：目擊日期398 
24.7高級挑戰：添加和刪除目擊者398 

第25章組件399 
25.1迭代器組件399 
25.2“擰乾”組件的“水分” 403 
25.3數據向下，動作向上404 
25.4類名綁定405 
25.5數據向下406
25.6動作向上409 
25.7初級挑戰：自定義提示信息411 
25.8中級挑戰：將導航條轉化為組件411 
25.9高級挑戰：提示框數組412
 
第26章後記413 
26.1最後的挑戰413 
26.2插播一個廣告413 
26.3感謝你414