任務(wù)1-2　jQuery實(shí)現(xiàn)網(wǎng)頁收藏

網(wǎng)頁中包含如下所示的HTML代碼。

<div class="topLinks"> 
    <span><a id="favorite" href="#">添加收藏</a></span> 
</div>

用IE 11瀏覽器瀏覽該網(wǎng)頁時(shí)，單擊網(wǎng)頁中的“添加收藏”超鏈接，會(huì)彈出如圖1-2所示的【添加收藏】對(duì)話框，在該對(duì)話框中單擊【添加】按鈕，則會(huì)將對(duì)應(yīng)網(wǎng)頁添加到收藏夾。

用非IE瀏覽器瀏覽該網(wǎng)頁時(shí)，單擊網(wǎng)頁中的“添加收藏”超鏈接，會(huì)彈出如圖1-3所示的【添加失敗】對(duì)話框。

圖1-2　【添加收藏】對(duì)話框

圖1-3　【添加失敗】對(duì)話框

這里的“添加收藏”功能采用jQuery方式實(shí)現(xiàn)，代碼如表1-3所示。

表1-3　實(shí)現(xiàn)網(wǎng)頁收藏功能的JavaScript代碼

表1-3中的代碼解釋如下。

（1）01行引用了一個(gè)外部的JS文件jquery.js。

（2）為了防止文檔在完全加載（就緒）之前運(yùn)行jQuery代碼，jQuery函數(shù)應(yīng)位于ready方法中，如下所示。

$(document).ready(function(){ 
          //函數(shù)代碼 
}) ; 

（3）05行表示單擊id="favorite"的按鈕時(shí)，觸發(fā)該按鈕的單擊事件，調(diào)用一個(gè)函數(shù)，執(zhí)行該函數(shù)中的程序代碼。

（4）if…else…語句為選擇結(jié)構(gòu)，針對(duì)IE瀏覽器和非IE瀏覽器執(zhí)行不同的語句。

（5）06行中的表達(dá)式“window.ActiveXObject || "ActiveXObject"in window”用于判斷當(dāng)前瀏覽器的類型為IE瀏覽器。

（6）07行使用window.external.addFavorite方法實(shí)現(xiàn)IE瀏覽器的添加收藏功能。

（7）09行的alert()方法用于打開一個(gè)信息對(duì)話框，該方法是window對(duì)象的常用方法之一，可以寫作window.alert()。其作用是彈出一個(gè)對(duì)話框，顯示所指定的內(nèi)容。括號(hào)中的字符串參數(shù)為對(duì)話框?qū)⒁@示的內(nèi)容，該對(duì)話框只有一個(gè)【確定】按鈕。

知識(shí)必備

1.1　JavaScript簡介

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語言。使用它的目的是與HTML（超文本標(biāo)記語言）一起實(shí)現(xiàn)網(wǎng)頁中的動(dòng)態(tài)交互功能。通過嵌入或調(diào)用JavaScript代碼在標(biāo)準(zhǔn)的HTML中實(shí)現(xiàn)其功能。它與HTML標(biāo)簽結(jié)合在一起，彌補(bǔ)了HTML的不足，使網(wǎng)頁變得更加生動(dòng)。

JavaScript是一種輕量級(jí)的編程語言，JavaScript插入HTML頁面后，可由所有的主流瀏覽器執(zhí)行。JavaScript由布蘭登·艾奇（Brendan Eich）發(fā)明，于1995年出現(xiàn)在Netscape中（該瀏覽器已停止更新），并于1997年被ECMA（歐洲計(jì)算機(jī)制造協(xié)會(huì)）采納，將JavaScript制訂為標(biāo)準(zhǔn)，稱為ECMAScript，ECMA-262是JavaScript標(biāo)準(zhǔn)的官方名稱。

JavaScript的基本語法與C語言類似，但運(yùn)行過程中不需要單獨(dú)編譯，而是逐行解釋執(zhí)行，運(yùn)行快。JavaScript具有跨平臺(tái)性，與操作環(huán)境無關(guān)，只依賴于瀏覽器本身，只要瀏覽器支持JavaScript就能正確執(zhí)行。

由于JavaScript具有復(fù)雜的文檔對(duì)象模型（DOM），不同瀏覽器實(shí)現(xiàn)的方式不一樣，以及缺乏便捷的開發(fā)、調(diào)試工具，所以JavaScript的應(yīng)用并未真正推廣開，正當(dāng)JavaScript從開發(fā)者的視線中漸漸隱去時(shí)，一種新型的基于JavaScript的Web技術(shù)——AJAX（Asynchronous JavaScript And XML，異步JavaScript和XML）誕生了，使互聯(lián)網(wǎng)中基于JavaScript的應(yīng)用越來越多，從而使JavaScript不再是一種僅僅用于制作Web頁面的腳本語言，JavaScript越來越受到重視，互聯(lián)網(wǎng)領(lǐng)域正在掀起一場JavaScript風(fēng)暴。

1.2　JavaScript主要的語法規(guī)則

（1）在網(wǎng)頁中插入腳本程序的方式是使用script標(biāo)記，把腳本標(biāo)記<script></script>置于網(wǎng)頁上的head部分或body部分，然后在其中加入腳本程序。其一般語法形式如下。

<script language="JavaScript" type="text/javascript"> 
  <!-- 
      在此編寫 JavaScript 代碼 
  //--> 
  </script>

通過標(biāo)識(shí)<script></script>指明其間是JavaScript腳本源代碼。

使用script標(biāo)記時(shí)，一般使用language屬性說明使用何種語言，使用type屬性標(biāo)識(shí)腳本程序的類型，也可以只使用其中一種，以適應(yīng)不同的瀏覽器。如果需要，還可以在language屬性中標(biāo)明JavaScript的版本號(hào)，那么，所使用的JavaScript腳本程序就可以應(yīng)用該版本中的功能和特性，如“l(fā)anguage=JavaScript1.2”。

對(duì)于老式的瀏覽器可能會(huì)在<script>標(biāo)簽中使用type="text/javascript"，現(xiàn)在已經(jīng)不必這樣做了，JavaScript是所有現(xiàn)代瀏覽器以及HTML 5中的默認(rèn)腳本語言。

并非所有的瀏覽器都支持JavaScript，另外，由于瀏覽器版本和JavaScript腳本程序之間存在兼容性問題，可能會(huì)導(dǎo)致某些JavaScript腳本程序在某些版本瀏覽器中無法正確執(zhí)行。如果瀏覽不能識(shí)別<script>標(biāo)簽，就會(huì)將<script>與</script>標(biāo)簽之間的JavaScript腳本程序當(dāng)作普通的HTML字符顯示在瀏覽器中。針對(duì)此類問題，可以將JavaScript腳本程序代碼置于HTML注釋符之間，這樣對(duì)于不支持JavaScript的瀏覽器就不會(huì)把代碼內(nèi)容當(dāng)作文本顯示在頁面上，而是把它們當(dāng)作注釋，不會(huì)做任何操作。

“<!--”是HTML注釋符的起始標(biāo)簽，“//-->”是HTML注釋符的結(jié)束標(biāo)簽。對(duì)于不支持JavaScript腳本程序的瀏覽器，標(biāo)簽<!--和//-->之間的內(nèi)容被當(dāng)作注釋內(nèi)容，對(duì)于支持JavaScript程序的瀏覽器，這對(duì)標(biāo)簽將不起任何作用。另外，需要注意的是，HTML注釋符的結(jié)束標(biāo)記之前有兩個(gè)斜杠“//”，這兩個(gè)斜杠是JavaScript語言中的注釋符號(hào)，如果沒有這兩個(gè)斜杠，JavaScript解釋器試圖將HTML注釋的結(jié)束標(biāo)記作為JavaScript來解釋，從而有可能導(dǎo)致出錯(cuò)。

（2）所有的JavaScript語句都以分號(hào)“；”結(jié)束。

（3）JavaScript語言對(duì)大小寫是敏感的。

1.3　JavaScript常用的開發(fā)工具

編寫與調(diào)試JavaScript腳本程序的工具有多種，目前常用的工具有Dreamweaver、Firebug、Visual Studio、Aptana、JavaScript Editor等。

1．Dreamweaver

Dreamweaver是世界頂級(jí)軟件廠商Adobe推出的一套制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的專業(yè)網(wǎng)頁設(shè)計(jì)軟件，其最新推出的版本為Dreamweaver CC。它支持以代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁，無須編寫任何代碼就能快速創(chuàng)建Web頁面。

Dreamweaver CC支持jQuery代碼自動(dòng)提示功能，借助jQuery代碼提示加入高級(jí)交互性功能，jQuery可輕松為網(wǎng)頁添加互動(dòng)內(nèi)容，借助針對(duì)手機(jī)的啟動(dòng)模板快速開始設(shè)計(jì)。

2．Firebug

Firebug是一個(gè)用于網(wǎng)站前端開發(fā)的工具，它是Firefox瀏覽器的一個(gè)擴(kuò)展插件，它集HTML查看和編輯、JavaScript控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，可以用于調(diào)試JavaScript、查看DOM、分析CSS以及AJAX交互等。

3．Visual Studio

Visual Studio是Microsoft公司推出的程序集成開發(fā)環(huán)境，Visual Studio 2008版本之后就可以使用jQuery智能提示功能了。

4．Aptana

Aptana是一個(gè)功能非常強(qiáng)大、開源和專注于JavaScript的AJAX開發(fā)，它支持jQuery代碼自動(dòng)提示功能。

1.4　在HTML文檔中嵌入JavaScript代碼的方法

HTML中的JavaScript腳本必須位于<script>與</script>標(biāo)簽之間，腳本可被放置在HTML頁面的<body>或<head>部分中，或者同時(shí)存在于兩個(gè)部分中。通常的做法是把函數(shù)放入<head>部分中，或者放在頁面底部，這樣就可以把它們安置到同一處位置，不會(huì)干擾頁面的內(nèi)容。

JavaScript代碼嵌入HTML文檔的形式有以下幾種。

（1）在head部分添加JavaScript腳本。

將JavaScript腳本置于head部分，使之在其余代碼之前裝載，快速實(shí)現(xiàn)其功能，并且容易維護(hù)。

有時(shí)在head部分定義JavaScript腳本，在body部分調(diào)用JavaScript腳本。

（2）直接在body部分添加JavaScript腳本。

由于某些腳本程序在網(wǎng)頁中特定部分顯示其效果，此時(shí)腳本代碼就會(huì)位于body中的特定位置。也可以直接在HTML表單的<input>標(biāo)簽內(nèi)添加腳本，以響應(yīng)輸入元素的事件。

（3）鏈接JavaScript腳本文件。

引用外部腳本文件，應(yīng)使用script標(biāo)簽的src屬性來指定外部腳本文件的URL。這種方式可以使腳本得到重復(fù)利用，從而降低維護(hù)的工作量。

外部JavaScript文件是最常見的包含JavaScript代碼的方式，其主要原因有以下幾點(diǎn)。

①HTML頁面中代碼越少，搜索引擎就能夠以越快的速度來抓取網(wǎng)站并建立索引。

②保持JavaScript代碼和HTML的分離，這樣代碼顯得更清晰，且最終更易于管理。

③因?yàn)榭梢栽贖TML代碼中包含多個(gè)JavaScript文件，因此可以把JavaScript文件分開放在Web服務(wù)器上不同的文件目錄結(jié)構(gòu)中，這類似于圖像的存放方式，是一種更容易管理代碼的做法。清晰、有條理的代碼始終是讓網(wǎng)站管理變?nèi)菀椎年P(guān)鍵。

1.5　JavaScript的注釋

JavaScript的注釋用于對(duì)JavaScript代碼進(jìn)行解釋，以提高程序的可讀性。調(diào)試JavaScript程序時(shí)，還可以使用注釋阻止代碼塊的執(zhí)行。

JavaScript有兩種類型的注釋。

（1）單行注釋以雙斜杠開頭（//）。

例如：

//this is a single-line comment

（2）多行注釋以單斜杠和星號(hào)開頭（/*），以星號(hào)和單斜杠結(jié)尾（*/）。例如：

/*this is a multi

line comment*/

注釋可以單獨(dú)一行，也可以在行末。

1.6　JavaScript的數(shù)據(jù)類型

JavaScript的基本數(shù)據(jù)類型主要有字符串（String）、數(shù)字（Number）、布爾（Boolean）、Null、Undefined，引用類型主要有數(shù)組和對(duì)象。

JavaScript擁有動(dòng)態(tài)類型。這意味著相同的變量可用作不同的類型。

例如：

var x;               // x 為 undefined 
var x = 26 ;         // x 為數(shù)字 
var x = "Good" ;     // x 為字符串 

1．字符串

JavaScript的字符串可以是引號(hào)中的任意文本，可以使用單引號(hào)或雙引號(hào)。例如：

var name="Good"; 
var name='Good'; 

2．?dāng)?shù)字

JavaScript只有一種數(shù)字類型，數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶。

例如：

var x1=34.00 ;    //使用小數(shù)點(diǎn)來寫 
var x2=34 ;       //不使用小數(shù)點(diǎn)來寫 

較大或較小的數(shù)字可以通過科學(xué)計(jì)數(shù)法（指數(shù)）來書寫。

例如：

var y=123e5;      // 12 300 000 
var z=123e-5;     // 0.001 23 

JavaScript不是類型語言，與許多其他編程語言不同，JavaScript不定義不同類型的數(shù)字，如整數(shù)、短整型、長整型、浮點(diǎn)型等。

JavaScript中的所有數(shù)字均為64位，都存儲(chǔ)為根為10的64位數(shù)字（8比特）。

整數(shù)（不使用小數(shù)點(diǎn)或指數(shù)計(jì)數(shù)法）的精度最多為15位，小數(shù)的最大位數(shù)是17位，但是浮點(diǎn)運(yùn)算并不總是百分之百準(zhǔn)確。

如果數(shù)字的前綴為0，則JavaScript會(huì)把數(shù)值常量解釋為八進(jìn)制數(shù)，如果數(shù)字的前綴為0x，則解釋為十六進(jìn)制數(shù)。

例如：

var y=0377;

var z=0xFF;

說明　絕不要在數(shù)字前面寫0，除非需要進(jìn)行八進(jìn)制轉(zhuǎn)換。

NaN是JavaScript的全局常量，本意表示某個(gè)值不是數(shù)值，但其本身卻又是數(shù)值，且不等于其自身，看下面的代碼。

alert(typeof NaN);     //顯示為'Number' 
alert(NaN == NaN);     //顯示為 false 

實(shí)際上NaN不等于任何東西。要確認(rèn)是不是NaN只能使用isNaN，如以下代碼。

alert(isNaN(NaN)) ;     //顯示為 true 

3．布爾

JavaScript的布爾（邏輯）類型只能有兩個(gè)值：true或false。布爾類型值常用在條件測試中。

例如：

var x=true;

var y=false;

Boolean（邏輯）對(duì)象用于將非邏輯值轉(zhuǎn)換為邏輯值（true或者false）。使用關(guān)鍵詞new來定義Boolean對(duì)象。

下面的代碼定義了一個(gè)名為myBoolean的邏輯對(duì)象。

var myBoolean=new Boolean();

注意　如果邏輯對(duì)象無初始值或者其值為0、-0、null、""、false、undefined或者NaN，那么對(duì)象的值為false。否則，其值為true（即使當(dāng)自變量為字符串"false"時(shí)）。

4．null

可以通過將變量的值設(shè)置為null來清空變量。

例如：

book=null;

5．Undefined

Undefined表示變量不含有值。

1.7　JavaScript的常量

JavaScript有6種基本類型的常量。

1．字符型常量

字符型常量是使用單引號(hào)（''）或雙引號(hào)（""）括起來的一個(gè)或幾個(gè)字符。

2．整型常量

整型常量是不能改變的數(shù)據(jù)，可以使用十進(jìn)制、十六進(jìn)制、八進(jìn)制表示其值。

3．實(shí)型常量

實(shí)型常量由整數(shù)部分加小數(shù)部分表示，可以使用科學(xué)或標(biāo)準(zhǔn)方法表示。

4．布爾值

布爾常量只有兩種值：true或false，主要用來說明或代表一種狀態(tài)或標(biāo)志。

5．空值

JavaScript中有一種空值類型null，表示什么也沒有，可以理解為對(duì)象占位符。如果試圖引用沒有定義的變量，則返回一個(gè)null值。

說明　null是個(gè)對(duì)象。JavaScript有一種空值類型，它有一個(gè)唯一的值null，即它的字面量，定義為完全沒有任何意義的值，其表現(xiàn)得像個(gè)對(duì)象。

例如：

alert(typeof null); //顯示為'object' 

盡管typeof值顯示為"object"，但null并不認(rèn)為是一個(gè)對(duì)象實(shí)例。要知道，JavaScript中的值都是對(duì)象實(shí)例，每個(gè)數(shù)值都是Number對(duì)象，每個(gè)對(duì)象都是Object對(duì)象。因?yàn)閚ull是沒有值的，所以null不是任何東西的實(shí)例。

例如：

alert(null instanceof Object); //顯示為 false 

6．特殊字符

JavaScript中包含以反斜杠（/）開頭的特殊字符，通常稱為控制字符。

1.8　JavaScript的變量

1．變量的概念與命名

變量是內(nèi)存中存取數(shù)據(jù)的容器。

例如：

var x=2; 
var y=3; 
var z=x+y; 

在JavaScript中，這些字母被稱為變量。

JavaScript變量可用于存放常量數(shù)值（如x=2）和表達(dá)式的值（如z=x+y）。

變量可以使用短名稱（如x和y），也可以使用描述性更好的名稱（如name、age、sum、total、volume）。

變量名必須以字母開頭，中間可以出現(xiàn)字母、數(shù)字、下劃線（_），變量名不能有空格、+、-等字符，JavaScript的關(guān)鍵字不能作變量名。JavaScript變量的名稱也允許以$和_符號(hào)開頭，不過不推薦這么做。

變量名稱對(duì)大小寫敏感（如y和Y是不同的變量），JavaScript語句和JavaScript變量都對(duì)大小寫敏感。

變量的基本類型有4種：字符串變量、整型變量、實(shí)型變量和布爾型變量。

2．JavaScript變量的聲明

（1）單個(gè)變量的聲明與賦值。

在JavaScript中創(chuàng)建變量通常稱為“聲明”變量。

使用var關(guān)鍵詞來聲明變量。

例如：

var name;

變量聲明之后，該變量是空的（它沒有值）。使用賦值號(hào)（=）向變量賦值。

例如：

name="李明";

也可以在聲明變量時(shí)對(duì)其賦值。例如：

var name="李明";

提示　一個(gè)好的編程習(xí)慣是，在代碼開始處，統(tǒng)一對(duì)需要的變量進(jìn)行聲明。

（2）多個(gè)變量的聲明與賦值。

可以在一條語句中聲明多個(gè)變量。該語句以var開頭，并使用逗號(hào)分隔變量即可。例如：

var name="李明",age=26,job="程序員";

多個(gè)變量的聲明也可橫跨多行。

例如：

var name="李明", 
age=26, 
job="程序員" ; 

（3）聲明無值的變量。

聲明變量時(shí)可以只用var標(biāo)識(shí)符聲明無值的變量。未賦值的變量，其值實(shí)際上是undefined。在執(zhí)行過以下語句后，變量name的值將是undefined。

例如：

var name；

（4）重復(fù)聲明JavaScript變量。

如果重復(fù)聲明JavaScript變量，該變量的值不會(huì)丟失。在以下兩條語句執(zhí)行后，變量name的值依然是"李明"。

例如：

var name="李明";

var name;

由于JavaScript的變量是弱類型的，可以將變量初始化為任意值。因此，可以隨時(shí)改變變量所存數(shù)據(jù)的類型，但盡量避免這樣做。

3．JavaScript變量類型的聲明

聲明新變量時(shí)，可以使用關(guān)鍵詞“new”來聲明其類型。

例如：

var name=new String;

var x=new Number;

var y=new Boolean;

var color=new Array;

var book=new Object;

JavaScript變量均為對(duì)象，當(dāng)聲明一個(gè)變量時(shí)，就創(chuàng)建了一個(gè)新的對(duì)象。

4．局部JavaScript變量

在JavaScript函數(shù)內(nèi)部使用var聲明的變量是局部變量，該變量的作用域是局部的，即只能在函數(shù)內(nèi)部訪問它。

可以在不同的函數(shù)中使用名稱相同的局部變量，因?yàn)橹挥新暶鬟^該變量的函數(shù)才能識(shí)別出該變量。該函數(shù)運(yùn)行完畢，局部變量就會(huì)被刪除。

5．全局JavaScript變量

在函數(shù)外聲明的變量是全局變量，網(wǎng)頁中的所有腳本和函數(shù)都能訪問它。JavaScript變量的生命期從它們被聲明的時(shí)間開始。

局部變量會(huì)在函數(shù)運(yùn)行以后被刪除，而全局變量會(huì)在頁面關(guān)閉后被刪除。

如果直接將值賦給尚未聲明的變量，該變量將被自動(dòng)作為全局變量聲明。

例如：

name="李明";

將聲明一個(gè)全局變量name，即使它在函數(shù)內(nèi)執(zhí)行。

注意　局部變量使用var這一關(guān)鍵字來聲明，聲明全局變量則不需要使用var關(guān)鍵字。

使用了var關(guān)鍵字的變量被看成是局部的，因?yàn)橹荒茉诼暶魉牡胤剿幍姆秶鷥?nèi)訪問，不能在其他任何地方訪問。

例如，如果在一個(gè)函數(shù)內(nèi)部聲明了一個(gè)局部變量的話，該變量就不能在該函數(shù)之外訪問，這就使得它是這一函數(shù)局部的。如果沒有使用var關(guān)鍵字聲明同一變量的話，它在整個(gè)腳本中就都是可被訪問到的，而不僅限定于只能在那個(gè)函數(shù)中被訪問。

1.9　JavaScript的消息框

可以在JavaScript中創(chuàng)建3種形式的消息框，即警告框、確認(rèn)框、提示框。

1．警告框

警告框是一個(gè)帶有提示信息和“確定”按鈕的對(duì)話框，經(jīng)常用于輸出提示信息，當(dāng)警告框出現(xiàn)后，用戶需要單擊【確定】按鈕才能繼續(xù)進(jìn)行操作。

語法格式：alert("文本")

例如：

alert("感謝你光臨本網(wǎng)站");

如果警告框中輸出的提示信息要分為多行，則使用“\n”分行。

2．確認(rèn)框

確認(rèn)框是一個(gè)帶有提示信息以及【確定】和【取消】按鈕的對(duì)話框，用于使用戶可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后，用戶只有單擊【確定】或者【取消】按鈕才能繼續(xù)進(jìn)行操作。

語法格式：confirm("文本")

例如：

var r=confirm("Press a button!");

當(dāng)彈出確認(rèn)框后，如果用戶單擊【確認(rèn)】按鈕，那么其返回值為true，即r的值為true。如果用戶單擊【取消】按鈕，那么其返回值為false，即r的值為false。

3．提示框

提示框是一個(gè)提示用戶輸入的對(duì)話框，經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后單擊【確認(rèn)】按鈕或【取消】按鈕才能繼續(xù)操作。

語法格式：prompt("文本","默認(rèn)值")

例如：

var name=prompt("請(qǐng)輸入您的姓名","李明");

如果用戶單擊【確認(rèn)】按鈕，那么返回值為輸入的值；如果用戶單擊【取消】按鈕，那么返回值為null。

1.10　JavaScript的異常處理

當(dāng)JavaScript引擎執(zhí)行JavaScript代碼時(shí)，會(huì)發(fā)生各種錯(cuò)誤，如下所列。

（1）可能是語法錯(cuò)誤，通常是程序員造成的編碼錯(cuò)誤或錯(cuò)別字。

（2）可能是拼寫錯(cuò)誤或語言中缺少的功能（可能由于瀏覽器差異導(dǎo)致）。

（3）可能是由于來自服務(wù)器或用戶的錯(cuò)誤輸入而導(dǎo)致的錯(cuò)誤。

（4）也可能是由于許多其他不可預(yù)知的原因?qū)е隆?/p>

當(dāng)錯(cuò)誤發(fā)生或當(dāng)事件出現(xiàn)問題時(shí)，JavaScript將拋出一個(gè)錯(cuò)誤。JavaScript使用try…catch…語句處理這些異常，try語句和catch語句總是成對(duì)出現(xiàn)的。

語法格式：

try 
    { 
      //在這里運(yùn)行代碼 
    } 
 catch(err) 
    { 
     //在這里處理錯(cuò)誤 
} 

try語句用于測試代碼塊的錯(cuò)誤，允許用戶定義在執(zhí)行時(shí)進(jìn)行錯(cuò)誤測試的代碼塊。

catch語句用于處理錯(cuò)誤，允許定義當(dāng)try代碼塊發(fā)生錯(cuò)誤時(shí)所執(zhí)行的代碼塊。

在下面的示例代碼中，我們故意在try塊的代碼中將“alert”寫成了“Alert”，即首字母寫成大寫“A”。catch塊會(huì)捕捉到try塊中的錯(cuò)誤，并執(zhí)行代碼來處理它。

例如：

var txt=""; 
try 
   { 
     Alert("歡迎您!"); 
   } 
catch(err) 
   { 
     txt="本頁有一個(gè)錯(cuò)誤。\n"; 
     txt+="錯(cuò)誤描述：" + err.message ; 
     alert(txt); 
 }

throw語句允許用戶自行定義錯(cuò)誤或拋出異常（exception）。

如果把throw與try和catch一起使用，就能夠控制程序流，并生成自定義的錯(cuò)誤消息。語法格式：throw exception

異?？梢允荍avaScript字符串、數(shù)字、邏輯值或?qū)ο蟆?/p>

例如：

<script> 
function myFunction() 
{ 
     try 
     { 
         var x=document.getElementById("demo").value; 
         if(x=="") throw "值為空"; 
         if(isNaN(x)) throw "不是數(shù)字"; 
     } 
     catch(err) 
     { 
         var y=document.getElementById("mess"); 
         y.innerHTML="錯(cuò)誤：" + err + "。"; 
     } 
} 
</script> 
<input id="demo" type="text"> 
<button type="button" onclick="myFunction()">測試輸入值</button> 
<p id="mess"></p>

以上實(shí)例代碼用于檢測輸入的值。如果值是錯(cuò)誤的，會(huì)拋出一個(gè)異常（錯(cuò)誤）。catch會(huì)捕捉到這個(gè)錯(cuò)誤，并顯示一段自定義的錯(cuò)誤消息。

以上實(shí)例代碼中如果getElementById函數(shù)出錯(cuò)，也會(huì)拋出一個(gè)錯(cuò)誤。

1.11　JavaScript庫

JavaScript高級(jí)程序設(shè)計(jì)（特別是對(duì)瀏覽器差異的復(fù)雜處理）通常很困難也很耗時(shí)，為了簡化JavaScript的開發(fā)，許多JavaScript庫應(yīng)運(yùn)而生。這些JavaScript庫常被稱為JavaScript框架。這些庫封裝了很多預(yù)定義的對(duì)象和實(shí)用函數(shù)，能幫助使用者輕松建立有高難度交互的富客戶端頁面，并且兼容各大瀏覽器。jQuery是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript庫，是一個(gè)由約翰·瑞齊格（John Resig）創(chuàng)建于2006年1月的開源項(xiàng)目。

廣受歡迎的JavaScript框架有jQuery、Prototype、MooTools，所有這些框架都提供針對(duì)常見JavaScript任務(wù)的函數(shù)，包括動(dòng)畫、DOM操作以及AJAX處理。

1．jQuery

jQuery是目前最受歡迎的JavaScript庫，它使用CSS選擇器來訪問和操作網(wǎng)頁上的HTML元素（DOM對(duì)象），jQuery同時(shí)提供companion UI（用戶界面）和插件。目前Google、Microsoft、IBM、Netflix等許多大公司在網(wǎng)站上都使用了jQuery。

2．Prototype

Prototype是一種JavaScript庫，提供用于執(zhí)行常見Web任務(wù)的簡單API。API是應(yīng)用程序編程接口（Application Programming Interface）的縮寫，它是包含屬性和方法的庫，用于操作HTML DOM。Prototype通過提供類和繼承實(shí)現(xiàn)對(duì)JavaScript的增強(qiáng)。

3．MooTools

MooTools也是一個(gè)JavaScript庫，提供了可使常見的JavaScript編程更為簡單的API，也包含一些輕量級(jí)的效果和動(dòng)畫函數(shù)。

1.12　下載和替代jQuery庫

進(jìn)入jQuery的官方網(wǎng)站可以下載各個(gè)版本的jQuery庫文件。jQuery不需要安裝，把下載的JS文件存入網(wǎng)站上的一個(gè)公共位置，想要在某個(gè)頁面中使用jQuery時(shí)，只需要在相關(guān)的HTML文檔中引入該庫文件即可。

有以下兩個(gè)版本的jQuery庫可供下載：一個(gè)版本用于實(shí)際的網(wǎng)站中，是已被精簡和壓縮的；另一個(gè)版本用于測試和開發(fā)，是未壓縮的（是可讀的代碼，供調(diào)試或閱讀）。

這兩個(gè)版本都可以從jQuery官方網(wǎng)站上下載?？梢园严螺d文件放到與頁面相同的文件夾中，這樣更方便使用。

如果許多不同的網(wǎng)站使用相同的JavaScript庫，那么把框架庫存放在一個(gè)通用的位置供每個(gè)網(wǎng)頁分享就變得很有意義了。CDN（Content Delivery Network）解決了這個(gè)問題。CDN是包含可分享代碼庫的網(wǎng)絡(luò)服務(wù)器。

Google和Microsoft公司的網(wǎng)站對(duì)jQuery的支持都很好。如果不希望下載并存放jQuery庫，那么也可以通過Google或Microsoft的CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它，Google和Microsoft的服務(wù)器都存有jQuery庫。

如需從Google或Microsoft引用jQuery，使用以下代碼之一。

（1）使用Google的CDN。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

（2）使用Microsoft的CDN。

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

提示　使用Google或Microsoft的jQuery有一個(gè)很大的優(yōu)勢：許多用戶在訪問其他站點(diǎn)時(shí)，已經(jīng)從Google或Microsoft加載過jQuery。所以當(dāng)用戶訪問使用jQuery的站點(diǎn)時(shí)，會(huì)從緩存中加載jQuery，這樣可以減少加載時(shí)間。同時(shí)，大多數(shù)CDN都可以確保當(dāng)用戶向其請(qǐng)求文件時(shí)，會(huì)從離用戶最近的服務(wù)器上返回響應(yīng)，這樣也可以提高加載速度。

1.13　jQuery簡介

jQuery是一個(gè)JavaScript函數(shù)庫，是一個(gè)“寫得更少，但做得更多”的輕量級(jí)JavaScript庫，jQuery極大地簡化了JavaScript編程。

1．jQuery的引用方法

如需使用jQuery，需要先下載jQuery庫，然后使用HTML的<script>標(biāo)簽引用它。

<script type="text/javascript"src="jquery.js"></script>

在HTML 5中，<script>標(biāo)簽中的type="text/javascript"可以省略不寫，因?yàn)镴avaScript是HTML 5以及所有現(xiàn)代瀏覽器中的默認(rèn)腳本語言。

2．jQuery函數(shù)的類別

jQuery庫是一個(gè)JavaScript文件，其中包含了所有的jQuery函數(shù)。jQuery庫包含以下類別的函數(shù)。

（1）HTML元素選取函數(shù)。

（2）HTML元素操作函數(shù)。

（3）CSS操作函數(shù)。

（4）HTML事件函數(shù)。

（5）JavaScript特效和動(dòng)畫函數(shù)。

（6）HTML DOM遍歷和修改函數(shù)。

（7）AJAX函數(shù)。

（8）Utilities函數(shù)。

3．jQuery的基礎(chǔ)語法

通過jQuery，可以選取（查詢，query）HTML元素，并對(duì)它們執(zhí)行“操作”（actions）。

jQuery語法是為HTML元素的選取編制的，可以對(duì)元素執(zhí)行某些操作。

其基礎(chǔ)語法是：$(selector).action()

（1）美元符號(hào)$定義jQuery。jQuery庫只建立一個(gè)名為jQuery的對(duì)象，其所有函數(shù)都在該對(duì)象之下，其別名為$。

（2）選擇符（selector）用于“查詢”或“查找”HTML元素。

（3）jQuery的action()用于執(zhí)行對(duì)元素的操作。

例如：

$(this).hide()      //隱藏當(dāng)前元素 

4．文檔就緒函數(shù)ready

jQuery使用$(document).ready()方法代替?zhèn)鹘y(tǒng)JavaScript的window.onload事件，通過使用該方法，可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱并調(diào)用執(zhí)行它所綁定的函數(shù)。$(document).ready()方法和window.onload事件有相似的功能，但是在執(zhí)行時(shí)機(jī)方面有細(xì)微區(qū)別。window.onload方法是在網(wǎng)頁中所有的元素（包括元素的所有關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行，即JavaScript此時(shí)才可以訪問網(wǎng)頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊(cè)的事件處理程序，在DOM完全就緒時(shí)就可以被調(diào)用。此時(shí)，網(wǎng)頁的所有元素對(duì)jQuery而言都是可以訪問的，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。

jQuery函數(shù)應(yīng)位于ready方法中。

例如：

$(document).ready(function(){ 
      //函數(shù)代碼 
  }) ; 

這是為了防止文檔在完全加載（就緒）之前運(yùn)行jQuery代碼。

如果在文檔沒有完全加載之前就運(yùn)行函數(shù)，操作可能失敗。例如，試圖隱藏一個(gè)不存在的元素或者獲得未完全加載的圖像的大小。

以上代碼可簡寫為以下形式。

$(function(){ 
        //函數(shù)代碼 
    }) ; 

另外，由于$(document)也可以簡寫為$()。當(dāng)$()不帶參數(shù)時(shí)，默認(rèn)參數(shù)就是“document”，因此也可以簡寫為以下形式。

$().ready(function(){ 
        //函數(shù)代碼 
    }) ; 

以上3種形式的功能相同，用戶可以根據(jù)喜好進(jìn)行選擇。

引導(dǎo)訓(xùn)練