---
# System prepended metadata

title: 變數

---

# 變數(Variable)
###### tags: `NKFW 網頁設計入門`

---

## 變數的基本概念：宣告與指派

* 變數是一個盒子(容器)，可以儲存數字、文字等內容。

![](https://hackmd.io/_uploads/SJ8Ug2c42.png)


---

<hr>

![](https://hackmd.io/_uploads/ryqpe3qNn.png)

<hr>

---

![](https://hackmd.io/_uploads/rkrp7h943.png)

---

* 舉例而言，如果我們想要讓使用者輸入一個數字，然後輸出，這時候變數就可以派得上用場。

---

範例如下：
執行程式之後，會跳出一個提示框，你可以輸入一個字串，然後字串會被輸出到螢幕上。
```javascript!
let text = prompt();
/*
 * 要使用一個變數之前，必須先宣告它。你必須寫成：
 * let 變數名稱 = 變數要儲存的數值
 * 這裡的等於不是數學上的等於，是把數值儲存到變數
 * */
console.log(text);
```


`prompt`會接受使用者輸入的字串，所以我們使用`=`把輸入的字串儲存到變數`text`，然後再透過`alert`輸出。

---

而使用變數的最大好處就是：變數的數值可以被修改！
我們再看一個範例：

```javascript!
// 第一次輸入
let text = prompt();
console.log(text);

// 第二次輸入，此時已經宣告過這個變數了，所以前面不用加let
text = prompt();
console.log(text);
```

試試看，變數會隨著輸入的值不同而改變！

---

:::success
❓如果變數還沒設定初始值就使用它，會發生甚麼事情？
:::

---

:::warning
⚠️在Jacascript中，"="是指派的意思，而不是相等；代表相等的關係運算子是"=="，在後面部分會介紹到。
順帶一提，許多常見語言如C++, Python也都使用相同概念。
:::

---

## 類型(Type)

| Type     | Description | Example  |
| -------- | ----------- | -------- |
| integer  | 整數        | 3         |
| float    | 浮點數       | 2.0      |
| string   | 字串        | "hello"   |
| boolean  | 布林值       | true     |
| array    | 陣列        | [2,3,5]   |
| object   | 物件        | rock={surface="rough", amount=3}  |

---

* 在Javascript中，無論變數類型為何，都使用"let"進行宣告，如下：

```javascript!
let 變數名稱 = 初始值;
```

<!-- :::info
let與var都可以用來宣告變數，但他們的可使用範圍(scope)不同。let所宣告的變數為區域變數，只可在被宣告的區塊(block)中使用；var所宣告的變數則為全域變數，在整份程式碼中都可取用。
::: -->

* 本章節主要針對integer, float, string及boolean這四個基礎的類別介紹。

---

### Integer(整數)

* 一般數學中所學到的整數，例如0, 1, 3。
* 可以透過算數運算子(+, -, *, /, %)進行數學運算。

---

#### 算數運算子

| x | y | 執行程式 | 運算子功能 | z |
| -------- | -------- | -------- | ------- | -------- |
| 1 | 2 | let z = x + y | 加 | 3 |
| 1 | 2 | let z = x - y | 減 | -1 |
| 2 | 3 | let z = x * y | 乘 | 6 |
| 3 | 4 | let z = x / y | 除 | 0.75 |
| 7 | 2 | let z = x % y | 取餘 | 1 
| 2 | 3 | let z = x ** y | 指數運算 | 8 |

* 大部分運算子的功能都相當於平時所做的數學運算，比較特別的是"%"運算子，x % y的結果為x / y的餘數。

---

#### 特別的運算子

有種運算子，同時兼具算數及指派的功能，英文稱作shorthand expression。

| 執行程式 | 對應運算式 |
| -------- | --------  |
| x += 2   | x = x + 2 |
| x -= 2   | x = x - 2 |
| x *= 2   | x = x * 2 |
| x /= 2   | x = x / 2 |
| x %= 2   | x = x % 2 |
| x **= 2  | x = x ** 2 |

---

:::danger
切記"+="中的"+"與"="不可分開，其他shorthand expression亦同。
:::

---

### Float(浮點數)

* 浮點數是帶有小數點的數，例如1.0, 3.4, 3e-5(科學記號)。
* 與整數同樣可透過算數運算子進行數學運算。

---

:::success
❓為何整數與浮點數要區分為不同類型？
:::spoiler Answer
整數與浮點數在電腦中的儲存方式、所需空間不同。
:::

---

### String(字串)

* 字串就是文字的意思，可以只包含一個字，也可以只包含很多字。
* 在程式碼中，字串需用一組單引號('')或一組雙引號("")包住，藉此告訴電腦這段文字為字串。
* 透過"+"可以將兩個字串合成在一起。

---

```htmlembedded
let part1 = "Hello, ";
let part2 = "let's study web together!";
let whole = part1 + part2;
alert(whole);
```

![](https://i.imgur.com/sxzmYn9.png)

---

:::success
❓試著想想看，alert(text);跟alert("text")的輸出結果有何不同？
:::

---

### Boolean(布林值)

* 布林值只有兩種值，分別是true跟false。
* 布林值常用於邏輯判斷，在後面章節會介紹到。