變數 number 介紹

Posted on In

這篇先介紹變數的其中一個型別：number

變數寫法

1
var cookiePrice = 35;
  • var 代表：variation–> 我要宣告一個「變數名稱」
  • 這個「變數名稱」是「cookiePrice」
  • 用=來「指定內容」
  • 「cookiePrice」的值是「35」

用 alert 呼叫變數

JS 寫法：

1
2
3
var cookiePrice = 35;

alert(cookiePrice);

打開網頁，就會跳出 alert 顯示「35」這個數字了

更改變數的值

‼️ 同一個變數，var只需要“寫一次”

現在，我要把「變數 cookiePrice」的值，改成「25」

JS:

1
2
3
4
5
6
7
var cookiePrice = 35;

alert(cookiePrice);

cookiePrice = 25;

alert(cookiePrice);

🎃 第二次寫cookiePrice = 25;時，前面「不需要再加上var」，因為前面已經宣告過cookiePrice這個變數了

結果：

  • 會先跳出第一個 alert 顯示「35」

  • 接著，跳出第二個 alert 就會顯示「25」

顯示「undefined」

如果我將「兩個 alert」擺在最上面，會發生什麼事呢？

JS:

1
2
3
4
5
6
7
alert(cookiePrice);

alert(cookiePrice);

var cookiePrice = 35;

cookiePrice = 25;

打開網頁，跳出的 alert 就會顯示「undefined」

顯示「undefined」的原因為：
JS 是「由上到下」依序去執行程式碼的，所以如果「把變數放在下面」，上面的 alert 就會找不到值

把變數的值「存到h1」裡面

html:

🎃 在 html 寫一個「沒有內容的h1」
🎃 在h1加上id="price"

1
<h1 id="price"></h1>

JS:

🎃 textContent後面帶入的是「變數」，所以就不需要使用「單引號」

1
2
3
var cookiePrice = 35;

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

h1出現變數的值了

把變數的值「存到<em></em>」裡面

html:

🎃 在<em></em>加上id="price"

1
<p>這一顆紅豆餅是<em id="price"></em>元</p>

JS:

1
2
3
var cookiePrice = 35;

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

<em></em>出現變數的值了

🎃 按右鍵「檢視網頁原始碼」，會發現<em></em>裡面是「空值」

原因為：「檢視網頁原始碼」只是讓你查看「當初寫的程式碼內容」

🎃 但是，使用「開發者工具」來看，會發現<em></em>裡面已經帶入「變數值」了

原因為：使用「開發者工具」所看到的 html 標籤，都是「JS 編譯之後的結果」