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

授课章节第一章第一个JavaScript小程序了解星JavaScriptJavaScript执行原理JavaScript的版本脚本编写工具编写第一个JavaScript授课形式讲授授课时间第」—周周上 （8月30日） 第」 至父 节教学目标知识目标：掌握脚本的基本结构（Script标签）简单记忆基本语法变量的定义与赋值数据类型与转换parseFloat等运算符和控制语句同Java灵活运用高级语法一自定义函数function能力目标：掌握函数的用法。素质目标：能根据功能分析出哪里需要添加函数。教学重点回顾静态网页相关知识。掌握函数的用法。教学难点能根据功能分析出哪里需要添加函数。补充内容无教学场地及教具使用多媒体教室电脑投影pptdreamweaverMx2004教学过程方法手段时间分配导入组织教学，点名回顾HTML，它的基本元素。为什么还要学习JS？讲述10常州机电职业技术学院普通类课程教案

新课第一个JavaScript小程序了解JavaScript什么是JavaScript为什么要学JavaScriptJavaScript执行原理在脚本的执行过程中，浏览器客户端与应用服务器采用请求/响应模式进行交互分解这个过程为1）浏览器接收用户的请求：2）向服务器请求某个包含JavaScript脚本的页面3）应用服务器端向浏览器发送响应信息，即把含有脚本的HTML文件发送到浏览器客户端，然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本，并显示页面效果呈现给用户。使用客户端脚本的好处有以下两点：a）含脚本的页面只要下载一次，减少不必要的网络通信。b）脚本程序是浏览器客户端执行，而不是由服务器执行，因此可以减轻服务器端的压力。JavaScript的版本JavaScript语言最初在Netscape2.0上发布，此后不断发展，陆续推出了多个版本：JavaScript1.0到JavasScript1.6。其中JavaScript1.5,InternetExplorer6.0支持，Netscape6.0和Firefox1.0支持。JavaScript1.6目前有firefox1.5支持。脚本编写工具记事本FrontPageDreamweaver写第一个JavaScript工作任务3：写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！讲授20知识扩展：无练习或训练工作任务3：写出第一个含有JavaScript的html，功能是弹出一个对话框，并调试成功！注意Dreamweaver的使用和JavaScript调试方法40课后小结15布置器课后实战题15常州机电职业技术学院普通类课程教案

授课章节1.6JavaScript的基本语法变量声明和赋值运算符号授课形式现场教学授课时间第」—周周4 （9月1日） 第」—至6节教学目标知识目标：掌握变量声明和赋值方法。能力目标：编写调用简单的JS代码，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点运瞪量声明和赋值知识，编写调用简单的JS代码，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名回顾JS基本知识。JavaScript的执行原理是什么？分成几个步骤？大家简述一下JavaScript脚本的基本结构？常用的JavaScript编写工具是什么？如何调试JavaScript程序？讲述10常州机电职业技术学院普通类课程教案

新课1.6Javascript的基本语法变量的声明和赋值在JavaScript中，变量的命名规则与Java相同。JavaScript是一种弱类型语言，也就是在变量声明时不需要指定变量类型，变量的类型会由赋给变量的值决定。运算符号运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：1）算术运算符用于连接运算表达式。算术运算符包括加+）、减（-）、乘（*）、除（/）、取模（％）、自加（++）、自减（--）等运算符2）比较运算符用来连接操作数来组成比较表达式。比较运算符的基本操作过程是：首先对操作数进行比较，然后返回一个布尔值true或false。包括＞、＜、＞=、＜=、==、!=3）JavaScript支持的常用逻辑运算符，包括!、||、&&4）赋值运算符，包括=、+=、一=、*=、/=变量声明和赋值现场教学20知识扩展：无练习或训练使用变量和运算符,实现如下运算a=1,b=2,a+b=3c="hello”d="you”c+d=”helloyou”e=false!e=true40课后小结15布置器课后实战题25常州机电职业技术学院普通类课程教案

授课章节1.6.3逻辑控制语句1.6.4注释授课形式现场教学授课时间第2周周 2_（9月6日）第7至8 节教学目标知识目标：掌握分支语句和循环语句的语法结构。能力目标：编写调用简单的JS代码，实现分支结构和循环结构。素质目标：能灵活运用分支和循环结构解决实际编程问题。教学重点使用分支语句使用循环语句教学难点循环语句和分支语句补充内容无教学场地及教具使用多媒体教室电脑投影pptdreamweaverMx2004教学过程方法手段时间分配导入组织教学,点名JavaScrip用的变量声明和ava中的区别是什么，什么样|名字可以作为变量名使用JavaScrip语言区分大小写吗JavaScrip有哪些赋值符号。的讲述10常州机电职业技术学院普通类课程教案

新课1.6.3逻辑控制语句1)条件语句if语句是最基本、最常用的条件控制语句，语法：if(expression){statement)2)switch语句switch是典型的多路分支语句语法：switch(expression){casejudgementl:statementl;break;…default:defaultstatement;break;)4)for语句5)while语句while语句是基本的循环语句，也是条件判断语句。语法：while(expression){statement)现场教学20知识扩展：无练习或训练用while循环语句将指定的字符串进行输出坚持就是胜利整持就是胜利堡特就是隹利利用脚本实现宝石图形。40课后小结15才iF课后实战题3.45常州机电职业技术学院普通类课程教案

授课章节函数基础什么是函数简易购物车实现授课形式现场教学授课时间第N 周周4 （9月8日）第」_至_6_节教学目标知识目标：定义函数、调用函数、能实现事件响应能力目标：编写调用简单的JS函数，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名根据分数给出学生获得的等级，使用什么结构？实现连续十个学生的等级评价，使用什么结构？观看一个购物车特效，可以自动计算购物金额，如何实现呢？引出函数的概念和函数调用的概念。讲述10常州机电职业技术学院普通类课程教案

新课函数基础工作任务1编与函数functionsum（number1,number2）求两数之和，弹出结果。并调用之。什么是函数函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。函数的定义函数是由关键字function,函数名加一组参数以及置于大括号中需要执行的一段语句定义的。函数与其他的JavaScript代码一样，必须位于<SCRIPT></SCRIPT>标记之间，函数的基本语法。。函数调用函数调用的语法简易购物车实现现场教学20知识扩展：无40至离曷睥蝴车 I旦训3KII至商且名称数量（件） 单价（美元）胞跑苣具| |\11 KSI齐<I百卜吉20才i1F课后实战题1常州机电职业技术学院普通类课程教案

授课章节2.4四则运算计算器授课形式现场教学授课时间第3周周二_（9月13日） 第」 至芷 节教学目标知识目标：有参函数的定义和调用，事件响应能力目标：编写调用简单的有参数JS函数，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，完成一定功能。教学难点能根据功能分析出编程步骤，并在规定实践完成。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名JavaScript函数定义和调用的语法点击按钮实现功能如何调用JavaScript函数讲述10常州机电职业技术学院普通类课程教案制作四则运算计算器。现场教学20练习或训练课后小结布置作业本题需要使用函数参数传递。在JavaScript中定义函数的完整格式如下：制作四则运算计算器。现场教学20练习或训练课后小结布置作业本题需要使用函数参数传递。在JavaScript中定义函数的完整格式如下：语法function自定义函数名（形参1,形参2,……）{函数体}在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“，”分隔）。指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。如果定义的函数有参数，那么对这种函数的调用形式就是：函数名（实参1，实参2，……）通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号:分隔。）functioncompute（op）{…….）这里op代表进行何种运算。所以调用的时候，也相应的给予参数onClick="compute（'+'）知识扩展：无计枕阍的冏K和酊根半他面1匍快卜画一凿松। |33JM—^-1 实现特效课后实战题240常州机电职业技术学院普通类课程教案授课章节2.5用链接代替按钮响应点击事件授课形式讲授+现场教学授课时间第3周周4 （9月15日）第 5_至」 节教学目标知识目标：超链接如何实现像按钮一样的功能。能力目标：编写调用简单的有参数JS函数，用超链接点击实现响应，完成一定功能。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点用超链接实现按钮一样的功能。教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名JavaScript中如何定义和调用有参函数。按钮点击调用函数如何实现？如何用超链接取代按钮？讲述15常州机电职业技术学院普通类课程教案

点击超链接实现按钮功能，改变html的页面背景色。现场教学40新课练习或训练课后小结布置作业函数除了可以在响应事件中被调用之外，还可以在链接中被调用。在<a>标签中的href标记中使用点击超链接实现按钮功能，改变html的页面背景色。现场教学40新课练习或训练课后小结布置作业<ahref="javascript:change('b')">functionchange(color){if(color=="r"){document.bgColor="red";}elseif(color=="b"){document.bgColor="blue";}elseif(color=="g"){document.bgColor="green"}}知识扩展：无把建议购物车的“计算金额”按钮变成超链接看能否实20现相同的效果？15P80常州机电职业技术学院普通类课程教案

授课章节2.6Javascrtp由勺内置函数授课形式现场教学授课时间第—匕周周二_(9月20日)第7至8 节教学目标知识目标：常见函数parseInt()，isNaN()和parseFloat()能力目标：能使用内置函数实现数值转换，获得表单元素。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点能利用内置函数判断输入是否为数值，能将字符串转换为整数或浮点数教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名不带参数的函数，带参数的函数定义，函数调用的注意点如何响应按钮点击事件？超链接可以取代按钮吗？讲述10常州机电职业技术学院普通类课程教案

新课工作任务5编写个人所得税计算器。月收入所得税计算的方式：(月收入-起征额产所得税率。收入多出起征额1000以内，税率为0.05,1000到3000为0・1，以上为0.5。如果输入非数字，弹出错误提示。否则给出结果。1)parseInt()函数该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。语法：parseInt(StringNum,[n])StringNum：需要转换为整型的字符串。n：提供在2〜36之间的数字表示所保存数字的进制数。这个参数在函数中不是必须的。parseFloat()函数该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。语法：parseFloat(StringNum)5面口心口皿：需要转换为浮点型的字符串。isNaN()函数该函数主要用于检验某个值是否为NaN。语法：isNaN(Num)Num：需要验证的数字。如果参数Num为NaN,函数返回值为true；如果参数Num不是NaN,函数返回值为false。isFinite()函数该函数主要用于检验某个表达式是否为无穷大。语法：isFinite(Num)Num：需要验证的数字。如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。现场教学20知识扩展：无练习或训练1谓将入需费列用闰年的年同二计・」实现闰年的判断40课后小结20才iF课后是实战题30常州机电职业技术学院普通类课程教案

授课章节3.1DOM模型3.2windoW寸象编程授课形式现场教学授课时间第4周周」—(9月22日)第5至6 节教学目标知识目标：DOM模型Window对象常用属性和方法能力目标：能使用内置函数实现数值转换，获得表单元素。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点编写调用简单的JS函数，实现广告窗口的弹出教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名函数parseFloat(StringNum)的功能是什么？实现一个四则运算器的基本思路是什么？讲述10常州机电职业技术学院普通类课程教案

新课引入：1)HTML树状结构任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解析为一颗内存树。如图3.2所示。这颗树是由一个一个的节点构成的。其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文本节点。2)节点和节点的引用在DOM中，每个对象都称为一个节点。DOM对象模型浏览器对象是一个分层结构，也称为文档对象模型。window对象编程打开页面，先看到浏览器窗口，即window窗口，window对象指的是浏览器本身。其次就是我们看到」的网页文档内容，即document文档。它包含一个最主要的内容表单。假设myform表单中有一个文本框text1，定位次文本框时，就应该从上到下定位：window.document.myform.text1因为window对象是所有页面内容的根节点，所以可以省略document.myf0rm.text1浏览器对象结构中除了document文档对象，还有location和historyo现场教学40知识扩展：无练习或训练工作任务2页面加载时弹出广告页面。20课后小结20布置位课后实战题10常州机电职业技术学院普通类课程教案

授课章节3.2.3 动态秒表授课形式讲授授课时间第5周周_2—(9月27日)第7至8节教学目标知识目标：全局变量的使用onLoad事件响应setTimeout定时函数能力目标：能使用setTimeout()方法实现定时特效。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点全局变量的使用，setTimeout()方法应用。教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名回顾简述DOM的基本概念。页面加载时弹出广告页面的主要步骤。讲述10常州机电职业技术学院普通类课程教案

新课全局变量和局部变量的概念onLoad事件是“页面加载完成”事件，当页面加载完了之后发生此事件，如果想要在打开网页的时候就调用JavaScript函数，可以响应此事件。setTimeout("函数"，毫秒数)可以设置定时器：经过指定毫秒值后执行某个函数。我们可以利用它实现一个每1秒就递增的秒表。vart=1;functiontick()(document.form1.tick.value=t;t++;setTimeout('tick()',1000);)<bodyonload="tick()”>现场教学40知识扩展：无练习或训练实现网页颜色每过一秒钟就变一种颜色，总共5种颜色。使用onLoad事件和setTimeout方法。20课后小结15布置位课后实战题25常州机电职业技术学院普通类课程教案

授课章节3.3document对象编程document对象常用属性和方法3.3.2漂浮广告制作授课形式现场教学授课时间第呃—周周上—（9月29日） 第」—至」 节教学目标知识目标：document对象的常用属性和方法能力目标：能document提供的方法实现特效。素质目标：能根据功能分析出编程步骤，并在规定实践完成。教学重点Document.getElementsByName()获得控件数组的概念教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入组织教学，点名onLoad事件是什么事件？setTimeout（»法的目的是实现什么功能？简述动态秒表的实现步骤。讲述10常州机电职业技术学院普通类课程教案

新课document对象编程document对象常用属性和方法表3.3document常用属性现场教学20名称说明bgColor设置或检索Document对象的背景色常用方法document对象常用方法如表3.4所示。表3.4document常用方法名称说明getElementByID()getElementsByName()根据HTML兀素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能)漂浮广告制作布局：在页面中插入层，z轴设为1，然后在层中插入图片。编写脚本：使用getElementByID()方法获取层对象，捕获鼠标滚动事件，改变层对象的位置坐标。常见的页面坐标的介绍,如表3.5所示：表3.5常见页面坐标top:pixelTop:left:scrolltop:指定兀素的上边界位置。设置或返回兀素的上边界。指定元素的左边界位置。页面滚动的高度知识扩展：无练习或训练设计会漂浮的广告页面。40课后小结20布置位课后实战题30常州机电职业技术学院普通类课程教案

授课章节3.4history对象和LOCATION对象授课形式现场教学授课时间第一周周 （月日）第 至—节教学目标实现有返回，前进，刷新功能的页面教学重点history对象和location对象的属性和方法教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入Document对象的属性和方法有哪些？漂浮广告制作的步骤使用网页上的前进后退效果时间分讲述10常州机电职业技术学院普通类课程教案

新课history>location对象常用属性和方法history常用方法history对象常用方法如表3.6所示表3.6history对象常用方法现场教学40名称说明back()forward()go("url"ornumber)加载History列表中的上一个URL。加载History列表中的下一个URL。加载History列表中的一个URL，或要求浏览器移动指定的页面数。back()方法相当于后退按钮forward()方法相当于前进按钮go⑴代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；location常用属性location对象常用属性如表3.7所示。表3.7location对象常用属性名称说明hosthostnamehref设置或检索位置或URL的主机名和端口号设置或检索位置或URL的主机名部分设置或检索完整的URL字符串location常用方法location对象常用方法如表3.8所示。表3.8location对象常用方法名称说明assign("url")reload()replace("url")加载URL指定的新的HTML文档。重新加载当前页通过加载URL指定的文档来替换当前文档知识扩展：无练习或训练前进后退实现20课后小结Location的属性和方法History的属性和方法20布置位课后实战提40常州机电职业技术学院普通类课程教案

授课章节第四章内置对象什么是对象Date对象编程—显示日期、动态时钟授课形式讲授授课时间第一周周一（月日）第 至 节教学目标了解什么叫对象会使用Date对象实现动态时钟教学重点Date对象的使用教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入什么是对象网页上的动态时钟如何实现？讲述10常州机电职业技术学院普通类课程教案

新课什么是对象创建和删除对象对象的属性和方法Date对象编程一显示日期、动态时钟工作任务1实现当前的日期和时间：5月13日13时45分51秒。工作任务2实现动态时钟Date的属性和方法方法组Date对象方法组如表4.1所示。表4.1Date对象方法组现场教学40方法分组说明setXxxgetXxx这些方法用于设置时间和日期值这些方法用于获取时间和日期值知识扩展：无练习或训练制作动态时钟特效20课后小结对象是什么Date对象的属性和方法20布置位无0常州机电职业技术学院普通类课程教案

授课章节4.3 String对象String对象的常用属性和方法对电子邮箱的格式进行验证授课形式现场教学授课时间第 周周 （月日）第 至 节教学目标掌握String对象的常用属性和方法使用String对象实现电子邮箱格式验证教学重点掌握String对象的常用属性和方法教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段时间分配导入常见的电子邮箱验证存在哪些验证内容？讲述10常州机电职业技术学院普通类课程教案String对象工作任务3验证用户信息。如图4.1所示。现场教学40您的电子照件亡…皿4■必埴注卅String对象的常用属性和方法名称说明String对象工作任务3验证用户信息。如图4.1所示。现场教学40您的电子照件亡…皿4■必埴注卅String对象的常用属性和方法名称说明属length获取字符串字性符的个数方indexOf(“子字符串”，起始位查找子字符串法置)的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2)求子串toLowerCase()将字符串转换成小写toUpperCase()将字符串转换成大写表4.3String对象常用方法属性知识扩展：无练制作电子邮件简单验证特效习或20课后小结String对象的属性方法如何验证字符串中是否存在@字符?15布置作业常州机电职业技术学院普通类课程教案授课章节4.4Math对象Math常用方法 4.4.2随机产生4位验证码授课形式讲授授课时间第 周周 （月日）第 至—节教学目标♦SMath常用方法会利用Math产生四位验证码教学重点会利用Math产生四位验证码教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入如何验证字符串中是否存在@字符？网页中登陆功能除了使用用户名和密码，往往还要输入验证码。我们可以用JavaScript来模拟随机数的产生吗？时间讲述10常州机电职业技术学院普通类课程教案

现场教学40Math现场教学40工作任务4随机出现四位验证码，如图4.2所示。5013匚二堂期朝4恒要避谑码.j图4.2工作任务4运行结果Math常用方法新课名称说明abs方法acos方法asin方法atan方法atan2方法ceil方法cos方法exp方法floor方法log方法max方法min方法pow方法random方法round方法sin方法sqrt方法tan方法计算指定参数的绝对值返回指定参数的反余弦值返回指定参数的反正弦值返回指定参数的反正切值根据指定的坐标返回一个弧度值返回大于或等于指定参数的最小整数计算指定参数的余弦值以e为基数的指数函数返回小于或等于指定参数的最大整数以e为基数的自然对数返回两个或多个参数中的最大值返回两个或多个参数中的最小值幕运算产生0到1之间的随机数取整运算计算指定参数的正弦值开平方运算计算指定参数的正切值补充练习或训练产生四位随即码20课后小结Math对象的常用方法5常州机电职业技术学院普通类课程教案

授课章节4.5Array对象一维数组杳看课程介绍二维数组二维数组输出学生的成绩表。二维数组实现级联菜单授课形式现场教学授课时间第 周周 （月日）第 至 节教学目标掌握Array对象的常用方法一维数组和二维数组的初始化和遍历教学重点一维数组和二维数组的初始化和遍历教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法导入Math对象的常用方法一维数组是如何定义和使用的手讲述10常州机电职业技术学院普通类课程教案

现场教学20Array现场教学20工作任务5请选择课程J皿武似务实,请选择课程J皿武似务实,这里将为您介绍课程一维数组可以把数组看作一个单行表格，该表格的每一个单元格中都可以存储一个数据，而且各单元格中存储的数据类型可以不同，这些单元格被称为数组元素。每个数组元素都有一个索引号，通过索引号可以方便地引用数组元素。数组JavaScript中唯一用来存储和操作有序数据集的数据结构。二维数组工作任务6考试申请考试申请考试申请学期第一学期丁学期第二学期▼学期第二学年▼课程Jwa ▼t累程JavaScript▼课程StrutstJavaScript■...SqlSumcr基础SqlServer高线ASP.WETC#.WETAjasHTMLJSFSpring：图4.4工作任务6运行结果知识扩展：无练习或训课程介绍和选课级联菜单练习或训课程介绍和选课级联菜单掌握Array对象的常用方法课后小结一维数组和二维数组的初始化和遍历课后小结常州机电职业技术学院普通类课程教案

授课章节第五章常用事件什么是事件事件处理程序的调用键盘鼠标事件按下按钮随机改变页面的背景颜色授课形式现场教学授课时间/Q、///、1 1■。第一周周 （月日）第 至—节教学目标了解事件的概念掌握事件调用函数的机制掌握键盘事件教学重点掌握键盘事件教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入复习掌握Array对象的常用方法一维数组和二维数组的初始化和遍历引导第一章学习的四则运算计算器响应的是什么时事件时间讲述10常州机电职业技术学院普通类课程教案

新课什么是事件事件是用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如鼠标点击或按键，它可以触发与这个事件相关联的JavaScript对象，这些对象称为事件处理程序。事件处理是一项重要技术，它包含了用户与页面的所有交互。事件处理程序的调用在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序，键盘鼠标事件现场教学20事件描述onClickonDblClickonMouseDownonMouseUponMouseOveronMouseOutonKeyPressonKeyDownonKeyUp鼠标点击事件，多用在某个对象控制的范围内的鼠标点击鼠标双击事件鼠标上的按钮被按下了鼠标按下后，松开时激发的事件当鼠标移动到某对象范围的上方时触发的事件当鼠标离开某对象范围时触发的事件当键盘上的某个键被按下并且释放时触发的事件.［注意：页面内必须有被聚焦的对象］当键盘上某个按键被按下时触发的事件［注意:页面内必须有被聚焦的对象］当键盘上某个按键被按放开时触发的事件［注意:页面内必须有被聚焦的对象］知识扩展：无练练或训按下按钮随机改变页面的背景颜色40课后小结了解事件的概念掌握事件调用函数的机制掌握键盘事件10布业置作无0常州机电职业技术学院普通类课程教案

授课章节鼠标按下改变链接的颜色鼠标的移入移出改变图片的隹点八\、八、、鼠标移动事件获取鼠标的坐标授课形式讲授授课时间第一周周一（月日）第 至 节教学目标知识目标：了解键盘鼠标事件技能目标：实现键盘鼠标事件的特效素质目标：在商业网站上能找到键盘鼠标事件特效教学重点实现键盘鼠标事件的特效教学难点无。补充内容无教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入了解事件的概念掌握事件调用函数的机制掌握键盘事件时间讲述10常州机电职业技术学院普通类课程教案

新课工作任务2用onmousedown和onmouseup事件将文本制作成类似于<a>（超链接）标记的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜色，并弹出一个空页（可以链接任意网页）。鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。工作任务3鼠标在图片上移入或移出时，动态改变图片的焦点，主要是用onmouseover和onmouseout事件来兀成鼠标的移入和移出动作。工作任务4鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置，也就是（x,y）值。键盘控制小鱼游泳实现上下左右键控制鱼上下左右游动。Document的onkeydown事件可以记录键盘上按键的ASCII码。普通键盘上下左右键对应87，83，65，68。根据键值修改fish距离页面上下左右的距离。现场教学20知识扩展：无练练或训课堂练习3.440课后小结键盘鼠标事件中常用的有哪些？意义？如何实现记录鼠标坐标？Event是什么？15布置位5常州机电职业技术学院普通类课程教案

授课章节5.4 页面相关事件5.4.1 可以改变大小的图像授课形式现场教学5.4.2一直出现在屏幕两侧的漂浮广告授课时间第 周周 （月日）第 至 节教学目标知识目标：了解页面相关事件技能目标：实现页面事件的特效素质目标：在商业网站上能找到页面事件特效教学重点实现页面事件的特效教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入键盘鼠标事件中常用的有哪些？意义？如何实现记录鼠标坐标？Event是什么？时间讲述10常州机电职业技术学院普通类课程教案

新课页面相关事件：事件」描述F 现场0nAhort.t图片在下毒时被用户中断.， 教学onBefjreUnlomd.】当前页面的内存捋要披皿时油发的事伴’ 20onError.n楠抓当前页面因打某种原因而出现的辎误，如脚本辎误包外部整据引用的错误cinLoad.!页面内空充成传送到谢宛翳时帔发的事件,包括畀部交件引人光成onMo^fe!j浏览耨的窿口掖杼劲则用!发的车件onElesiEe.1当浏览翳的窗口式小被山变时池发的事件onScroll.T浏帘繇曲液晶蔡柯啬寿比磁北忖轴游的事祚0nStop.r浏览翳的伸止按缸掖按下时触发的事件或梢正在下戴的文件掖中断onUiiload.T当前页面海掖改变时触发的事传工作任务6实现图片的大小改变。当鼠标没有关注此图片时为小图，鼠标进入图片区域变为大图。工作任务7浏览览器的滚动条位置发生变化时，讨厌的广告图跟随飘动知识扩展：无川练练习或课堂练习1—340课后小结漂浮广告实现的步骤？20业布置无0常州机电职业技术学院普通类课程教案

授课章节5.5表单事件 5.5.1文本框获得焦点变色授课形式讲授授课时间第 周周一（月日）第 至 节教学目标知识目标：了解表单相关事件技能目标：实现表单事件的特效素质目标：在商业网站上能找到表单事件特效教学重点实现表单事件的特效教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入制作漂浮广告的布局使用什么容器？响应的是什么事件？Style是表示什么属性？时间讲述10常州机电职业技术学院普通类课程教案表单事件耳件」描述一耳件」描述一&nBlur.i当的r三去免去臼.占住妇登的李什：及后身建专的的女的可：.711cL,皿炉.1当的三索臭之甯点并且三发的才称整生出变下粗浅区字件［配而三弟盅狗触发均可］□nF。-i三果十元案更得华；.时后及肚年件，3nE.e5et.T当去用中定ESET的愕咬社患及归目发的奉件」□nSubmit1一卜茎聿褴连至心抬当的事斗，现场教学40新课•工作任务8•新课•工作任务8•在登录网站时，在填写某个文本框的时候，该框会变色，等填写完了又变回原样，是如何实现的？用户名二密科二真实姓名二性别：邮箱：知识扩展：无或训课后小结布置作业练课堂练习8习表单事件常用的有哪些?或训课后小结布置作业练课堂练习8习表单事件常用的有哪些?2015常州机电职业技术学院普通类课程教案授课章节5.6编辑事件动态修改文本的样式支持原创杜绝Coqv支持原创杜绝黏贴授课形式现场教学授课时间第 周周 （11月13日）第 至 节教学目标知识目标：了解编辑相关事件技能目标：实现编辑事件的特效素质目标：在商业网站上能找到编辑事件特效教学重点实现编辑事件的特效教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入表单事件常用的有哪些？如何实现表单验证的提示颜色？时间讲述10常州机电职业技术学院普通类课程教案课后小结布置作业动态修改文本的样式工作任务9 现场当列表菜单中的值发生改变时，文本域中的字体大小和字体颜色教学发生改变 20诂看这边课后小结布置作业动态修改文本的样式工作任务9 现场当列表菜单中的值发生改变时，文本域中的字体大小和字体颜色教学发生改变 20诂看这边字体大小和号▼字体颜色S3工作任务10不允许复制。有些成果是自己辛苦写出来，想与别人共享却不愿被窃取，怎么办呢？剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序，剪切事件有onbeforecut和oncut两个事件，onbeforecut事件是当页面中的一部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序，oncut事件是当页面中被选择的内容被剪切时触发事件处理程序。工作任务11老师布置了一篇作业在网上完成，怎么样防止学生都是黏贴来的呢？知识扩展：无练任务10,11为或编辑事件中比较常见的有哪些？如何实现防止拷贝和黏贴的网页?4020常州机电职业技术学院普通类课程教案授课章节第八章CSS样式表css样式表基石础常用样式授课形式讲授授课时间第 周周 （月日）第 至 节教学目标知识目标：样式表基础和常用样式技能目标：实现网页细边框和图片按钮素质目标：在商业网站上能找到相关特效教学重点实现网页细边框和图片按钮教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入在网页上找到细边框的文本框，没有下划线的超链接和图片按钮。查找CSS的相关资讯。了解CSS的几种形式。时间讲述10常州机电职业技术学院普通类课程教案

新课css样式表基础样式定义的格式定义CSS的语句形式如下：语法selector{property:value;property:value;…}SELECTOR：选择符。PROPERTY：就是那些将要被修改的属性，例如color。VALUE：PROPERTY的值，比如color的属性值可以是red。样式表位置分类1）嵌入样式表2）链接外部样式表3）引入外部的样式表4）内嵌样式常用样式文本属性css改变超链接字体大小工作任务1改变超链接的字体大小。工作任务2实现如下图的样式：细边框样式、图片按钮样式、超链接样式。现场教学20知识扩展：无练习或训练课堂练习1，240课后小如何实现网页上的细边框特效，图片按钮特效和超链接特效？20布置位无0常州机电职业技术学院普通类课程教案

授课章节6.3 层的显示隐藏效果点击按钮隐藏显示层授课形式现场教学6.3.2用层和超链接动态获得地址授课时间第 周周一（月日）第 至 节教学目标知识目标：层的运用技能目标：实现层的显示和隐藏素质目标：在商业网站上能找到相关特效教学重点实现层的显示和隐藏教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入如何实现网页上的细边框特效，图片按钮特效和超链接特效？时间10分钟常州机电职业技术学院普通类课程教案

新课层的显示隐藏效果参数值 描述block 默认值。按块显示，换行显示.用该值为对象之后添加新行none 不显示，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。inline 按行显示，和其他元素同一行显示。显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏。点击按钮隐藏/显示层工作任务4实现如下特效，按按钮打开层和关闭层。工作任务5实现如下图的特效。点击地点选择按钮，出现选择卡，点击“广州”，卡片消失，按钮值变成“广州”。20分钟［快速图索器 i电点：睡■■懒躁 运树肺猊GT 盘插/愉、 二BJK 蹒恻 一，知识扩展：无练习或训练阶段练习4,540分钟课后小对编程共性问题进行讲解层有哪几种常用的显示方式？15分钟布置位5分钟常州机电职业技术学院普通类课程教案

授课章节实现树形菜单授课形式现场教学授课时间第 周周 （月日）第 至—节教学目标知识目标：层的运用技能目标：实现层的显示和隐藏素质目标：在商业网站上能找到相关特效教学重点用表格的线显示属性实现树状菜单教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入层的现实方式有几种？这些方式适用于哪些网页元素？时间分10分钟常州机电职业技术学院普通类课程教案

新课工作任务6实现如下图的树形菜单：如图6.6所示。现场教学20分钟我要买我要卖我的店铺仓库里的宝贝出售的宝贝我要买我的收藏我的帐户我的购物车我要卖我的店铺仓库里的宝贝出售的宝贝display适用于所有HTML标签。本题直接在table中使用该属性，实现下级菜单的显示和隐藏。知识扩展：无练习或训练阶段练习640分钟课后小编程共性问题讲解。树形菜单适用什么实现的？为什么这里没有用到层呢？15分钟布置位5分钟常州机电职业技术学院普通类课程教案

授课章节6.3.4 卡片切换特效授课形式现场教学授课时间第 周周一（月日）第 至—节教学目标知识目标：图片的运用技能目标：实现图片的显示和隐藏素质目标：在商业网站上能找到相关特效教学重点实现图片的显示和隐藏教学难点无。补充内容无。教学场地及教具使用机房电脑dreamweaverMX2004教学过程方法手段导入树形菜单适用什么实现的？为什么这里没有用到层呢？display适用于所有HTML标签。时间分10分钟常州机电职业技术学院普通类课程教案工作任务7可以使用DIV中插入图片来实现，但更简洁的办法是直接使用图片的display属性访问图片Img对象的方法：现场教学20分钟工作任务7可以使用DIV中插入图片来实现，但更简洁的办法是直接使用图片的display属性访问图片Img对象的方法：现场教学20分钟document.getElementByld（"图片ID"）首先用表格布局如图6.8的这6张主要的图。使4个小图按照“游戏点卡