Event onfocusout ทริกเกอร์เมื่อ Element สูญเสีย Focus (Blur) — Bubbles (ต่างจาก onblur ที่ไม่ Bubble) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Write below:</p> <p>After losing focus, the background color of input check will change.</p> &l

Event oninput ทริกเกอร์ ทันทีที่ค่าใน Input เปลี่ยนแปลง (Real-time) ต่างจาก onchange ที่รอจน Blur/Enter ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Write below:</p> <input type=text id=newInput oninput=inputFunc()> <p id=demo></p>

ใช้ Property borderImageWidth เพื่อตั้งค่าความกว้างของ Border Image (รูปภาพเป็นขอบ) แทน Border ธรรมดา ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { background-color: gray; border: 40px solid; border-image: url(https://www.tutori

Event oninvalid ทริกเกอร์เมื่อ Form Field ไม่ผ่าน Validation (HTML5 Constraint Validation) เช่น Required Field ว่าง, Pattern ไม่ตรง, Type ไม่ตรง — ก่อน Submit ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <script> function resetFunct() { alert(The form was r

Event onabort ทริกเกอร์เมื่อ การโหลดรูปภาพถูกยกเลิก (Aborted) ก่อนโหลดเสร็จ เช่น User กด Stop, Network Error, หรือ JavaScript ยกเลิก ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <script> function abortFunc() { alert(Error - Loading of the image aborted);

ใช้ clearTimeout() เพื่อยกเลิก Timer ที่ตั้งไว้ด้วย setTimeout() ก่อนที่จะทำงาน ตัวอย่างโค้ด: Animation Start/Stop <html> <head> <title>JavaScript clearTimeout() method</title> <script> var imgObj = null; var animateId; // เก็บ Timer ID

Event onhashchange ทริกเกอร์เมื่อ Hash Fragment (ส่วนหลัง #) ของ URL เปลี่ยนแปลง ใช้สำหรับ SPA Routing, Deep Linking, In-page Navigation ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onhashchange=newFunc()> <button onclick=functionChange()>Click to change anchor</button

Event onpageshow ทริกเกอร์เมื่อ หน้าแสดงขึ้น รวมถึงโหลดครั้งแรก และเมื่อRestore จาก Back-Forward Cache (bfcache) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onpageshow=newFunc()> <p>On first visit, a welcome message is visible.</p> <script> function

Event onbeforeunload ทริกเกอร์ ก่อนที่หน้าจะ Unload ใช้แสดง Dialog ยืนยันให้ผู้ใช้ (เช่น คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก ต้องการออกหรือไม่?) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onbeforeunload=return myFunction()> <a href=https://www.qries.com>Click to open

Event onpagehide ทริกเกอร์เมื่อ ผู้ใช้ออกจากหน้า เช่น คลิกลิงก์ กด Back/Forward รีเฟรช ปิด Tab — รองรับ Back-Forward Cache (bfcache) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onpagehide=newFunc()> <p>Close the page and see what happens!</p> <script>

Event onscroll (หรือ scroll) ทริกเกอร์เมื่อ Scrollbar ถูกเลื่อน ภายใน Element ที่มี Overflow (รวม Window) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; width: 300px; height: 100px; overflow: scrol

Event onresize (หรือ resize) ทริกเกอร์เมื่อ ขนาด Browser Window เปลี่ยนแปลง ใช้ window.outerWidth/Height (ขนาด Browser ทั้งหมด) หรือ window.innerWidth/Height (ขนาด Viewport) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <script> function resizeFunction() { v

Property document.title ใช้ อ่าน และ ตั้งค่า Title ของเอกสาร (แสดงบน Browser Tab/Title Bar) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>Demo Title</title> </head> <body> <script> // อ่าน Title var x = document.title;

Event onunload ทริกเกอร์เมื่อผู้ใช้ ปิดหน้า/แท็บ รีเฟรชหน้า หรือ นำทางไปหน้าอื่น ใช้สำหรับ Cleanup หรือ Analytics สุดท้าย ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onunload=newFunc()> <p>Close the page and see what happens!</p> <p>This event may give un

Property document.forms คืนค่า HTMLCollection ของ Element <form> ทั้งหมดในเอกสาร ใช้ .length เพื่อนับจำนวน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>JavaScript Example</title> </head> <body> <h1>Employee Information</h1&

ใช้ Math.random() ร่วมกับ Math.floor() สูตรมาตรฐานสำหรับช่วง Min ถึง Max (Inclusive) สูตร Math.floor(Math.random() * (max - min + 1)) + min สำหรับ 1 ถึง 200: Math.floor(Math.random() * 200) + 1 ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <script> document.write(M

ใช้ window.location.protocol เพื่อดึง Protocol ของ URL ปัจจุบัน จะคืนค่า http: หรือ https: (มี Colon ต่อท้าย) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <script> document.write(Protocol: + window.location.protocol); </script> </body> </html&

Object window.screen (หรือ screen) ให้ข้อมูลเกี่ยวกับหน้าจอของผู้ใช้ นี่คือ Properties หลัก: Propertyความหมายค่าตัวอย่าง screen.widthความกว้างหน้าจอ (px)1920 screen.heightความสูงหน้าจอ (px)1080 screen.availWidthความกว้างพื้นที่ใช้งาน (ลบ Taskbar/Dock)1920 screen.availH

Property document.images คืนค่า HTMLCollection ของ Element <img> ทั้งหมดในเอกสาร ใช้ .length เพื่อนับจำนวน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>JavaScript Example</title> </head> <body> <h1>TutorialsPoint Tutorials<

Property document.links คืนค่า HTMLCollection ของ Element ทั้งหมดที่มี href Attribute ได้แก่ <a> และ <area> ใช้ .length เพื่อนับจำนวน ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>JavaScript Example</title> </head> <body> <p