[Part 2] JS: Control Process + Flowchart

[Part 2] JS: Control Process + Flowchart

Photo by Kelly Sikkema / Unsplash

การควบคุมลำดับการทำงาน (Control Flow)

ใน Programming การควบคุมลำดับการทำงานช่วยให้เราสามารถกำหนดทิศทางการทำงานของโปรแกรมตามเงื่อนไขที่กำหนดได้ เช่น การใช้คำสั่ง if, else, switch, และ loop ต่างๆ เพื่อให้โปรแกรมทำงานตามที่ต้องการ

Flowchart คืออะไร?

Flowchart หรือ ผังงาน คือแผนภาพแสดงลำดับขั้นตอนของการทำงานของโปรแกรมอย่างเป็นระบบ โดยใช้สัญลักษณ์มาตรฐานในการอธิบายลำดับ Input → Process → Output

  • วงกลม: กำหนดจุดเริ่มต้น - สิ้นสุดของโปรแกรม
  • สี่เหลียมผืนผ้า: การทำงานของโปรแกรม
  • สี่เหลี่ยมข้ามหลามตัด: เงื่อนไขของโปรแกรม

Conditional Statements

1. if Statement

ใช้สำหรับตรวจสอบเงื่อนไข ถ้าเงื่อนไขเป็นจริง จะดำเนินการคำสั่งภายในบล็อก

let a = 10;

if (a > 5) {
  console.log("a is more than 5.");
}

2. if...else Statement

ใช้เมื่อมีเงื่อนไขสองทางเลือก:

let a = 2;

if (a > 5) {
  console.log("a is more than 5");
} else {
  console.log("a is less than or equal to 5");
}

3. if...else if...else Statement

ใช้สำหรับหลายเงื่อนไข:

let a = 12;

if (a < 5) {
  console.log("a is less than 5");
} else if (a >= 5 && a <= 15) {
  console.log("a is between 5 and 15");
} else {
  console.log("a is greater than 15");
}
flowchart 3

4. Nested if Statements

การซ้อนเงื่อนไขภายในอีกเงื่อนไขหนึ่ง:

let a = 12;

if (a > 5) {
  if (a < 8) {
    console.log("a is between 5 and 7");
  } else if (a >= 8 && a <= 12) {
    console.log("a is between 8 and 12");
  } else {
    console.log("a is greater than 12");
  }
} else {
  console.log("a is less than or equal to 5");
}

switch Statement

ใช้เมื่อมีหลายกรณีที่ต้องตรวจสอบค่าเดียวกัน:

const day = new Date().getDay(); // 0 = Sunday, 1 = Monday, ...

switch (day) {
  case 0:
    console.log("It's Sunday!");
    break;
  case 1:
    console.log("It's Monday!");
    break;
  default:
    console.log("It's a weekday.");
}

Ternary Operator

const input = parseInt(prompt("Enter your number:"));
const is_number = !isNaN(input);
console.log(is_number ? "number" : "not number");

Excercise

  1. จากโปรแกรมรับชื่อ นามสกุล อายุ ของบทเรียนที่แล้ว ให้เพิ่มเงื่อนไขการแสดงผลต่อไปนี้
    1. ถ้าหากอายุที่รับมาเกิน 18 ปีเกินแสดงผล you can access this program
    2. ถ้าอายุไม่ถึง 18 ปีให้แสดงผล sorry, you can't access this program
  2. เขียน flowchart และโปรแกรมคำนวณเกรด โดยอิงจาก input ข้อมูลของ user โดยรับผลคะแนนเข้ามาเป็นตัวแปรและแสดงผลเป็นเกรดโดยที่
    1. หากคะแนนต่ำกว่า 50 คะแนน แสดงผลเกรด F
    2. หากคะแนนอยู่ระหว่าง 51-60 แสดงผลเกรด D
    3. หากคะแนนอยู่ระหว่าง 61-70 แสดงผลเกรด C
    4. หากคะแนนอยู่ระหว่าง 71-80 แสดงผลเกรด B
    5. หากคะแนนสูงกว่า 80 แสดงผลเกรด A
  3. เขียนโปรแกรมจาก flowchart นี้
  1. เขียนโปรแกรมและ Flowchart ระบบคำนวณค่าไฟพื้นฐาน โดยรับ input จาก keyboard ของ user เป็น จำนวนหน่วย (unit) ที่ใช้และแสดงผลลัพธ์เป็น ค่าไฟ (บาท) โดยมีเงื่อนไขดังนี้
    1. 0 - 50 หน่วย: หน่วยละ 3 บาท
    2. 51 - 150 หน่วย: หน่วยละ 5 บาท
    3. มากกว่า 150 หน่วย: หน่วยละ 8 บาท
💡
ค่าไฟคำนวณจาก: จำนวนหน่วยที่ใช้ (unit) x (ราคาต่อหน่วย (บาท) + FT (บาท)) [FT = ค่าคงที่ = 0.1972 บาท)]

Assignment

  • เขียนโปรแกรมรับ input จาก user เป็น
    • username
    • password
  • เมื่อ user input เข้ามาแล้วให้เช็คเงื่อนไข ดังนี้
    • ถ้า username = admin และ รหัสผ่านเป็น Admin@1234 ให้ print Welcome, Admin
    • ถ้า username เป็น user_001 หรือ user_002 หรือ user_003 และ password เป็น Password#1234 ให้ print Welcome, {{username}}
    • ถ้าไม่ใช่ 2 เงื่อนไขข้างบน ให้ print Wrong user or password, please try again

Reference

[Part 2] Python 101: Control process
Conditional Programming ในการเขียนโปรแกรมมักมีเงื่อนไขในการทำงาน เพื่อให้โปรแกรมทำงานหรือแสดงผลลัพธ์ต่างกันตามเงื่อนไขที่กำหนด Flowchart แผนภาพที่ระบุลำดับการทำงาน และเงื่อนไขการทำงานของโปรแกรม * วงกลม: กำหนดจุดเริ่มต้น - สิ้นสุดของโปรแกรม * สี่เหลียมผืนผ้า: การทำงานของโปรแกรม * สี่เหลี่ยมข้ามหลามตัด: เงื่อนไขของโปรแกรม Conditional Syntax 💡ตอนที่เริ