ตัวอย่าง Snackbar หรือ Toast คือข้อความแจ้งเตือนชั่วคราวที่แสดงที่มุมล่างของหน้าจอ ให้ใช้ CSS animation และ JavaScript setTimeout เพื่อควบคุมการแสดงผล <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" />

ตัวอย่าง หากต้องการสร้างหน้าต่างเต็มจอด้วย JavaScript ให้ใช้ requestFullscreen() พร้อมกับ vendor prefixes เพื่อรองรับเบราว์เซอร์ต่างๆ <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> &l

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์การวาดเส้น SVG ตามการเลื่อนหน้าจอ ให้ใช้ stroke-dasharray และ stroke-dashoffset ร่วมกับ scroll event <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

ตัวอย่าง หากต้องการสร้างส่วนหัวที่ติดตามเมื่อเลื่อนหน้าจอ (sticky header) ให้ใช้ position: fixed ร่วมกับ JavaScript ตรวจจับตำแหน่งการเลื่อน <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style&

ตัวอย่าง หากต้องการสร้างปุ่มไลค์/ดิสไลค์ที่สลับได้ ให้ใช้ Font Awesome icons และ classList.toggle() เพื่อเปลี่ยนคลาสไอคอน <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.c

ตัวอย่าง หากต้องการสลับระหว่างการซ่อนและแสดงองค์ประกอบด้วย JavaScript ให้ตรวจสอบค่า style.display แล้วเปลี่ยนระหว่าง none และ block <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

ตัวอย่าง หากต้องการสลับข้อความด้วย JavaScript ให้ใช้เงื่อนไขตรวจสอบข้อความปัจจุบัน แล้วเปลี่ยนเป็นข้อความใหม่ หรือกลับมาเป็นข้อความเดิม <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

ตัวอย่าง หากต้องการสลับระหว่างการเพิ่มและลบชื่อคลาสจากองค์ประกอบด้วย JavaScript ให้ใช้เมธอด classList.toggle() ซึ่งจะเพิ่มคลาสหากไม่มีอยู่ และลบออกหากมีอยู่แล้ว <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&quo

ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    .newStyle {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    

ฟังก์ชัน Array.reverse() ใน JavaScript กลับลำดับขององค์ประกอบในอาร์เรย์ โค้ดตัวอย่างสำหรับฟังก์ชัน array reverse() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=de

เมธอด Array.join() ใน JavaScript ใช้สำหรับแปลงองค์ประกอบอาร์เรย์แต่ละตัวเป็นสตริง โค้ดตัวอย่างสำหรับเมธอด Array.join() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt

Symbol.isConcatSpreadable ใช้ระบุว่าอาร์เรย์ซ้อนควรถูกแบน (flatten) เป็นองค์ประกอบอาร์เรย์แต่ละตัวหรือไม่ เมื่อใช้เมธอด Array.prototype.concat() โค้ดตัวอย่างสำหรับ Symbol.isConcatSpreadable symbol ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset

ฟังก์ชัน Symbol.keyFor() ใน JavaScript ใช้สำหรับค้นหาคีย์ที่เชื่อมโยงกับสัญลักษณ์ที่กำหนด คีย์จะถูกดึงมาจากรีจิสทรีสัญลักษณ์กลาง (global symbol registry) โค้ดตัวอย่างสำหรับ Symbol.keyFor() function ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charse

เมธอด Symbol.toString() ใน JavaScript คืนค่ารูปแบบสตริงของอ็อบเจ็กต์สัญลักษณ์ (symbol object) ที่ระบุ โค้ดตัวอย่างสำหรับเมธอด Symbol.toString() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport

ฟังก์ชัน Array.shift() ใน JavaScript ลบองค์ประกอบแรกออกจากอาร์เรย์ โค้ดตัวอย่างสำหรับฟังก์ชัน array shift() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi

เมธอด Array.slice() ใน JavaScript คืนค่าอาร์เรย์ใหม่ขององค์ประกอบที่เลือกในอาร์เรย์ที่ใหญ่กว่า มัน ไม่เปลี่ยนแปลง อาร์เรย์ต้นฉบับ โค้ดตัวอย่างสำหรับเมธอด array slice() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <

ฟังก์ชัน Array.some() ใน JavaScript ตรวจสอบว่ามีองค์ประกอบบางส่วนของอาร์เรย์ที่ผ่านการทดสอบที่กำหนดหรือไม่ การทดสอบนี้เป็นฟังก์ชันที่รันสำหรับแต่ละองค์ประกอบของอาร์เรย์ โค้ดตัวอย่างสำหรับเมธอด array some() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <met

เมธอด array.entries() ใน JavaScript คืนค่าคู่คีย์/ค่า (key/value pairs) เป็นอ็อบเจ็กต์ iterator ของอาร์เรย์ โค้ดตัวอย่างสำหรับเมธอด array.entries() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view

ฟังก์ชัน array.flatMap() ใน JavaScript ทำให้อาร์เรย์ซ้อน (nested array) ที่กำหนดแบน (flatten) เป็นอาร์เรย์แบนใหม่ โค้ดตัวอย่างสำหรับเมธอด array.flatMap() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&quo

ฟังก์ชัน findIndex() ใน JavaScript คืนค่าดัชนี (index) ขององค์ประกอบแรกที่ตรงตามเงื่อนไขที่กำหนดในอาร์เรย์ โค้ดตัวอย่างสำหรับฟังก์ชัน array find() ดังนี้ - ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp