編輯推薦
    專業——源自大名鼎鼎的Big Nerd Ranch訓練營實戰課程,該訓練營已經為微軟、Google、Facebook等行業巨頭培養瞭眾多專業人纔。
領-先——涵蓋前端開發先進的技術,實現精彩Web應用。
實戰——4大Web開發實戰項目,以項目驅動講解,以實踐ying領理論。
梯度——從基礎的交互式網頁到實時聊天應用,由淺入深,橫跨大前端。
      內容簡介
   本書在知名培訓機構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.3 Chrome開發者工具  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.2 flexbox  63  
4.2.1 創建flex容器  64  
4.2.2 改變flex-direction  65  
4.2.3 flex項目中的元素分組  66  
4.2.4 flex縮寫屬性  68  
4.2.5 flex項目的排序與對齊方式  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.3 Ottergram中的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.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  196  
10.4 UI 優化  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.1 required屬性  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.1 XMLHttpRequest對象  230  
13.2 RESTful Web服務  230  
13.3 RemoteDataStore模塊  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.1 Promise和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.2 resolve一個Promise  256  
14.6.3 將其他DataStore方法Promise 化  256  
14.7 中級挑戰:迴退到Datastore  259  
第三部分 實時數據傳輸  
第15章 Node.js入門  262  
15.1 Node和npm  263  
15.1.1 npm init  264  
15.1.2 npm腳本  265  
15.2 Hello, 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使用ES6  285  
17.1 編譯JavaScript的工具  286  
17.2 Chattrbox客戶端應用程序  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.1 Tracker  325  
19.2 Ember:一款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 中級挑戰:添加Font Awesome 庫  336  
19.8 高級挑戰:自定義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章 模型和數據綁定  349  
21.1 定義模型  349  
21.2 創建記錄  351  
21.3 get和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 延展閱讀:Ember CLI Mirage  368  
22.6 中級挑戰:內容安全  369  
22.7 高級挑戰:Mirage  369  
第23章 視圖與模闆  370  
23.1 Handlebars  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