# 變數的簡介 - 變數 number 介紹

- **變數**有**幾個常見**的型別:

1. 數字 - ex. 35
2. 字串 - ex. "hello world"
3. 布林 - `ture`、`false`

---

- 在 JavaScript 裏頭，我們藉由**變數**來去紀錄我們的資料
數值、文字、以及判斷，來回應我們網頁的各種互動式效果

- 變數寫法:

var price = 30;
// 宣告 price 為 數值 30 

---

- 於 .js 檔案撰寫下列程式碼並執行看看:

var cookiePrice = 35;
//宣告 cookiePrice 為一個變數，並賦予值:35;

alert(cookiePrice);


---

- 需注意的事，我們今天宣告一個`變數` / `值`，在途中也是**可以執行更改**的，可透過下列範例來了解到:

1. 例如今天的範例，餅錢是 35 元，預計一年後要漲價成 45 元

var cookiePrice = 35;
alert(cookiePrice);

// 一年後漲價了，但由於前面已經宣告過，不用再重新宣告一次(var)
cookiePrice = 45;
alert(cookiePrice);

2. 執行此範例的時候，第一次會跳出35，但第二次彈掉就是45了


---

- HTML & JS 範例實作:

1. 假設有一個 H1，id 為 price，要怎樣把我們寫好的 JS 顯示在 H1 上面?

    <h1 id="price">

    </h1>

var cookiePrice = 35;
cookiePrice = 45;

// 當前 cookiePrice = 45;

document.getElementById('price').textContent = cookiePrice;

// 指定這份網頁上的元素(id名稱).執行文字輸入 = cookiePrice;

畫面則會列印出: 45 這個值

- textContent 這個語法除了可以自行輸入更改的文字字串之外，也可以替換成我們所**撰寫的變數**來做出修改，是不是相當的有意思呢?

###### tags: `JavaScript - 學徒篇`