《WEB前端开发实战》课件 任务六：选项卡特效制作

项目二JavaScript网页特效制作主讲：陈倩htmlh5imgjavascriptwebcsscolorhr任务一

选项卡特效制作目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr任务情境在当前网络无处不在的信息化时代，当我们浏览一些网页时，会发现有很多文章或图片会不停地进行各种各样的变化，这使得网站更加的生动和活泼，这些动画的效果很大程度是由JavaScript控制的。JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，直接嵌入到HTML页面中，把静态页面转变成支持用户交互并响应事件的动态页面。JavaScript在网页中常用于读写HTML元素、嵌入动态文本、动态修改CSS样式表、对浏览器事件做出响应、表单数据验证、检测访客的浏览器信息等等。工作任务单工作任务单任务要求在古迹页面中“新闻聚焦”栏目基础上制作“通知公告”栏目，并为其添加选项卡切换效果甲方提供的设计图

如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能掌握JavaScript基础语言、函数、DOM的功能技能大赛考核要求1.创建符合并通过W3C标准验证的代码（HTML5，CSS3）2.能创建JavaScript代码，实现选项卡切换效果，增强网站功能性3.JavaScript代码具有模块化和可重用性作品提交要求站点文件夹评判标准1.能正确运用HTML标签、CSS样式和JavaScript相关知识实现设计图效果2.代码编写符合W3C标准验证3.JavaScript语法使用正确，具有可重用性切换前：切换后：任务目标任务目标能够掌握变量的命名规则和声明方法。能够掌握函数的声明和调用方法。了解常用的HTML事件，掌握事件的使用方法。了解DOM模型的概念，掌握运用DOM访问节点，改变节点属性的方法。任务描述

选项卡也可以简称为Tab，它是将不同的内容重叠放置在某一布局区块内，在重叠的内容区里每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请示显示该层内容区。在如今的网页设计中，Web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab这种交互元素成为了一个越来越普遍的应用。基本在每个网站中都有这样的效果被应用到前台的设计中去。本次专题任务将为广西少数民族文化资源网古迹页面中“新闻聚焦”栏目添加选项卡切换效果。任务实施分析任务构建HTML+CSS美化页面JavaScript特效默认状态时，效果分析：（1）添加“通知公告”选项卡，设置未选中状态的样式。（2）添加“通知公告”栏目内容，设置样式，默认不显示。任务实施分析任务构建HTML+CSS美化页面JavaScript特效特效后，效果分析：（1）“新闻聚焦”选项卡样式改变，为未选中状态样式（.title2）。（2）“通知公告”选项卡样式改变，为选中状态样式(.title1）。（3）“新闻聚焦”栏目内容不显示（display:none）。（4）“通知公告”栏目内容显示（display:block）。任务实施分析任务构建HTML+CSS美化页面JavaScript特效构建HTML标准流布局+CSS页面美化操作步骤步骤一：制作通知公告选项卡构建HTML结构构建CSS样式步骤二：制作通知公告栏目内容构建HTML结构构建CSS样式单击选项卡时，调用不同的函数。步骤八任务实施分析任务构建HTML+CSS美化页面JavaScript特效编写JavaScript脚本，实现特效新建JavaScript文件声明变量newsT，通过DOM获取“新闻聚焦”选项卡所在的<span>标签。声明变量noticeT，通过DOM获取“通知公告”选项卡所在的<span>标签。声明变量newsB，通过DOM获取新闻聚焦栏目内容所在的<div>标签。步骤一步骤二步骤三步骤四声明变量noticeB，通过DOM获取通知公告栏目内容所在的<div>标签。步骤五声明单击“通知公告”选项卡时调用的函数步骤六声明单击“新闻聚焦”选项卡时调用的函数。步骤七学习资源DOM变量什么是变量？函数事件通俗的说，变量是用于存放数据的容器，就像一个装东西的盒子，我们通过变量名获取数据，甚至修改数据。

学习资源DOM变量变量的使用函数事件声明变量var

sum;

//声明一个

名称为sum的变量

（1）var是一个JS关键字，用来声明变量。

（2）sum是变量名。赋值sum=10;//给sum这个变量赋值为10注意：=

这里的等号是赋值的意思，用来把右边的值赋给左边的变量空间。学习资源DOM变量变量的使用函数事件变量的初始化varsum=10;//声明变量sum，同时将10赋值给sum声明一个变量的同时进行赋值，我们称之为变量的初始化。更新变量varsum=10;sum=100;//最后的结果就是100,因为10已被覆盖一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。同时声明多个变量，只需要写一个var，多个变量名之间使用英文逗号隔开，如：varname='zs',sex=1,age=18;学习资源DOM变量变量的命名规范函数事件由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：usrAge,num01,_name严格区分大小写。varapp;和varApp;是两个变量不能以数字开头。18age是错误的不能是关键字、保留字。例如：var、for、while变量名必须有意义。MMDBBD nl→ age遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName学习资源DOM变量什么是DOM函数事件文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树文档一个页面就是一个文档，DOM中使用document表示元素页面中的所有标签都是元素，DOM中使用element表示节点网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示学习资源DOM变量获取元素函数事件在JavaScript中，通过设置节点的属性和方法可以访问指定节点和相关节点。访问节点的几种常见方法如下：方法说明getElementById(“ID”)返回匹配指定ID的节点getElementsByName(“名称”)返回匹配指定名称的所有节点的节点列表（集合/节点数组）getElementsByTagName(“标签名”)返回匹配指定标签名称的所有节点的节点列表getElementsByClassName(“类名”)返回匹配指定类名的所有节点的节点列表querySelector('选择器')返回匹配指定选择器的第一个节点querySelectorAll('选择器')返回文档中匹配指定CSS选择器的所有节点学习资源DOM变量操作元素函数事件元素的常用操作方法说明createElement()创建元素节点createTextNode()创建文本节点appendChild()为当前节点增加一个子节点（作为最后一个子节点）insertBefore()为当前节点增加一个子节点（插入在指定子节点前）removeChild()删除当前节点的某子节点学习资源DOM变量操作元素函数事件元素的内容和样式操作除对元素进行节点操作外，还能对其进行属性和内容操作，常见操作如下：类型属性/方法说明元素内容innerHTML获取或设置元素的HTML内容样式属性className获取或设置元素的class属性style获取或设置元素的style样式属性学习资源DOM变量什么是函数函数事件函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数在使用时分为两步：声明函数和调用函数。学习资源DOM变量函数的声明函数事件function函数名([参数1，参数2,...]){//函数体代码}function：关键字function必须小写。函数名：必选。在同一个页面中，函数名必须是唯一的，并且区分字母大小写。由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum。参数：可选。外界传递给函数的值，当有多个参数时，参数之间需用逗号分隔。函数体：必选。用于实现函数功能的代码。学习资源DOM变量函数的调用函数事件函数名([参数1，参数2,...])调用时，函数名后需添加小括号。声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。学习资源DOM变量什么是事件函数事件事件是可以被JavaScript侦测到的行为，即用户与Web页面交互时产生的操作，如单击、双击、选择菜单等。事件的三要素事件源（谁）事件类型（发生什么事件）事件驱动，也叫事件处理程序（做什么）学习资源DOM变量函数事件常见的JavaScript事件可以分为鼠标事件、键盘事件、表单事件、页面事件等。类

别事

件触发条件鼠标事件onclick鼠标单击某对象ondblclick鼠标双击某对象onmousedown某鼠标按键被按下onmouseup某鼠标按键被放开onmouseover鼠标被移至某元素上onmousemove鼠标被移动onmouseout鼠标从某元素上移开键盘事件onkeydown按下任何键盘按键时发生onkeyup用户放开任何先前按下的键盘按键时发生onkeypress按下并放开任何字母或数字键时发生表单事件onblur元素失去焦点onchange元素失去焦点且内容发生改变onfocus元素获得焦点onreset表单被重置时onsubmit表单被提交时页面事件onload当页面加载完成时onunload当页面卸载时考核评价班级：姓名：学号任务名称：选项卡特效制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成JavaScrip代码编写JavaScript脚本书写规范，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，