版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目4科技资讯网HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势学习目标知识目标掌握JavaScript的3种引入方式掌握标识符的命名规则、常用的关键字与保留字掌握常量、变量和数据类型的定义掌握JavaScript函数的语法格式掌握获取HTML元素的常用方法的使用掌握创建JavaScript对象的4种方式掌握DOM的基础操作掌握流程控制语句与数组的使用理解BOM对象中提供的5个浏览器内置对象掌握连续定时器与延迟定时器的使用掌握事件的对象、调用和处理掌握ECMAScript6.0的6个新特性HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势学习目标技能目标熟练使用JavaScript的基础知识实现科技资讯网首页的导航栏与下拉菜单熟练使用流程控制、数组、BOM对象和定时器实现科技资讯网首页的广告栏与城市商业信息熟练使用常用的JavaScript事件实现科技资讯网首页的热门推荐与资讯素质目标鼓励学生在JavaScript技术学习中不断追求卓越、提升自我培养学生持续学习和探索新技术的习惯，关注JavaScript及其相关技术的最新发展HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势学习内容任务1实现科技资讯网首页的导航栏与下拉菜单任务2实现科技资讯网首页的广告栏与城市商业信息任务3实现科技资讯网首页的热门推荐与资讯HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势项目描述科技资讯网主要以首页为例，使用不同的JavaScript知识实现首页的不同部分，首页展示的内容主要包括导航栏、广告栏、公告信息、城市商业信息、热门推荐、热门资讯和页面版权信息。通过对科技资讯网首页实现过程的学习，读者将掌握JavaScript的基础、DOM对象、BOM对象、定时器、事件对象、事件的调用与处理、常用的JavaScript事件，以及ECMAScript6.0新特性等知识的运用。任务1实现科技资讯网首页的导航栏与下拉菜单1HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势需求分析科技资讯网首页的导航栏包含指向网站主要页面的链接，如首页、资讯、商业、数码、家电、汽车、娱乐、体育等。科技资讯网首页的导航栏与下拉菜单的效果如下图所示。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势知识储备一、JavaScript简介
七、DOM对象二、JavaScript的引入方式
八、DOM节点三、标识符、关键字与保留字
九、DOM的基本操作四、常量、变量与数据类型
五、JavaScript函数六、创建JavaScript对象HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势一、JavaScript简介JavaScript是一种轻量级、解释型的Web开发语言，是可与HTML文件相融合的一种脚本语言。JavaScript语言的特性和结构如下所示。1.JavaScript语言的特性（1）解释型。可移植性较好，只要有解释环境，可在不同的操作系统上运行。（2）弱类型。易于学习、语言表达简单易懂、代码更优雅、开发周期更短、更加偏向逻辑设计。（3）动态性。指在变量定义时不一定进行赋值操作，只需在使用时作赋值操作即可。（4）事件驱动。JavaScript对用户的响应以事件驱动的方式进行。如单击、拖动窗口、选择菜单等。（5）跨平台。JavaScript依赖于浏览器本身，与操作环境无关。“编好一次，走遍天下”。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势一、JavaScript简介2.JavaScript的构成JavaScript的构成如下图所示。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势二、JavaScript的引入方式
与CSS在HTML中的引入方式类似，JavaScript在HTML中的引入方式也有3种。
1.行间引入方式
行间引入方式是通过HTML标签的属性进行操作，一般不推荐使用。
下面使用alert()函数演示JavaScript的行间引入方式。
<body><divonclick="alert('科技跨界融合，创新引领未来。')">新闻</div></body>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势二、JavaScript的引入方式
2.内部引入方式
内部引入方式是在HTML文件中通过<script>标签的方式设置JavaScript代码。
下面使用alert()函数演示JavaScript的内部引入方式。<script>
//弹出窗口
alert('智慧融合创新，科技点亮生活。');</script>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势二、JavaScript的引入方式
3.外部引入方式
外部引入方式也是通过<script>标签来设置JavaScript代码的。
在HTML文件中引入外部JavaScript文件的示例代码如下。<scriptsrc="js/hello.js"></script>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势三、标识符、关键字与保留字1.标识符
标识符是JavaScript编程中用于给变量、函数、数组、对象等命名的符号。标识符命名的规则有以下几点：（1）可以包含字母、数字、下划线（_）和美元符号（$）。（2）不能以数字开头。（3）区分大小写。（4）不能是JavaScript的关键字、保留字或true、false、null。breakdoinstanceofvarcaseelsenewvoidcatchfinallyreturnwhilecontinueforswitchwithdebuggerfunctionthisdeletedefaultifthrowintrytypeof2.关键字JavaScript中的常见关键字如下表所示。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势三、标识符、关键字与保留字abstractenumintshortbooleanexportinterfacestaticbyteextendslongsupercharfinalnativesynchronizedclassfloatpackagethrowsconstgotoprivatetransientdoubleimportpublic3.保留字JavaScript的常见保留字如下表所示。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势四、常量、变量与数据类型1.常量
在JavaScript中，const关键字用于声明常量，一旦常量被赋值后，它的值就不能被再次修改。声明常量的示例代码如下。2.变量在JavaScript中，可以使用var、let关键字来声明变量。当使用var声明一个变量时，其作用域是函数作用域或全局作用域；当使用let声明一个变量时，这个变量是一个块级作用域的局部变量。声明变量的示例代码如下。constPI=3.14;//这行代码会抛出错误，因为PI是一个常量，不能修改其值//PI=3.14159;varname="Alice";letage=30;HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势四、常量、变量与数据类型3.数据类型
JavaScript有6种数据类型。（1）number类型表示数字类型，用于存储数字。（2）string类型表示字符串类型。字符串是由Unicode字符集子集构成的序列，在JavaScript中用来表示文本的数据类型，示例代码如下。varfoo=123;
//数字类型的整型varbar=3.14;
//数字类型的浮点型varfoo='hello';//字符串类型varbar='123';//字符串类型HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势四、常量、变量与数据类型（3）boolean类型表示布尔值类型，布尔值表示真假值，示例代码如下。（5）undefined类型表示未定义类型，如果var关键字声明一个变量，但并没有对其进行赋值，则无法判断变量的数据类型，此时变量数据类型是undefined，示例代码如下。varfoo=true;//布尔值类型varbar=false;//布尔值类型varfoo;//未定义类型（4）object类型表示对象类型，对象是各种值的集合。在后续内容中涉及的数组、函数、各种内置对象都属于对象类型。在后续内容中将会对对象进行讲解，此处了解即可。（6）null类型表示空类型，表示当前为空值，示例代码如下。varfoo=null;
//空类型HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势五、JavaScript函数JavaScript函数是一段可以重复使用的代码块，它实现了特定的功能。JavaScript函数的基本语法格式如下所示。function函数名(参数1,参数2,...){
函数体}//定义函数函数名(参数1,参数2,...)//调用函数需要注意的是，除了使用JavaScript函数的基本语法格式来定义函数之外，JavaScript还提供了许多内置函数，例如，可以在页面中弹出警告框的alert()函数、弹出确认框的confirm()函数和弹出对话框的prompt()函数。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势下面通过一个例子演示标题标签的使用五、JavaScript函数
下面通过一个例子演示JavaScript中内置函数alert()、confirm()和prompt()的使用，核心代码与运行效果如下。
<body><buttononclick="showAlert()">显示警告框</button><buttononclick="showConfirm()">显示确认框</button><buttononclick="showPrompt()">显示提示框</button><script>//显示警告框functionshowAlert(){alert("这是一个警告框！");}//显示确认框functionshowConfirm(){varuserChoice=confirm("您确定要继续吗？");if(userChoice){alert("您单击了'确定'！");}else{alert("您单击了'取消'！");}}......HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势下面通过一个例子演示标题标签的使用五、JavaScript函数警告框、确认框和提示框的运行效果如下图所示。
单击“显示警告框”按钮，会弹出一个警告框如下图所示。
HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势下面通过一个例子演示标题标签的使用五、JavaScript函数单击“显示确认框”按钮，会弹出一个确认框，如下图所示。
单击“显示提示框”按钮，会弹出一个提示框如下图所示。
HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势下面通过一个例子演示标题标签的使用五、JavaScript函数单击“确定”按钮会提示“您好，访客！很高兴见到您。”警告框，如下图所示。
HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势六、创建JavaScript对象1.字面量方式
字面量创建JavaScript对象是一种简便的方式，具体用法如下所示。2.newObject()创建对象首先使用object构造器new一个对象，然后在对象中设置丰富的成员信息，具体用法如下所示。varstudent={name:'张小明',age:18,play:function(){console.log('羽毛球，乒乓球，篮球');}}varstudent=newObject();='张小明';student.age=18;student.play=function(){console.log('羽毛球，乒乓球，篮球');}HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势六、创建JavaScript对象
3.工厂函数创建对象
使用工厂函数方式创建对象是使用函数来创建对象，类似于一个“工厂模式”，可以大批量地创建同种类型的对象。functioncreateStudent(name,age){varstudent=newObject();=nane;student.age=age;student.play=function(){console.log('羽毛球，乒乓球，篮球');}returnstudent;}varstu1=createStudent('张小明',18);varstu2=createStudent('李明',16);stu1.play();HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势六、创建JavaScript对象
4.自定义构造函数
使用自定义构造函数方式是通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象，具体用法如下所示。functionStudent(name,age){=name;this.age=age;this.play=function(){console.log('篮球，排球，足球');}}varstu1=createStudent('张三',15);HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势六、创建JavaScript对象
new操作符的4个作用说明如下。（1）开辟内存空间，存储新创建的对象。（2）new操作符会让this指向这个新的对象。（3）执行构造函数为新对象添加属性和方法。（4）new操作符会返回新创建的对象。
构造函数中this的4个特点说明如下。（1）在定义函数的时候this是不确定的，只有在调用的时候才能明确其指向。（2）一般函数直接执行，内部this会指向全局window对象。（3）函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象。（4）构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new操作符来调用，从而实现实例化对象的使用。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势七、DOM对象DOM（DocumentObjectModel）对象即文档对象模型，该对象是由W3C制定的用于操作HTML和XML的标准。DOM提供了一系列方法对HTML文档节点进行操作，并对文档中的每个元素节点又做了细分：document对象，是HTML文档的根节点，使用该对象可以对HTML页面中的所有元素进行访问。element对象，HTML中的元素对象，是document对象所有子节点的集合，包括元素节点、文本节点、注释节点等。attributes对象，是HTML元素的属性对象。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势七、DOM对象HTML页面的DOM树结构如下图所示。Document对象提供了获取HTML元素的方法，常用的方法有：document.getElementById()、document.getElementsByName()、document.getElementsByClassName()、document.getElementsByTagName()、document.querySelector()、document.querySelectorAll()、document.images()、document.links()HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势七、DOM对象使用Document对象的方法获取HTML元素的示例代码如下。DOM获取HTML根元素的示例代码如下。<script>
varaEle=document.getElementById('link');
aEle.innerText='前往百度首页';</script>varh1=document.documentElementDOM获取body元素的示例代码如下。varb1=document.bodyHTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势八、DOM节点在DOM节点中，不同的节点对应的节点类型可能不一样，主要有元素节点、属性节点、文本节点、注释节点、文档节点等节点类型。节点类型的对应值如下表所示。节点类型nodeTypenodeNamenodeValue元素节点1大写的HTML元素名Undefined或null属性节点2元素属性名属性值文本节点3#text#text的文本值注释节点8#comment#comment的文本值文档节点9#documentnullHTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势下面通过一个例子演示标题标签的使用八、DOM节点
下面通过一个例子演示nodeType属性、nodeName属性和nodeValue属性的使用，核心代码与运行效果如下。
<script>varbox1=document.getElementById("box");console.log("元素节点的nodeType:"+box1.nodeType)
......varatt=box1.getAttributeNode("title");console.log("属性节点的nodeType:"+att.nodeType)......vartxt=box1.firstChild;console.log("文本节点的nodeType:"+txt.nodeType)......HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势八、DOM节点父节点、子节点和兄弟节点的具体说明，以及获取节点的方法如下表所示。节点分类说明获取节点方法父节点parentNode父节点元素的父节点var父节点=节点象.parentNode子节点firstChild第一个子节点指向在子节点列表中的第一个节点var第一个子节点=父节点.firstChildlastChild最后一个子节点指向在子节点列表中的最后一个节点var最后一个子节点=父点.lastChildchildNodes所有子节点所有子节点的列表var伪数组=父节点.childNodes兄弟节点previousSibling上一个兄弟节点指向前一个兄弟节点,如果这个节点就是第一个,那么该值为nullvar上一个兄弟节点=节点象.previousSiblingnextSibling下一个兄弟节点指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为nullvar下一个兄弟节点=节点对象.nextSiblingHTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势九、DOM的基础操作1.DOM节点的操作
（1）创建节点。在DOM中，createElement()方法通过传入指定的一个标签名可创建一个元素节点。创建节点的语法格式如下所示。1）appendChild()方法。使用appendChild()方法向当前节点的子节点列表的末尾添加新的子节点，其语法格式如下所示。document.createElement("标签名")当前节点.appendChild(插入的节点);DOM的基础操作包括DOM节点的操作、DOM操作属性和样式，具体介绍如下。
（2）添加节点。在DOM中，添加节点有appendChild()和insertBefore()2种方法。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势下面通过一个例子演示标题标签的使用九、DOM的基础操作
下面通过一个例子演示使用appendChild()方法添加新节点的方式，核心代码与运行效果如下。
<ulid="list"><li>已有的列表项1</li><li>已有的列表项2</li><li>已有的列表项3</li></ul><script>varlist=document.getElementById("list");
varli=document.createElement("li");li.innerHTML="新添加的列表项1";//为新节点添加内容list.appendChild(li);//使用appendChild()方法添加新节点</script>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势九、DOM的基础操作2）insertBefore()方法。使用insertBefore()方法用于实现在当前节点前添加一个新的子节点，其语法格式如下所示。当前节点.insertBefore(新添加的子节点,子节点);下面通过一个例子演示使用insertBefore()方法添加新节点的方式。核心代码与运行结果如下所示。<ulid="list"><li>已有的列表项1</li><li>已有的列表项2</li><li>已有的列表项3</li><li>已有的列表项4</li></ul><script>varlist=document.getElementById("list");varli=list.getElementsByTagName("li")varli2=document.createElement("li");//创建新的节点li2.innerHTML="新添加的列表项2";//为新节点添加内容list.insertBefore(li2,li[1]);//使用insertBefore()方法添加新节点</script>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势九、DOM的基础操作（3）删除节点。removeChild()方法用于删除指定的节点，其语法格式如下所示。
replaceChild()方法替换节点的示例代码如下所示。当前节点.removeChild(删除的子节点);//创建要替换的新节点varp1=document.createElement("p");//为要替换的新节点添加内容p1.innerHTML="新创建的文字";//使用replaceChild()方法在网页上替换节点list.replaceChild(p1,li[2]);（4）替换节点。replaceChild()方法用于将某个子节点替换为另一个新的子节点，replaceChild()方法的语法格式如下所示。当前节点.replaceChild(要替换的新节点,被替换的旧节点);HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势九、DOM的基础操作（5）删除节点。cloneNode()方法用于克隆指定的节点，cloneNode()方法的语法格式如下所示。要克隆的节点.cloneNode(布尔值);通过cloneNode()方法可对节点进行“复制”操作，cloneNode()方法克隆节点的示例代码如下所示。varclone1=p1.cloneNode(true);//克隆一个节点//使用appendChild()方法在网页上显示新拼接的节点list.appendChild(clone1);HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势九、DOM的基础操作2.DOM操作属性和样式
（1）DOM操作属性。
DOM操作属性如下表所示。方法说明getAttributeNode("属性名")获取元素节点中指定的属性。getAttribute("属性名")获取元素节点中指定属性的属性值，如果属性节点不存在，则返回null。setAttribute("属性名","属性值")创建或修改元素节点的属性，如果属性节点不存在，则创建该属性；如果属性节点存在，则修改该属性的值。removeAttribute("属性名")删除元素中指定属性。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势九、DOM的基础操作（2）DOM操作样式。在JavaScript中，可通过DOM操作行内样式，即控制HTML元素的style属性，从而设置或修改元素样式，其语法格式如下所示。元素.style.css属性名="属性值";例p1style.backgroundColor="blue";DOM提供了cssText属性，可用来一次性设置多组CSS样式。cssText属性的语法格式如下所示。元素.style.cssText="CSS属性名1:属性值1;......";例p1style.cssText="color:red;font-size:16px";HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势任务实现
在chapter04文件夹中创建一个名为cnet.html的文件，该文件用于实现科技资讯网首页。
<head>
......<!--导航栏--><divid="nav"><ulclass="nav"><li><ahref="#"class="color_in">首页</a></li><liclass="dropdown"><ahref="#"class="dropbtn">资讯</a><ulclass="dropdown-content"><li><ahref="#">国内新闻</a></li><li><ahref="#">国际新闻</a></li>....../*下拉菜单样式*/.dropdown-content{display:none;position:absolute;background-color:#0b0b0b;min-width:105px;z-index:1;}.dropdown-contenta{color:rgb(255,255,255);padding:3px26px;......HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势任务实现
在chapter04文件夹中创建js文件夹，在该文件夹中创建cnet.js文件，该文件用于设置弹出的下拉菜单。
document.addEventListener('DOMContentLoaded',function(){//获取所有可能的下拉菜单触发器vardropdownTriggers=document.querySelectorAll('.dropdown');//为每个触发器添加鼠标进入和离开事件dropdownTriggers.forEach(function(trigger){trigger.addEventListener('mouseover',function(){//鼠标进入时显示下拉菜单vardropdownContent=this.querySelector('.dropdown-content');dropdownContent.style.display='block';});trigger.addEventListener('mouseout',function(){//鼠标离开时隐藏下拉菜单vardropdownContent=this.querySelector('.dropdown-content');dropdownContent.style.display='none';});});});任务2实现科技资讯网首页的广告栏与城市商业信息2HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势需求分析科技资讯网首页的导航栏下方需要显示广告栏和城市商业信息，科技资讯网首页的广告栏与城市商业信息的效果如右图所示。HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势知识储备一、流程控制二、数组三、BOM对象四、定时器HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势一、流程控制JavaScript中的流程控制语句与其他语言相似，一般可分为顺序结构、选择结构和循环结构3种。接下来介绍一下常用的if语句和for循环。1.if语句（1）单向选择。
（2）双向选择。if（逻辑条件）{
语句1;}语句2;if（逻辑条件）{
语句1;}else{
语句2;}HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势一、流程控制（3）多向选择。
if（逻辑条件1）{
语句1;}elseif（逻辑条件2）{
语句2;}......else{
语句n;}for（初始化语句;循环条件;控制条件）{
循环体语句;}2.for循环for循环是循环结构中常见的语句，同时也是使用最为广泛的循环语句，能够反复执行一段代码，提高代码的复用率，其语法格式如下所示。
HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势一、流程控制（1）break语句。break语句用于跳出整体循环，停止后续循环操作。下面通过一个例子演示使用break语句计算出1~10之间，截止到能被8整除的整数，之前所有整数的和。<script>vars=0;for(vari=1;i<10;i++){if(i%8==0){//判断条件为能被8整除break;//终止当前循环，顺序执行循环后面的语句}s+=i;//循环累加console.log("本次循环数值为"+i);//依次列出执行哪一个循环}console.log(s);//计算整数的和
</script>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势一、流程控制（2）continue语句。continue语句只跳出本次循环，不影响后续循环。下面使用continue语句计算出1~10之间所有不能被8整除的整数和。<script>vars=0;for(vari=1;i<10;i++){if(i%8==0){//判断条件为能被8整除continue;//跳出本次循环，进入下一次循环}s+=i;//循环累加console.log("本次循环数值为"+i);//依次列出执行哪一个循环}console.log(s);//计算整数的和</script>二、数组1.创建数组（1）使用数组文本创建数组。vararray-name=[item1,item2,...];//语法格式vararr=[];
//创建一个空数组vararr1=[36,18,3,34,19];//创建一个带初始元素的数组（2）使用new操作符创建数组。vararray-name=newArray(item1,item2,...);//语法格式vararr=newArray();
//创建一个空数组vararr2=newArray(25,3,15,49,6);//创建一个带初始元素的数组二、数组2.数组的操作（1）添加、删除数组。添加、删除数组方法的具体说明如下表所示。方法说明push()在数组末端向数组添加一个或多个新的元素unshift()在数组开头向数组添加一个或多个新元素shift()从数组中删除起始元素，并返回该元素pop()从数组中删除最后一个元素，并返回该元素slice()可截取数组splice()可删除数组（2）转换数组。转换数组方法的具体说明如下表所示。方法说明toString()可将数组转换为字符串join()以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，则默认用逗号分隔二、数组数组转换为字符串的具体示例代码如下。<script>vararr1=['黄瓜','西红柿','辣椒','生姜'];console.log(arr1.toString());//黄瓜,西红柿,辣椒,生姜console.log(arr1.join('/'));//黄瓜/西红柿/辣椒/生姜console.log(arr1.join(''));//黄瓜西红柿辣椒生姜（参数为空格）console.log(arr1.join());//黄瓜,西红柿,辣椒,生姜console.log(arr1.join(''));//黄瓜西红柿辣椒生姜（参数无内容）</script>二、数组（3）遍历数组。遍历数组的方法的具体说明如下表所示。方法说明for循环for循环是使用频率最高，并且最简单的一种循环遍历方法for...in循环既可以用于遍历数组，也可以用于遍历对象for...of循环不仅可以遍历数组，还可以遍历可迭代对象forEach()循环没有返回值，对原数组没有影响，不支持IE方法说明map()遍历为数组的每个元素依次调用指定的回调函数，根据函数结果返回一个新数组every()遍历确定数组的所有元素是否都满足指定测试some()遍历确定数组的元素是否有满足指定的测试filter()遍历返回数组中满足指定条件的元素二、数组下面通过一个学生成绩管理系统的例子演示数组的使用，核心代码如下所示。
<style>table,th,td{border:1pxsolidblack;border-collapse:collapse;}th,td{padding:10px;text-align:left;}</style>
<h1>学生成绩管理系统</h1><!--添加学生表单--><formid="addStudentForm"><labelfor="name">姓名:</label><inputtype="text"id="name"name="name"><br><br><labelfor="score">分数:</label><inputtype="number"id="score"name="score"><br><br><buttontype="button"onclick="addStudent()">添加学生</button></form><!--显示学生信息的表格--><tableid="studentsTable">......二、数组学生成绩管理系统的运行效果如下图所示。输入要添加的学生姓名和分数，单击“添加学生”按钮，页面的表格下方会显示添加的学生姓名和成绩信息，如下图所示。三、BOM对象BOM（BrowserObjectModel）对象是浏览器对象模型，开发者可以使用BOM对象提供的接口实现与浏览器窗口的交互。BOM对象提供了与浏览器窗口交互的能力，其包含了一些处理窗口的方法，例如打开新窗口、监听窗口改变、弹出警告框等，这些方法可以使用window对象来调用，window对象也是浏览器下的全局对象，使用window对象调用浏览器方法的示例代码如下。window.location.href='';//打开新网址window.onload=function(){};
//监听窗口加载完毕window.open('');
//打开新窗口window.alert('HelloWorld');
//弹出警告框三、BOM对象虽然目前BOM对象没有公开的统一标准，但是有5个浏览器内置对象是所有浏览器都支持的，下面介绍这5个对象。window对象，浏览器的全局对象，表示浏览器中打开的窗口，是BOM的操作入口。screen对象，包含有关客户端显示屏幕的信息，例如屏幕的高度、宽度、颜色分辨率等。history对象，包含用户在浏览器中访问过的URL记录。location对象，包含当前浏览器窗口中的URL信息。navigator对象，包含所有浏览器的信息，例如浏览器的名称、版本、代码名等。三、BOM对象history对象、location对象和navigator对象主要实现了对浏览器的操作，下面对这3个对象进行介绍。1.history对象history对象代表浏览器历史访问列表，保存用户访问页面的历史记录。history对象提供了用于前进和后退的方法，分别为forward()方法和back()方法，具体用法的示例代码如下：history.forward();//在历史访问列表中前进1页history.back();//在历史访问列表中后退1页三、BOM对象history.go()方法接收表示前进或后退页面数量的参数，正数则表示前进指定数量的页面，负数为后退指定数量的页面，具体示例代码如下：history.go(2);//前进2页history.go(-3);//后退3页history.go(-1);//后退1页，等价于history.back();history.go(1);//前进1页，等价于history.forward();三、BOM对象2.location对象location对象表示当前浏览器窗口所打开页面的URL信息。通常URL的格式如下所示：scheme://hostname:port/path?querystring#fragment上述URL格式中的各部分说明如下：scheme是通信协议方案。hostname是主机名。port表示端口，是一个整数数字，可以省略。path是访问资源的具体路径。querystring是查询字符串（可选内容）。fragment用于指定资源中的信息片段，可选内容。三、BOM对象获取URL各部分内容的属性如下表所示。属性说明hash获取URL中#及之后的字符串内容host获取URL中主机名和端口信息hostname获取主机名href获取完整的URL字符串或设置URL属性说明pathname获取资源port获取端口protocol获取URL使用协议search获取“?”及之后的查询字符串内容三、BOM对象下面通过示例演示location对象中的一系列属性，具体示例代码如下：
<script> console.log("href:"+location.href); console.log("protocol:"+tocol); console.log("host:"+location.host); console.log("hostname:"+location.hostname); console.log("port:"+location.port); console.log("pathname:"+location.pathname); console.log("search:"+location.search); console.log("hash:"+location.hash);
</script>三、BOM对象URL如果为http://localhost:8080/location.html?key=value&name=val#hello，则前面示例执行结果如下：
href:http://localhost:8080/location.html?key=value&name=val#helloprotocol:http:host:localhost:8080hostname:localhostport:8080pathname:/location.htmlsearch:?key=value&name=valhash:#hello如果要改变在浏览器中显示的URL信息，最常用的是location.href属性重新设置URL，具体示例代码如下：
location.href="http://";三、BOM对象当location对象被转换为字符串时，href的属性值会被返回，因此可以使用location代替location.href使用，上述代码可以简写，具体如下：
location="http://";当重新设置URL时，location对象调用assign()的方法设置该URL，并会向浏览器的历史访问列表中添加一条访问记录，因此下面两行代码执行后效果是完全一样的。
location.href="http://";location.assign("http://");在location对象中，还有两个常用方法reload()和replace()方法。
location.reload();//重新加载当前页面，相当于刷新当前页面location.replace("http:///");
//重新以新的URL来代替当前URL三、BOM对象navigator对象中包含了常用于检测浏览器信息的属性如下表所示。属性说明appCodeName返回浏览器的代码名，通常是MozillaappName完整的浏览器名称appVersion浏览器平台和版本信息cookieEnabled浏览器中是否启用cookieplatform运行浏览器的操作系统平台userAgent返回由客户机发送服务器的user-agent头部的值userLanguage操作系统的默认自然语言信息HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势三、BOM对象下面通过一个例子演示检测浏览器信息的属性的使用，核心代码与运行结果如下所示。<script>//函数来更新页面上的信息functionupdateBrowserInfo(infoDiv){constplatform=navigator.platform;constappName=navigator.appName;constcookieEnabled=navigator.cookieEnabled;constappVersion=navigator.appVersion;infoDiv.innerHTML='';
//清除旧的信息
......四、定时器在JavaScript中，BOM的window对象有2种设置定时器的方法，即设置连续定时器和延迟定时器，主要由window.setInterval()和window.setTimeout()2个函数实现，它们负责向任务队列添加定时任务。1.连续定时器setInterval()函数可设置连续的定时器，在指定的毫秒数后执行指定的代码，即通过设定一个时间间隔，每隔一段时间去执行JavaScript的操作。setInterval()函数的语法格式如下所示。setInterval(code,millisec);clearInterval()函数清除定时器的语法格式如下所示。clearInterval(定时器对象);HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势四、定时器下面通过一个例子演示如何制作一个连续定时器。<script>vari=0;vartimer1=setInterval(show,1000);//每隔1秒调用1次定时器中的函数functionshow(){i++;console.log("教育领域在不断探索科技与教学的融合"+i);if(i==4){//当i=4时，清除定时器clearInterval(timer1);}}</script>四、定时器2.延迟定时器setTimeout()函数可设置延迟的定时器，按照指定的周期（以毫秒计）来调用函数或计算表达。setTimeout()函数的语法格式如下所示。setTimeout(code,millisec);clearInterval()函数清除定时器的语法格式如下所示。clearTimeout(定时器对象);HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势四、定时器下面通过一个例子演示如何制作一个延时定时器。<script>vartimer2=setTimeout(show,1000);//1秒之后调用1次定时器中的函数functionshow(){console.log("教育领域在不断探索科技与教学的融合");clearTimeout(timer2);//清除定时器}</script>HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势任务实现
在cnet.html文件中添加一些标签显示广告栏信息、公告信息和商业城市信息。
......<!--广告栏--><divclass="banner"><ulclass="banner_pic"id="banner_pic"><liclass="current"><imgclass="one"src="images/banner01.png"/></li><liclass="pic"><imgclass="one"src="images/banner02.png"/>
</li><liclass="pic"><imgclass="one"src="images/banner03.png"/>
</li></ul>............/*广告栏*/.banner{
width:1000px;
height:285px;
margin:13pxauto15pxauto;
position:relative;
overflow:hidden;}.banner.banner_pic.pic{
display:none;}......HTML5的优势
解决了跨浏览器的问题
新增多个新特性
（语义化标签、多媒体标签、canvas元素、本地存储等）
用户优先原则
化繁为简的优势任务实现
在cnet.js文件中设置广告栏的轮播效果与城市图片的无缝滚动效果。
......//焦点图轮播window.onload=function(){
//顶部的焦点图切换
functionhotChange(){
varcurrent_index=0;
window.setInterval(autoChange,3000);
varbutton_li=document.getElementById("button").
getElementsByTagName("li");
varpic_li=document.getElementById("banner_pic").
getElementsByTagName("li");
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- AG对再生障碍性贫血的治疗
- 2026年潮汐能利用技术与前景
- 肿患者的姑息治疗
- LESSON4数码管动态显
- GABA与压力、失眠陈静
- C语言设计实例教程动态组织数据
- i静电场中的导体和电介质
- 公务员考核个人总结
- ISOTS+16949标准学习详细资料
- 无菌包安全管理
- 2026年三明市建宁县消防救援大队招聘消防所派驻文员的备考题库及1套参考答案详解
- 中国脑小血管病诊治指南2025
- 2025-2026学年浙教版七年级 上册数学期末考试 全真模拟卷（含答案答题卡）
- 《数据结构》课件-第7章(图)
- 自卸车验收流程及质量标准模板
- 机械加工车间质量管理标准化手册
- 临床输血技术教案
- 2025年一级建造师《铁路工程管理与实务》考试真题及答案
- GJB2744A-2019钛及钛合金自由锻件和模锻件规范
- 医学生普外科入科教育
- 2025至2030年中国工业设计行业发展监测及投资方向研究报告
评论
0/150
提交评论