JavaScript 基礎

JavaScript 是一種程式語言，它為您的網站新增互動性。這發生在遊戲中，在按鈕被按下時的響應行為中，在表單的資料輸入中，在動態樣式中，在動畫中等等。本文將幫助您開始使用 JavaScript，並進一步瞭解其可能性。

什麼是 JavaScript？

JavaScript 是一種強大的程式語言，可以為網站新增互動性。它是由 Brendan Eich 發明的。

JavaScript 多才多藝且適合初學者。隨著經驗的積累，您將能夠建立遊戲、動畫 2D 和 3D 圖形、全面的資料庫驅動應用程式等等！

JavaScript 本身相對緊湊，但非常靈活。開發人員在核心 JavaScript 語言之上編寫了各種工具，以最小的努力解鎖了大量的功能。這些工具包括

內置於 Web 瀏覽器中的瀏覽器應用程式程式設計介面 (API)，提供功能，例如動態建立 HTML 和設定 CSS 樣式；從使用者的網路攝像頭收集和操作影片流，或生成 3D 圖形和音訊樣本。
第三方 API，允許開發人員將來自其他內容提供商的功能整合到網站中，例如 Disqus 或 Facebook。
您可以應用於 HTML 的第三方框架和庫，以加速構建網站和應用程式的工作。

作為對 JavaScript 的簡要介紹，本文沒有涉及核心 JavaScript 語言與上面列出的工具的不同之處。您可以在 MDN 的 JavaScript 學習區域以及 MDN 的其他部分了解更多資訊。

下面的部分介紹了核心語言的某些方面，並提供了一個機會來玩一些瀏覽器 API 功能。玩得開心！

"Hello world!" 示例

JavaScript 是最流行的現代 Web 技術之一！隨著您的 JavaScript 技能的提升，您的網站將進入一個新的力量和創造力維度。

然而，與 HTML 和 CSS 相比，熟悉 JavaScript 更具挑戰性。您可能需要從小處著手，逐步進步。首先，讓我們研究如何將 JavaScript 新增到您的頁面以建立一個Hello world! 示例。（Hello world! 是介紹性程式設計示例的標準。）

警告：如果您沒有一直關注我們的課程，請下載此示例程式碼並將其用作起點。

轉到您的測試站點並建立一個名為scripts 的新資料夾。在 scripts 資料夾中，建立一個名為main.js 的新文字文件，並儲存它。
在您的index.html 檔案中，在新行上輸入此程式碼，就在結束的</body> 標籤之前
html
```
<script src="scripts/main.js"></script>
```
這與 CSS 的 <link> 元素的作用相同。它將 JavaScript 應用於頁面，因此它可以對 HTML（以及 CSS 和頁面上的任何其他內容）產生影響。

將此程式碼新增到scripts/main.js 檔案中

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

確保 HTML 和 JavaScript 檔案已儲存。然後在瀏覽器中載入index.html。您應該看到類似於以下內容

Heading "hello world" above a firefox logo

注意：上述說明將 <script> 元素放在 HTML 檔案底部的原因是，瀏覽器按其在檔案中的出現順序讀取程式碼。

如果 JavaScript 首先載入，並且它應該影響尚未載入的 HTML，那麼可能會出現問題。將 JavaScript 放在 HTML 頁面底部是解決此依賴關係的一種方法。要了解有關替代方法的更多資訊，請參閱指令碼載入策略。

發生了什麼？

標題文字使用 JavaScript 更改為Hello world!。您透過使用名為 querySelector() 的函式獲取對您標題的引用，然後將其儲存在名為myHeading 的變數中。這類似於我們使用 CSS 選擇器所做的事情。當您想要對元素執行某些操作時，您需要先選擇它。

接下來，程式碼將變數myHeading 的 textContent 屬性的值（表示標題的內容）設定為Hello world!。

注意：您在此練習中使用的這兩個功能都是文件物件模型 (DOM) API 的一部分，該 API 具有操作文件的功能。

語言基礎速成課程

為了讓您更好地瞭解 JavaScript 的工作原理，讓我們解釋一下該語言的一些核心特性。值得注意的是，這些特性在所有程式語言中都是通用的。如果您掌握了這些基礎知識，那麼您在學習其他語言時也將佔先！

警告：在本文中，嘗試將示例程式碼行輸入到您的 JavaScript 控制檯中，看看會發生什麼。有關 JavaScript 控制檯的更多詳細資訊，請參閱發現瀏覽器開發者工具。

變數

變數是儲存值的容器。您首先使用 let 關鍵字宣告一個變數，然後是您為變數提供的名稱

let myVariable;

行末的分號表示語句的結束位置。只有在需要在單行上分隔語句時才需要它。但是，有些人認為在每個語句末尾使用分號是一種良好的做法。關於何時應該和不應該使用分號，還有其他規則。有關更多詳細資訊，請參閱 Your Guide to Semicolons in JavaScript。

您可以將變數幾乎命名為任何東西，但有一些限制。（請參閱有關命名規則的本節。）如果您不確定，您可以檢查您的變數名以檢視它是否有效。

JavaScript 區分大小寫。這意味著myVariable 與myvariable 不同。如果您的程式碼中出現問題，請檢查大小寫！

宣告變數後，您可以為它賦值

myVariable = "Bob";

此外，您可以在同一行上執行這兩個操作

let myVariable = "Bob";

您可以透過呼叫變數名來檢索值

myVariable;

為變數賦值後，您可以在程式碼中的其他位置更改它

let myVariable = "Bob";
myVariable = "Steve";

請注意，變數可以儲存具有不同資料型別的值

變數	解釋	示例
字串	這是一系列文字，稱為字串。要表示該值為字串，請將其用單引號或雙引號括起來。	`let myVariable = 'Bob';` 或 `let myVariable = "Bob";`
數字	這是一個數字。數字周圍沒有引號。	`let myVariable = 10;`
布林值	這是一個真/假值。`true` 和 `false` 這些詞是特殊的關鍵字，不需要引號。	`let myVariable = true;`
陣列	這是一種結構，允許您在單個引用中儲存多個值。	`let myVariable = [1,'Bob','Steve',10];` 像這樣引用陣列的每個成員 `myVariable[0]`、`myVariable[1]` 等等。
物件	這可以是任何東西。JavaScript 中的所有內容都是物件，可以儲存在變數中。在學習時請牢記這一點。	`let myVariable = document.querySelector('h1');` 所有上述示例也是如此。

那麼為什麼我們需要變數呢？變數是進行任何有趣的程式設計操作所必需的。如果值不能更改，那麼您就無法執行任何動態操作，例如個性化問候語或更改影像庫中顯示的影像。

註釋

註釋是可以與程式碼一起新增的文字片段。瀏覽器會忽略標記為註釋的文字。您可以在 JavaScript 中編寫註釋，就像您在 CSS 中一樣

/*
Everything in between is a comment.
*/

如果您的註釋不包含任何換行符，則可以選擇將其放在兩個斜槓後面，如下所示

// This is a comment

運算子

一個運算子 是一個數學符號，它根據兩個值（或變數）生成結果。在下表中，您可以看到一些最簡單的運算子，以及一些在 JavaScript 控制檯中嘗試的示例。

運算子	解釋	符號	示例
加法	將兩個數字加在一起或將兩個字串組合在一起。	`+`	`6 + 9; 'Hello ' + 'world!';`
減法、乘法、除法	這些運算子執行您在基本數學中所期望的操作。	`-`, `*`, `/`	`9 - 3; 8 * 2; // 在 JS 中，乘法運算子為星號 9 / 3;`
賦值	如您已經看到的那樣：這將值分配給變數。	`=`	`let myVariable = 'Bob';`
嚴格相等	這將執行一個測試，以檢視兩個值是否相等且資料型別相同。它返回一個`true`/`false`（布林值）結果。	`===`	`let myVariable = 3; myVariable === 4;`
非、不相等	這將返回它之前的值的邏輯相反值。它將`true` 轉換為`false` 等等。當它與相等運算子一起使用時，否定運算子測試兩個值是否不相等。	`!`, `!==`	對於“非”，基本表示式為`true`，但比較返回`false`，因為我們對其進行了否定 `let myVariable = 3; !(myVariable === 3);` “不相等”在語法上有所不同，但基本上給出相同的結果。這裡我們測試的是“`myVariable` 是否不等於 3”。這將返回`false`，因為`myVariable` 等於 3 `let myVariable = 3; myVariable !== 3;`

還有許多其他運算子有待探索，但現在這些就足夠了。有關完整列表，請參閱表示式和運算子。

注意：在執行計算時，混合資料型別會導致一些奇怪的結果。請謹慎操作，確保您正確引用了變數，並獲得了預期的結果。例如，在您的控制檯中輸入'35' + '25'。為什麼您沒有得到預期的結果？因為引號將數字轉換為字串，因此您最終連線了字串而不是新增數字。如果您輸入35 + 25，您將得到這兩個數字的總和。

條件語句

條件語句是用於測試表達式是否返回 true 的程式碼結構。條件語句的一種常見形式是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，則執行第一個程式碼塊。如果此比較不為 true，則執行第二個程式碼塊（在else 語句之後）。

函式

函式是一種打包您希望重用的功能的方法。可以將一段程式碼定義為函式，並在程式碼中呼叫函式名時執行該函式。這比重複編寫相同的程式碼要好。您已經看到函式的一些用法。例如

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

alert("hello!");

這些函式document.querySelector 和alert 是內置於瀏覽器的。

如果你看到類似變數名的東西，後面跟著括號——()——它很可能是一個函式。函式通常需要引數：它們完成工作所需的少量資料。引數放在括號內，如果有多個引數，則用逗號分隔。

例如，alert() 函式會在瀏覽器視窗中顯示一個彈出框，但我們需要給它一個字串作為引數，才能告訴函式要顯示什麼訊息。

你也可以定義自己的函式。在下面的例子中，我們建立了一個簡單的函式，它接收兩個數字作為引數，並將它們相乘。

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

嘗試在控制檯中執行這段程式碼；然後用幾個引數測試。例如

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

注意：return 語句告訴瀏覽器將 result 變數從函式中返回，以便可以使用它。這是必要的，因為在函式內部定義的變數只能在這些函式內部使用。這被稱為變數作用域。（閱讀更多關於變數作用域的內容。）

事件

網站上的真實互動需要事件處理程式。這些是監聽瀏覽器活動並相應地執行程式碼的程式碼結構。最明顯的例子是處理點選事件，它是在你用滑鼠點選某個東西時由瀏覽器觸發的。為了演示這一點，將以下內容輸入你的控制檯，然後點選當前網頁

document.querySelector("html").addEventListener("click", function () {
  alert("Ouch! Stop poking me!");
});

有多種方法可以將事件處理程式附加到元素。這裡我們選擇了 <html> 元素。然後我們呼叫它的 addEventListener() 函式，傳入要監聽的事件的名稱（'click'）以及事件發生時要執行的函式。

我們剛剛傳遞給 addEventListener() 的函式被稱為匿名函式，因為它沒有名字。還有一種編寫匿名函式的替代方法，我們稱之為箭頭函式。箭頭函式使用 () => 而不是 function ()

document.querySelector("html").addEventListener("click", () => {
  alert("Ouch! Stop poking me!");
});

增強我們的示例網站

完成了對 JavaScript 基礎知識的回顧（以上），讓我們為我們的示例站點新增一些新功能。

在繼續之前，請刪除你的 main.js 檔案的當前內容——你在“Hello world！”示例中新增的那部分——並儲存空檔案。如果你不這樣做，現有的程式碼將與你即將新增的新程式碼衝突。

新增一個圖片切換器

在本節中，你將學習如何使用 JavaScript 和 DOM API 功能來交替顯示兩張圖片中的一張。這種改變將在使用者點選顯示的圖片時發生。

選擇你想在你的示例站點上展示的圖片。理想情況下，圖片大小應與你之前新增的圖片相同，或儘可能接近。
將此圖片儲存到你的 images 資料夾中。
將圖片重新命名為 firefox2.png。

將以下 JavaScript 程式碼新增到你的 main.js 檔案中。

const myImage = document.querySelector("img");

myImage.onclick = () => {
  const mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};

儲存所有檔案，並在瀏覽器中載入 index.html。現在，當你點選圖片時，它應該切換到另一張圖片。

這就是發生的事情。你將對你的 <img> 元素的引用儲存在 myImage 中。接下來，你將它的 onclick 事件處理程式屬性設定為一個沒有名字的函式（一個“匿名”函式）。因此，每次點選此元素時

程式碼將檢索圖片的 src 屬性的值。
程式碼使用一個條件語句來檢查 src 值是否等於原始圖片的路徑
1. 如果是，程式碼將 src 值更改為第二張圖片的路徑，強制另一張圖片載入到 <img> 元素中。
2. 如果不是（意味著它已經改變了），src 值將切換回原始圖片路徑，回到原始狀態。

添加個性化的歡迎訊息

接下來，讓我們在使用者首次訪問網站時將頁面標題更改為個性化的歡迎訊息。此歡迎訊息將持久儲存。如果使用者離開網站並在稍後返回，我們將使用 Web Storage API 儲存訊息。我們還將包含一個選項來更改使用者，從而更改歡迎訊息。

在 index.html 中，在 <script> 元素之前新增以下行
html
```
<button>Change user</button>
```
在 main.js 中，將以下程式碼放在檔案底部，完全按照它寫的方式。這將獲取對新按鈕和標題的引用，並將它們分別儲存在變數中
js
```
let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");
```
新增以下函式來設定個性化的問候語。現在它還不會做任何事情，但很快就會改變。
js
```
function setUserName() {
  const myName = prompt("Please enter your name.");
  localStorage.setItem("name", myName);
  myHeading.textContent = `Mozilla is cool, ${myName}`;
}
```
setUserName() 函式包含一個 prompt() 函式，它會顯示一個對話方塊，類似於 alert()。這個 prompt() 函式比 alert() 做得更多，它會要求使用者輸入資料，並在使用者點選確定後將資料儲存在一個變數中。在本例中，我們要求使用者輸入一個姓名。接下來，程式碼呼叫 API localStorage，它允許我們儲存資料到瀏覽器並在以後檢索它。我們使用 localStorage 的 setItem() 函式來建立和儲存一個名為 'name' 的資料項，並將其值設定為 myName 變數，其中包含使用者輸入的姓名。最後，我們將標題的 textContent 設定為一個字串，加上使用者新儲存的姓名。
在函式宣告之後新增以下條件塊。我們可以將這段程式碼稱為初始化程式碼，因為它在應用程式首次載入時對其進行結構化。
js
```
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  const storedName = localStorage.getItem("name");
  myHeading.textContent = `Mozilla is cool, ${storedName}`;
}
```
此塊的第一行使用否定運算子（邏輯非，用 ! 表示）來檢查 name 資料是否存在。如果不存在，則執行 setUserName() 函式來建立它。如果它存在（即使用者在之前的訪問中設定了使用者名稱），我們使用 getItem() 檢索儲存的名稱，並像我們在 setUserName() 中所做的那樣將標題的 textContent 設定為一個字串，加上使用者的姓名。
將此 onclick 事件處理程式（下面）放在按鈕上。點選時，setUserName() 會執行。這允許使用者透過按下按鈕來輸入不同的姓名。
js
```
myButton.onclick = () => {
  setUserName();
};
```

使用者名稱為 null？

當你執行示例並得到提示你輸入使用者名稱的對話方塊時，嘗試按下取消按鈕。你應該得到一個標題，上面寫著Mozilla 很酷，null。發生這種情況是因為——當你取消提示時——該值被設定為 null。Null 是 JavaScript 中的一個特殊值，它表示沒有值。

另外，嘗試點選確定，但不輸入姓名。你應該得到一個標題，上面寫著Mozilla 很酷， 原因很明顯。

為了避免這些問題，你可以檢查使用者是否沒有輸入空白姓名。將你的 setUserName() 函式更新為以下內容

function setUserName() {
  const myName = prompt("Please enter your name.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

用人類語言來說，這意味著：如果 myName 沒有值，則從頭開始再次執行 setUserName()。如果它有值（如果上述語句不成立），則將值儲存在 localStorage 中，並將其設定為標題的文字。

結論

如果你按照本文中的所有說明操作，你最終應該得到一個看起來類似於下面圖片的頁面。你也可以檢視我們的版本.

Final look of HTML page after creating elements: a header, large centered logo, content, and a button

如果你遇到困難，可以將你的作品與我們在 GitHub 上的完成示例程式碼進行比較。

我們只是觸及了 JavaScript 的表面。如果你喜歡玩，並希望更進一步，請利用下面列出的資源。

另請參閱

使用 JavaScript 進行動態客戶端指令碼編寫: 更詳細地深入瞭解 JavaScript。
學習 JavaScript: 這是一個面向有抱負的 Web 開發人員的絕佳資源！在互動式環境中學習 JavaScript，透過簡短的課程和互動式測試，在自動評估的指導下學習。前 40 課免費。完整的課程可透過一次性付款購買。