程式基本功

計算運算子

加法 +

let num1 = 10;
let num2 = 20;

let num3 = num1 + num2;

練習

  1. 建立兩個數字輸入匡 (A)(B)
  2. 建立一顆計算按鈕 (C)
  3. 建立一顯示區塊 (D)
  4. 當按下按鈕時,抓取兩數字輸入匡進行加法計算
  5. 將結果顯示在顯示區塊
    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;

練習

  1. 建立兩個數字輸入匡 (A)(B)
  2. 建立一顆計算按鈕 (C)
  3. 建立一顯示區塊 (D)
  4. 當按下按鈕時,抓取兩數字輸入匡進行減法計算
  5. 將結果顯示在顯示區塊
    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;

練習

  1. 建立兩個數字輸入匡 (A)(B)
  2. 建立一顆計算按鈕 (C)
  3. 建立一顯示區塊 (D)
  4. 當按下按鈕時,抓取兩數字輸入匡進行乘法計算
  5. 將結果顯示在顯示區塊
    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;

練習

  1. 建立兩個數字輸入匡 (A)(B)
  2. 建立一顆計算按鈕 (C)
  3. 建立一顯示區塊 (D)
  4. 當按下按鈕時,抓取兩數字輸入匡進行除法計算
  5. 將結果顯示在顯示區塊
    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;

練習

  1. 建立兩個數字輸入匡 (A)(B)
  2. 建立一顆計算按鈕 (C)
  3. 建立一顯示區塊 (D)
  4. 當按下按鈕時,抓取兩數字輸入匡進行餘數計算
  5. 將結果顯示在顯示區塊
    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;

同時成立為真

b1b2condition
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

或閘 OR

let b1 = true;
let b2 = false;

let condition = b1 || $b2;

其一成立為真

b1b2condition
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

反閘 NOT

let b1 = true;

let condition = !b1;

真假反轉

b1condition
truefalse
falsetrue

迴圈

for

for (start; condition; next) {}

start 起始值

condition 滿足條件

next 每次執行完後執行動作

for (let i = 0; i < 10; i++) {
    console.log(i);
}

用於已知次數的重複執行

練習

乘法表

  1. 建立兩個數字輸入匡 (A)(B)
  2. 建立一顆按鈕 (C)
  3. 建立一張表格 (D)
  4. 按下按鈕後,抓取兩數字輸入匡內容
  5. 將兩數字使用 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);

num2run 執行完畢後消失

情境二

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

簡易型計算機實作

demo