情境一任务使用JS制作网页特效课件

,*,Click To Edit Title Style,*,*,Click To Edit Title Style,Click To Edit Title Style,*,LOGO,COMPANY LOGOTYPE INSERT,Click To Edit Title Style,*,Click To Edit Title Style,*,LOGO,COMPANY LOGOTYPE INSERT,情境,1,：,Web,前台页面设计,任务,5,：使用,JS,制作网页特效,主 讲：刘晓知,WEB,应 用 开 发,主 要 内 容,JavaScript,语法,1,浏览器对象模型（,BOM,）,2,文档对象模型（,DOM,）,3,学习目标,知识目标：,掌握,JavaScript,基础知识,能力目标：,能够使用,JavaScript,制作简单的网页特效,技术应用的背景,JavaScript,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端,Web,开发的脚本语言，常用来给,HTML,网页添加动态功能，响应用户的各种操作，如网页中动态的特效、表单验证等。,一、任务,1-5,任务描述：制作选项卡,当鼠标滑过标题时，显示相应栏目的内容。,效果如图所示：,二、,JavaScript,概述,1.JavaScript,概述,浏览器端的编程语言，可以动态地生成和控制,HTML,元素，可以嵌入到网页中。,JavaScript,的运行环境是浏览器而非,Web,服务器，因此，它的功能是受浏览器限制的。,JavaScript,的主要功能是：动态操控网页上的,HTML,元素，控制浏览器完成一些工作。,JavaScript,语法与,C,比较类似，但有许多很特殊的地方。,注意：,JavaScript,不是,Java,！,二、,JavaScript,概述（续）,2.,在,HTML,中使用,JavaScript,方式一：使用,script,标签,方式二：在窗体控件的事件属性中直接输入简短的,JavaScript,脚本代码,方式三：使用外部,JavaScript,文件,JavaScript,代码,JavaScript,脚本代码,外部,JavaScript,文件，扩展名为,.js,二、,JavaScript,概述（续）,3.JavaScript,代码解析,浏览器是以一种流的方式从上到下读入,HTML,网页中的内容，当它发现,标签时，根据其,type,属性决定将如何解析脚本程序。,要点：,函数必须先定义后使用。,函数定义好之后，并不会自动执行，必须有一个明确的调用语句。,被调用的函数其定义必须放在调用语句前面。,只有事件激发以后，相应的代码才被调用。,事件响应基于最基本的函数调用,三、,JavaScript,语法,1.,变量,不必声明直接使用,定义变量时不需要指定变量类型,变量类型运行时可变,五种基本数据类型,string,：字串类型，以双引号或单引号界定,number,：数字类型，既可以保存,32,位的整数，也可保存,64,位的浮点数,boolean,：布尔类型，只有两个值：,true,和,false,object,：引用类型，通常用来引用对象，比如保存网页上的文本框等控件的变量，其类型就是,object,undefined,：当一个变量未初始化时，其值就是,undefined,三、,JavaScript,语法（续）,2.,变量作用域,只有两种作用域：全局和局部,var global;/,全局变量,function f(),var local;/,局部变量,注意：当有多个,JavaScript,文件时，要注意变量的同名问题。,三、,JavaScript,语法（续）,3.,基本流程控制,顺序结构,分支结构,循环结构,三、,JavaScript,语法（续）,4.JavaScript,函数,使用,function,关键字定义,JavaScript,函数,/,方式,1,：命名函数,function f(),alert(“Hello,World!”);,/,方式,2,：匿名函数,var f=function (),alert(“Hello,World!”);,与众不同之处：函数是一个对象,三、,JavaScript,语法（续）,5.JavaScript,对象,两种方式创建,JavaScript,对象：,1.,字面量法：,var point=x:0,y:0;,2.,直接创建,Object,类的对象实例，然后给其再添加属性和方法：,var point=new Object();,point.x=100;,point.y=200;,alert(point.x);,JavaScript,对象的特点,其属性与方法可以动态地增加和删除,三、,JavaScript,语法（续）,6.this,关键字,this,关键字用于引用执行此代码的对象自身,四、浏览器对象模型（,BOM,）,浏览器对象模型,BOM,用于访问与操纵浏览器窗口。,访问,BOM,中的对象,（,1,）访问,window,对象,直接使用标识符,window,（,2,）访问下层对象,与访问对象的一般属性相同：,window.document.write(Hello);,直接访问,document.write(Hello);,四、浏览器对象模型（,BOM,）（续）,2.,操控浏览器,通过浏览器对象模型，可以写代码操控浏览器,使用,window,对象开新窗口访问网站,获取网页当前,URL,的相关信息,使用,Timer,对象实现网页定时刷新,五、文档对象模型（,DOM,）,1.,文档对象模型,DOM,DOM,（文档对象模型）是一个表示和处理文档的应用程序接口（,API,），可用于动态访问、更新文档的内容、结构和样式。,五、文档对象模型（,DOM,）（续）,2.DOM,编程模型,浏览器将整个,HTML,网页解析为一棵,DOM,树。,每个,HTML,元素都对应着,DOM,树中的一个节点。,通过,JavaScript,可以访问这棵,DOM,树中的任意一个节点，并且可以修改它（比如给其增加一个子节点）。,节点被修改，意味着,HTML,文档本身发生了变化，从而导致网页显示内容的变化。,根据这个原理，,JavaScript,就拥了强大而灵活的网页元素操控能力！,五、文档对象模型（,DOM,）（续）,3.,访问,DOM,根节点和,body,元素,DOM,树的起点是,document,节点，浏览器对象模型中的,window.document.documentElement,可以访问它,window.document.body,可访问,body,元素。,五、文档对象模型（,DOM,）（续）,4.DOM,规定所有,DOM,树节点都有以下三个属性：,nodeName,：节点的名称,nodeValue,：节点的值,nodeType,：节点类型,从,document,节点开始，可以通过,nodeName,和,nodeType,来查找特定的节点，通过,nodeValue,来获取它的值。,五、文档对象模型（,DOM,）（续）,5.,通过,DOM,标准方法访问特定元素,getElementById(id),返回元素，类似,document.all.item(id),IE,允许直接使用,ID,标识符访问,id,元素,getElementsByName(name),返回集合，类似,document.all.item(name),getElementsByTagName(tag),返回集合，等同于,document.all.tags(tag),五、文档对象模型（,DOM,）（续）,5.,通过,DOM,标准方法访问特定元素（续）,HTML DOM,规定了一组标准的属性，比如,parenetNode,、,childNodes,等，对于任何一个,HTML,元素，都可以根据这些属性在,DOM,树中找到特定的元素节点。,一般情况下，通常需要先得到待访问元素的父元素节点，然后再通过其,childNodes,子节点索引,，或,firstChild,以及,lastChild,属性来访问此节点。,五、文档对象模型（,DOM,）（续）,6.,通过,DOM,标准方法操纵,HTML DOM,对象,通过修改,HTML DOM,对象，可以动态改变页面元素的属性,通过添加、删除、替换、复制,HTML DOM,，就可以为页面动态添加、删除、替换、复制相应的页面元素,六、任务实施,1.,任务分析,其中一个选项的内容,选项卡标题，当鼠标 单击或者滑过时，显示当前选项的内容，同时隐藏其他选项的内容。,六、任务实施,2.,搭建选项卡,HTML,结构,常见选项卡的制作,新闻,军事,体育,财经,劳教改革方案将审议,二炮专家,:,中国反导初具战力,英媒爆炒小贝投阿森纳,春运退票翻番,:1,日退,46,万张,六、任务实施,3.,链接,CSS,样式,4.,CSS,样式代码,body,ul,li margin:10px;padding:0;font-size:12px;,#tab float:left;width:380px;line-height:normal;margin:0;,padding:10px 10px 0 0px;list-style:none;,#tab li margin:0;float:left;font-size:14px;font-weight:bold;,background:url(./images/tableft1.gif)no-repeat left top;,padding:0 0 0 2px;text-decoration:none;,#tab span float:left;display:block;text-align:center;,background:url(./images/tabright1.gif)no-repeat 100%-42px;,padding:7px 0px 4px 0px;width:75px;color:#627EB7;,六、任务实施,#tab span a text-decoration:none,#tab li.active background-position:0%-42px;,#tab li.active span background-position:right top;color:#627EB7;,#box div width:285px;height:200px;padding:10px;,border-left:#BCD2E6 1px solid;border-bottom:#BCD2E6 1px solid;,border-right:#BCD2E6 1px solid;clear:both;display:none,#box.show display:block;,4.,CSS,样式代码（续）,5.,效果如图所示,六、任务实施,6.,链接外部,JavaScript,文件,var oBox=document.getElementById(box);,var oTab=document.getElementById(tab);,var aBtn=oTab.getElementsByTagName(li);,var aDiv=oBox.getElementsByTagName(div);,var iNum=0;,7.,查找页面中的元素,六、任务实施,for(var i=0;iaBtn.length;i+),aBtni.index=i;,aBtni.onmouseover=fn1;,8.,为每一个选项添加,onmouseover,事件，并调用,fn1,函数,function fn1(),aBtniNum.className=;,aDiviNum.className=;,this.className=active;,aDivthis.index.className=show;,iNum=thi