HTML5+CSS3+JavaScript网页开发实战 课件 模块11 网页交互功能设计

模块11网页交互功能设计本模块主要介绍JavaScript的基本语法和DOM对象操作，并利用JavaScript实现网页轮播图的手动切换广告图和自动切换广告图功能。JavaScript入门任务1任务概述水仙花数是指一个三位数，它的每个数位上的数字的3次幂之和等于它本身（例如：13+53+33=153）。本任务要求在控制台中输出100～999范围内的水仙花数，并通过该任务的实施熟悉并掌握JavaScript基本语法。任务1JavaScript入门JavaScript入门JavaScript是一种具有函数优先的轻量级、解释型、即时编译型的编程语言，它作为开发Web页面的脚本语言而闻名。JavaScript在1995年由Netscape公司的BrendanEich在网景导航者浏览器上首次设计实现而成。因为Netscape公司与Sun公司合作，Netscape管理层希望其外观看起来像Java，所以将其取名为JavaScript。JavaScript的标准是ECMAScript。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript2015，但通常被称为ECMAScript6或ES2015。1.1JavaScript代码引入方式在网页中引入JavaScript有3种常见方式，分别是外部引入、内部引入和行内引入。1．外部引入外部引入指的是将JavaScript程序单独写为一个扩展名为js的文件，并在HTML文件的head部分通过一个语句进行导入。其中，src属性的值是JavaScript文件的完整相对路径。<scripttype="text/javascript"src="路径/文件名.js"></script>2．内部引入内部引入指的是在HTML文件的head部分单独划分区域来书写JavaScript代码，且书写在<script>和</script>标签之间。<scripttype="text/javascript">内部JavaScript代码</script>3．行内引入行内引入指的是在HTML代码中嵌入JavaScript代码。嵌入的代码必须以“JavaScript:”开头。<inputtype="button"value="行内引入方式"onclick="JavaScript:alert('我是行内引入方式');">1.2JavaScript的输出JavaScript的输出可用于页面弹窗警告、页面写入、控制台交互测试等，JavaScript的常用输出有如下几种方式。1．调用window.alert()方法弹出警告框调用window对象的alert()方法可以弹出警告框。例如，书写代码“window.alert("请先登录后操作！")”，运行网页，弹出警告框，效果如图所示。警告框效果2．调用document.write()方法将内容写入HTML文件调用document对象的write()方法，可以将内容嵌入HTML代码中进行输出。例如，书写代码“document.write("请先注册后登录！")”，运行网页，网页文件中就会出现“请先注册后登录！”文字内容。3．调用console.log()方法将内容写入浏览器的控制台调用console对象的log()方法可以将内容写入浏览器的控制台，通常可以使用这种方法进行程序调试输出。在浏览器中使用快捷键“F12”启用调试模式，在调试窗口中选择“控制台”菜单就能看到调试输出信息。例如，书写代码“console.log("调试信息")”，效果如图所示。调试信息效果1.3常量和变量1．常量常量可以被理解为一直不变的量，如圆周率。常量在被定义并赋初值后，在脚本的其他任何地方都不能改变。常量的定义语法格式如下：constname1=value1[,name2=value2[,...[,nameN=valueN]]];其中，nameN表示常量名称，可以是任意合法的标识符；valueN表示常量值，可以是任意合法的表达式。使用const定义常量“圆周率”的示例代码如下：constPI=3.14;（1）var变量。使用var命令定义的变量为var变量，无论在何处定义var变量，都在执行任何代码之前进行处理。使用var命令定义的变量的作用域是其当前的执行上下文，该变量可以是嵌套的函数，对于定义在任何函数外的变量来说是全局的。使用var命令定义变量的语法格式如下：1.3常量和变量varvarname1[=value1][,varname2[=value2]...[,varnameN[=valueN]]];其中，varnameN表示变量名，可以为任何合法标识符；valueN表示变量的初始化值，可以是任何合法的表达式，默认值为undefined。使用var命令定义变量的示例代码如下：vara=[];for(vari=0;i<10;i++){a[i]=function(){console.log(i);};}a[6]();（2）let变量。ES6新增了let命令，用来定义变量。与使用var命令定义的变量不同的是，使用var命令定义的是全局变量，而使用let命令定义的变量是块作用域的变量。将上面的示例改为使用let命令定义的变量，结果完全不同，代码如下：vara=[];for(leti=0;i<10;i++){a[i]=function(){console.log(i);};}a[6]();

transition属性是一个简写属性，用于设置以下4个过渡属性：transition-property、transition-duration、transition-timing-function、transition-delay，且书写顺序不能有误。transition属性可以设置多组过渡属性，每组过渡属性之间使用逗号分隔。例如：1.1.5transition属性<style>.box{width:100px;height:100px;background:coral;}.box:hover{width:200px;height:200px;transition:width2slinear,height3sease-in-out1s;}</style><divclass="box"></div>

数据类型分为基本数据类型和引用数据类型。基本数据类型包含数值型、字符串型、布尔型、null类型和undefined类型。1.4数据类型1．数值型数值型可分为整型和浮点型。整型可以使用十进制、八进制和十六进制，例如：letage=18;//十进制letage=018;//八进制Letage=0x15;//十六进制浮点型可以带小数点，分为标准格式和科学记数法格式，例如：letnum1=18.1;//标准格式letnum2=1.5E3;//科学记数法格式2．字符串型字符串型可以用来表示文本数据，如学生姓名、兴趣爱好等。在JavaScript中，需要使用单引号或双引号将字符串型数据包裹起来。例如：letmsg='我爱你，中国！';lethobby="运动促进大脑发育";letmsg1="我们都有一个家，名字叫'中国'"3．布尔型布尔型只有两个值，分别为true和false。布尔型变量通常用于判断语句，作为判断条件来决定程序的执行流程。4．null类型null类型是一个特殊类型，表示变量不指向任何对象。需要注意的是，JavaScript的空类型只能使用全小写形式的null。5．undefined类型undefined类型的变量表示这个变量已经被定义但是还没有被赋值。因为JavaScript在定义变量时并没有要求指定变量类型，只有在为变量赋值时才能确定变量类型，所以没有被赋值的变量是无法判断数据类型的。例如，下面代码定义的变量msg并没有被赋值，如果要输出该变量类型，将输出undefined类型。letmsgconsole.log(typeof(msg))1.4数据类型HTML1.5运算符运算符是指能完成一系列计算操作的符号。运算符可分为算术运算符、比较运算符、赋值运算符和逻辑运算符。1．算术运算符算术运算符主要用于加减乘除等算术运算。常见的算术运算符如表11-1所示。运算符描述示例+如果两个操作数是数字，就将两个数字相加；如果操作数中有一个是字符串，就对两个操作数执行拼接操作3+5//8"result="+5//result=5-相减操作8-2//6*乘法操作3*5//15/除法操作8/2//4%取模运算9%2//1++放在操作数之后，先引用后自增放在操作数之前，先自增后引用x=1;y=x++x=1;y=++x--放在操作数之后，先引用后自减放在操作数之前，先自减后引用x=2;y=x--//y=2x=1X=2;y=--x//y=1x=12．比较运算符比较运算符可以对两个操作数进行比较，比较的结果为布尔型值。常见的比较运算符如表所示。运算符描述示例<小于3<5//true<=小于或等于3<=8//true>大于5>2//true>=大于或等于5>=3//true==若值相等，则返回true，否则返回false"3"==3//true!=若值不相等，则返回true，否则返回false"3"!=3//false===若值和数据类型同时相等，则返回true，否则返回false"3"===3//false!==若值和数据类型中有一个不等，则返回true，否则返回false"3"!==3//true1.5运算符3．赋值运算符赋值运算符可以用于为变量和常量赋值。常见的赋值运算符如表所示。运算符描述示例=将右边表达式的值赋给左边的变量a=3+=将左边变量加上右边表达式的值赋给左边的变量a+=3//a=a+3-=将左边变量减去右边表达式的值赋给左边的变量a-=b//a=a-b*=将左边变量乘以右边表达式的值赋给左边的变量a*=2/=将左边变量除以右边表达式的值赋给左边的变量a/=2//a=a/2%=将左边变量除以右边表达式后取余数的值赋给左边的变量a%=2//a=a%24．逻辑运算符逻辑运算符通常用于多重判断条件的构造。常见的逻辑运算符如表所示。运算符描述示例&&逻辑与。当两个操作数均为true时，结果为true，否则为false3===3&&5==5//true||逻辑或。当有一个操作数为true时，结果为true，否则为false3==3||3==5//true！逻辑非。操作数的值取反!3===5//true1.6流程控制语句在没有书写流程控制语句的情况下，程序的代码是按照从上到下的顺序执行的。但是在现实生活中，人们在做一件事情的时候，需要有很多先决条件。例如，在过马路时，需要耐心等待绿灯亮起。在很多情况下，人们要达到既定的目标，需要多次实施任务，不断完善，精益求精，这时通常不能使用简单的顺序结构。下面主要介绍条件分支结构、循环结构。1.6流程控制语句1．条件分支结构条件分支结构可以根据不同的条件，选择执行不同的代码块。常见的条件分支结构主要有单分支结构、双分支结构和多分支结构。（1）单分支结构。单分支结构是指如果满足某种条件，则执行语句块，否则跳过语句块继续往下执行。其语法格式如下：

if(条件)

语句块;单分支结构的程序流程如图所示。单分支结构的程序流程leta,abs;if(a>=0)abs=a;示例代码如下：（2）双分支结构。双分支结构是指如果满足某种条件，则进行某种处理，否则进行另一种处理。其语法格式如下：if(判断条件){

执行语句1...}else{

执行语句2...}双分支结构的程序流程示例代码如下：leta,abs;if(a>=0)abs=a;elseabs=-a;1.6流程控制语句（3）多分支结构。多分支结构可以根据多个不同的条件进行不同的处理。其语法格式如下：if(判断条件1){

执行语句1}elseif(判断条件2){

执行语句2}...elseif(判断条件n){

执行语句n}else{

执行语句n+1}多分支结构的程序流程（4）switch多分支结构。switch多分支结构由一个switch控制表达式和多个case关键字组成。与if条件语句不同的是，switch多分支结构的控制表达式的结果类型只能是byte、short、char、int、String等类型，而不能是boolean类型。语法结构如下：switch(控制表达式){case目标值1:

执行语句1break;case目标值2:

执行语句2break;

．．．case目标值n:

执行语句nbreak;default:

执行语句n+1break;}1.6流程控制语句2．循环结构循环结构是指根据条件重复执行代码块。常用的循环结构有while循环、do…while循环和for循环。（1）while循环。while循环首先判断循环条件，如果为真，则执行循环体，否则退出循环体。其语法格式如下：while(循环条件){

执行语句...}while循环（模糊）的程序流程（2）do…while循环。do…while循环语句也被称为后测试循环语句，它和while循环语句的功能类似。while循环会先判断条件再执行循环体，而do…while循环会无条件先执行一次循环体再判断条件。其语法格式如下：do{

执行语句...}while(循环条件);do…while循环的程序流程

do…while循环的程序流程将前面的while循环示例改成do…while循环版本，代码如下：letn=0;letsum=0;do{n++;sum+=n;}while(n<3)Chrome浏览器（3）for循环。for循环是最常用的循环结构，一般用在循环次数已知的情况下，通常可以代替while循环。其语法格式如下：for（初始化表达式;循环条件;操作表达式）{

执行语句块}for循环的程序流程将前面的while循环示例改成for循环版本，代码如下：letsum=0;for（letn=0;n<3;n++）{sum+=n;}1.6流程控制语句其它浏览器1.6流程控制语句3．循环嵌套循环嵌套是指在一个循环语句的循环体中再定义一个循环语句的语法结构。在实际开发中，最常用的是for循环嵌套。双层for循环嵌套语法格式如下：for(初始化表达式;循环条件;操作表达式){...for(初始化表达式;循环条件;操作表达式){

执行语句...}...}在双层for循环嵌套中，外层循环每执行一轮，都要执行内层循环中的整个for循环，之后执行外层循环的第二轮，再执行内层循环中的整个for循环，以此类推，直至外层循环的循环条件不成立，才会跳出整个双层for循环嵌套。4．跳转语句跳转语句用于实现循环语句执行过程中程序流程的跳转。跳转语句有break语句和continue语句。（1）break语句。在switch多分支结构和循环结构语句中都可以使用break语句。当它出现在switch多分支结构语句中时，其作用是终止某个case分支并跳出switch多分支结构；当它出现在循环结构语句中时，其作用是跳出当前循环结构语句，执行后面的代码。（2）continue语句。continue语句用于循环结构语句，作用是终止本次循环，执行下一次循环。任务1JavaScript入门本任务应用条件分支结构语句和循环结构语句在控制台中输出100～999范围内的水仙花数，输出结果如图所示。水仙花数的输出结果1.7任务实施1.7任务实施（2）通过循环语句获取100～999的每个数。for(leti=100;i<1000;i++){}//i表示100～999的每个数（3）获取每个数的百位、十位、个位上的数值。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位数值letnum2=parseInt(i%100/10);//十位数值letnum3=parseInt(i%100%10);//个位数值}（4）将每个数的百位数值、十位数值、个位数值的三次幂相加。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位数值letnum2=parseInt(i%100/10);//十位数值letnum3=parseInt(i%100%10);//个位数值letsum=Math.pow(num1,3)+Math.pow(num2,3)+Math.pow(num3,3)//立方之和}（5）根据规则判断是否是水仙花数，如果是，则在控制台输出该值；如果不是，则进入下一个数值的获取及判断。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位数值letnum2=parseInt(i%100/10);//十位数值letnum3=parseInt(i%100%10);//个位数值letsum=Math.pow(num1,3)+Math.pow(num2,3)+Math.pow(num3,3)//立方之和if(sum==i){console.log(i)}}任务1JavaScript入门1.8任务拓展斐波那契数列指的是这样一个数列1,1,2,3,5,8,13,21,34,55,89,144,233，377........这个数列从第3项开始，每一项都等于前两项之和。使用JavaScript语言进行程序编写，在控制台输出斐波那契数列中的第37个数。轮播图设计任务2任务概述模块7中已经实现了企业官网首页广告栏的设计。在实际项目开发中，广告图通常不止1张，开发者需要将多张广告图轮换显示，这就是所谓的“轮播图”。本任务需要求实现手动切换广告图和自动切换广告图功能。任务2轮播图设计2.1

函数函数是指能实现特定功能的语句块。使用函数能增加代码的重用性。JavaScript中的函数分为内置函数和自定义函数两大类。1．内置函数内置函数是系统已经定义好，可以被直接使用的函数。在JavaScript中，内置函数主要有警告对话框函数、确认对话框函数、提示对话框函数、周期执行函数和定时器函数等。（1）警告对话框函数。使用alert()函数可以弹出警告对话框。警告对话框中只有“确认”按钮。alert()函数的语法格式如下：alert("警告信息")（2）确认对话框函数。使用confirm()函数可以弹出确认对话框。确认对话框中有“确认”和“取消”两个按钮。单击“确认”按钮返回ture，单击“取消”按钮返回false。（3）提示对话框函数。使用prompt()函数可以弹出提示对话框。提示对话框可以接收用户通过键盘输入的数据。需要注意的是，这里接收的输入数据是字符串型的，如果要进行算术运算，则需要先进行类型转换。2.1

函数（4）周期执行函数。使用setInterval()函数可以实现每隔一段时间就重复执行一段代码。例如，街上的霓虹灯就是每隔一段时间轮换点亮一盏。setInterval()函数的语法格式如下：setInterval(func,interval);其中，func表示要重复调用的函数，interval表示每次调用间隔的毫秒数。（5）定时器函数。使用setTimeout()函数可以设置一个定时器，该定时器在指定时间到期后执行一个函数或指定的一段代码。setTimeout()函数的语法格式如下：setTimeout(fun[,delay]);其中，func表示要执行的函数，delay表示延迟的毫秒数，默认为0。2．自定义函数自定义函数是根据业务需求定义的代码块，分为匿名函数和具名函数。匿名函数就是没有名字的函数，语法格式如下：function(){

alert("加油，中国！")};（2）具名函数。具名函数就是有名字的函数，可以使用函数名多次调用。其语法格式如下：function函数名([参数1],[参数2]...){

函数体;}2.2DOM对象操作DOM全称为DocumentObjectModel，即文档对象模型。一个HTML页面可以被还原成一棵DOM树。DOM树上的每一个节点都可以被称为DOM对象。下面介绍DOM对象的查找、增加、修改和删除操作。1．DOM对象的查找可以通过DOM对象的id、name、标签名、类名来查找DOM对象，具体方法如表所示。方法名描述document.getElementById()根据元素的id查找元素，因为id值唯一，因此查找出来的也是唯一的一个节点document.getElementsByName()根据给定的name返回一个节点集合document.getElementsByTagName()根据HTML标签名返回一个节点集合getElementsByClassName()根据类名返回一个节点集合document.querySelector()根据选择器返回第一个符合条件的节点document.querySelectorAll()根据选择器返回所有符合条件的节点集合2．DOM对象的增加document.createElement()方法用于创建一个由标签名指定的HTML元素（节点）。创建节点后，就需要把节点挂到DOM树上。例如，创建一个span节点，并将它插入到另一个id为childElement的节点之前，代码如下：//创建一个新的、普通的span元素varsp1=document.createElement("span");//插入节点之前，要获得节点的引用varsp2=document.getElementById("childElement");//获得父节点的引用varparentDiv=sp2.parentNode;//在sp2之前插入一个新元素parentDiv.insertBefore(sp1,sp2);2.2DOM对象操作3．DOM对象的修改选择DOM对象后，可以修改DOM对象的内容、样式等。可以通过style属性访问DOM对象的所有CSS属性，并修改属性值。例如，对id为div1的盒子修改字体颜色为红色，代码如下：document.querySelector("#div1").style.color="red"可以通过节点的innerHtml