內容簡介
全書分四部分,每部分獨立完成一個項目,由淺入深、循序漸進,在構建一系列套用的過程中,介紹Web開發的核心概念和API。
圖書目錄
第 一部分 瀏覽器編程基礎
第 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.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.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