เรียนรู้แทนที่ character ใดๆ ใน string ด้วย Regular Expressions (RegEx) และเมธอด replace() สมมติ text block ควรใช้ em dash (—) แต่พิมพ์ hyphen (-) ติด: const textBlock = When youre typing fast its normal to make a few spelling mistakes here and there - it just means youre human. แก้ด้วย regex และ

เรียนรู้รวม string 2+ ตัวด้วย JavaScript วิธีหลายอย่าง: plus operator +, plus equals +=, และ concat() Note: + และ += เรียกว่า assignment operators Plus Operator (+) const firstName = Steve; const lastName = Jobs; const fullName = firstName + lastName; console.log(fullName); // SteveJobs เพิ่ม Spa

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

Space Invaders โดย Andrea Maille เป็น pure vanilla JS version ของเกม 2D หนังสือ 1978 ฟีเจอร์ของเกม: Collision detection ยิงด้วย spacebar เคลื่อนที่ซ้าย-ขวา (x-axis) ด้วยลูกศร Peace Mode (ยิงศัตรูด้วยกุหลาบแทนจรวด 😂) Timer Score count Highscore board Submit score แม้ enemy AI ไม่ค่อยท้าทายและขา

เรียนรู้ smooth scroll ผู้ใช้ไปด้านล่างหน้ายาว ด้วย JS และ CSS นิดหน่อย ใช้ CSS property scroll-behavior และ JS method scrollIntoView() ต้องมี: หน้ายาวพอให้มี y-axis scrollbar Anchor element ที่บนสุดมี id Element ใดๆ ที่ล่างสุดมี id scroll-behavior CSS property scrollIntoView() JS property HTML

หา item เฉพาะใน array ใช้ ES6 method Array.find() ตัวอย่าง array ผัก หา carot: const vegetables = [broccoli, carot, kale, spinach]; // Find carot in array let carot = vegetables.find(function(vegetables) { return vegetables === carot; }); console.log(carot); // carot โค้ดทำงานอย่างไร: ประกาศตัว

เรียนรู้เปลี่ยนสีพื้นหลังเว็บเมื่อเลื่อนเมาส์เข้า ด้วย Vanilla JavaScript HTML <!DOCTYPE html> <html> <body> <h1>Move your move over this page</h1> </body> </html> JavaScript เปลี่ยนสีพื้นหลังตอน mouseover: Target <body> เก็บในตัวแปร Event listene

เรียนรู้ toggle สีพื้นหลังเว็บเมื่อเลื่อนเมาส์เข้า/ออก ด้วย event mouseover และ mouseout HTML <!DOCTYPE html> <html> <body> <h1>Move your move over this page</h1> </body> </html> JavaScript เพื่อ toggle สีพื้นหลัง: Target <body> เก็บในตัวแปร Event

วิธี inline JavaScript เร็วๆ สลับรูป default ด้วยรูปอื่นเมื่อ hover — และกลับมาตอน mouse out: <img onmouseover=this.src=new-image.png onmouseout=this.src=default-image.png src=default-image.png /> ตัวอย่างเดียวกันแต่ใช้ placeholder images: <img onmouseover=this.src=https://via.placeholder.

เรียนรู้สร้างปุ่มที่เปิด print หรือ save file window prompt ของ browser เมื่อคลิก ปกติ print/save: Browser menu File → Print → Save as PDF หรือ Print Shortcut: Cmd+P (Mac) / Ctrl+P (Windows) แต่ถ้าอยากให้ง่ายกว่านั้น ให้ปุ่มที่เปิด print prompt ทันที: สร้างปุ่ม <button class=button-print-or-sa

Alert Box คืออะไร? Alert Box คือหน้าต่างเล็กๆ ที่โผล่ตอบสนอง user interaction (คลิก, スクロール, พิมพ์) ใช้เตือนปัญหา หรือแจ้งข้อมูล ตัวอย่างทั่วไป: user กด submit แต่ลืมกรอก required field → alert แจ้งปัญหา สร้าง Alert Box สร้างปุ่มเป็น trigger: <button onclick=missingFieldWarningPopup()>Submit

เรียนรู้วิธีและเหตุผล redirect ผู้เยี่ยมชมไป URL อื่น ด้วย window.location object วิธี Page Redirect Redirect ไป URL ใหม่ ต้อง execute JS นี้บนหน้าที่ต้องการ redirect: window.location = https://wheretoredirect.com; ใส่ใน external .js file หรือ inline ใน <head>: <script type=text/javascrip

เว็บไซต์อาจใช้ modern features ที่ไม่เข้ากับบาง browser (โดยเฉพาะ legacy เช่น IE) ใช้ JS detect browser แล้ว redirect ไป version ที่เข้ากันได้ Redirect ถ้าไม่ได้ใช้ Chrome สมมติ cutting-edge version ใช้ได้แค่ Chrome ต้อง redirect ผู้ใช้ browser อื่นไป legacy version: if (!!window.chrome) { window

แปลง number เป็น string ด้วยเมธอด toString(): let number = 10; let numberToString = number.toString(); console.log(numberToString); // 10

ถ้าได้ error นี้ใน console: Uncaught SyntaxError: Unexpected identifier สาเหตุหนึ่งที่พบบ่อย: พยายาม mutate (เปลี่ยน) const variable — ทำไม่ได้ ใน JS const เป็น immutable variable ใช้สำหรับตัวแปรที่ไม่อยากให้ใคร modify หรือ redeclare ใช้ let ถ้าต้องการ variable ที่: mutable, changeable, modifiabl

ใน JavaScript เรียก printer dialog ด้วย function print() ต่างจากภาษาอื่น print() ใน JS ไม่ได้พิมพ์ข้อความใน console (ใช้ console.log() แทน) ดูตัวอย่างปฏิบัติ ที่นี่

เพื่อ detect double clicks ใช้ event listener dblclick ตัวอย่าง listen double clicks บน window object — double click เร็วๆ ที่ไหนในหน้าเว็บก็จะ detect: { console.log(Double-click detected); }); ยัง attach dblclick ให้ DOM element เช่น button ได้: <button id=button>Double click me!</but

ใน JavaScript มีหลายวิธีเช็คว่า value เป็น number หรือไม่ วิธีทั่วไป: ใช้ operator typeof const value = 5; console.log(typeof value); // number ประยุกต์ใช้ใน conditional statement เช็ค form input: const inputFieldAge = 10; if (typeof inputFieldAge !== number) { console.log(This field has to be a

เพื่อหาวันพรุ่งนี้ ดึง current date แล้วบวก 1 วัน: const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(tomorrow.getDate() + 1); tomorrow.toDateString(); ลอง log วันที่พรุ่งนี้: console.log(tomorrow.toDateString()); เรียบง่าย!

นี่คือ empty object: const emptyObject = {} แต่เช็คยังไงว่ object ว่าง? ใช้ function Object.entries() อีก empty object: const someObject = {} ใช้ Object.entries(): Object.entries(someObject) Log ผลลัพธ์: console.log(Object.entries(someObject)); // [] (empty array) ถ้า object ว่าง ผลลัพธ์คือ emp