HTML5+CSS3+JavaScript網(wǎng)頁(yè)開(kāi)發(fā)實(shí)戰(zhàn) 課件 模塊11 網(wǎng)頁(yè)交互功能設(shè)計(jì)

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

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

if(條件)

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

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

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

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

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

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

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

執(zhí)行語(yǔ)句1break;case目標(biāo)值2:

執(zhí)行語(yǔ)句2break;

．．．case目標(biāo)值n:

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

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

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

執(zhí)行語(yǔ)句...}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)結(jié)構(gòu)，一般用在循環(huán)次數(shù)已知的情況下，通?？梢源鎤hile循環(huán)。其語(yǔ)法格式如下：for（初始化表達(dá)式;循環(huán)條件;操作表達(dá)式）{

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

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

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

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

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

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