You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/th/2-js-basics/3-making-decisions/README.md

306 lines
28 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "90a3c32c3377f83ab750c2447c77ab98",
"translation_date": "2025-10-23T20:44:55+00:00",
"source_file": "2-js-basics/3-making-decisions/README.md",
"language_code": "th"
}
-->
# พื้นฐาน JavaScript: การตัดสินใจ
![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.th.png)
> ภาพสเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac)
คุณเคยสงสัยไหมว่าแอปพลิเคชันทำการตัดสินใจอย่างชาญฉลาดได้อย่างไร? เช่น ระบบนำทางเลือกเส้นทางที่เร็วที่สุด หรือเทอร์โมสแตทตัดสินใจว่าจะเปิดเครื่องทำความร้อนเมื่อไหร่? นี่คือแนวคิดพื้นฐานของการตัดสินใจในโปรแกรมมิ่ง
เช่นเดียวกับเครื่อง Analytical Engine ของ Charles Babbage ที่ถูกออกแบบมาให้ทำงานตามลำดับของการดำเนินการที่แตกต่างกันตามเงื่อนไข โปรแกรม JavaScript สมัยใหม่ก็ต้องการความสามารถในการเลือกทางตามสถานการณ์ที่เปลี่ยนแปลง ความสามารถในการแยกและตัดสินใจนี้คือสิ่งที่เปลี่ยนโค้ดที่นิ่งเฉยให้กลายเป็นแอปพลิเคชันที่ตอบสนองและฉลาด
ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการใช้ตรรกะเงื่อนไขในโปรแกรมของคุณ เราจะสำรวจคำสั่งเงื่อนไข ตัวดำเนินการเปรียบเทียบ และนิพจน์ทางตรรกะที่ช่วยให้โค้ดของคุณสามารถประเมินสถานการณ์และตอบสนองได้อย่างเหมาะสม
## แบบทดสอบก่อนเรียน
[แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/11)
ความสามารถในการตัดสินใจและควบคุมการทำงานของโปรแกรมเป็นแง่มุมพื้นฐานของการเขียนโปรแกรม ส่วนนี้จะครอบคลุมวิธีการควบคุมเส้นทางการทำงานของโปรแกรม JavaScript ของคุณโดยใช้ค่าบูลีนและตรรกะเงื่อนไข
[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
> 🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอเกี่ยวกับการตัดสินใจ
> คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
## ทบทวนเรื่องบูลีนอย่างย่อ
ก่อนที่จะสำรวจการตัดสินใจ ลองมาทบทวนค่าบูลีนจากบทเรียนก่อนหน้านี้กัน ค่าบูลีนตั้งชื่อตามนักคณิตศาสตร์ George Boole ซึ่งค่าบูลีนแสดงถึงสถานะสองแบบ `true` หรือ `false` ไม่มีความคลุมเครือ ไม่มีพื้นที่ตรงกลาง
ค่าบูลีนเหล่านี้เป็นพื้นฐานของตรรกะการคำนวณทั้งหมด ทุกการตัดสินใจที่โปรแกรมของคุณทำในที่สุดจะลดลงเหลือการประเมินค่าบูลีน
การสร้างตัวแปรบูลีนทำได้ง่าย:
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
นี่คือการสร้างตัวแปรสองตัวที่มีค่าบูลีนที่ชัดเจน
✅ ค่าบูลีนตั้งชื่อตาม George Boole นักคณิตศาสตร์ นักปรัชญา และนักตรรกศาสตร์ชาวอังกฤษ (18151864)
## ตัวดำเนินการเปรียบเทียบและค่าบูลีน
ในทางปฏิบัติ คุณจะไม่ค่อยตั้งค่าบูลีนด้วยตัวเอง แต่คุณจะสร้างมันขึ้นมาโดยการประเมินเงื่อนไข เช่น "ตัวเลขนี้มากกว่าตัวนั้นหรือไม่?" หรือ "ค่าพวกนี้เท่ากันหรือไม่?"
ตัวดำเนินการเปรียบเทียบช่วยให้คุณทำการประเมินเหล่านี้ได้ โดยเปรียบเทียบค่าต่าง ๆ และคืนค่าบูลีนตามความสัมพันธ์ระหว่างตัวดำเนินการ
| สัญลักษณ์ | คำอธิบาย | ตัวอย่าง |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `<` | **น้อยกว่า**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่าน้อยกว่าด้านขวา | `5 < 6 // true` |
| `<=` | **น้อยกว่าหรือเท่ากับ**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่าน้อยกว่าหรือเท่ากับด้านขวา | `5 <= 6 // true` |
| `>` | **มากกว่า**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่ามากกว่าด้านขวา | `5 > 6 // false` |
| `>=` | **มากกว่าหรือเท่ากับ**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่ามากกว่าหรือเท่ากับด้านขวา | `5 >= 6 // false` |
| `===` | **เท่ากันแบบเคร่งครัด**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านขวาและด้านซ้ายเท่ากัน **และ** เป็นประเภทข้อมูลเดียวกัน | `5 === 6 // false` |
| `!==` | **ไม่เท่ากัน**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีนตรงข้ามกับที่ตัวดำเนินการเท่ากันแบบเคร่งครัดจะคืนค่า | `5 !== 6 // true` |
✅ ทดสอบความรู้ของคุณโดยการเขียนการเปรียบเทียบในคอนโซลของเบราว์เซอร์ มีข้อมูลที่คืนค่ามาอันไหนที่ทำให้คุณประหลาดใจหรือไม่?
## คำสั่ง If
คำสั่ง `if` เหมือนกับการตั้งคำถามในโค้ดของคุณ "ถ้าเงื่อนไขนี้เป็นจริง ให้ทำสิ่งนี้" มันอาจเป็นเครื่องมือที่สำคัญที่สุดที่คุณจะใช้ในการตัดสินใจใน JavaScript
นี่คือวิธีการทำงาน:
```javascript
if (condition) {
// Condition is true. Code in this block will run.
}
```
เงื่อนไขจะอยู่ในวงเล็บ และถ้ามันเป็น `true` JavaScript จะรันโค้ดในวงเล็บปีกกา ถ้ามันเป็น `false` JavaScript จะข้ามบล็อกนั้นไป
คุณจะใช้ตัวดำเนินการเปรียบเทียบเพื่อสร้างเงื่อนไขเหล่านี้บ่อยครั้ง ลองดูตัวอย่างที่ใช้งานได้จริง:
```javascript
let currentMoney = 1000;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
}
```
เนื่องจาก `1000 >= 800` ประเมินค่าเป็น `true` โค้ดในบล็อกจึงถูกดำเนินการ โดยจะแสดงข้อความ "Getting a new laptop!" ในคอนโซล
## คำสั่ง If..Else
แต่ถ้าคุณต้องการให้โปรแกรมของคุณทำสิ่งอื่นเมื่อเงื่อนไขเป็นเท็จล่ะ? นั่นคือที่มาของ `else` มันเหมือนกับการมีแผนสำรอง
คำสั่ง `else` ให้คุณสามารถบอกว่า "ถ้าเงื่อนไขนี้ไม่เป็นจริง ให้ทำสิ่งอื่นแทน"
```javascript
let currentMoney = 500;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
// Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```
ตอนนี้เนื่องจาก `500 >= 800` เป็น `false` JavaScript จะข้ามบล็อกแรกและรันบล็อก `else` แทน คุณจะเห็นข้อความ "Can't afford a new laptop, yet!" ในคอนโซล
✅ ทดสอบความเข้าใจของคุณเกี่ยวกับโค้ดนี้และโค้ดต่อไปนี้โดยการรันในคอนโซลของเบราว์เซอร์ เปลี่ยนค่าของตัวแปร currentMoney และ laptopPrice เพื่อเปลี่ยนค่าที่คืนใน `console.log()`
## คำสั่ง Switch
บางครั้งคุณจำเป็นต้องเปรียบเทียบค่าหนึ่งกับตัวเลือกหลายตัว แม้ว่าคุณจะสามารถเชื่อมโยงคำสั่ง `if..else` หลายตัวได้ แต่แนวทางนี้อาจทำให้โค้ดดูยุ่งยาก คำสั่ง `switch` ให้โครงสร้างที่สะอาดกว่าในการจัดการค่าที่แตกต่างกันหลายค่า
แนวคิดนี้คล้ายกับระบบสวิตช์กลไกที่ใช้ในระบบแลกเปลี่ยนโทรศัพท์ในยุคแรก ค่าป้อนเข้าหนึ่งค่าจะกำหนดเส้นทางการทำงานเฉพาะที่ต้องดำเนินการ
```javascript
switch (expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
```
นี่คือโครงสร้างของมัน:
- JavaScript จะประเมินนิพจน์เพียงครั้งเดียว
- มันจะดูแต่ละ `case` เพื่อหาค่าที่ตรงกัน
- เมื่อพบค่าที่ตรงกัน มันจะรันโค้ดในบล็อกนั้น
- คำสั่ง `break` จะบอก JavaScript ให้หยุดและออกจาก switch
- หากไม่มี case ใดตรงกัน มันจะรันบล็อก `default` (ถ้าคุณมี)
```javascript
// Program using switch statement for day of week
let dayNumber = 2;
let dayName;
switch (dayNumber) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
default:
dayName = "Unknown day";
break;
}
console.log(`Today is ${dayName}`);
```
ในตัวอย่างนี้ JavaScript เห็นว่า `dayNumber` เป็น `2` พบ `case 2` ที่ตรงกัน ตั้งค่า `dayName` เป็น "Tuesday" และจากนั้นก็ออกจาก switch ผลลัพธ์คือ "Today is Tuesday" ถูกแสดงในคอนโซล
✅ ทดสอบความเข้าใจของคุณเกี่ยวกับโค้ดนี้และโค้ดต่อไปนี้โดยการรันในคอนโซลของเบราว์เซอร์ เปลี่ยนค่าของตัวแปร a เพื่อเปลี่ยนค่าที่คืนใน `console.log()`
## ตัวดำเนินการทางตรรกะและค่าบูลีน
การตัดสินใจที่ซับซ้อนมักต้องการการประเมินเงื่อนไขหลายข้อพร้อมกัน เช่นเดียวกับพีชคณิตบูลีนที่ช่วยให้นักคณิตศาสตร์สามารถรวมการแสดงออกทางตรรกะได้ การเขียนโปรแกรมก็มีตัวดำเนินการทางตรรกะเพื่อเชื่อมโยงเงื่อนไขบูลีนหลายข้อ
ตัวดำเนินการเหล่านี้ช่วยให้คุณสร้างตรรกะเงื่อนไขที่ซับซ้อนโดยการรวมการประเมิน true/false แบบง่าย ๆ
| สัญลักษณ์ | คำอธิบาย | ตัวอย่าง |
| ---------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `&&` | **AND ทางตรรกะ**: เปรียบเทียบการแสดงออกทางบูลีนสองตัว คืนค่า true **เฉพาะเมื่อ** ทั้งสองด้านเป็น true | `(5 > 3) && (5 < 10) // ทั้งสองด้านเป็น true คืนค่า true` |
| `\|\|` | **OR ทางตรรกะ**: เปรียบเทียบการแสดงออกทางบูลีนสองตัว คืนค่า true หากมีอย่างน้อยหนึ่งด้านเป็น true | `(5 > 10) \|\| (5 < 10) // ด้านหนึ่งเป็น false อีกด้านเป็น true คืนค่า true` |
| `!` | **NOT ทางตรรกะ**: คืนค่าตรงข้ามของการแสดงออกทางบูลีน | `!(5 > 10) // 5 ไม่มากกว่า 10 ดังนั้น "!" ทำให้เป็น true` |
ตัวดำเนินการเหล่านี้ช่วยให้คุณรวมเงื่อนไขในรูปแบบที่มีประโยชน์:
- AND (`&&`) หมายถึงเงื่อนไขทั้งสองต้องเป็นจริง
- OR (`||`) หมายถึงอย่างน้อยหนึ่งเงื่อนไขต้องเป็นจริง
- NOT (`!`) เปลี่ยน true เป็น false (และในทางกลับกัน)
## เงื่อนไขและการตัดสินใจด้วยตัวดำเนินการทางตรรกะ
ลองดูตัวดำเนินการทางตรรกะเหล่านี้ในตัวอย่างที่สมจริง:
```javascript
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
// Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
// Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```
ในตัวอย่างนี้: เราคำนวณราคาส่วนลด 20% (640) จากนั้นประเมินว่าเงินที่เรามีอยู่ครอบคลุมทั้งราคาปกติ **หรือ** ราคาส่วนลดหรือไม่ เนื่องจาก 600 ครอบคลุมราคาส่วนลดที่ 640 เงื่อนไขจึงประเมินค่าเป็น true
### ตัวดำเนินการปฏิเสธ
บางครั้งมันง่ายกว่าที่จะคิดเกี่ยวกับสิ่งที่ **ไม่** เป็นจริง เช่น แทนที่จะถามว่า "ผู้ใช้เข้าสู่ระบบหรือยัง?" คุณอาจต้องการถามว่า "ผู้ใช้ **ยังไม่ได้** เข้าสู่ระบบหรือเปล่า?" ตัวดำเนินการเครื่องหมายอัศเจรีย์ (`!`) จะช่วยพลิกตรรกะให้คุณ
```javascript
if (!condition) {
// runs if condition is false
} else {
// runs if condition is true
}
```
ตัวดำเนินการ `!` เหมือนกับการพูดว่า "ตรงข้ามกับ..." ถ้าบางสิ่งเป็น `true` `!` จะทำให้มันเป็น `false` และในทางกลับกัน
### นิพจน์แบบ Ternary
สำหรับการกำหนดค่าตามเงื่อนไขที่ง่าย JavaScript มีตัวดำเนินการ **ternary** ซึ่งเป็นไวยากรณ์ที่กระชับที่ช่วยให้คุณเขียนนิพจน์เงื่อนไขในบรรทัดเดียว มีประโยชน์เมื่อคุณต้องการกำหนดค่าหนึ่งในสองค่าตามเงื่อนไข
```javascript
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
```
มันอ่านเหมือนคำถาม: "เงื่อนไขนี้เป็นจริงหรือไม่? ถ้าใช่ ใช้ค่านี้ ถ้าไม่ ใช้ค่านั้น"
ด้านล่างคือตัวอย่างที่จับต้องได้มากขึ้น:
```javascript
let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```
✅ ใช้เวลาสักครู่เพื่ออ่านโค้ดนี้หลายครั้ง คุณเข้าใจวิธีการทำงานของตัวดำเนินการเหล่านี้หรือไม่?
นี่คือสิ่งที่บรรทัดนี้กำลังพูดว่า: "ตัวเลขแรก (`firstNumber`) มากกว่าตัวเลขที่สอง (`secondNumber`) หรือไม่? ถ้าใช่ ใส่ `firstNumber` ใน `biggestNumber` ถ้าไม่ ใส่ `secondNumber` ใน `biggestNumber`"
ตัวดำเนินการ ternary เป็นเพียงวิธีที่สั้นกว่าในการเขียนคำสั่ง `if..else` แบบดั้งเดิม:
```javascript
let biggestNumber;
if (firstNumber > secondNumber) {
biggestNumber = firstNumber;
} else {
biggestNumber = secondNumber;
}
```
ทั้งสองวิธีให้ผลลัพธ์เหมือนกัน ตัวดำเนินการ ternary ให้ความกระชับ ในขณะที่โครงสร้าง if-else แบบดั้งเดิมอาจอ่านง่ายกว่าในกรณีที่มีเงื่อนไขซับซ้อน
---
## 🚀 ความท้าทาย
สร้างโปรแกรมที่เขียนด้วยตัวดำเนินการทางตรรกะก่อน แล้วเขียนใหม่โดยใช้นิพจน์ ternary คุณชอบไวยากรณ์แบบไหนมากกว่ากัน?
---
## ความท้าทาย GitHub Copilot Agent 🚀
ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:
**คำอธิบาย:** สร้างโปรแกรมคำนวณเกรดที่ครอบคลุมซึ่งแสดงแนวคิดการตัดสินใจหลายอย่างจากบทเรียนนี้ รวมถึงคำสั่ง if-else, switch, ตัวดำเนินการทางตรรกะ และนิพจน์ ternary
**คำสั่ง:** เขียนโปรแกรม JavaScript ที่รับคะแนนตัวเลขของนักเรียน (0-100) และกำหนดเกรดตัวอักษรของพวกเขาโดยใช้เกณฑ์ต่อไปนี้:
- A: 90-100
- B: 80-89
- C: 70-79
- D: 60-69
- F: ต่ำกว่า 60
ข้อกำหนด:
1. ใช้คำสั่ง if-else เพื่อกำหนดเกรดตัวอักษร
2. ใช้ตัวดำเนินการทางตรรกะเพื่อตรวจสอบว่านักเรียนผ่าน (เกรด >= 60) **และ** ได้เกียรตินิยม (เกรด >= 90)
3. ใช้คำสั่ง switch เพื่อให้ข้อเสนอแนะเฉพาะสำหรับแต่ละเกรดตัวอักษร
4. ใช้ตัวดำเนินการ ternary เพื่อกำหนดว่านักเรียนมีสิทธิ์เรียนหลักสูตรถัดไปหรือไม่ (เกรด >= 70)
5. รวมการตรวจสอบข้อมูลเพื่อให้แน่ใจว่าคะแนนอยู่ระหว่าง 0 ถึง 100
ทดสอบโปรแกรมของคุณด้วยคะแนนต่าง ๆ รวมถึงกรณีขอบเช่น 59, 60, 89, 90 และข้อมูลที่ไม่ถูกต้อง
เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
## แบบทดสอบหลังเรียน
[แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/12)
## ทบทวนและศึกษาด้วยตัวเอง
อ่านเพิ่มเติมเกี่ยวกับตัวดำเนินการที่มีให้ผู้ใช้ [บน MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)
ลองดู [operator lookup](https://joshwcomeau.com/operator-lookup/) ที่ยอดเยี่ยมของ Josh Comeau!
## งานที่ได้รับมอบหมาย
[Operators](assignment.md)
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้