任務(wù)1 搭建JavaScript開發(fā)

　環(huán)境　1

1.1　任務(wù)導(dǎo)入　2

1.2　成果目標(biāo)　2

1.3　核心知識(shí)　3

1.3.1　JavaScript演進(jìn)　3

1.3.2　JavaScript介紹　4

1.3.3　Web頁(yè)面渲染過程　5

1.3.4　Visual Studio Code介紹　6

1.3.5　Visual Studio Code快捷鍵　6

1.3.6　EMMET語(yǔ)法　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執(zhí)行順序　12

1.3.12　腳本位置　13

1.3.13　組織腳本　13

1.3.14　無(wú)阻塞腳本　14

1.3.15　選取DOM對(duì)象　17

1.3.16　addEventListener　20

1.3.17　讀寫HTML DOM style對(duì)象

　屬性　20

1.3.18　cssText　21

1.4　任務(wù)實(shí)施　22

1.4.1　安裝和配置Visual Studio Code　22

1.4.2　安裝常用擴(kuò)展　23

1.4.3　Chrome瀏覽器　24

1.4.4　Chrome開發(fā)者工具　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　測(cè)試頁(yè)面　28

1.5　強(qiáng)化訓(xùn)練　28

1.6　學(xué)習(xí)成果評(píng)量　29

任務(wù)2　斑馬線表格制作　30

2.1　任務(wù)導(dǎo)入　31

2.2　成果目標(biāo)　31

2.3　核心知識(shí)　32

2.3.1　表格常用標(biāo)簽　32

2.3.2　表格斑馬線原理　33

2.3.3　讀寫HTML DOM className

　屬性　33

2.3.4　嚴(yán)格模式（use strict）　34

2.3.5　定義變量　35

2.3.6　常量　35

2.3.7　變量命名規(guī)則　35

2.3.8　JavaScript語(yǔ)法規(guī)范　36

2.3.9　變量類型　37

2.3.10　變量作用域　38

2.3.11　避免變量污染　40

2.3.12　閉包函數(shù)　40

2.3.13　JavaScript轉(zhuǎn)義字符　40

2.3.14　相等操作符　41

2.3.15　toNumber　41

2.3.16　使用typeof檢測(cè)類型　42

2.3.17　使用constructor檢測(cè)類型　42

2.3.18　使用toString()檢測(cè)封裝類型　42

2.3.19　事件委托　43

2.4　任務(wù)實(shí)施　44

2.4.1　編寫HTML　44

2.4.2　編寫CSS樣式　46

2.4.3　編寫JavaScript　47

2.4.4　測(cè)試頁(yè)面　48

2.5　強(qiáng)化訓(xùn)練　49

2.6　學(xué)習(xí)成果評(píng)量　49

任務(wù)3　彈出消息框　50

3.1　任務(wù)導(dǎo)入　51

3.2　成果目標(biāo)　51

3.3　核心知識(shí)　51

3.3.1　基于負(fù)邊距的垂直居中　51

3.3.2　基于transform屬性的垂直

　居中　52

3.3.3　元素動(dòng)畫制作　53

3.3.4　警告對(duì)話框alert()　53

3.3.5　確認(rèn)對(duì)話框confirm()　54

3.3.6　提示對(duì)話框prompt()　54

3.3.7　BOM介紹　54

3.3.8　window對(duì)象　54

3.3.9　location對(duì)象　55

3.3.10　screen對(duì)象　56

3.3.11　history對(duì)象　57

3.4　任務(wù)實(shí)施　57

3.4.1　編寫HTML　57

3.4.2　編寫CSS樣式　58

3.4.3　編寫JavaScript　60

3.4.4　測(cè)試頁(yè)面　60

3.5　強(qiáng)化訓(xùn)練　61

3.6　學(xué)習(xí)成果評(píng)量　61

任務(wù)4　圖片縮放特效　62

4.1　任務(wù)導(dǎo)入　63

4.2　成果目標(biāo)　63

4.3　核心知識(shí)　63

4.3.1　DOM編程　63

4.3.2　DOM訪問與修改　64

4.3.3　DOM遍歷　64

4.3.4　innerHTML對(duì)比DOM方法　65

4.3.5　字符串連接　65

4.3.6　HTML集合length　66

4.3.7　減少瀏覽器重排與重繪　67

4.4　任務(wù)實(shí)施　69

4.4.1　編寫頁(yè)面結(jié)構(gòu)　69

4.4.2　編寫CSS樣式　71

4.4.3　編寫JavaScript　72

4.4.4　測(cè)試頁(yè)面　73

4.5　強(qiáng)化訓(xùn)練　73

4.6　學(xué)習(xí)成果評(píng)量　74

任務(wù)5　網(wǎng)頁(yè)換膚　75

5.1　任務(wù)導(dǎo)入　76

5.2　成果目標(biāo)　76

5.3　核心知識(shí)　76

5.3.1　網(wǎng)頁(yè)換膚原理　76

5.3.2　HTML文檔對(duì)象模型　77

5.3.3　HTML DOM節(jié)點(diǎn)樹　77

5.3.4　document對(duì)象屬性和方法　78

5.3.5　element對(duì)象屬性和方法　79

5.3.6　獲取元素屬性getAttribute()　82

5.3.7　設(shè)置元素屬性setAttribute()　83

5.3.8　本地?cái)?shù)據(jù)存儲(chǔ)方案　83

5.3.9　WebStorage　84

5.3.10　WebStorage基本屬性和

　方法　84

5.3.11　使用sessionStorage對(duì)象　84

5.3.12　使用localStorage對(duì)象　86

5.3.13　使用storage事件　86

5.3.14　cookie介紹　87

5.3.15　cookie構(gòu)成　87

5.3.16　寫入cookie信息　88

5.3.17　讀取cookie信息　90

5.4　任務(wù)實(shí)施　91

5.4.1　編寫HTML　91

5.4.2　編寫CSS　92

5.4.3　編寫JavaScript　94

5.4.4　測(cè)試頁(yè)面　95

5.5　強(qiáng)化訓(xùn)練　95

5.6　學(xué)習(xí)成果評(píng)量　95

任務(wù)6　下拉廣告　96

6.1　任務(wù)導(dǎo)入　97

6.2　成果目標(biāo)　97

6.3　核心知識(shí)　97

6.3.1　transition屬性　97

6.3.2　超時(shí)調(diào)用setTimeout()方法　98

6.4　任務(wù)實(shí)施　99

6.4.1　編寫HTML　99

6.4.2　編寫CSS樣式　100

6.4.3　編寫JavaScript代碼　101

6.4.4　測(cè)試頁(yè)面　102

6.5　強(qiáng)化訓(xùn)練　102

6.6　學(xué)習(xí)成果評(píng)量　103

任務(wù)7　輪播圖　104

7.1　任務(wù)導(dǎo)入　105

7.2　成果目標(biāo)　105

7.3　核心知識(shí)　105

7.3.1　間歇調(diào)用setInterval()　105

7.3.2　避免常見JavaScript錯(cuò)誤　106

7.3.3　理解Error對(duì)象　106

7.3.4　錯(cuò)誤處理思路　107

7.3.5　使用瀏覽器控制臺(tái)調(diào)試

　程序　108

7.3.6　使用斷點(diǎn)調(diào)試程序　109

7.3.7　使用try-catch處理異�！�110

7.4　任務(wù)實(shí)施　111

7.4.1　編寫HTML　111

7.4.2　編寫CSS樣式　113

7.4.3　編寫JavaScript　116

7.4.4　測(cè)試頁(yè)面　117

7.5　強(qiáng)化訓(xùn)練　117

7.6　學(xué)習(xí)成果評(píng)量　118

任務(wù)8　滾動(dòng)公告　119

8.1　任務(wù)導(dǎo)入　120

8.2　學(xué)習(xí)成果　120

8.3　核心知識(shí)　120

8.3.1　HTML事件模型　120

8.3.2　DOM0級(jí)事件模型　121

8.3.3　DOM2級(jí)事件模型　122

8.3.4　IE事件模型　123

8.4　任務(wù)實(shí)施　124

8.4.1　編寫HTML　124

8.4.2　編寫CSS樣式　125

8.4.3　編寫JavaScript　126

8.4.4　測(cè)試頁(yè)面　127

8.5　強(qiáng)化訓(xùn)練　128

8.6　學(xué)習(xí)成果評(píng)量　128

任務(wù)9　貸款計(jì)算器　129

9.1　任務(wù)導(dǎo)入　130

9.2　成果目標(biāo)　130

9.3　核心知識(shí)　130

9.3.1　表單類型　130

9.3.2　表單結(jié)構(gòu)　132

9.3.3　form對(duì)象　133

9.3.4　表單事件　134

9.3.5　表達(dá)式與操作符　135

9.3.6　轉(zhuǎn)換為數(shù)字　136

9.3.7　設(shè)置小數(shù)位數(shù)　137

9.3.8　Math對(duì)象　137

9.3.9　條件語(yǔ)句　138

9.3.10　for循環(huán)　141

9.3.11　while循環(huán)　142

9.3.12　do-while循環(huán)　142

9.3.13　for-in循環(huán)　142

9.3.14　優(yōu)化循環(huán)性能　143

9.3.15　forEach()　143

9.4　任務(wù)實(shí)施　143

9.4.1　編寫HTML　143

9.4.2　編寫CSS樣式　145

9.4.3　編寫JavaScript　147

9.4.4　測(cè)試頁(yè)面　147

9.5　強(qiáng)化訓(xùn)練　148

9.6　學(xué)習(xí)成果評(píng)量　148

任務(wù)10　計(jì)算器　149

10.1　任務(wù)導(dǎo)入　150

10.2　成果目標(biāo)　150

10.3　核心知識(shí)　150

10.3.1　函數(shù)介紹　150

10.3.2　定義函數(shù)　151

10.3.3　嵌套函數(shù)　152

10.3.4　調(diào)用函數(shù)　152

10.3.5　函數(shù)的實(shí)參和形參　155

10.3.6　將對(duì)象屬性用作實(shí)參　157

10.3.7　實(shí)參類型　157

10.3.8　作為值的函數(shù)　157

10.3.9　自定義函數(shù)屬性　158

10.3.10　slice()　158

10.3.11　isNaN()　158

10.4　任務(wù)實(shí)施　159

10.4.1　編寫HTML　159

10.4.2　編寫CSS樣式　160

10.4.3　編寫JavaScript　162

10.4.4　測(cè)試頁(yè)面　164

10.5　強(qiáng)化訓(xùn)練　165

10.6　學(xué)習(xí)成果評(píng)量　165

任務(wù)11　投票　166

11.1　任務(wù)導(dǎo)入　167

11.2　成果目標(biāo)　167

11.3　核心知識(shí)　167

11.3.1　匿名函數(shù)　167

11.3.2　數(shù)據(jù)存取方式　168

11.3.3　對(duì)象成員　169

11.3.4　函數(shù)作用域　170

11.3.5　閉包　171

11.3.6　閉包函數(shù)　173

11.3.7　遞歸函數(shù)　174

11.4　任務(wù)實(shí)施　174

11.4.1　編寫HTML　174

11.4.2　編寫CSS樣式　175

11.4.3　編寫JavaScript　176

11.4.4　測(cè)試頁(yè)面　177

11.5　強(qiáng)化訓(xùn)練　177

11.6　學(xué)習(xí)成果評(píng)量　178

任務(wù)12　折疊面板　179

12.1　任務(wù)導(dǎo)入　180

12.2　成果目標(biāo)　180

12.3　核心知識(shí)　180

12.4　任務(wù)實(shí)施　181

12.4.1　編寫HTML　181

12.4.2　編寫CSS　182

12.4.3　編寫JavaScript　183

12.4.4　測(cè)試頁(yè)面　184

12.5　強(qiáng)化訓(xùn)練　184

12.6　學(xué)習(xí)成果評(píng)量　185

任務(wù)13　銀行客服電話查詢　186

13.1　任務(wù)導(dǎo)入　187

13.2　成果目標(biāo)　187

13.3　核心知識(shí)　187

13.3.1　Ajax簡(jiǎn)介　187

13.3.2　Ajax原理　188

13.3.3　HTTP請(qǐng)求　188

13.3.4　HTTP狀態(tài)碼　189

13.3.5　定義XMLHttpRequest

　對(duì)象　190

13.3.6　建立XMLHttpRequest

　連接　191

13.3.7　跟蹤狀態(tài)　192

13.3.8　中止請(qǐng)求　192

13.3.9　Ajax請(qǐng)求與響應(yīng)模板　192

13.3.10　獲取數(shù)據(jù)　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加載其他服務(wù)器的

　數(shù)據(jù)　194

13.3.16　獲取頭部信息　195

13.3.17　JSONP工作原理　195

13.4　任務(wù)實(shí)施　196

13.4.1　編寫HTML　196

13.4.2　編寫CSS樣式　196

13.4.3　編寫JSON　197

13.4.4　編寫JavaScript　199

13.4.5　測(cè)試頁(yè)面　200

13.5　強(qiáng)化訓(xùn)練　200

13.6　學(xué)習(xí)成果評(píng)量　200

任務(wù)14　省、市、區(qū)聯(lián)動(dòng)菜單　201

14.1　任務(wù)導(dǎo)入　202

14.2　成果目標(biāo)　202

14.3　核心知識(shí)　202

14.3.1　下拉列表select　202

14.3.2　HTML DOM Option對(duì)象　203

14.3.3　select add()方法　203

14.3.4　JSON簡(jiǎn)介　203

14.3.5　JSON語(yǔ)法　204

14.3.6　JSON與XML比較　205

14.3.7　訪問JSON對(duì)象值　206

14.3.8　遍歷JSON對(duì)象　206

14.3.9　修改JSON值　207

14.3.10　刪除對(duì)象屬性　207

14.3.11　解析JSON對(duì)象　207

14.3.12　JSON.stringify()　207

14.3.13　JSON轉(zhuǎn)換為JavaScript

　對(duì)象　208

14.4　任務(wù)實(shí)施　208

14.4.1　編寫HTML　208

14.4.2　編寫CSS　209

14.4.3　JSON數(shù)據(jù)準(zhǔn)備　210

14.4.4　編寫JavaScript　211

14.4.5　測(cè)試頁(yè)面　212

14.5　強(qiáng)化訓(xùn)練　213

14.6　學(xué)習(xí)成果評(píng)量　213

任務(wù)15　滾動(dòng)監(jiān)聽　214

15.1　任務(wù)導(dǎo)入　215

15.2　成果目標(biāo)　215

15.3　核心知識(shí)　215

15.3.1　滾動(dòng)監(jiān)聽　215

15.3.2　CSS腳本化　215

15.3.3　訪問CSS行內(nèi)樣式　216

15.3.4　使用styleSheets對(duì)象　217

15.3.5　計(jì)算樣式　218

15.3.6　元素尺寸　220

15.3.7　window.scrollY　220

15.4　任務(wù)實(shí)施　221

15.4.1　編寫HTML　221

15.4.2　編寫CSS樣式　222

15.4.3　編寫JavaScript　223

15.4.4　測(cè)試頁(yè)面　224

15.5　強(qiáng)化訓(xùn)練　224

15.6　學(xué)習(xí)成果評(píng)量　225

任務(wù)16　視頻播放器　226

16.1　任務(wù)導(dǎo)入　227

16.2　成果目標(biāo)　227

16.3　核心知識(shí)　227

16.3.1　HTML video標(biāo)簽　227

16.3.2　HTML音頻/視頻方法　228

16.3.3　HTML音頻/視頻屬性　228

16.3.4　HTML音頻/視頻事件　229

16.3.5　瀏覽器支持的視頻格式　230

16.3.6　瀏覽器視頻能力檢測(cè)　231

16.3.7　實(shí)現(xiàn)播放列表功能　231

16.4　任務(wù)實(shí)施　232

16.4.1　編寫HTML　232

16.4.2　編寫CSS樣式　233

16.4.3　編寫JavaScript　235

16.4.4　測(cè)試頁(yè)面　236

16.5　強(qiáng)化訓(xùn)練　236

16.6　學(xué)習(xí)成果評(píng)量　236

任務(wù)17　刮刮樂　237

17.1　任務(wù)導(dǎo)入　238

17.2　成果目標(biāo)　238

17.3　核心知識(shí)　238

17.3.1　事件基礎(chǔ)　238

17.3.2　事件流　239

17.3.3　事件冒泡　239

17.3.4　事件捕獲　240

17.3.5　事件對(duì)象　240

17.3.6　IE中的事件對(duì)象　243

17.3.7　跨瀏覽器的事件對(duì)象　245

17.3.8　共享onload事件　247

17.3.9　事件委托　248

17.3.10　事件類型　249

17.3.11　UI事件　249

17.3.12　焦點(diǎn)事件　250

17.3.13　鼠標(biāo)事件　250

17.3.14　鍵盤事件　251

17.3.15　鼠標(biāo)/鍵盤事件對(duì)象屬性　251

17.3.16　鼠標(biāo)/鍵盤事件方法　252

17.3.17　框架/對(duì)象（Frame/Object）

　事件　252

17.3.18　表單事件　253

17.3.19　剪貼板事件　253

17.3.20　打印事件　253

17.3.21　拖動(dòng)事件　253

17.3.22　多媒體（Media）事件　254

17.3.23　動(dòng)畫事件　254

17.3.24　過渡事件　255

17.3.25　其他事件　255

17.3.26　模擬事件過程　255

17.3.27　模擬鼠標(biāo)事件　256

17.3.28　模擬鍵盤事件　257

17.3.29　globalCompositeOperation

　屬性　257

17.4　任務(wù)實(shí)施　258

17.4.1　編寫HTML　258

17.4.2　編寫CSS樣式　258

17.4.3　編寫JavaScript　259

17.4.4　測(cè)試頁(yè)面　260

17.5　強(qiáng)化訓(xùn)練　260

17.6　學(xué)習(xí)成果評(píng)量　260

任務(wù)18　微信運(yùn)動(dòng)步數(shù)統(tǒng)計(jì)圖　261

18.1　任務(wù)導(dǎo)入　262

18.2　成果目標(biāo)　262

18.3　核心知識(shí)　262

18.3.1　HTML5 canvas　262

18.3.2　canvas坐標(biāo)　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　任務(wù)實(shí)施　265

18.4.1　編寫HTML　265

18.4.2　編寫JavaScript　266

18.4.3　測(cè)試頁(yè)面　267

18.5　強(qiáng)化訓(xùn)練　267

18.6　學(xué)習(xí)成果評(píng)量　268

任務(wù)19　相冊(cè)　269

19.1　任務(wù)導(dǎo)入　270

19.2　成果目標(biāo)　270

19.3　任務(wù)實(shí)施　270

19.3.1　編寫HTML　270

19.3.2　編寫CSS樣式　273

19.3.3　編寫JavaScript　276

19.3.4　測(cè)試頁(yè)面　277

19.4　強(qiáng)化訓(xùn)練　278

19.5　學(xué)習(xí)成果評(píng)量　278

任務(wù)20　選項(xiàng)卡　279

20.1　任務(wù)導(dǎo)入　280

20.2　成果目標(biāo)　280

20.3　核心知識(shí)　281

20.3.1　選項(xiàng)卡HTML模型　281

20.3.2　重置ul屬性　281

20.3.3　浮動(dòng)（float）　282

20.3.4　絕對(duì)定位（absolute）　283

20.3.5　選項(xiàng)卡切換原理　283

20.4　任務(wù)實(shí)施　283

20.4.1　編寫HTML　283

20.4.2　編寫CSS　286

20.4.3　編寫JavaScript腳本　288

20.4.4　瀏覽器測(cè)試　289

20.5　強(qiáng)化訓(xùn)練　289

20.6　學(xué)習(xí)成果評(píng)量　289

任務(wù)21　JavaScript抽獎(jiǎng)器　290

21.1　任務(wù)導(dǎo)入　291

21.2　成果目標(biāo)　291

21.3　核心知識(shí)　291

21.3.1　數(shù)據(jù)存儲(chǔ)　291

21.3.2　數(shù)組　292

21.3.3　創(chuàng)建數(shù)組　292

21.3.4　數(shù)組元素的讀和寫　293

21.3.5　數(shù)組元素的添加和刪除　293

21.3.6　稀疏數(shù)組　293

21.3.7　數(shù)組長(zhǎng)度　294

21.3.8　數(shù)組遍歷　294

21.3.9　ECMAScript3數(shù)組方法　294

21.3.10　ECMAScript5數(shù)組方法　296

21.4　任務(wù)實(shí)施　298

21.4.1　編寫HTML　298

21.4.2　編寫CSS　299

21.4.3　編寫JavaScript　300

21.4.4　測(cè)試頁(yè)面　301

21.5　強(qiáng)化訓(xùn)練　301

21.6　學(xué)習(xí)成果評(píng)量　302

任務(wù)22　座位預(yù)訂程序　303

22.1　任務(wù)導(dǎo)入　304

22.2　成果目標(biāo)　304

22.3　核心知識(shí)　304

22.3.1　面向?qū)ο蟊尘啊?04

22.3.2　對(duì)象的屬性和方法　305

22.3.3　創(chuàng)建對(duì)象方法字面量

　語(yǔ)法　305

22.3.4　創(chuàng)建對(duì)象方法構(gòu)造函數(shù)

　語(yǔ)法　305

22.3.5　添加和刪除屬性　307

22.3.6　訪問對(duì)象　307

22.3.7　this關(guān)鍵字　307

22.3.8　OOP相關(guān)概念　308

22.3.9　瀏覽器內(nèi)置對(duì)象　308

22.3.10　瀏覽器對(duì)象模型BOM　309

22.3.11　document對(duì)象　309

22.3.12　window對(duì)象　311

22.3.13　navigator對(duì)象集合　313

22.3.14　screen對(duì)象　313

22.3.15　history對(duì)象　314

22.3.16　location對(duì)象　314

22.3.17　字符串對(duì)象　314

22.3.18　日期對(duì)象　315

22.3.19　數(shù)組對(duì)象　317

22.3.20　邏輯對(duì)象　317

22.3.21　算術(shù)對(duì)象　318

22.3.22　Number對(duì)象　318

22.3.23　Form對(duì)象　319

22.3.24　iframe對(duì)象屬性　319

22.4　任務(wù)實(shí)施　320

22.4.1　編寫HTML　320

22.4.2　編寫CSS樣式　321

22.4.3　編寫JavaScript　323

22.4.4　測(cè)試頁(yè)面　324

22.5　強(qiáng)化訓(xùn)練　324

22.6　學(xué)習(xí)成果評(píng)量　325

任務(wù)23　注冊(cè)表單驗(yàn)證　326

23.1　任務(wù)導(dǎo)入　327

23.2　成果目標(biāo)　327

23.3　核心知識(shí)　327

23.3.1　正則表達(dá)式的概念　327

23.3.2　正則表達(dá)式的工作原理　328

23.3.3　定義正則表達(dá)式　328

23.3.4　元字符　329

23.3.5　反義字符　329

23.3.6　限定字符　330

23.3.7　轉(zhuǎn)義字符　330

23.3.8　字符分支　330

23.3.9　字符分組　330

23.3.10　貪婪匹配和懶惰匹配　331

23.3.11　后向引用　331

23.3.12　零寬斷言　331

23.3.13　其他語(yǔ)法　332

23.3.14　常用簡(jiǎn)易規(guī)則　332

23.3.15　常用正則表達(dá)式　333

23.4　任務(wù)實(shí)施　338

23.4.1　編寫HTML　338

23.4.2　編寫CSS樣式　339

23.4.3　編寫JavaScript　341

23.4.4　測(cè)試頁(yè)面　342

23.5　強(qiáng)化訓(xùn)練　343

23.6　學(xué)習(xí)成果評(píng)量　343



參考文獻(xiàn)　344