JavaScript 基礎

所以 JavaScript 到底是什麼？

JavaScript 是一個成熟的動態程式語言，應用於 HTML 文件(document)上時，就可以為網頁提供動態的互動功能。JavaScript  是由 Mozilla project、Mozilla Foundation 和 Mozilla Corporation 的創辦人 Brendan Eich 所發明的。

你可以用 JavaScript 實現許多事情。你可以先從簡單的特性開始，如跑馬燈、相簿、動態版型、回應按鈕點擊等。在你熟悉的這個程式語言以後，甚至可以製作遊戲、2D平面以及立體的圖像、資料庫系統等等的應用！

JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，讓各位可以感到事半功倍。這些工具包括：

• 內建在瀏覽器內的應用程式介面（Application Programming Interfaces，APIs）提供了多樣化的功能，像是動態產生 HTML 以及設定 CSS 樣式、擷取以及處理從只用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。
• 第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。
• 第三方框架和函式庫允許您將這些元件套用在您的 HTML 文件內，讓您可以迅速地建立網頁或應用程式。

"Hello world" 範例程式

前面所述的功能聽起來令人興奮，而她也的確符合這樣的期待— JavaScript 是眾多令人感到興奮的網路科技之一，您會因為選擇利用她來製作網頁而進入一個嶄新且充滿創意及力量的次元。

但無論如何，要讓 JavaScript 跟 HTML 和 CSS 合作無間的話，可能還要費一些功夫。現在您將會從一些細小的地方開始著手，接著一步步地往前進。首先，我們將會向您展示如何將一些基本的 JavaScript 給加入您的頁面中，並且打造一個 "hello world!" 的範例（這同時也是許多程式語言的標準範例程式）

1. 首先，進入您測試網頁的資料夾中，並建立一個名為 main.js 的檔案，再將她存放於 scripts 資料夾內。
2. 接著，開啟 index.html 檔案，並在 </body> 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：

   <script src="scripts/main.js"></script>

3. 我們做的事情，基本上跟新增一個 CSS 的 <link> 元素是相同的概念 — 我們將 JavaScript 給導入這個頁面中，讓她來影響 HTML（以及 CSS、還有任何頁面上的東西）。
4. 再來我們把以下的程式碼新增到 main.js 檔案內：

   var myHeading = document.querySelector('h1');
   myHeading.innerHTML = 'Hello world!';

5. 現在請您將修改過的 HTML 和 JavaScript 給存檔，再用瀏覽器讀取 index.html。您應該會看到以下的內容：

發生什麼事了？

所以您的標題文字已經被 JavaScript 修改成 "Hello world!" 了。我們先使用了一個叫做 querySelector() 的函式來取得了我們標題參照 (Reference)，並且將她存在一個叫做 myHeading 的變數裡面。這跟我們在操作 CSS 時使用的選擇器是相似的。當您想要更動某個元素時，首先您要將她選取起來。

之後，我們將變數 myHeading 中 innerHTML 特性的值設為 "Hello world!"。

語言基礎速成

接著我們來解釋一下 JavaScript 基本特性，以讓您更加地了解她是如何運作的。更好的事情是，這些特性基本上也存在於所有程式語言中。所以如果您可以充分理解這些基礎知識，您就可以撰寫程式來創造無限可能！

變數（Variables）

變數（Variables）是可以用來儲存數值的容器。要宣告一個變數，首先要用關鍵字 var 來開頭，並在後面輸入您想要用來呼叫她的名字：

var myVariable;

宣告了一個變數之後，您可以為她指定一個數值：

myVariable = 'Bob';

您可以呼叫這個變數的名字來取得這個值：

myVariable;

如果您有需要，您也可以在一行之內同時做完這兩件事情：

var myVariable = 'Bob';

當您把一個數值指定給一個變數之後，您也可以再次改變她：

var myVariable = 'Bob';
myVariable = 'Steve';

請記得這些變數有著不同的資料型態：

所以為什麼我們需要變數？這個嘛，我們寫程式時可以做的任何有趣的事情，都需要有變數的參與。如果數值不會更動，那您也無法做任何動態的事情，像是客製化一個歡迎訊息、或是變更相簿裡的圖片。

註解（Comments）

您可以在您的 JavaScript 程式碼中加入註解，就像您在撰寫 CSS 時做的事情一樣：

/*
Everything in between is a comment.
*/

如果您的註解只有一行，我們通常會簡單將註解放在兩個斜線的後方，像以下的範例：

// This is a comment

運算子（Operators）

運算子（ operator）是一個數學符號，可以讓兩個數值（或是變數）交互作用以後產生結果。您可以從以下的表格中看到一些最簡單的運算子，並將範例輸入 JavaScript 主控台來測試看看。

其實還有更多的運算子等的您去探索，但我們將在這裡先打住。您可以參照這篇 Expressions and operators 以取得完整的列表。

條件（Conditionals）

條件是種程式碼結構，可以讓您測試某個描述式會不會回傳真值，並根據不同的結果執行不同程式碼。最常見的形式是 if ... else 。以下是一個範例：

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

在 if ( ... ) 裡面的描述式就是一個測試—這將會使用到等價運算子（如先前所描述的）來比較變數 iceCream 和字串 chocolate 兩者是否相等，如果在比較之後回傳了 true，接著就執行第一個區塊內的程式碼。如果不是，就略過第一個區塊的程式碼並轉而執行寫在執行在 else 之後、第二個區塊內的程式碼。

函式（Functions）

函式（Functions）是一種將需要重複使用的功能打包裝起來的方法，所以當要再次執行這些功能的時候，就可以呼叫這個函式來達成，而不是一再的重新撰寫程式碼。您在先前的篇幅中其實已經看過一些函式了，例如：

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

這些函式是瀏覽器為您內建的，您可以自由地使用。

如果您看到某些很像是變數名稱的東西，但是後面帶有括號 — () — 的話，表示這可能是一個函式。函式通常會接收參數（arguments）—這是一些可以讓她完成工作的必要資料。這些參數會被寫在括號裡面，如果有不只一個參數的話，彼此間要用逗號隔開。

舉例來說，alert() 這個函式會在瀏覽器內視窗內產生一個彈出視窗，但是我們必須要傳給她一個字串當作參數，告訴這個函式，該把什麼東西放到這個彈出視窗裡。

好消息是：您可以定義您自己的函式 — 底下的這個範例中，我們將會為您帶來一個簡單的函式，她會接收兩個數字當作參數，並將其相乘：

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

您可以試著在主控台中執行上述的函式，然後再用不同的參數來測試這個函式幾次，例如：

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

事件（Events）

如果要在網頁上創造真正的互動功能，您將會需要事件（Events） — 這是一種可以監聽瀏覽器發生了什麼事情的程式碼結構，接著她會允許您執行其他程式碼以回應這些事件。最明顯的事件就是 click event 了，當瀏覽器裡的某個東西被滑鼠點選時，這個事件就會被觸發。如果要測試一下這個事件，請您把底下的程式碼輸入到主控台內，接著用滑鼠點選目前的網頁：

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

有許多的方法可以把事件跟網頁元素結合在一起。在底下的程式碼中，我們先選擇了 HTML 元素，並把這個元素的 onclick 處理器設定為一個匿名函式，裡面裝著在滑鼠點選事件發生時，要執行的程式碼：

請特別注意到以下這段程式碼：

document.querySelector('html').onclick = function() {};

產生的結果將會與下面這段程式碼相同

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

只是上面那段寫起來比較簡短罷了。

徹底加強我們的範例網頁

到目前為止，我們已經學會一些 JavaScript 的基礎知識了，接下來讓我們幫這個網頁新增一些很酷的特色，並給您一些靈感。

加入一個圖片變換器

在這個小節中，我們將在這個網頁裡添加一個圖片，以及一些簡單的 JavaScript，當這個圖片被滑鼠點選的時候，就會在兩個圖片之間互相切換。

1. 首先，先去找張您可以為您的網頁增添光彩的圖片。請盡量找一張尺寸跟第一張圖相同的圖片、或至少是張相似尺寸的圖片。
2. 將圖片存放到 images 資料夾內。
3. 編輯您的 main.js 檔案，並且將以下的 JavaScript 輸入到檔案內（如果您還有看見那段 hello world 的 JavaScript，請把她們給刪除）：

   var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

4. 請將全部檔案儲存，並用瀏覽器開啟 index.html。現在請您點選圖片，她應該會切換成另外一張！

在這裡，我們把一個圖片元素的參照存進了 myImage 變數裡。接著，我們把這個變數的 onclick 事件處理器設定為一個匿名函式。現在，每當這個圖片被點選一次：

1. 我們會去取得圖片中 src 屬性的數值
2. 我們用一個條件判斷式，來檢查 src 的數值是否跟原始圖片的位址相同：
   1. 如果兩者相同，那我們就把 src 的數值更改為第二個圖片的位址，也就是在  <image> 元素裡強迫讀取另外一張圖片。
   2. 如果兩者不同（也就是圖片已經被切換過了），我們就把 src 的數值更改為原始圖片的位址，圖片就會被切換回原來那張。

添加個客製化的歡迎訊息

接著我們再來添加一些程式碼，在使用者瀏覽這個網頁的時候，將網頁標題改為客製化的歡迎訊息。這個歡迎訊息會一直保留著，直到使用者離開這個網頁為止。我們也會添加個切換使用者的選項，並且一併更改歡迎訊息。

1. 編輯 index.html 檔案，並將下列程式碼置於 <script> 元素之前：

   <button>Change user</button>

2. 編輯 main.js 檔案，並將下列程式碼一字不漏地碼置於檔案的最末端 — 這些程式碼將會取得新按鈕、標題的參照，並把它們存在變數裡：

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. 現在，將以下的函式加進去以設定客製化的歡迎訊息 — 這些函式目前還不會產生作用，但我們等一下會用到她們：

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   這個函式包含了一個會產生一個對話視窗的 prompt() 函式，有點像 alert()，只是 prompt() 會要求使用者輸入一些資料，並在使用者點選確認之後，將內容儲存在一個變數裡面。接著，我們呼叫一個名稱為 localStorage 的 API，這個 API 可以讓使用者先將一些資料儲存在瀏覽器裡面，之後有需要的話再取出來使用。我們使用 localStorage 的 setItem() 函式來建立並且把資料儲存到一個名稱為 'name' 的變數裡，再把包含者用者名字的 myName 的值指定給她。最後，我們將一個字串跟使用者的名字指定給標題的 innerHTML 特性：
4. 接著，加入這個 if ... else 區塊 — 因為她會在程式一開始被讀取的時候就被啟用，我們稱她為初始化程式碼：

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   這個區塊一開始使用了邏輯負運算子（邏輯非）來檢查 name 這個物件是否存在。如果沒有，那就執行 setUserName() 這個函式並且創造她。如果有了（例如：使用者已經在上一次造訪網頁時就設定過了），我們就使用 getItem() 函式來取得儲存的名字，並且將標題的 innerHTML 特性設定為一個字串加上使用者的名字，也就是我們在 setUserName() 函式裡做的事情。
5. 最後，把以下的 onclick 事件處理器跟按鈕綁定，如此一來，每次點選按鈕時就會執行 setUserName()。這將允許使用者透過點選那個按鈕來重新設定一個新的名字：

   myButton.onclick = function() {
     setUserName();
   }
   

現在當您造訪這個網頁時，她會詢問您的名字，並且給您一個客製化過的歡迎訊息。在這之後，您也可以隨時透過點選那個按鈕來更改名字。順帶一提，因為這組客製化過的訊息是存在 localStorage 裡的，所以即使您將網頁關起來，她還是會保留著，所以當您下次開啟這個網頁時，這段客製化的訊息依然會出現！

結語

如果您已經照著這篇文章的所有步驟做完了，您應該會看到以下的畫面（或者您也可以瀏覽我們製作的版本）：

如果在過程中遇到了任何問題，您也可以隨時把您的成品與我們 放在 Gihub 上的範例 相互對照。

在此，我們只稍稍體驗了 JavaScript 的一些皮毛。如果您非常享受這段學習的過程，並想要繼續深究，請您繼續瀏覽我們製作的 JavaScript Guide。