語言基礎速成

這些概念存在於所有程式語言中。理解它們，你就有能力創造無限可能。

變數（Variables）

變數是儲存資料的容器。你用 let 宣告一個變數，然後賦予它一個值。之後隨時可以改變它。

let myVariable = "Bob";
myVariable = "Steve"; // 變數可以重新賦值

試試看：輸入一個值，觀察變數儲存它

let myVariable =

myVariable 的值是："Bob"

5 種基本資料型別：

型別範例說明

Stringlet name = "Bob";字串，用引號包住

Numberlet age = 25;數字，不需要引號

Booleanlet isActive = true;布林值，只有 true 或 false

Arraylet colors = ["red", "blue"];陣列，用中括號包住多個值

Object{ name: "Bob", age: 25 }物件，用大括號包住鍵值對

註解（Comments）

註解不會被執行，是寫給人看的筆記。有兩種寫法：

/*
  多行註解
  可以寫好幾行
*/

// 單行註解

運算子（Operators）

符號名稱範例

+加法 / 字串串接6 + 9 → 15

-減法20 - 15 → 5

*乘法3 * 7 → 21

/除法10 / 5 → 2

=賦值let x = 5

===嚴格相等5 === 5 → true

!邏輯非!true → false

!==不等於5 !== 3 → true

迷你計算器：

=60

⚠️ 注意：如果是字串相加，結果會是串接而非數學加法。 "35" + "25" = "3525"

條件（Conditionals）

條件讓程式做出判斷：「如果這個成立，就做 A，否則做 B。」

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

選一個口味，看看 if/else 怎麼判斷：

函式（Functions）

函式是可重複使用的程式碼片段。你定義一次，之後就能隨時呼叫它。像 alert() 和 querySelector() 就是瀏覽器內建的函式。

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

multiply(3, 7); // → 21

試試看：輸入兩個數字，執行 multiply 函式

multiply(,)=21

事件（Events）

事件讓網頁能夠回應使用者的操作，例如點擊、滑鼠移入、鍵盤輸入等。

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

試試看：點擊下方區域觸發事件

下一課