當我們在撰寫程式碼時，必須清楚告知解譯器我們希望它執行的每一步，這時我們就需要變數來替我們記住許許多多的資訊，才能方便我們進一步地操作。

什麼是變數

變數其實就是幫我們記住一些東西，比如說，幫我們記住一個「紅豆餅的價錢」是多少、「別人的名字」是什麼（上下引號括起來的部分就是變數）。
而我個人的理解是，變數就是一個不定代名詞，舉個例子，就像有些人稱呼每一任女友都叫寶貝，「寶貝」就是一個變數，而它指涉的內容是可以變動的。

如何輸出變數內容

alert(變數名); - 顯示方式為彈跳出視窗
console.log(變數名); - 會在 chrome 開發人員工具 / console 頁面顯示出變數值

命名變數的注意事項

• 開頭不能用數字
• 不能有 - 跟 . （但 _ 可以）
• 要區分大小寫：宣告變數時命名為小寫，呼叫時也要用小寫；反之亦然。
• 變數需有語意化：較好維護及開發
• 不能使用 JS 自己的關鍵字：例如 if / else / with / true / false 等等
• 推薦使用駝峰式命名法：例如 firstName 比 firstname 來得好

變數的種類

常用的變數型態有以下三種：

• String （字串）：一串被 "" 或 '' 包起來的文字或數字（例如："你好"）。
• Number （數字）：任何的數字，包括小數點（例如：5、6.8）。
• Boolean （布林值）：只會是 true 或者 false ，用來代表事情成立或不成立。

變數的寫法

以下將針對 number 跟 string 變數的寫法做介紹。

Number 變數

Number 變數的寫法是，首先用 var (variable) 宣告一個變數名稱，然後指定它的內容。

var cookiePrice = 35;

變數內容可以用 JS 寫在 HTML 上，例如，想在一個 h1 標題顯示出變數的內容，可以在 h1 標籤上加入 id，再用 .getElementById 用 id 名稱找出要插入內容的 h1，最後用 .textContent = 變數名稱 插入內容。

// HTML
<h1 id='id名稱'></h1>
// JS
document.getElementById('id名稱').textContent = 變數名稱;

String 變數

string 變數的寫法也是大同小異，跟 number 的差別在於要用 "" 或 '' 包住內容。

var name = '馬格蕾特';

將字串寫入 HTML 的方法，可以在 .textContent 的等號後面用加號將兩個變數組合在一起；也可以將兩個變數加在一起變成第三個變數，再放入 textContent 改寫 HTML。

var greeting = 'Hello';
var name = '馬格蕾特';
var totalGreeting = greeting + name;
// document.getElementById('id名稱').textContent = greeting + name;
// document.getElementById('id名稱').textContent = totalGreeting;

了解了變數的基本概念後，明天將會繼續介紹變數如何進行數學運算。