《Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)與制作》課件-項(xiàng)目十一 制作飾品公司網(wǎng)站首頁(yè)-應(yīng)用 JavaScript 制作網(wǎng)頁(yè)特效

任務(wù)1認(rèn)識(shí)JavaScript任務(wù)2更新飾品公司網(wǎng)站首頁(yè)——用JavaScript制作網(wǎng)頁(yè)特效項(xiàng)目十一?制作飾品公司網(wǎng)站首頁(yè)——應(yīng)用JavaScript制作網(wǎng)頁(yè)特效任務(wù)1?認(rèn)識(shí)JavaScript◆了解JavaScript的發(fā)展過(guò)程◆理解JavaScript的特點(diǎn)一、JavaScript簡(jiǎn)介JavaScript是一種基于對(duì)象的腳本語(yǔ)言，使用它可以開(kāi)發(fā)Internet客戶(hù)端的應(yīng)用程序。JavaScript在HTML頁(yè)面中以語(yǔ)句的方式出現(xiàn)，并且執(zhí)行相應(yīng)的操作。JavaScript是一種基于客戶(hù)端瀏覽器的語(yǔ)言，有了JavaScript便可以使網(wǎng)頁(yè)變得生動(dòng)。使用它的目的是與HTML和其他腳本語(yǔ)言一起實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)中鏈接多個(gè)對(duì)象，與網(wǎng)絡(luò)客戶(hù)交互作用，從而開(kāi)發(fā)客戶(hù)端的應(yīng)用程序。它是通過(guò)被嵌入或調(diào)入標(biāo)準(zhǔn)的HTML中來(lái)實(shí)現(xiàn)的。二、JavaScript的特點(diǎn)1.簡(jiǎn)單性JavaScript是一種腳本編寫(xiě)語(yǔ)言，采用小程序段的方式實(shí)現(xiàn)編程。像其他腳本語(yǔ)言一樣，JavaScript同樣是一種解釋性語(yǔ)言，提供了一個(gè)簡(jiǎn)易的開(kāi)發(fā)過(guò)程。它不需要先編譯，而是在程序運(yùn)行過(guò)程中被逐行解釋。2.動(dòng)態(tài)性相對(duì)于HTML和CSS語(yǔ)言的靜態(tài)而言，JavaScript是動(dòng)態(tài)的，它可以直接對(duì)用戶(hù)或客戶(hù)輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web服務(wù)程序。3.跨平臺(tái)性JavaScript是依賴(lài)于瀏覽器本身、與操作環(huán)境無(wú)關(guān)的腳本語(yǔ)言。只要瀏覽器支持JavaScript，計(jì)算機(jī)就可以正確執(zhí)行它。4.安全性JavaScript被設(shè)計(jì)為通過(guò)瀏覽器來(lái)處理并顯示信息，但它不能修改其他文件中的內(nèi)容。5.節(jié)省CGI的交互時(shí)間JavaScript是一種基于客戶(hù)端瀏覽器的語(yǔ)言，用戶(hù)在瀏覽的過(guò)程中填表、驗(yàn)證的交互過(guò)程只是通過(guò)瀏覽器對(duì)調(diào)入HTML文檔中的JavaScript源代碼進(jìn)行解釋執(zhí)行來(lái)完成的，即使是必須調(diào)用CGI的部分，瀏覽器只將用戶(hù)輸入驗(yàn)證后的信息提交給遠(yuǎn)程的服務(wù)器，大大減少了服務(wù)器的負(fù)載。三、JavaScript與CSSJavaScript與CSS都是可以直接在客戶(hù)端瀏覽器解析并執(zhí)行的腳本語(yǔ)言，通常意義上認(rèn)為CSS是靜態(tài)的樣式設(shè)定，而JavaScript則是動(dòng)態(tài)地實(shí)現(xiàn)各種功能。其中，CSS分別設(shè)置鼠標(biāo)指針沒(méi)有經(jīng)過(guò)時(shí)的樣式和鼠標(biāo)指針經(jīng)過(guò)時(shí)的樣式，JavaScript則動(dòng)態(tài)地判斷鼠標(biāo)指針的位置，從而調(diào)用不同的CSS樣式。任務(wù)2?更新飾品公司網(wǎng)站首頁(yè)——用JavaScript制作網(wǎng)頁(yè)特效◆理解JavaScript的基本語(yǔ)法◆掌握J(rèn)avaScript基本語(yǔ)句的使用方法◆掌握J(rèn)avaScript常用函數(shù)的使用方法◆理解JavaScript語(yǔ)言的交互性和動(dòng)態(tài)性◆掌握利用JavaScript語(yǔ)言制作網(wǎng)頁(yè)特效的方法一、數(shù)據(jù)類(lèi)型和變量1.數(shù)據(jù)類(lèi)型下面對(duì)各種數(shù)據(jù)類(lèi)型分別進(jìn)行介紹。string字符串類(lèi)型：字符串是用單引號(hào)或雙引號(hào)來(lái)說(shuō)明的（可以使用單引號(hào)來(lái)輸入包含雙引號(hào)的字符串，反之亦然），其內(nèi)容為如“網(wǎng)頁(yè)設(shè)計(jì)”“NextStation”和“CSS樣式設(shè)計(jì)”等文本。數(shù)值數(shù)據(jù)類(lèi)型：JavaScript支持整數(shù)和浮點(diǎn)數(shù)，整數(shù)可以為正數(shù)、0或者負(fù)數(shù)；浮點(diǎn)數(shù)可以包含小數(shù)點(diǎn)，也可以包含一個(gè)“e”（大小寫(xiě)均可，在科學(xué)記數(shù)法中表示“10的冪”），或者同時(shí)包含這兩項(xiàng)。boolean（布爾）類(lèi)型：可能的boolean值有true和false。這是兩個(gè)特殊值，不能用作1和0。undefined數(shù)據(jù)類(lèi)型：一個(gè)為undefined的值就是指在變量被創(chuàng)建后，未給該變量賦值時(shí)具有的值。null數(shù)據(jù)類(lèi)型：null值指沒(méi)有任何值，什么也不表示。object類(lèi)型：除了上面提到的各種常用類(lèi)型外，對(duì)象也是JavaScript中的重要組成部分。2.變量在JavaScript中變量用來(lái)存放腳本中的值，這樣在需要使用該值時(shí)就可以用變量來(lái)代表，一個(gè)變量可以代表一個(gè)數(shù)字、文本或其他一些東西。變量的概念與其他程序語(yǔ)言中的變量是基本一致的。JavaScript是一種對(duì)數(shù)據(jù)類(lèi)型要求不太嚴(yán)格的語(yǔ)言，所以不必聲明每一個(gè)變量的類(lèi)型。變量聲明盡管不是必需的，但在使用變量之前先進(jìn)行聲明是一種好的習(xí)慣。可以使用var語(yǔ)句來(lái)進(jìn)行變量聲明。例如：vartemp;//沒(méi)有賦值varscore=95;//數(shù)值類(lèi)型varmale=true;//布爾類(lèi)型varauthor="isaac"http://字符串JavaScript是一種區(qū)分大小寫(xiě)的語(yǔ)言，因此將一個(gè)變量命名為“computer”和將其命名為“Computer”是不一樣的。另外，變量名稱(chēng)的長(zhǎng)度是任意的，但必須遵循以下規(guī)則：（1）第1個(gè)字符必須是一個(gè)字母（大小寫(xiě)均可）或一個(gè)下劃線(xiàn)。（2）后續(xù)的字符可以是字母、數(shù)字或下劃線(xiàn)。（3）變量名稱(chēng)不能是系統(tǒng)的保留字，如true、for或return等。二、表達(dá)式及運(yùn)算符表達(dá)式在定義完變量后，就可以進(jìn)行賦值、改變和計(jì)算等一系列操作。這一過(guò)程通常又由表達(dá)式來(lái)完成?？梢哉f(shuō)表達(dá)式是變量、常量、布爾以及運(yùn)算的集合，因此表達(dá)式可以分為算術(shù)表達(dá)式、字符串表達(dá)式、賦值表達(dá)式、布爾表達(dá)式等。運(yùn)算符是完成操作的一系列符號(hào)，在JavaScript中有算術(shù)運(yùn)算符、比較運(yùn)算符、布爾運(yùn)算符。算術(shù)運(yùn)算符又分單目運(yùn)算符和雙目運(yùn)算符。其中雙目運(yùn)算符包括+（加）、-（減）、*（乘）、/（除）、％（取模）、|（按位或）、&（按位與）、<<（左移）、>>（右移）和>>>（右移，零填充）等。單目運(yùn)算符包括-（取反）、～（取補(bǔ)）、++（遞加1）和--（遞減1）等。主要的比較運(yùn)算符有：<（小于）、>（大于）、<=（小于等于）、>=（大于等于）、==（等于）和!=（不等于）。布爾邏輯運(yùn)算符主要有：!（取反）、&（邏輯與）、&=（與之后賦值）、|（邏輯或）、|=（或之后賦值）、^（邏輯異或）、^=（異或之后賦值）、?:（三目操作符）、||（或）、==（等于）和!=（不等于）。三、基本語(yǔ)句JavaScript中的語(yǔ)句與其他語(yǔ)言的語(yǔ)句類(lèi)似，用于實(shí)現(xiàn)程序的控制和各種基本的功能。在JavaScript中每條語(yǔ)句都以分號(hào)結(jié)束，但其本身對(duì)是否添加分號(hào)要求并不嚴(yán)格。但建議每條語(yǔ)句結(jié)束都加上分號(hào)，養(yǎng)成良好的編程習(xí)慣。JavaScript的基本語(yǔ)句主要包括條件語(yǔ)句、循環(huán)語(yǔ)句和函數(shù)等。1.條件語(yǔ)句條件語(yǔ)句主要有if語(yǔ)句、ifelse語(yǔ)句和switch語(yǔ)句等，if語(yǔ)句是最基本的條件語(yǔ)句，它的格式與C++相同，例如：if(表達(dá)式){語(yǔ)句1；語(yǔ)句2；｝如果表達(dá)式為true，則執(zhí)行大括號(hào)里的語(yǔ)句，為false則直接跳過(guò)該段語(yǔ)句，執(zhí)行后面的語(yǔ)句。如果需要在表達(dá)式為false時(shí)指定執(zhí)行某段代碼，則應(yīng)采用ifelse語(yǔ)句，例如：if(表達(dá)式){語(yǔ)句1；語(yǔ)句2；…}else{語(yǔ)句3；語(yǔ)句4；…}其中語(yǔ)句1～4可以是任意的合法JavaScript語(yǔ)句，甚至嵌套if語(yǔ)句等。2.循環(huán)語(yǔ)句循環(huán)語(yǔ)句一般指在一定條件下重復(fù)執(zhí)行的一段代碼，在JavaScript中提供了多種循環(huán)語(yǔ)句，包括for語(yǔ)句、while語(yǔ)句和dowhile語(yǔ)句等，還有用于跳出循環(huán)的break語(yǔ)句，用于終止當(dāng)前循環(huán)并繼續(xù)執(zhí)行下一輪循環(huán)的continue語(yǔ)句等。for語(yǔ)句是使用頻率最高的循環(huán)語(yǔ)句，它的格式與C++類(lèi)似，例如：for(initializationstatement;condition;adjuststatement){語(yǔ)