JavaScript前端开发模块化教程电子书

扉页

版权页

内容提要

前言

任务1 搭建JavaScript开发环境

1.1 任务导入

1.2 成果目标

1.3 核心知识

1.3.1 JavaScript演进

1.3.2 JavaScript介绍

1.3.3 Web页面渲染过程

1.3.4 Visual Studio Code介绍

1.3.5 Visual Studio Code快捷键

1.3.6 EMMET语法

1.3.7 Node.js介绍

1.3.8 http-server介绍

1.3.9 在HTML中使用JavaScript

1.3.10 高性能JavaScript

1.3.11 JavaScript执行顺序

1.3.12 脚本位置

1.3.13 组织脚本

1.3.14 无阻塞脚本

1.3.15 选取DOM对象

1.3.16 addEventListener

1.3.17 读写HTML DOM style对象属性

1.3.18 cssText

1.4 任务实施

1.4.1 安装和配置Visual Studio Code

1.4.2 安装常用扩展

1.4.3 Chrome浏览器

1.4.4 Chrome开发者工具

1.4.5 安装Node.js

1.4.6 安装与配置http-server

1.4.7 编写HTML和CSS

1.4.8 编写JavaScript

1.4.9 测试页面

1.5 强化训练

1.6 学习成果评量

任务2 斑马线表格制作

2.1 任务导入

2.2 成果目标

2.3 核心知识

2.3.1 表格常用标签

2.3.2 表格斑马线原理

2.3.3 读写HTML DOM className属性

2.3.4 严格模式（use strict）

2.3.5 定义变量

2.3.6 常量

2.3.7 变量命名规则

2.3.8 JavaScript语法规范

2.3.9 变量类型

2.3.10 变量作用域

2.3.11 避免变量污染

2.3.12 闭包函数

2.3.13 JavaScript转义字符

2.3.14 相等操作符

2.3.15 toNumber

2.3.16 使用typeof检测类型

2.3.17 使用constructor检测类型

2.3.18 使用toString（）检测封装类型

2.3.19 事件委托

2.4 任务实施

2.4.1 编写HTML

2.4.2 编写CSS样式

2.4.3 编写JavaScript

2.4.4 测试页面

2.5 强化训练

2.6 学习成果评量

任务3 弹出消息框

3.1 任务导入

3.2 成果目标

3.3 核心知识

3.3.1 基于负边距的垂直居中

3.3.2 基于transform属性的垂直居中

3.3.3 元素动画制作

3.3.4 警告对话框alert（）

3.3.5 确认对话框confirm（）

3.3.6 提示对话框prompt（）

3.3.7 BOM介绍

3.3.8 window对象

3.3.9 location对象

3.3.10 screen对象

3.3.11 history对象

3.4 任务实施

3.4.1 编写HTML

3.4.2 编写CSS样式

3.4.3 编写JavaScript

3.4.4 测试页面

3.5 强化训练

3.6 学习成果评量

任务4 图片缩放特效

4.1 任务导入

4.2 成果目标

4.3 核心知识

4.3.1 DOM编程

4.3.2 DOM访问与修改

4.3.3 DOM遍历

4.3.4 innerHTML对比DOM方法

4.3.5 字符串连接

4.3.6 HTML集合length

4.3.7 减少浏览器重排与重绘

4.4 任务实施

4.4.1 编写页面结构

4.4.2 编写CSS样式

4.4.3 编写JavaScript

4.4.4 测试页面

4.5 强化训练

4.6 学习成果评量

任务5 网页换肤

5.1 任务导入

5.2 成果目标

5.3 核心知识

5.3.1 网页换肤原理

5.3.2 HTML文档对象模型

5.3.3 HTML DOM节点树

5.3.4 document对象属性和方法

5.3.5 element对象属性和方法

5.3.6 获取元素属性getAttribute（）

5.3.7 设置元素属性setAttribute（）

5.3.8 本地数据存储方案

5.3.9 WebStorage

5.3.10 WebStorage基本属性和方法

5.3.11 使用sessionStorage对象

5.3.12 使用localStorage对象

5.3.13 使用storage事件

5.3.14 cookie介绍

5.3.15 cookie构成

5.3.16 写入cookie信息

5.3.17 读取cookie信息

5.4 任务实施

5.4.1 编写HTML

5.4.2 编写CSS

5.4.3 编写JavaScript

5.4.4 测试页面

5.5 强化训练

5.6 学习成果评量

任务6 下拉广告

6.1 任务导入

6.2 成果目标

6.3 核心知识

6.3.1 transition属性

6.3.2 超时调用setTimeout（）方法

6.4 任务实施

6.4.1 编写HTML

6.4.2 编写CSS样式

6.4.3 编写JavaScript代码

6.4.4 测试页面

6.5 强化训练

6.6 学习成果评量

任务7 轮播图

7.1 任务导入

7.2 成果目标

7.3 核心知识

7.3.1 间歇调用setInterval（）

7.3.2 避免常见JavaScript错误

7.3.3 理解Error对象

7.3.4 错误处理思路

7.3.5 使用浏览器控制台调试程序

7.3.6 使用断点调试程序

7.3.7 使用try-catch处理异常

7.4 任务实施

7.4.1 编写HTML

7.4.2 编写CSS样式

7.4.3 编写JavaScript

7.4.4 测试页面

7.5 强化训练

7.6 学习成果评量

任务8 滚动公告

8.1 任务导入

8.2 学习成果

8.3 核心知识

8.3.1 HTML事件模型

8.3.2 DOM0级事件模型

8.3.3 DOM2级事件模型

8.3.4 IE事件模型

8.4 任务实施

8.4.1 编写HTML

8.4.2 编写CSS样式

8.4.3 编写JavaScript

8.4.4 测试页面

8.5 强化训练

8.6 学习成果评量

任务9 贷款计算器

9.1 任务导入

9.2 成果目标

9.3 核心知识

9.3.1 表单类型

9.3.2 表单结构

9.3.3 form对象

9.3.4 表单事件

9.3.5 表达式与操作符

9.3.6 转换为数字

9.3.7 设置小数位数

9.3.8 Math对象

9.3.9 条件语句

9.3.10 for循环

9.3.11 while循环

9.3.12 do-while循环

9.3.13 for-in循环

9.3.14 优化循环性能

9.3.15 forEach（）

9.4 任务实施

9.4.1 编写HTML

9.4.2 编写CSS样式

9.4.3 编写JavaScript

9.4.4 测试页面

9.5 强化训练

9.6 学习成果评量

任务10 计算器

10.1 任务导入

10.2 成果目标

10.3 核心知识

10.3.1 函数介绍

10.3.2 定义函数

10.3.3 嵌套函数

10.3.4 调用函数

10.3.5 函数的实参和形参

10.3.6 将对象属性用作实参

10.3.7 实参类型

10.3.8 作为值的函数

10.3.9 自定义函数属性

10.3.10 slice（）

10.3.11 isNaN（）

10.4 任务实施

10.4.1 编写HTML

10.4.2 编写CSS样式

10.4.3 编写JavaScript

10.4.4 测试页面

10.5 强化训练

10.6 学习成果评量

任务11 投票

11.1 任务导入

11.2 成果目标

11.3 核心知识

11.3.1 匿名函数

11.3.2 数据存取方式

11.3.3 对象成员

11.3.4 函数作用域

11.3.5 闭包

11.3.6 闭包函数

11.3.7 递归函数

11.4 任务实施

11.4.1 编写HTML

11.4.2 编写CSS样式

11.4.3 编写JavaScript

11.4.4 测试页面

11.5 强化训练

11.6 学习成果评量

任务12 折叠面板

12.1 任务导入

12.2 成果目标

12.3 核心知识

12.4 任务实施

12.4.1 编写HTML

12.4.2 编写CSS

12.4.3 编写JavaScript

12.4.4 测试页面

12.5 强化训练

12.6 学习成果评量

任务13 银行客服电话查询

13.1 任务导入

13.2 成果目标

13.3 核心知识

13.3.1 Ajax简介

13.3.2 Ajax原理

13.3.3 HTTP请求

13.3.4 HTTP状态码

13.3.5 定义XMLHttpRequest对象

13.3.6 建立XMLHttpRequest连接

13.3.7 跟踪状态

13.3.8 中止请求

13.3.9 Ajax请求与响应模板

13.3.10 获取数据

13.3.11 获取纯文本

13.3.12 使用Ajax加载HTML

13.3.13 使用Ajax加载JSON

13.3.14 获取JavaScript脚本

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

13.3.16 获取头部信息

13.3.17 JSONP工作原理

13.4 任务实施

13.4.1 编写HTML

13.4.2 编写CSS样式

13.4.3 编写JSON

13.4.4 编写JavaScript

13.4.5 测试页面

13.5 强化训练

13.6 学习成果评量

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

14.1 任务导入

14.2 成果目标

14.3 核心知识

14.3.1 下拉列表select

14.3.2 HTML DOM Option对象

14.3.3 select add（）方法

14.3.4 JSON简介

14.3.5 JSON语法

14.3.6 JSON与XML比较

14.3.7 访问JSON对象值

14.3.8 遍历JSON对象

14.3.9 修改JSON值

14.3.10 删除对象属性

14.3.11 解析JSON对象

14.3.12 JSON.stringify（）

14.3.13 JSON转换为JavaScript对象

14.4 任务实施

14.4.1 编写HTML

14.4.2 编写CSS

14.4.3 JSON数据准备

14.4.4 编写JavaScript

14.4.5 测试页面

14.5 强化训练

14.6 学习成果评量

任务15 滚动监听

15.1 任务导入

15.2 成果目标

15.3 核心知识

15.3.1 滚动监听

15.3.2 CSS脚本化

15.3.3 访问CSS行内样式

15.3.4 使用styleSheets对象

15.3.5 计算样式

15.3.6 元素尺寸

15.3.7 window.scrollY

15.4 任务实施

15.4.1 编写HTML

15.4.2 编写CSS样式

15.4.3 编写JavaScript

15.4.4 测试页面

15.5 强化训练

15.6 学习成果评量

任务16 视频播放器

16.1 任务导入

16.2 成果目标

16.3 核心知识

16.3.1 HTML video标签

16.3.2 HTML音频/视频方法

16.3.3 HTML音频/视频属性

16.3.4 HTML音频/视频事件

16.3.5 浏览器支持的视频格式

16.3.6 浏览器视频能力检测

16.3.7 实现播放列表功能

16.4 任务实施

16.4.1 编写HTML

16.4.2 编写CSS样式

16.4.3 编写JavaScript

16.4.4 测试页面

16.5 强化训练

16.6 学习成果评量

任务17 刮刮乐

17.1 任务导入

17.2 成果目标

17.3 核心知识

17.3.1 事件基础

17.3.2 事件流

17.3.3 事件冒泡

17.3.4 事件捕获

17.3.5 事件对象

17.3.6 IE中的事件对象

17.3.7 跨浏览器的事件对象

17.3.8 共享onload事件

17.3.9 事件委托

17.3.10 事件类型

17.3.11 UI事件

17.3.12 焦点事件

17.3.13 鼠标事件

17.3.14 键盘事件

17.3.15 鼠标/键盘事件对象属性

17.3.16 鼠标/键盘事件方法

17.3.17 框架/对象（Frame/Object）事件

17.3.18 表单事件

17.3.19 剪贴板事件

17.3.20 打印事件

17.3.21 拖动事件

17.3.22 多媒体（Media）事件

17.3.23 动画事件

17.3.24 过渡事件

17.3.25 其他事件

17.3.26 模拟事件过程

17.3.27 模拟鼠标事件

17.3.28 模拟键盘事件

17.3.29 globalCompositeOperation属性

17.4 任务实施

17.4.1 编写HTML

17.4.2 编写CSS样式

17.4.3 编写JavaScript

17.4.4 测试页面

17.5 强化训练

17.6 学习成果评量

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

18.1 任务导入

18.2 成果目标

18.3 核心知识

18.3.1 HTML5 canvas

18.3.2 canvas坐标

18.3.3 canvas绘图步骤

18.3.4 canvas绘制渐变色

18.3.5 canvas绘制文本

18.3.6 canvas绘制直线

18.3.7 canvas绘制矩形

18.3.8 canvas绘制圆形

18.3.9 canvas绘制曲线

18.4 任务实施

18.4.1 编写HTML

18.4.2 编写JavaScript

18.4.3 测试页面

18.5 强化训练

18.6 学习成果评量

任务19 相册

19.1 任务导入

19.2 成果目标

19.3 任务实施

19.3.1 编写HTML

19.3.2 编写CSS样式

19.3.3 编写JavaScript

19.3.4 测试页面

19.4 强化训练

19.5 学习成果评量

任务20 选项卡

20.1 任务导入

20.2 成果目标

20.3 核心知识

20.3.1 选项卡HTML模型

20.3.2 重置ul属性

20.3.3 浮动（float）

20.3.4 绝对定位（absolute）

20.3.5 选项卡切换原理

20.4 任务实施

20.4.1 编写HTML

20.4.2 编写CSS

20.4.3 编写JavaScript脚本

20.4.4 浏览器测试

20.5 强化训练

20.6 学习成果评量

任务21 JavaScript抽奖器

21.1 任务导入

21.2 成果目标

21.3 核心知识

21.3.1 数据存储

21.3.2 数组

21.3.3 创建数组

21.3.4 数组元素的读和写

21.3.5 数组元素的添加和删除

21.3.6 稀疏数组

21.3.7 数组长度

21.3.8 数组遍历

21.3.9 ECMAScript3数组方法

21.3.10 ECMAScript5数组方法

21.4 任务实施

21.4.1 编写HTML

21.4.2 编写CSS

21.4.3 编写JavaScript

21.4.4 测试页面

21.5 强化训练

21.6 学习成果评量

任务22 座位预订程序

22.1 任务导入

22.2 成果目标

22.3 核心知识

22.3.1 面向对象背景

22.3.2 对象的属性和方法

22.3.3 创建对象方法——字面量语法

22.3.4 创建对象方法——构造函数语法

22.3.5 添加和删除属性

22.3.6 访问对象

22.3.7 this关键字

22.3.8 OOP相关概念

22.3.9 浏览器内置对象

22.3.10 浏览器对象模型BOM

22.3.11 document对象

22.3.12 window对象

22.3.13 navigator对象集合

22.3.14 screen对象

22.3.15 history对象

22.3.16 location对象

22.3.17 字符串对象

22.3.18 日期对象

22.3.19 数组对象

22.3.20 逻辑对象

22.3.21 算术对象

22.3.22 Number对象

22.3.23 Form对象

22.3.24 iframe对象属性

22.4 任务实施

22.4.1 编写HTML

22.4.2 编写CSS样式

22.4.3 编写JavaScript

22.4.4 测试页面

22.5 强化训练

22.6 学习成果评量

任务23 注册表单验证

23.1 任务导入

23.2 成果目标

23.3 核心知识

23.3.1 正则表达式的概念

23.3.2 正则表达式的工作原理

23.3.3 定义正则表达式

23.3.4 元字符

23.3.5 反义字符

23.3.6 限定字符

23.3.7 转义字符

23.3.8 字符分支

23.3.9 字符分组

23.3.10 贪婪匹配和懒惰匹配

23.3.11 后向引用

23.3.12 零宽断言

23.3.13 其他语法

23.3.14 常用简易规则

23.3.15 常用正则表达式

23.4 任务实施

23.4.1 编写HTML

23.4.2 编写CSS样式

23.4.3 编写JavaScript

23.4.4 测试页面

23.5 强化训练

23.6 学习成果评量

参考文献