การลบคลาสออกจากอิลีเมนต์ HTML ทำได้ง่ายด้วยเมธอด remove() ของพร็อพเพอร์ตี้ classList ใน JavaScript หากคุณเคยอ่านวิธีเพิ่มคลาสให้อิลีเมนต์ คุณจะเห็นว่าการลบคลาสทำได้ในลักษณะเดียวกัน แค่ย้อนกลับกัน มาดูสูตร classList.remove() แบบทั่วไปก่อน — แล้วตามด้วยตัวอย่างปฏิบัติ สูตร var element = document.query

ด้วยโค้ดสนิปเพทที่สะดวกนี้ คุณสามารถเพิ่มแอตทริบิวต์ ID ให้กับอิลีเมนต์ HTML ที่มีอยู่แล้วได้โดยใช้ JavaScript โค้ด let featuredTitle = document.querySelector(h1); featuredTitle.id = featured-title; สิ่งที่เกิดขึ้นในวิดีโอ: ก่อนอื่น เราค้นหาอิลีเมนต์ h1 บนหน้าเว็บและกำหนดให้กับตัวแปรชื่อ featur

คุณไม่สามารถส่งอ็อบเจ็กต์ JavaScript ไปยังเซิร์ฟเวอร์โดยตรงได้ แต่คุณ สามารถ ส่ง JSON — รูปแบบสตริงที่เข้าถึงได้ทั่วไป ด้วยโค้ดสนิปเพทนี้ คุณสามารถแปลงอ็อบเจ็กต์ JavaScript เป็นสตริง JSON ได้อย่างรวดเร็ว ซึ่งช่วยให้คุณส่งข้อมูลไปยังเซิร์ฟเวอร์ของคุณได้ นี่คืออ็อบเจ็กต์ JavaScript ที่แสดงถึงบุคคลคนหน

เรียนรู้เพิ่ม item ใน array ตำแหน่งเฉพาะ (index) ใน JavaScript อยากเพิ่ม item ใน array แต่ไม่ใช่ append (ท้าย) หรือ prepend (หน้า) — อยากเพิ่มตำแหน่งเฉพาะ Note: ตำแหน่ง/ที่ เรียกว่า index นับจาก 0 คือ: 0 คือ 1 1 คือ 2 ต่อไป... Array 5 items ต้องการ item ที่ 3 → address เป็น 2 Splice() Method ใช

ต่อไปคือ กฎ (ไม่ใช่แนวทาง) สำหรับตั้งชื่อ JavaScript variable: Variable names ประกอบได้แค่ alpha-numeric (a-z, 0-9), underscores (_) หรือ dollar sign $ Variable names ห้าม เริ่มต้นด้วยตัวเลข Variable names ต้อง เริ่มต้นด้วย ตัวอักษร, dollar sign ($) หรือ underscore (_) Variable names ห้าม มีช่องว่า

Beginner-friendly practical Vanilla JS tutorial Takeaway: เขียน High-Performance Window Events ที่ไม่ kill user hardware For: Complete Beginners to Intermediates วันนี้สร้าง mini-app Viewport Dimensions แสดง browser viewport width/height ตอน resize window Tool ไม่ควรมากับ responsive design CodePen

เช็ค class บน element ใช้ classList.contains() method — เรียบง่ายและเร็ว classList.contains() Formula var element = document.querySelector(selector); element.classList.contains(class); querySelector() หา target element → assign variable element → attach classList.contains() ระบุ class name ใน argu

มี invisible element (action bar/menu) อยาก show ตอน mouse enter area ใช้ mouseenter event HTML Markup <div class=invisible-box>Yay you can see me!</div> CSS Styling .invisible-box { opacity: 0; transition: all 500ms; padding: 32px; margin-top: 32px; margin-bottom: 32px; b

Toggle classes บน elements ด้วย JS เป็น skill practical ที่สุดสำหรับ developer ใช้สำหรับ show/hide menus, add/remove search filters, social media buttons (likes, thumbs up) Toggle ไม่ยุ่งยาก แค่幾行 code ขึ้นกับ context วันนี้เรียนวิธีง่ายเริ่มต้น toggle และ JS ทั่วไป HTML Structure Setup HTML elem

เช็คว่า string มีคำเฉพาะไหม ด้วย JS? ใช้ built-in includes() method เช็คว่า string มี characters ที่หรือไม่ สมมติอยากรู้ว่า HTML page นี้มีคำ JavaScript หรือไม่: <article> <p> Lorem ipsum... Beatae JavaScript fuga voluptatibus... </p> </article> Select element ที่น่าจะมี

เข้าถึง X items แรกของ array ใช้ built-in slice() method ตัวอย่าง: ต้องการ 3 items แรกของ exercise list: const exerciseList = [ Deadlift, Squat, Push-up, Pull-up, Turkish Get-up, Kettlebell Swing ]; กำหนดจำนวน items: const numberOfItems = 3; Declare variable ใหม่เก็บ reference 3 items แรก: co

เรียนรู้ซ่อน/แสดง DOM elements ด้วย plain vanilla JavaScript JS มี style property ชื่อ style ใช้ set CSS properties บน elements ได้เหมือน CSS ซ่อน DOM element: element.style.display = none; แสดง DOM element อีกครั้ง: element.style.display = block; Note: ถ้า element เดิมเป็น inline หรือ inline-blo

เรียนรู้วิธี append items เข้า array หลายวิธี Append item ใช้ push() หรือ concat() ขึ้นกับ context ทั้งคู่มาจาก JavaScript Array object Append Single Item const vegetables = [broccoli, onion, spinach]; vegetables.push(carot); console.log(vegetables); // [broccoli, onion, spinach, carot] Note: vege

เรียนรู้นับจำนวน properties ใน JavaScript object ด้วย 2 วิธี นับ properties ใช้ได้: for loop Object.keys() method นับด้วย for loop Object dog: const dog = { name: Naya, age: 2, color: black, Breed: Rottweiler mix, }; Declare count = 0: let count = 0; Loop dog object ทุก property +1: fo

เรียนรู้ detect clicks นอก element — skill ที่ powerful ใช้ได้หลายสถานการณ์ เช่น ซ่อนเมนูหรือ modal windows Basic JavaScript Outside Element Detection สร้าง box element ใน HTML: <div class=box> If you click anywhere outside of me, Im gone faster than you can snap your fingers. </div>

เรียนรู้แทนที่ white space ใน strings ด้วย Regex (Regular Expressions) — tool หา patterns ใน text Regex (RegEx/RegExp) performant tool สำหรับ strings ใช้บ่อย: Text validation Text searching วันนี้เรียนจากตัวอย่าง regex replace white space ทั้งหมดในบรรทัดด้วย nothing — แต่用ได้กับ character อื่นๆ

เรียนรู้แปลง array เป็น string ด้วย JS 2 วิธี JS มี methods คืนค่า array content เป็น string: toString() และ join() ดูเหมือนกันแต่ ไม่เหมือนกัน Array ตัวเลข: const numbersArray = [2, 4, 6, 8, 10]; ลอง toString(): numbersArray.toString(); console.log(numbersArray.toString()); // String: 2,4,6,8,10

เรียนรู้ extract ข้อความระหว่าง double quotes จาก string ด้วย JavaScript Quotes มักห่อด้วย double quotes ( ) ใช้ match() + RegEx Text block มี 1 quoted sentence assign ให้ textWithQuote: const textWithQuote = One of my favorite quotes is First we make our habits, then our habits make us. This quot

เรียนรู้ extract ตัวเลข 1 หรือหลายตัวจาก string ด้วย JavaScript String มีตัวเลข อยาก extract เฉพาะตัวเลข ใช้ match() method String มี 1 ตัวเลข (1995) assign ให้ stringWithOneNumber: const stringWithOneNumber = JavaScript was invented in 1995 by Brendan Eich; Attach match() argument \d+ → match(/\

เรียนรู้แทนที่ทุก instance ของคำ (string) ใน JS ด้วย RegEx และ replace() Text block ใหญ่พูดถึงผลิตภัณฑ์ใหม่ แต่มีคำผิดหลายครั้ง ควรเป็น Epic Games ไม่ใช่ Glorious Games: const textBlock = We at Glorious Games, are very proud to present the latest edition of the Unreal Tournament series. Glorious Ga