เรียนรู้ว่า Event Delegation ใน JavaScript คืออะไร ทำไมต้องใช้ และใช้อย่างไร JavaScript Event Delegation คืออะไร และควรใช้เมื่อไหร่? โดยสรุป Event Delegation เป็นวิธีของ JavaScript ที่ช่วยให้คุณโต้ตอบกับอิลีเมนต์ลูก (child elements) โดยใช้ เพียง event listener เดียว บนอิลีเมนต์พาเรนต์ (parent elemen

คอมพิวเตอร์เริ่มนับจากศูนย์ ดังนั้น 0 คือ 1, 1 คือ 2, และต่อไป นั่นคือเหตุผลที่ list[2] เลือก item 3 จากอาร์เรย์ โค้ดสำหรับอาร์เรย์ในตัวอย่าง: var list = [item 1, item 2, item 3, item 4] splice() ต้องการ 2 สิ่งเพื่อทำงาน: ตัวเลขระบุตำแหน่งที่ต้องการลบ ตัวเลขระบุจำนวนรายการที่ต้องการลบ จากตำแหน่งนั

คอมพิวเตอร์เริ่มนับจากศูนย์ ดังนั้น 0 คือ 1, 1 คือ 2, และต่อไป นั่นคือเหตุผลที่ list[2] เลือก item 3 จากอาร์เรย์ โค้ดสำหรับอาร์เรย์ในตัวอย่าง: var list = [item 1, item 2, item 3, item 4]

เมธอดอาร์เรย์ 4 ตัวที่เราใช้: unshift() เพิ่มรายการที่จุดเริ่มต้นของอาร์เรย์ shift() ลบรายการแรกในอาร์เรย์ push() เพิ่มรายการที่จุดสิ้นสุดของอาร์เรย์ pop() ลบรายการสุดท้ายของอาร์เรย์ ผมใช้ Chrome DevTools Console ในตัวอย่าง ลัดทางเปิดคอนโซล: Cmd + Option + j บน Mac, หรือ Ctrl + Shift + j บน Windo

เรียนรู้วิธีตรวจจับว่าความกว้างหน้าจอมากกว่าหรือน้อยกว่าค่าที่ระบุใน JavaScript บางครั้งคุณต้องการรันโค้ดตามเงื่อนไข อาจมีโค้ดบางส่วนที่ต้องการแสดงบนหน้าจอใหญ่แตไม่ใช่หน้าจอเล็ก (เช่นสมาร์ทโฟนส่วนใหญ่) เนื่องจากพื้นที่จำกัด การจัดการ การตรวจจับประเภทอุปกรณ์เฉพาะ เป็นพื้นที่ที่ซับซ้อน ซึ่งนักพัฒนาต่

เรียนรู้วิธีนับคำทั้งหมดบนส่วนเฉพาะของเว็บไซต์ด้วย Vanilla JavaScript บางครั้งการนับคำทั้งหมดในโพสต์หรือหน้าเว็บมีประโยชน์ คุณกำลังสร้างฟีเจอร์ Word Counter สำหรับเว็บไซต์ไหม? คุณสามารถใช้โค้ดสนิปเพท JavaScript ต่อไปนี้ทำได้ — และรวดเร็ว var wordsInPost = wordCount(document.querySelectorAll(.posts-

เรียนรู้วิธีตรวจจับเมื่อผู้ใช้เลื่อนลงมาที่ด้านล่างของหน้าเว็บด้วย JavaScript แบบดิบ บางครั้งคุณต้องการทริกเกอร์เหตุการณ์ เมื่อผู้ใช้เลื่อนลงมาถึงด้านล่างของหน้าหรือส่วนเฉพาะ ตรวจจับการเลื่อนถึงด้านล่าง (ทำงานในเบราว์เซอร์สมัยใหม่ทั้งหมด IE9 ขึ้นไป) = document.body.offsetHeight) { alert(At the botto

ใน JavaScript คุณจะได้ยินบ่อยว่า primitive values เป็น immutable (ไม่เปลี่ยนแปลงได้) ในขณะที่ non-primitive values เป็น mutable (เปลี่ยนแปลงได้) การเข้าใจความแตกต่างระหว่างประเภทค่าเหล่านี้ (เรียกอีกอย่างว่า ชนิดข้อมูล) สำคัญมาก เพราะจะช่วยหลีกเลี่ยงปัญหามากมายในอนาคต Primitive values ได้แก่: ตัวเล

เพื่อโหลดหน้าเว็บใหม่ด้วย JavaScript เราต้องใช้ Window Reload Event โหลดหน้าใหม่ด้วย JavaScript เพียงบรรทัดเดียว: วางโค้ดนี้ในคอนโซลเบราว์เซอร์แล้วกด Enter window.location.reload() เยี่ยม แต่อาจไม่ค่อยปฏิบัติจริง? มาลองอีกวิธี โหลดหน้าใหม่ด้วยเหตุการณ์คลิกปุ่ม: เพิ่มนี้ในมาร์กอัป HTML: เพิ่มฟังก์ชั

เรียนรู้ 2 วิธีที่แตกต่างกันในการลบหรือซ่อนอิลีเมนต์จาก DOM ด้วย JavaScript อย่างรวดเร็ว มี 2 วิธีในการลบ/ซ่อนอิลีเมนต์จาก DOM ด้วย JavaScript ถามตัวเองว่า ฉันจะต้องนำอิลีเมนต์นี้กลับมาใช้ใหม่ในภายหลังไหม? ถ้าคำตอบคือ ใช่ คุณควร ซ่อน อิลีเมนต์ด้วยพร็อพเพอร์ตี้ style: const hideElement = document.que

เรียนรู้วิธีเพิ่มอิลีเมนต์เข้าไปภายในอิลีเมนต์อื่นด้วย JavaScript JavaScript มีพร็อพเพอร์ตี้ชื่อ innerHTML ทำให้การเพิ่มมาร์กอัพภายในอิลีเมนต์ที่มีอยู่เป็นเรื่องง่าย สมมติว่าคุณมีส่วนหัวบทความพร้อมหัวข้อ และต้องการเพิ่มข้อความสำคัญด้านล่าง เช่น คำอธิบายหรือแท็กไลน์ HTML JavaScript ตอนนี้มาเพิ่มมาร์

หากคุณได้ข้อผิดพลาดแบบนี้เมื่อพยายามเปิดแอป React Native: Something went wrong installing the sharp module อาจมีหลายเหตุผลและวิธีแก้ที่ต่างกัน ผมสังเกตว่ามักเกิดขึ้นเมื่อเพิ่งติดตั้ง Node.js เวอร์ชันล่าสุด วิธีแก้ที่ผมใช้และทุกครั้งก็สำเร็จคือ ลบ node_modules ภายในโฟลเดอร์รากของแอปด้วยคำสั่งนี้: rm

เพื่อดึง URL หน้าเว็บปัจจุบันของเบราว์เซอร์ คุณต้องดึงพร็อพเพอร์ตี้ window.location.href พิมพ์โค้ดต่อไปนี้ในคอนโซลเบราว์เซอร์แล้วกด Enter: var currentURL = window.location.href; currentURL();

คุณเคยเรียนรู้วิธีเพิ่มและลบรายการจากอาร์เรย์ด้วยเมธอด push() ของ JavaScript แต่ถ้าเราต้องการเพิ่มอาร์เรย์ของรายการเข้าไปในอาร์เรย์ที่มีอยู่แล้ว? กล่าวคือ ต้องการรวมอาร์เรย์สองตัวที่ต่างกันเข้าด้วยกัน? เพื่อรวมอาร์เรย์สองตัวขึ้นไปใน JavaScript คุณสามารถใช้ Array.prototype.push.apply() สมมติว่าเรามีต

การอัปเดตปีปัจจุบันในฟุตเตอร์อัตโนมัติเป็นหนึ่งในสิ่งที่ทำได้ง่ายที่สุด น่าเสียดายที่เจ้าของเว็บไซต์หลายคนไม่รู้ว่าการแสดงปีปัจจุบันสำคัญ ทั้งเพื่อเหตุผลลิขสิทธิ์ และเพื่อให้ผู้ใช้ทราบว่าเว็บไซต์ของพวกเขาอัปเดตอยู่ นี่คือรูปแบบ HTML ในฟุตเตอร์ของเว็บไซต์เก่าๆ และแม้แต่บางเว็บไซต์สมัยใหม่: อ้างสิทธ

เรียนรู้วิธาดึงลิงก์ทั้งหมดจากเว็บไซต์ใดๆ และพิมพ์ลิงก์ออกมาที่คอนโซล โค้ด var links = document.querySelectorAll(a); for (var i = 0; i < links.length; i++) { var link = links[i].getAttribute(href); console.log(link); } เคล็ดลับ: หากคุณต้องการดึงลิงก์จากอิลีเมนต์คอนเทนเนอร์บทความเท่านั้น (ไม่ใช่ท

นับจำนวน clicks บน element เป็นหนึ่งในสิ่งง่ายที่สุดที่ทำได้ด้วย JavaScript คุณต้องแค่宣告 variable เก็บ clicks แล้วใช้ addEventListener method บน target element สมมติคุณต้องการ track จำนวน clicks บน button element เช่น home button The HTML markup สร้าง HTML button element ให้ class ชื่อ button-home:

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีแสดงรายการอ็อบเจ็กต์ JavaScript เป็นรายการอิลีเมนต์ HTML บนหน้าเว็บ สมมติว่าคุณมีรายการอ็อบเจ็กต์ JavaScript และต้องการแสดงผลเป็นอิลีเมนต์ HTML ในเบราว์เซอร์ ในตัวอย่างนี้ เรามีรายการออกกำลังกาย แสดงด้วยอ็อบเจ็กต์ลิเทอ럴 JavaScript อ็อบเจ็กต์ลิเทอ럴 JavaScript: let e

การนับจำนวนคลิกบนอิลีเมนต์เป็นหนึ่งในสิ่งที่ง่ายที่สุดที่ทำได้กับ JavaScript ทุกสิ่งที่คุณต้องทำคือ ประกาศตัวแปรเพื่อเก็บจำนวนคลิก และใช้เมธอด addEventListener บนอิลีเมนต์เป้าหมาย สมมติว่าคุณต้องการติดตามจำนวนคลิกบนอิลีเมนต์ปุ่ม เช่น ปุ่มหน้าหลัก มาร์กอัป HTML สร้างอิลีเมนต์ปุ่ม HTML และให้คลาส butt

การเพิ่มคลาสให้อิลีเมนต์ HTML ทำได้ง่ายเมื่อใช้เมธอด add() ของพร็อพเพอร์ตี้ classList ใน JavaScript ก่อนอื่นมาดูสูตรทั่วไป — แล้วตามด้วยตัวอย่างปฏิบัติ สูตร var element = document.querySelector(selector) element.classList.add(class) ในตัวอย่างทั่วไปด้านบน เราค้นหา อิลีเมนต์ HTML แรก บนหน้าที่มี ชื่อ