ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงวิธีตรวจสอบว่าถูกคลิกหรือไม่และนับจำนวนครั้งที่คลิก: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงวิธีการเข้าถึง element พาเรนต์ (parent element) โดยใช้ JavaScript: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=

คำสั่ง WITH ใช้ระบุออบเจ็กต์เริ่มต้นสำหรับคุณสมบัติที่กำหนด ช่วยไม่ต้องเขียนอ้างอิงออบเจ็กต์ยาวๆ เพิ่มออบเจ็กต์ที่กำหนดไว้ที่หัวของ scope chain ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport"

ตัวอย่าง ใช้ parentElement.children ได้ HTMLCollection ของลูกทั้งหมด แล้ววนลูปด้วย Array.from() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo

เพื่อตรวจสอบว่าตัวแปร JavaScript โหลดแล้วหรือยัง สามารถเปรียบเทียบว่าเป็น undefined หรือ null ได้ หรือใช้ typeof() ซึ่งคืนค่าสตริงเสมอ เพื่อทราบว่าตัวแปรโหลดแล้วหรือยัง ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta

ตัวอย่าง Anonymous function (ฟังก์ชันไม่ระบุชื่อ) ที่กำหนดให้กับตัวแปร สามารถรับพารามิเตอร์ได้เหมือนฟังก์ชันทั่วไป <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, in

เมธอด window.open() ของออบเจ็กต์ window เป็นวิธีที่ดีที่สุดในการเปิดหน้าต่างเบราว์เซอร์ใหม่ด้วย JavaScript ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, i

ฟังก์ชัน eval() ใช้ประเมินค่าสตริงที่กำหนดและรันเป็นโค้ด JavaScript การใช้ eval() อันตรายมาก เนื่องจากผู้ใช้งานอาจส่งโค้ดร้ายแรงผ่านสตริงอินพุตได้ ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport&q

ตัวอย่าง ใช้ audio.currentTime ดึงเวลาปัจจุบันของการเล่นเสียง แล้วแปลงเป็นนาที/วินาทีด้วย Math.floor() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=

Lambda function (หรือ Arrow function) เป็นฟังก์ชันไม่ระบุชื่อ (anonymous) ขนาดเล็ก ที่ประกอบด้วยนิพจน์เดียว และรับพารามิเตอร์ได้หนึ่งหรือหลายตัว ช่วยให้ส่งฟังก์ชันเป็นพารามิเตอร์ให้ฟังก์ชันอื่นได้ เนื่องจากใน JavaScript ฟังก์ชันถูกถือเป็นออบเจ็กต์ จึงสามารถส่งและคืนจากฟังก์ชันอื่นเพื่อนำไปใช้ใน lamb

ตัวอย่าง ใช้ localeCompare() เพื่อจัดเรียงสตริงที่มีตัวอักษรพิเศษ/สระเสริม (accented characters) ให้ถูกต้องตามภาษา <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, in

ตัวอย่าง ใช้ canvas และ drawImage() ร่วมกับ globalAlpha เพื่อรวมหลายรูปภาพเป็นรูปเดียว <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

ตัวอย่าง ใช้ document.createElement(), createTextNode() และ appendChild() เพื่อสร้างและเพิ่มองค์ประกอบใหม่เข้าไปใน DOM <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width

ตัวอย่าง ใช้ window.getSelection().removeAllRanges() เพื่อยกเลิกการเลือกข้อความทั้งหมดในหน้า <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"

ตัวอย่าง ใช้ window.getSelection().selectAllChildren() เพื่อเลือกข้อความทั้งหมดในองค์ประกอบ และ removeAllRanges() เพื่อยกเลิกการเลือก <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wid

ตัวอย่าง ใช้ window.getSelection().toString() เพื่อดึงข้อความที่ผู้ใช้ไฮไลท์/เลือกบนหน้าเว็บ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"

ตัวอย่าง คำนวณพิกัดจุดบนเส้นรอบวงกลมด้วยสูตรคณิตศาสตร์ cos/sin แล้วเก็บในอาร์เรย์ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <

ตัวอย่าง ใช้ getElementsByTagName(a) ดึงทุกลิงก์ แล้วอ่าน offsetWidth และ offsetHeight เพื่อหาพิกัด <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0

ใช้ Event beforeunload บน window หรือ body เพื่อแจ้งเตือนผู้ใช้ก่อนออกจากหน้า/รีโหลด เมื่อมีข้อมูลในฟอร์มที่ยังไม่บันทึก สมัยใหม่ Browser แสดงข้อความมาตรฐาน (Security) ไม่ให้ Custom Message ได้แล้ว แต่ยัง Cancel ได้โดย return ค่า (Legacy) หรือ event.preventDefault() ตัวอย่างโค้ด { if (isDir

ใช้ Regular Expression /"(.*?)"/g เพื่อจับข้อความภายในเครื่องหมายคำพูดคู่ (...) แบบ Non-greedy (จับน้อยที่สุด) Flag g (Global) ใช้หาทุกคู่ที่มีในสตริง ตัวอย่างโค้ด { const text = resEle.textContent; const matches = text.match(regex); if (matches) { sampleEle.te