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

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

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


<hr>


<hr>


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

範例如下：
執行程式之後，會跳出一個提示框，你可以輸入一個字串，然後字串會被輸出到螢幕上。

let text = prompt();
/*
 * 要使用一個變數之前，必須先宣告它。你必須寫成：
 * let 變數名稱 = 變數要儲存的數值
 * 這裡的等於不是數學上的等於，是把數值儲存到變數
 * */
console.log(text);

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

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

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

// 第二次輸入，此時已經宣告過這個變數了，所以前面不用加let
let = 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"進行宣告，如下：

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(字串)

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

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


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

### Boolean(布林值)

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