เมธอด JavaScript appendChild() เพิ่ม item ท้าย node ใช้บ่อยกับ <li> items ใน list ต้องใช้ multiple appendChild() ถ้าอยากเพิ่มหลาย items วิธีใช้ JavaScript appendChild Lists มี text, images, custom web elements ทุกอย่าง แต่ทุกหน้าเว็บเต็มไปด้วย lists สร้าง list ด้วย HTML hardcode แต่เร่งได้ด้ว

JavaScript if...else statement evaluate condition true/false ถ้า true รัน if block false รัน else block else...if evaluate หลาย conditions Conditional Statements: บทนำ ต้องการรันโค้ดบล็อกต่างกันตามเงื่อนไข Conditional statements สำคัญในทุกภาษา รันโค้ดถ้า condition met สถานการณ์ที่ใช้: เช็ค passw

ใช้ JavaScript sort() method จัดเรียง array รับ array argument จัดค่าตัวอักษร ascending order แบบ in-place (modify array เดิม ไม่สร้าง array ใหม่) อยากจัดเรียง array ตามลำดับเฉพาะ เช่น names เรียง alphabetical order มี built-in functions ช่วย: sort() เรียง alphabetical, reverse() เรียงย้อนกลับ, sor

do...while loops execute บล็อกโค้ด 1 ครั้ง แล้วทำต่อไปเรื่อยๆ ถ้า condition evaluate เป็น true while และ do...while ใช้เมื่อต้องการรันโค้ดซ้ำจน condition เป็น false JavaScript While Loops while loop รันบล็อกโค้ดพร้อม condition เป็น true หยุดเมื่อ condition เป็น false ใช้เมื่อไม่รู้ล่วงหน้าว่าจะรั

JavaScript spread operator (....) ขยาย iterable object ใน syntax ที่รับ arguments ใช้ duplicate objects, merge arrays, หรือส่ง array contents เข้า function Spread operator ไม่เกี่ยวกับขนมปัง! ใน JS หมายถึง: เข้าถึง contents ของ iterable object ได้ สร้างใน ES6 Spread Operator คืออะไร? เข้าถึง conte

เมธอด JavaScript trim() ตัด whitespace characters (spaces, tabs, newlines) จากต้นและท้าย string trimLeft()/trimStart() ตัดหน้า trimRight()/trimEnd() ตัดท้าย JavaScript trim() String trim() ตัด whitespace จากต้นและท้าย string สร้าง string ใหม่ (string immutable ไม่เปลี่ยนตัวเดิม) ไม่รับ arguments

HTTP requests เป็นรากฐาน web app: รับ data จาก user input ส่งไป backend/server แล้วได้ response กลับ POST request บันทึกข้อมูลลง database GET request รับ response แสดงให้ user jQuery มี get() method ทำ GET request ง่ายขึ้น jQuery get() คืออะไร? get() ส่ง GET request ไป URL endpoint รับ response (d

Operator JavaScript += บวก 2 ค่าแล้ว assign ผลลัพธ์ให้ variable เรียกว่า addition assignment operator สะดวกกว่า variable = X + Y แบบเดิม Plus sign และ equals sign ติดกัน? ใน JS มีความหมายเฉพาะ: addition assignment operator JavaScript += Operator คืออะไร? += บวกค่าข้างขวาให้ variable ข้างซ้าย แล้ว

เมธอด JavaScript includes() ค้นหา item ใน array คืนค่า true ถ้าพบ false ถ้าไม่พบ filter() หา item ใน list คืนค่า item ที่หา (ต่างจาก includes() ที่คืน boolean) 2 วิธีเช็ค Array Contains Item includes() filter() includes() เช็คว่า item มีใน array ไหม คืน true/false filter() หา item ใน array

jQuery มี methods มากมายสร้าง dynamic web experience html() method แทนที่ HTML ทั้งหมดภายใน selected element ใช้เมื่ออยากเปลี่ยนสิ่งที่ user เห็นหลัง interact กับหน้า jQuery html() คืออะไร? html() ตั้งค่า HTML contents ของทุก element ใน matched set ควรใช้ specific query เพื่อแทนที่เฉพาะ HTML ที่ต้อ

jQuery each() เป็นวิธี concise วนลูป DOM elements เรียกบน jQuery object (object ที่มี DOM elements 1+ และเข้าถึง jQuery methods ได้) ต้องการ callback function - function ส่งให้ function อีกตัว execute ภายหลัง ใน callback เข้าถึง index และ element ได้ การใช้งานตรงไปตรงมาคล้าย JS loops แต่มีจุดสับสนบ

หลายเหตุผลต้อง disable ปุ่มใน web app: ป้องกันเพิ่มสินค้าหมดสต็อคในตะกร้า หรือไม่ให้คลิกปุ่มซ้ำหลัง actionPerformed jQuery ไม่มี method disable ปุ่มโดยตรง ใช้ prop() method (เพิ่มใน jQuery 1.6) แทน มาแก้ปัญหาการดึง property values ของ selected elements ก่อนหน้านี้ใช้ attr() ดึง attribute values แต่

เมธอด JavaScript alert() (หรือ Window.alert()) แสดง alert dialog box ให้ผู้ใช้ รับ optional message argument แสดงข้อความพร้อมปุ่ม OK ใช้บ่อยสำหรับแจ้ง success, errors alert() ยังใช้เป็น development tool ได้ เช่นวางใน function handle form submission หลัง event.preventDefault() (event.preventDefault(

นักพัฒนาคงเคยใช้ regular JavaScript functions เรียกว่า first-order functions ไม่รับ function เป็น parameter และไม่ return function function hello(name) { return Hello, + name; } console.log(hello(Career Karma)); // Hello, Career Karma บทความนี้พูดถึง Higher Order Functions (HOF): functions ที่ร

นักพัฒนาบ่อยครั้งต้องดึงข้อมูลจาก API ของตัวเองหรือ third-party บทความนี้พูดถึงการใช้ Fetch API ของ browser สำหรับ GET request Fetch API คืออะไร? Fetch API เป็น interface ทำ HTTP requests ไป server จาก web browser (Chrome, Firefox) GET request ส่ง request ไป endpoint บน server แล้วได้ response พร้อ

หากมาจากภาษาอื่นที่มี sleep() native method สำหรับ pause execution JavaScript ไม่มี method นี้ แต่สามารถจำลองได้ 2 วิธี: Promises และ async/await Asynchronous Functions และ setTimeout() JavaScript เป็น single-threaded: มี call stack และ memory heap เพียงอันเดียว อ่านโค้ดบรรทัดต่อบรรทัด ต้อง execute

เมธอด JavaScript filter() สร้าง array ใหม่จาก array เดิม โดยรับ callback function มาตรวจสอบว่าแต่ละ element ควรเพิ่มเข้า array ใหม่หรือไม่ Array: บทนำสรุป JavaScript array เก็บ items 0 หรือมากกว่า items อาจเป็น numbers, arrays อื่น, strings หรือ data types อื่น ใช้ numbered indices เริ่ม 0 เข้าถึ

เมธอด JavaScript substring() ดึงช่วงตัวอักษรระหว่าง 2 index positions สามารถดึงจนถึงท้าย string ได้โดยไม่ระบุ end index วิธีใช้ JavaScript substring() substring() ดึงส่วนของ string ระหว่าง 2 index values โดยไม่ระบุ end index จะดึงทุกตัวอักษรหลัง start index รับ 2 arguments: ตำแหน่งเริ่มต้น (s

ใน JavaScript ใช้ Intl.NumberFormat() constructor ระบุ currency ที่ต้องการให้ number แทน ใช้ property style: currency เพื่อจัดรูปแบบเงิน Constructor และ Parameters new Intl.NumberFormat([locales[, options]]) เพราะเป็น constructor ต้องใช้ keyword new สร้าง object สำหรับ specialized number formattin

บางครั้งต้อง refresh webpage ด้วย JavaScript ใช้ location object เรียกเมธอด reload() ตัวอย่างโค้ดเต็ม <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=width=device-width> <title>Page Reload Demo</title> </head> <