JavaScript前端开发程序设计教程(微课版)

第　1章 初识JavaScript
1．1　JavaScript简介　2
1．1．1　JavaScript的发展概况和特点　2
1．1．2　JavaScript的应用　4
1．1．3　支持JavaScript的浏览器　4
1．2　编写JavaScript的工具　5
1．3　JavaScript在HTML中的应用　5
1．3．1　直接将JavaScript代码嵌入HTML中　5
1．3．2　链接外部的JavaScript　6
1．3．3　直接在HTML标签中使用　7
1．4　【综合案例1】：随机抽奖小程序　7
【知识点提炼】　8
【训练1】　8
第　2章 JavaScript语言基础
2．1　数据类型　10
2．1．1　基本数据类型　10
2．1．2　引用数据类型　11
2．1．3　特殊数据类型　11
【同步案例2-1】：输出JavaScript支持的*大数值和*小数值　12
2．2　变量与常量　13
2．2．1　标识符　13
2．2．2　关键字　13
2．2．3　变量的定义和赋值　14
【同步案例2-2】：变量定义和赋值使用示例　15
2．2．4　变量的作用域　16
2．2．5　常量　16
【同步案例2-3】：通过常量PI求圆的周长　16
2．3　运算符　17
2．3．1　算术运算符　18
【同步案例2-4】：计算账单金额　18
2．3．2　关系运算符　19
【同步案例2-5】：比较两个数的大小　19
2．3．3　赋值运算符　20
【同步案例2-6】：赋值运算符使用示例　21
2．3．4　逻辑运算符　22
【同步案例2-7】：逻辑运算符与关系运算符配合使用示例　22
2．3．5　条件运算符　23
【同步案例2-8】：实现选择正确或错误结果的示例　23
2．3．6　其他运算符　24
【同步案例2-9】：通过typeof测试变量类型示例　24
2．4　表达式　25
2．5　【综合案例2】：挑选出随机生成的两个数中的*大数　26
【知识点提炼】　27
【训练2】　28
第3章　流程控制语句
3．1　消息对话框　31
3．1．1　警示对话框　31
【同步案例3-1】：打开页面，首先弹出一个问候对话框　31
3．1．2　确认对话框　32
【同步案例3-2】：在对话框中通过单击不同按钮来显示不同的内容　32
3．1．3　提示对话框　33
【同步案例3-3】：根据提示输入内容并且在页面上显示　33
3．2　注释　34
3．2．1　单行注释符　34
3．2．2　多行注释符　35
3．3　条件分支语句　35
3．3．1　if语句　35
【同步案例3-4】：通过if…else语句判断两个数中的*大值　38
【同步案例3-5】：判断今天是星期几　39
3．3．2　switch语句　40
【同步案例3-6】：通过switch语句判断今天是星期几　41
3．3．3　if语句嵌套　42
【同步案例3-7】：根据成绩给出学生的考评等级　42
3．4　循环控制语句　44
3．4．1　for 循环语句　44
【同步案例3-8】：通过for循环求1到100的累加和　45
3．4．2　while循环语句　46
【同步案例3-9】：通过while循环求1到100的奇数累加和　46
3．4．3　do．．．while循环语句　48
【同步案例3-10】：通过do…while
循环求1到100的偶数累加和　48
3．4．4　循环语句嵌套　49
【同步案例3-11】：输出“*”组成的直角三角形图案　50
3．5　continue和break语句　51
【同步案例3-12】：通过continue和
break来控制程序是否继续运行　51
3．6　【综合案例3】：随机答题的小游戏　52
【知识点提炼】　54
【训练3】　54
第4章　JavaScript函数
4．1　什么是函数　58
4．2　预定义函数　58
4．2．1　什么是预定义函数　58
4．2．2　常用的预定义函数　58
【同步案例4-1】：isNaN()函数应用示例　59
【同步案例4-2】：parseFloat()和parseInt()函数应用示例　60
4．3　自定义函数　61
4．3．1　自定义函数的创建　61
【同步案例4-3】：定义一个函数，能够在页面上输出字符串　62
【同步案例4-4】：定义函数，实现计算商品总价　62
4．3．2　自定义函数的调用　63
【同步案例4-5】：通过函数名直接调用函数示例　63
【同步案例4-6】：通过超链接调用函数示例　64
4．3．3　函数的参数和返回值　65
【同步案例4-7】：通过函数统计商品的总价　65
【同步案例4-8】：通过函数返回值求出两个数中*大数　67
4．3．4　函数变量的作用域　68
【同步案例4-9】：函数的变量作用域示例　68
4．3．5　函数的嵌套　69
【同步案例4-10】：求出1+（1+2）+（1+2+3）+…+（1+2+…+n）的值　69
4．4　【综合案例4】：编写可以根据输入数值实现不同层数的三角形“*”图案的函数　70
【知识点提炼】　71
【训练4】　72
第5章　对象
5．1　面向对象程序设计　75
5．1．1　面向对象编程思想　75
5．1．2　对象　75
5．1．3　类　76
5．1．4　JavaScript对象框架　76
5．2　内置对象　76
5．2．1　Object对象类　77
5．2．2　Date对象类　77
【同步案例5-1】：读取当前的日期并在页面上显示出来　79
【同步案例5-2】：计算自己活了多少天？　79
5．2．3　String对象类　80
【同步案例5-3】：设计一个提取字符串中数字的函数　91
【同步案例5-4】：输入一个字符串，然后反向输出到页面上　92
5．2．4　Math对象　93
【同步案例5-5】：计算圆的面积　94
【同步案例5-6】：求圆周率的4次方，并取四舍五入整数显示　95
5．2．5　Number对象　96
【同步案例5-7】：输出JavaScript能够处理的数值区间　96
5．3　自定义对象　97
5．3．1　通过Object类创建对象　97
【同步案例5-8】：通过Object创建对象示例　98
5．3．2　通过字面量创建对象　99
【同步案例5-9】：通过字面量对象创建对象示例　99
5．3．3　通过构造函数（Constructor）创建对象　100
【同步案例5-10】：通过构造函数
（Constructor）创建对象示例　104
5．3．4　通过Function对象定义方法　105
【同步案例5-11】：通过Function对象显式地创建方法示例　106
【同步案例5-12】：通过Function对象隐式地创建方法示例　107
5．3．5　通过原型对象（prototype）定义方法　108
【同步案例5-13】：通过原型对象（prototype）访问共享方法示例　108
5．3．6　通过for…in语句访问对象的属性　110
【同步案例5-14】：通过for…in语句循环遍历对象的属性　110
5．3．7　with语句访问对象的属性和方法　111
【同步案例5-15】：通过with语句循环遍历对象的属性　111
5．3．8　继承　112
【同步案例5-16】：子类继承父类的属性和方法示例　112
5．4　数组对象　114
5．4．1　什么是数组　114
5．4．2　创建数组对象　114
【同步案例5-17】：创建一个具有4个元素的数组，并为各个元素赋值　115
5．4．3　数组的属性和方法　115
【同步案例5-18】：对数组中的元素进行排序　116
【同步案例5-19】：将两个数组连接成一个数组　117
5．4．4　数组的访问　118
【同步案例5-20】：使用for…in语句遍历数组　119
5．5　【综合案例5】：每天信息提示栏　120
5．6　【综合案例6】：倒计时广告牌　122
【知识点提炼】　124
【训练5】　124
第6章　BOM和DOM
6．1　认识BOM　127
6．2　Window对象　127
【同步案例6-1】：在主窗口中通过单击超链接打开新窗口　129
【同步案例6-2】：设置时间提醒器　130
【同步案例6-3】：延时5秒关闭窗口　131
6．3　Navigator对象　132
【同步案例6-4】：显示当前浏览器的信息　133
【同步案例6-5】：显示当前窗口占据显示器的区域大小　134
6．4　Document对象　135
【同步案例6-6】：退出页面时显示浏览当前页面的时间　135
【同步案例6-7】：打开新窗口并输出一则通知信息　137
6．5　DOM对象　138
6．5．1　什么是DOM　138
6．5．2　DOM的节点树　138
6．5．3　DOM的节点类型　139
6．6　DOM对象的分类　140
6．7　访问DOM对象　143
6．7．1　访问集合对象的方法　143
【同步案例6-8】：显示当前HTML文档中所有的标签名　143
6．7．2　访问HTML当前页面指定元素的方法　144
【同步案例6-9】：动态显示实时时间　144
【同步案例6-10】：获取当前页面上所有的超链接　145
6．8　操纵DOM对象　146
6．8．1　创建DOM元素节点　146
【同步案例6-11】：页面上显示欢迎词　147
6．8．2　删除DOM元素节点　147
【同步案例6-12】：删除当前页面上所有的水平线　148
6．8．3　复制DOM元素节点　149
【同步案例6-13】：实现复制表单示例　149
6．8．4　移动DOM元素节点　151
【同步案例6-14】：将当前页面上
第　一个元素移到末尾　151
6．8．5　替换DOM元素节点　153
【同步案例6-15】：替换元素节点示例　153
6．9　【综合案例7】：创建根据不同来宾显示不同内容的欢迎栏　154
【知识点提炼】　156
【训练6】　157
第7章　事件及事件处理
7．1　事件的概念　160
7．1．1　认识事件和事件处理　160
7．1．2　事件绑定　161
【同步案例7-1】：单击页面上两个按钮，显示不同的问候语　162
【同步案例7-2】：使用动态绑定显示问候语　163
7．2　事件对象　165
7．2．1　Event对象　165
7．2．2　事件流　165
【同步案例7-3】：显示触发事件名称　166
【同步案例7-4】：阻止事件的默认行为　167
7．3　处理鼠标事件　168
7．3．1　鼠标事件　168
7．3．2　处理鼠标事件　169
【同步案例7-5】：鼠标移入和移出时在页面显示不同的图形　169
7．4　处理键盘事件　170
7．4．1　键盘事件　170
7．4．2　键盘的键码值　170
【同步案例7-6】：按下不同按键时显示不同内容的对话框　172
【同步案例7-7】：取消组合键的全选功能　173
7．5　处理页面事件　174
7．5．1　页面加载与卸载事件　174
【同步案例7-8】：网页加载时对图片进行缩小设置　176
7．5．2　页面大小事件　177
7．6　处理文本编辑事件　178
7．6．1　处理文本选中区域　178
【同步案例7-9】：页面显示鼠标指向的单词　179
7．6．2　文本的复制、剪切和粘贴操作　180
【同步案例7-10】：禁止复制粘贴方式输入密码　180
7．7　【综合案例8】：显示按钮的说明性文字　182
7．8　【综合案例9】：实现返回首页、后退和前进按钮示例　183
【知识点提炼】　184
【训练7】　185
第8章　表单和表单对象
8．1　表单和表单对象　188
8．1．1　定义表单　188
8．1．2　文本框　188
8．1．3　单选按钮　189
8．1．4　复选框　189
8．1．5　列表或菜单　189
8．1．6　按钮　190
【同步案例8-1】：创建会员注册表单　190
8．2　访问表单和表单元素　192
8．2．1　通过表单的ID来访问表单　192
【同步案例8-2】：通过表单id属性访问表单示例　192
8．2．2　通过表单名称来访问表单　193
【同步案例8-3】：通过表单名称name属性访问表单示例　193
【同步案例8-4】：随机生成指定位数的验证码　194
8．2．3　通过表单标签名来访问表单　196
【同步案例8-5】：通过表单标签名访问表单示例　196
8．3　操作表单对象　197
8．3．1　禁用和启用表单对象　197
【同步案例8-6】：表单对象启用禁用示例　197
8．3．2　表单对象获得和失去焦点　198
【同步案例8-7】：表单对象获得失去焦点示例　198
8．3．3　提交表单　199
【同步案例8-8】：表单提交案例　200
8．3．4　重置表单　201
【同步案例8-9】：重置表单示例　201
8．3．5　验证表单　202
【同步案例8-10】：验证表单文本框提交内容的合法性　202
8．4　【综合案例10】：在线调查问卷　203
【知识点提炼】　205
【训练8】　205
第9章　Ajax初步
9．1　什么是Ajax　209
9．2　Ajax编程基础　209
9．2．1　初始化XMLHttpRequest　209
9．2．2　XMLHttpRequest对象的常用属性　210
9．2．3　XMLHttpRequest对象的常用方法　210
9．2．4　FormData对象　211
9．3　Ajax应用案例　211
9．3．1　不刷新页面提交表单数据　211
9．3．2　通过FormData上传文件　214
【知识点提炼】　216
【训练9】　216
第　10章 JavaScript特效
10．1　页面导航栏特效　219
10．1．1　树形目录式导航菜单设计　219
10．1．2　带有注释的导航菜单设计　220
10．1．3　下拉式导航菜单设计　221
10．2　页面文本特效　224
10．2．1　以打字效果滚动显示文本　224
10．2．2　随机显示文字牌　226
10．2．3　自动滚屏的文本　227
10．3　图形特效　229
10．3．1　自动变形的图片特效　229
10．3．2　鼠标单击切换图片　230
10．3．3　网页动态选择图片　231