第二部分

第4章 JavaScript技術(shù)詳解

JavaScript在頁(yè)面控制方面起著不可代替的作用，但它在編程方面的一些不好的習(xí)慣也飽受詬病，但自從Prototype推出以后，開(kāi)發(fā)人員突然發(fā)現(xiàn)，原來(lái)JavaScript可以使用面向?qū)ο蟮姆绞骄幊蹋部梢源偈归_(kāi)發(fā)人員養(yǎng)成良好的編程習(xí)慣。

本章首先對(duì)JavaScript的基礎(chǔ)知識(shí)進(jìn)行介紹，然后重點(diǎn)講解JavaScript的函數(shù)、對(duì)象和事件處理機(jī)制，以及如何使用JavaScript來(lái)面向?qū)ο缶幊蹋詈笾刂v解XMLHttpRequest對(duì)象，從而使讀者真正理解JavaScript的強(qiáng)大功能。

4.1 JavaScript語(yǔ)言基礎(chǔ)

Netscape公司首先引進(jìn)了Sun公司有關(guān)Java的概念，將自己原有的LiveScript進(jìn)行重新設(shè)計(jì)，并改名為JavaScript。隨后其他的瀏覽器也支持了這種腳本語(yǔ)言，但支持的版本及某些語(yǔ)法可能有所改變，這也造成開(kāi)發(fā)人員在編寫(xiě)JavaScript代碼時(shí)要考慮支持多種版本的問(wèn)題。

4.1.1 變量和數(shù)據(jù)類型

JavaScript中的變量命名與其他計(jì)算機(jī)編程語(yǔ)言非常相似，變量用來(lái)存放腳本中的值。JavaScript是一種對(duì)數(shù)據(jù)類型變量要求不太嚴(yán)格的語(yǔ)言，所以不必聲明每一個(gè)變量的類型，但在使用變量之前先進(jìn)行聲明是一種好的習(xí)慣。JavaScript使用var語(yǔ)句來(lái)進(jìn)行變量聲明，區(qū)分大小寫(xiě)，變量名稱的長(zhǎng)度是任意的，但必須遵循以下規(guī)則：

● 第一個(gè)字符必須是一個(gè)字母、一個(gè)下畫(huà)線（_）或一個(gè)美元符號(hào)（$）。

● 其他的字符可以是字母、數(shù)字、下畫(huà)線或美元符號(hào)，變量名稱中不能有空格、+、－等其他符號(hào)。

● 變量名稱不能是保留字，比如var、int、double、true等都不能作為變量的名稱。

JavaScript有6種數(shù)據(jù)類型，分別是Number、Boolean、String、Object、Null和Undefined。

● Number（數(shù)值）：包括整數(shù)、浮點(diǎn)數(shù)及NaN（非數(shù)）值，整數(shù)可以為正數(shù)、零或者負(fù)數(shù)；浮點(diǎn)數(shù)可以包含小數(shù)點(diǎn)。

● Boolean（布爾）：Boolean值有true和false，不能用1和0來(lái)表示。

● String（字符串）：字符串用單引號(hào)或雙引號(hào)來(lái)表示。

● Object（對(duì)象）：包括數(shù)組類型Array、日期對(duì)象Date等。

● Null（空）：如果為Null，就表示為空或不存在。

● Undefined（未定義）：表示變量已經(jīng)被創(chuàng)建，但未賦值。

下面分別介紹一下數(shù)值、布爾和字符串類型。

● 數(shù)值類型：JavaScript的整數(shù)可以使用八進(jìn)制、十進(jìn)制和十六進(jìn)制來(lái)表示。八進(jìn)制數(shù)的第一位必須是0，十六進(jìn)制數(shù)的前兩位必須是0X或0x。

● 布爾類型：JavaScript中只能用true或false表示其狀態(tài)，而不能用1或0表示，但當(dāng)布爾值用于數(shù)值表達(dá)式時(shí)，true和false將自動(dòng)轉(zhuǎn)換成1和0。

● 字符串類型：用來(lái)說(shuō)明字符串的單引號(hào)或雙引號(hào)必須是成對(duì)出現(xiàn)的，在JavaScript中也以反斜杠“\”開(kāi)頭定義了若干個(gè)不可顯示的特殊字符。如果要在字符串中使用反斜杠，或者在單引號(hào)括起來(lái)的字符串中使用單引號(hào)，以及在雙引號(hào)括起來(lái)的字符串中使用雙引號(hào)，則都需要使用反斜杠作為轉(zhuǎn)義符。JavaScript中的轉(zhuǎn)義符如表4.1所示。

表4.1 JavaScript中的轉(zhuǎn)義符

● 變量的作用域，在JavaScript中變量分為全局變量和局部變量。全局變量定義在所有函數(shù)體之外，其作用范圍是整個(gè)腳本；而局部變量則定義在函數(shù)體之內(nèi)，只對(duì)該函數(shù)可見(jiàn)，而對(duì)其他函數(shù)是不可見(jiàn)的。

4.1.2 運(yùn)算符和表達(dá)式

運(yùn)算符是完成操作的一系列符號(hào)，使用運(yùn)算符的值稱為算子或操作數(shù)。在JavaScript中包括以下7種運(yùn)算符：

● 算術(shù)運(yùn)算符。

● 邏輯運(yùn)算符。

● 字符串運(yùn)算符。

● 比較運(yùn)算符。

● 條件運(yùn)算符。

● 賦值運(yùn)算符。

● 位操作運(yùn)算符。

在上述7種運(yùn)算符中，只有條件運(yùn)算符是三目運(yùn)算符，其他的都是雙目運(yùn)算符或單目運(yùn)算符，下面分別進(jìn)行介紹。

（1）算術(shù)運(yùn)算符：JavaScript中的算術(shù)運(yùn)算符主要有7種，如表4.2所示。

表4.2 JavaScript中的算術(shù)運(yùn)算符

（2）邏輯運(yùn)算符：JavaScript中的邏輯運(yùn)算符主要有3種，如表4.3所示。

表4.3 JavaScript中的邏輯運(yùn)算符

（3）字符串運(yùn)算符：JavaScript中的字符串運(yùn)算符主要有1種，如表4.4所示。

表4.4 JavaScript中的字符串運(yùn)算符

（4）比較運(yùn)算符：JavaScript中的比較運(yùn)算符主要有8種，如表4.5所示。

表4.5 JavaScript中的比較運(yùn)算符

（5）條件運(yùn)算符：JavaScript中的條件運(yùn)算符主要有1種，如表4.6所示。

表4.6 JavaScript中的條件運(yùn)算符

（6）賦值運(yùn)算符：JavaScript中的賦值運(yùn)算符主要有12種，如表4.7所示。

表4.7 JavaScript中的賦值運(yùn)算符

（7）位操作運(yùn)算符：JavaScript中的位操作運(yùn)算符主要有7種，如表4.8所示。

表4.8 JavaScript中的位操作運(yùn)算符

上述運(yùn)算符都有一定的優(yōu)先級(jí)，如表4.9所示。

表4.9 JavaScript中運(yùn)算符的優(yōu)先級(jí)

4.1.3 程序控制語(yǔ)句

程序控制語(yǔ)句使得程序能夠按照一定的方式執(zhí)行，程序的邏輯都是通過(guò)程序控制語(yǔ)句來(lái)實(shí)現(xiàn)的，下面是JavaScript常用的程序控制語(yǔ)句。

（1）if條件語(yǔ)句：

      if(表述式)
      語(yǔ)句段;
      …

代碼說(shuō)明：

● 若表達(dá)式為真，則執(zhí)行語(yǔ)句段。

● 如果要執(zhí)行的語(yǔ)句段有多條語(yǔ)句，則要用花括號(hào)將語(yǔ)句括起來(lái)。多條語(yǔ)句可以寫(xiě)在一行，以分號(hào)“;”分隔，也可以寫(xiě)成多行。為了美觀，建議寫(xiě)成多行。

當(dāng)表達(dá)式為假時(shí)，要執(zhí)行另外的語(yǔ)句，則需要使用if…else語(yǔ)句，如下所示：

      if(表述式)
          語(yǔ)句段1;
          ...
          else
          語(yǔ)句段2;
          …

代碼說(shuō)明：

● 若表達(dá)式為true，則執(zhí)行語(yǔ)句段1；否則執(zhí)行語(yǔ)句段2。

● 若語(yǔ)句段有多行，則必須使用花括號(hào)將其括起來(lái)。

● 語(yǔ)句段還可以是if語(yǔ)句，從而實(shí)現(xiàn)if語(yǔ)句的嵌套，但建議嵌套一般不超過(guò)3層。

（2）switch語(yǔ)句：通過(guò)if語(yǔ)句可以實(shí)現(xiàn)對(duì)多個(gè)表達(dá)式進(jìn)行判斷，從而選擇要執(zhí)行的語(yǔ)句。但這里有另外一種更好的對(duì)多個(gè)表達(dá)式語(yǔ)句進(jìn)行判斷的寫(xiě)法，那就是通過(guò)switch語(yǔ)句，示例代碼如下：

      switch(表達(dá)式){
          case value1;
              語(yǔ)句段1;
              Break;
          case value2;
              語(yǔ)句段2;
              Break;
          ...
          default:
              語(yǔ)句段n;
      }

代碼說(shuō)明：

如果表達(dá)式的值等于value1，則執(zhí)行語(yǔ)句段1，然后跳出該switch語(yǔ)句；如果表達(dá)式的值等于value2，則執(zhí)行語(yǔ)句段2，然后跳出該switch語(yǔ)句；如果都不相等，則執(zhí)行default后面的語(yǔ)句段n。

（3）for循環(huán)語(yǔ)句：用于在某個(gè)條件下重復(fù)執(zhí)行一段代碼。示例代碼如下：

      for(初始化;條件;增量){
          循環(huán)語(yǔ)句;
      }

代碼說(shuō)明：

● 初始化參數(shù)告訴循環(huán)前必須初始化變量。

● 如果條件為真，則執(zhí)行語(yǔ)句，否則跳出循環(huán)體。

● 增量主要定義循環(huán)控制變量在每次循環(huán)時(shí)按什么方式變化。

● 初始化、條件、增量這3個(gè)語(yǔ)句之間，必須使用分號(hào)分隔。

● for語(yǔ)句可以實(shí)現(xiàn)循環(huán)嵌套，但建議一般嵌套不超過(guò)3層。

（4）while循環(huán)語(yǔ)句：是另外一種循環(huán)語(yǔ)句的表示方式，該語(yǔ)句沒(méi)有初始化變量和增量。示例代碼如下：

      while(條件){
          循環(huán)語(yǔ)句;
      }

代碼說(shuō)明：

● 當(dāng)條件為真時(shí)，重復(fù)循環(huán)，否則退出循環(huán)。

● 首先判斷條件如果為假，則直接跳出循環(huán)，不執(zhí)行循環(huán)語(yǔ)句。

（5）do…while語(yǔ)句：while語(yǔ)句的變體，示例代碼如下：

      do {
          循環(huán)語(yǔ)句;
      } while(表達(dá)式)

代碼說(shuō)明：

先執(zhí)行一次循環(huán)語(yǔ)句，然后判斷表達(dá)式的值，如果為真，則繼續(xù)執(zhí)行循環(huán)語(yǔ)句；如果為假，則跳出循環(huán)。

（6）break和continue語(yǔ)句：使用break語(yǔ)句可以跳出循環(huán)語(yǔ)句，使用continue語(yǔ)句可以跳過(guò)循環(huán)內(nèi)剩余的語(yǔ)句而進(jìn)入下一次循環(huán)。

（7）label語(yǔ)句：用于為語(yǔ)句添加標(biāo)號(hào)。