腳本語言與網頁特效

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

2.基于對象

3.簡單性

4.動態性

5.跨平臺性

6.安全性

7.與JAVA相近腳本語言概述8.1VBScript與VisualBasic語言具有一定的淵源關系，可以將VBScript看作VisualBasic的簡化版本或子集VBScript是ASP的默認腳本語言，可用于構建ASP動態網頁VBScript指令可直接嵌入HTML文檔中，用來擴展HTML的功能腳本語言概述8.1VBScript的優點3.易于移植

2.安全可靠

1.簡單易學

4.均衡系統負擔

5.與VB相近

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

8.2JS語言基礎

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

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

8.2JavaScript的數組類型表示的是一組有次序的變量集合，這些變量元素可以使用統一的名稱(稱為數組名)，以不同的下標加以區分數組下標從0開始，不同的元素可以擁有不同的數據類型數組可用var關鍵字定義，定義的同時也可初始化JS語言基礎

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

8.2運算符運算符是完成某些操作的系統符號JavaScript的運算符如下表所示

JS語言基礎

8.2JavaScript的運算符

JS語言基礎

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

8.2JS的表達式3.字符串表達式2.算術表達式1.賦值表達式4.條件表達式5.對象表達式JS語言基礎

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

1.條件語句

4.控制循環語句

3.循環語句

JS語言基礎-控制語句

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

8.2JavaScript的條件語句

JS語言基礎-控制語句

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

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

8.2循環語句JavaScript包含四類循環語句如下表所示JS語言基礎-控制語句

8.2JavaScript的循環結構

JS語言基礎-控制語句

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

in對象或數組){循環體}控制循環語句break與continue語句用來控制循環結構break語句結束各類循環，并執行循環以外的語句continue語句則跳過當前一輪循環中剩余的語句，并開始下一輪循環JS語言基礎-控制語句

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

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

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

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

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

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

2.關系運算符1.算術運算符

4.邏輯運算符

3.連接運算符

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

一維數組

動態數組

VBScript簡述8.3條件控制語句

嵌套條件控制語句

簡單條件控制語句

多路分支結構

VBScript簡述8.3循環控制語句

While循環

Do循環

For循環

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

過程：Sub

過程只執行程序而不返回值Function函數：Function函數可以將執行結果返回給請求程序

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

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