ใช้ getElementsByClassName() วนลูปผูก Event Listener ดึง element ทั้งหมดที่มี class ตรงกัน แล้ววนลูปเพิ่ม event listener ให้แต่ละตัว ตัวอย่างโค้ดเต็ม <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-sca

คำนวณความต่างของวันที่ในเดือนปัจจุบัน ใช้ new Date().getDate() ดึงวันของเดือนปัจจุบัน และลบกับวันของวันที่ต้องการ ตัวอย่างโค้ด var currentDate = new Date().getDate(); // วันปัจจุบัน (1-31) var subtractDate = new Date(2020-07-01).getDate(); // วันของวันที่กำหนด const numberOfDaysInCurrentMonthOnly

ใช้ Regular Expression พร้อม flag i สำหรับ Case Insensitive สร้าง RegExp จากอาร์เรย์ค่า แล้วใช้ test() ตรวจสอบ ตัวอย่างโค้ด var allNames = [john, John, JOHN]; // รวมค่าด้วย | (OR) และใช้ flag i สำหรับ case-insensitive var makeRegularExpression = new RegExp(allNames.join(|), i); var hasValue = mak

การรวมออบเจกต์ด้วย Object.assign() แบบไม่เปลี่ยนต้นฉบับ Object.assign() คัดลอก property จาก source ไป target โดย target แรกคือออบเจกต์ว่าง {} จะได้ออบเจกต์ใหม่ ไม่กระทบต้นทาง ตัวอย่างโค้ด var firstObject = { name: John }; var secondObject = { name: Carol }; console.log(ก่อนรวม = ); console.log(fir

ดึงข้อความภายในวงเล็บเหลี่ยมด้วย Lookahead/Lookbehind ใช้ Regular Expression พร้อม match() เพื่อจับค่าระหว่าง [ และ ] โดยไม่รวมวงเล็บ ตัวอย่างโค้ด var regularExpression = /(?<=\[).*?(?=\])/g; var getTheValueWithIndex = [John Smith][David Miller].match(regularExpression); console.log(ค่าแรกโดยไม่มี

แปลงออบเจกต์เป็นสตริง JSON และแสดงบนหน้าเว็บ ใช้ JSON.stringify() แปลงออบเจกต์เป็นสตริง แล้วแสดงด้วย innerHTML ตัวอย่างโค้ดเต็ม <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title

ลบคอมมาและช่องว่างซ้ำด้วย Regular Expression ใช้ split() กับ regex /[\s,]+/ แล้ว join() เพื่อรวมกลับด้วยคอมมาเดียว ตัวอย่างโค้ด var sentence = My,,,,,,, Name,,,, is John ,,, Smith; console.log(ก่อนลบ = + sentence); // แยกด้วย regex (ช่องว่างหรือคอมมา 1 ตัวขึ้นไป) แล้วรวมด้วยคอมมา sentence = sente

Event Delegation: จัดการ Event ของ Element ที่ยังไม่มีอยู่ ใช้ document.addEventListener() ร่วมกับ event.target เพื่อจับ event ของ element ที่เพิ่มเข้ามาในภายหลัง ตัวอย่างโค้ดเต็ม { const newBtn = document.createElement(button); newBtn.id = buttonSubmit; newBtn.textContent = Dyna

การใช้ new เพื่อสร้างอินสแตนซ์จาก Constructor Function คีย์เวิร์ด new ใช้สร้างออบเจกต์ใหม่จากฟังก์ชันคอนสตรัคเตอร์ และ this จะชี้ไปที่อินสแตนซ์ใหม่นั้น ตัวอย่างโค้ด function newObjectCreation() { this.firstName = John; } var newObject = new newObjectCreation(); newObject.firstName = David; // เป

การดึงขนาดหน้าจอที่ใช้งานได้ ใช้ window.screen.availWidth และ window.screen.availHeight เพื่อได้ความกว้างและความสูงของพื้นที่ทำงาน (ไม่นับแถบงาน/แถบเมนู) ตัวอย่างโค้ดเต็ม <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=devi

การสร้างอินสแตนซ์คลาสและเข้าถึงผ่าน eval() ตัวอย่างนี้แสดงการสร้างคลาส รับค่าใน constructor และใช้ eval() เพื่อเข้าถึง property ตัวอย่างโค้ด class FirstClass { constructor(message) { this.message = message; } } var message = This is the Class Demo; var object = new FirstClass(message); co

การจัดกลุ่มออบเจกต์ในอาร์เรย์ตามค่า property ใช้ลูป for...in ร่วมกับ push() เพื่อสร้างออบเจกต์ใหม่ที่จัดกลุ่มตามชื่อ (name) ตัวอย่างโค้ด var details = { 1: { name: John }, 2: { name: John }, 3: { name: David } }; var objectWithGroupByName = {}; for (var key in details) { var name = detail

การนับแถว (rows) ของตาราง ใช้ property .rows.length ของ element <table> เพื่อดึงจำนวนแถวทั้งหมด (รวม header และ body) ตัวอย่างโค้ดเต็ม <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>

การเปลี่ยนข้อความภายในแท็ก <strong> ใช้ jQuery เลือก element ด้วย ID แล้วเปลี่ยนเนื้อหาด้วยเมธอด .html() ตัวอย่างโค้ดเต็ม <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title

การแปลงสตริง JSON เป็นอาร์เรย์ของออบเจกต์ เมื่อมีข้อมูลในรูปแบบสตริง JSON ที่ต้องการแปลงเป็นอาร์เรย์ของออบเจกต์ ให้ใช้เมธอด JSON.parse() ตัวอย่างโค้ด var customerDetails = [{name: John, countryName: US}, {name: David, countryName: AUS}, {name: Bob, countryName: UK}]; console.log(ค่าเดิม = + custo

การแทรกคำก่อนจุดของนามสกุลไฟล์ สมมติว่าชื่อไฟล์ของเราคือ demo.js และเราต้องการแทรกคำว่า programming ก่อนนามสกุล .js เพื่อให้ได้ผลลัพธ์เป็น demo-programming.js ตัวอย่างโค้ด var addValueBetweenFileNameAndExtensions = programming; var actualJavaScriptFileName = demo.js; console.log(ชื่อไฟล์จริง = + a

สร้างอาเรย์ใหม่ ใช้ push() ใส่ Object เข้าไป ตัวอย่างโค้ด var customerDetails = { customerFirstName: David, customerLastName: Miller, customerAge: 21, customerCountryName: US }; var customerObjectToArray = []; customerObjectToArray.push(customerDetails); console.log(customerObject

ใช้ reduce() ตรวจสอบว่าแต่ละตัวมากกว่าตัวก่อนหน้า 1 พอดี ตัวอย่างโค้ด (output ? (Number(output.number) + 1 === Number(latest.number) ? latest : false) : false) )); console.log(Is Consecutive= + sequenceIsConsecutive([ { number: 100 }, { number: 101 }, { number: 102 } ])); consol

ใช้ JSON.stringify(obj, null, indent) พารามิเตอร์ที่ 3 คือจำนวน Space Indent ตัวอย่างโค้ด var details = { studentId: 101, studentFirstName: David, studentLastName: Miller, studentAge: 21, subjectDetails: { subjectId: JavaScript_101, subjectName: Introduction to J

แยกเวลาเริ่ม/จบจากสตริง 5 PM - 11 PM แปลงเป็น 24 ชม. เปรียบเทียบกับเวลาปัจจุบัน ตัวอย่างโค้ด (+hourDetails[0] + firstCurrentTime) && currentTime < (+hourDetails[3] + secondCurrentTime)) { result = obj.subjectName; } }); return result; } console.log(The Sub