JavaScript 複習04

函式 function

為什麼需要學函式?

// all.js
// 函式 function
// 設定指令驅動程式

// 例如: 機器人指令
// 倒垃圾
// 煮晚餐
// 計算機
// 查詢資料
// 掃地

函式寫法教學

// all.js
// 複習之前宣告變數
let a = 1;
console.log(a);

// 機器人 - 早起活動
// 起床、刷牙、洗臉、出門

// 宣告函式 函式名稱
function morningAction() {
  console.log("起床");
  console.log("刷牙");
  console.log("洗臉");
  console.log("出門");
}

// 執行函式
morningAction();

註冊多組函式流程

// all.js
// 機器人 - 早起活動
// 起床、刷牙、洗臉、出門
// 宣告函式  函式名稱
function morningAction() {
  console.log("起床");
  console.log("刷牙");
  console.log("洗臉");
  console.log("出門");
}

// 機器人 - 晚上活動
// 回家、刷牙、洗臉、睡覺
// 宣告函式  函式名稱
function nightAction() {
  console.log("回家");
  console.log("刷牙");
  console.log("洗臉");
  console.log("睡覺");
}

// 執行函式
morningAction();
nightAction();

函式裡面仍可以執行函式

// all.js
// 機器人 - 早起活動
// 起床、刷牙、洗臉、出門
// 宣告函式  函式名稱
function morningAction() {
  console.log("起床");
  cleanHead();
  console.log("出門");
}

// 機器人 - 晚上活動
// 回家、刷牙、洗臉、睡覺
// 宣告函式  函式名稱
function nightAction() {
  console.log("回家");
  cleanHead();
  console.log("睡覺");
}

function cleanHead() {
  console.log("刷牙");
  console.log("洗臉");
}


// 執行函式
morningAction();
nightAction();

函式參數介紹

// all.js - 1
function a(num) {
  console.log(num);
}

a(1);  // 1

a(3);  // 3

// all.js - 2
function a(num1, num2) {
  console.log(num1, num2);
}

a(1, 2);  // 1 2

a(3, 4);  // 3 4

參數寫法 – 參數只存活在大括號

// all.js
// 參數跟變數不一樣
// 參數本身只運作在函式大括號裡頭
function a(num1, num2) {
  console.log(num1, num2);
}

a(1, 2);  // 1 2
console.log(num1);  // Uncaught ReferenceError: num is not defined

參數寫法 – 兩個數字相加工具

// all.js
// 透過函式 - 兩個數字相加工具

function add(num1, num2) {
  console.log(`您加總的數字為${num1 + num2}`);
}

add(2, 3);  // 您加總的數字為5

add(100, 200);  // 您加總的數字為300

輸入跟輸出的重要性

函式的觀念，懂輸入跟輸出比較好理解什麼時候該使用參數。

	input 輸入		處理		output 輸出
電腦運作	鍵盤輸入 a 文字	→	電腦處理	→	螢幕顯示 a 文字
冷氣	遙控器輸入電源鍵	→	冷氣機獲得指令並開始處理此行為	→	開啟冷氣機
學習	輸入大量學習資源	→	吸收消化	→	輸出: 寫作業、筆記
相加產生器	輸入兩個數字 1 與 3	→	你的程式碼	→	輸出 4
偶數查詢	輸入 4	→	你的程式碼	→	輸出 “是偶數”
小數點留後兩位	輸入 1.5678	→	你的程式碼	→	輸出 1.56
BMI 計算	輸入身高 178、體重70	→	你的程式碼	→	輸出 22

輸入 / 輸出

return 寫法教學

// all.js
// return:回傳，把值回傳回去
// 把函式裡面的值，往外層、指定的地方回傳，並透過變數把值賦予上去

// 國文分數 + 數學分數的加總計算機

function calcTotalScore(chineseScore, mathScore) {
  // console.log(chineseScore + mathScore);
  
  return chineseScore + mathScore;
}

let markTotalScore = calcTotalScore(40, 60);
let tomTotalScore = calcTotalScore(100, 100);

console.log(markTotalScore);  // 100
console.log(`Tom的總分為${tomTotalScore}`);  // Tom的總分為200

return 宣告 let

// all.js
// 國文分數 + 數學分數的加總計算機

function calcTotalScore(chineseScore, mathScore) {
  // console.log(chineseScore + mathScore);
  
  let totalScore = chineseScore + mathScore;
  return totalScore;
}

// console.log(totalScore);  // Uncaught ReferenceError: totalScore is not defined

let markTotalScore = calcTotalScore(40, 60);
let tomTotalScore = calcTotalScore(100, 100);

console.log(markTotalScore);  // 100
console.log(`Tom的總分為${tomTotalScore}`);  // Tom的總分為200

return 可以有多個

// all.js
// return 可以中斷函式執行，後面的程式就不跑了

// 國文分數 + 數學分數的加總計算機

function calcTotalScore(chineseScore, mathScore) {
  // console.log(chineseScore + mathScore);
  
  let totalScore = chineseScore + mathScore;
  return totalScore;

  console.log('hello');
  return 3;
}

let markTotalScore = calcTotalScore(40, 60);
let tomTotalScore = calcTotalScore(100, 100);

console.log(markTotalScore);  // 100
console.log(`Tom的總分為${tomTotalScore}`);  // Tom的總分為200

return 可以有多個 – 範例 Code

// all.js
// 檢查學生成績是否及格的函式
function checkScore(score) {
  if(score >= 60) {
    return "及格";
  } else {
    return "不及格";
  }

  console.log("return 可以中斷函式執行，後面的程式就不跑了");
}

let tomScore = checkScore(60);
console.log(tomScore);  // 及格

let markScore = checkScore(30);
console.log(markScore);  // 不及格

判斷是否為偶數 – 畫流程圖

// all.js
// 判斷數字是否為偶數

//          4%2 == 0 
// 輸入 4 → 你的程式碼 → 輸出 "是偶數"
//          7%2 == 0
// 輸入 7 → 你的程式碼 → 輸出 "不是偶數"

// 程式開始
// ↓
// 輸入一個數字
// ↓
// 判斷是否為偶數 7%2 == 0
// 否 → 輸出 "不是偶數"
// 是 → 輸出 "是偶數"
// ↓
// 程式結束

判斷是否為偶數 – 寫 Code 流程(上)

// all.js - 1
// 寫程式沒有最佳解法，只有當下最適合
// 小步測試，反覆驗證
let a = 7%2;
console.log(a);

// 1.流程判斷
// let myInput = 4;
// let myInput = 7;
let myInput = 8;
// let checkNumber = myInput % 2 == 0;
// console.log(checkNumber);

if(myInput % 2 == 0) {
  console.log("是偶數");
} else {
  console.log("不是偶數");
}

// 2.把流程判斷調整變成函式
function checkNumber(myInput) {
  // let myInput = 8;

  if(myInput % 2 == 0) {
    // console.log("是偶數");
    return "是偶數"
  } else {
    // console.log("不是偶數");
    return "不是偶數"
  }
}

// checkNumber(7);
// checkNumber(8);

let checkSevenNumber = checkNumber(7);
console.log(checkSevenNumber);

let checkEightNumber = checkNumber(8);
console.log(checkEightNumber);

// all.js - 2
// 寫程式沒有最佳解法，只有當下最適合
// 小步測試，反覆驗證

// 判斷數字是否為偶數
function checkNumber(myInput) {
  if(myInput % 2 == 0) {
    return "是偶數"
  } else {
    return "不是偶數"
  }

}

let checkSevenNumber = checkNumber(7);
console.log(checkSevenNumber);

let checkEightNumber = checkNumber(8);
console.log(checkEightNumber);

let 全域與區域變數邏輯

// all.js
// 紀錄總共計算了幾次
let count = 0;

function test() {
  count += 1;
  console.log("test1");
}

test();
test();

console.log(`目前您紀錄了${count}次`);  // 目前您紀錄了2次

判斷是否為偶數 – 寫 Code 流程(下)

// all.js
// 寫成是沒有最佳解法，只有當下最適合
// 小步測試，反覆驗證

let count = 0;

function checkNumber(myInput) {
  count += 1;
  
  if (myInput % 2 == 0) {
    // console.log("是偶數");
    return "是偶數";
  } else {
    // console.log("不是偶數");
    return "不是偶數"
  }
}

let checkSevenNumber = checkNumber(7);
console.log(checkSevenNumber);

let checkEightNumber = checkNumber(8);
console.log(checkEightNumber);

console.log(`您一共計算了${count}次`);

第三週總複習

// all.js
// 第 14 題
// 名稱對照
// 參數: totalPrice 總價 (尚未打折)
// 參數: discount 折扣
// 參數: pay 顧客應支付的金額
function checkout(totalPrice){
  let discount = getDiscount(totalPrice);  // 1.
  let pay = totalPrice * discount;
  return pay;  // 2.
}

function getDiscount(price) {
  if(price >= 2000) {
    return 0.7;
  } else if(price >= 1000) {
    return 0.8;
  } else if(price >= 500) {
    return 0.9;
  } else {
    return 1;  // 3.
  }
}

console.log(checkout(600));  // 期望回傳結果是 540 元