ตัวอย่างโค้ด สร้างเอฟเฟกต์ซูมภาพแบบ Loupe (แว่นขยาย) เมื่อ hover เมาส์บนภาพ ภาพขยายจะแสดงใน container ข้างเคียง { zoomLens.style.display = none; resultEle.style.backgroundPosition = center center; }); function moveLens(e) { e.preventDefault(); co

ตัวอย่างโค้ด ใช้ Clipboard API สมัยใหม่ (navigator.clipboard.writeText()) ซึ่งเป็นมาตรฐานปัจจุบัน แทน document.execCommand(copy) ที่ล้าสมัยและถูก Deprecated { if (e.key === Enter) copyToClipboard(textInput.value); }); </script> </body> </html> การทำงาน พิมพ์ข้อคว

ตัวอย่างโค้ด สร้างกล่องค้นหาที่เมื่อคลิกปุ่มจะขยายเต็มจอภาพ (Overlay) พร้อมแอนิเมชันและปุ่มปิด { if (e.target === overlay) hideSearch(); }); </script> </body> </html> การทำงาน คลิก เปิดกล่องค้นหาเต็มจอ → Overlay แสดงเต็มจอพร้อม fade-in animation Input ได้รับ fo

Procedural Knowledge (ความรู้เชิงกระบวนการ) Procedural Knowledge หรือ Imperative Knowledge คือ ความรู้ที่อธิบาย วิธีทำ (How to) เพื่อให้บรรลุเป้าหมายหนึ่งๆ โดยระบุลำดับขั้นตอนที่ชัดเจน ตัวอย่างใน JavaScript: การคัดลอกอาร์เรย์แบบ Procedural var a = [1, 2, 3, 4, 5]; var b = []; for (var i = 0; i < a

ตัวอย่างโค้ด สร้าง Navbar ที่หดเล็กลงเมื่อผู้ใช้เลื่อนจอลง โดยลด padding และขนาดฟอนต์ของโลโก้ พร้อม transition ทำให้ดูนุ่มนวล 20; if (scrolled) { nav.style.padding = 10px 10px; logo.style.fontSize = 20px; } else { nav.style.padding = 50px 10px; l

ตัวอย่างโค้ด สร้างแถบนำทางที่จะ ติด อยู่บนสุดจอภาพเมื่อผู้ใช้เลื่อนลงมาถึงตำแหน่งของ navbar โดยใช้ JavaScript ตรวจจับตำแหน่ง scroll และ CSS class สำหรับ fixed positioning = stickyTop) { navEle.classList.add(fixed); } else { navEle.classList.remove(fixed); } } w

ตัวอย่างโค้ด สร้างปุ่มดรอปดาวน์ที่เมื่อคลิกจะแสดง/ซ่อนรายการเมนู โดยใช้ CSS จัดการแสดงผลและ JavaScript ควบคุมการ toggle <!DOCTYPE html> <html lang=th> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style> .menu-btn { backgroun

โค้ดตัวอย่าง ตัวอย่างนี้แสดงวิธีดึงค่าจาก Radio Button ที่ถูกเลือก (checked) โดยใช้ jQuery แล้วส่งไปยัง PHP ผ่าน AJAX หรือฟอร์มทั่วไป <!-- HTML สำหรับ Radio Button Group --> <div id=controls> <label class=btn btn-primary active> <input type=radio class=form-control name=

ตัวอย่างโค้ด ตัวอย่างนี้แสดงวิธีสร้างเมนูนำทางแนวนอนที่ปรับตัวตามขนาดจอภาพ (Responsive) โดยบนเดสก์ท็อปจะแสดงเมนูเต็มรูปแบบ แต่บนมือถือ/แท็บเล็ต (กว้าง ≤ 600px) จะซ่อนเมนูและแสดงปุ่มแฮมเบอร์เกอร์ (☰) แทน <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8 /> <me

ตัวอย่างโค้ด ต่อไปนี้เป็นโค้ดสำหรับสร้างเมนูนำทางแบบม่านที่เลื่อนออกมาจากด้านข้างจอภาพ โดยใช้ CSS สำหรับการจัดรูปแบบและ JavaScript สำหรับการควบคุมการเปิด/ปิด <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width,

โค้ดต่อไปนี้เป็นการสร้าง Collapsible Sidebar Menu ด้วย CSS และ JavaScriptตัวอย่าง<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document</title> <style> .sideNav

โค้ดต่อไปนี้เป็นการสร้าง Collapsible Sidepanel Menuตัวอย่าง<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document</title> <style> .sideNav {    width:

โค้ดต่อไปนี้เป็นการสร้าง Responsive Modal Images ด้วย CSS และ JavaScriptตัวอย่าง<!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> <style> *{    box-sizing: border-box; } h1{    text-align: center; } .ImgTh

โค้ดต่อไปนี้เป็นการสร้าง Modal Image Gallery ด้วย CSS และ JavaScriptตัวอย่าง<!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style> * {    box-sizing: border-box; } h1 {    text-align: center; } .ImgTh

โค้ดสำหรับสร้าง Tabs ด้วย CSS และ JavaScript มีดังนี้ตัวอย่าง<!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> <style> .tab {    overflow: hidden;    border: 2px solid gray;    background-color:

สร้าง Vertical Tabs - แท็บจัดเรียงแนวตั้งด้านซ้าย เนื้อหาแสดงด้านขวา เหมาะสำหรับ Sidebar Navigation, Settings Panel, Documentation โค้ดตัวอย่างสมบูรณ์ <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-sc

สร้าง Tab Headers แบบคลาสสิก - แท็บอยู่ด้านบน เนื้อหาแสดงด้านล่าง เปลี่ยนแท็บโดยการ คลิก (Click) โค้ดตัวอย่างสมบูรณ์ <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Tab Hea

สร้าง Tab Interface ที่เปลี่ยนเนื้อหาเมื่อ Hover (ชี้เมาส์) แทนการคลิก - เหมาะสำหรับเมนูดรอปดาวน์หรือ Quick Preview โค้ดตัวอย่างสมบูรณ์ { const firstBtn = document.querySelector(.tab-btn); if (firstBtn) { // Trigger hover effect หลังโหลดเสร็จ (Optional) // firstBtn.disp

สร้าง Navigation Bar ที่ Responsive และมี Login Form ติดอยู่ใน Navbar เอง - บน Desktop แสดงแนวนอน, บน Mobile Stack แนวตั้ง โค้ดตัวอย่างสมบูรณ์ <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0&

สร้าง Full-Screen Overlay Navigation ที่ครอบคลุมทั้งหน้าจอ (100% Width & Height) เมื่อเปิดใช้งาน โค้ดตัวอย่างสมบูรณ์ { if (e.key === Tab && overlayNav.style.width === 100%) { const focusableElements = overlayNav.querySelectorAll( a[href], button, input, select, textarea