บทนำ คุณสมบัติ shiftKey ของ Keyboard Event ใน JavaScript ใช้เพื่อตรวจสอบว่า Shift ถูกกดค้างอยู่หรือไม่ในขณะที่เกิดเหตุการณ์แป้นพิมพ์ (keydown, keyup, keypress) คุณสมบัตินี้จะคืนค่า true หาก Shift ถูกกดอยู่ และ false หากไม่ได้กด ตัวอย่างการใช้งาน ลองรันโค้ดด้านล่างเพื่อดูการทำงานของ shiftKey แบบเรี

event.ctrlKey เป็น Property ของ KeyboardEvent (และ MouseEvent) ที่บอกว่า ปุ่ม Ctrl ถูกกดค้างอยู่หรือไม่ ในขณะที่ Event ถูก Trigger (true = กดอยู่, false = ไม่ได้กด) ตัวอย่าง: ตรวจจับ Ctrl + Key { const key = e.key; const ctrl = e.ctrlKey; const shift = e.shiftKey; const alt

ใช้ Property style.borderTopRightRadius ของ Element เพื่อตั้งค่าความโค้งของมุมขวาบน (Top-Right Corner) แยกจากมุมอื่นๆ ได้ Syntax element.style.borderTopRightRadius = length | percentage | initial | inherit; ค่า: Length (px, em, rem, %), Percentage (ของ Width/Height ของ Element), Two Values (Horizont

ใน JavaScript Empty Array [] แปลงเป็น Boolean ได้ true เพราะ Array เป็น Object และ Object ทุกตัว (ยกเว้น null) เป็น Truthy ตัวอย่าง true </script> Truthiness Table (ค่าที่เป็น Truthy / Falsy) ValueBoolean()Note [] (Empty Array)trueObject → Truthy [1,2] (Non-empty Array)trueObject → Truthy

ใช้ Property style.borderBottomColor ของ Element เพื่อตั้งค่าสีของขอบล่าง (Bottom Border) แยกจากขอบอื่นๆ ได้ Syntax element.style.borderBottomColor = color_value; color_value สามารถเป็น: Named Color (red, blue), Hex (#ff0000, #f00), RGB (rgb(255,0,0)), RGBA (rgba(255,0,0,0.5)), HSL, HSLA, transparen

clientX เป็น Property ของ MouseEvent ที่คืนค่า พิกัดแนวนอน (X-coordinate) ของเมาส์ **สัมพันธ์กับ Viewport (บริเวณมองเห็นของเบราว์เซอร์)** ไม่รวม Scroll Offset ความแตกต่าง clientX vs pageX vs screenX Propertyจุดอ้างอิง (Origin)รวม Scroll?ใช้เมื่อไหร่ clientXViewport (Browser Window Visible Area)❌

clientY เป็น Property ของ MouseEvent ที่คืนค่า พิกัดแนวตั้ง (Y-coordinate) ของเมาส์ **สัมพันธ์กับ Viewport (บริเวณมองเห็นของเบราว์เซอร์)** ไม่รวม Scroll Offset ความแตกต่าง clientY vs pageY vs screenY Propertyจุดอ้างอิง (Origin)รวม Scroll?ใช้เมื่อไหร่ clientYViewport (Browser Window Visible Area)

ใช้ Property borderBottomLeftRadius เพื่อตั้งค่า Border Radius มุมซ้ายล่าง ของ Element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #box { border: 2px dashed blue; width: 120px; height: 120px; } </style> </head&g

ใช้ Number() แปลง -Infinity เป็น Number จะได้ -Infinity (ค่าเดิม Identity) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert -Infinity to Number</p> <script> var myVal = -Infinity; document.write(Number : + Number(myVal)); // ผลลัพธ์: -

Property event.ctrlKey ใน Mouse Event บอกว่า ปุ่ม Ctrl ถูกกดค้างอยู่หรือไม่ ขณะที่ Mouse Event เกิดขึ้น ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onmousedown=funcCtrlKey(event)> <div>Press and hold CTRL key and then click here.</div> <script> func

Property event.pageX ใน Mouse Event คืนค่า Horizontal Coordinate (X) ของ Mouse Pointer เทียบกับ Document 全体 (รวม Scroll) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p onclick=coordsFunc(event)>Click here to get the x (horizontal) and y (vertical) coordinates of the mou

Property event.pageY ใน Mouse Event คืนค่า Vertical Coordinate (Y) ของ Mouse Pointer เทียบกับ Document 全体 (รวม Scroll) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p onclick=coordsFunc(event)>Click here to get the x (horizontal) and y (vertical) coordinates of the mouse

ใช้ Number() แปลง Array [50, 100] เป็น Number จะได้ NaN ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert [50,100] to Number</p> <script> var myVal = [50, 100]; document.write(Number: + Number(myVal)); // ผลลัพธ์: NaN </script>

ใช้ String() แปลง -Infinity เป็น String จะได้ -Infinity ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert -Infinity to String</p> <script> var myVal = -Infinity; document.write(String: + String(myVal)); // ผลลัพธ์: -Infinity </sc

ใช้ String() แปลง null เป็น String จะได้ null (String ตัวอักษร 4 ตัว) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert null to String</p> <script> var myVal = null; document.write(String: + String(myVal)); // ผลลัพธ์: null </scr

Event oncut ทริกเกอร์เมื่อ User Cut เนื้อหา ของ Element (Ctrl+X, Right-click → Cut, Menu → Cut) — ต้องเป็น Editable Element ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <input type=text oncut=cutFunction() value=cut the text> <script> function cutFunction

Event oncopy ทริกเกอร์เมื่อ User Copy เนื้อหา ของ Element (Ctrl+C, Right-click → Copy, Menu → Copy) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <input type=text oncopy=copyFunction() value=copy the text> <script> function copyFunction() { documen

ใช้ Property borderImageSlice เพื่อกำหนด Inward Offsets — ตัดรูปภาพ Border Image เป็น 9 ส่วน (4 Corners, 4 Edges, 1 Center) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { background-color: blue; border: 40px dashed; border-image:

ใช้ Boolean() แปลง null เป็น Boolean จะได้ false ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert null to Boolean</p> <script> var myVal = null; document.write(Boolean: + Boolean(myVal)); // ผลลัพธ์: false </script> </bo

Property event.altKey ใน Mouse Event บอกว่า ปุ่ม Alt ถูกกดค้างอยู่หรือไม่ ขณะที่ Mouse Event เกิดขึ้น (click, mousedown, mousemove, etc.) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body onmousedown=funcAltKey(event)> <div>Press and hold ALT key and then click here.</div&g