JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 使用流程控制与数组实现自动轮播的Banner图任务3-知识储备

项目1搭建智慧公寓网站首页任务1-3使用流程控制与数组实现自动轮播的Banner图1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势知识储备流程控制：选择结构与循环结构数组基础：定义与访问数组、数组的基本操作HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.1流程控制流程控制语句主要可以分为三类，即顺序结构、选择结构和循环结构。1.选择结构：if语句、if…else语句、if…elseif…else语句和switch语句4类。（1）if语句if(条件表达式){代码块1;}代码块2;HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.1流程控制（2）if...else语句if(条件表达式){代码块1;}else{代码块2;}（3）if…elseif…else语句if(条件表达式1){代码段1}elseif(条件表达式2){代码段2}...elseif(条件表达式n){代码段n}else{代码段n+1}HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.1流程控制（4）switch语句switch(表达式){case值1:代码段1;break;case值2代码段2;break;...default:代码段n;}使用switch语句判断变量day的值并执行相应的输出语句。以星期一为例，当day的值为“Monday”时，则输出“今天是星期一”。若没有与day变量的值相等的case值，则输出“无效信息”。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.1流程控制2.循环结构：for语句、while语句。（1）for语句for(初始化变量;条件表达式;操作表达式){循环体}【例1-28】使用for语句循环打印数字1到10。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.1流程控制2.循环结构（2）while语句while(条件表达式){循环体}使用while语句重构循环打印数字1到10。leti=1;while(i<=10){document.write(i);if(i<10){document.write("、");}i++;}//输出结果：1、2、3、4、5、6、7、8、9、10HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.1流程控制2.循环结构（3）跳转语句循环语句一般会根据设置好的循环终止条件停止执行，在循环执行过程中，若需要跳出本次循环或跳出整个循环，就需要用到跳转语句。常用的跳转语句有continue和break语句。break语句用于立即退出包含它的最内层循环或标签语句。在for或while语句中，如果遇到break语句，循环会立即终止，程序会继续执行紧接在循环之后的代码。continue语句用于跳过当前循环的剩余部分，并开始下一次迭代。在for或while语句中，如果遇到continue语句，当前循环的剩余部分将不会被执行，并且会立即开始下一次循环迭代。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.2数组基础数组是一种线性数据结构，用于存储一系列相同类型的元素。1.定义与访问数组（1）newArray()方式vararr1=newArray();vararr2=newArray(2);//包含2个空元素的数组vararr3=newArray('今天','明天');//含有2个元素（2）数组字面量方式varempty=[];//[]相当于newArray()vararr4=['读书','运动','画画'];//含有3个元素HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.2数组基础1.定义与访问数组（3）访问数组vararr=['A','B',22.48,true];console.log(arr);//访问并输出整个数组console.log(arr[0]);//访问并输出数组中第1个元素console.log(arr[2]);//访问并输出数组中第3个元素HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.2数组基础2.数组基本操作:获取数组长度、添加数组元素、删除数组元素、遍历数组。（1）获取数组长度vararr1=[78,88,98];console.log(arr1.length);//输出结果：3（2）添加数组元素vararray=[1,2,7];array.push(4);array.unshift(0);array[5]=8;//该方式也可用于修改数组元素值console.log(array);//输出结果：[0、1、2、7、4、8]HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.3.2数组基础2.数组基本操作（3）删除数组元素array.pop()array.shift();array.splice(startIndex,deleteCount,item);使用pop方法删除数组末尾的元素，使用shift方法删除数组开头的元素，使用splice方法删除任意位置的元素（4）遍历数组forEach方