พัฒนาเว็บไซต์ · WDC-01-08

Basic JavaScript

หลักสูตร Basic JavaScript เป็นการอบรมเขียน JavaScript สมัยใหม่สำหรับผู้เริ่มต้น ตั้งแต่ตัวแปร เงื่อนไข ฟังก์ชัน Array และ Object จนถึงจัดการ DOM รับ Event ตรวจฟอร์ม และดึงข้อมูลด้วย Fetch API เหมาะกับผู้เริ่มต้น ผู้ที่เขียน HTML และ CSS ได้แล้ว และนักศึกษา จบแล้วได้เว็บแอปเล็ก ๆ ของตัวเอง

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 4,050 บาท / ท่าน 4,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

JavaScript เป็นภาษาเดียวที่เบราว์เซอร์ทุกตัวเข้าใจ จึงอยู่เบื้องหลังเกือบทุกปุ่ม เมนู ฟอร์ม และหน้าจอที่โต้ตอบได้บนเว็บ และยังเป็นพื้นฐานของ React, Vue, Node.js และเครื่องมือสมัยใหม่อีกมาก แต่ผู้เริ่มต้นจำนวนมากเรียนจากตัวอย่างรุ่นเก่าที่ยังใช้ var, jQuery หรือคำสั่งที่เบราว์เซอร์เลิกแนะนำไปแล้ว ทำให้โค้ดเกิดบั๊กง่ายและต่อยอดไปเครื่องมือใหม่ได้ยาก

หลักสูตรนี้เริ่มจากศูนย์และสอน JavaScript ตามมาตรฐานปัจจุบัน เริ่มจากเตรียม VS Code และ Chrome DevTools เรียนตัวแปร const และ let ชนิดข้อมูล ตัวดำเนินการ เงื่อนไข การวนซ้ำ ฟังก์ชัน Array และ Object จากนั้นนำมาใช้กับหน้าเว็บจริงผ่าน DOM และ Event ตรวจข้อมูลในฟอร์ม ดึงข้อมูลจาก API ด้วย Fetch และ async/await เก็บข้อมูลด้วย localStorage และแยกโค้ดเป็นไฟล์ด้วย ES Modules แล้วปิดท้ายด้วย Workshop สร้างเว็บแอปเล็ก ๆ ของตัวเองที่ทำงานได้ครบ (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เข้าใจบทบาทของ JavaScript บนหน้าเว็บ และใช้ DevTools ตรวจหาข้อผิดพลาดได้
ใช้ตัวแปร const และ let ชนิดข้อมูล และตัวดำเนินการได้ถูกต้อง
เขียนเงื่อนไข การวนซ้ำ และฟังก์ชันเพื่อแก้โจทย์ได้ด้วยตนเอง
จัดการข้อมูลด้วย Array, Object และ JSON ได้คล่อง
เลือกและแก้ไของค์ประกอบบนหน้าเว็บผ่าน DOM และตอบสนอง Event ของผู้ใช้ได้
ตรวจข้อมูลในฟอร์ม และดึงข้อมูลจาก API ด้วย Fetch และ async/await ได้
สร้างเว็บแอปขนาดเล็กที่เก็บข้อมูลด้วย localStorage และแยกโค้ดด้วย ES Modules

หลักสูตรนี้เหมาะสำหรับ

ผู้เริ่มต้นที่ไม่เคยเขียนโปรแกรมและอยากเริ่มด้วย JavaScript
ผู้ที่เขียน HTML และ CSS ได้แล้ว และอยากให้หน้าเว็บโต้ตอบกับผู้ใช้ได้
นักเรียน นักศึกษา ที่ต้องใช้ JavaScript ในงานหรือโครงงาน
Developer จากภาษาอื่น และ IT Manager ที่อยากเข้าใจ JavaScript สมัยใหม่อย่างเป็นระบบ
ผู้ที่วางแผนจะเรียน React, Vue หรือ Node.js ต่อและต้องการพื้นฐานที่ถูกต้อง

พื้นฐานของผู้เข้าอบรม

ใช้งานคอมพิวเตอร์ จัดการไฟล์และโฟลเดอร์ และใช้เว็บเบราว์เซอร์ได้
ไม่จำเป็นต้องมีพื้นฐานการเขียนโปรแกรมมาก่อน
หากเขียน HTML และ CSS เบื้องต้นได้จะช่วยให้เรียนได้ง่ายขึ้น
โน้ตบุ๊กที่ติดตั้ง VS Code และเบราว์เซอร์รุ่นล่าสุด เช่น Chrome หรือ Edge ได้

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic JavaScript รุ่นเดิม อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab ระดับ Beginner เริ่มได้โดยไม่ต้องมีพื้นฐานการเขียนโปรแกรม ฉบับนี้สอน JavaScript ตามมาตรฐาน ECMAScript ปัจจุบัน ใช้ const และ let แทน var ตัดหัวข้อที่เลิกใช้แล้ว เช่น

JScript, Frame, Status Bar, เอฟเฟกต์ Rollover และ jQuery ใช้ localStorage แทน Cookie และเพิ่ม Fetch API, async/await และ ES Modules หลักสูตรนี้เน้นพื้นฐานสำหรับผู้เริ่มต้น ต่างจากหลักสูตร Advanced JavaScript ที่ต่อยอดไปยัง Class, Closure, Event Loop, Node.js และการเขียน Test ผู้เรียนได้ Lab Guide ไฟล์ตั้งต้นและโค้ดเฉลยครบทุก Lab กลับไปใช้งานต่อ

Day 1 พื้นฐานภาษา JavaScript

Section 1: Lab: เริ่มต้น JavaScript บนเบราว์เซอร์

JavaScript ทำอะไรบนหน้าเว็บ และความสัมพันธ์กับ HTML, CSS และ ECMAScript
ติดตั้ง VS Code พร้อม Live Server และ Prettier
ใส่ JavaScript ในหน้าเว็บด้วยแท็ก script แบบ defer และแบบ module
ใช้ Console ใน DevTools ทดลองโค้ด และอ่าน Error Message
Lab: หน้าเว็บแรกที่ทักทายผู้ใช้และแสดงวันที่ปัจจุบัน

Section 2: ตัวแปร ชนิดข้อมูล และตัวดำเนินการ

ประกาศตัวแปรด้วย const และ let และเหตุผลที่ไม่ใช้ var ในโค้ดใหม่
ชนิดข้อมูล number, string, boolean, null, undefined และการใช้ typeof
Template Literal สำหรับแทรกค่าลงในข้อความ
ตัวดำเนินการคณิตศาสตร์ การเปรียบเทียบด้วย === ตรรกะ และ ??
Lab: โปรแกรมคำนวณราคาสินค้าพร้อมส่วนลดและ VAT

Section 3: Lab: เงื่อนไขและการวนซ้ำ

if, else if, else และ switch
Ternary Operator และค่า Truthy กับ Falsy
Loop แบบ for, while และ for...of
break และ continue ในการควบคุมลูป
Workshop: เกมทายตัวเลขที่บอกใบ้ว่ามากไปหรือน้อยไป

Section 4: ฟังก์ชันและขอบเขตของตัวแปร

Function Declaration และ Arrow Function
Parameter, ค่าเริ่มต้น และการคืนค่าด้วย return
Block Scope และ Function Scope ของตัวแปร
ส่งฟังก์ชันเป็น Callback เบื้องต้น
Lab: ชุดฟังก์ชันตรวจเกรดและแปลงหน่วยที่เรียกใช้ซ้ำได้

Section 5: Array, Object และ JSON

สร้างและแก้ไข Array ด้วย push, pop, includes และ indexOf
วนและแปลงข้อมูลด้วย forEach, map, filter, find และ reduce
Object Literal, Property, Method และ Destructuring เบื้องต้น
แปลงข้อมูลไปมาระหว่าง Object และ JSON
Lab: รายการสินค้าในตะกร้าพร้อมคำนวณยอดรวม

Day 2 DOM, Event และเว็บแอปแรก

Section 6: Lab: จัดการหน้าเว็บผ่าน DOM

DOM คืออะไร และการเลือกองค์ประกอบด้วย querySelector
เปลี่ยนข้อความด้วย textContent และสไตล์ด้วย classList
สร้าง เพิ่ม และลบองค์ประกอบด้วย createElement และ append
ความเสี่ยงของ innerHTML กับข้อมูลจากผู้ใช้ และวิธีป้องกัน XSS
Lab: แสดงรายการสินค้าจาก Array เป็นการ์ดบนหน้าเว็บ

Section 7: Lab: รับ Event จากผู้ใช้

addEventListener กับ Event click, input, change และ keydown
Event Object และ preventDefault
Event Delegation สำหรับรายการที่เพิ่มขึ้นภายหลัง
ทำปุ่มและเมนูให้ใช้งานด้วยคีย์บอร์ดได้
Lab: To-do List ที่เพิ่ม ทำเครื่องหมาย และลบรายการได้

Section 8: ฟอร์มและการตรวจข้อมูล

อ่านค่าจากฟอร์มด้วย FormData และ Event submit
ใช้การตรวจข้อมูลในตัวของ HTML อย่าง required และ pattern
ตรวจเงื่อนไขเพิ่มเติมด้วย JavaScript และแสดงข้อความแจ้งผู้ใช้
Lab: ฟอร์มสมัครสมาชิกที่ตรวจข้อมูลก่อนส่ง

Section 9: Lab: Fetch API, async/await และการเก็บข้อมูล

งานแบบ Asynchronous และ Promise เบื้องต้น
ดึงข้อมูล JSON จาก API ด้วย fetch และ async/await
จัดการ Error และสถานะกำลังโหลดด้วย try และ catch
เก็บและอ่านข้อมูลด้วย localStorage
แยกโค้ดเป็นหลายไฟล์ด้วย import และ export ของ ES Modules

Section 10: Workshop: เว็บแอปจัดการรายการของตัวเอง

หาจุดผิดด้วย Breakpoint ใน DevTools
ใช้ AI Assistant ช่วยอธิบายโค้ด พร้อมตรวจผลด้วยตัวเองทุกครั้ง
Workshop: แอปบันทึกรายรับรายจ่ายที่เพิ่ม ลบ ค้นหา และเก็บข้อมูลได้
นำเสนอผลงาน และแนวทางต่อยอดสู่ Advanced JavaScript, React หรือ Vue

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

DOM คืออะไร ใช้ JavaScript เปลี่ยนเนื้อหาบนหน้าเว็บอย่างไร

DOM (Document Object Model) คือโครงสร้างของหน้าเว็บที่เบราว์เซอร์สร้างเป็นต้นไม้ของออบเจกต์ให้ JavaScript อ่านและแก้ไขได้ เริ่มจากเลือกองค์ประกอบด้วย document.querySelector() จากนั้นเปลี่ยนข้อความด้วย textContent เปลี่ยนสไตล์ผ่าน classList และสร้างองค์ประกอบใหม่ด้วย createElement() แล้วเพิ่มลงหน้าด้วย append() ควรหลีกเลี่ยงการนำข้อมูลจากผู้ใช้ใส่ใน innerHTML โดยตรงเพื่อป้องกัน XSS

var let และ const ใน JavaScript ต่างกันอย่างไร

var เป็นวิธีประกาศตัวแปรแบบเดิม มีขอบเขตระดับฟังก์ชันและประกาศซ้ำได้ จึงเกิดบั๊กง่าย ส่วน let มีขอบเขตเฉพาะในบล็อก { } ที่ประกาศและเปลี่ยนค่าได้ ขณะที่ const มีขอบเขตระดับบล็อกเช่นกันแต่กำหนดค่าใหม่ไม่ได้ โค้ดปัจจุบันจึงใช้ const เป็นหลักและใช้ let เมื่อค่าต้องเปลี่ยน เช่น ตัวนับในลูป หลักสูตรนี้ใช้ const และ let ตลอดทั้งหลักสูตร

ทำให้ปุ่มบนหน้าเว็บทำงานเมื่อคลิกด้วย JavaScript ทำอย่างไร

เลือกปุ่มด้วย document.querySelector() แล้วผูกฟังก์ชันกับเหตุการณ์คลิกด้วย addEventListener('click', ฟังก์ชัน) จากนั้นเขียนคำสั่งที่ต้องการในฟังก์ชันนั้น เช่น เปลี่ยนข้อความ ซ่อนหรือแสดงกล่องข้อความ ถ้าเป็นฟอร์มให้รับเหตุการณ์ submit ของฟอร์มและเรียก event.preventDefault() เพื่อตรวจข้อมูลก่อนส่ง และควรใช้แท็ก button จริงเพื่อให้กดด้วยคีย์บอร์ดได้

หลักสูตร Basic JavaScript เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้เริ่มต้นที่อยากเริ่มเขียนโปรแกรมด้วย JavaScript ผู้ที่เขียน HTML และ CSS ได้แล้วและอยากให้หน้าเว็บโต้ตอบได้ นักศึกษา Developer จากภาษาอื่น และ IT Manager ไม่จำเป็นต้องเคยเขียนโปรแกรมมาก่อน ขอเพียงใช้คอมพิวเตอร์และเว็บเบราว์เซอร์ได้ ถ้าเข้าใจ HTML และ CSS มาบ้างจะช่วยให้เรียนได้ง่ายขึ้น

เรียนจบหลักสูตร Basic JavaScript แล้วทำอะไรได้บ้าง

เขียน JavaScript ด้วย const และ let เงื่อนไข ลูป และฟังก์ชัน จัดการข้อมูลด้วย Array, Object และ JSON ควบคุมหน้าเว็บผ่าน DOM และ Event ตรวจข้อมูลในฟอร์ม ดึงข้อมูลจาก API ด้วย Fetch และ async/await และเก็บข้อมูลด้วย localStorage โดยมีเว็บแอปจาก Workshop เป็นผลงาน พร้อมต่อยอดสู่ Advanced JavaScript, React หรือ Vue ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Basic JavaScript ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกเพิ่มการตรวจฟอร์มหรือการดึงข้อมูลให้หน้าเว็บที่ทีมดูแลอยู่ ขอข้อเสนอการจัดอบรมได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449