JS註冊組｜JavaScript基本語法｜JavaScript&jQuery網站互動設計程式進化之道

前言

學習如何閱讀以及撰寫 JavaScript ，然後了解如何下達正確指令讓瀏覽器達成你所賦予的工作任務。

（ 圖片來源 ）

敘述句

程式腳本（ 或程式碼 ）就是提供一連串指令讓電腦依規則執行，每個指令或步驟稱為敘述句（ statement ），敘述句必須以分號做結尾，這樣能讓 JavaScript 解譯器了解步驟什麼時候結束並前往下一步。

綠色部分為敘述句。
粉色的大括號標示出程式區塊（ code block ）的起始位置，而大括號的結尾是不需要分號的。
藍色部分可決定哪部分的程式需要運行。

在 JavaScript 中，英文字母大小寫不同會代表不同字詞。

註解

可以在程式碼上增加註解（ comments ）說明它們的用途，如此也會讓自己及其他閱讀你程式碼的人更容易理解。

多行註解

如果註解文字超過一行就必須使用多行註解，以 /* 符號開始， */ 符號結束，所有在此區域中的內容， JavaScript 解譯器是不會處理的，多行註解通常用於解釋這程式碼要如何工作，或在功能測試時停止程式碼運作。

單行註解

在單行註解中，所有在 // 符號後的內容， JavaScript 解譯器是不會處理的，單行註解通常用於說明簡短的程式敘述。

變數

程式碼會需要暫時儲存一些工作執行所需要的資料，它可以把這些資料儲存在變數中。

當你在撰寫 JavaScript 時，必須清楚告知解譯器你希望它執行的每個步驟，我們在數學上，都知道長方形的面積計算就是「 長度 x 寬度 = 面積 」，但寫程式碼是要提供非常詳細的指令：

1. 記住長度值
2. 記住寬度值
3. 將長度和寬度相乘已取得面積
4. 回覆使用者結果值

儲存在變數中的資料是可以變更的（ 或可變化的 ），所以變數可被運用於表示程式碼中可能會改變的值，而最終結果值是透過變數中的資料被計算（ calculated ）或運算（ computed ）而得。

變數如何宣告？

在使用變數之前，必須先發佈通知，說明你想要使用它們，這個動作包含了建立變數和給予它們名字，程式設計師通常會說宣告（ declare ）此變數。

var myQuantity;

var 是程式設計師會稱之為關鍵字（ keyword ）的一個例子， JavaScript 解譯器知道當使用這個關鍵字時是為了建立一個變數，而為了使用變數就必須給予它一個名稱（ 上面範例中，名稱為 myQuantity ）。

如果變數名稱由多個字詞組成，通常會以 camelCase 規則方式命名，變數第一個字詞均以小寫表示，而後續字詞的第一個字母均以大寫表示。

變數如何指定值？

當建立完變數，可以告訴它需要儲存哪種資訊，以程式設計師的說法，你指定一個值予變數（ assign a value ）。

var myQuantity = 3;

等於符號（ = ）稱為指定運作子（ assign operator ），它表示你要指定一個變數值，通常也運用於更新變數值，而在你尚未給予值之前，都會被認定為未定義（ undefined ）。

資料型別

JavaScript 能分辨數值、字串與布林值，除了上述三個，其餘的會在後面講述，不同於其他程式設計語言，當宣告一個 JavaScript 的變數，不需要表明他隸屬哪種資料型別。

數值資料型別

可處理數值，例如： 0.75 。
數值不僅是單純用於計算，同時也可運用於例如：元件位置移動量、設定時間⋯⋯等等。

字串資料型別

包含字母及其他字元，例如： 'Hey you!' 。
注意這些字串被放在引號裡，引號可以是單引號或雙引號，但必須要前後一致。字串型別可用於任何文字資料，它經常運用於將新的文字內容加入頁面中，同時內容也可以包含 HTML 標籤。

布林值資料型別

值可為二者之一： true 或 false 。
可以想像成電源開關，它的狀態不是開啟就是關閉，之後探討條件判斷時，布林值就非常有用。

利用縮寫表示法建立變數

程式設計師有時會使用縮寫表示法來建立變數，但要記住，這樣雖然能節省一些打字時間，但也可能讓代碼變得難以閱讀。

在同一行敘述句中，進行變數宣告並指定變數值

var a = 5;
var b = 6;
var c = a * b;

在同一行敘述句中宣告多種變數，接著為每個變數指定變數值

var a, b, c;
a = 5;
b = 6;
c = a * b;

分別對不同敘述句的變數宣告並指定變數值

var a = 5, b = 6;
var c = a * b;

變更變數值

當你為變數指定變數值時，後續仍可在相同程式碼中，更改儲存在變數裡的內容。

var a;
var b;

a = 5;
b = 6;

a = 5566;
b = 2266;

變數命名規則

當給予變數名稱時，必須遵守以下六項規則：

1. 名稱必須要以字母、金錢符號（ $ ）或底線（ _ ）起始，第一個字不能為數字。
2. 名稱可以包含字母、數字、金錢符號或底線，但不能使用破折號（ - ）或句點（ . ）。
3. 不能使用關鍵字或保留字，例如： var 是宣告變數的關鍵字，而保留字是在未來版本的 JavaScript 可能會被採用故不允許。
4. 變數都是有區分大小寫的，所以 age 跟 Age 是不同變數名稱，但創造兩個名稱相同但大小寫不同的變數，並不是一個好的例子。
5. 使用名稱來描述變數所儲存的資訊，例如： firstName 用來儲存名字、 lastName 則是姓氏⋯⋯等。
6. 如果變數是由一個字詞以上所組成，在第一個字詞後，每個字詞的第一個字母都使用大寫，例如： first name 用駝峰式命名法即 firstName ，也可以在字詞間使用底線如： first_name 。

陣列

陣列（ array ）是一種特別類型的變數，它不只能儲存一個值，還能儲存一系列的值。

當你需要運用一系列或一個集合的值，且值與值間具關聯性的狀況時，就可以使用陣列，因為創造陣列時，並不需要明確指出它需要保存多少資料項目數量，所以在不確定此資料串列中的資料項目總量時更顯有效，例如：儲存購物清單裡的採購項目，因為它是一連串相關的資料項目且每次寫入的數量可能都不一樣。

建立陣列

建立陣列時也需要賦予它一個名稱，就像建立變數一樣用 var 關鍵字，後面接陣列名稱，指定給陣列的值會放在括號內，每個值間用逗號分開，且值不用都是相同資料型別，所以可以同時儲存字串、數值及布林值。

方括號

var colors;
colors = ['white', 'black', 'red'];

// 此為陣列實字法，將每一個值分別描述於不同行，以提高可讀性
var colors;
colors = ['white',
          'black',
          'red'];

小括號

// 此為陣列構造子，需要使用關鍵字 new 接著 Array()的方式敘述
var colors = new Array('white',
                       'black',
                       'red');

陣列中的資料值

存取陣列資料的方式，就有如將資料置於一個編號列表裡，要注意的是：列表是從「 0 」開始編號。

為陣列的資料項目編號

陣列中的每個資料項目都會被自動給予一個編號，稱為索引（ index ），且索引是從 0 開始，下方會顯示出陣列中的資料項目與對應的索引值：

var colors;
colors = ['white', 'black', 'red'];

存取陣列中的項目

欲存取列表中的第三個資料項目，必須描述陣列名稱，並將索引值指定於方括號中。
如下，可以先宣告一個變數，並把它的值設定為 colors 陣列的第三個（ 要記得索引是從 0 開始 ）顏色資料值。

var itemThree;
itemThree = colors[2];

陣列的項目數量

每個陣列都具備一個名為 length 的特性，它會保存陣列中資料項目的數量。
如下，可以先宣告一個變數，並把它的值以陣列名稱接著句點符號和特性名稱 length ，以存取陣列的項目數量。

var numColors;
numColors = colors.length;

運算式

運算式可評鑑（ 產生 ）一個單一值，大致上可分為兩種類型。

運算式僅為變數指定一個內容值

var color = 'red';

color 值現在被指定為 red 了。

運算式使用兩個或多個資料值，並回傳一結果值

var area = 3 * 2;

area 值現在為 6 了。

運算子

運算式的操作必須倚賴運算子；它們讓程式設計師能夠從一個或多個值中，產生一個結果值。

指定運算子

指定一個資料值予變數。

color = 'red';
// color 值現在為 red 。

算術運算子

執行基本數學運算。

area = 3 * 2;
// area 值現在為 6 。

字串運算子

合併兩個字串資料。

greeting = 'Hi' + 'John';
// greeting 值現在為 Hi John 。

比較運算子

比較兩個資料值，並回傳 true 或 false 。

buy = 3 > 5;
// buy 值現在為 false 。

邏輯運算子

結合運算式並回傳 true 或 false 。

buy = (5 > 3) && (2 < 4);
// buy 值現在為 true 。

算術運算子

JavaScript 包含以下算術運算子，利用它們便可以對數值資料進行運算，但要記得先乘除後加減。

參考資料

JavaScript & jQuery 網站互動設計程式進化之道（ Jon Duckett 著、謝銘倫 譯 ）