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

1、情境情境1 1：WebWeb前台页面设计前台页面设计任务5：使用JS制作网页特效主 讲：刘晓知WEB 应 用 开 发主 要 内 容JavaScript语法1 1浏览器对象模型（BOM）2 2文档对象模型（DOM）3 3学习目标学习目标知识目标：知识目标：掌握JavaScript基础知识能力目标：能力目标：能够使用JavaScript制作简单的网页特效技术应用的背景技术应用的背景JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作，如网页中动态的特效、表单验证等。一、任务

2、一、任务1-51-5任务描述：制作选项卡任务描述：制作选项卡当鼠标滑过标题时，显示相应栏目的内容。效果如图所示：二、JavaScript概述1.JavaScript1.JavaScript概述概述浏览器端的编程语言，可以动态地生成和控制HTML元素，可以嵌入到网页中。JavaScript的运行环境是浏览器而非Web服务器，因此，它的功能是受浏览器限制的。JavaScript的主要功能是：动态操控网页上的HTML元素，控制浏览器完成一些工作。JavaScript语法与C比较类似，但有许多很特殊的地方。注意：JavaScript不是Java！二、JavaScript概述（续）2.在在HTML中使用

3、中使用JavaScript方式一：使用script标签方式二：在窗体控件的事件属性中直接输入简短的JavaScript脚本代码方式三：使用外部JavaScript文件 JavaScript代代码码 JavaScript脚本代码 外部JavaScript文件，扩展名为.js二、JavaScript概述（续）3.JavaScript代码解析代码解析浏览器是以一种流的方式从上到下读入HTML网页中的内容，当它发现标签时，根据其type属性决定将如何解析脚本程序。要点：函数必须先定义后使用。函数定义好之后，并不会自动执行，必须有一个明确的调用语句。被调用的函数其定义必须放在调用语句前面。只有事件激发以

4、后，相应的代码才被调用。事件响应基于最基本的函数调用三、JavaScript语法1.变量变量不必声明直接使用定义变量时不需要指定变量类型变量类型运行时可变五种基本数据类型五种基本数据类型1.string：字串类型，以双引号或单引号界定2.number：数字类型，既可以保存32位的整数，也可保存64位的浮点数3.boolean：布尔类型，只有两个值：true和false4.object：引用类型，通常用来引用对象，比如保存网页上的文本框等控件的变量，其类型就是object5.undefined：当一个变量未初始化时，其值就是undefined三、JavaScript语法（续）2.变量作用域变量作

5、用域 只有两种作用域：全局和局部 var global;/全局全局变变量量 function f()var local;/局部局部变变量量 注意：当有多个注意：当有多个JavaScript文件时，要注意变量的同名问题。文件时，要注意变量的同名问题。三、JavaScript语法（续）3.3.基本流程控制基本流程控制顺序结构分支结构循环结构三、JavaScript语法（续）4.JavaScript函数函数 使用function关键字定义JavaScript函数/方式1：命名函数function f()alert(“Hello,World!”);/方式2：匿名函数var f=function ()a

6、lert(“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关键字用于引用执行此代码的对象自身 四、浏览器对象模型（BO

7、M）浏览器对象模型BOM用于访问与操纵浏览器窗口。1.访问 BOM 中的对象（1）访问 window 对象直接使用标识符 window（2）访问下层对象与访问对象的一般属性相同：window.document.write(Hello);直接访问 document.write(Hello);四、浏览器对象模型（BOM）（续）2.操控浏览器操控浏览器 通过浏览器对象模型，可以写代码操控浏览器 使用window对象开新窗口访问网站 获取网页当前URL的相关信息 使用Timer对象实现网页定时刷新五、文档对象模型（DOM）1.文档对象模型文档对象模型DOMDOM（文档对象模型）是一个表示和处理文档的应

8、用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。五、文档对象模型（DOM）（续）2.DOM编程模型编程模型浏览器将整个HTML网页解析为一棵DOM树。每个HTML元素都对应着DOM树中的一个节点。通过JavaScript可以访问这棵DOM树中的任意一个节点，并且可以修改它（比如给其增加一个子节点）。节点被修改，意味着HTML文档本身发生了变化，从而导致网页显示内容的变化。根据这个原理，JavaScript就拥了强大而灵活的网页元素操控能力！五、文档对象模型（DOM）（续）3.访问访问DOM根节点和根节点和body元素元素 DOM树的起点是document节点，浏览器对象模型中

9、的window.document.documentElement可以访问它 window.document.body可访问body元素。五、文档对象模型（DOM）（续）4.DOM规定所有规定所有DOM树节点都有以下三个属性：树节点都有以下三个属性：nodeName：节点的名称nodeValue：节点的值nodeType：节点类型从document节点开始，可以通过nodeName和nodeType来查找特定的节点，通过nodeValue来获取它的值。五、文档对象模型（DOM）（续）5.通过通过DOM标准方法访问特定元素标准方法访问特定元素 getElementById(id)返回元素，类似 d

10、ocument.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树中找到特定的元素节点。一般情况下，通常需要先

11、得到待访问元素的父元素节点，然后再通过其childNodes 子节点索引子节点索引，或firstChild以及lastChild属性来访问此节点。五、文档对象模型（DOM）（续）6.通过通过DOM标准方法操纵标准方法操纵 HTML DOM 对象对象通过修改 HTML DOM 对象，可以动态改变页面元素的属性通过添加、删除、替换、复制 HTML DOM，就可以为页面动态添加、删除、替换、复制相应的页面元素六、任务实施1.任务分析其中一个选项的内容选项卡标题，当鼠标 单击或者滑过时，显示当前选项的内容，同时隐藏其他选项的内容。六、任务实施2.搭建选项卡HTML结构常常见选项见选项卡的制作卡的制作新

12、新闻闻军军事事体育体育财经财经劳教劳教改革方案改革方案将审议将审议二炮二炮专专家家:中中国国反反导导初具初具战战力力英媒爆炒小英媒爆炒小贝贝投阿森投阿森纳纳 春春运运退票翻番退票翻番: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;f

13、ont-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 spa

14、n 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.s

15、how 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.onmouseo

16、ver=fn1;8.为每一个选项添加onmouseover事件，并调用fn1函数function fn1()aBtniNum.className=;aDiviNum.className=;this.className=active;aDivthis.index.className=show;iNum=this.index;9.编写fn1函数，完成当鼠标移到选项卡上里，显示相应内容，其他选项卡中的内容隐藏。六、任务实施window.onload=function()var oBox=document.getElementById(box);var oTab=document.getElement

17、ById(tab);var aBtn=oTab.getElementsByTagName(li);var aDiv=oBox.getElementsByTagName(div);var iNum=0;for(var i=0;iaBtn.length;i+)aBtni.index=i;aBtni.onmouseover=fn1;function fn1()aBtniNum.className=;aDiviNum.className=;this.className=active;aDivthis.index.className=show;iNum=this.index;10.设置当页面加载完成后执行，将所有内容放入window.onload=function()之中，完整代码如下所示：七、小结 本次课主要介绍JavaScript语法、浏览器对象模型（BOM）、文档对象模型（DOM），能在理解的基础上进行灵活运用，设计与制作用以增加网站视觉效果的动态特效。八、作业 使用使用JavaScritp设计与制作一个图片特效设计与制作一个图片特效