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 文件內，讓你可以迅速地建立網頁或應用程式。

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

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

1. 首先，進入你測試網頁的資料夾中，並建立一個名為 main.js 的檔案，再將她存放於 scripts 資料夾內。

2. 接著，開啟 index.html 檔案，並在 </body> 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：

   html

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

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

4. 再來我們把以下的程式碼新增到 main.js 檔案內：

   js

   var myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

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

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

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

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

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

let myVariable;

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

myVariable = "Bob";

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

myVariable;

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

let myVariable = "Bob";

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

let myVariable = 'Bob';
myVariable = 'Steve';

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

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

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

/*
Everything in between is a comment.
*/

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

// This is a comment

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

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

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

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

let myVariable = document.querySelector("h1");

alert("hello!");

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

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

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

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

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

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

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

備註： return 陳述式會要求瀏覽器將 result變數回傳，以利後續使用。這是必要的，不然在函式內定義的變數就只能在函式內使用。這個現象叫作變數的有效使用範圍（scoping）（請參閱這篇文章以了解變數的有效使用範圍）

如果要在網頁上創造真正的互動功能，你將會需要事件（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，請把她們給刪除）：

   js

   var myImage = document.querySelector("img");
   
   myImage.onclick = function () {
     let 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> 元素之前：

   html

   <button>Change user</button>
   

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

   js

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

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

   js

   function setUserName() {
     let 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 區塊 — 因為她會在程式一開始被讀取的時候就被啟用，我們稱她為初始化程式碼：

   js

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

   這個區塊一開始使用了邏輯負運算子（邏輯非）來檢查 name 這個物件是否存在。如果沒有，那就執行 setUserName() 這個函式並且創造她。如果有了（例如：使用者已經在上一次造訪網頁時就設定過了），我們就使用 getItem() 函式來取得儲存的名字，並且將標題的 innerHTML 特性設定為一個字串加上使用者的名字，也就是我們在 setUserName() 函式裡做的事情。

5. 最後，把以下的 onclick 事件處理器跟按鈕綁定，如此一來，每次點選按鈕時就會執行 setUserName()。這將允許使用者透過點選那個按鈕來重新設定一個新的名字：

   js

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

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

當你運行範例並出現提示你輸入用戶名稱的對話框時，請嘗試按下取消 鈕。你會看到一個標題顯示著"Mozilla is cool, null"。這是因為當你取消提示時，該值將會被設為 null。null 在 Javascript 中的一個特殊值，基本上用來表示沒有任何值。

再試試按下 OK，但不輸入任何名字。你將會看到"Mozilla is cool,"，該結果的原因非常簡單的可以理解。

如果你想避免產生這些問題，你應該檢查使用者是否輸入了 null 或是空白的名字。試著透過修改setUserName()來應對這些問題，結果如下：

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
  }
}

用人類的語言來理解，如果myName沒有值或是它的值是null，再次從頭執行setUserName()。如果myName有值（如果上述條件是不為真）．將值存入localStorage並將值設定給標頭檔的文件。

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

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

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

JavaScript — Dynamic client-side scripting

Our JavaScript learning topic — dive into JavaScript in much more detail.

Learn JavaScript

An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.

• 前頁
• 概述：Web 入門
• 次頁