jQuery for Application
หลักสูตร jQuery for Application เป็นการอบรมการใช้ jQuery 4 ขั้นประยุกต์ ทั้ง Utility Function, Deferred และ Ajax การเขียน Plugin เอง การปรับประสิทธิภาพ ฟอร์มที่ตรวจข้อมูลและอัปโหลดไฟล์ และการเชื่อม REST API เหมาะกับผู้ที่ใช้ jQuery มาระยะหนึ่ง นักพัฒนาที่ดูแลระบบขององค์กร และนักศึกษาที่ทำโครงงาน
- ระยะเวลา18 ชั่วโมง · 3 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
jQuery ยังอยู่ในเว็บไซต์ ระบบหลังบ้าน และปลั๊กอินขององค์กรจำนวนมาก และ jQuery 4 ที่ออกในปี 2026 ได้ตัด API เก่าหลายตัวและเลิกรองรับเบราว์เซอร์รุ่นเก่า งานที่เคยพึ่งปลั๊กอินรุ่นเก่า เช่น jQuery Templates หรือการอัปโหลดไฟล์ผ่าน Flash ก็ไม่ควรใช้อีกแล้ว นักพัฒนาที่ดูแลระบบเหล่านี้จึงต้องใช้ jQuery ขั้นประยุกต์ให้ถูกวิธี ทำงานร่วมกับ JavaScript สมัยใหม่ และปรับโค้ดเดิมให้ปลอดภัยและเร็วขึ้น
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่สำหรับผู้ที่ใช้ jQuery มาแล้ว เริ่มจาก Utility Function, Deferred และ Ajax บน jQuery 4 การปรับแต่ง jQuery และเขียน Plugin ของตัวเอง ต่อด้วยการปรับประสิทธิภาพ การสร้าง HTML จากข้อมูล การตรวจฟอร์ม การอัปโหลดไฟล์ และฟอร์มเพิ่มแถวแบบ Dynamic แล้วใช้ jQuery UI และ REST API ในหน้าแอป ปิดท้ายด้วย Workshop ระบบจัดการข้อมูลภายในองค์กร (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Intermediate)
สิ่งที่คุณจะได้รับ
- ใช้ Utility Function, Deferred และ Ajax ของ jQuery 4 ร่วมกับ JavaScript สมัยใหม่ได้
- ปรับแต่ง jQuery ด้วย Custom Selector, Custom Speed และเขียน Plugin ของตัวเองได้
- วัดและปรับประสิทธิภาพโค้ด jQuery ด้วย Chrome DevTools ได้
- สร้างฟอร์มที่ตรวจข้อมูล อัปโหลดไฟล์ และเพิ่มแถวแบบ Dynamic ได้
- ใช้ jQuery UI และเชื่อม REST API ในหน้าแอปขององค์กรได้
- ดูแลโค้ด jQuery เดิมให้ปลอดภัยและอัปเกรดเป็น jQuery 4 ได้
หลักสูตรนี้เหมาะสำหรับ
- ผู้ที่ใช้ jQuery มาระยะหนึ่งและต้องการนำไปประยุกต์ใช้กับงานจริง
- นักพัฒนาที่ดูแลเว็บหรือระบบหลังบ้านขององค์กรที่ใช้ jQuery
- นักเรียนนักศึกษาที่ทำโครงงานคอมพิวเตอร์ด้วย jQuery
- ผู้ที่ผ่านหลักสูตร jQuery หรือ JavaScript ระดับพื้นฐานมาแล้ว
พื้นฐานของผู้เข้าอบรม
- สร้างเว็บด้วย HTML, CSS และ JavaScript ได้
- มีประสบการณ์ใช้ jQuery มาบ้าง เช่น Selector, Event และ Ajax เบื้องต้น
- ใช้งานคอมพิวเตอร์ เบราว์เซอร์ และการติดตั้งโปรแกรมได้คล่อง
หัวข้อการฝึกอบรม
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร jQuery for Application เนื้อหาเขียนใหม่ให้ใช้ jQuery 4 ร่วมกับ JavaScript สมัยใหม่ และเปลี่ยนปลั๊กอินที่เลิกพัฒนาแล้วเป็นแนวทางปัจจุบัน ต่อยอดจาก Basic JavaScript ES6+ and jQuery อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Intermediate ผู้เรียนจะได้ใช้ Utility Function, Deferred และ Ajax เขียน Plugin ของตัวเอง ปรับประสิทธิภาพโค้ด สร้างฟอร์มที่ตรวจข้อมูล อัปโหลดไฟล์ และเพิ่มแถวแบบ Dynamic ใช้ jQuery UI และ REST API แล้วรวมทุกอย่างใน Workshop ระบบจัดการข้อมูลภายในองค์กร พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ
Day 1 jQuery 4 ขั้นประยุกต์และการเขียน Plugin
Section 1: Lab: jQuery 4 ในงานจริง
- jQuery ในระบบปัจจุบัน และสิ่งที่เปลี่ยนใน jQuery 4
- ใช้ jQuery ผ่าน CDN หรือ npm และ import ใน ES Modules
- ตรวจโค้ดเดิมด้วย jQuery Migrate และอ่านคำเตือนใน Console
- เตรียมโปรเจกต์ตัวอย่างและ API บนเครื่องด้วย Node.js
- Lab: เปิดหน้าระบบเดิมแล้วหาจุดที่ต้องแก้ก่อนอัปเกรด
Section 2: Lab: Utility Function ใน jQuery 4
- $.each, $.map, $.grep, $.merge และ $.extend แบบ Deep Copy
- ตรวจชนิดข้อมูลด้วย Array.isArray และ typeof แทนฟังก์ชันที่ถูกตัด
- แทน $.parseJSON, $.trim และ $.proxy ด้วย JSON.parse, trim และ bind
- $.getScript และ $.when($.ready, ...) แทน $.holdReady
- Lab: ชุดฟังก์ชันแปลงข้อมูลสินค้าจาก JSON
Section 3: Lab: Deferred, Promise และ Ajax
- $.Deferred, $.when และการรอหลายงานพร้อมกัน
- $.ajax, $.getJSON และ $.post กับข้อมูล JSON
- ใช้ jqXHR ร่วมกับ async/await และ try/catch
- $.ajaxSetup, Ajax Event และการแสดงสถานะโหลด
- Lab: หน้ารายงานที่ดึงข้อมูลสามแหล่งพร้อมกัน
Section 4: Lab: ปรับแต่ง jQuery
- กำหนด Custom Speed ใน $.fx.speeds
- สร้าง Custom Selector ด้วย jQuery.expr.pseudos
- เพิ่ม Utility Function ของทีมเองด้วย $.extend
- ขยายหรือห่อฟังก์ชันเดิมอย่างปลอดภัยแทนการเขียนทับ
- Lab: Selector สำหรับกรองแถวที่ยังไม่บันทึกในตาราง
Section 5: Lab: เขียน jQuery Plugin ของตัวเอง
- โครงสร้าง Plugin ด้วย $.fn.extend และการคืนค่า this เพื่อ Chain
- ค่า Option เริ่มต้น การรับค่าจาก data-* และ Namespace ของ Event
- เก็บสถานะด้วย .data() และเมธอด destroy
- แยก Plugin เป็นไฟล์ Module และเขียนเอกสารการใช้งาน
- Lab: Plugin นับตัวอักษรและแจ้งเตือนในช่องข้อความ
Day 2 ประสิทธิภาพ ข้อมูล และฟอร์มขั้นสูง
Section 6: Lab: Performance ของโค้ด jQuery
- หาจุดช้าด้วยแท็บ Performance และ Console ใน Chrome DevTools
- Selector ที่เร็ว และการเก็บผลการเลือกไว้ในตัวแปร
- ลดการแก้ DOM ด้วยการรวม HTML และแทรกครั้งเดียว
- Event Delegation และ Debounce กับ Throttle
- Lab: ปรับตาราง 5,000 แถวให้กรองและเรียงได้ลื่นขึ้น
Section 7: Lab: สร้าง HTML จากข้อมูลแทน jQuery Templates
- เหตุผลที่เลิกใช้ jQuery Templates และทางเลือกในปัจจุบัน
- Template Literal และฟังก์ชันสร้างรายการจากข้อมูล
- แท็ก template ของ HTML และการ clone มาใช้งาน
- ป้องกัน XSS ด้วย .text() และการ Escape ข้อมูล
- Lab: การ์ดสินค้าแบบซ้อนหมวดจากข้อมูล JSON
Section 8: Lab: ตรวจข้อมูลฟอร์ม
- การตรวจฟอร์มของ HTML เช่น required, pattern และ type="email"
- jQuery Validation Plugin: rules, messages และตำแหน่งข้อความแจ้งเตือน
- สร้างกฎเอง เช่น เลขประจำตัวหรือรับเฉพาะตัวเลข
- ตรวจค่าซ้ำกับเซิร์ฟเวอร์ด้วย Ajax และการตรวจซ้ำฝั่งเซิร์ฟเวอร์
- Lab: ฟอร์มสมัครสมาชิกที่ตรวจข้อมูลครบทุกช่อง
Section 9: Lab: อัปโหลดไฟล์ด้วย Ajax
- FormData และการส่งไฟล์ด้วย $.ajax
- อัปโหลดทีละไฟล์และหลายไฟล์พร้อมแถบความคืบหน้า
- ลากไฟล์มาวางและแสดงภาพตัวอย่างก่อนส่ง
- ตรวจชนิดและขนาดไฟล์ทั้งฝั่งเบราว์เซอร์และเซิร์ฟเวอร์
- Lab: หน้าแนบเอกสารหลายไฟล์พร้อมสถานะของแต่ละไฟล์
Section 10: Lab: ฟอร์มเพิ่มแถวแบบ Dynamic
- เพิ่มและลบแถวจาก template พร้อมจัดลำดับชื่อช่องใหม่
- คำนวณยอดรวมทันทีเมื่อแก้ค่าในแถว
- ตรวจข้อมูลทุกแถวก่อนบันทึก
- ส่งข้อมูลหลายแถวเป็น JSON และรับข้อมูลที่ฝั่งเซิร์ฟเวอร์
- Lab: ใบเสนอราคาที่เพิ่มรายการสินค้าได้ไม่จำกัด
Day 3 UI ของแอป, API และ Workshop
Section 11: Lab: Image Slider และ Lightbox
- สไลด์ภาพด้วย CSS Scroll Snap และปุ่มควบคุมด้วย jQuery
- Lightbox ด้วยแท็ก dialog และการรองรับคีย์บอร์ด
- โหลดภาพแบบ Lazy Loading และขนาดภาพที่เหมาะกับจอ
- เกณฑ์เลือกปลั๊กอินภายนอกที่ยังได้รับการดูแล
- Lab: แกลเลอรีสินค้าพร้อมภาพขยาย
Section 12: Lab: jQuery UI 1.14 ในหน้าแอป
- Autocomplete ที่ดึงข้อมูลจาก API
- Sortable สำหรับจัดลำดับรายการและบันทึกลำดับ
- Dialog สำหรับยืนยันและฟอร์มแก้ไขข้อมูล
- Datepicker และการปรับ Theme ให้เข้ากับระบบ
- Lab: หน้าจัดลำดับงานที่ลากวางและบันทึกได้
Section 13: Lab: เชื่อม REST API และ Web Service
- CRUD ผ่าน REST API ด้วย GET, POST, PUT และ DELETE
- ส่ง Header และ Token ในคำขอ
- แบ่งหน้า ค้นหา และกรองข้อมูลจาก API
- จัดการ Error, Timeout และ CORS เบื้องต้น
- Lab: หน้ารายชื่อลูกค้าที่เพิ่ม แก้ไข และลบได้
Section 14: ความปลอดภัยและการดูแลโค้ด jQuery เดิม
- XSS จาก .html() และการแทรกข้อมูลผู้ใช้
- โหลด jQuery จาก CDN พร้อม Subresource Integrity
- ตรวจเวอร์ชันและช่องโหว่ของปลั๊กอินที่ใช้อยู่
- อัปเกรดเป็น jQuery 4 ทีละขั้นด้วย jQuery Migrate
- แนวทางทยอยเปลี่ยนบางส่วนเป็น JavaScript มาตรฐาน
Section 15: Workshop: ระบบจัดการข้อมูลภายในองค์กร
- ออกแบบหน้ารายการ ค้นหา และฟอร์มบันทึกข้อมูล
- ใช้ Plugin ของตัวเอง ฟอร์มเพิ่มแถว และการตรวจข้อมูล
- แนบไฟล์ประกอบและแสดงสถานะการอัปโหลด
- เชื่อม REST API และตรวจประสิทธิภาพก่อนส่งงาน
- นำเสนอผลงานและแนวทางนำไปใช้ในหน่วยงาน
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
jQuery Plug-in คืออะไร ติดตั้งและใช้งานอย่างไร
jQuery Plug-in คือโค้ดเสริมที่เพิ่มเมธอดใหม่ให้ jQuery เช่น ตรวจฟอร์ม เลือกวันที่ หรือจัดลำดับรายการ วิธีใช้คือโหลด jQuery ก่อน แล้วจึงโหลดไฟล์ JavaScript และ CSS ของ Plug-in ผ่าน CDN หรือติดตั้งด้วย npm จากนั้นเลือก Element ด้วย Selector แล้วเรียกเมธอดพร้อมส่งค่าตั้งค่าเป็นออบเจกต์ เช่น $('#form').validate({...}) ก่อนเลือกใช้ควรตรวจว่ายังมีการดูแลและรองรับ jQuery 4 และเราเขียน Plug-in ของตัวเองได้ด้วย $.fn.extend
เขียน jQuery ให้ทำงานเร็วขึ้นได้อย่างไร
เริ่มจากวัดก่อนด้วยแท็บ Performance ใน Chrome DevTools เพื่อหาจุดที่ช้าจริง จากนั้นใช้ Selector ที่เจาะจงและเก็บผลการเลือกไว้ในตัวแปรแทนการเลือกซ้ำ รวม HTML ให้เสร็จก่อนแล้วแทรกลงหน้าในครั้งเดียว ใช้ Event Delegation ด้วย .on() ที่ Element แม่แทนการผูก Event กับทุกแถว และใช้ Debounce กับช่องค้นหาที่ทำงานทุกครั้งที่พิมพ์ งานบางส่วนอาจเขียนด้วย JavaScript มาตรฐานแทนได้เมื่อช่วยให้เร็วขึ้นชัดเจน
ตรวจข้อมูลในฟอร์มด้วย jQuery ก่อนส่งทำอย่างไร
ใช้การตรวจของ HTML เช่น required, pattern และ type="email" เป็นชั้นแรก แล้วใช้ jQuery Validation Plugin เมื่อต้องการกฎที่ซับซ้อนขึ้น โดยเรียก .validate() กับฟอร์ม กำหนดกฎของแต่ละช่องใน rules เช่น required, email, minlength หรือ digits และข้อความแจ้งเตือนใน messages สร้างกฎเองได้ และตรวจค่าซ้ำกับเซิร์ฟเวอร์ผ่าน Ajax ได้ แต่ฝั่งเซิร์ฟเวอร์ยังต้องตรวจข้อมูลซ้ำทุกครั้ง เพราะการตรวจในเบราว์เซอร์ถูกข้ามได้
หลักสูตร jQuery for Application เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับผู้ที่ใช้ jQuery มาระยะหนึ่งแล้วและอยากนำไปใช้กับงานจริง นักพัฒนาที่ดูแลเว็บหรือระบบหลังบ้านขององค์กร และนักเรียนนักศึกษาที่ทำโครงงานด้วย jQuery ควรสร้างเว็บด้วย HTML, CSS และ JavaScript ได้ และเคยใช้ jQuery มาบ้าง เช่น Selector, Event และ Ajax เบื้องต้น ถ้ายังไม่เคยใช้ jQuery ควรเริ่มจากหลักสูตรระดับพื้นฐานก่อน
เรียนจบหลักสูตร jQuery for Application แล้วทำอะไรได้บ้าง
ใช้ Utility Function, Deferred และ Ajax ของ jQuery 4 ร่วมกับ async/await สร้าง Custom Selector และเขียน Plugin ของตัวเอง ปรับโค้ดให้เร็วขึ้นด้วย DevTools สร้าง HTML จากข้อมูลอย่างปลอดภัย ทำฟอร์มที่ตรวจข้อมูล อัปโหลดหลายไฟล์ และเพิ่มแถวแบบ Dynamic ใช้ jQuery UI และ REST API และอัปเกรดโค้ดเดิมเป็น jQuery 4 ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
จัดอบรมหลักสูตร jQuery for Application ให้ทีมในองค์กรได้ไหม
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกกับฟอร์มหรือหน้าจัดการข้อมูลแบบที่ทีมใช้อยู่ หรืออัปเกรดหน้าระบบเดิมเป็น jQuery 4 ขอข้อเสนอการจัดอบรมได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449