JavaScript入門之語言基礎第1/2頁

JavaScript 語言正越來越受歡迎，可以說是是互連網上最突出的語言之一。你可以跨平台和瀏覽器使用它，其並不排斥後端語言。現在有許多不同的開發庫——有些非常棒—— 這些庫對開發很有協助，比如說加快了開發的時間等等。問題是，有時候這些庫與原始語言之間很是有一些距離，這使得剛入門的開發人員缺乏一種對語言的基礎瞭解。

本文通過全面列舉基礎的JavaScript概念這一方式來闡述該語言的基本原理，以此來為初學者提供一個對語言的基本瞭解，隨處可見的代碼例子則是用來說明所有的這些概念是如何在語言中體現出來的。

瞭解JavaScript語言

JavaScript語言是一種免費的用戶端指令碼語言，其能夠讓你往超文字標記語言 (HTML)(Hypertext Markup Language，HTML)頁面中加入互動行為。用戶端(client-side)意味著JavaScript運行在瀏覽器中，而不是用在伺服器端。在網頁被伺服器送達並被瀏覽器載入後，用戶端指令碼就允許使用者與網頁進行互動。例如，Google Maps就是使用JavaScript語言來支援使用者與地圖之間的互動的，互動的方式有移動地圖、放大和縮小等。沒有JavaScript語言的話，網頁需要為每次和每個使用者的互動行為進行重新整理，當然，除非頁面用到了諸如Adobe Flash或是Microsoft Silverlight一類的外掛程式。JavaScript語言不需要外掛程式。

因為JavaScript語言為載入後的網頁提供使用者互動行為，因此開發人員通常會用它來實現下面的一些功能：

1. 動態添加、編輯和刪除HTML元素及它們的值。

2. 在提交之前校正表單。

3. 在使用者的電腦上建立cookies以用於在將來的訪問中儲存和檢索資料。

在開始之前，只要知道語言的幾個基本原則就行了：

1. 要在HTML檔案中把JavaScript程式碼封裝含進來的話，你必須要把代碼放在指令碼標籤(script)的內部，並加入text/javascript這一類型(type)屬性(清單1)。

2. 所有的JavaScript語句以分號結束。

3. 語言是大小寫敏感的。

4. 所有的變數名都必須以字母或是底線作為開始。

5. 你可以使用注釋來說明指令碼中的某些行，注釋的編寫方式是，以一個雙斜線(//)為開始，後面跟著注釋。

6. 你還可以使用注釋來把指令碼注釋掉。要注釋指令碼的多行的話，一種好的做法是使用/* 你的指令碼在這裡 */。任何位於星號之內的指令碼在執行過程中都不會運行。

清單1.需要使用script標籤和type屬性來把JavaScript程式碼封裝含到HTML檔案中來

<script type="text/javascript"></script>
要隱藏瀏覽器不支援的JavaScript的代碼，或是使用者想把代碼關掉的話，只要在JavaScrip語句的前後使用注釋標籤就可以了(清單2)。

清單2. 使用注釋來隱藏瀏覽器不支援的JavaScript代碼 複製代碼 代碼如下:<script type="text/javascript">
<!--
Example statement here
//-->
</script>

最常用的把JavaScript程式碼封裝含到網頁中的方式是，使用指令碼(script)標籤中的src屬性來把代碼從一個外部的JavaScript檔案中載入進來(清單3)。

清單3. 在HTML檔案中包含外部的JavaScript檔案
<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script>
外部JavaScript檔案是最常見的包含JavaScript代碼的方式，這是有一些很實在的原因的：

1. 如果你的HTML頁面中有著更少的代碼的話，搜尋引擎就能夠以更快的速度來抓取和索引你的網站。

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

3. 因為可以在HTML代碼中包含進多個JavaScript檔案，因此你可以把JavaScript檔案分開放在web伺服器上不同的檔案目錄結構中，這類似於映像的存放方式，這是一種更容易管理代碼的做法。清晰、有條理的代碼始終是讓網站管理變得容易起來的關鍵。

變數

變數儲存資料，這些資料稍後要被檢索的或是要使用新的資料來更新。儲存在變數中的資料可以是一個值或運算式，JavaScript語言有三種類型的運算式，表1對此做了描述。

表1. JavaScript運算式

運算式描述

算術　計算的結果為一個數值

字串計算的結果為一個字串

邏輯　計算的結果為一個布爾值(true或者false)

變數有兩種類型：局部的和全域的。局部變數使用var這一關鍵字來聲明，聲明全域變數則不需要使用var關鍵字。使用了var關鍵字的變數被看成是 局部的，因為除了你聲明它的地方所處的範圍之外，它不能在其他任何地方被訪問。例如，如果你在一個函數(在將近文章的結尾部分我會談論到)的內部聲明了一個局部變數的話，該變數就不能在該函數之外被訪問，這就使得它是這一函數局部的。如果你沒有使用var關鍵字聲明這同一變數的話，它在整個指令碼中就都是可被訪問到的，而不僅限定於只能在那個函數中被訪問。

清單4給出了一個局部變數的例子，其被命名為num，並被賦值為10。

清單4. 聲明一個局部變數

var num = 10;
要在指令碼中的另一個位置訪問num變數的值的話，你只需要通過名稱來引用該變數就可以了，如清單5所示。

清單5. 訪問變數的值 複製代碼 代碼如下:document.write("The value of num is: "+ num);

這一語句的結果是“The value of num is: 10”。這一document.write函數把資料寫到網頁中，在本文餘下的部分中你都是使用這一函數來把例子寫到網頁中。

要把算術運算式儲存到變數中的話，你只要把變數指配給計算的值就可以了，如清單6所示。計算的結果而非算式本身被儲存在變數中。因此，我們又一次得到這一結果“The value of num is: 10”。

清單6. 儲存算術運算式 複製代碼 代碼如下:var num = (5 + 5);
document.write("The value of num is: "+ num);

要改變變數的值的話，通過你為變數所分配的名稱來引用變數，並使用等號來為其賦一個新的值(清單7)。這次的不同之處在於你不需要使用var關鍵字，因為變數已經聲明過了。

清單7. 改變現有變數的值
複製代碼 代碼如下:var num = 10;
document.write("The value of num is: "+ num);

// 把num的值更新成15
num = 15;
document.write("The new value of num is: "+ num);

這一指令碼的結果先是一句“The value of num is: 10”，後面跟著“The new value of num is: 15”。除了講解變數之外，這一節內容還引入了下一個主題，也就是運算子。你用來把值賦給變數的等號(=)就是一個賦值運算子，以及你用在5+5中的加號(+)是一個算術運算子。下一節內容談論JavaScript語言中的所有變數運算子及其用法。

運算子

在執行JavaScript語言中的任何運算時，你都需要運算子。運算包括了加法、減法、比較等。JavaScript語言中有四種運算子。

1. 算術

2. 賦值

3. 比較

4. 邏輯

算術運算子

算術運算子執行基本的數學運算，比如說加減乘除等。表2列出並描述了JavaScript語言中的所有可用的算術運算。

表2. 算術運算子

運算子描述

+ 加法

- 減法

* 乘法

/ 除法

% 模數(找出餘數)

++　 遞增

--遞減
賦值運算子

算術運算子執行基本的數學運算，而賦值運算子則是把值賦給JavaScript變數。當你在前面一節中把值賦給變數時，你已經見到了最常用的賦值運算子。表3列出並描述了JavaScript語言中所有可用的賦值運算子。

表3. 賦值運算子

運算子描述

=等於

+=把加法值(變數加上值的結果值)賦給變數

-=把減法值(變數減去值的結果值)賦給變數

*=把乘法值(變數乘上值的結果值)賦給變數

/=把除法值(變數除以值的結果值)賦給變數

%=把模數值(變數對值模數的結果)賦給變數

你已經看到了如何使用等號來把值或是運算式賦給變數，但現在我會給展示如何使用一個令人稍加困惑的賦值運算子。把一個加法值賦給一個變數可能是一個很奇怪的概念，但實際上很簡單(清單8)。

清單8. 把一個加法值賦給一個變數 複製代碼 代碼如下:var num = 10;
document.write("The value of num is: "+ num);

// 把num的值更新為15
num += 5;
document.write("The new value of num is: "+ num);

這一指令碼的結果是“The value of num is: 10”後面跟著“"The new value of num is: 15”。你可以看到，這一指令碼中的運算子把加法值賦給了變數。這也可以當作是清單9中所編寫的指令碼的一種簡短寫法。

清單9. 把加法值賦給變數的一種更長的寫法。
複製代碼 代碼如下:var num = 10;
document.write("The value of num is: "+ num);

// 把num的值更新為15
num = (num + 5);
document.write("The new value of num is: "+ num);

比較子

比較子確定變數或是它們的值之間的關係。你在條件陳述式中使用比較子，通過比較變數或是它們的值來計算出語句為true還是為false，以此建立邏輯。表4列出並描述了JavaScrpit語言中所有可用的比較子。

表4. 比較子

運算子描述

==等於

===　全等，用於值和物件類型

!=不等於

>大於

<小於

>=　大於或等於

<=　小於或等於

在編寫任何類型的邏輯時，變數和值的比較都是最基本的。清單10中的例子展示了如何使用等於這一比較子(==)來確定10是否等於1。