if..else../javascript

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#ifcondutional

คำสั่ง if...else ใน JavaScript คือกลไกการควบคุมการทำงาน (control flow statement) ที่ช่วยให้โค้ดของคุณสามารถตัดสินใจได้ว่าจะ ดำเนินการโค้ดบล็อกไหน โดยอิงจาก เงื่อนไข (condition) ที่กำหนด 🤖

หลักการทำงาน ⚙️

การตรวจสอบเงื่อนไข (if): ระบบจะตรวจสอบว่า เงื่อนไข ที่อยู่ในวงเล็บ () เป็น จริง (truthy) หรือไม่

กรณีเป็นจริง: ถ้าเงื่อนไขเป็นจริง โค้ดที่อยู่ในบล็อก if ({ ... }) จะถูก ดำเนินการ

กรณีเป็นเท็จ (else): ถ้าเงื่อนไขเป็นเท็จ (falsy) โค้ดที่อยู่ในบล็อก else (ซึ่งเป็นส่วนทางเลือก) จะถูก ดำเนินการแทน

โครงสร้างไวยากรณ์ (Syntax) 📝

JavaScript

if (เงื่อนไข_ที่จะ_ตรวจสอบ) {

// บล็อกโค้ด A: ทำงานถ้า 'เงื่อนไข' เป็นจริง

} else {

// บล็อกโค้ด B: ทำงานถ้า 'เงื่อนไข' เป็นเท็จ

}

ตัวอย่าง 💡

สมมติเราต้องการตรวจสอบว่าคะแนนสอบผ่านหรือไม่

JavaScript

let score = 75;

let passingScore = 50;

if (score >= passingScore) {

console.log("ยินดีด้วย! คุณสอบผ่าน."); // จะทำงานเพราะ 75 >= 50 เป็นจริง

} else {

console.log("ขออภัย! คุณสอบไม่ผ่าน.");

}

// ผลลัพธ์: ยินดีด้วย! คุณสอบผ่าน.

2025/10/12 แก้ไขเป็น

... อ่านเพิ่มเติมนอกจากการใช้งานคำสั่ง if...else เบื้องต้นแล้ว ฉันอยากแชร์ประสบการณ์ที่เจอเมื่อเริ่มเขียนโปรแกรมด้วย JavaScript ซึ่งพบว่าการเข้าใจว่าค่าที่ตรวจสอบในเงื่อนไขเป็น "truthy" หรือ "falsy" ถือเป็นเรื่องสำคัญมาก เพราะค่าบางค่า เช่น 0, "", null, undefined จะถูกตีความเป็น false ทำให้โค้ดในบล็อก else ถูกเรียกใช้ อีกอย่างที่สำคัญคือการใช้คำสั่ง if...else ซ้อนกัน (nested if...else) เพื่อจัดการเงื่อนไขหลายกรณีอย่างมีประสิทธิภาพ เช่น การตรวจสอบคะแนนสอบหลายระดับเพื่อแยกระดับเกรด นอกจากนี้ยังมีวิธีอื่นๆ อย่างการใช้คำสั่ง switch ซึ่งบางครั้งจะเหมาะสมกว่าเมื่อมีหลายกรณีที่ต้องตรวจสอบ สำหรับผู้ที่เพิ่งเริ่มต้น แนะนำให้ลองเขียนโปรแกรมเล็กๆ เช่น ตรวจสอบว่าราคาสินค้ามีส่วนลดหรือไม่ หรือตรวจสอบอายุเพื่อแยกว่าคนคนนั้นเป็นเด็ก วัยรุ่น หรือผู้ใหญ่ เพื่อฝึกความเข้าใจในโครงสร้างควบคุม if...else ให้คล่อง จากคำแนะนำด้านบนและโค้ดตัวอย่างในบทความนี้ ฉันมั่นใจว่าคุณจะเข้าใจและใช้คำสั่ง if...else ใน JavaScript ได้ดีขึ้นอย่างแน่นอน และยังช่วยให้เขียนโปรแกรมที่มีความยืดหยุ่นและตอบสนองตามเงื่อนไขที่ต้องการได้อย่างถูกต้อง

1 ความคิดเห็น

รูปภาพของ peemai Ccn
peemai Ccn

🥰🥰🥰🥰

โพสต์ที่เกี่ยวข้อง

JavaScript Cheat Sheet🌟ภาษายอดนิยมสำหรับเว็บฝั่ง Frontend และ Backend
JavaScript ภาษายอดนิยมสำหรับเว็บฝั่ง Frontend และ Backend ทำเว็บไซต์แบบไดนามิก เกมบนเบราว์เซอร์ และมือถือ 5 สิ่งต้องรู้เกี่ยวกับ JavaScript 1. JavaScript คืออะไร? — ภาษาโปรแกรมลำดับสูง รันได้ทั้ง Browser (Frontend) และ Server (Node.js) 2. ติดตั้ง/รันที่ไหน? — รันบน Browser console (F12) หรือติ
NerdDailyDose

NerdDailyDose

ถูกใจ 72 ครั้ง

มือใหม่เริ่มตรงนี้! 5 เว็บฝึกเขียนโค้ดฉบับคนไม่มีพื้นฐานก็ทำได้✨
การเรียนเขียนโค้ด ก็เป็นสกิลอันดับต้นๆของคนอยากฝึก Skills ใหม่ๆ แต่ไม่รู้จะเริ่มยังไง จะเรียนรู้เรื่องไหม? ไม่ใช่ปัญหาเพราะเราได้รวบรวมเว็บในการเรียนเขียนโค้ดตั้งแต่ Beginner ไปยังระดับ Advanced มาไว้ให้แล้ว มีเว็นไหนบ้างมาดูกั๊น~ 1. Coddy เป็นเว็บฝึกฝนการเขียนโค้ดอันดับต้นๆ เรียนเข้าใจง่ายเพราะ
Farafern- • • -

Farafern- • • -

ถูกใจ 921 ครั้ง

เขียนโค้ดให้ “คิดเป็น” ด้วย if-else
🧠 if-else คือการสอนให้โค้ด “ตัดสินใจ” ได้ เหมือนการคิดของคน 🔍 ใช้ตรวจสอบเงื่อนไข เช่น ถ้าเป็นแบบนี้ → ให้ทำอะไร ✅ if ใช้เมื่อเงื่อนไข “เป็นจริง” ❌ else ใช้เมื่อเงื่อนไข “ไม่เป็นจริง” 🔁 ถ้ามีหลายเงื่อนไข สามารถใช้ else if (elif) เพิ่มได้ 🎯 เหมาะกับงานตัดสินใจ เช่น ผ่าน/ไม่ผ่าน หรือ ลดราคา/ไม่
ครูฟลุคสอนเทคโนโลยี

ครูฟลุคสอนเทคโนโลยี

ถูกใจ 87 ครั้ง

ภาพชายหญิงสองคนกำลังนั่งทำงานหน้าคอมพิวเตอร์ที่มีโค้ดและกราฟ พร้อมข้อความ "อยากฝึกเขียน โปรแกรม ทำโปรเจคอะไรดี?"
ภาพหน้าจอสมาร์ทโฟนแสดงแอป To-Do List พร้อมรายการงานต่างๆ และข้อความ "1 To-Do List App" แนะนำให้ฝึกเขียนเว็บด้วยโปรเจกต์นี้
ภาพหน้าจอสมาร์ทโฟนแสดงแอป Expense Tracker ที่มีข้อมูลรายรับรายจ่ายและโครงสร้างค่าใช้จ่าย พร้อมข้อความ "2 Expense Tracker" แนะนำให้ฝึกคิดเป็นระบบและเก็บข้อมูล
9 ไอเดีย ฝึกเขียนโปรแกรม
เวลาผมเริ่มหัดเขียนโปรแกรมใหม่ๆ ผมก็เคยงงเหมือนกันว่า “มีพื้นฐานแล้ว แต่จะเอาไปทำอะไรต่อดีวะ…” . ก็เลยรวบรวมไอเดียโปรเจกต์เล็กๆ 9 อัน ที่ทำไม่ยาก เหมาะกับคนที่เรียน Python, JavaScript หรือ สายเว็บ เอาไว้ให้ลองเลือกเล่นกันครับ โฟกัสคือ “เล็ก แต่ได้ฝึกจริง” ไม่ใหญ่จนท้อกลางทาง 1. To-Do List Ap
นักเดฟ - NakDev

นักเดฟ - NakDev

ถูกใจ 492 ครั้ง

ภาพแสดงการสร้างเว็บไซต์พอร์ตโฟลิโอที่ทันสมัยด้วย Claude Code จากคำสั่งในเทอร์มินัล โดยไม่ต้องมีความรู้ด้านโค้ด พร้อมข้อความว่า Claude สร้างให้
ภาพเปรียบเทียบผลลัพธ์การสร้างเว็บไซต์ด้วย Claude Code ระหว่างคำสั่งที่ไม่ชัดเจน (ได้ผลลัพธ์ไม่ดี) กับคำสั่งที่ชัดเจน (ได้เว็บไซต์ร้านกาแฟที่สมบูรณ์แบบ)
ภาพแสดงขั้นตอนที่ 2 ของการสร้างเว็บไซต์ด้วย Claude Code คือการให้ Claude ลอกดีไซน์จาก URL ที่ให้มา โดยแสดงต้นฉบับและผลลัพธ์ที่ถูกโคลนออกมาได้เหมือนกัน
ไม่รู้โค้ดก็สร้าง Website ได้ด้วย Claude Code 🌐
เคยอยากมี website ของตัวเอง แต่ไม่รู้จะเริ่มยังไง? 😅 ไม่รู้ HTML CSS JavaScript เลย? ไม่เป็นไร Claude Code ทำให้ได้เลย👇 🎯 Step 1: บอก Claude ให้ชัดเจน อย่าแค่บอกว่า “สร้าง website ให้หน่อย” ต้องบอกให้ละเอียดว่า → Website นี้สำหรับใคร? → มีหน้าอะไรบ้าง? → ต้องการฟีเจอร์อะไร? ยิ่งละเอียด Cl
Learn_ai_with_me

Learn_ai_with_me

ถูกใจ 33 ครั้ง

ภาพการ์ตูนเด็กผู้หญิงกำลังมองแล็ปท็อปด้วยสีหน้ากังวล มีข้อความว่า "เจอ Error แล้วทำไงต่อ" และ "มือใหม่หัด Coding" แสดงถึงความท้าทายในการเริ่มต้นเขียนโค้ด
ภาพการ์ตูนเด็กผู้หญิงกำลังคิด มีฟองความคิดแสดงโลโก้ Python, JS (JavaScript) และ C++ พร้อมข้อความ "เลือกภาษาที่ใช่" และคำแนะนำเกี่ยวกับภาษาโปรแกรมต่างๆ
ภาพการ์ตูนเด็กผู้หญิงกำลังติดตั้งโปรแกรมบนแล็ปท็อปอย่างมีความสุข มีข้อความว่า "ติดตั้งโปรแกรมที่จำเป็น Code Editor" และชื่อโปรแกรมยอดนิยม เช่น VsCode, Pycharm
มือใหม่เริ่มต้นเขียนโค้ดต้องทำยังไง? 👩‍💻
เริ่มต้นเขียนโค้ดต้องทำยังไง? 👩‍💻 มาดู 5 ขั้นตอนง่ายๆ ที่มือใหม่ก็ทำตามได้เลย! ✨ หลายคนอยากลองเขียนโค้ดแต่ไม่รู้จะเริ่มตรงไหนดีใช่มั้ย? ไม่ต้องกังวลเลยค่ะ! วันนี้จะมาแชร์ขั้นตอนง่ายๆ ที่จะช่วยให้คุณเริ่มต้นเส้นทางโปรแกรมเมอร์ได้อย่างถูกทางแน่นอน! 1. เลือกภาษาแรกที่ใช่ การเลือก 'ภาษาแรก'
TechTalk by Taa

TechTalk by Taa

ถูกใจ 344 ครั้ง

ภาพแสดงตัวอย่างอีเมลเชิญสัมภาษณ์หรือยืนยันการคัดเลือกจากบริษัทชั้นนำ เช่น SCG, Bangchak, AIS, Agoda, SCB TechX และ PTT ซึ่งเป็นผลลัพธ์ของการเขียน Resume/CV ที่ดี เพื่อให้ได้โอกาสฝึกงานในบริษัทที่ใฝ่ฝัน.
ภาพแสดงตัวอย่างส่วนบนของ Resume/CV ที่เน้นข้อมูลสำคัญ เช่น สรุปตัวตน (Summary), ประวัติการศึกษา (Education) พร้อมวิชาที่เกี่ยวข้อง และทักษะ (Skills) ทั้ง Technical และ Soft Skills พร้อมคำแนะนำในการเขียนให้กระชับและครบถ้วน.
ภาพแสดงตัวอย่างส่วนล่างของ Resume/CV ที่เน้นประสบการณ์ทำงาน (Work Experience) และประสบการณ์โปรเจกต์ (Project Experience) พร้อมคำแนะนำการใช้ Tense ภาษาอังกฤษที่ถูกต้อง การระบุตำแหน่งและวันที่ และการอธิบายหน้าที่ที่รับผิดชอบอย่างละเอียด.
เขียน Resume ยังไงให้ได้สัมภาษณ์ฝึกงาน!
ฝึกงานคือก้าวแรกของการได้ทำงานในบริษัทที่ใฝ่ฝัน และก้าวสำคัญในการจบมหาลัย ถ้าเลือกที่ฝึกงานที่ดี มีชัยไปกว่าครึ่ง! โพสต์นี้รวมเทคนิคการเขียน Resume / CV ที่ทำให้ผ่านการคัดเลือกและได้เรียกสัมภาษณ์จริง! 📌 สิ่งที่ควรมีใน Resume / CV 1. Summary กระชับและชัดเจน • เขียนให้เข้าใจง่าย
Niko

Niko

ถูกใจ 3082 ครั้ง

🧑‍💻 อยากเขียน Frontend ต้องรู้อะไรบ้าง? (Part 2 – JavaS
พอทำเว็บให้ “มองเห็นได้” ด้วย HTML/CSS แล้ว ขั้นต่อไปคือทำให้เว็บ “ตอบสนองได้” และตัวเอกของงานนี้ก็คือ… **JavaScript** ✨ วันนี้เราเลยสรุปพื้นฐาน JS ที่มือใหม่ต้องรู้ให้ครบจบในโพสต์เดียวครับ 1) JavaScript Basic — ทำให้หน้าเว็บโต้ตอบได้** ถ้าอยากให้เว็บคลิกได้ ขยับได้ ส่งข้อมูลได้ ต้องเริ่มจาก
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 10 ครั้ง

ภาพหน้าจอแสดงขั้นตอนการสร้าง Shortcut ใน iOS รวมถึงการนำเข้าโมดูล, การดึงที่อยู่ล่าสุด, การสร้างการแจ้งเตือนพร้อมรายละเอียด, และการเลือกแพลตฟอร์มเพลงพร้อมการแจ้งเตือน
ภาพพื้นหลังนามธรรมที่มีรูปทรงเรขาคณิตวงกลมและสี่เหลี่ยมในโทนสีพาสเทลไล่ระดับสีส้ม ชมพู ฟ้า และม่วง
ภาพกราฟิกพื้นหลังสีม่วง มีเครื่องหมายถูกสีขาวและข้อความภาษาไทยว่า 'สร้าง Shortcut ได้เลย' พร้อมข้อความภาษาอังกฤษ 'hello hello hello hello'
✅ เศรกิจ+เคย กรุ้ง อยู่ที่นี่เภนะ,อุภรนะภณฌี้ฝ้า BT_เพลินจิต(BTS)
#รถไฟฟ้า
BOY_APIRAK[130<🔗/>120]WANPAIN

BOY_APIRAK[130<🔗/>120]WANPAIN

ถูกใจ 1 ครั้ง

ภาพรวมของ 3 แอปฝึกเขียนโค้ดฟรีที่เหมาะสำหรับมือใหม่ โดยมีหน้าจอคอมพิวเตอร์แสดงโค้ดและวิดีโอคอลเป็นพื้นหลัง พร้อมข้อความแนะนำแอป
ภาพหน้าจอคอมพิวเตอร์แสดงโลโก้ W3Schools และคุณสมบัติเด่นของแอป เช่น เนื้อหาเข้าใจง่าย ตัวอย่างโค้ดที่รันได้ และแบบฝึกหัดพร้อมใบรับรอง
ภาพหน้าจอคอมพิวเตอร์แสดงโลโก้ Replit และคุณสมบัติของแอปที่รองรับภาษาโปรแกรมมิ่งและเฟรมเวิร์กหลากหลาย พร้อมความง่ายในการใช้งาน
แอปฝึกเขียนโค้ดฟรี ที่เหมาะสำหรับมือใหม่✨
W3Schools ครอบคลุมภาษาต่างๆ เช่น - HTML (โครงสร้างของเว็บเพจ) - CSS (การออกแบบและตกแต่งเว็บ) - JavaScript (การทำให้เว็บมีปฏิสัมพันธ์กับผู้ใช้) - PHP (ภาษาสำหรับพัฒนาเว็บฝั่งเซิร์ฟเวอร์) - SQL (การจัดการฐานข้อมูล) - Python, Java, C++, React, Bootstrap และอื่นๆ ✅ เนื้อหาที่เข้าใจง่าย เหมาะสำ
Dekrian_04

Dekrian_04

ถูกใจ 1355 ครั้ง

อัปเวล Java EP.4! สอนคอมพิวเตอร์ให้ "ตัดสินใจ" ด้วย If-Else 🔀✨
เดินทางมาถึง EP.4 แล้ว! 🎉 ขอเสียงคนตามมาจาก EP ก่อนๆ หน่อยยย 🙋‍♂️ หลังจากที่เราสอนคอมพิวเตอร์ให้จำข้อมูล (EP.2) และคิดเลขได้ (EP.3) วันนี้เราจะมาอัปความ "ฉลาด" ให้กับโปรแกรมของเรา ด้วยการสอนให้มันรู้จัก "การตัดสินใจ" (Decision Making) ครับ! 🔀 เคยสงสัยไหมครับว่าระบบตัดเกรด หรือ
M

M

ถูกใจ 2 ครั้ง

Side me ฝึกเขียนโปรแกรมหลายภาษาได้ในแอพเดียว
รวมภาษาเขียนโค้ดไว้ในที่เดียว Python | JavaScript | C++ | และอีกเพียบ! เรียนผ่านเกม สนุก เข้าใจง่าย ฝึก Logic + Coding Skill ไปพร้อมกัน เหมาะมากสำหรับ มือใหม่เริ่มเขียนโค้ด หรือคนที่อยากอัปสกิลเพิ่ม เล่นได้ทุกที่ ฝึกวันละนิด เก่งขึ้นจริง! ลองแล้วเป็นยังไง คอมเมนต์มาแชร์กัน กดไลก์ + ติด
ครูฟลุคสอนเทคโนโลยี

ครูฟลุคสอนเทคโนโลยี

ถูกใจ 432 ครั้ง

ภาพแสดงการสร้าง Web App ด้วย Google App Script โดยใช้ Google Sheets เป็นฐานข้อมูลแบบเรียลไทม์ ไม่ต้องมีพื้นฐานโค้ดดิ้ง มีตัวอย่าง Dashboard ที่สวยงาม ทันสมัย และขั้นตอนการออกแบบ UI, เขียน Logic, เชื่อมต่อข้อมูล รองรับทุกอุปกรณ์ ใช้งานง่าย ปลอดภัยบน Google Cloud.
🔥 อยากมี Web App ใช้เอง…แต่ไม่อยากเขียนโค้ดยาก? ใช้ของฟรีจาก Google ก็พอ! 🤯💻
📌 วันนี้พามาสร้าง Web App ด้วย Google Apps Script เชื่อมฐานข้อมูลกับ Google Sheets แบบง่าย ๆ 🎯 โพสต์นี้จะช่วยให้คุณ สร้างระบบใช้งานจริงได้ฟรี มีฐานข้อมูลเก็บข้อมูลลูกค้า / ฟอร์ม เหมาะกับสาย No-Code / Low-Code 💡 Detail / Insight Google Apps Script คือ JavaScript บน Cloud ที่เอามาทำ Web App
CreatifyX

CreatifyX

ถูกใจ 173 ครั้ง

50 สิ่งเกี่ยวกับ webflow ✨No-Code Website Builder
ช่วงหลายปีที่ผ่านมา การสร้างเว็บไซต์เคยเป็นเรื่องของ “Developer” เป็นหลัก ถ้าอยากได้เว็บสวยๆ ต้องเขียน code ต้องเข้าใจ HTML, CSS, JavaScript ต้องวาง server ต้อง debug ต้องแก้ responsive ต้องคุยระหว่าง designer กับ programmer ไปมาไม่รู้กี่รอบ และนี่คือเหตุผลที่เว็บจำนวนมาก กว่าจะขึ้นจร
NerdDailyDose

NerdDailyDose

ถูกใจ 14 ครั้ง

ทำความเข้าjavascriptแบบง่ายๆฉบับkumoriiz
#kumoriiz #javascrip #it #programmer #ไอทีน่ารู้
kumoriiz

kumoriiz

ถูกใจ 2 ครั้ง

ภาพอินโฟกราฟิกเปรียบเทียบ Visual Studio (IDE ครบวงจร, เหมาะโปรเจกต์ใหญ่, C#, .NET) และ Visual Studio Code (Code Editor น้ำหนักเบา, ยืดหยุ่นด้วย Extensions, เหมาะ Web Development, Python) พร้อมสรุปข้อดีและข้อควรเลือกใช้
สรุปชัด! Visual Studio vs Visual Studio Code
มือใหม่หัดเขียนโค้ดหลายคนต้องเคยสับสน! 🤔 ทำไมมีทั้ง "Visual Studio" และ "Visual Studio Code" แล้วเราควรโหลดตัวไหนมาลงเครื่องดี? วันนี้จะมาสรุปความต่างให้เข้าใจง่ายในโพสต์เดียวครับ! 💜 Visual Studio (รุ่นพี่ใหญ่สาย IDE) เหมาะสำหรับงานโปรเจกต์ขนาดใหญ่ พัฒนาซอฟต์แวร์ระดับองค์กร หรือเข
P.R.Design

P.R.Design

ถูกใจ 4 ครั้ง

ภาพหน้าปกแสดงข้อความ \"10 แอป สอนเขียนโค้ด จบไม่ตรงสายก็เรียนได้\" บนพื้นหลังสีดำที่มีตัวเลขไบนารีและภาพคอมพิวเตอร์พร้อมหุ่นยนต์
ภาพหน้าจอแอป SoloLearn แสดงหน้า \"Learn\" ที่มีหมวดหมู่การเรียนรู้ภาษาโปรแกรมต่างๆ เช่น Python, JavaScript, C++, HTML และโครงสร้างข้อมูล
ภาพหน้าจอแอป Encode แสดงหน้า \"Web\" พร้อมหัวข้อการเรียนรู้เกี่ยวกับการพัฒนาเว็บ เช่น Getting Started, Lists, Links, Images และ Styling Elements
10 แอปไว้ฝึกเขียนโปรแกรมแบบง่ายๆ 2025
#แอพดีบอกต่อ #เขียนโปรแกรม #developer #programming
นักเดฟ - NakDev

นักเดฟ - NakDev

ถูกใจ 433 ครั้ง

ภาพอินโฟกราฟิกอธิบาย Google Apps Script (GAS) เครื่องมือเขียนสคริปต์อัตโนมัติสำหรับ Google Workspace โดยระบุว่า GAS คือแพลตฟอร์มสคริปต์บนคลาวด์ที่ใช้ JavaScript เพื่อทำงานอัตโนมัติร่วมกับบริการ Google เช่น Sheets, Gmail, Forms, Drive และ Calendar พร้อมแสดงจุดเด่นและตัวอย่างการใช้งาน
รู้จัก Google Apps Script (GAS) ตัวช่วยสุดเทพของคนทำงาน 🚀
เบื่อไหม? ที่ต้องนั่งก๊อปปี้ข้อมูลไปมา หรือต้องคอยส่งอีเมลเดิมๆ ซ้ำๆ ทุกวัน... ปัญหานี้จะหมดไปถ้าคุณรู้จักกับ Google Apps Script (GAS)! 🛠️ วันนี้จะมาสรุปให้ฟังว่าเจ้า GAS คืออะไร และทำไมคนยุคใหม่ถึงต้องใช้! ✨ GAS คืออะไร? มันคือแพลตฟอร์มสำหรับเขียนสคริปต์บนคลาวด์ของ Google โดยใช้ภาษา JavaScript
P.R.Design

P.R.Design

ถูกใจ 1 ครั้ง

ดูเพิ่มเติม