What is the DOM, and how do you change page content with JavaScript?

The DOM (Document Object Model) is the tree of objects the browser builds from a page, which JavaScript can read and change. Select an element with document.querySelector(), change its text with textContent and its styling through classList, and create new elements with createElement() before adding them to the page with append(). Avoid putting user input straight into innerHTML, to prevent XSS.

What is the difference between var, let and const in JavaScript?

var is the older way to declare variables: it is function-scoped and can be redeclared, which easily causes bugs. let is scoped to the block { } where it is declared and can be reassigned, while const is also block-scoped but cannot be reassigned. Modern code uses const by default and let when a value must change, such as a loop counter, and this course uses const and let throughout.

How do you make a button respond to a click with JavaScript?

Select the button with document.querySelector(), attach a function to its click event with addEventListener('click', handler), and put the actions you want inside that function, such as changing text or showing and hiding a message. For forms, listen for the form's submit event and call event.preventDefault() so you can validate first, and use a real button element so it works with the keyboard.

Who is the Basic JavaScript course for, and what should I know beforehand?

It suits beginners who want to start programming with JavaScript, people who already write HTML and CSS and want interactive pages, students, developers from other languages and IT managers. No previous programming experience is required: you just need to be comfortable with a computer and a web browser. Some HTML and CSS will make it easier.

What will I be able to do after the Basic JavaScript course?

You will be able to write JavaScript with const and let, conditions, loops and functions, work with arrays, objects and JSON, control pages through the DOM and events, validate forms, fetch data from APIs with Fetch and async/await and store data with localStorage, with the workshop web app to show for it, ready to move on to Advanced JavaScript, React or Vue. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the Basic JavaScript course be run in-house for our team?

Yes. It can be run in-house for your team, with examples adapted to your own work, such as adding form checks or data fetching to pages your team already looks after. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.

ພັດທະນາເວັບໄຊ · WDC-01-08

Basic JavaScript

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

ອັບເດດລ່າສຸດ 8 ຕ.ລ. 2026

ລາຄາເລີ່ມຕົ້ນ 4,050 ບາດ / ທ່ານ 4,500 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ ລົງຊື່ຈອງໄວ້

PDFດາວໂຫຼດ Course Outline

ໄລຍະເວລາ12 ຊົ່ວໂມງ · 2 ມື້
ຮູບແບບຢູ່ສະຖາບັນ / ອອນລາຍສົດ
ຮອບຕໍ່ໄປເປີດຕາມຄຳຂໍ
ໃບຢັ້ງຢືນມີໃບຢັ້ງຢືນ

ພາບລວມຫຼັກສູດ

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

ຮອບຝຶກອົບຮົມ ແລະ ຮູບແບບການຝຶກອົບຮົມ

ສຳລັບບຸກຄົນ — ຮອບຝຶກອົບຮົມທົ່ວໄປ

ຂະນະນີ້ຍັງບໍ່ມີຮອບຝຶກອົບຮົມເປີດຮັບສະໝັກ ລົງຊື່ຈອງໄວ້ໄດ້ເລີຍ ທີມງານຈະຕິດຕໍ່ກັບເປັນກຸ່ມທຳອິດເມື່ອເປີດຮອບຕໍ່ໄປ ຫຼື ສອບຖາມທາງ LINE ຫຼື ໂທ 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