程式基本功
計算運算子
加法 +
let num1 = 10;
let num2 = 20;
let num3 = num1 + num2;
練習
- 建立兩個數字輸入匡 (A)(B)
- 建立一顆計算按鈕 (C)
- 建立一顯示區塊 (D)
- 當按下按鈕時,抓取兩數字輸入匡進行加法計算
- 將結果顯示在顯示區塊
flowchart LR A[A] B[B] C[C] D[D] E[+] C-->| 抓取 | A C-->| 抓取 | B A-->E B-->E E-->| 顯示 | D
減法 -
let num1 = 10;
let num2 = 20;
let num3 = num1 - num2;
練習
- 建立兩個數字輸入匡 (A)(B)
- 建立一顆計算按鈕 (C)
- 建立一顯示區塊 (D)
- 當按下按鈕時,抓取兩數字輸入匡進行減法計算
- 將結果顯示在顯示區塊
flowchart LR A[A] B[B] C[C] D[D] E[-] C-->| 抓取 | A C-->| 抓取 | B A-->E B-->E E-->| 顯示 | D
乘法 *
let num1 = 10;
let num2 = 20;
let num3 = num1 * num2;
練習
- 建立兩個數字輸入匡 (A)(B)
- 建立一顆計算按鈕 (C)
- 建立一顯示區塊 (D)
- 當按下按鈕時,抓取兩數字輸入匡進行乘法計算
- 將結果顯示在顯示區塊
flowchart LR A[A] B[B] C[C] D[D] E[*] C-->| 抓取 | A C-->| 抓取 | B A-->E B-->E E-->| 顯示 | D
除法 /
let num1 = 10;
let num2 = 20;
let num3 = num1 / num2;
練習
- 建立兩個數字輸入匡 (A)(B)
- 建立一顆計算按鈕 (C)
- 建立一顯示區塊 (D)
- 當按下按鈕時,抓取兩數字輸入匡進行除法計算
- 將結果顯示在顯示區塊
flowchart LR A[A] B[B] C[C] D[D] E[ / ] C-->| 抓取 | A C-->| 抓取 | B A-->E B-->E E-->| 顯示 | D
餘數 %
let num1 = 10;
let num2 = 20;
let num3 = num1 % num2;
練習
- 建立兩個數字輸入匡 (A)(B)
- 建立一顆計算按鈕 (C)
- 建立一顯示區塊 (D)
- 當按下按鈕時,抓取兩數字輸入匡進行餘數計算
- 將結果顯示在顯示區塊
flowchart LR A[A] B[B] C[C] D[D] E[%] C-->| 抓取 | A C-->| 抓取 | B A-->E B-->E E-->| 顯示 | D
執行後遞增
let num1 = 1;
num++;
console.log(num1);
遞增後執行
let num1 = 1;
++num;
console.log(num1);
執行後遞減
let num1 = 1;
num--;
console.log(num1);
遞減後執行
let num1 = 1;
--num;
console.log(num1);
關於遞增遞減
let num1 = 1;
let num2 = num1++ + 1;
let num3 = ++num1 + 1;
num1
, num2
, num3
分別為多少?
判斷式
if
if (condition) {
console.log('is true');
}
condition
必然是一個 boolean
if...else...
if (condition) {
console.log('is true');
} else {
console.log('is false');
}
if...else if...else...
if (condition) {
console.log('is true');
} else if (condition2){
console.log('condition2 is false');
} else {
console.log('is false');
}
iif
let response = true ? 'is true' : 'is false';
三元判斷,適合用於單一動作時,同等於
if (true) {
let response = 'is true';
} else {
let response = 'is false';
}
switch
switch (some) {
case 'match 1':
console.log('is match 1');
break;
case 'match 2':
console.log('is match 2');
break;
default:
console.log('not match');
break;
}
some
任意值
case match 1
some
等於 match 1
時
break
強制結束
判斷運算子
最終得到一個
boolean
等於
let num1 = 1;
let num2 = 10;
let condition = num1 == num2;
完全等於
let num1 = 10;
let num2 = '10';
let condition = num1 == num2;
let condition2 = num1 === num2;
連同型態一起比對
不等於
let num1 = 1;
let num2 = 10;
let condition = num1 != num2;
大於
let num1 = 10;
let num2 = 10;
let condition = num1 > num2;
大於等於
let num1 = 10;
let num2 = 10;
let condition = num1 >= num2;
小於
let num1 = 10;
let num2 = 10;
let condition = num1 < num2;
小於等於
let num1 = 10;
let num2 = 10;
let condition = num1 <= num2;
及閘 AND
let b1 = true;
let b2 = false;
let condition = b1 && $b2;
同時成立為真
b1 | b2 | condition |
---|---|---|
true | true | true |
true | false | false |
false | true | false |
false | false | false |
或閘 OR
let b1 = true;
let b2 = false;
let condition = b1 || $b2;
其一成立為真
b1 | b2 | condition |
---|---|---|
true | true | true |
true | false | true |
false | true | true |
false | false | false |
反閘 NOT
let b1 = true;
let condition = !b1;
真假反轉
b1 | condition |
---|---|
true | false |
false | true |
迴圈
for
for (start; condition; next) {}
start
起始值
condition
滿足條件
next
每次執行完後執行動作
for (let i = 0; i < 10; i++) {
console.log(i);
}
用於已知次數的重複執行
練習
乘法表
- 建立兩個數字輸入匡 (A)(B)
- 建立一顆按鈕 (C)
- 建立一張表格 (D)
- 按下按鈕後,抓取兩數字輸入匡內容
- 將兩數字使用
for
迴圈建立乘法表呈現在表格
flowchart LR A[A] B[B] C[C] D[D] E[ for 迴圈] C-->| 抓取 | A C-->| 抓取 | B A-->E B-->E E-->| 顯示 | D
foreach
for (let key in object) {}
key
每次執行時的 object
key
object
要執行迴圈的物件
let student = {
name: 'David',
age: 18
};
for (let field in student) {
let value = student[field];
console.log(field, value);
}
用於未知次數的重複執行
陣列內建
let scope = [100, 40, 20, 10, 0];
scope.forEach(function(value, index) {
console.log(index, value);
});
while
while (condition) {}
condition
滿足條件,為 boolean
型態
持續執行,直到條件不滿足
while (true) {
console.log('run');
}
注意無限迴圈
let num = 0;
while (num < 10) {
console.log(num);
num++;
}
等同於
for (let num = 0; num < 10; num++) {
console.log(num);
}
do...while
do {} while (condition)
condition
滿足條件,為 boolean
型態
先執行一次,條件滿足時,持續執行
let num = 0;
do {
console.log(num);
num++;
} while (num < 10)
注意無限迴圈
生命週期
變數有效範圍
情境一
let num1 = 10;
function run() {
let num2 = 20;
num1 = 30;
console.log(num1, num2);
}
run();
console.log(num1);
console.log(num2);
num2
在run
執行完畢後消失
情境二
let num1 = 10;
function run(num1) {
let num2 = 20;
num1 = 30;
console.log(num1, num2);
}
run(num1);
console.log(num1);
console.log(num2);
num1
參數與外部的num1
不同
情境三
let num1 = 10;
function run() {
num2 = 20;
num1 = 30;
console.log(num1, num2);
}
run();
console.log(num1);
console.log(num2);
沒有使用
let
關鍵字宣告,預設為全域變數(Global
)
Call by value
let num1 = 1;
let num2 = num;
num1++;
console.log(num1, num2);
num1
將內容複製一份給num2
,本質上是兩個不同的東西
Call by reference
let student = {
name: 'David',
};
let student2 = student;
student.name = 'John';
console.log(student.name, student2.name);
student2.name = 'Dan';
console.log(student.name, student2.name);
student
將記憶體位置複製一份給student2
,所以兩個變數參考到同一份內容
具備此特性的類型
- Object
- Array