สร้าง Off-Canvas Menu (Side Navigation) ที่สไลด์ออกมาจากขอบจอซ้าย ทับเนื้อหาหรือผลักเนื้อหาไปข้างๆ โค้ดตัวอย่างสมบูรณ์ { link.addEventListener(click, hideNav); }); </script> </body> </html> หลักการทำงาน CSS: Side Nav เริ่มต้น width: 0, transition: width 0.4s Jav

สร้าง Navigation Bar ติดด้านล่าง (Bottom Nav) ที่ Responsive - บน Desktop แสดงเต็ม, บน Mobile แสดงแท็บแรก + Hamburger Menu โค้ดตัวอย่างสมบูรณ์ { if (window.innerWidth 600) { nav.classList.remove(openNav); } }); </script> </body> </html> คุณสมบัติหลัก

สร้าง Navigation Bar ที่ ซ่อนอยู่ด้านบนจอ และ สไลด์ลงมา เมื่อผู้ใช้เลื่อนหน้าจอลง (Scroll Down) โค้ดตัวอย่างสมบูรณ์ 60) { // Scroll Down และเลื่อนผ่านจุดเริ่มต้น - แสดง Navbar navbar.style.top = 0; } else if (scrollTop < lastScrollTop) { // Scroll Up - ซ่อน Navbar

สร้าง Navigation Bar ที่ซ่อนอัตโนมัติเมื่อผู้ใช้เลื่อนหน้าจอลง (Scroll Down) และแสดงเมื่อเลื่อนขึ้น (Scroll Up) โค้ดตัวอย่างสมบูรณ์ 50) { // Scroll Down - ซ่อน Navbar navbar.style.top = -60px; } else { // Scroll Up - แสดง Navbar navbar.style.top = 0; }

เมธอด splice() เป็นเมธอดที่ทรงพลังที่สุดสำหรับ แก้ไขอาร์เรย์โดยตรง (Mutate) สามารถ เพิ่ม, ลบ, หรือแทนที่ องค์ประกอบได้ในครั้งเดียว ไวยากรณ์ (Syntax) array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start - ดัชนีเริ่มต้น (ค่าลบ = นับจากท้าย) deleteCount (ตัวเลือก) - จำนวนองค์ประกอบท

เมธอด toLocaleString() ใช้สำหรับ แปลง Date หรือ Number เป็นสตริงตามรูปแบบ Locale (ภาษา/ภูมิภาค) โดยอัตโนมัติ ไวยากรณ์ (Syntax) // Date dateObj.toLocaleString([locales[, options]]) // Number numberObj.toLocaleString([locales[, options]]) // Array (เรียก toString ของแต่ละองค์ประกอบ) array.toLocaleS

เมธอด values() ใช้สำหรับ คืนค่า Array Iterator object ที่มี ค่า (values) ของแต่ละดัชนีในอาร์เรย์ ไวยากรณ์ (Syntax) arr.values() ตัวอย่างการใช้งาน ตัวอย่างที่ 1: ดึงค่าแรกด้วย next() <!DOCTYPE html> <html> <body> <h2>Array.values() Demo</h2> <p>คลิกเพื่อแสดง

คุณสมบัติ Symbol.toPrimitive (ไม่ใช่ symbol.description ตามชื่อเรื่องเดิม) เป็น Well-known Symbol ที่ช่วยให้อ็อบเจกต์กำหนดพฤติกรรมเมื่อถูกแปลงเป็นค่า Primitive (String, Number, Default) ไวยากรณ์ (Syntax) object[Symbol.toPrimitive] = function(hint) { // hint = string | number | default // ต้องคื

สามารถส่งอาร์เรย์ PHP ไปยัง JavaScript ได้โดยใช้ json_encode() เพื่อแปลงอาร์เรย์ PHP เป็นสตริง JSON ที่ JavaScript เข้าใจได้ รูปแบบพื้นฐาน <script> var jsArray = <?php echo json_encode($phpArray); ?>; </script> ตัวอย่างสมบูรณ์ there ]; ?> <script> // รับค่าจาก PHP ผ่า

ทั้ง JSON และ XML เป็นรูปแบบข้อมูล (Data Interchange Formats) ยอดนิยมสำหรับแลกเปลี่ยนข้อมูลระหว่างระบบ ตารางเปรียบเทียบ ลำดับหัวข้อJSONXML 1 ย่อมาจาก JavaScript Object Notation Extensible Markup Language 2 ประเภท Data Interchang

ทั้ง JavaScript และ PHP เป็นภาษาโปรแกรมมิ่งยอดนิยมที่ใช้กันทั่วโลก ทั้งคู่มีคุณสมบัติสำคัญที่แตกต่างกันออกไป ตารางเปรียบเทียบ ลำดับหัวข้อJavaScriptPHP 1 ปีที่เปิดตัว พัฒนาโดย Brendan Eich (1995) พัฒนาโดย Rasmus Lerdorf (1994) - เก่ากว่า 2

ตัวดำเนินการ != (Loose Inequality) ตัวดำเนินการ != ตรวจสอบ ค่าไม่เท่ากัน โดยไม่ตรวจสอบชนิดข้อมูล (Type Coercion) จะแปลงชนิดข้อมูลของโอเปรานด์ทั้งสองให้เป็นชนิดเดียวกันก่อนเปรียบเทียบ 1 != 1 // false (แปลง 1 เป็นตัวเลข 1 แล้วเปรียบเทียบ) 0 != false // false (แปลง false เป็น 0) null != undefined

การดีบั๊ก (Debugging) เป็นกระบวนการอย่างเป็นระบบในการกำจัดข้อบกพร่อง (Bugs) เริ่มจากการรัน Test Cases เปรียบเทียบผลลัพธ์จริงกับที่คาดหวัง หากไม่ตรงกัน จะทำ Root Cause Analysis และรัน Regression Tests JavaScript ไม่มีเครื่องมือดีบั๊กที่แข็งแกร่งในตัว แต่ Firebug (ส่วนขยาย Firefox) ทำให้ดีบั๊ก JavaSc

Grunt (The JavaScript Task Runner) เป็นเครื่องมืออัตโนมัติสำหรับงานที่ทำซ้ำๆ เช่น คอมไพล์รหัส, รันเทสต์, Minify ไฟล์ ฯลฯ Grunt และปลั๊กอินต่างๆ ติดตั้งและจัดการผ่าน NPM (Node.js Package Manager) ข้อกำหนดเบื้องต้น (Prerequisites) ต้องมี Node.js และ NPM ติดตั้งไว้ก่อน ตรวจสอบเวอร์ชัน Node.js $ node

เมธอด slice() ใช้สำหรับ คืนค่าส่วน (shallow copy) ของอาร์เรย์ ตั้งแต่ดัชนีเริ่มต้นจนถึงดัชนีสิ้นสุด (ไม่รวม) อาร์เรย์ต้นฉบับไม่ถูกเปลี่ยนแปลง ไวยากรณ์ (Syntax) array.slice(start[, end]) start - ดัชนีเริ่มต้น (รวม) ค่าเริ่มต้น: 0 ค่าลบ = นับจากท้าย end (ตัวเลือก) - ดัชนีสิ้นสุด (ไม่รวม) ค่าเริ

เมธอด some() ใช้สำหรับ ตรวจสอบว่ามีองค์ประกอบอย่างน้อย 1 ตัว ในอาร์เรย์ที่ทำให้ฟังก์ชันทดสอบ (callback) คืนค่า true หยุดทำงานทันทีเมื่อพบ (short-circuit) ไวยากรณ์ (Syntax) array.some(callback(element[, index[, array]])[, thisArg]) ตัวอย่างการใช้งาน ตัวอย่างที่ 1: ตรวจสอบว่ามีคะแนนมากกว่า 400 หรือ

เมธอด entries() ใช้สำหรับ คืนค่า Array Iterator object ที่มีคู่ Key/Value (ดัชนี/ค่า) ของอาร์เรย์ทั้งหมด ไวยากรณ์ (Syntax) array.entries() ตัวอย่างการใช้งาน ตัวอย่างที่ 1: วนลูปคู่ Key/Value <!DOCTYPE html> <html> <body> <h2>คะแนนอันดับ - Entries</h2> <p>คู

เมธอด flatMap() เป็นการรวม map() และ flat() (ระดับ 1) ในขั้นตอนเดียว ใช้สำหรับ แปลงแต่ละองค์ประกอบแล้วรวม (flatten) ผลลัพธ์เป็นอาร์เรย์ระดับเดียว ไวยากรณ์ (Syntax) array.flatMap(callback(currentValue[, index[, array]])[, thisArg]) เทียบเท่ากับ: arr.map(...).flat() หรือ arr.map(...).flat(1) ตัวอย่

เมธอด includes() ใช้สำหรับ ตรวจสอบว่าอาร์เรย์มีค่าที่ระบุอยู่หรือไม่ คืนค่า true หรือ false ใช้งานง่ายกว่า indexOf() ไวยากรณ์ (Syntax) array.includes(searchElement[, fromIndex]) searchElement - ค่าที่ต้องการค้นหา fromIndex (ตัวเลือก) - ดัชนีเริ่มต้นค้นหา (ค่าเริ่มต้น: 0) ค่าลบ = นับจากท้าย

เมธอด Array.isArray() ใช้สำหรับ ตรวจสอบว่าตัวแปรที่ส่งเข้าเป็นอาร์เรย์หรือไม่ คืนค่า true หรือ false เป็นวิธีที่น่าเชื่อถือที่สุด ไวยากรณ์ (Syntax) Array.isArray(value) ตัวอย่างการใช้งาน ตัวอย่างที่ 1: ตรวจสอบอาร์เรย์ตัวเลข <!DOCTYPE html> <html> <body> <h2>คะแนนอันดับ&l