《JavaScript程序設計案例教程》課件-案例2

案例二、輪播圖學習目標知識鏈接案例實現(xiàn)效果演示目錄學完本章節(jié)應該能做到的事情學習目標壹學習目標掌握使用Array創(chuàng)建數(shù)組的方法。掌握使用for遍歷數(shù)組的方法。掌握有參函數(shù)的使用方法。PPT模板/moban/掌握JSON對象。理解DOM的涵義。會使用定時器setInterval。掌握鼠標的事件mouseout、mouseover和click。會遍歷DOM樹。能實現(xiàn)輪播圖效果。效果演示完成本案例應該具備的知識知識鏈接貳知識鏈接列表常量、變量定義、賦值。數(shù)組的定義與遍歷(for)。有參函數(shù)定義與調(diào)用。PPT模板/moban/對象（JSON）的定義與遍歷。定時器setInterval和clearInterval。onmouseout、onmouseover和onclick事件。DOM元素的遍歷。getElementsByTagName和getElementById方法。常量、變量定義、賦值1var01常量定義02變量定義constlet02變量定義常量、變量定義、賦值1const定義的變量不可以修改，而且必須初始化。constb=2;//正確//constb;//錯誤，必須初始化console.log('函數(shù)外const定義b:’+b);//有輸出值b=5;//此句報錯，無法修改常量、變量定義、賦值1var定義的變量可以修改，如果不初始化會輸出undefined，不會報錯。vara=1;console.log('函數(shù)外var定義a:'+a);//可以輸出a=1functionchange(){ a=4; console.log('函數(shù)內(nèi)var定義a:'+a);//可以輸出a=4}change();console.log('函數(shù)調(diào)用后var定義a為函數(shù)內(nèi)部修改值:’+a);//可以輸出a=4常量、變量定義、賦值1let是塊級作用域，函數(shù)內(nèi)部使用let定義后，對函數(shù)外部無影響。leta=1;console.log('函數(shù)外let定義a:'+a);//可以輸出a=1functionchange(){ leta=4; console.log('函數(shù)內(nèi)let定義a:'+a);//可以輸出a=4}change();console.log('函數(shù)調(diào)用后let定義a不受函數(shù)內(nèi)部變量的影響:’+a);//可以輸出a=1常量、變量定義、賦值1擴展：ES6新增的聲明變量的關鍵字let，與var類似。與var對比：1.作用域不同2.不存在變量聲明提升3.暫時性死區(qū)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;}//報錯，Duplicatedeclaration"a"function(){leta=10;vara=1;}//報錯,Duplicatedeclaration"a"function(){leta=10;leta=1;}數(shù)組的定義與遍歷(for)2以Array定義數(shù)組的方法：數(shù)組對象的關鍵字是Array。它和字面量[]等價。vararr1=newArray();//定義元素個數(shù)為0的數(shù)組vararr2=newArray('a',2,true);//定義并初始化數(shù)組console.log(arr1,arr2);數(shù)組的定義與遍歷(for)2數(shù)組的遍歷方法之一（以for循環(huán)遍歷arrayFor.html）vararr2=newArray('a',2,true);//定義并初始化數(shù)組for(letm=0;m<arr2.length;m++){ console.log(arr2[m]);//訪問數(shù)組元素}有參函數(shù)定義與調(diào)用3function函數(shù)名([參數(shù)1,參數(shù)2,……]){

函數(shù)體……}其定義語法是：定義函數(shù)時調(diào)用函數(shù)時無有參數(shù)名，有具體的值。有參數(shù)名，沒有具體的值。有參函數(shù)定義與調(diào)用3functionmyFunction(a,b){ console.log(a+b);}

myFunction(7,9);對象（JSON）的定義與遍歷4一組JSON對象存放在數(shù)組中01對象形式02數(shù)組形式單個JSON對象，字面量表示方式JSON(JavaScriptObjectNotation)是一種輕量級的數(shù)據(jù)交換格式。常見用途：前端與后臺的數(shù)據(jù)交互。JSON數(shù)據(jù)常見的有兩種表現(xiàn)形式：對象（JSON）的定義與遍歷4forin遍歷JSON對象（JSONForIn.html）letperson={ "name":"Tom", "age":"18“ };for(varattrinperson){ console.log(person[attr]);//訪問屬性的方式一}console.log();//訪問屬性的方式二對象（JSON）的定義與遍歷4JSON數(shù)組演示（JSONArray.html）vararr=[{"name":"zhangsan","age":123},{"name":"wangwu","age":25}];varparn=arr[0].name+"今年的年齡是"+arr[1].age+”歲嗎？”;console.log(parn);定時器setInterval和clearInterval5語法格式：setInterval(JavaScript函數(shù),等待的毫秒數(shù))其返回值表示代表該定時器的句柄。setInterval語法格式：clearInterval(定時器句柄)其返回值無。注意:要使用clearInterval()方法,在創(chuàng)建執(zhí)行定時操作時要使用全局變量。clearInterval開始執(zhí)行代碼定時器setInterval和clearInterval5與setTimeout有什么區(qū)別？定時器setInterval和clearInterval5網(wǎng)頁不停地更換顏色，直到調(diào)用清除定時器（setInteval.html）。varhwnd=setInterval(function(){setColor()},300);

functionsetColor(){varx=document.body;x.style.backgroundColor=x.style.backgroundColor=="green"?"blue":"green";}

functionstopColor(){clearInterval(hwnd);}onmouseout、onmouseover和onclick事件6(1)onmouseover事件是指將光標移至元素上產(chǎn)生的事件。(2)onmouseout事件是指將光標從元素上離開時產(chǎn)生的事件。這2個事件往往是一起使用的，當光標移至元素上觸發(fā)一個事件，產(chǎn)生一些效果。而在光標離開元素后又觸發(fā)一個事件恢復原來的效果。onmouseout、onmouseover和onclick事件6當鼠標移動到表格行上時行的背景顏色改變，鼠標移走顏色恢復。（MouserEvent1.html）表格的HTML代碼省略。。。參考網(wǎng)頁文件<script> vartrs=document.getElementsByTagName('tr’); [].forEach.call(trs,function(row){ row.onmouseover=function(){ this.style.backgroundColor='gray'; }; row.onmouseout=function(){ this.style.backgroundColor='transparent'; };

});</script>onmouseout、onmouseover和onclick事件6好像還有個onmouseenter,它和onmouserover有什么區(qū)別呢？onmouseout、onmouseover和onclick事件6JS的click事件是最常用、最易用、一般最早接觸的事件，它在點擊鼠標時觸發(fā)。單擊事件演示<inputtype="button"value="點我點我"onclick="ds()"><script>functionds(){console.log(‘hi,Iamworld’);}</script>DOM元素的遍歷7遍歷的概念：JS中對HTML元素的遍歷指在DOM節(jié)點樹中沿著某條搜索路線，依次對樹中每個節(jié)點訪問，在這個過程中可能對節(jié)點進行元素特征的提取或修改。DOM節(jié)點屬性簡介childElementCount只讀屬性返回指定父元素的子元素的數(shù)量；返回的值包含子元素節(jié)點的數(shù)量，而不是所有子節(jié)點（如文本和注釋節(jié)點）的數(shù)量；firstElementChild只讀屬性返回指定的父元素的第一個子元素；如果父元素沒有子元素，則此方法將返回null值；lastElementChild只讀屬性返回指定的父元素的最后一個子元素；如果父元素沒有子元素，則此方法將返回null值;previousElementSibling只讀屬性在同一樹級別，返回指定元素的前一個元素；如果沒有先前的同級元素，則此屬性返回null；nextElementSibling屬性返回指定元素之后的下一個兄弟元素（相同節(jié)點樹層中的下一個元素節(jié)點），如果沒有后置的同級元素，則此屬性返回null。適用于DOM元素節(jié)點遍歷的方法DOM元素的遍歷7DOM遍歷（domBianli.html）--HTML結(jié)構<style>.this{background:red;}</style><div><pclass="this">第一段</p><p>第二段</p><p>第三段</p></div><buttononclick="toParent()">父元素</button><buttononclick="toFirstChild()">第一個子元素</button><buttononclick="toLastChild()">最后一個子元素</button><buttononclick="toPrev()">前一個元素</button><buttononclick="toNext()">后一個元素</button>DOM元素的遍歷7DOM遍歷（domBianli.html）--訪問父節(jié)點functiontoParent(){varcurrent=document.getElementsByClassName('this')[0];if(current.parentNode&¤t.parentNode!=document.body){current.className="";current.parentNode.className="this";}else{alert('已到頂級');}}DOM元素的遍歷7DOM遍歷（domBianli.html）--訪問第一個子節(jié)點functiontoFirstChild(){varcurrent=document.getElementsByClassName('this')[0];if(current.firstElementChild){current.className="";current.firstElementChild.className="this";}else{alert('無子元素');}}DOM元素的遍歷7DOM遍歷（domBianli.html）--訪問最后一個子節(jié)點functiontoLastChild(){varcurrent=document.getElementsByClassName('this')[0];if(current.lastElementChild){current.className="";current.lastElementChild.className="this";}else{alert('無子元素');}}DOM元素的遍歷7DOM遍歷（domBianli.html）--訪問前一個子節(jié)點functiontoPrev(){varcurrent=document.getElementsByClassName('this')[0];if(current.previousElementSibling){current.className="";current.previousElementSibling.className="this";}else{alert('無前元素');}}DOM元素的遍歷7DOM遍歷（domBianli.html）--訪問后一個子節(jié)點functiontoNext(){varcurrent=document.getElementsByClassName('this')[0];if(current.nextElementSibling){current.className="";current.nextElementSibling.className="this";}else{alert('無后元素');}}getElementsByTagName和getElementById方法8語法：document.getElementsByTagName(tagname)該方法可返回帶有指定標簽名的對象的集合。語法：document.getElementById(id)該方法可返回對擁有指定ID的第一個對象的引用。記憶幫助：以XX為依據(jù)獲取到元素（們）。getElementsByTagName和getElementById方法8getElementById演示（getElementById2.html）functionshowMe(){ document.getElementById("myHeader").innerHTML='是我在這里';}functionshowUs(){ varps=document.getElementsByTagName("p"); for(letonepofps){ onep.innerHTML='是我們'; }}<h1id="myHeader"onclick="showMe()">Thisisaheader</h1><ponclick="showUs()">I’map</p><ponclick="showUs()">I’maptoo</p>getElementsByTagName和getElementById方法8getElementsByTagName演示（getElementsByTagName.html）varflowers=document.getElementsByTagName('h1’);for(varone_flowerinflowers){ flowers[one_flower].style.border='1pxsolidred';}<h1>myheader1</h1><h2>myheader2</h2><p>myp</p>完成本章綜合案例案例實現(xiàn)貳設計思路1第一步：創(chuàng)建七幅圖片第二步：固定擺放這些圖片的位置、大小、透明度、遮擋關系第四步：加入按鈕控制第三步：讓它們動起來實現(xiàn)步驟--設計頁面架構2實現(xiàn)步驟--設計頁面架構2<divclass="wrap"id="wrap"> <ulclass="content"><listyle="background:url(images/1.jpg)"></li><listyle="background:url(images/2.jpg)"></li><listyle="background:url(images/3.jpg)"></li><listyle="background:url(images/4.jpg)"></li><listyle="background:url(images/5.jpg)"></li><listyle="background:url(images/6.jpg)"></li><listyle="background:url(images/7.jpg)"></li></ul> <ahref="javascript:;"class="prev"><</a> <ahref="javascript:;"class="next">></a></div>實現(xiàn)步驟--初步樣式設置2ul{ list-style:none;}.wrap{ position:relative; width:1200px; height:360px; margin:100pxauto;}.content{ position:absolute; width:100%; height:100%;}實現(xiàn)步驟--初始化圖片位置2固定好相框（即顯示圖片的地方），相框不動，動的是相框里的圖片。每個相框有大小、位置、透明度的屬性；相框與相框之間有遮擋關系。varpicSet=[{"top":60,"left":0,"width":400,"height":240,"zIndex":1,"opacity":0},{"top":60,"left":0,"width":400,"height":240,"zIndex":2,"opacity":40},{"top":30,"left":150,"width":500,"height":300,"zIndex":3,"opacity":70},{"top":0,"left":300,"width":600,"height":360,"zIndex":4,"opacity":100},{"top":30,"left":550,"width":500,"height":300,"zIndex":3,"opacity":70},{"top":60,"left":800,"width":400,"height":240,"zIndex":2,"opacity":40},{"top":60,"left":800,"width":400,"height":240,"zIndex":1,"opacity":0}];實現(xiàn)步驟--初始化圖片位置2把圖片擺放到相框里的過程：functionsetImageParam(liArr){for(vari=0;i<liArr.length;i++){letobj=liArr[i],json=picSet[i];//每個圖片對應一個位置

for(varkinjson){//通過遍歷JSON屬性的方法設置每一個圖片的狀態(tài)

if(k=='zIndex'){obj.style[k]=json[k];}elseif(k=='opacity'){obj.style[k]=json[k]/100;obj.style.filter='alpha(opacity='+json[k]+')';}else{obj.style[k]=json[k]+'px';}}}}實現(xiàn)步驟--初始化圖片位置2在頁面加載完成時應該擺放一次圖片：window.onload=function(){varwrap=document.getElementById('wrap');varcont=wrap.firstElementChild||wrap.firstChild;varliArr=cont.children;

。。。//此處省略了與輪播和控制按鈕有關的代碼

setImageParam(liArr);//初始化顯示。。。//此處省略了與輪播和控制按鈕有關的代碼}實現(xiàn)步驟--初始化圖片位置2這部分代碼完成后，圖片已經(jīng)就位，但是它們?nèi)匀徊粫?。實現(xiàn)步驟--實現(xiàn)動畫輪播功能2不停地更換圖片顯示到不同的相框01CSS的作用02JS腳本的作用自動實現(xiàn)動畫，不需要我們控制動畫過程實現(xiàn)步驟--實現(xiàn)動畫輪播功能2.contentli{position:absolute;background-size:100%100%!important;cursor:pointer;box-shadow:0px0px5pxrgba(0,0,0,0.4);transition:all1s;//設置過渡動畫}樣式部分：實現(xiàn)步驟--實現(xiàn)動畫輪播功能2window.onload=function(){。。。functionrun(){ if(wrap.timer)clearInterval(wrap.timer); wrap.timer=setInterval(function(){ move(true); },2000);}functionmove(bool){ if(bool){ picSet.unshift(picSet.pop());//最后一個元素移動到最前，向左移

}else{ picSet.push(picSet.shift());//最前的元素移動到最后，向右移

} setImageParam(liArr);//按照新的狀態(tài)順序設置圖片}setImageParam(liArr);//初始化顯示run();//啟動動畫}腳本部分：（代碼較多，此處僅列出關鍵代碼）實現(xiàn)