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

Basic JavaScript ES6+ and jQuery

หลักสูตร Basic JavaScript ES6+ and jQuery เป็นการอบรมปูพื้นฐาน JavaScript สมัยใหม่ตั้งแต่ ES6 ทั้งฟังก์ชัน Array และ Object, Class, Module, DOM และการเรียก API ด้วย async/await แล้วต่อด้วย jQuery 4 และ jQuery UI สำหรับดูแลระบบเดิม เหมาะกับนักศึกษา ครูอาจารย์ และนักไอทีที่มีพื้นฐาน HTML และ CSS

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

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

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

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

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

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

JavaScript เป็นภาษาหลักของหน้าเว็บทุกหน้า และพัฒนาขึ้นมากตั้งแต่ ES6 ทำให้ความสามารถหลายอย่างที่เคยต้องพึ่ง jQuery เช่น การเลือกและแก้ไข DOM การจัดการ Event และการเรียก API ทำได้ด้วย JavaScript มาตรฐานแล้ว อย่างไรก็ตาม เว็บไซต์ ระบบภายในองค์กร และปลั๊กอินจำนวนมากยังใช้ jQuery อยู่ และ jQuery 4 ที่ออกในปี 2026 ได้ตัด API เก่าออกหลายตัว นักพัฒนาจึงควรเข้าใจทั้ง JavaScript สมัยใหม่และ jQuery เพื่อเขียนงานใหม่และดูแลระบบเดิมได้

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ที่เริ่มจาก JavaScript สมัยใหม่ตั้งแต่ ES6 เป็นหลัก ทั้งตัวแปร ฟังก์ชัน Array และ Object, Class, ES Modules, DOM, Event, Promise, async/await และ Fetch API แล้วจึงต่อด้วย jQuery 4 และ jQuery UI พร้อมเปรียบเทียบกับ JavaScript มาตรฐาน และปิดท้ายด้วย Workshop ย้ายโค้ด jQuery รุ่นเก่ามาใช้ jQuery 4 หรือ JavaScript มาตรฐาน (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

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

เขียน JavaScript ด้วยไวยากรณ์สมัยใหม่ตั้งแต่ ES6 ได้อย่างถูกต้อง
จัดการข้อมูลด้วย Array, Object, Map และ Set และแยกโค้ดด้วย Class และ ES Modules ได้
จัดการ DOM และ Event ด้วย JavaScript มาตรฐานได้
เรียก API ด้วย Fetch API และ async/await พร้อมจัดการข้อผิดพลาดได้
ใช้ jQuery 4 และ jQuery UI จัดการ DOM, Event, Ajax และ Widget ได้
ตัดสินใจได้ว่าเมื่อใดควรใช้ jQuery และย้ายโค้ด jQuery เดิมสู่แนวทางใหม่ได้

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

นักเรียนนักศึกษาที่ต้องการปูพื้นฐาน JavaScript ให้ทันมาตรฐานปัจจุบัน
ครู อาจารย์ และวิทยากรที่สอนการเขียนเว็บ
นักไอทีหรือผู้ดูแลระบบที่ต้องดูแลเว็บหรือระบบเดิมที่ใช้ jQuery
นักออกแบบเว็บที่เขียน HTML และ CSS ได้และอยากเพิ่มการโต้ตอบให้หน้าเว็บ

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

มีพื้นฐานการออกแบบเว็บไซต์มาบ้าง เข้าใจ HTML และ CSS เบื้องต้น
ไม่จำเป็นต้องเขียน JavaScript มาก่อน
ใช้งานคอมพิวเตอร์และเบราว์เซอร์ได้คล่อง

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic JavaScript ES6 and jQuery เนื้อหาเขียนใหม่ให้ JavaScript สมัยใหม่เป็นแกนหลักและอัปเดตเป็น jQuery 4 อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Beginner ผู้เรียนจะได้เขียน JavaScript ด้วยไวยากรณ์ ES6+ จัดการ Array และ Object ใช้ Class และ ES Modules จัดการ DOM และ Event เรียก API ด้วย async/await แล้วใช้ jQuery 4 และ jQuery UI พร้อมฝึกย้ายโค้ด jQuery เดิมด้วย jQuery Migrate และรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 JavaScript สมัยใหม่ตั้งแต่ ES6

Section 1: Lab: เริ่มต้น JavaScript สมัยใหม่

JavaScript ทำงานที่ไหนบ้าง และ ECMAScript กับรุ่นต่าง ๆ ตั้งแต่ ES6
เตรียม VS Code และเปิดหน้าเว็บด้วย Live Server
ใช้ Console และ Debugger ใน Chrome DevTools
ใส่ JavaScript ในหน้าเว็บด้วย script แบบ defer และ type="module"
Lab: สคริปต์แรกที่แสดงข้อความและคำนวณค่า

Section 2: ตัวแปร ชนิดข้อมูล เงื่อนไข และลูป

let และ const แทน var และขอบเขตระดับบล็อก
ชนิดข้อมูล ตัวดำเนินการ และ Template Literal
เงื่อนไข if, switch, Ternary และ Optional Chaining (?.) กับ Nullish Coalescing (??)
ลูป for, while และ for...of
Lab: โปรแกรมคิดเกรดและส่วนลดสินค้า

Section 3: Lab: ฟังก์ชันแบบ ES6+

ประกาศฟังก์ชันและ Arrow Function
Default Parameter และ Rest Parameter
Scope, Closure และ Callback
this และ bind ในฟังก์ชันแบบปกติกับ Arrow Function
Lab: ชุดฟังก์ชันจัดรูปแบบราคาและวันที่

Section 4: Lab: Array, Object, Map และ Set

Destructuring และ Spread กับ Array และ Object
map, filter, reduce, find และ findIndex
เมธอดรุ่นใหม่ เช่น toSorted, findLast และ Object.groupBy
Map และ Set และการแปลงข้อมูลด้วย JSON
Lab: สรุปยอดขายแยกตามหมวดสินค้า

Section 5: Lab: Class และ ES Modules

Class, constructor, extends และ Getter กับ Setter
Private Field (#) และ Static Method
แยกไฟล์ด้วย export และ import
ใช้ ES Modules บนเบราว์เซอร์โดยตรง และภาพรวม Vite แทน Babel กับ Webpack
Lab: แยกโค้ดตะกร้าสินค้าเป็น Module

Day 2 DOM, API, jQuery 4 และการย้ายโค้ด

Section 6: Lab: DOM และ Event ด้วย JavaScript มาตรฐาน

โครงสร้าง DOM และเลือก Element ด้วย querySelector
แก้ข้อความ Attribute และ Style ด้วย classList
สร้างและลบ Element และ Node ลูก
addEventListener, Event Delegation และการจัดการฟอร์ม
Lab: รายการสิ่งที่ต้องทำที่เพิ่ม ลบ และกรองได้

Section 7: Lab: Promise, async/await และ Fetch API

งาน Asynchronous จาก Callback สู่ Promise
async/await และการจัดการ Error ด้วย try/catch
เรียก REST API ด้วย fetch ทั้ง GET และ POST
แสดงสถานะโหลดและข้อผิดพลาดบนหน้าเว็บ
Lab: หน้าค้นหาข้อมูลจาก API แบบสาธารณะ

Section 8: jQuery 4 ในยุคปัจจุบัน

jQuery ยังจำเป็นไหม และสถานการณ์ที่ยังเหมาะจะใช้
สิ่งที่เปลี่ยนใน jQuery 4: API ที่ถูกตัดและเบราว์เซอร์ที่รองรับ
ติดตั้ง jQuery ผ่าน CDN หรือ npm, Selector และการจัดการ DOM
จัดการ Event ด้วย .on() และ Event Delegation
เทียบคำสั่ง jQuery กับ JavaScript มาตรฐานแบบคู่ต่อคู่

Section 9: Lab: jQuery Ajax, Effects และ jQuery UI

เรียก API ด้วย $.ajax และ $.getJSON
Effects และ Animation พื้นฐาน
jQuery UI 1.14: Dialog, Datepicker, Tabs, Accordion และ Autocomplete
Menu แบบ Drop Down และการปรับ Theme ของ jQuery UI
Lab: ฟอร์มจองพร้อม Datepicker และ Dialog ยืนยัน

Section 10: Workshop: ย้ายโค้ด jQuery เดิมสู่แนวทางใหม่

ตรวจโค้ด jQuery รุ่นเก่าด้วย jQuery Migrate
แทน API ที่ถูกตัด เช่น $.trim, $.isArray และ $.parseJSON ด้วยของมาตรฐาน
อัปเกรดหน้าเว็บตัวอย่างเป็น jQuery 4
เขียนบางส่วนใหม่เป็น JavaScript มาตรฐานและเทียบผลลัพธ์
นำเสนอผลงานและแนวทางเลือกเครื่องมือสำหรับโปรเจกต์ถัดไป

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

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

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

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

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

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

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

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

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

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

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

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

Promise และ async/await ใน JavaScript ใช้ทำอะไร

Promise ใช้แทนผลลัพธ์ของงานที่ต้องรอ เช่น การเรียก API ซึ่งจะสำเร็จหรือล้มเหลวในภายหลัง ใช้เมธอด then รับผลและ catch จัดการข้อผิดพลาด แทนการซ้อน Callback หลายชั้น ส่วน async/await ทำให้โค้ดที่ใช้ Promise อ่านง่ายเหมือนทำงานทีละบรรทัด เช่น const res = await fetch(url) แล้วตามด้วย await res.json() โดยครอบด้วย try/catch เพื่อจัดการ Error และควรตรวจ res.ok ก่อนใช้ข้อมูล เพราะ fetch ไม่ถือว่าสถานะอย่าง 404 เป็นข้อผิดพลาด

jQuery กับ JavaScript ปัจจุบันต่างกันอย่างไร ยังควรใช้ jQuery อยู่ไหม

jQuery เกิดมาเพื่อให้เขียนเลือกและแก้ DOM จัดการ Event และเรียก AJAX ได้สั้นและทำงานเหมือนกันทุกเบราว์เซอร์ เช่น $('.btn').on('click', handler) ปัจจุบัน JavaScript มาตรฐานทำได้ใกล้เคียงกันแล้วด้วย querySelector, addEventListener, classList และ fetch โปรเจกต์ใหม่จึงมักไม่ใช้ jQuery แต่ยังพบได้มากในเว็บ ระบบภายใน และปลั๊กอินเดิม jQuery 4 ที่ออกในปี 2026 ยังได้รับการดูแลต่อ แต่ตัด API เก่าหลายตัว การเข้าใจทั้งสองแบบจึงช่วยดูแลระบบเก่าและย้ายโค้ดมาใช้แบบใหม่ได้

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

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

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

เขียน JavaScript พื้นฐานด้วยไวยากรณ์ ES6+ ทั้งเงื่อนไข ลูป ฟังก์ชัน Arrow Function, Destructuring, Spread, Class และ ES Modules จัดการข้อมูลด้วย map, filter, reduce, Map และ Set จัดการ DOM และ Event ด้วย JavaScript มาตรฐาน เรียก API ด้วย fetch และ async/await ใช้ jQuery 4 กับ jQuery UI และอัปเกรดโค้ด jQuery เดิมด้วย jQuery Migrate ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

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

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