JavaScript前端开发模块化教程

  

   本书以HTML5、CSS3、JavaScript及jQuery为技术支撑，以WebStorm为开发环境，将网页前端开发过程的任务规范化、模块化和组件化。全书设计了斑马线表格、JavaScript轮播图、相册、全屏广告、标签页、弹出框、下拉菜单、折叠、视频播放、图片、一点多响、窗口等模块。

   赵建保，担任广东省品牌专业、广东省示范性高职教育专业、自主招生试点专业-数字媒体应用技术专业负责人10余年；曾获广东省高职高专IT专业优质课评比二等奖，广东省第四届信息技术类专业带头人说专业竞赛三等奖，学院靠前教师；以作者发表论文《基于Citespace的大数据研究可视化分析》、《高职能力型课程学习评价指标体系构建》等16篇，主持或参与国家、省级和校级课题5项；以主编和独编教材4部，多次重印。

   任务1搭建JavaScript开发环境1

1.1任务导入2

1.2成果目标2

1.3核心知识3

1.3.1JavaScript演进3

1.3.2JavaScript介绍4

1.3.3Web页面渲染过程5

1.3.4VisualStudioCode介绍6

1.3.5VisualStudioCode快捷键6

1.3.6EMMET语法9

1.3.7Node.js介绍10

1.3.8http-server介绍10

1.3.9在HTML中使用JavaScript11

1.3.10高性能JavaScript12

1.3.11JavaScript执行顺序12

1.3.12脚本位置13

1.3.13组织脚本13

1.3.14无阻塞脚本14

1.3.15选取DOM对象17

1.3.16addEventListener20

1.3.17读写HTMLDOMstyle对象属性20

1.3.18cssText21

1.4任务实施22

1.4.1安装和配置VisualStudioCode22

1.4.2安装常用扩展23

1.4.3Chrome浏览器24

1.4.4Chrome开发者工具24

1.4.5安装Node.js25

1.4.6安装与配置http-server25

1.4.7编写HTML和CSS25

1.4.8编写JavaScript27

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读写HTMLDOMclassName属性33

2.3.4严格模式（usestrict）34

2.3.5定义变量35

2.3.6常量35

2.3.7变量命名规则35

2.3.8JavaScript语法规范36

2.3.9变量类型37

2.3.10变量作用域38

2.3.11避免变量污染40

2.3.12闭包函数40

2.3.13JavaScript转义字符40

2.3.14相等操作符41

2.3.15toNumber41

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编写HTML44

2.4.2编写CSS样式46

2.4.3编写JavaScript47

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.7BOM介绍54

3.3.8window对象54

3.3.9location对象55

3.3.10screen对象56

3.3.11history对象57

3.4任务实施57

3.4.1编写HTML57

3.4.2编写CSS样式58

3.4.3编写JavaScript60

3.4.4测试页面60

3.5强化训练61

3.6学习成果评量61

任务4图片缩放特效62

4.1任务导入63

4.2成果目标63

4.3核心知识63

4.3.1DOM编程63

4.3.2DOM访问与修改64

4.3.3DOM遍历64

4.3.4innerHTML对比DOM方法65

4.3.5字符串连接65

4.3.6HTML集合length66

4.3.7减少浏览器重排与重绘67

4.4任务实施69

4.4.1编写页面结构69

4.4.2编写CSS样式71

4.4.3编写JavaScript72

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.2HTML文档对象模型77

5.3.3HTMLDOM节点树77

5.3.4document对象属性和方法78

5.3.5element对象属性和方法79

5.3.6获取元素属性getAttribute()82

5.3.7设置元素属性setAttribute()83

5.3.8本地数据存储方案83

5.3.9WebStorage84

5.3.10WebStorage基本属性和方法84

5.3.11使用sessionStorage对象84

5.3.12使用localStorage对象86

5.3.13使用storage事件86

5.3.14cookie介绍87

5.3.15cookie构成87

5.3.16写入cookie信息88

5.3.17读取cookie信息90

5.4任务实施91

5.4.1编写HTML91

5.4.2编写CSS92

5.4.3编写JavaScript94

5.4.4测试页面95

5.5强化训练95

5.6学习成果评量95

任务6下拉广告96

6.1任务导入97

6.2成果目标97

6.3核心知识97

6.3.1transition属性97

6.3.2超时调用setTimeout()方法98

6.4任务实施99

6.4.1编写HTML99

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编写HTML111

7.4.2编写CSS样式113

7.4.3编写JavaScript116

7.4.4测试页面117

7.5强化训练117

7.6学习成果评量118

任务8滚动公告119

8.1任务导入120

8.2学习成果120

8.3核心知识120

8.3.1HTML事件模型120

8.3.2DOM0级事件模型121

8.3.3DOM2级事件模型122

8.3.4IE事件模型123

8.4任务实施124

8.4.1编写HTML124

8.4.2编写CSS样式125

8.4.3编写JavaScript126

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.3form对象133

9.3.4表单事件134

9.3.5表达式与操作符135

9.3.6转换为数字136

9.3.7设置小数位数137

9.3.8Math对象137

9.3.9条件语句138

9.3.10for循环141

9.3.11while循环142

9.3.12do-while循环142

9.3.13for-in循环142

9.3.14优化循环性能143

9.3.15forEach()143

9.4任务实施143

9.4.1编写HTML143

9.4.2编写CSS样式145

9.4.3编写JavaScript147

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.10slice()158

10.3.11isNaN()158

10.4任务实施159

10.4.1编写HTML159

10.4.2编写CSS样式160

10.4.3编写JavaScript162

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编写HTML174

11.4.2编写CSS样式175

11.4.3编写JavaScript176

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编写HTML181

12.4.2编写CSS182

12.4.3编写JavaScript183

12.4.4测试页面184

12.5强化训练184

12.6学习成果评量185

任务13银行客服电话查询186

13.1任务导入187

13.2成果目标187

13.3核心知识187

13.3.1Ajax简介187

13.3.2Ajax原理188

13.3.3HTTP请求188

13.3.4HTTP状态码189

13.3.5定义XMLHttpRequest对象190

13.3.6建立XMLHttpRequest连接191

13.3.7跟踪状态192

13.3.8中止请求192

13.3.9Ajax请求与响应模板192

13.3.10获取数据193

13.3.11获取纯文本194

13.3.12使用Ajax加载HTML194

13.3.13使用Ajax加载JSON194

13.3.14获取JavaScript脚本194

13.3.15使用Ajax加载其他服务器的数据194

13.3.16获取头部信息195

13.3.17JSONP工作原理195

13.4任务实施196

13.4.1编写HTML196

13.4.2编写CSS样式196

13.4.3编写JSON197

13.4.4编写JavaScript199

13.4.5测试页面200

13.5强化训练200

13.6学习成果评量200

任务14省、市、区联动菜单201

14.1任务导入202

14.2成果目标202

14.3核心知识202

14.3.1下拉列表select202

14.3.2HTMLDOMOption对象203

14.3.3selectadd()方法203

14.3.4JSON简介203

14.3.5JSON语法204

14.3.6JSON与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.12JSON.stringify()207

14.3.13JSON转换为JavaScript对象208

14.4任务实施208

14.4.1编写HTML208

14.4.2编写CSS209

14.4.3JSON数据准备210

14.4.4编写JavaScript211

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.2CSS脚本化215

15.3.3访问CSS行内样式216

15.3.4使用styleSheets对象217

15.3.5计算样式218

15.3.6元素尺寸220

15.3.7window.scrollY220

15.4任务实施221

15.4.1编写HTML221

15.4.2编写CSS样式222

15.4.3编写JavaScript223

15.4.4测试页面224

15.5强化训练224

15.6学习成果评量225

任务16视频播放器226

16.1任务导入227

16.2成果目标227

16.3核心知识227

16.3.1HTMLvideo标签227

16.3.2HTML音频/视频方法228

16.3.3HTML音频/视频属性228

16.3.4HTML音频/视频事件229

16.3.5浏览器支持的视频格式230

16.3.6浏览器视频能力检测231

16.3.7实现播放列表功能231

16.4任务实施232

16.4.1编写HTML232

16.4.2编写CSS样式233

16.4.3编写JavaScript235

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.6IE中的事件对象243

17.3.7跨浏览器的事件对象245

17.3.8共享onload事件247

17.3.9事件委托248

17.3.10事件类型249

17.3.11UI事件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.29globalCompositeOperation属性257

17.4任务实施258

17.4.1编写HTML258

17.4.2编写CSS样式258

17.4.3编写JavaScript259

17.4.4测试页面260

17.5强化训练260

17.6学习成果评量260

任务18微信运动步数统计图261

18.1任务导入262

18.2成果目标262

18.3核心知识262

18.3.1HTML5canvas262

18.3.2canvas坐标263

18.3.3canvas绘图步骤263

18.3.4canvas绘制渐变色263

18.3.5canvas绘制文本263

18.3.6canvas绘制直线264

18.3.7canvas绘制矩形264

18.3.8canvas绘制圆形265

18.3.9canvas绘制曲线265

18.4任务实施265

18.4.1编写HTML265

18.4.2编写JavaScript266

18.4.3测试页面267

18.5强化训练267

18.6学习成果评量268

任务19相册269

19.1任务导入270

19.2成果目标270

19.3任务实施270

19.3.1编写HTML270

19.3.2编写CSS样式273

19.3.3编写JavaScript276

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编写HTML283

20.4.2编写CSS286

20.4.3编写JavaScript脚本288

20.4.4浏览器测试289

20.5强化训练289

20.6学习成果评量289

任务21JavaScript抽奖器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.9ECMAScript3数组方法294

21.3.10ECMAScript5数组方法296

21.4任务实施298

21.4.1编写HTML298

21.4.2编写CSS299

21.4.3编写JavaScript300

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.7this关键字307

22.3.8OOP相关概念308

22.3.9浏览器内置对象308

22.3.10浏览器对象模型BOM309

22.3.11document对象309

22.3.12window对象311

22.3.13navigator对象集合313

22.3.14screen对象313

22.3.15history对象314

22.3.16location对象314

22.3.17字符串对象314

22.3.18日期对象315

22.3.19数组对象317

22.3.20逻辑对象317

22.3.21算术对象318

22.3.22Number对象318

22.3.23Form对象319

22.3.24iframe对象属性319

22.4任务实施320

22.4.1编写HTML320

22.4.2编写CSS样式321

22.4.3编写JavaScript323

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编写HTML338

23.4.2编写CSS样式339

23.4.3编写JavaScript341

23.4.4测试页面342

23.5强化训练343

23.6学习成果评量343

参考文献344