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