JavaScript网特效案例教程教案普通班.docx

资源描述

JavaScript网特效案例教程教案普通班.docx

《JavaScript网特效案例教程教案普通班.docx》由会员分享，可在线阅读，更多相关《JavaScript网特效案例教程教案普通班.docx（52页珍藏版）》请在冰豆网上搜索。

JavaScript网特效案例教程教案普通班.docx

JavaScript网特效案例教程教案普通班

授课章节

第一章第一个JavaScript小程序

授课形式

讲授

授课时间

第1周周2（8月30日）第7至8节

教学目标

知识目标：

掌握脚本的基本结构（Script标签）

简单记忆基本语法

变量的定义与赋值

数据类型与转换parseFloat等

运算符和控制语句同Java

灵活运用高级语法－自定义函数function

能力目标：

掌握函数的用法。

素质目标：

能根据功能分析出哪里需要添加函数。

教学重点

回顾静态网页相关知识。

掌握函数的用法。

教学难点

能根据功能分析出哪里需要添加函数。

补充内容

无

教学场地

及教具使用

多媒体教室电脑投影pptdreamweaverMx2004

教　学　过程

方法手段

时间分配

导入

组织教学,点名

回顾HTML，它的基本元素。

为什么还要学习JS？

讲述

新课

第一个JavaScript小程序

什么是JavaScript

为什么要学JavaScript

在脚本的执行过程中，浏览器客户端与应用服务器采用请求/响应模式进行交互

分解这个过程为

1）浏览器接收用户的请求：

2）向服务器请求某个包含JavaScript脚本的页面

3）应用服务器端向浏览器发送响应信息，即把含有脚本的HTML文件发送到浏览器客户端，然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本，并显示页面效果呈现给用户。

使用客户端脚本的好处有以下两点：

a）含脚本的页面只要下载一次，减少不必要的网络通信。

b）脚本程序是浏览器客户端执行，而不是由服务器执行，因此可以减轻服务器端的压力。

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，功能是弹出一个对话框，并调试成功！

讲授

知识扩展：

无

练习或训练

工作任务3：

写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！

注意Dreamweaver的使用和JavaScript调试方法

课后小结

布置作业

课后实战题1

授课章节

授课形式

现场教学

授课时间

第1周周4（9月1日）第5至6节

教学目标

知识目标：

掌握变量声明和赋值方法。

能力目标：

编写调用简单的JS代码，完成一定功能。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

运用变量声明和赋值知识,编写调用简单的JS代码，完成一定功能。

教学难点

能根据功能分析出编程步骤，并在规定实践完成。

补充内容

无

教学场地

及教具使用

机房电脑dreamweaverMX2004

教　学　过程

方法手段

时间分配

导入

组织教学,点名

回顾JS基本知识。

JavaScript的执行原理是什么?

分成几个步骤?

大家简述一下JavaScript脚本的基本结构？

常用的JavaScript编写工具是什么?

如何调试JavaScript程序?

讲述

新课

1.6Javascript的基本语法

1.6.1变量的声明和赋值

在JavaScript中，变量的命名规则与Java相同。

JavaScript是一种弱类型语言，也就是在变量声明时不需要指定变量类型，变量的类型会由赋给变量的值决定。

1.6.2运算符号

运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值

根据所执行的运算，运算符可分为以下类别：

1）算术运算符用于连接运算表达式。

算术运算符包括加（+）、减（−）、乘（*）、除（/）、取模（%）、自加（++）、自减（--）等运算符

2）比较运算符用来连接操作数来组成比较表达式。

比较运算符的基本操作过程是：

首先对操作数进行比较，然后返回一个布尔值true或false。

包括>、<、>=、<=、==、!

3）JavaScript支持的常用逻辑运算符,包括！

、||、&&

4）赋值运算符，包括=、+=、—=、*=、/=变量声明和赋值

现场教学

知识扩展：

无

练习或训练

使用变量和运算符,实现如下运算

a=1,b=2,

a+b=3

c=”hello”

d=”you”

c+d=”helloyou”

e=false!

e=true

课后小结

布置作业

课后实战题2

授课章节

授课形式

现场教学

授课时间

第2周周2（9月6日）第7至8节

教学目标

知识目标：

掌握分支语句和循环语句的语法结构。

能力目标：

编写调用简单的JS代码，实现分支结构和循环结构。

素质目标：

能灵活运用分支和循环结构解决实际编程问题。

教学重点

使用分支语句

使用循环语句

教学难点

循环语句和分支语句

补充内容

无

教学场地

及教具使用

多媒体教室电脑投影pptdreamweaverMx2004

教　学　过程

方法手段

时间分配

导入

JavaScript中的变量声明和Java中的区别是什么，什么样的名字可以作为变量名使用?

JavaScript语言区分大小写吗?

JavaScript有哪些赋值符号。

讲述

新课

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

}

现场教学

知识扩展：

无

练习或训练

用while循环语句将指定的字符串进行输出

利用脚本实现宝石图形。

课后小结

布置作业

课后实战题3.4

授课章节

授课形式

现场教学

授课时间

第2周周4（9月8日）第5至6节

教学目标

知识目标：

定义函数、调用函数、能实现事件响应

能力目标：

编写调用简单的JS函数，完成一定功能。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

编写调用简单的JS函数，完成一定功能。

教学难点

能根据功能分析出编程步骤，并在规定实践完成。

补充内容

无

教学场地

及教具使用

机房电脑dreamweaverMX2004

教　学　过程

方法手段

时间分配

导入

组织教学，点名

根据分数给出学生获得的等级，使用什么结构？

实现连续十个学生的等级评价，使用什么结构？

观看一个购物车特效，可以自动计算购物金额，如何实现呢？

引出函数的概念和函数调用的概念。

讲述

新课

2.1函数基础

工作任务1

编写函数functionsum（number1,number2）求两数之和，弹出结果。

并调用之。

2.2什么是函数

函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。

在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。

2.2.1函数的定义

函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。

函数与其他的JavaScript代码一样，必须位于标记之间，函数的基本语法。

。

2.2.2函数调用

函数调用的语法

2.3简易购物车实现

现场教学

知识扩展：

无

练习或训练

课后小结

布置作业

课后实战题1

授课章节

授课形式

现场教学

授课时间

第3周周2（9月13日）第7至8节

教学目标

知识目标：

有参函数的定义和调用，事件响应

能力目标：

编写调用简单的有参数JS函数，完成一定功能。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

编写调用简单的JS函数，完成一定功能。

教学难点

能根据功能分析出编程步骤，并在规定实践完成。

补充内容

无

教学场地

及教具使用

机房电脑dreamweaverMX2004

教　学　过程

方法手段

时间分配

导入

组织教学，点名

JavaScript函数定义和调用的语法

点击按钮实现功能如何调用JavaScript函数

讲述

新课

制作四则运算计算器。

本题需要使用函数参数传递。

在JavaScript中定义函数的完整格式如下：

语法

function自定义函数名（形参1,形参2,……）

{函数体}

在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“,”分隔）。

指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。

我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。

如果定义的函数有参数，那么对这种函数的调用形式就是：

函数名（实参1，实参2，……）

通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号“,”分隔。

）

functioncompute（op）

{…….}

这里op代表进行何种运算。

所以调用的时候，也相应的给予参数

onClick="compute（'+'）

现场教学

知识扩展：

无

练习或训练

实现特效

课后小结

布置作业

课后实战题2

授课章节

授课形式

讲授+现场教学

授课时间

第3周周4（9月15日）第5至6节

教学目标

知识目标：

超链接如何实现像按钮一样的功能。

能力目标：

编写调用简单的有参数JS函数，用超链接点击实现响应，完成一定功能。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

用超链接实现按钮一样的功能。

教学难点

无。

补充内容

无

教学场地

及教具使用

机房电脑dreamweaverMX2004

教　学　过程

方法手段

时间分配

导入

组织教学，点名

JavaScript中如何定义和调用有参函数。

按钮点击调用函数如何实现？

如何用超链接取代按钮？

讲述

新课

点击超链接实现按钮功能，改变html的页面背景色。

函数除了可以在响应事件中被调用之外，还可以在链接中被调用。

在标签中的href标记中使用javascript:

关键字调用函数，当用户单击这个链接时，相关函数将被执行。

change（'b'）">

functionchange（color）{

if（color=="r"）{

document.bgColor="red";

}elseif（color=="b"）{

document.bgColor="blue";

}elseif（color=="g"）{

document.bgColor="green"

把建议购物车的“计算金额”按钮变成超链接看能否实现相同的效果？

常见函数parseInt（），isNaN（）和parseFloat（）

能力目标：

能使用内置函数实现数值转换，获得表单元素。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

能利用内置函数判断输入是否为数值，能将字符串转换为整数或浮点数

机房电脑dreamweaverMX2004

不带参数的函数，带参数的函数定义，函数调用的注意点

收入多出起征额1000以内，税率为0.05，1000到3000为0.1，以上为0.5。

如果输入非数字，弹出错误提示。

否则给出结果。

1）parseInt（）函数

该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。

语法：

parseInt（StringNum,[n]）

StringNum：

需要转换为整型的字符串。

n：

提供在2～36之间的数字表示所保存数字的进制数。

这个参数在函数中不是必须的。

2）parseFloat（）函数

该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。

语法：

parseFloat（StringNum）

如果参数Num为NaN，函数返回值为true；如果参数Num不是NaN，函数返回值为false。

4）isFinite（）函数

该函数主要用于检验某个表达式是否为无穷大。

如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。

能使用内置函数实现数值转换，获得表单元素。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

编写调用简单的JS函数，实现广告窗口的弹出

机房电脑dreamweaverMX2004

函数parseFloat（StringNum）的功能是什么？

任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解析为一颗内存树。

如图3.2所示。

这颗树是由一个一个的节点构成的。

其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文本节点。

2）节点和节点的引用

在DOM中，每个对象都称为一个节点。

DOM对象模型

浏览器对象是一个分层结构，也称为文档对象模型。

window对象编程

打开页面，先看到浏览器窗口，即window窗口，window对象指的是浏览器本身。

其次就是我们看到的网页文档内容，即document文档。

它包含一个最主要的内容表单。

假设myform表单中有一个文本框text1，定位次文本框时，就应该从上到下定位：

window.document.myform.text1

因为window对象是所有页面内容的根节点，所以可以省略

document.myform.text1

浏览器对象结构中除了document文档对象，还有location和history。

能使用setTimeout（）方法实现定时特效。

素质目标：

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

全局变量的使用，setTimeout（）方法应用。

机房电脑dreamweaverMX2004

onLoad事件是“页面加载完成”事件，当页面加载完了之后发生此事件，如果想要在打开网页的时候就调用JavaScript函数，可以响应此事件。

setTimeout（"函数",毫秒数）可以设置定时器：

经过指定毫秒值后执行某个函数。

我们可以利用它实现一个每1秒就递增的秒表。

vart=1;

functiontick（）

{

document.form1.tick.value=t;

t++;

setTimeout（'tick（）',1000）;

实现网页颜色每过一秒钟就变一种颜色，总共5种颜色。

使用onLoad事件和setTimeout方法。

能根据功能分析出编程步骤，并在规定实践完成。

教学重点

Document.getElementsByName（）获得控件数组的概念

机房电脑dreamweaverMX2004

setTimeout（）方法的目的是实现什么功能？

document对象常用方法如表3.4所示。

根据HTML元素指定的ID，获得唯一的一个HTML元素。

如：

访问DIV层对象、图片Img对象

getElementsByName（）

根据HTML元素指定的name，获得相同名称的一组元素。

在页面中插入层，z轴设为1，然后在层中插入图片。

编写脚本：

使用getElementByID（）方法获取层对象，捕获鼠标滚动事件，改变层对象的位置坐标。

history对象和location对象的属性和方法

机房电脑dreamweaverMX2004

Document 对象的属性和方法有哪些？

history、location对象常用属性和方法

加载History列表中的一个URL，或要求浏览器移动指定的页面数。

back（）方法相当于后退按钮

forward（）方法相当于前进按钮

（1）代表前进1页，等价于forward（）方法；

go（-1）代表后退1页，等价于back（）方法；

location常用属性

location对象常用属性如表3.7所示。

location对象常用方法如表3.8所示。