HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實戰(zhàn) 課件 模塊11 網(wǎng)頁交互功能設計

模塊11網(wǎng)頁交互功能設計本模塊主要介紹JavaScript的基本語法和DOM對象操作，并利用JavaScript實現(xiàn)網(wǎng)頁輪播圖的手動切換廣告圖和自動切換廣告圖功能。JavaScript入門任務1任務概述水仙花數(shù)是指一個三位數(shù)，它的每個數(shù)位上的數(shù)字的3次冪之和等于它本身（例如：13+53+33=153）。本任務要求在控制臺中輸出100～999范圍內(nèi)的水仙花數(shù)，并通過該任務的實施熟悉并掌握JavaScript基本語法。任務1JavaScript入門JavaScript入門JavaScript是一種具有函數(shù)優(yōu)先的輕量級、解釋型、即時編譯型的編程語言，它作為開發(fā)Web頁面的腳本語言而聞名。JavaScript在1995年由Netscape公司的BrendanEich在網(wǎng)景導航者瀏覽器上首次設計實現(xiàn)而成。因為Netscape公司與Sun公司合作，Netscape管理層希望其外觀看起來像Java，所以將其取名為JavaScript。JavaScript的標準是ECMAScript。2015年6月17日，ECMA國際組織發(fā)布了ECMAScript的第六版，該版本正式名稱為ECMAScript2015，但通常被稱為ECMAScript6或ES2015。1.1JavaScript代碼引入方式在網(wǎng)頁中引入JavaScript有3種常見方式，分別是外部引入、內(nèi)部引入和行內(nèi)引入。1．外部引入外部引入指的是將JavaScript程序單獨寫為一個擴展名為js的文件，并在HTML文件的head部分通過一個語句進行導入。其中，src屬性的值是JavaScript文件的完整相對路徑。<scripttype="text/javascript"src="路徑/文件名.js"></script>2．內(nèi)部引入內(nèi)部引入指的是在HTML文件的head部分單獨劃分區(qū)域來書寫JavaScript代碼，且書寫在<script>和</script>標簽之間。<scripttype="text/javascript">內(nèi)部JavaScript代碼</script>3．行內(nèi)引入行內(nèi)引入指的是在HTML代碼中嵌入JavaScript代碼。嵌入的代碼必須以“JavaScript:”開頭。<inputtype="button"value="行內(nèi)引入方式"onclick="JavaScript:alert('我是行內(nèi)引入方式');">1.2JavaScript的輸出JavaScript的輸出可用于頁面彈窗警告、頁面寫入、控制臺交互測試等，JavaScript的常用輸出有如下幾種方式。1．調(diào)用window.alert()方法彈出警告框調(diào)用window對象的alert()方法可以彈出警告框。例如，書寫代碼“window.alert("請先登錄后操作！")”，運行網(wǎng)頁，彈出警告框，效果如圖所示。警告框效果2．調(diào)用document.write()方法將內(nèi)容寫入HTML文件調(diào)用document對象的write()方法，可以將內(nèi)容嵌入HTML代碼中進行輸出。例如，書寫代碼“document.write("請先注冊后登錄！")”，運行網(wǎng)頁，網(wǎng)頁文件中就會出現(xiàn)“請先注冊后登錄！”文字內(nèi)容。3．調(diào)用console.log()方法將內(nèi)容寫入瀏覽器的控制臺調(diào)用console對象的log()方法可以將內(nèi)容寫入瀏覽器的控制臺，通?？梢允褂眠@種方法進行程序調(diào)試輸出。在瀏覽器中使用快捷鍵“F12”啟用調(diào)試模式，在調(diào)試窗口中選擇“控制臺”菜單就能看到調(diào)試輸出信息。例如，書寫代碼“console.log("調(diào)試信息")”，效果如圖所示。調(diào)試信息效果1.3常量和變量1．常量常量可以被理解為一直不變的量，如圓周率。常量在被定義并賦初值后，在腳本的其他任何地方都不能改變。常量的定義語法格式如下：constname1=value1[,name2=value2[,...[,nameN=valueN]]];其中，nameN表示常量名稱，可以是任意合法的標識符；valueN表示常量值，可以是任意合法的表達式。使用const定義常量“圓周率”的示例代碼如下：constPI=3.14;（1）var變量。使用var命令定義的變量為var變量，無論在何處定義var變量，都在執(zhí)行任何代碼之前進行處理。使用var命令定義的變量的作用域是其當前的執(zhí)行上下文，該變量可以是嵌套的函數(shù)，對于定義在任何函數(shù)外的變量來說是全局的。使用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>

數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型?；緮?shù)據(jù)類型包含數(shù)值型、字符串型、布爾型、null類型和undefined類型。1.4數(shù)據(jù)類型1．數(shù)值型數(shù)值型可分為整型和浮點型。整型可以使用十進制、八進制和十六進制，例如：letage=18;//十進制letage=018;//八進制Letage=0x15;//十六進制浮點型可以帶小數(shù)點，分為標準格式和科學記數(shù)法格式，例如：letnum1=18.1;//標準格式letnum2=1.5E3;//科學記數(shù)法格式2．字符串型字符串型可以用來表示文本數(shù)據(jù)，如學生姓名、興趣愛好等。在JavaScript中，需要使用單引號或雙引號將字符串型數(shù)據(jù)包裹起來。例如：letmsg='我愛你，中國！';lethobby="運動促進大腦發(fā)育";letmsg1="我們都有一個家，名字叫'中國'"3．布爾型布爾型只有兩個值，分別為true和false。布爾型變量通常用于判斷語句，作為判斷條件來決定程序的執(zhí)行流程。4．null類型null類型是一個特殊類型，表示變量不指向任何對象。需要注意的是，JavaScript的空類型只能使用全小寫形式的null。5．undefined類型undefined類型的變量表示這個變量已經(jīng)被定義但是還沒有被賦值。因為JavaScript在定義變量時并沒有要求指定變量類型，只有在為變量賦值時才能確定變量類型，所以沒有被賦值的變量是無法判斷數(shù)據(jù)類型的。例如，下面代碼定義的變量msg并沒有被賦值，如果要輸出該變量類型，將輸出undefined類型。letmsgconsole.log(typeof(msg))1.4數(shù)據(jù)類型HTML1.5運算符運算符是指能完成一系列計算操作的符號。運算符可分為算術運算符、比較運算符、賦值運算符和邏輯運算符。1．算術運算符算術運算符主要用于加減乘除等算術運算。常見的算術運算符如表11-1所示。運算符描述示例+如果兩個操作數(shù)是數(shù)字，就將兩個數(shù)字相加；如果操作數(shù)中有一個是字符串，就對兩個操作數(shù)執(zhí)行拼接操作3+5//8"result="+5//result=5-相減操作8-2//6*乘法操作3*5//15/除法操作8/2//4%取模運算9%2//1++放在操作數(shù)之后，先引用后自增放在操作數(shù)之前，先自增后引用x=1;y=x++x=1;y=++x--放在操作數(shù)之后，先引用后自減放在操作數(shù)之前，先自減后引用x=2;y=x--//y=2x=1X=2;y=--x//y=1x=12．比較運算符比較運算符可以對兩個操作數(shù)進行比較，比較的結果為布爾型值。常見的比較運算符如表所示。運算符描述示例<小于3<5//true<=小于或等于3<=8//true>大于5>2//true>=大于或等于5>=3//true==若值相等，則返回true，否則返回false"3"==3//true!=若值不相等，則返回true，否則返回false"3"!=3//false===若值和數(shù)據(jù)類型同時相等，則返回true，否則返回false"3"===3//false!==若值和數(shù)據(jù)類型中有一個不等，則返回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%=將左邊變量除以右邊表達式后取余數(shù)的值賦給左邊的變量a%=2//a=a%24．邏輯運算符邏輯運算符通常用于多重判斷條件的構造。常見的邏輯運算符如表所示。運算符描述示例&&邏輯與。當兩個操作數(shù)均為true時，結果為true，否則為false3===3&&5==5//true||邏輯或。當有一個操作數(shù)為true時，結果為true，否則為false3==3||3==5//true！邏輯非。操作數(shù)的值取反!3===5//true1.6流程控制語句在沒有書寫流程控制語句的情況下，程序的代碼是按照從上到下的順序執(zhí)行的。但是在現(xiàn)實生活中，人們在做一件事情的時候，需要有很多先決條件。例如，在過馬路時，需要耐心等待綠燈亮起。在很多情況下，人們要達到既定的目標，需要多次實施任務，不斷完善，精益求精，這時通常不能使用簡單的順序結構。下面主要介紹條件分支結構、循環(huán)結構。1.6流程控制語句1．條件分支結構條件分支結構可以根據(jù)不同的條件，選擇執(zhí)行不同的代碼塊。常見的條件分支結構主要有單分支結構、雙分支結構和多分支結構。（1）單分支結構。單分支結構是指如果滿足某種條件，則執(zhí)行語句塊，否則跳過語句塊繼續(xù)往下執(zhí)行。其語法格式如下：

if(條件)

語句塊;單分支結構的程序流程如圖所示。單分支結構的程序流程leta,abs;if(a>=0)abs=a;示例代碼如下：（2）雙分支結構。雙分支結構是指如果滿足某種條件，則進行某種處理，否則進行另一種處理。其語法格式如下：if(判斷條件){

執(zhí)行語句1...}else{

執(zhí)行語句2...}雙分支結構的程序流程示例代碼如下：leta,abs;if(a>=0)abs=a;elseabs=-a;1.6流程控制語句（3）多分支結構。多分支結構可以根據(jù)多個不同的條件進行不同的處理。其語法格式如下：if(判斷條件1){

執(zhí)行語句1}elseif(判斷條件2){

執(zhí)行語句2}...elseif(判斷條件n){

執(zhí)行語句n}else{

執(zhí)行語句n+1}多分支結構的程序流程（4）switch多分支結構。switch多分支結構由一個switch控制表達式和多個case關鍵字組成。與if條件語句不同的是，switch多分支結構的控制表達式的結果類型只能是byte、short、char、int、String等類型，而不能是boolean類型。語法結構如下：switch(控制表達式){case目標值1:

執(zhí)行語句1break;case目標值2:

執(zhí)行語句2break;

．．．case目標值n:

執(zhí)行語句nbreak;default:

執(zhí)行語句n+1break;}1.6流程控制語句2．循環(huán)結構循環(huán)結構是指根據(jù)條件重復執(zhí)行代碼塊。常用的循環(huán)結構有while循環(huán)、do…while循環(huán)和for循環(huán)。（1）while循環(huán)。while循環(huán)首先判斷循環(huán)條件，如果為真，則執(zhí)行循環(huán)體，否則退出循環(huán)體。其語法格式如下：while(循環(huán)條件){

執(zhí)行語句...}while循環(huán)（模糊）的程序流程（2）do…while循環(huán)。do…while循環(huán)語句也被稱為后測試循環(huán)語句，它和while循環(huán)語句的功能類似。while循環(huán)會先判斷條件再執(zhí)行循環(huán)體，而do…while循環(huán)會無條件先執(zhí)行一次循環(huán)體再判斷條件。其語法格式如下：do{

執(zhí)行語句...}while(循環(huán)條件);do…while循環(huán)的程序流程

do…while循環(huán)的程序流程將前面的while循環(huán)示例改成do…while循環(huán)版本，代碼如下：letn=0;letsum=0;do{n++;sum+=n;}while(n<3)Chrome瀏覽器（3）for循環(huán)。for循環(huán)是最常用的循環(huán)結構，一般用在循環(huán)次數(shù)已知的情況下，通?？梢源鎤hile循環(huán)。其語法格式如下：for（初始化表達式;循環(huán)條件;操作表達式）{

執(zhí)行語句塊}for循環(huán)的程序流程將前面的while循環(huán)示例改成for循環(huán)版本，代碼如下：letsum=0;for（letn=0;n<3;n++）{sum+=n;}1.6流程控制語句其它瀏覽器1.6流程控制語句3．循環(huán)嵌套循環(huán)嵌套是指在一個循環(huán)語句的循環(huán)體中再定義一個循環(huán)語句的語法結構。在實際開發(fā)中，最常用的是for循環(huán)嵌套。雙層for循環(huán)嵌套語法格式如下：for(初始化表達式;循環(huán)條件;操作表達式){...for(初始化表達式;循環(huán)條件;操作表達式){

執(zhí)行語句...}...}在雙層for循環(huán)嵌套中，外層循環(huán)每執(zhí)行一輪，都要執(zhí)行內(nèi)層循環(huán)中的整個for循環(huán)，之后執(zhí)行外層循環(huán)的第二輪，再執(zhí)行內(nèi)層循環(huán)中的整個for循環(huán)，以此類推，直至外層循環(huán)的循環(huán)條件不成立，才會跳出整個雙層for循環(huán)嵌套。4．跳轉(zhuǎn)語句跳轉(zhuǎn)語句用于實現(xiàn)循環(huán)語句執(zhí)行過程中程序流程的跳轉(zhuǎn)。跳轉(zhuǎn)語句有break語句和continue語句。（1）break語句。在switch多分支結構和循環(huán)結構語句中都可以使用break語句。當它出現(xiàn)在switch多分支結構語句中時，其作用是終止某個case分支并跳出switch多分支結構；當它出現(xiàn)在循環(huán)結構語句中時，其作用是跳出當前循環(huán)結構語句，執(zhí)行后面的代碼。（2）continue語句。continue語句用于循環(huán)結構語句，作用是終止本次循環(huán)，執(zhí)行下一次循環(huán)。任務1JavaScript入門本任務應用條件分支結構語句和循環(huán)結構語句在控制臺中輸出100～999范圍內(nèi)的水仙花數(shù)，輸出結果如圖所示。水仙花數(shù)的輸出結果1.7任務實施1.7任務實施（2）通過循環(huán)語句獲取100～999的每個數(shù)。for(leti=100;i<1000;i++){}//i表示100～999的每個數(shù)（3）獲取每個數(shù)的百位、十位、個位上的數(shù)值。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位數(shù)值letnum2=parseInt(i%100/10);//十位數(shù)值letnum3=parseInt(i%100%10);//個位數(shù)值}（4）將每個數(shù)的百位數(shù)值、十位數(shù)值、個位數(shù)值的三次冪相加。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位數(shù)值letnum2=parseInt(i%100/10);//十位數(shù)值letnum3=parseInt(i%100%10);//個位數(shù)值letsum=Math.pow(num1,3)+Math.pow(num2,3)+Math.pow(num3,3)//立方之和}（5）根據(jù)規(guī)則判斷是否是水仙花數(shù)，如果是，則在控制臺輸出該值；如果不是，則進入下一個數(shù)值的獲取及判斷。for(leti=100;i<1000;i++){letnum1=parseInt(i/100);//百位數(shù)值letnum2=parseInt(i%100/10);//十位數(shù)值letnum3=parseInt(i%100%10);//個位數(shù)值letsum=Math.pow(num1,3)+Math.pow(num2,3)+Math.pow(num3,3)//立方之和if(sum==i){console.log(i)}}任務1JavaScript入門1.8任務拓展斐波那契數(shù)列指的是這樣一個數(shù)列1,1,2,3,5,8,13,21,34,55,89,144,233，377........這個數(shù)列從第3項開始，每一項都等于前兩項之和。使用JavaScript語言進行程序編寫，在控制臺輸出斐波那契數(shù)列中的第37個數(shù)。輪播圖設計任務2任務概述模塊7中已經(jīng)實現(xiàn)了企業(yè)官網(wǎng)首頁廣告欄的設計。在實際項目開發(fā)中，廣告圖通常不止1張，開發(fā)者需要將多張廣告圖輪換顯示，這就是所謂的“輪播圖”。本任務需要求實現(xiàn)手動切換廣告圖和自動切換廣告圖功能。任務2輪播圖設計2.1

函數(shù)函數(shù)是指能實現(xiàn)特定功能的語句塊。使用函數(shù)能增加代碼的重用性。JavaScript中的函數(shù)分為內(nèi)置函數(shù)和自定義函數(shù)兩大類。1．內(nèi)置函數(shù)內(nèi)置函數(shù)是系統(tǒng)已經(jīng)定義好，可以被直接使用的函數(shù)。在JavaScript中，內(nèi)置函數(shù)主要有警告對話框函數(shù)、確認對話框函數(shù)、提示對話框函數(shù)、周期執(zhí)行函數(shù)和定時器函數(shù)等。（1）警告對話框函數(shù)。使用alert()函數(shù)可以彈出警告對話框。警告對話框中只有“確認”按鈕。alert()函數(shù)的語法格式如下：alert("警告信息")（2）確認對話框函數(shù)。使用confirm()函數(shù)可以彈出確認對話框。確認對話框中有“確認”和“取消”兩個按鈕。單擊“確認”按鈕返回ture，單擊“取消”按鈕返回false。（3）提示對話框函數(shù)。使用prompt()函數(shù)可以彈出提示對話框。提示對話框可以接收用戶通過鍵盤輸入的數(shù)據(jù)。需要注意的是，這里接收的輸入數(shù)據(jù)是字符串型的，如果要進行算術運算，則需要先進行類型轉(zhuǎn)換。2.1

函數(shù)（4）周期執(zhí)行函數(shù)。使用setInterval()函數(shù)可以實現(xiàn)每隔一段時間就重復執(zhí)行一段代碼。例如，街上的霓虹燈就是每隔一段時間輪換點亮一盞。setInterval()函數(shù)的語法格式如下：setInterval(func,interval);其中，func表示要重復調(diào)用的函數(shù)，interval表示每次調(diào)用間隔的毫秒數(shù)。（5）定時器函數(shù)。使用setTimeout()函數(shù)可以設置一個定時器，該定時器在指定時間到期后執(zhí)行一個函數(shù)或指定的一段代碼。setTimeout()函數(shù)的語法格式如下：setTimeout(fun[,delay]);其中，func表示要執(zhí)行的函數(shù)，delay表示延遲的毫秒數(shù)，默認為0。2．自定義函數(shù)自定義函數(shù)是根據(jù)業(yè)務需求定義的代碼塊，分為匿名函數(shù)和具名函數(shù)。匿名函數(shù)就是沒有名字的函數(shù)，語法格式如下：function(){

alert("加油，中國！")};（2）具名函數(shù)。具名函數(shù)就是有名字的函數(shù)，可以使用函數(shù)名多次調(diào)用。其語法格式如下：function函數(shù)名([參數(shù)1],[參數(shù)2]...){

函數(shù)體;}2.2DOM對象操作DOM全稱為DocumentObjectModel，即文檔對象模型。一個HTML頁面可以被還原成一棵DOM樹。DOM樹上的每一個節(jié)點都可以被稱為DOM對象。下面介紹DOM對象的查找、增加、修改和刪除操作。1．DOM對象的查找可以通過DOM對象的id、name、標簽名、類名來查找DOM對象，具體方法如表所示。方法名描述document.getElementById()根據(jù)元素的id查找元素，因為id值唯一，因此查找出來的也是唯一的一個節(jié)點document.getElementsByName()根據(jù)給定的name返回一個節(jié)點集合document.getElementsByTagName()根據(jù)HTML標簽名返回一個節(jié)點集合getElementsByClassName()根據(jù)類名返回一個節(jié)點集合document.querySelector()根據(jù)選擇器返回第一個符合條件的節(jié)點document.querySelectorAll()根據(jù)選擇器返回所有符合條件的節(jié)點集合2．DOM對象的增加document.createElement()方法用于創(chuàng)建一個由標簽名指定的HTML元素（節(jié)點）。創(chuàng)建節(jié)點后，就需要把節(jié)點掛到DOM樹上。例如，創(chuàng)建一個span節(jié)點，并將它插入到另一個id為childElement的節(jié)點之前，代碼如下：//創(chuàng)建一個新的、普通的span元素varsp1=document.createElement("span");//插入節(jié)點之前，要獲得節(jié)點的引用varsp2=document.getElementById("childElement");//獲得父節(jié)點的引用varparentDiv=sp2.parentNode;//在sp2之前插入一個新元素parentDiv.insertBefore(sp1,sp2);2.2DOM對象操作3．DOM對象的修改選擇DOM對象后，可以修改DOM對象的內(nèi)容、樣式等?？梢酝ㄟ^style屬性訪問DOM對象的所有CSS屬性，并修改屬性值。例如，對id為div1的盒子修改字體顏色為紅色，代碼如下：document.querySelector("#div1").style.color="red"可以通過節(jié)點的innerHtml