JavaScript 前端開發模塊化教程

趙建保，擔任廣東省品牌專業、廣東省示範性高職教育專業、自主招生試點專業-數字媒體應用技術專業負責人10餘年；曾獲廣東省高職高專IT專業優質課評比二等獎，廣東省第四屆信息技術類專業帶頭人說專業競賽三等獎，學院十佳教師；以第一作者發表論文《基於Citespace的大數據研究可視化分析》、《高職能力型課程學習評價指標體系構建》等16篇，主持或參與國家、省級和校級課題5項；以第一主編和獨編教材4部，多次重印。

任務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