《網(wǎng)頁制作與設(shè)計》立體化電子課件 第8章-腳本語言與網(wǎng)頁特效

腳本語言與網(wǎng)頁特效

腳本語言概述網(wǎng)頁特效技術(shù)VBScript簡述JS語言基礎(chǔ)總結(jié)與習(xí)題第8章網(wǎng)頁開發(fā)技術(shù)分為靜態(tài)網(wǎng)頁技術(shù)與動態(tài)網(wǎng)頁技術(shù)兩大類其中動態(tài)網(wǎng)頁技術(shù)又可分為客戶端動態(tài)網(wǎng)頁技術(shù)與服務(wù)器端動態(tài)網(wǎng)頁技術(shù)兩種類型腳本語言概述8.1網(wǎng)頁技術(shù)分類腳本語言概述8.1腳本網(wǎng)頁編程的腳本(Script)是嵌入在HTML代碼中用來完成某些特殊功能的小程序腳本既可以在服務(wù)器端運(yùn)行，也可以在客戶端運(yùn)行腳本語言概述8.1腳本程序腳本程序就是一種簡單的文本代碼，可以用記事本等文本編輯器直接進(jìn)行開發(fā)有些程序(如C、C++、Java等)必須先經(jīng)過編譯，將源代碼轉(zhuǎn)換為二進(jìn)制代碼之后才可執(zhí)行，而腳本語言代碼則不需要事先編譯，只要有合適的解釋器便可以執(zhí)行最常用的網(wǎng)頁腳本語言為JavaScript與VBScript腳本語言概述8.1JavaScript是網(wǎng)景(Netscape)公司開發(fā)的基于對象與事件驅(qū)動的腳本語言，其前身叫作Livescript，后來網(wǎng)景公司將Java的語法引入進(jìn)來，將Livescript重新設(shè)計，改造成今天的JavaScriptJavaScript可以產(chǎn)生具有交互功能的Web頁面，減少Web制作的復(fù)雜性，使網(wǎng)頁變得更為生動JavaScript簡稱為JS腳本語言概述8.1JS具有的優(yōu)點(diǎn)1.解釋性

2.基于對象

3.簡單性

4.動態(tài)性

5.跨平臺性

6.安全性

7.與JAVA相近腳本語言概述8.1VBScript與VisualBasic語言具有一定的淵源關(guān)系，可以將VBScript看作VisualBasic的簡化版本或子集VBScript是ASP的默認(rèn)腳本語言，可用于構(gòu)建ASP動態(tài)網(wǎng)頁VBScript指令可直接嵌入HTML文檔中，用來擴(kuò)展HTML的功能腳本語言概述8.1VBScript的優(yōu)點(diǎn)3.易于移植

2.安全可靠

1.簡單易學(xué)

4.均衡系統(tǒng)負(fù)擔(dān)

5.與VB相近

腳本語言概述8.1打開網(wǎng)頁的方法使用【文件/打開】菜單命令，或單擊【常用/打開】工具欄按鈕，在彈出的【打開文件】對話框中選擇相應(yīng)的網(wǎng)頁在其他視圖中雙擊網(wǎng)頁圖標(biāo)，同樣會打開指定網(wǎng)頁如需要打開的文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁圖標(biāo)即可將其打開網(wǎng)頁制作-編輯網(wǎng)頁3.2VBScript或JavaScript腳本代碼嵌入在HTML中，與HTML的標(biāo)簽密切結(jié)合，成為HTML文檔的有機(jī)成份腳本代碼可置入在HTML文檔的HEAD段或BODY段中在HTML代碼中添加腳本程序的方式通常有以下3種腳本語言概述8.1方法1方法2通過HTML的<script></script>標(biāo)簽對指明要將腳本代碼嵌入到網(wǎng)頁文檔中；這是最常用的方式，使用<script>標(biāo)簽的type屬性指明所用的腳本語言類型；用src屬性定義指向包含腳本代碼的文件的URL，用來載入外部腳本程序文件使用腳本協(xié)議直接將腳本指令添加到HTML的超鏈接標(biāo)簽內(nèi)；適用于想在HTML文檔中用超鏈接的方式執(zhí)行數(shù)量較少的腳本指令的情況方法3腳本語言概述8.1JS數(shù)據(jù)類型JavaScript的數(shù)據(jù)類型包括基本類型、特殊類型及復(fù)合類型三類每一類又由若干種具體類型組成JS語言基礎(chǔ)

8.2JS語言基礎(chǔ)

8.2JavaScript的數(shù)據(jù)類型JavaScript采用變量存儲數(shù)據(jù)與Java不同，JavaScript并不要求指定變量中包含的數(shù)據(jù)類型在JavaScript中，可以簡單地用var來定義所有的變量，而變量的類型由賦值語句隱含確定變量還可以先賦予一種類型的數(shù)值，然后再根據(jù)需要賦予其他類型的數(shù)值JS語言基礎(chǔ)

8.2變量作用域變量的作用域就是變量所影響的代碼范圍在JavaScript中，變量有全局變量和局部變量之分全局變量是定義在所有函數(shù)之外的變量，其作用域覆蓋了所有的函數(shù)體局部變量則定義在函數(shù)體中，其作用域僅限于在該函數(shù)范圍內(nèi)有效JS語言基礎(chǔ)

8.2JavaScript的數(shù)組類型表示的是一組有次序的變量集合，這些變量元素可以使用統(tǒng)一的名稱(稱為數(shù)組名)，以不同的下標(biāo)加以區(qū)分?jǐn)?shù)組下標(biāo)從0開始，不同的元素可以擁有不同的數(shù)據(jù)類型數(shù)組可用var關(guān)鍵字定義，定義的同時也可初始化JS語言基礎(chǔ)

8.2JavaScript的數(shù)組定義格式如下(假定數(shù)組名為num)：⑴定義空白數(shù)組：varnum=[];⑵定義并初始化數(shù)組：varnum=[36,"88",true,95.23,null];還可以使用JavaScript的Array對象類來生成數(shù)組對象，格式為：varobjarr=newArray();JS語言基礎(chǔ)

8.2運(yùn)算符運(yùn)算符是完成某些操作的系統(tǒng)符號JavaScript的運(yùn)算符如下表所示

JS語言基礎(chǔ)

8.2JavaScript的運(yùn)算符

JS語言基礎(chǔ)

8.2類型運(yùn)算符意義描述算術(shù)運(yùn)算符+、-正、負(fù)符號運(yùn)算符+、-、*、/加、減、乘、除運(yùn)算符%、^模(求余)運(yùn)算符++、--遞增、遞減運(yùn)算符賦值運(yùn)算符=簡單賦值運(yùn)算符+=、-=、*=、/=、%=、^=復(fù)合賦值運(yùn)算符比較運(yùn)算符==、!=等于、不等于運(yùn)算符>、>=、<、<=大小比較運(yùn)算符邏輯運(yùn)算符&&、||、!與、或、非運(yùn)算符位運(yùn)算符&、|、~、^位邏輯運(yùn)算符：位與、位或、位非/反、位異或>>>、>>、<<位移運(yùn)算符：無符號右移、按位右移、按位左移字串串運(yùn)算符+將左右字符串首尾連接逗號運(yùn)算符,將多個語句捆綁起來作為整體，一次執(zhí)行完畢條件運(yùn)算符?:完成類似于if…else…的雙路選擇功能空運(yùn)算符void定義無任何返回值的表達(dá)式或?qū)⒈磉_(dá)式強(qiáng)制轉(zhuǎn)化為null類型數(shù)據(jù)類型運(yùn)算符typeoftypeof運(yùn)算符返回表達(dá)式的數(shù)據(jù)類型字符串表達(dá)式表達(dá)式是由常量、變量、函數(shù)及各類運(yùn)算符組成的符合JavaScript語法的式子，用來對變量進(jìn)行各類計算根據(jù)功能與結(jié)果的不同，表達(dá)式可分為以下多種類型JS語言基礎(chǔ)

8.2JS的表達(dá)式3.字符串表達(dá)式2.算術(shù)表達(dá)式1.賦值表達(dá)式4.條件表達(dá)式5.對象表達(dá)式JS語言基礎(chǔ)

8.2JS的控制語句2.多路分支語句

1.條件語句

4.控制循環(huán)語句

3.循環(huán)語句

JS語言基礎(chǔ)-控制語句

8.2條件語句條件語句包括單一選擇語句與雙路選擇語句兩種條件語句如下表所示JS語言基礎(chǔ)-控制語句

8.2JavaScript的條件語句

JS語言基礎(chǔ)-控制語句

8.2單一選擇雙路選擇if(條件表達(dá)式){語句或語句塊}if(條件表達(dá)式){語句或語句塊}else{語句或語句塊}多路分支語句根據(jù)一個變量的不同取值采取不同的處理方法，相當(dāng)于多個嵌套的if…else…語句多路分支語句的語法格式為JS語言基礎(chǔ)-控制語句

8.2switch(exp){caselabel1:語句串1；caselabel2:語句串2；……caselabeln:語句串n；default:語句串n+1；}JS語言基礎(chǔ)-控制語句

8.2循環(huán)語句JavaScript包含四類循環(huán)語句如下表所示JS語言基礎(chǔ)-控制語句

8.2JavaScript的循環(huán)結(jié)構(gòu)

JS語言基礎(chǔ)-控制語句

8.2while循環(huán)for循環(huán)while(循環(huán)條件){循環(huán)體}for(初始化;循環(huán)條件;改變條件){循環(huán)體}dowhile循環(huán)for…in循環(huán)do{循環(huán)體}while(循環(huán)條件)for(變量

in對象或數(shù)組){循環(huán)體}控制循環(huán)語句break與continue語句用來控制循環(huán)結(jié)構(gòu)break語句結(jié)束各類循環(huán)，并執(zhí)行循環(huán)以外的語句continue語句則跳過當(dāng)前一輪循環(huán)中剩余的語句，并開始下一輪循環(huán)JS語言基礎(chǔ)-控制語句

8.2函數(shù)函數(shù)是已命名的代碼塊，代碼塊中的語句被作為一個整體引用和執(zhí)行函數(shù)定義通常放在HTML文檔頭中，這樣就可以確保先定義后使用；當(dāng)然也可放在其他位置在使用函數(shù)之前，必須先定義函數(shù)JS語言基礎(chǔ)-函數(shù)8.2定義函數(shù)的格式如下：function函數(shù)名(參數(shù)1,參數(shù)2,…){語句段；

……return表達(dá)式；}JS語言基礎(chǔ)-函數(shù)8.2函數(shù)名是調(diào)用函數(shù)時引用的名稱參數(shù)是調(diào)用函數(shù)時接收傳入數(shù)值的變量名大括號中的語句是函數(shù)的執(zhí)行語句，當(dāng)函數(shù)被調(diào)用時執(zhí)行如果需要函數(shù)返回值，可以使用return語句，需要返回的值應(yīng)放在return之后JS語言基礎(chǔ)-函數(shù)8.2對象對象就是客觀世界中存在的特定實體對象包含兩個要素：屬性和方法屬性：用來描述對象特性的一組數(shù)據(jù)，也就是若干變量；方法：用來操作對象特性的若干動作，也就是若干函數(shù)通過訪問或設(shè)置對象的屬性，并且調(diào)用對象的方法，可以對對象進(jìn)行各種操作，從而獲得需要的功能JS語言基礎(chǔ)-對象8.2DOMJavaScript使用文檔對象模型DOM(DocumentObjectModel)來描述網(wǎng)頁文檔中的各類內(nèi)置對象這些對象被組織成層次樹的結(jié)構(gòu)，如下圖所示JS語言基礎(chǔ)-對象8.2JavaScript內(nèi)置對象層次結(jié)構(gòu)

JS語言基礎(chǔ)-對象8.2在JavaScript中可以操作的對象通常包括三種類型：瀏覽器對象JavaScript內(nèi)部對象用戶自定義對象JS語言基礎(chǔ)-對象8.2JS語言基礎(chǔ)-對象8.21瀏覽器對象是指文檔對象模型規(guī)定的對象，例如HTML元素對象、document對象、window對象等瀏覽器對象2JavaScript內(nèi)部對象包括一些常用的通用對象，例如數(shù)組對象Array、日期對象Date、數(shù)學(xué)對象Math等內(nèi)部對象3用戶自定義對象為用戶可以按需要編寫自定義的對象來完成特定的任務(wù)用戶自定義對象事件事件(event)是由鼠標(biāo)、鍵盤等對象引發(fā)的動作事件是瀏覽器響應(yīng)用戶、進(jìn)行交互操作的一種機(jī)制JS語言基礎(chǔ)-事件處理8.2事件處理事件處理(EventHandling)就是瀏覽器為響應(yīng)某個事件而進(jìn)行的處理過程事件處理可以改變?yōu)g覽器響應(yīng)用戶操作的方式，從而能夠開發(fā)出具有交互性并易于使用的動態(tài)網(wǎng)頁JS語言基礎(chǔ)-事件處理8.2事件處理程序事件處理程序(EventHandler)是指用來完成事件處理的函數(shù)或程序代碼JS語言基礎(chǔ)-事件處理8.2JavaScript采用事件驅(qū)動(Event-Driven)的處理機(jī)制事件驅(qū)動處理機(jī)制的原理如下JS語言基礎(chǔ)-事件處理8.2用戶可在HTML文檔中為某個對象的特定事件編寫處理事件的JavaScript函數(shù)如果沒有定義對特定事件的處理程序，瀏覽器將使用系統(tǒng)默認(rèn)的處理行為所謂默認(rèn)的處理行為，是指系統(tǒng)對每個事件都設(shè)置了標(biāo)準(zhǔn)的處理動作，這些動作通過調(diào)用系統(tǒng)為每個標(biāo)準(zhǔn)事件預(yù)設(shè)的對應(yīng)處理程序來實現(xiàn)JS語言基礎(chǔ)-事件處理8.2標(biāo)準(zhǔn)事件處理程序的定義方式：一般是先在事件名稱前加上“on”這一關(guān)鍵字，構(gòu)造出事件響應(yīng)標(biāo)識然后在事件響應(yīng)標(biāo)識后用等于號賦予處理事件的JavaScript代碼，或用等于號指定處理事件的自定義函數(shù)名稱JS語言基礎(chǔ)-事件處理8.2事件主要在用戶與網(wǎng)頁交互時發(fā)生瀏覽器自身的一些行為也能夠觸發(fā)事件瀏覽器在程序運(yùn)行的大部分時間內(nèi)都在等待交互事件的發(fā)生，并在事件發(fā)生后，自動調(diào)用事件處理函數(shù)，完成事件處理過程JavaScript常用的事件如下表所示JS語言基礎(chǔ)-事件處理8.2JavaScript常用事件列表

JS語言基礎(chǔ)-事件處理8.2事件名稱產(chǎn)生事件的對象事件名稱產(chǎn)生事件的對象Abort(中止)imageBlur(失去焦點(diǎn))window及表單控件Change(改變)表單的文本控件(text、password、textarea)及selectClick(單擊)超鏈接及表單控件DblClick(雙擊)超鏈接及表單控件DragDrop(拖曳)windowError(錯誤)window、imageFocus(獲得焦點(diǎn))window及表單控件KeyDown(按鍵按下)image、超鏈接及表單控件KeyUp(按鍵彈起)image、超鏈接及表單控件JS語言基礎(chǔ)-事件處理8.2JavaScript常用事件列表(續(xù))

事件名稱產(chǎn)生事件的對象事件名稱產(chǎn)生事件的對象Load(載入)documentMouseDown(鼠標(biāo)按下)document、超鏈接及表單控件MouseMove(鼠標(biāo)移動)document、超鏈接及表單控件MouseOver(鼠標(biāo)移過)document、超鏈接及表單控件MouseOut(鼠標(biāo)移出)document、超鏈接及表單控件MouseUp(鼠標(biāo)釋放)document、超鏈接及表單控件Move(移動)windowReset(重置)formResize(改變尺寸)windowSelect(選擇)表單的文本控件Submit(提交)formUnLoad(卸載)documentVBScript也具備強(qiáng)大的網(wǎng)頁客戶端編程能力VBScript可操作瀏覽器和網(wǎng)頁上的各種元素，能夠響應(yīng)網(wǎng)頁客戶端的事件，對表單進(jìn)行驗證，制作網(wǎng)頁特效等VBScript采用事件驅(qū)動機(jī)制，支持面向?qū)ο缶幊蘓BScript簡述8.3語句書寫VBScript的語句后面不能帶有分號，一般一行書寫一條語句若將多條語句寫在一行中，語句間需用西文冒號(:)分隔可將長語句分在多行書寫，此時每行后面需加由一個空格與一個下劃線組成的續(xù)行符(_)VBScript簡述8.3數(shù)據(jù)類型VBScript唯一的數(shù)據(jù)類型是Variant，該類型也是所有函數(shù)的返回值數(shù)據(jù)類型根據(jù)使用方式的不同，Variant可以包含不同類別的信息VBScript將根據(jù)Variant變量的上下文環(huán)境來確定Variant類型的信息內(nèi)容VBScript簡述8.3Variant子類型Variant包含的不同信息類型稱為子類型多數(shù)情況下，可將所需的數(shù)據(jù)放入Variant變量中，Variant變量會按照最適合的子類型來參與運(yùn)算VBScript簡述8.3Variant的數(shù)據(jù)子類型

VBScript簡述8.3子類型描述Empty未初始化的子類型Null不包含任何有效數(shù)據(jù)的子類型Boolean布爾子類型Byte字節(jié)子類型Integer整數(shù)子類型Long長整形子類型Single單精度浮點(diǎn)數(shù)Double雙精度浮點(diǎn)數(shù)Date日期時間子類型String變長字符串子類型Object對象子類型Error包含錯誤號的子類型運(yùn)算符VBScript提供了豐富的運(yùn)算符，可以用來構(gòu)造多種表達(dá)式VBScript簡述8.3VBScript運(yùn)算符

2.關(guān)系運(yùn)算符1.算術(shù)運(yùn)算符

4.邏輯運(yùn)算符

3.連接運(yùn)算符

VBScript簡述8.3數(shù)組數(shù)組就是指具有相同數(shù)據(jù)類型的變量的集合。數(shù)組是將具有相同類型的若干數(shù)據(jù)按照某種順序組織起來的有效手段數(shù)組簡化了對這些數(shù)據(jù)的遍歷訪問方式VBScript簡述8.3數(shù)組的類型多維數(shù)組

一維數(shù)組

動態(tài)數(shù)組

VBScript簡述8.3條件控制語句

嵌套條件控制語句

簡單條件控制語句

多路分支結(jié)構(gòu)

VBScript簡述8.3循環(huán)控制語句

While循環(huán)

Do循環(huán)

For循環(huán)

VBScript簡述8.3VBScript有兩種形式的模塊：Sub

過程：Sub

過程只執(zhí)行程序而不返回值Function函數(shù)：Function函數(shù)可以將執(zhí)行結(jié)果返回給請求程序

VBScript簡述8.3Sub過程Sub過程是包含在Sub和EndSub關(guān)鍵字之間的一組VBScript語句，執(zhí)行操作但不返回值Sub過程可以使用參數(shù)VBScript簡述8.3Function函數(shù)Function函數(shù)是包含在Function與EndFunction關(guān)鍵字之間的一組VBScript語句Function函數(shù)可以擁有返回值Function函數(shù)通過函數(shù)名返回結(jié)果值，函數(shù)返回值在函數(shù)體中賦給函數(shù)名；返回值的數(shù)據(jù)類型為VariantFunction函數(shù)可以帶有參數(shù)如果無任何參數(shù)，定義時函數(shù)名后必須包含空的括號()

VBScript簡述8.3腳本語言一個富有特色的用處是用來制作網(wǎng)頁特效網(wǎng)頁特效是網(wǎng)頁最常用、最吸引人的實用技術(shù)之一運(yùn)用網(wǎng)頁特效，往往能為網(wǎng)頁增添特殊的視覺效果，渲染特定的氣氛，展示動感形象，起到烘托、突出網(wǎng)頁主題的作用網(wǎng)頁特效技術(shù)8.4網(wǎng)頁特效網(wǎng)頁特效是在HTML文檔中插入特定的程