Scroll Event เกิดขึ้นเมื่อผู้ใช้เลื่อน Scrollbar ของหน้าเว็บหรือองค์ประกอบที่มี Overflow เป็น Scroll/auto ใช้สำหรับ Infinite Scroll, Lazy Loading, Sticky Header, Parallax Effects ฯลฯ ตัวอย่างพื้นฐาน: ตรวจจับ Scroll บน Window { const scrollY = window.scrollY || window.pageYOffset;

Load Events ควบคุมจุดเวลาต่างๆ ของการโหลดหน้าเว็บ มี 4 เหตุการณ์หลัก ที่เกิดขึ้นตามลำดับ ลำดับเหตุการณ์โหลดหน้า DOMContentLoaded - DOM Tree สร้างเสร็จ (HTML Parse เสร็จ) แต่ External Resources (CSS, Images, Fonts) ยังโหลดไม่เสร็จ load - ทุกอย่างโหลดเสร็จแล้ว (HTML, CSS, JS, Images, Fonts,

Focus Events เกิดขึ้นเมื่อองค์ประกอบได้รับหรือสูญเสียโฟกัส (Focus) มี 4 เหตุการณ์หลัก ซึ่งแตกต่างกันที่ การกระจาย (Propagation) และ ลำดับการยิง ประเภท Focus Events เหตุการณ์คำอธิบายBubbles focusเกิดเมื่อองค์ประกอบได้รับโฟกัส❌ ไม่ blurเกิดเมื่อองค์ประกอบสูญเสี

ทั้ง preventDefault() และ return false ใช้หยุดพฤติกรรมเริ่มต้นของเบราว์เซอร์ (Default Behavior) แต่ทำงานต่างกันในรายละเอียด ความแตกต่างหลัก คุณสมบัติpreventDefault()return false หยุด Default Behavior✅ ใช่✅ ใช่ หยุด Event Propagation (Bubbling)❌ ไม่✅ ใช่ (ใน I

คุณสมบัติ location.protocol ใช้สำหรับอ่านหรือตั้งค่าโปรโตคอล (Protocol) ของ URL ปัจจุบัน เช่น http:, https:, file: รวมถึงเครื่องหมาย Colon (:) ด้วย คุณสมบัติของ Location Object คุณสมบัติตัวอย่างคำอธิบาย hrefhttps://example.com/path?query=1#hashURL เต็ม protoc

ฟีเจอร์ Same as above (เหมือนข้างบน) พบได้บ่อยในฟอร์มที่มีที่อยู่ Bill-to / Ship-to ให้ผู้ใช้กรอกที่อยู่ครั้งเดียวแล้วกดปุ่มคัดลอกไปอีกช่อง ตัวอย่าง: คัดลอกค่าจาก Input แรกไป Input ที่สอง { // คัดลอกค่าจาก input ตัวแรก [0] ไปตัวที่สอง [1] addrEle[1].value = addrEle[0].value

Auto-resize Textarea ทำให้ความสูงของ Textarea ปรับตัวตามเนื้อหาอัตโนมัติ ทำให้ผู้ใช้เห็นข้อความทั้งหมดโดยไม่ต้องเลื่อน Scroll ภายใน Textarea หลักการทำงาน ฟัง Event input (เกิดทุกครั้งที่เนื้อหาเปลี่ยน) ตั้งค่า height = auto เพื่อคำนวณขนาดจริง ตั้งค่า height = scrollHeight + px ให้เท่าก

การสลับค่า Boolean (True ↔ False) เป็นการทำงานพื้นฐานที่ใช้บ่อย สามารถทำได้หลายวิธี ซึ่งง่ายที่สุดคือใช้ตัวดำเนินการ NOT (!) วิธีการสลับค่า Boolean 1. ใช้ Logical NOT (!) - วิธีมาตรฐานและเร็วที่สุด let boolVal = true; boolVal = !boolVal; // false boolVal = !boolVal; // true 2. ใช้ XOR (^) กับ 1 l

สามารถทำให้ Iframe ขยายเต็มหน้าจอได้โดยการเปลี่ยน Class CSS ให้มีขนาด 100vw x 100vh หรือใช้ Fullscreen API อย่างเป็นทางการ วิธีที่ 1: เปลี่ยน Class CSS (Simple) { isFullscreen = !isFullscreen; frameEle.className = isFullscreen ? frame fullScreen : frame; BtnEle.

สามารถป้องกันไม่ให้ปุ่มลูกศร (Arrow Keys) ทำงานใน Textarea ได้โดยใช้ Event keydown และ preventDefault() เมื่อตรวจพบ Key Code ของปุ่มลูกศร Key Codes ของปุ่มลูกศรและปุ่มอื่นๆ ที่เกี่ยวข้อง ปุ่มKey Codee.key (Modern) Space32 Left Arrow37ArrowLeft Up Arr

ปัญหาที่พบบ่อย: พยายามดึงค่าจาก <div> ด้วย .value แล้วได้ undefined เพราะ <div> ไม่มีคุณสมบัติ value (มีเฉพาะ Form Elements เช่น <input>, <textarea>, <select>) วิธีแก้: ใช้ innerHTML หรือ textContent คุณสมบัติคำอธิบาย innerHTMLได้ HTML ภ

ใน JavaScript สามารถ เขียนทับ (Override) คุณสมบัติที่สืบทอดมาจาก Prototype ได้โดยการกำหนดค่าใหม่ให้กับ Instance โดยตรง ซึ่งจะสร้าง Own Property บน Instance เอง ทำให้ Prototype Property ถูกบัง (Shadowing) ตัวอย่าง: Override Properties ที่สืบทอดมาจาก Prototype { // Override: สร้าง Own Pr

Symbol เป็นชนิดข้อมูล Primitive (Primitive Type) ใหม่ที่เพิ่มเข้ามาใน ES2015 (ES6) มีลักษณะเฉพาะคือ ค่าทุกตัวไม่ซ้ำกันทุกครั้งที่สร้าง แม้จะใช้คำอธิบาย (Description) เดียวกันก็ตาม ลักษณะสำคัญของ Symbol สร้างด้วย Symbol() (ไม่ใช่ Constructor ไม่มี new) ค่าแต่ละตัว Unique ไม่ซ้ำกันแน่นอน

JavaScript เป็นภาษาที่พัฒนาจาก Prototype-based Programming การสืบทอด (Inheritance) ทำงานผ่าน Prototype Chain โดยออบเจ็กต์จะสืบทอดคุณสมบัติและเมธอดจาก Prototype ของมัน ตัวอย่าง: สืบทอดด้วย Prototype { let person1 = new Person(Rohan, 22, Delhi); person1.welcome();

คุณสมบัติ lastIndex ของออบเจ็กต์ RegExp ใช้เก็บตำแหน่งดัชนี (Index) ที่จะเริ่มค้นหาครั้งต่อไป ทำงานเฉพาะเมื่อตั้งค่า Flag g (Global) เท่านั้น ลักษณะการทำงาน เริ่มต้นที่ 0 หลังจาก test() หรือ exec() พบค่าตรง → อัปเดตเป็นตำแหน่งหลังค่าที่พบ ถ้าไม่พบ → รีเซ็ตกลับเป็น 0 สามารถกำหนดค่าเ

สามารถใช้เมธอด match() ร่วมกับ Regular Expression ที่มี Flag g (Global) เพื่อหาค่าที่ตรงกับรูปแบบทั้งหมดในสตริง แล้วนำไปวนลูปประมวลผลต่อได้ ตัวอย่าง: หาคำที่ลงท้ายด้วย at { resEle.innerHTML += `${index + 1}. พบคำที่ลงท้าย at → ${element} <br>`; });

JavaScript Modules (ES Modules) ถูกนำเข้ามาใน ES2015 (ES6) เพื่อช่วยจัดระเบียบโค้ดโดยแบ่งเป็นไฟล์เล็กๆ ที่สามารถนำกลับมาใช้ซ้ำได้ ใช้คีย์เวิร์ด export เพื่อส่งออก และ import เพื่อนำเข้า คุณสมบัติหลัก ทำงานในโหมด Strict Mode โดยอัตโนมัติ แต่ละโมดูลมี Scope ของตัวเอง (ไม่มลัทธตัวแปร Global)

Async Functions ถูกนำเข้ามาใน ES2017 (ES8) เพื่อให้เขียนโค้ด Asynchronous ได้ง่ายขึ้น ใช้คีย์เวิร์ด async ก่อนฟังก์ชัน และ await ภายในเพื่อรอ Promise ให้เสร็จสิ้น ทำให้โค้ดอ่านเหมือน Synchronous Code ไวยากรณ์พื้นฐาน { let result = await somePromise(); return result; }; ตัวอย่าง: ใช้ async

Keyboard Events เกิดขึ้นเมื่อผู้ใช้โต้ตอบกับคีย์บอร์ด มีหลัก 3 ประเภทหลัก ได้แก่ keydown, keypress (ล้าสมัย), และ keyup ประเภทของ Keyboard Events เหตุการณ์คำอธิบาย keydownเกิดเมื่อกดปุ่มค้างอยู่ (ทำซ้ำได้ถ้าค้างนาน) keypressเกิดเมื่อกดปุ่มที่สร้างตัวอักษรได้

Touch Events เป็นเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้โต้ตอบกับหน้าจอสัมผัส (Touchscreen) เช่น โทรศัพท์มือถือ แท็บเล็ต หรือแล็ปท็อปที่มีหน้าจอสัมผัส ประเภทของ Touch Events เหตุการณ์คำอธิบาย touchstartเกิดเมื่อวางนิ้วบนพื้นที่สัมผัส touchmoveเกิดเมื่อเลื่อนนิ้วบนพื้