JavaScript前端開發模塊化教程（簡體書）

本書以 HTML5、CSS3、JavaScript及jQuery為技術支撐，以WebStorm為開發環境，將網頁前端開發過程的任務規範化、模塊化和組件化。全書設計了斑馬線表格、JavaScript輪播圖、相冊、全屏廣告 、標簽頁 、彈出框、下拉菜單、折疊、視頻播放、圖片特效 、一點多響、窗口特效等模塊。

任務1 搭建JavaScript開發
環境 1
1.1 任務導入 2
1.2 成果目標 2
1.3 核心知識 3
1.3.1 JavaScript演進 3
1.3.2 JavaScript介紹 4
1.3.3 Web頁面渲染過程 5
1.3.4 Visual Studio Code介紹 6
1.3.5 Visual Studio Code快捷鍵 6
1.3.6 EMMET語法 9
1.3.7 Node.js介紹 10
1.3.8 http-server介紹 10
1.3.9 在HTML中使用JavaScript 11
1.3.10 高性能JavaScript 12
1.3.11 JavaScript執行順序 12
1.3.12 腳本位置 13
1.3.13 組織腳本 13
1.3.14 無阻塞腳本 14
1.3.15 選取DOM對象 17
1.3.16 addEventListener 20
1.3.17 讀寫HTML DOM style對象
屬性 20
1.3.18 cssText 21
1.4 任務實施 22
1.4.1 安裝和配置Visual Studio Code 22
1.4.2 安裝常用擴展 23
1.4.3 Chrome瀏覽器 24
1.4.4 Chrome開發者工具 24
1.4.5 安裝Node.js 25
1.4.6 安裝與配置http-server 25
1.4.7 編寫HTML和CSS 25
1.4.8 編寫JavaScript 27
1.4.9 測試頁面 28
1.5 強化訓練 28
1.6 學習成果評量 29
任務2 斑馬線表格製作 30
2.1 任務導入 31
2.2 成果目標 31
2.3 核心知識 32
2.3.1 表格常用標簽 32
2.3.2 表格斑馬線原理 33
2.3.3 讀寫HTML DOM className
屬性 33
2.3.4 嚴格模式（use strict） 34
2.3.5 定義變量 35
2.3.6 常量 35
2.3.7 變量命名規則 35
2.3.8 JavaScript語法規範 36
2.3.9 變量類型 37
2.3.10 變量作用域 38
2.3.11 避免變量污染 40
2.3.12 閉包函數 40
2.3.13 JavaScript轉義字符 40
2.3.14 相等操作符 41
2.3.15 toNumber 41
2.3.16 使用typeof檢測類型 42
2.3.17 使用constructor檢測類型 42
2.3.18 使用toString()檢測封裝類型 42
2.3.19 事件委託 43
2.4 任務實施 44
2.4.1 編寫HTML 44
2.4.2 編寫CSS樣式 46
2.4.3 編寫JavaScript 47
2.4.4 測試頁面 48
2.5 強化訓練 49
2.6 學習成果評量 49
任務3 彈出消息框 50
3.1 任務導入 51
3.2 成果目標 51
3.3 核心知識 51
3.3.1 基於負邊距的垂直居中 51
3.3.2 基於transform屬性的垂直
居中 52
3.3.3 元素動畫製作 53
3.3.4 警告對話框alert() 53
3.3.5 確認對話框confirm() 54
3.3.6 提示對話框prompt() 54
3.3.7 BOM介紹 54
3.3.8 window對象 54
3.3.9 location對象 55
3.3.10 screen對象 56
3.3.11 history對象 57
3.4 任務實施 57
3.4.1 編寫HTML 57
3.4.2 編寫CSS樣式 58
3.4.3 編寫JavaScript 60
3.4.4 測試頁面 60
3.5 強化訓練 61
3.6 學習成果評量 61
任務4 圖片縮放特效 62
4.1 任務導入 63
4.2 成果目標 63
4.3 核心知識 63
4.3.1 DOM編程 63
4.3.2 DOM訪問與修改 64
4.3.3 DOM遍歷 64
4.3.4 innerHTML對比DOM方法 65
4.3.5 字符串連接 65
4.3.6 HTML集合length 66
4.3.7 減少瀏覽器重排與重繪 67
4.4 任務實施 69
4.4.1 編寫頁面結構 69
4.4.2 編寫CSS樣式 71
4.4.3 編寫JavaScript 72
4.4.4 測試頁面 73
4.5 強化訓練 73
4.6 學習成果評量 74
任務5 網頁換膚 75
5.1 任務導入 76
5.2 成果目標 76
5.3 核心知識 76
5.3.1 網頁換膚原理 76
5.3.2 HTML文檔對象模型 77
5.3.3 HTML DOM節點樹 77
5.3.4 document對象屬性和方法 78
5.3.5 element對象屬性和方法 79
5.3.6 獲取元素屬性getAttribute() 82
5.3.7 設置元素屬性setAttribute() 83
5.3.8 本地數據存儲方案 83
5.3.9 WebStorage 84
5.3.10 WebStorage基本屬性和
方法 84
5.3.11 使用sessionStorage對象 84
5.3.12 使用localStorage對象 86
5.3.13 使用storage事件 86
5.3.14 cookie介紹 87
5.3.15 cookie構成 87
5.3.16 寫入cookie信息 88
5.3.17 讀取cookie信息 90
5.4 任務實施 91
5.4.1 編寫HTML 91
5.4.2 編寫CSS 92
5.4.3 編寫JavaScript 94
5.4.4 測試頁面 95
5.5 強化訓練 95
5.6 學習成果評量 95
任務6 下拉廣告 96
6.1 任務導入 97
6.2 成果目標 97
6.3 核心知識 97
6.3.1 transition屬性 97
6.3.2 超時調用setTimeout()方法 98
6.4 任務實施 99
6.4.1 編寫HTML 99
6.4.2 編寫CSS樣式 100
6.4.3 編寫JavaScript代碼 101
6.4.4 測試頁面 102
6.5 強化訓練 102
6.6 學習成果評量 103
任務7 輪播圖 104
7.1 任務導入 105
7.2 成果目標 105
7.3 核心知識 105
7.3.1 間歇調用setInterval() 105
7.3.2 避免常見JavaScript錯誤 106
7.3.3 理解Error對象 106
7.3.4 錯誤處理思路 107
7.3.5 使用瀏覽器控制台調試
程序 108
7.3.6 使用斷點調試程序 109
7.3.7 使用try-catch處理異常 110
7.4 任務實施 111
7.4.1 編寫HTML 111
7.4.2 編寫CSS樣式 113
7.4.3 編寫JavaScript 116
7.4.4 測試頁面 117
7.5 強化訓練 117
7.6 學習成果評量 118
任務8 滾動公告 119
8.1 任務導入 120
8.2 學習成果 120
8.3 核心知識 120
8.3.1 HTML事件模型 120
8.3.2 DOM0級事件模型 121
8.3.3 DOM2級事件模型 122
8.3.4 IE事件模型 123
8.4 任務實施 124
8.4.1 編寫HTML 124
8.4.2 編寫CSS樣式 125
8.4.3 編寫JavaScript 126
8.4.4 測試頁面 127
8.5 強化訓練 128
8.6 學習成果評量 128
任務9 貸款計算器 129
9.1 任務導入 130
9.2 成果目標 130
9.3 核心知識 130
9.3.1 表單類型 130
9.3.2 表單結構 132
9.3.3 form對象 133
9.3.4 表單事件 134
9.3.5 表達式與操作符 135
9.3.6 轉換為數字 136
9.3.7 設置小數位數 137
9.3.8 Math對象 137
9.3.9 條件語句 138
9.3.10 for循環 141
9.3.11 while循環 142
9.3.12 do-while循環 142
9.3.13 for-in循環 142
9.3.14 優化循環性能 143
9.3.15 forEach() 143
9.4 任務實施 143
9.4.1 編寫HTML 143
9.4.2 編寫CSS樣式 145
9.4.3 編寫JavaScript 147
9.4.4 測試頁面 147
9.5 強化訓練 148
9.6 學習成果評量 148
任務10 計算器 149
10.1 任務導入 150
10.2 成果目標 150
10.3 核心知識 150
10.3.1 函數介紹 150
10.3.2 定義函數 151
10.3.3 嵌套函數 152
10.3.4 調用函數 152
10.3.5 函數的實參和形參 155
10.3.6 將對象屬性用作實參 157
10.3.7 實參類型 157
10.3.8 作為值的函數 157
10.3.9 自定義函數屬性 158
10.3.10 slice() 158
10.3.11 isNaN() 158
10.4 任務實施 159
10.4.1 編寫HTML 159
10.4.2 編寫CSS樣式 160
10.4.3 編寫JavaScript 162
10.4.4 測試頁面 164
10.5 強化訓練 165
10.6 學習成果評量 165
任務11 投票 166
11.1 任務導入 167
11.2 成果目標 167
11.3 核心知識 167
11.3.1 匿名函數 167
11.3.2 數據存取方式 168
11.3.3 對象成員 169
11.3.4 函數作用域 170
11.3.5 閉包 171
11.3.6 閉包函數 173
11.3.7 遞歸函數 174
11.4 任務實施 174
11.4.1 編寫HTML 174
11.4.2 編寫CSS樣式 175
11.4.3 編寫JavaScript 176
11.4.4 測試頁面 177
11.5 強化訓練 177
11.6 學習成果評量 178
任務12 折疊面板 179
12.1 任務導入 180
12.2 成果目標 180
12.3 核心知識 180
12.4 任務實施 181
12.4.1 編寫HTML 181
12.4.2 編寫CSS 182
12.4.3 編寫JavaScript 183
12.4.4 測試頁面 184
12.5 強化訓練 184
12.6 學習成果評量 185
任務13 銀行客服電話查詢 186
13.1 任務導入 187
13.2 成果目標 187
13.3 核心知識 187
13.3.1 Ajax簡介 187
13.3.2 Ajax原理 188
13.3.3 HTTP請求 188
13.3.4 HTTP狀態碼 189
13.3.5 定義XMLHttpRequest
對象 190
13.3.6 建立XMLHttpRequest
連接 191
13.3.7 跟蹤狀態 192
13.3.8 中止請求 192
13.3.9 Ajax請求與響應模板 192
13.3.10 獲取數據 193
13.3.11 獲取純文本 194
13.3.12 使用Ajax加載HTML 194
13.3.13 使用Ajax加載JSON 194
13.3.14 獲取JavaScript腳本 194
13.3.15 使用Ajax加載其他服務器的
數據 194
13.3.16 獲取頭部信息 195
13.3.17 JSONP工作原理 195
13.4 任務實施 196
13.4.1 編寫HTML 196
13.4.2 編寫CSS樣式 196
13.4.3 編寫JSON 197
13.4.4 編寫JavaScript 199
13.4.5 測試頁面 200
13.5 強化訓練 200
13.6 學習成果評量 200
任務14 省、市、區聯動菜單 201
14.1 任務導入 202
14.2 成果目標 202
14.3 核心知識 202
14.3.1 下拉列表select 202
14.3.2 HTML DOM Option對象 203
14.3.3 select add()方法 203
14.3.4 JSON簡介 203
14.3.5 JSON語法 204
14.3.6 JSON與XML比較 205
14.3.7 訪問JSON對象值 206
14.3.8 遍歷JSON對象 206
14.3.9 修改JSON值 207
14.3.10 刪除對象屬性 207
14.3.11 解析JSON對象 207
14.3.12 JSON.stringify() 207
14.3.13 JSON轉換為JavaScript
對象 208
14.4 任務實施 208
14.4.1 編寫HTML 208
14.4.2 編寫CSS 209
14.4.3 JSON數據準備 210
14.4.4 編寫JavaScript 211
14.4.5 測試頁面 212
14.5 強化訓練 213
14.6 學習成果評量 213
任務15 滾動監聽 214
15.1 任務導入 215
15.2 成果目標 215
15.3 核心知識 215
15.3.1 滾動監聽 215
15.3.2 CSS腳本化 215
15.3.3 訪問CSS行內樣式 216
15.3.4 使用styleSheets對象 217
15.3.5 計算樣式 218
15.3.6 元素尺寸 220
15.3.7 window.scrollY 220
15.4 任務實施 221
15.4.1 編寫HTML 221
15.4.2 編寫CSS樣式 222
15.4.3 編寫JavaScript 223
15.4.4 測試頁面 224
15.5 強化訓練 224
15.6 學習成果評量 225
任務16 視頻播放器 226
16.1 任務導入 227
16.2 成果目標 227
16.3 核心知識 227
16.3.1 HTML video標簽 227
16.3.2 HTML音頻/視頻方法 228
16.3.3 HTML音頻/視頻屬性 228
16.3.4 HTML音頻/視頻事件 229
16.3.5 瀏覽器支持的視頻格式 230
16.3.6 瀏覽器視頻能力檢測 231
16.3.7 實現播放列表功能 231
16.4 任務實施 232
16.4.1 編寫HTML 232
16.4.2 編寫CSS樣式 233
16.4.3 編寫JavaScript 235
16.4.4 測試頁面 236
16.5 強化訓練 236
16.6 學習成果評量 236
任務17 刮刮樂 237
17.1 任務導入 238
17.2 成果目標 238
17.3 核心知識 238
17.3.1 事件基礎 238
17.3.2 事件流 239
17.3.3 事件冒泡 239
17.3.4 事件捕獲 240
17.3.5 事件對象 240
17.3.6 IE中的事件對象 243
17.3.7 跨瀏覽器的事件對象 245
17.3.8 共享onload事件 247
17.3.9 事件委託 248
17.3.10 事件類型 249
17.3.11 UI事件 249
17.3.12 焦點事件 250
17.3.13 鼠標事件 250
17.3.14 鍵盤事件 251
17.3.15 鼠標/鍵盤事件對象屬性 251
17.3.16 鼠標/鍵盤事件方法 252
17.3.17 框架/對象（Frame/Object）
事件 252
17.3.18 表單事件 253
17.3.19 剪貼板事件 253
17.3.20 打印事件 253
17.3.21 拖動事件 253
17.3.22 多媒體（Media）事件 254
17.3.23 動畫事件 254
17.3.24 過渡事件 255
17.3.25 其他事件 255
17.3.26 模擬事件過程 255
17.3.27 模擬鼠標事件 256
17.3.28 模擬鍵盤事件 257
17.3.29 globalCompositeOperation
屬性 257
17.4 任務實施 258
17.4.1 編寫HTML 258
17.4.2 編寫CSS樣式 258
17.4.3 編寫JavaScript 259
17.4.4 測試頁面 260
17.5 強化訓練 260
17.6 學習成果評量 260
任務18 微信運動步數統計圖 261
18.1 任務導入 262
18.2 成果目標 262
18.3 核心知識 262
18.3.1 HTML5 canvas 262
18.3.2 canvas坐標 263
18.3.3 canvas繪圖步驟 263
18.3.4 canvas繪製漸變色 263
18.3.5 canvas繪製文本 263
18.3.6 canvas繪製直線 264
18.3.7 canvas繪製矩形 264
18.3.8 canvas繪製圓形 265
18.3.9 canvas繪製曲線 265
18.4 任務實施 265
18.4.1 編寫HTML 265
18.4.2 編寫JavaScript 266
18.4.3 測試頁面 267
18.5 強化訓練 267
18.6 學習成果評量 268
任務19 相冊 269
19.1 任務導入 270
19.2 成果目標 270
19.3 任務實施 270
19.3.1 編寫HTML 270
19.3.2 編寫CSS樣式 273
19.3.3 編寫JavaScript 276
19.3.4 測試頁面 277
19.4 強化訓練 278
19.5 學習成果評量 278
任務20 選項卡 279
20.1 任務導入 280
20.2 成果目標 280
20.3 核心知識 281
20.3.1 選項卡HTML模型 281
20.3.2 重置ul屬性 281
20.3.3 浮動（float） 282
20.3.4 絕對定位（absolute） 283
20.3.5 選項卡切換原理 283
20.4 任務實施 283
20.4.1 編寫HTML 283
20.4.2 編寫CSS 286
20.4.3 編寫JavaScript腳本 288
20.4.4 瀏覽器測試 289
20.5 強化訓練 289
20.6 學習成果評量 289
任務21 JavaScript抽獎器 290
21.1 任務導入 291
21.2 成果目標 291
21.3 核心知識 291
21.3.1 數據存儲 291
21.3.2 數組 292
21.3.3 創建數組 292
21.3.4 數組元素的讀和寫 293
21.3.5 數組元素的添加和刪除 293
21.3.6 稀疏數組 293
21.3.7 數組長度 294
21.3.8 數組遍歷 294
21.3.9 ECMAScript3數組方法 294
21.3.10 ECMAScript5數組方法 296
21.4 任務實施 298
21.4.1 編寫HTML 298
21.4.2 編寫CSS 299
21.4.3 編寫JavaScript 300
21.4.4 測試頁面 301
21.5 強化訓練 301
21.6 學習成果評量 302
任務22 座位預訂程序 303
22.1 任務導入 304
22.2 成果目標 304
22.3 核心知識 304
22.3.1 面向對象背景 304
22.3.2 對象的屬性和方法 305
22.3.3 創建對象方法――字面量
語法 305
22.3.4 創建對象方法――構造函數
語法 305
22.3.5 添加和刪除屬性 307
22.3.6 訪問對象 307
22.3.7 this關鍵字 307
22.3.8 OOP相關概念 308
22.3.9 瀏覽器內置對象 308
22.3.10 瀏覽器對象模型BOM 309
22.3.11 document對象 309
22.3.12 window對象 311
22.3.13 navigator對象集合 313
22.3.14 screen對象 313
22.3.15 history對象 314
22.3.16 location對象 314
22.3.17 字符串對象 314
22.3.18 日期對象 315
22.3.19 數組對象 317
22.3.20 邏輯對象 317
22.3.21 算術對象 318
22.3.22 Number對象 318
22.3.23 Form對象 319
22.3.24 iframe對象屬性 319
22.4 任務實施 320
22.4.1 編寫HTML 320
22.4.2 編寫CSS樣式 321
22.4.3 編寫JavaScript 323
22.4.4 測試頁面 324
22.5 強化訓練 324
22.6 學習成果評量 325
任務23 註冊表單驗證 326
23.1 任務導入 327
23.2 成果目標 327
23.3 核心知識 327
23.3.1 正則表達式的概念 327
23.3.2 正則表達式的工作原理 328
23.3.3 定義正則表達式 328
23.3.4 元字符 329
23.3.5 反義字符 329
23.3.6 限定字符 330
23.3.7 轉義字符 330
23.3.8 字符分支 330
23.3.9 字符分組 330
23.3.10 貪婪匹配和懶惰匹配 331
23.3.11 後向引用 331
23.3.12 零寬斷言 331
23.3.13 其他語法 332
23.3.14 常用簡易規則 332
23.3.15 常用正則表達式 333
23.4 任務實施 338
23.4.1 編寫HTML 338
23.4.2 編寫CSS樣式 339
23.4.3 編寫JavaScript 341
23.4.4 測試頁面 342
23.5 強化訓練 343
23.6 學習成果評量 343

參考文獻 344