ตอนสร้าง web application อาจมีเวลาที่อยากทำ HTTP request เข้าถึง external resource ตัวอย่าง สมมติคุณทำบล็อก อาจอยากเรียก API ดึงลิสต์ comments แสดงบนแต่ละ blog post Axios เป็น popular JavaScript library สำหรับทำ web requests ในคู่มือนี้ เราจะอธิบายวิธีใช้ axios ทำ GET request พร้อมตัวอย่างแสดงการทำ

JavaScript arrow functions เป็นวิธีประกาศฟังก์ชัน Arrow functions ใช้เขียน JavaScript functions ได้มีประสิทธิภาพมากขึ้น และ syntax สั้นกระชับ Arrow function syntax รองรับ implicit returns สำหรับ single expressions ฟังก์ชันคือบล็อกโค้ดที่ดำเนินการเฉพาะเจาะจงและ/หรือคืนค่า โปรแกรมเมอร์ใช้ฟังก์ชันสร้า

Countdown timers ใช้ทั่วไปบนอินเทอร์เน็ตโดยคนที่อยากนับถอยหลังสู่ major event คุณอาจใช้ countdown timer นับถอยหลังสู่การ launch เว็บไซต์ใหม่ หรือ marking การประกาศผลิตภัณฑ์ มีความเป็นไปได้มากมาย ในคู่มือนี้ เราจะแสดงวิธีสร้าง countdown timer ใน JavaScript ด้วยสามเทคโนโลยี: HTML, CSS และ JavaScript

การเขียนโค้ด แม้จะสนุก แต่ก็อาจน่าเบื่อได้ มีวันที่เริ่มเขียนโค้ด พบว่าบางอย่างไม่รัน และหงุดหงิดมาก ยิ่งกว่านั้นคือโค้ดรันแต่ไม่รู้ว่าทำไมมันไม่ทำงานถูกต้อง มีบางอย่างในโค้ดที่ต้องแก้ นี่คือที่มาของ JavaScript console console ช่วยติดตามว่ากำลังเกิดอะไรขึ้นในโค้ด ทำให้ง่ายต่อการหาว่าผิดที่ไหน ในค

Promises ถูกนำเข้ามาใน ES6 อนุญาตให้เขียน asynchronous code ได้ง่ายโดยไม่ต้องจัดการกับ callback functions หลายระดับ ด้วย Promises ไม่ต้องกังวล multi-level callback functions ที่ยากต่อการเขียนและบำรุงรักษา มีฟีเจอร์อีกอย่างใน JavaScript ทำให้เขียน asynchronous code ด้วย Promises ง่ายขึ้น: async/awai

Web applications อาจซับซ้อนได้เร็วมาก สิ่งที่ผมเรียนรู้จากการเป็น developer คือ มีอะไรทำได้มากมายกับ plain JavaScript ถ้าให้โอกาส localStorage API เป็น powerful built-in function ที่ลดความจำเป็นต้องใช้ databases สำหรับแอปพลิเคชันง่ายๆ ที่ไม่ต้องการ server เราสามารถใช้ API นี้บันทึกข้อมูล locally ซึ

Default parameters ทำให้การทำงานกับฟังก์ชันง่ายขึ้นมาก ด้วย default parameters คุณสามารถบอกฟังก์ชันได้ว่า ควรใช้ parameters อะไรในกรณีที่คุณไม่ได้ระบุใดๆ นี้ช่วยป้องกัน errors และทำให้โค้ดอ่านง่ายขึ้น JavaScript นำ default parameters มาใน ES2015 อนุญาตให้คุณ initialize ฟังก์ชันด้วยค่า predefined va

getElementById getElementByClass คุณอาจเคยได้ยินฟังก์ชันเหล่านี้มาก่อน ทั้งคู่ช่วยเลือกองค์ประกอบเฉพาะใน JavaScript เมื่อเลือกองค์ประกอบแล้ว คุณสามารถเปลี่ยนเนื้อหา แก้ไขสถานะ หรือทำให้มันหายไปได้ มีอีกฟังก์ชันหนึ่งสำหรับเลือก item บน webpage ใน JavaScript: querySelector ฟังก์ชันนี้มีพี่น้องชื่อ q

โปรแกรมเมอร์ชอบลดการซ้ำซ้อนในโค้ด ยิ่งซ้ำยิ่งทำให้โค้ดบำรุงรักษายาก และโปรแกรมทำงานช้าลง นั่นคือเหตุผลที่มี methods หลายตัวใน JavaScript สำหรับวนลูปผ่านข้อมูล หนึ่งใน methods นี้คือ map() method วิธีนี้วนลูปผ่าน array ที่มีอยู่ และ執行ฟังก์ชันเฉพาะกับทุก item ใน array นั้น ในคู่มือนี้ เราจะพูดถึงวิธ

คอมพิวเตอร์เก่งเรื่องคณิตศาสตร์มาก อยู่ในเลือดของพวกมันเลยทีเดียว ถึงแม้ว่าคอมพิวเตอร์จะขับเคลื่อนด้วย 0 และ 1 ที่เราเรียกว่า binary เมื่อคุณเขียนโค้ด น่าจะมีเวลาที่คุณต้องการดำเนินการทางคณิตศาสตร์บางอย่าง ใน JavaScript คณิตศาสตร์มาน่ะทุกที่ คุณสามารถใช้คณิตศาสตร์คำนวณขนาดหน้าต่าง ตรวจสอบว่าผู้ใช้พ

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

Object ใน JavaScript เก็บข้อมูลเป็น Key-Value pairs ใส่ฉลากข้อมูลได้ เข้าถึงง่าย ใช้แทน Array หลายมิติ สร้าง Object // Object Literal (แนะนำ) const cookie = {}; // Object Constructor const cookie = new Object(); // พร้อมข้อมูล const raspberry_white_choc = { name: Raspberry White Chocolate Chip,

Cookies เก็บข้อมูลผู้ใช้ในเบราว์เซอร์ เช่น session login ต้องมี name และ value อย่างน้อย รูปแบบ Cookie Authentication=AUTHENTICATION_KEY; domain=careerkarma.com อ่าน Cookies console.log(document.cookie); // แสดงทั้งหมด ไม่มี API ดึง cookie เดี่ยว ต้องเขียนฟังก์ชัน parse เอง ตั้งค่า Cookie // พื้น

JavaScript ใช้ Date object จัดการวันที่และเวลา มีเมธอดมากมายสำหรับดึงและตั้งค่า สร้าง Date Object // วันที่/เวลาปัจจุบัน var now = new Date(); // Wed Jun 24 2020 10:49:46 GMT+0100 (British Summer Time) // จาก Timestamp (milliseconds since Jan 1, 1970) var date = new Date(1609502400000); // จาก St

Syntax คือกฎการเขียนโค้ด JavaScript ให้ถูกต้อง คอมพิวเตอร์ไม่สามารถเดาเจตนาได้ ต้องเขียนตามกฎอย่างเคร่งครัด ทำไม Syntax จึงสำคัญ โค้ดผิด Syntax → Error → โปรแกรมหยุดทำงาน Syntax ที่สม่ำเสมอ ทำให้โค้ดอ่านง่าย ทีมงานทำงานร่วมกันได้ กฎหลัก 5 ข้อ 1. Whitespace (ช่องว่าง) เว้นวรรคระหว่าง keyword, va

โจทย์: เขียนฟังก์ชัน reverseString(str) คืนค่า String ที่กลับตัวอักษร เช่น Hello World! → !dlroW olleH วิธีที่ 1: For Loop (มาตรฐาน) = 0; i--) { newStr += str[i]; } return newStr; } วนจาก index สุดท้ายลงมา 0 รวมตัวอักษรทีละตัว วิธีที่ 2: ES6 map() { let swapIndex = array.length - inde

เมธอด document.getElementById() ใช้เลือก Element จาก HTML DOM ตาม ID ที่ระบุ ID ต้องไม่ซ้ำในหน้าเว็บ รูปแบบการใช้งาน const element = document.getElementById(elementId); ข้อผิดพลาดที่พบบ่อย Case-sensitive: ต้องเขียน getElementById (Id ตัวเล็ก) ไม่ใช่ getElementByID ไม่ต้องใส่ #: ใช้ getElementById

Array ใน JavaScript คืออ็อบเจกต์ที่เก็บข้อมูลหลายค่าในตัวแปรเดียว เรียงลำดับมี index เริ่มจาก 0 สร้าง Array // วิธีที่ 1: Array Literal (แนะนำ) let fruits = [Banana, Grapes, Melon]; // วิธีที่ 2: Array Constructor let berries = new Array(Strawberry, Blueberry, Gooseberry); Array เก็บข้อมูลหลายประเ

JavaScript Class เป็น Syntactic Sugar ของ Prototype-based OOP ทำให้เขียนโค้ดคลาสได้เหมือนภาษา OOP ทั่วไป ใช้ใน React, Next.js มาก Class vs Function Class และ Function เหมือนกันพื้นฐาน แตกต่างแค่ keyword: const PlayerFunction = function() {} const PlayerClass = class {} // ทั้งคู่ prototype เหมือนกั

Fetch API เป็นวิธีใหม่ใน JavaScript สำหรับส่ง HTTP Request (Ajax) โดยไม่ต้องติดตั้ง Library เพิ่ม รองรับทุกเบราว์เซอร์สมัยใหม่ GET Request ด้วย Fetch ใช้ JSONPlaceholder API ทดสอบ console.log(json)); ผลลัพธ์: { body: quia et suscipit..., id: 1, title: sunt aut facere..., userId: 1 } อธิบ