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

克裡斯·阿基諾 (Chris Aquino), 托德·甘迪 (Todd Gandee)

買這商品的人也買了...

商品描述

本書在知名培訓機構Big Nerd Ranch培訓教材的基礎上編寫而成,囊括了JavaScript、HTML5、CSS3等現代前端開發人員急需的技術關鍵點,包括響應式UI,訪問遠程Web服務,用Ember.js構建應用,等等。此外,還會介紹如何使用前沿開發工具來調試和測試代碼,並且充分利用Node.js和各種開源的npm模塊的強大功能來進行開發。
全書分四部分,每部分獨立完成一個項目,由淺入深、循序漸進,在構建一系列應用的過程中,介紹Web開發的核心概念和API。
無論是否擁有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