javascript网页特效案例教程教案普通班

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

2、dreamweaverMx2004教学过程方法手段时间分配导入组织教学，点名回顾HTML,它的基本元素。JS?讲述10新课第一个JavaScript小程序了解JavaScript什么是JavaScript为什么要学JavaScriptJavaScript执行原理在脚本的执行过程中，浏览器客户端与应用服务器采用请求/口应模式进行交互分解这个过程为1）浏览器接收用户的请求：2）向服务器请求某个包含JavaScript脚本的页面3）应用服务器端向浏览器发送响应信息，即把含有脚本的HTML文件发送到浏览器客户端，然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本，并显示页面效果呈现给用

3、户。使用客户端脚本的好处有以下两点：a）口脚本的页面只要下载一次，减少不必要的网络通信。b）脚本程序是浏览器客户口执行，而不是由服务器执行，因此可以减轻服务器端的压力。JavaScript的版本JavaScript语言最初在Netscape2.0上发布，此后不断发展，陆续推出了多个版本：JavaScript1.0到JavasScript1.6。其中JavaScript1.5,InternetExplorer6.0支持，Netscape6.0和Firefox1.0支持。JavaScript1.6目前有firefox1.5支持。脚本编写工具记事本FrontPageDreamweaver写第一个Ja

4、vaScript工作任务3：写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！讲授20知识扩展：无练习或训练工作任务3：写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！注意DreamweaverJavaScript调试方法40课后小结15布置作业15授课章节1.6JavaScript的基本语法变量声明和赋值运算符号授课形式现场教学授课时间第1周周4(9月1日第5至6节教学目标知识目标：掌握变量声明和赋值方法。能力目标：编写调用简单的JS代码，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点运用变量声明和赋

5、值知识，编写调用简单的JS代码，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名回顾JS基本知识。JavaScript?JavaScript?常用的JavaScript?如何调试JavaScript程序？讲述101.6Javascript的基本语法现场教学1.6.120在JavaScript中，变量的命名规则与Java相同。JavaScript是一种弱类型语言，也就是在变量声明时不需要指定变量类型，变量的类型会由赋给变量的值决定。1.6.2运算符号：1)算术运算符用于连接运算

6、表达式。算术运算符包括加(+)、新口(-)、口(*)、除(/)、取口()、自加(+)、自减(-)u等运算符课2)比较运算符用来连接操作数来组成比较表达式。比较运算符的基本操作过程是：首先对操作数进行比较，然后返回一个布尔值true或false。包括、=、=、=、！=3)JavaScript支持的常用逻辑运算符，包括！口|、&4)赋值运算符，包括二、十二、二、*二、/=变量声明和赋值知识扩展：无使用变量和运算符，实现如下运算40a=1,b=2,练a+b=3习c二”hello”或训d二”you”练c+d二”helloyou”e二false!e=true课15后小结布25置作业授课章节1.6.31.

7、6.4注释授课形式现场教学授课时间第2周周2(9月6日第7至8节教学目标知识目标：掌握分支语句和循环语句的语法结构。能力目标：编写调用简单的JS代码，实现分支结构和循环结构。素质目标：能灵活运用分支和循环结构解决实际编程问题。教学重点使用分支语句使用循环语句教学难点循环语句和分支语句补充内容无教学场地电脑投影pptdreamweaverMx2004教学过程方法手段时间分配导入组织教学，点名JavaScript中的变量声明和Java中的区别是什么，什么样的?JavaScript语言区分大小写吗？JavaScript哪些赋值符号。讲述10新1.6.311条件语句if语句是最基本、最常用的条件控制语

8、句，语法：if(expression)statement2)switchDOswitch是典型的多路分支语句语法：switch(expression)casejudgementl:statementl;break;default:defaultstatement;break;forDOwhileDOwhileDO是基本的循环DO,也是条件判断DO。语法：while(expression)statement现场教学20知识扩展：无练用while循环语句将指定的字符串进行输出坚持就是胜利磐持就是胜利里邦就是度相利用脚本实现宝石图形。40课15布课后实战题3.45授课章节2.1函数基础2.2什么是函

9、数2.3简易购物车实现授课形式现场教学授课时间第_2周周4(9月8日第5至6_节教学目标知识目标：定义函数、调用函数、能实现事件响应能力目标：编写调用简单的JS函数，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导入,?,?,?讲述102.1函数基础现场教学工作任务120编写函数functionsum(number1,number2)求两数之和，弹出结果。并调用之。2.2什么是函数函数实质上就

10、是可以作为一个逻辑单元对待的一组相关JavaScriptDOD在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。2.2.1函数的定义函数是由关键字function、函数名加一组参数以及置于大括号新中需要执行的一段语句定义的。函数与其他的JavaScript代码一样，必须位于SCRIPT/SCRIPT标记之间，函数的基本语课法。D2.2.2函数调用函数调用的语法2.3简易购物车实现知识扩展：无练|简昌啊御车|40习肉品名称题:量1件单饰(美元)叵寄f美元,都十|或训|跑距道具|11美元练20课后小结1布置作业授课章节2.4四则运算计算器授课形式现场教学授课时间第3周周2(9月

11、13日第7至8节教学目标知识目标：有参函数的定义和调用，事件响应能力目标：编写调用简单的有参数JS函数，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导入,JavaScriptJavaScript函数讲述10新课制作四则运算计算器。:摘痂外E引柏力鼠蛀3HI-二，rS?013,睡tq相联社漉E施船邂|卿敬加寸/:小I；1丫回里手SB翳本题需要使用函数参数传递。料.啕、在JavaScript中定

12、义函数的完整格式如下：语法十Efunction自定义函数名（形参H,fr02,）,函数体在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数叫逗号“，”分隔）。指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。如果定义的函数有参数，那么对这种函数的调用形式就是:函数名（实参1,实参2,）通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号0,0000）functioncompute（op）.这里op代表进行何

13、种运算。所以调用的时候，也相应的给予参数onClick=compute（+）现场教学20知识扩展叫练计算剧的冏长和面积丰径，湎-周民.吐面积卜|3JJM实现特效40课15布25授课章节2.5用链接代替按钮响应点击事件授课形式讲授+现场教学授课时间第3周周4(9月15日第5至6节教学目标知识目标：口链接如何实现像按钮一样的功能。能力目标：编写调用简单的有参数JS函数，用超链接点击实现响应，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点用超链接实现按钮一样的功能。教学难点无。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配,Java

14、Script?讲述15导入点击超链接实现按钮功能，改变html的页面背景色。H迎够,“她口藐=gfivi炖nil1口1*/08Qb时般看匈忌好之象算苦器.理望场.瞳记盘镯:窿，“1H三|口西二，口庇心.|%xgSffiHlX现场教学40新课函数除了可以在响应事件中被调用之外，还可以在链接中被调用。在标签中的href标记中使用javascript:关键字调用函数，当用户单击这个链接时，相关函数将被执行。functionchange(color)if(color=r)ocument-bgColr-ed;elseif(color=b)document.bgColor=blue;elseif(colo

15、r=g)document.bgColor=green”知识扩展：无练?20课15布P80一二5授课章节2.6JavascriPT置函数授课形式现场教学授课时间第_周2(9月20日)第7至8节教学目标知识目标：常见函数parseInt(),isNaN()和parseFloat()能力目标：能使用内置函数实现数值转换，获得表单元素。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点能利用内置函数判断输入是否为数值，能将字符串转换为整数或浮点数教学难点无。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导,不带参数的函数，带参数的函数定义，函数调用的注

16、意点如何响应按钮点击事件？口链接可以取代按钮吗？讲述10工作任务5编写个人所得税计算器。月收入所得税计算的方式：(月收入-现场教学起征额)*所得税率。收入多出起征额1000以内，税率为0.05，20新1000到3000为0.1,以上为0.5。如果输入非数字，弹出错误提示。否则给出结果。1)parseInt()函数该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。语法：parseInt(StringNum,n)StringNum：需要转换为整型的字符串。n：提供在2口36之间的数字表示所保存数字的进制数。这个参数在函数中不是必须的。2)parseFloat()

17、函数该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。语法：parseFloat(StringNum)StringNum：需要转换为浮点型的字符串。3)isNaN()函数该函数主要用于检验某个值是否为NaN。语法：isNaN(Num)Num：需要验证的数字。如果参数Num为NaN，函数返回值为true；如果参数NaN，函数返回值为false。4)isFinite()函数该函数主要用于检验某个表达式是否为无穷大。语法：isFinite(Num)Num：需要验证的数字。Num不是课如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数

18、返回值为false。知识扩展：无练4用入加五目启日年的中哼可：40习11或训实现闰年的判断练课后小结20布30置作业授课章节3.1DOM模型3.2WINDOW象编程授课形式现场教学授课时间第4周周49月22日第5至6节教学目标知识目标：DOM模型Window对象常用属性和方法能力目标：能使用内置函数实现数值转换，获得表单元素。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，实现广告窗口的弹出教学难点无。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导入,函数parseFloat(StringNum)的功能是什么？?讲述

19、10引入：1)HTMLDODD现场教学任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解40口为一颗内存树。如图3.2所示。这颗树是由一个一个的节点构成的。其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文本节点。2）节点和节点的引用在DOM中，每个对象都称为一个节点。DOM对象模型浏览器对象是一个分层结构，也称为文档对象模型。window对象编程新打开页面，先看到浏览器窗口，即window窗口，windowDOO的是浏览器本身。其次就是我们看到的网页文档内容，口课documentODD它包含一个最主要的内容表单。假设myform表单中有一个文本框textl,定位

20、次文本框时，就应该从上到下定位：window.document.myform.textl因为windowD象是所有页面内容的根节点，所以可以省略document.myform.textl浏览器DODD中除了document文档对象,还有location和history。知识扩展：无工作任务220练习页面加载时弹出广告页面。或训练20课后小结10布置作业授课章节3.2.3动态秒表授课形式讲授授课时间第5周周29月27日第7至8节教学目标知识目标：全局变量的使用onLoad事件响应setTimeout定时函数能力目标：能使用setTimeout()方法实现定时特效。素质目标：能根据功能分析出编程步

21、骤，并在规定实践完成。教学重点全局变量的使用，setTimeout()方法应用。教学难点无。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导入,回顾简述DOM页面加载时弹出广告页面的主要步骤。讲述10onLoad,JavaScript,现场教学40setTimeout（“函数，毫秒数）可以设置定时器：经过指定毫秒值后执行某个函数。我们可以利用它实现一个每1秒就递增的秒表。vart=1;functiontick()新document.form1.tick.value=t;课t+;UsetTimeout(tick(),1000);知识扩展：无，总共5种颜色。2

22、0练使用onLoad事件和setTimeout方法。训练15课后小结25布置作业授课章节3.3document对象编程document授课形式现场教学授课时间第5周周4(9月29日第5至6节教学目标知识目标：document对象的常用属性和方法能力目标：能document提供的方法实现特效。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点Document.getElementsByName()获得控件数组的概念教学难点无。补充内容无教学场地机房电脑dreamweaverMX2004教学过程方法手段时间分配导入,onLoad事件是什么事件？setTimeout(方法的目的是实现什么

23、功能？讲述10新课document对象编程document对象常用属性和方法表3.3document常用属性现场教学20名称说明bgColor设置或检索Document对象的背景色常用方法document对象常用方法如表3.4所示。表3.4document常用方法名称说明getElementByID()getElementsByName()根据HTML元素指定的ID，D00一的一个HTML元素。如：访问DIV层对象、图片Img对象根据HTML元素指定的name，DO相同名称的一组元素。如：访问表单元素(全选功能)漂浮广告制作布局：在页面中插入层，z轴设为1,然后在层中插入图片。编写脚本：使用getElementByID()方法获取层对象，捕获鼠标滚动事件，改变层对象的位置坐标。常见的页面坐标的介绍，如表3.5所示：表3.5常见页面坐标top:pixelTop:left:scrolltop:指定元素的上边界位置。设置或返回元素