JavaScript网特效案例教程教案普通班.docx
《JavaScript网特效案例教程教案普通班.docx》由会员分享，可在线阅读，更多相关《JavaScript网特效案例教程教案普通班.docx（56页珍藏版）》请在冰点文库上搜索。
JavaScript网特效案例教程教案普通班
文档编制序号：
[KKIDT-LLE0828-LLETD298-POI08]
JavaScript网特效案例教程教案普通班
授课章节
第一章第一个JavaScript小程序
授课形式
讲授
授课时间
第1周周2（8月30日）第7至8节
教学目标
知识目标：
掌握脚本的基本结构（Script标签）
简单记忆基本语法
变量的定义与赋值
数据类型与转换parseFloat等
运算符和控制语句同Java
灵活运用高级语法－自定义函数function
能力目标：
掌握函数的用法。
素质目标：
能根据功能分析出哪里需要添加函数。
教学重点
回顾静态网页相关知识。
掌握函数的用法。
教学难点
能根据功能分析出哪里需要添加函数。
补充内容
无
教学场地
及教具使用
多媒体教室电脑投影pptdreamweaverMx2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
回顾HTML，它的基本元素。
为什么还要学习JS
讲述
10
新课
第一个JavaScript小程序
什么是JavaScript
为什么要学JavaScript
在脚本的执行过程中，浏览器客户端与应用服务器采用请求/响应模式进行交互
分解这个过程为
1）浏览器接收用户的请求：
2）向服务器请求某个包含JavaScript脚本的页面
3）应用服务器端向浏览器发送响应信息，即把含有脚本的HTML文件发送到浏览器客户端，然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本，并显示页面效果呈现给用户。
使用客户端脚本的好处有以下两点：
a）含脚本的页面只要下载一次，减少不必要的网络通信。
b）脚本程序是浏览器客户端执行，而不是由服务器执行，因此可以减轻服务器端的压力。
JavaScript语言最初在上发布，此后不断发展，陆续推出了多个版本：
到。
其中JavaScript,InternetExplorer支持，Netscape和支持。
JavaScript目前有支持。
脚本编写工具
记事本FrontPageDreamweaver
写第一个JavaScript
工作任务3：
写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！
讲授
20
知识扩展：
无
练习或训练
工作任务3：
写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！
注意Dreamweaver的使用和JavaScript调试方法
40
课后小结
15
布置作业
课后实战题1
5
授课章节
授课形式
现场教学
授课时间
第1周周4（9月1日）第5至6节
教学目标
知识目标：
掌握变量声明和赋值方法。
能力目标：
编写调用简单的JS代码，完成一定功能。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
运用变量声明和赋值知识,编写调用简单的JS代码，完成一定功能。
教学难点
能根据功能分析出编程步骤，并在规定实践完成。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
回顾JS基本知识。
JavaScript的执行原理是什么分成几个步骤
大家简述一下JavaScript脚本的基本结构
常用的JavaScript编写工具是什么
如何调试JavaScript程序
讲述
10
新课
Javascript的基本语法
变量的声明和赋值
在JavaScript中，变量的命名规则与Java相同。
JavaScript是一种弱类型语言，也就是在变量声明时不需要指定变量类型，变量的类型会由赋给变量的值决定。
运算符号
运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值
根据所执行的运算，运算符可分为以下类别：
1）算术运算符用于连接运算表达式。
算术运算符包括加（+）、减（）、乘（*）、除（/）、取模（%）、自加（++）、自减（--）等运算符
2）比较运算符用来连接操作数来组成比较表达式。
比较运算符的基本操作过程是：
首先对操作数进行比较，然后返回一个布尔值true或false。
包括>、<、>=、<=、==、!
=
3）JavaScript支持的常用逻辑运算符,包括！
、||、&&
4）赋值运算符，包括=、+=、—=、*=、/=变量声明和赋值
现场教学
20
知识扩展：
无
练习或训练
使用变量和运算符,实现如下运算
a=1,b=2,
a+b=3
c=”hello”
d=”you”
c+d=”helloyou”
e=false!
e=true
40
课后小结
15
布置作业
课后实战题2
5
授课章节
授课形式
现场教学
授课时间
第2周周2（9月6日）第7至8节
教学目标
知识目标：
掌握分支语句和循环语句的语法结构。
能力目标：
编写调用简单的JS代码，实现分支结构和循环结构。
素质目标：
能灵活运用分支和循环结构解决实际编程问题。
教学重点
使用分支语句
使用循环语句
教学难点
循环语句和分支语句
补充内容
无
教学场地
及教具使用
多媒体教室电脑投影pptdreamweaverMx2004
教 学 过程
方法手段
时间分配
导入
JavaScript中的变量声明和Java中的区别是什么，什么样的名字可以作为变量名使用
JavaScript语言区分大小写吗
JavaScript有哪些赋值符号。
讲述
10
新课
逻辑控制语句
1）条件语句
if语句是最基本、最常用的条件控制语句，语法：
if（expression）{
statement
}
2）switch语句
switch是典型的多路分支语句语法：
switch（expression）{
casejudgement1:
statement1;
break;
…
default:
defaultstatement;
break;
}
4）for语句
5）while语句
while语句是基本的循环语句，也是条件判断语句。
语法：
while（expression）{
statement
}
现场教学
20
知识扩展：
无
练习或训练
用while循环语句将指定的字符串进行输出
利用脚本实现宝石图形。
40
课后小结
15
布置作业
课后实战题
5
授课章节
2.1
授课形式
现场教学
授课时间
第2周周4（9月8日）第5至6节
教学目标
知识目标：
定义函数、调用函数、能实现事件响应
能力目标：
编写调用简单的JS函数，完成一定功能。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
编写调用简单的JS函数，完成一定功能。
教学难点
能根据功能分析出编程步骤，并在规定实践完成。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
根据分数给出学生获得的等级，使用什么结构
实现连续十个学生的等级评价，使用什么结构
观看一个购物车特效，可以自动计算购物金额，如何实现呢引出函数的概念和函数调用的概念。
讲述
10
新课
函数基础
工作任务1
编写函数functionsum（number1,number2）求两数之和，弹出结果。
并调用之。
什么是函数
函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。
在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。
函数的定义
函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。
函数与其他的JavaScript代码一样，必须位于标记之间，函数的基本语法。
。
函数调用
函数调用的语法
简易购物车实现
现场教学
20
知识扩展：
无
练习或训练
40
课后小结
20
布置作业
课后实战题1
授课章节
授课形式
现场教学
授课时间
第3周周2（9月13日）第7至8节
教学目标
知识目标：
有参函数的定义和调用，事件响应
能力目标：
编写调用简单的有参数JS函数，完成一定功能。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
编写调用简单的JS函数，完成一定功能。
教学难点
能根据功能分析出编程步骤，并在规定实践完成。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
JavaScript函数定义和调用的语法
点击按钮实现功能如何调用JavaScript函数
讲述
10
新课
制作四则运算计算器。
本题需要使用函数参数传递。
在JavaScript中定义函数的完整格式如下：
语法
function自定义函数名（形参1,形参2,……）
{函数体}
在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“,”分隔）。
指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。
我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。
如果定义的函数有参数，那么对这种函数的调用形式就是：
函数名（实参1，实参2，……）
通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号“,”分隔。
）
functioncompute（op）
{…….}
这里op代表进行何种运算。
所以调用的时候，也相应的给予参数
onClick="compute（'+'）
现场教学
20
知识扩展：
无
练习或训练
实现特效
40
课后小结
15
布置作业
课后实战题2
5
授课章节
授课形式
讲授+现场教学
授课时间
第3周周4（9月15日）第5至6节
教学目标
知识目标：
超链接如何实现像按钮一样的功能。
能力目标：
编写调用简单的有参数JS函数，用超链接点击实现响应，完成一定功能。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
用超链接实现按钮一样的功能。
教学难点
无。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
JavaScript中如何定义和调用有参函数。
按钮点击调用函数如何实现
如何用超链接取代按钮
讲述
15
新课
点击超链接实现按钮功能，改变html的页面背景色。
函数除了可以在响应事件中被调用之外，还可以在链接中被调用。
在标签中的href标记中使用javascript:
关键字调用函数，当用户单击这个链接时，相关函数将被执行。
change（'b'）">
functionchange（color）{
if（color=="r"）{
="red";
}elseif（color=="b"）{
="blue";
}elseif（color=="g"）{
="green"
}
}
现场教学
40
知识扩展：
无
练习或训练
把建议购物车的“计算金额”按钮变成超链接看能否实现相同的效果
20
课后小结
15
布置作业
P80一二
5
授课章节
授课形式
现场教学
授课时间
第4周周2（9月20日）第7至8节
教学目标
知识目标：
常见函数parseInt（），isNaN（）和parseFloat（）
能力目标：
能使用内置函数实现数值转换，获得表单元素。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
能利用内置函数判断输入是否为数值，能将字符串转换为整数或浮点数
教学难点
无。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
不带参数的函数，带参数的函数定义，函数调用的注意点
如何响应按钮点击事件
超链接可以取代按钮吗
讲述
10
新课
工作任务5
编写个人所得税计算器。
月收入所得税计算的方式：
（月收入-起征额）*所得税率。
收入多出起征额1000以内，税率为，1000到3000为，以上为。
如果输入非数字，弹出错误提示。
否则给出结果。
1）parseInt（）函数
该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。
语法：
parseInt（StringNum,[n]）
StringNum：
需要转换为整型的字符串。
n：
提供在2～36之间的数字表示所保存数字的进制数。
这个参数在函数中不是必须的。
2）parseFloat（）函数
该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。
语法：
parseFloat（StringNum）
StringNum：
需要转换为浮点型的字符串。
3）isNaN（）函数
该函数主要用于检验某个值是否为NaN。
语法：
isNaN（Num）
Num：
需要验证的数字。
如果参数Num为NaN，函数返回值为true；如果参数Num不是NaN，函数返回值为false。
4）isFinite（）函数
该函数主要用于检验某个表达式是否为无穷大。
语法：
isFinite（Num）
Num：
需要验证的数字。
如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。
现场教学
20
知识扩展：
无
练习或训练
实现闰年的判断
40
课后小结
20
布置作业
课后是实战题3
0
授课章节
授课形式
现场教学
授课时间
第4周周4（9月22日）第5至6节
教学目标
知识目标：
DOM模型
Window对象常用属性和方法
能力目标：
能使用内置函数实现数值转换，获得表单元素。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
编写调用简单的JS函数，实现广告窗口的弹出
教学难点
无。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
函数parseFloat（StringNum）的功能是什么
实现一个四则运算器的基本思路是什么
讲述
10
新课
引入：
1）HTML树状结构
任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解析为一颗内存树。
如图所示。
这颗树是由一个一个的节点构成的。
其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文本节点。
2）节点和节点的引用
在DOM中，每个对象都称为一个节点。
DOM对象模型
浏览器对象是一个分层结构，也称为文档对象模型。
window对象编程
打开页面，先看到浏览器窗口，即window窗口，window对象指的是浏览器本身。
其次就是我们看到的网页文档内容，即document文档。
它包含一个最主要的内容表单。
假设myform表单中有一个文本框text1，定位次文本框时，就应该从上到下定位：
因为window对象是所有页面内容的根节点，所以可以省略
浏览器对象结构中除了document文档对象，还有location和history。
现场教学
40
知识扩展：
无
练习或训练
工作任务2
页面加载时弹出广告页面。
20
课后小结
20
布置作业
课后实战题1
0
授课章节
授课形式
讲授
授课时间
第5周周2（9月27日）第7至8节
教学目标
知识目标：
全局变量的使用
onLoad事件响应
setTimeout定时函数
能力目标：
能使用setTimeout（）方法实现定时特效。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
全局变量的使用，setTimeout（）方法应用。
教学难点
无。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
回顾
简述DOM的基本概念。
页面加载时弹出广告页面的主要步骤。
讲述
10
新课
全局变量和局部变量的概念
onLoad事件是“页面加载完成”事件，当页面加载完了之后发生此事件，如果想要在打开网页的时候就调用JavaScript函数，可以响应此事件。
setTimeout（"函数",毫秒数）可以设置定时器：
经过指定毫秒值后执行某个函数。
我们可以利用它实现一个每1秒就递增的秒表。
vart=1;
functiontick（）
{
t++;
setTimeout（'tick（）',1000）;
}
现场教学
40
知识扩展：
无
练习或训练
实现网页颜色每过一秒钟就变一种颜色，总共5种颜色。
使用onLoad事件和setTimeout方法。
20
课后小结
15
布置作业
课后实战题2
5
授课章节
授课形式
现场教学
授课时间
第5周周4（9月29日）第5至6节
教学目标
知识目标：
document对象的常用属性和方法
能力目标：
能document提供的方法实现特效。
素质目标：
能根据功能分析出编程步骤，并在规定实践完成。
教学重点
（）获得控件数组的概念
教学难点
无。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学，点名
onLoad事件是什么事件
setTimeout（）方法的目的是实现什么功能
简述动态秒表的实现步骤。
讲述
10
新课
document对象编程
document对象常用属性和方法
表常用属性
名称
说明
bgColor
设置或检索Document对象的背景色
常用方法
document对象常用方法如表所示。
表常用方法
名称
说明
getElementByID（）
根据HTML元素指定的ID，获得唯一的一个HTML元素。
如：
访问DIV层对象、图片Img对象
getElementsByName（）
根据HTML元素指定的name，获得相同名称的一组元素。
如：
访问表单元素（全选功能）
漂浮广告制作
布局：
在页面中插入层，z轴设为1，然后在层中插入图片。
编写脚本：
使用getElementByID（）方法获取层对象，捕获鼠标滚动事件，改变层对象的位置坐标。
常见的页面坐标的介绍,如表所示：
表常见页面坐标
top:
指定元素的上边界位置。
pixelTop:
设置或返回元素的上边界。
left:
指定元素的左边界位置。
scrolltop:
页面滚动的高度
现场教学
20
知识扩展：
无
练习或训练
设计会漂浮的广告页面。
40
课后小结
20
布置作业
课后实战题3
0
授课章节
授课形式
现场教学
授课时间
第周周（月日）第至节
教学目标
实现有返回，前进，刷新功能的页面
教学重点
history对象和location对象的属性和方法
教学难点
无。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
Document对象的属性和方法有哪些
漂浮广告制作的步骤
使用网页上的前进后退效果
讲述
10
新课
history、location对象常用属性和方法
history常用方法
history对象常用方法如表所示
表history对象常用方法
名称
说明
back（）
加载History列表中的上一个URL。
forward（）
加载History列表中的下一个URL。
go（"url"ornumber）
加载History列表中的一个URL，或要求浏览器移动指定的页面数。
back（）方法相当于后退按钮
forward（）方法相当于前进按钮
go
（1）代表前进1页，等价于forward（）方法；
go（-1）代表后退1页，等价于back（）方法；
location常用属性
location对象常用属性如表所示。
表location对象常用属性
名称
说明
host
设置或检索位置或URL的主机名和端口号
host
升级会员 