《JavaScript程序设计案例教程》课件_案例2.pptx

案例二、轮播图

学习目标知识链接案例实现效果演示目录

学完本章节应该能做到的事情学习目标壹

学习目标掌握使用Array创建数组的方法。掌握使用for遍历数组的方法。掌握有参函数的使用方法。PPT模板/moban/掌握JSON对象。理解DOM的涵义。会使用定时器setInterval。掌握鼠标的事件mouseout、mouseover和click。会遍历DOM树。能实现轮播图效果。

效果演示

完成本案例应该具备的知识知识链接贰

知识链接列表常量、变量定义、赋值。数组的定义与遍历(for)。有参函数定义与调用。PPT模板/moban/对象（JSON）的定义与遍历。定时器setInterval和clearInterval。onmouseout、onmouseover和onclick事件。DOM元素的遍历。getElementsByTagName和getElementById方法。

常量、变量定义、赋值1var01常量定义02变量定义constlet02变量定义

常量、变量定义、赋值1const定义的变量不可以修改，而且必须初始化。constb=2;//正确//constb;//错误，必须初始化console.log(函数外const定义b:’+b);//有输出值b=5;//此句报错，无法修改

常量、变量定义、赋值1var定义的变量可以修改，如果不初始化会输出undefined，不会报错。vara=1;console.log(函数外var定义a:+a);//可以输出a=1functionchange(){ a=4; console.log(函数内var定义a:+a);//可以输出a=4}change();console.log(函数调用后var定义a为函数内部修改值:’+a);//可以输出a=4

常量、变量定义、赋值1let是块级作用域，函数内部使用let定义后，对函数外部无影响。leta=1;console.log(函数外let定义a:+a);//可以输出a=1functionchange(){ leta=4; console.log(函数内let定义a:+a);//可以输出a=4}change();console.log(函数调用后let定义a不受函数内部变量的影响:’+a);//可以输出a=1

常量、变量定义、赋值1扩展：ES6新增的声明变量的关键字let，与var类似。与var对比：1.作用域不同2.不存在变量声明提升3.暂时性死区4.不允许重复声明{leta=10;varb=1;}console.log(a);//ReferenceError:aisnotdefined.console.log(b);//1console.log(a);//undefined,但是不报错。console.log(b);//ReferenceError:bisnotdefined.vara=2;letb=2;vara=123;{console.log(a);//ReferenceErrorleta;}//正确function(){vara=10;vara=1;}//报错，Duplicatedeclarationafunction(){leta=10;vara=1;}//报错,Duplicatedeclarationafunction(){leta=10;leta=1;}

数组的定义与遍历(for)2以Array定义数组的方法：数组对象的关键字是Array。它和字面量[]等价。vararr1=newArray();//定义元素个数为0的数组vararr2=newArray(a,2,true);//定义并初始化数组console.log(arr1,arr2);

数组的定义与遍历(for)2数组的遍历方法之一（以for循环遍历arrayFor.html）vararr2=newArray(a,2,true);//定义并初始化数组for(letm=0;marr2.length;m++){ console.log(arr2[m]);//访问数组元素}

有参函数定义与调用3function函数名([参数1,参数2,……]){函数体……}其定义语法是：定义函数时调用函数时无有参数名，有具体的值。有参数名，没有具体的值。

有参函数定义与调用3functionmyFunction(a,b){ console.log(a+b);}myFunction(7