變數 - 加、減、乘、除

JavaScript 就像是一個「計算機」，除了可以設定變數的值為「數字」，還可以用變數來做「加、減、乘、除」

作法如下：

直接用數字做運算（方式一）

🎃 直接在alert()裡面寫上數字做運算

alert(35 - 10);

就會跳出運算後的值了

用變數做運算（方式二）

範例一

🎃 將兩個變數相減

var cookiePrice = 35;
var myMoney = 10;

alert(cookiePrice - myMoney);

就會跳出運算後的值了

範例二

🎃 設定第三個變數total（值 = 前面兩個變數相減）

🎃 再把total呼叫出來

var cookiePrice = 35;
var myMoney = 10;
var total = cookiePrice - myMoney;

alert(total);

在 html 插入內容

html:

<p>我來到一個紅豆餅攤位，看到一個紅豆餅是 <em id="cookiePriceID"></em></p>
<p>我發現我口袋只剩下 <em id="myMoneyID"></em></p>
<p>還差 <em id="totalID"></em> 元</p>

我現在要做的是：在三個<em></em>標籤中，分別帶入變數

JS 這樣寫：

var cookiePrice = 35;
var myMoney = 10;
var total = cookiePrice - myMoney;

document.getElementById('cookiePriceID').textContent = cookiePrice;
document.getElementById('myMoneyID').textContent = myMoney;
document.getElementById('totalID').textContent = total;

可以看到，變數值都帶入了

變數的乘法

可以用變數，來做乘法的運算

html:

<p>我來到一個紅豆餅攤位，看到一個紅豆餅是 <em id="cookiePriceID"></em></p>
<p>五個紅豆餅等於 <em id="five"></em> 元</p>

我現在要做的是：在兩個<em></em>標籤中，分別帶入變數

JS:

🎃 用cookiePrice * 5來算出「五個紅豆餅」的價格

var cookiePrice = 35;

document.getElementById('cookiePriceID').textContent = cookiePrice;
document.getElementById('five').textContent = cookiePrice * 5;

就計算出來了（35*5 = 175）

先乘除，後加減

也可以利用變數來做「先乘除，後加減」

html:

<p>我來到一個紅豆餅攤位，看到一個紅豆餅是 <em id="cookiePriceID"></em></p>
<p>運算後的結果等於 <em id="resultID"></em> 元</p>

JS:

var cookiePrice = 35;
var result = (cookiePrice * 5 * 10) + 20

document.getElementById('cookiePriceID').textContent = cookiePrice;
document.getElementById('resultID').textContent = result;

就會算出結果了（1770）