JavaScript网页特效案例教程教案(普通班)

1、授课章节第一章 第一个JavaScript小程序1.1了解JavaScript 1.2JavaScript执行原理1.3JavaScript的版本1.4脚本编写工具1.5编写第一个JavaScript授课形式讲授授课时间第 1 周 周 2 （ 8月30 日） 第 7 至 8 节教学目标知识目标： 掌握脚本的基本结构(Script标签) 简单记忆基本语法变量的定义与赋值数据类型与转换parseFloat等运算符和控制语句同Java 灵活运用高级语法自定义函数function能力目标：掌握函数的用法。素质目标：能根据功能分析出哪里需要添加函数。教学重点回顾静态网页相关知识。掌握函数的用法。教学难点

2、能根据功能分析出哪里需要添加函数。补充内容无教学场地及教具使用多媒体教室 电脑 投影 ppt dreamweaver Mx 2004教学过 程方法手段时间分配导 入组织教学,点名回顾HTML，它的基本元素。为什么还要学习JS？讲述10新 课第一个JavaScript小程序1.1了解JavaScript 什么是JavaScript 为什么要学JavaScript1.2JavaScript执行原理在脚本的执行过程中，浏览器客户端与应用服务器采用请求/响应模式进行交互分解这个过程为1）浏览器接收用户的请求： 2）向服务器请求某个包含JavaScript脚本的页面 3)应用服务器端向浏览器发送响应信息

3、，即把含有脚本的HTML文件发送到浏览器客户端，然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本，并显示页面效果呈现给用户。使用客户端脚本的好处有以下两点：a)含脚本的页面只要下载一次，减少不必要的网络通信。b）脚本程序是浏览器客户端执行，而不是由服务器执行，因此可以减轻服务器端的压力。1.3JavaScript的版本JavaScript语言最初在Netscape2.0上发布，此后不断发展，陆续推出了多个版本：JavaScript1.0到JavasScript1.6。其中JavaScript 1.5,Internet Explorer 6.0支持，Netscape 6.0和F

4、irefox1.0支持。JavaScript 1.6目前有firefox1.5支持。1.4脚本编写工具记事本 FrontPage Dreamweaver1.5写第一个JavaScript工作任务3：写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！讲授20知识扩展：无练习或训练工作任务3：写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！注意Dreamweaver的使用和JavaScript调试方法40课后小结15布置作业 课后实战题15授课章节1.6JavaScript的基本语法1.6.1变量声明和赋值1.6.2运算符号授课形式现场

5、教学授课时间第 1 周 周 4 （9月 1 日） 第 5 至 6 节教学目标知识目标：掌握变量声明和赋值方法。能力目标：编写调用简单的JS代码，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点运用变量声明和赋值知识,编写调用简单的JS代码，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学,点名回顾JS基本知识。 JavaScript的执行原理是什么?分成几个步骤?大家简述一下JavaScript脚本的基本结构？常用的JavaScri

6、pt编写工具是什么?如何调试JavaScript程序? 讲述10新 课1.6 Javascript的基本语法1.6.1变量的声明和赋值在JavaScript中，变量的命名规则与Java相同。JavaScript是一种弱类型语言，也就是在变量声明时不需要指定变量类型，变量的类型会由赋给变量的值决定。1.6.2运算符号运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别： 1）算术运算符用于连接运算表达式。算术运算符包括加（+）、减（）、乘（*）、除（/）、取模（%）、自加（+）、自减（-）等运算符2）比较运算符用来连接操作数来组成比较表达式。比较运算

7、符的基本操作过程是：首先对操作数进行比较，然后返回一个布尔值true或false。包括、=、=、=、!=3) JavaScript支持的常用逻辑运算符,包括！、|、&4) 赋值运算符，包括=、+=、=、*=、/=变量声明和赋值 现场教学20知识扩展：无练习或训练使用变量和运算符,实现如下运算a=1,b=2,a+b=3c=”hello”d=” you”c+d=”hello you”e=false !e=true40课后小结 15布置作业 课后实战题25授课章节1.6.3逻辑控制语句1.6.4注释授课形式现场教学授课时间第 2 周 周 2 （9 月6 日） 第 7 至 8 节教学目标知识目标：掌握

8、分支语句和循环语句的语法结构。能力目标：编写调用简单的JS代码，实现分支结构和循环结构。素质目标：能灵活运用分支和循环结构解决实际编程问题。教学重点使用分支语句使用循环语句教学难点循环语句和分支语句补充内容无教学场地及教具使用多媒体教室 电脑 投影 ppt dreamweaver Mx 2004教学过 程方法手段时间分配导 入组织教学,点名JavaScript中的变量声明和Java中的区别是什么，什么样的名字可以作为变量名使用?JavaScript语言区分大小写吗?JavaScript有哪些赋值符号。讲述10新 课1.6.3逻辑控制语句1）条件语句if语句是最基本、最常用的条件控制语句，语法：

9、if(expression) statement2）switch语句switch是典型的多路分支语句语法：switch (expression) case judgement1: statement1; break; default: defaultstatement; break;4）for语句5）while语句while语句是基本的循环语句，也是条件判断语句。语法：while (expression) statement现场教学20知识扩展：无练习或训练用while循环语句将指定的字符串进行输出利用脚本实现宝石图形。40课后小结15布置作业课后实战题3.45授课章节2.1 函数基础2.2什

10、么是函数2.3简易购物车实现授课形式现场教学授课时间第 2 周 周 4 （ 9 月 8 日） 第 5 至 6 节教学目标知识目标：定义函数、调用函数、能实现事件响应能力目标：编写调用简单的JS函数，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学，点名根据分数给出学生获得的等级，使用什么结构？实现连续十个学生的等级评价，使用什么结构？观看一个购物车特效，可以自动

11、计算购物金额，如何实现呢？引出函数的概念和函数调用的概念。讲述10新 课2.1函数基础工作任务1编写函数function sum(number1,number2) 求两数之和，弹出结果。并调用之。2.2什么是函数函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。2.2.1函数的定义函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。函数与其他的JavaScript代码一样，必须位于标记之间，函数的基本语法。2.2.2函数调用函数调用的语法2.3简易购物车实现现场教

12、学20知识扩展：无练习或训练 40课后小结20布置作业课后实战题1授课章节2.4四则运算计算器授课形式现场教学授课时间第 3 周 周 2 （ 9 月 13 日） 第 7 至 8 节教学目标知识目标： 有参函数的定义和调用，事件响应能力目标：编写调用简单的有参数JS函数，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学，点名JavaScript函数定义和调用的语法

13、点击按钮实现功能如何调用JavaScript函数讲述10新 课制作四则运算计算器。本题需要使用函数参数传递。在JavaScript中定义函数的完整格式如下：语法function 自定义函数名 (形参1,形参2,) 函数体 在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“,”分隔）。指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。如果定义的函数有参数，那么对这种函数的调用形式就是：函数名（实参1，实参2，）通常，如果在定义函数时使用了多少个形参，那么在函数调用

14、时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号“,”分隔。）function compute(op).这里op代表进行何种运算。所以调用的时候，也相应的给予参数onClick=compute(+)现场教学20知识扩展：无练习或训练 实现特效40课后小结15布置作业课后实战题25授课章节2.5用链接代替按钮响应点击事件 授课形式讲授+现场教学授课时间第 3 周 周 4 （ 9 月 15 日） 第 5 至 6 节教学目标知识目标： 超链接如何实现像按钮一样的功能。能力目标：编写调用简单的有参数JS函数，用超链接点击实现响应，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规

15、定实践完成。教学重点用超链接实现按钮一样的功能。教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学，点名JavaScript中如何定义和调用有参函数。按钮点击调用函数如何实现？如何用超链接取代按钮？讲述15新 课点击超链接实现按钮功能，改变html的页面背景色。函数除了可以在响应事件中被调用之外，还可以在链接中被调用。在标签中的href标记中使用javascript:关键字调用函数，当用户单击这个链接时，相关函数将被执行。function change(color)if(color=r)document.bgCol

16、or=red;else if(color=b)document.bgColor=blue;else if(color=g)document.bgColor=green现场教学40知识扩展：无练习或训练把建议购物车的“计算金额”按钮变成超链接看能否实现相同的效果？20课后小结15布置作业P80 一 二5授课章节2.6Javascript的内置函数授课形式现场教学授课时间第 4 周 周 2 （9 月 20 日） 第 7 至 8 节教学目标知识目标：常见函数parseInt()，isNaN()和parseFloat()能力目标：能使用内置函数实现数值转换，获得表单元素。素质目标：能根据功能分析出编程

17、步骤，并在规定实践完成。教学重点能利用内置函数判断输入是否为数值，能将字符串转换为整数或浮点数教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学，点名不带参数的函数，带参数的函数定义，函数调用的注意点如何响应按钮点击事件？超链接可以取代按钮吗？讲述10新 课工作任务5编写个人所得税计算器。月收入所得税计算的方式：(月收入-起征额)*所得税率。收入多出起征额1000以内，税率为0.05，1000到3000为0.1，以上为0.5。如果输入非数字，弹出错误提示。否则给出结果。1）parseInt()函数该函数主要将首位为

18、数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。语法：parseInt(StringNum,n)StringNum：需要转换为整型的字符串。n：提供在236之间的数字表示所保存数字的进制数。这个参数在函数中不是必须的。2）parseFloat()函数该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。语法：parseFloat(StringNum)StringNum：需要转换为浮点型的字符串。3）isNaN()函数该函数主要用于检验某个值是否为NaN。语法：isNaN(Num)Num：需要验证的数字。如果参数Num为NaN，函数返回值

19、为true；如果参数Num不是NaN，函数返回值为false。4）isFinite()函数该函数主要用于检验某个表达式是否为无穷大。语法：isFinite(Num)Num：需要验证的数字。如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。现场教学20知识扩展：无练习或训练 实现闰年的判断40课后小结 20布置作业 课后是实战题30授课章节3.1DOM模型3.2window对象编程授课形式现场教学授课时间第 4 周 周 4 （ 9 月22 日） 第 5 至 6 节教学目标知识目标： DOM模型Window对象常用属性和方法能力目标：能使用内置函数实现

20、数值转换，获得表单元素。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，实现广告窗口的弹出教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学，点名 函数parseFloat(StringNum)的功能是什么？ 实现一个四则运算器的基本思路是什么？讲述10新 课引入：1) HTML树状结构任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解析为一颗内存树。如图3.2所示。这颗树是由一个一个的节点构成的。其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文

21、本节点。2）节点和节点的引用在DOM中，每个对象都称为一个节点。DOM 对象模型浏览器对象是一个分层结构，也称为文档对象模型。window对象编程打开页面，先看到浏览器窗口，即window窗口，window对象指的是浏览器本身。其次就是我们看到的网页文档内容，即document文档。它包含一个最主要的内容表单。假设myform表单中有一个文本框text1，定位次文本框时，就应该从上到下定位：window.document.myform.text1因为window对象是所有页面内容的根节点，所以可以省略document.myform.text1浏览器对象结构中除了document文档对象，还有l

22、ocation和history。现场教学40知识扩展：无练习或训练工作任务2页面加载时弹出广告页面。 20课后小结 20布置作业 课后实战题10授课章节 3.2.3动态秒表授课形式讲授授课时间第 5 周 周 2 （ 9 月 27 日） 第 7 至 8 节教学目标知识目标：全局变量的使用onLoad事件响应setTimeout定时函数能力目标：能使用setTimeout()方法实现定时特效。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点全局变量的使用，setTimeout()方法应用。教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过

23、 程方法手段时间分配导 入组织教学，点名回顾简述DOM的基本概念。页面加载时弹出广告页面的主要步骤。讲述10新 课 全局变量和局部变量的概念 onLoad事件是“页面加载完成”事件，当页面加载完了之后发生此事件，如果想要在打开网页的时候就调用JavaScript函数，可以响应此事件。setTimeout(函数,毫秒数)可以设置定时器：经过指定毫秒值后执行某个函数。我们可以利用它实现一个每1秒就递增的秒表。var t=1;function tick()document.form1.tick.value=t;t+;setTimeout(tick(),1000);现场教学40知识扩展：无练习或训练实

24、现网页颜色每过一秒钟就变一种颜色，总共5种颜色。使用onLoad事件和setTimeout方法。20课后小结 15布置作业 课后实战题25授课章节3.3document对象编程3.3.1document对象常用属性和方法3.3.2漂浮广告制作授课形式现场教学授课时间第 5 周 周 4 （9 月29 日） 第 5 至 6 节教学目标知识目标：document对象的常用属性和方法能力目标：能document提供的方法实现特效。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点Document.getElementsByName()获得控件数组的概念教学难点无。补充内容无教学场地及教具使

25、用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入组织教学，点名onLoad事件是什么事件？setTimeout()方法的目的是实现什么功能？简述动态秒表的实现步骤。讲述10新 课document对象编程document对象常用属性和方法表3.3document常用属性名称说明bgColor设置或检索 Document 对象的背景色常用方法document对象常用方法如表3.4所示。表3.4document常用方法名称说明getElementByID( )根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象getElem

26、entsByName( )根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能)漂浮广告制作布局：在页面中插入层，z轴设为1，然后在层中插入图片。编写脚本：使用getElementByID( )方法获取层对象，捕获鼠标滚动事件，改变层对象的位置坐标。常见的页面坐标的介绍,如表3.5所示：表3.5常见页面坐标top:指定元素的上边界位置。pixelTop:设置或返回元素的上边界。left:指定元素的左边界位置。scrolltop:页面滚动的高度现场教学20知识扩展：无练习或训练设计会漂浮的广告页面。40课后小结 20布置作业 课后实战题30授课章节3.4histor

27、y对象和location对象授课形式现场教学授课时间第 周 周 （ 月 日） 第 至 节教学目标实现有返回，前进，刷新功能的页面教学重点history对象和location对象的属性和方法教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入Document对象的属性和方法有哪些？漂浮广告制作的步骤使用网页上的前进后退效果讲述10新 课history、location对象常用属性和方法history常用方法history对象常用方法如表3.6所示表3.6 history对象常用方法名称说明back( )加载 History 列

28、表中的上一个 URL。 forward( )加载 History 列表中的下一个 URL。 go(urlor number)加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。 back ( )方法相当于后退按钮forward ( ) 方法相当于前进按钮go (1)代表前进1页，等价于forward( )方法；go(-1) 代表后退1页，等价于back( )方法；location常用属性location对象常用属性如表3.7所示。表3.7 location对象常用属性名称说明host设置或检索位置或 URL 的主机名和端口号hostname设置或检索位置或 URL 的主机

29、名部分href设置或检索完整的 URL 字符串location常用方法location对象常用方法如表3.8所示。表3.8location对象常用方法名称说明assign(url)加载 URL 指定的新的 HTML 文档。 reload()重新加载当前页replace(url) 通过加载 URL 指定的文档来替换当前文档现场教学40知识扩展：无练习或训练前进后退实现20课后小结Location的属性和方法History的属性和方法20布置作业课后实战提40授课章节第四章内置对象4.1什么是对象4.2 Date对象编程显示日期、动态时钟授课形式讲授授课时间第 周 周 （ 月 日） 第 至 节教学

30、目标了解什么叫对象会使用Date对象实现动态时钟教学重点Date对象的使用教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入什么是对象网页上的动态时钟如何实现？讲述10新 课什么是对象创建和删除对象对象的属性和方法Date对象编程显示日期、动态时钟工作任务1实现当前的日期和时间： 5月13日13时45分51秒。工作任务2实现动态时钟Date的属性和方法方法组Date对象方法组如表4.1所示。表4.1Date对象方法组方法分组说明setXxx这些方法用于设置时间和日期值getXxx这些方法用于获取时间和日期值现场教学40知识

31、扩展：无练习或训练制作动态时钟特效20课后小结对象是什么Date对象的属性和方法20布置作业无0授课章节4.3String对象4.3.1String对象的常用属性和方法4.3.2对电子邮箱的格式进行验证授课形式现场教学授课时间第 周 周 （ 月 日） 第 至 节教学目标掌握String对象的常用属性和方法使用String对象实现电子邮箱格式验证教学重点掌握String对象的常用属性和方法教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入常见的电子邮箱验证存在哪些验证内容？讲述10新 课String对象工作任务3验证用户信息

32、。如图4.1所示。String对象的常用属性和方法表4.3String对象常用方法属性名 称说 明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置) 查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2 )求子串toLowerCase( )将字符串转换成小写 toUpperCase( )将字符串转换成大写现场教学40知识扩展：无练习或训练制作电子邮件简单验证特效20课后小结String对象的属性方法如何验证字符串中是否存在字符？15布置作业5授课章节4.4Math对象4.4.1Math常用方法 4.4

33、.2随机产生4位验证码授课形式讲授授课时间第 周 周 （ 月 日） 第 至 节教学目标掌握Math常用方法会利用Math产生四位验证码教学重点会利用Math产生四位验证码教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入如何验证字符串中是否存在字符？网页中登陆功能除了使用用户名和密码，往往还要输入验证码。我们可以用JavaScript来模拟随机数的产生吗？讲述10新 课Math对象工作任务4随机出现四位验证码，如图4.2所示。图4.2工作任务4运行结果Math常用方法名称说明abs方法计算指定参数的绝对值acos方法返回指

34、定参数的反余弦值asin方法返回指定参数的反正弦值atan方法返回指定参数的反正切值atan2方法根据指定的坐标返回一个弧度值ceil方法返回大于或等于指定参数的最小整数cos方法计算指定参数的余弦值exp方法以e为基数的指数函数floor方法返回小于或等于指定参数的最大整数log方法以e为基数的自然对数max方法返回两个或多个参数中的最大值min方法返回两个或多个参数中的最小值pow方法幂运算random方法产生0到1之间的随机数round方法取整运算sin方法计算指定参数的正弦值sqrt方法开平方运算tan方法计算指定参数的正切值现场教学40补充练习或训练产生四位随即码20课后小结Math

35、对象的常用方法5布置作业5授课章节4.5Array对象4.5.1一维数组4.5.2查看课程介绍4.5.3二维数组4.5.4二维数组输出学生的成绩表。4.5.5二维数组实现级联菜单授课形式现场教学授课时间第 周 周 （ 月 日） 第 至 节教学目标掌握Array对象的常用方法一维数组和二维数组的初始化和遍历教学重点一维数组和二维数组的初始化和遍历教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入Math对象的常用方法一维数组是如何定义和使用的讲述10新 课Array对象工作任务5用列表菜单选择图书介绍。如图4.3所示。一维数

36、组可以把数组看作一个单行表格，该表格的每一个单元格中都可以存储一个数据，而且各单元格中存储的数据类型可以不同，这些单元格被称为数组元素。每个数组元素都有一个索引号，通过索引号可以方便地引用数组元素。数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。二维数组工作任务6图4.4 工作任务6运行结果现场教学20知识扩展：无练习或训练课程介绍和选课级联菜单40课后小结掌握Array对象的常用方法一维数组和二维数组的初始化和遍历20布置作业无0授课章节第五章常用事件5.1什么是事件5.2事件处理程序的调用5.3键盘鼠标事件5.3.1按下按钮随机改变页面的背景颜色。授课形式现场教学授课时

37、间第 周 周 （ 月 日） 第 至 节教学目标了解事件的概念掌握事件调用函数的机制掌握键盘事件教学重点掌握键盘事件教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入复习掌握Array对象的常用方法一维数组和二维数组的初始化和遍历引导第一章学习的四则运算计算器响应的是什么时事件讲述10新 课什么是事件事件是用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如鼠标点击或按键，它可以触发与这个事件相关联的JavaScript对象，这些对象称为事件处理程序。事件处理是一项重要技术，它包含了用户与页面的所有交互。事件处理程序的

38、调用在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序，键盘鼠标事件事件描述onClick鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick鼠标双击事件onMouseDown鼠标上的按钮被按下了onMouseUp鼠标按下后，松开时激发的事件onMouseOver当鼠标移动到某对象范围的上方时触发的事件onMouseOut当鼠标离开某对象范围时触发的事件onKeyPress当键盘上的某个键被按下并且释放时触发的事件.注意:页面内必须有被聚焦的对象onKeyDown当键盘上某个按键被按下时触发的事件注意:页面内必须有被聚焦的对象onKeyUp当键

39、盘上某个按键被按放开时触发的事件注意:页面内必须有被聚焦的对象现场教学20知识扩展：无练习或训练按下按钮随机改变页面的背景颜色40课后小结了解事件的概念掌握事件调用函数的机制掌握键盘事件10布置作业无0授课章节5.3.2鼠标按下改变链接的颜色5.3.3鼠标的移入移出改变图片的焦点5.3.4鼠标移动事件获取鼠标的坐标授课形式讲授授课时间第 周 周 （ 月 日） 第 至 节教学目标知识目标：了解键盘鼠标事件技能目标：实现键盘鼠标事件的特效素质目标：在商业网站上能找到键盘鼠标事件特效教学重点实现键盘鼠标事件的特效教学难点无。补充内容无教学场地及教具使用机房 电脑 dreamweaver MX 200

40、4教学过 程方法手段时间分配导 入了解事件的概念掌握事件调用函数的机制掌握键盘事件讲述10新 课工作任务2用onmousedown和onmouseup事件将文本制作成类似于（超链接）标记的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜色，并弹出一个空页（可以链接任意网页）。鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。工作任务3鼠标在图片上移入或移出时，动态

41、改变图片的焦点，主要是用onmouseover和onmouseout事件来完成鼠标的移入和移出动作。 工作任务4鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置，也就是（x,y）值。 键盘控制小鱼游泳实现上下左右键控制鱼上下左右游动。 Document的onkeydown事件可以记录键盘上按键的ASCII码。普通键盘上下左右键对应87，83，65，68。根据键值修改fish距离页面上下左右的距离。 现场教学20知识扩展：无练习或训练课堂练习3.440课后小结 键盘鼠标事件中常用的有哪些？意义？如何实现记录鼠标坐标？Event是什么？15布置作业 5授课章节5.4页面相关事件5.4

42、.1可以改变大小的图像5.4.2一直出现在屏幕两侧的漂浮广告授课形式现场教学授课时间第 周 周 （ 月 日） 第 至 节教学目标知识目标：了解页面相关事件技能目标：实现页面事件的特效素质目标：在商业网站上能找到页面事件特效教学重点实现页面事件的特效教学难点无。补充内容无。教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入键盘鼠标事件中常用的有哪些？意义？如何实现记录鼠标坐标？Event是什么？讲述10新 课页面相关事件：l 工作任务6l 实现图片的大小改变。当鼠标没有关注此图片时为小图，鼠标进入图片区域变为大图。 l 工作任务7l 浏览览器的滚

43、动条位置发生变化时，讨厌的广告图跟随飘动 现场教学20知识扩展：无练习或训练课堂练习1340课后小结漂浮广告实现的步骤？20布置作业无0授课章节5.5表单事件 5.5.1文本框获得焦点变色授课形式讲授授课时间第 周 周 （ 月 日） 第 至 节教学目标知识目标：了解表单相关事件技能目标：实现表单事件的特效素质目标：在商业网站上能找到表单事件特效教学重点实现表单事件的特效教学难点无。补充内容无。教学场地及教具使用机房 电脑 dreamweaver MX 2004教学过 程方法手段时间分配导 入制作漂浮广告的布局使用什么容器？响应的是什么事件？Style是表示什么属性？讲述10新 课表单事件 l 工作任务8l 在登录网站时，在填写某个文本框的时候，该框会变色，等填写完了又变回原样，是如何实现的？现场教学40知识扩展：无练习或训练课堂练习820课后小结表单事件常用的有哪些？15布置作业5授课章节5.6编辑事件5.6.1动态