สร้างสีสุ่ม Hex Code (#RRGGBB) ด้วย Math.random() และ String Template ตัวอย่าง (Vanilla JS) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Random Color</title> <

const arr = [] ป้องกัน Reassign Array ใหม่ แต่ แก้ไข Element ภายในได้ ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Const Array</title> <style>

ใช้ document.querySelector ดึงค่า Input แปลงเป็น Number ด้วย parseInt หรือ Number() ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Number Input</title> <

JSON Object ใน JS คือ Object ธรรมดา ที่สามารถแปลงเป็น JSON String ด้วย JSON.stringify() ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>JSON Object</title&g

ใช้ addEventListener(input, handler) จับ Event เมื่อค่า Input เปลี่ยน (Real-time) ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>oninput Event</title> </

JSON.parse() แปลง JSON String ให้เป็น JavaScript Object/Array ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>JSON Parse</title> <style> body

ใช้ setInterval รัน Function ซ้ำ และ clearInterval หยุดการทำงาน ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Stop Function</title> </head> <body&

HTML5 Input Validation API มี validity.rangeOverflow และ validity.rangeUnderflow ตรวจสอบค่าที่กรอกเกิน/ต่ำกว่า min/max ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <t

จริงๆ แล้วทำได้ด้วย CSS Selector :nth-child(odd) และ :nth-child(even) โดยไม่ต้องใช้ JavaScript ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>CSS Odd Even</tit

JavaScript Object สามารถเพิ่ม เข้าถึง และลบ Property ได้แบบ Dynamic ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Object Properties</title> <style

หลาย Case สามารถรวมรัน Code Block เดียวกันได้ โดยไม่ใส่ break ระหว่าง Case (Fall-through) ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Switch Common Blocks&

JavaScript switch ใช้ Strict Equality (===) เท่านั้น ไม่ทำ Type Coercion ถ้าไม่ Match จะไป default ทันที ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Switch

Flags (Modifiers) คือ ตัวเลือกเสริมของ Regex วางหลัง /pattern/flags หรือใน Constructor new RegExp(pattern, flags) Flagชื่อคำอธิบาย gGlobalหา Match ทั้งหมด ไม่หยุดที่ตัวแรก iCase-Insensitiveไม่สนใจพิมพ์ใหญ่/เล็ก mMultiline^ $ จับคู่ต้น/ท้ายบรรทัด (ไม่ใช่ทั้ง String) sDo

ใช้ RegExp.prototype.test() ตรวจสอบว่าจับคู่ได้หรือไม่ (Boolean) และ RegExp.prototype.exec() ดึงข้อมูลรายละเอียดการจับคู่ ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> &l

try...catch ใช้จัดการ Exception (ข้อยกเว้น) ให้โปรแกรมไม่ Crash เมื่อเกิด Error ไวยากรณ์ try { // โค้ดที่อาจเกิด Error } catch (error) { // จัดการ Error } finally { // รันเสมอ (Optional) } ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <m

Error Object มี Property name บอกประเภทข้อผิดพลาด มี 6 ประเภทหลัก: ประเภทคำอธิบาย EvalErrorข้อผิดพลาดใน eval() (เก่า ลดน้อย) RangeErrorค่าตัวเลขเกินขอบเขต (เช่น Array length ติดลบ) ReferenceErrorอ้างอิงตัวแปรที่ไม่มีอยู่ (เรียกก่อนประกาศ) SyntaxErrorSyntax ผิดพลาด (Par

this ใน JavaScript อ้างอิง Object ที่เรียก Function นั้น ค่าขึ้นอยู่กับ วิธีการเรียกใช้ (Runtime Binding) ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>this

ใช้ FileReader API อ่านไฟล์ภาพแล้วแสดง Preview ก่อนอัปโหลดจริง ตัวอย่าง (Vanilla JS - ไม่ต้อง jQuery) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Image Preview</titl

ใช้ getElementsByClassName() ดึง Element แล้ววนลูปตรวจสอบ InnerHTML ถ้าตรงเงื่อนไขให้ style.display = none ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Hide Div

ใช้ Keyword const ประกาศ Constant (ค่าคงที่) ไม่สามารถ Reassign ได้ แต่ Object/Array ที่ประกาศด้วย const ยังแก้ไข Property/Element ได้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } </style> &