JavaScript网页特效案例教程教案普通班.doc
- 文档编号:230960
- 上传时间:2022-10-07
- 格式:DOC
- 页数:56
- 大小:1.27MB
JavaScript网页特效案例教程教案普通班.doc
《JavaScript网页特效案例教程教案普通班.doc》由会员分享,可在线阅读,更多相关《JavaScript网页特效案例教程教案普通班.doc(56页珍藏版)》请在冰豆网上搜索。
授课章节
第一章第一个JavaScript小程序
1.1 了解JavaScript
1.2 JavaScript执行原理
1.3 JavaScript的版本
1.4 脚本编写工具
1.5 编写第一个JavaScript
授课形式
讲授
授课时间
第1周周2(8月30日)第7至8节
教学目标
知识目标:
掌握脚本的基本结构(Script标签)
简单记忆基本语法
变量的定义与赋值
数据类型与转换parseFloat等
运算符和控制语句同Java
灵活运用高级语法-自定义函数function
能力目标:
掌握函数的用法。
素质目标:
能根据功能分析出哪里需要添加函数。
教学重点
回顾静态网页相关知识。
掌握函数的用法。
教学难点
能根据功能分析出哪里需要添加函数。
补充内容
无
教学场地
及教具使用
多媒体教室电脑投影pptdreamweaverMx2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
回顾HTML,它的基本元素。
为什么还要学习JS?
讲述
10
新课
第一个JavaScript小程序
1.1了解JavaScript
什么是JavaScript
为什么要学JavaScript
1.2JavaScript执行原理
在脚本的执行过程中,浏览器客户端与应用服务器采用请求/响应模式进行交互
分解这个过程为
1)浏览器接收用户的请求:
2)向服务器请求某个包含JavaScript脚本的页面
3)应用服务器端向浏览器发送响应信息,即把含有脚本的HTML文件发送到浏览器客户端,然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本,并显示页面效果呈现给用户。
使用客户端脚本的好处有以下两点:
a)含脚本的页面只要下载一次,减少不必要的网络通信。
b)脚本程序是浏览器客户端执行,而不是由服务器执行,因此可以减轻服务器端的压力。
1.3JavaScript的版本
JavaScript语言最初在Netscape2.0上发布,此后不断发展,陆续推出了多个版本:
JavaScript1.0到JavasScript1.6。
其中JavaScript1.5,InternetExplorer6.0支持,Netscape6.0和Firefox1.0支持。
JavaScript1.6目前有firefox1.5支持。
1.4脚本编写工具
记事本FrontPageDreamweaver
1.5写第一个JavaScript
工作任务3:
写出第一个含有JavaScript的html,功能是弹出一个对话框,并调试成功!
讲授
20
知识扩展:
无
练习或训练
工作任务3:
写出第一个含有JavaScript的html,功能是弹出一个对话框,并调试成功!
注意Dreamweaver的使用和JavaScript调试方法
40
课后小结
15
布置作业
课后实战题1
5
授课章节
1.6 JavaScript的基本语法
1.6.1 变量声明和赋值
1.6.2 运算符号
授课形式
现场教学
授课时间
第1周周4(9月1日)第5至6节
教学目标
知识目标:
掌握变量声明和赋值方法。
能力目标:
编写调用简单的JS代码,完成一定功能。
素质目标:
能根据功能分析出编程步骤,并在规定实践完成。
教学重点
运用变量声明和赋值知识,编写调用简单的JS代码,完成一定功能。
教学难点
能根据功能分析出编程步骤,并在规定实践完成。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
回顾JS基本知识。
JavaScript的执行原理是什么?
分成几个步骤?
大家简述一下JavaScript脚本的基本结构?
常用的JavaScript编写工具是什么?
如何调试JavaScript程序?
讲述
10
新课
1.6Javascript的基本语法
1.6.1变量的声明和赋值
在JavaScript中,变量的命名规则与Java相同。
JavaScript是一种弱类型语言,也就是在变量声明时不需要指定变量类型,变量的类型会由赋给变量的值决定。
1.6.2运算符号
运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值
根据所执行的运算,运算符可分为以下类别:
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
授课章节
1.6.3 逻辑控制语句
1.6.4 注释
授课形式
现场教学
授课时间
第2周周2(9月6日)第7至8节
教学目标
知识目标:
掌握分支语句和循环语句的语法结构。
能力目标:
编写调用简单的JS代码,实现分支结构和循环结构。
素质目标:
能灵活运用分支和循环结构解决实际编程问题。
教学重点
使用分支语句
使用循环语句
教学难点
循环语句和分支语句
补充内容
无
教学场地
及教具使用
多媒体教室电脑投影pptdreamweaverMx2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
JavaScript中的变量声明和Java中的区别是什么,什么样的名字可以作为变量名使用?
JavaScript语言区分大小写吗?
JavaScript有哪些赋值符号。
讲述
10
新课
1.6.3逻辑控制语句
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
布置作业
课后实战题3.4
5
授课章节
2.1函数基础
2.2 什么是函数
2.3 简易购物车实现
授课形式
现场教学
授课时间
第2周周4(9月8日)第5至6节
教学目标
知识目标:
定义函数、调用函数、能实现事件响应
能力目标:
编写调用简单的JS函数,完成一定功能。
素质目标:
能根据功能分析出编程步骤,并在规定实践完成。
教学重点
编写调用简单的JS函数,完成一定功能。
教学难点
能根据功能分析出编程步骤,并在规定实践完成。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
根据分数给出学生获得的等级,使用什么结构?
实现连续十个学生的等级评价,使用什么结构?
观看一个购物车特效,可以自动计算购物金额,如何实现呢?
引出函数的概念和函数调用的概念。
讲述
10
新课
2.1函数基础
工作任务1
编写函数functionsum(number1,number2)求两数之和,弹出结果。
并调用之。
2.2什么是函数
函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。
在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。
2.2.1函数的定义
函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。
函数与其他的JavaScript代码一样,必须位于标记之间,函数的基本语法。
。
2.2.2函数调用
函数调用的语法
2.3简易购物车实现
现场教学
20
知识扩展:
无
练习或训练
40
课后小结
20
布置作业
课后实战题1
授课章节
2.4 四则运算计算器
授课形式
现场教学
授课时间
第3周周2(9月13日)第7至8节
教学目标
知识目标:
有参函数的定义和调用,事件响应
能力目标:
编写调用简单的有参数JS函数,完成一定功能。
素质目标:
能根据功能分析出编程步骤,并在规定实践完成。
教学重点
编写调用简单的JS函数,完成一定功能。
教学难点
能根据功能分析出编程步骤,并在规定实践完成。
补充内容
无
教学场地
及教具使用
机房电脑dreamweaverMX2004
教 学 过程
方法手段
时间分配
导入
组织教学,点名
JavaScript函数定义和调用的语法
点击按钮实现功能如何调用JavaScript函数
讲述
10
新课
制作四则运算计算器。
本题需要使用函数参数传递。
在JavaScript中定义函数的完整格式如下:
语法
function自定义函数名(形参1,形参2,……)
{函数体}
在定义函数时,在函数名后面的圆括号内可以指定一个或多个参数(用逗号“,”分隔)。
指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。
我们把定义函数时指定的参数称为形式参数,简称形参;而把调用函数时实际传递的值称为实际参数,简称实参。
如果定义的函数有参数,那么对这种函数的调用形式就是:
函数名(实参1,实参2,……)
通常,如果在定义函数时使用了多少个形参,那么在函数调用时也必须给出多少个实参(这里需要注意的是,在实参之间也必须用逗号“,”分隔。
)
functioncompute(op)
{…….}
这里op代表进行何种运算。
所以调用的时候,也相应的给予参数
onClick="compute('+')
现场教学
20
知识扩展:
无
练习或训练
实现特效
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 网页 特效 案例 教程 教案 普通