คุณต้องรู้วิธีเปลี่ยน text หรือ HTML ที่แสดงบนหน้าเพื่อทำให้เว็บไซต์ interactive นั่นคือที่มาของ attributes innerText และ innerHTML Attributes ทั้งสองทำให้เปลี่ยน text และ HTML code ของ DOM element ได้ง่าย บทความนี้จะสอนการใช้ innerText และ innerHTML ใน JavaScript JavaScript innerHTML คืออะไร? inn

เมธอด JavaScript split() แบ่ง string ให้เป็น array ของ substrings substrings จะถูกเพิ่มเข้า array ใหม่ split() คืนค่า array ใหม่นี้ String: บทนำสรุป Strings เป็น sequence ของตัวอักษรหนึ่งขึ้นไป อาจรวม letters, symbols, numbers ตัวอักษรแต่ละตัวเข้าถึงได้ด้วย index number เริ่มจาก 0 ตัวอย่างการ ind

เมธอด JavaScript Object.keys() ดึง keys จาก Object และคืนค่าเป็น array ที่เก็บ keys เหล่านั้น ลำดับของ keys ใน array จะตรงกับลำดับที่ปรากฏใน Object เดิม JavaScript Objects: บทนำสรุป Objects (ตัว O ใหญ่) เป็น mapping data type ใน JavaScript Map keys ไปยัง values Values ที่เก็บได้รวมถึง strings, nu

jQuery addClass() ทำงานอย่างไร? เมธอด addClass() ของ jQuery ให้นักพัฒนาสามารถเปลี่ยนแปลง element ได้ในลักษณะกว้างขึ้น ตามชื่อเมธอด เราสามารถเพิ่ม attribute class ให้กับ element ที่เลือกได้ ทำไมต้องทำอย่างนี้? สมมติมีหน้าเว็บที่มี element ต่างๆ เช่น title, paragraph, และปุ่ม พร้อม stylesheet ที่ใช้ c

jQuery: บทนำสั้นๆ jQuery เป็นไลบรารี JavaScript ที่ช่วยให้นักพัฒนาสามารถจัดการ DOM, เขียน event handler, แอนิเมชัน และ AJAX request ได้ด้วยโค้ดเพียงไม่กี่บรรทัด ซึ่งทำได้ด้วย selectors และ methods ที่เป็นเอกลักษณ์ของ jQuery API หนึ่งใน methods นั้นคือ append() jQuery append() คืออะไร? เมธอด append(

เวลาสร้างเว็บแอป จะต้องสร้างข้อมูลจาก input ของผู้ใช้ เช่น สมัครสมาชิก, บันทึกสูตรอาหาร ต้องใช้ HTTP POST request ส่งข้อมูลจากฟอร์มไป server/API บันทึกลง database Default form submit ต้อง redirect/refresh หน้า jQuery post() ทำ AJAX request ส่งข้อมูล รับ response จัดการแสดงผล โดยไม่ต้อง refresh! รา

JavaScript String Interpolation คือการฝัง expression ลงในสตริง ใช้ Template Literal (backticks) เพื่อฝังค่า variables, คำนวณทางคณิตศาสตร์, หรือ expressions อื่นๆ Template Literal Syntax ใช้ backticks ` แทน quotes ตัว expression ใส่ใน ${...} `This is a string. Here is the value of 9 + 10: ${9 + 10}.

Java insertion sort ตรวจสอบแต่ละรายการในลิสต์ หากรายการน้อยกว่ารายการก่อนหน้า จะสลับที่ มิฉะนั้นคงที่ และเปรียบเทียบคู่ถัดไป คอมพิวเตอร์เก่งการจัดเรียงลิสต์ ใช้ loops ค้นหาและเปลี่ยนลำดับจนได้ลำดับที่ต้องการ มี sorting algorithms มาตรฐานหลายแบบ Insertion sort เป็นหนึ่งใน common algorithms Insertio

มีหลายวิธี redirect หน้าเว็บ: client-side ด้วย meta tag HTML, server-side ด้วย HTTP redirect บทความนี้ดูวิธี redirect ด้วย JavaScript 2 วิธีหลัก (ใช้ window.location) 1. location.href กำหนด URL ให้ location.href ในฟังก์ชันที่รันเมื่อโหลดหน้า <body onload=handleRedirect(https://example.com)>

JavaScript functions คือบล็อกโค้ดที่กำหนดเอง ใช้ซ้ำได้ ทำให้โค้ด modular และจำเป็นสำหรับ OOP สร้างได้ 2 แบบ: Function Declarations และ Function Expressions Function Declarations กำหนดชื่อฟังก์ชัน เริ่มด้วย keyword function ตามด้วยชื่อ function nameOfYourFunction() { // โค้ดฟังก์ชัน } ชื่อฟังก์ช

การสร้างเว็บฟอร์ม งานที่พบบ่อยคือการดึงค่าจาก dropdown (select element) บทความนี้สอนวิธีทำด้วย JavaScript Dropdown HTML Element ใช้ tag <select> และ children <option> <select name=fruits id=fruits> <option value=>--select--</option> <option value=avocado>Avoc

ใน JavaScript มี 4 วิธีเปรียบเทียบความเท่ากัน บทความนี้อธิบาย operators แบบต่างๆ, type coercion, และกรณีพิเศษ (edge cases) ที่พบในสัมภาษณ์งาน 1. Strict Equality (===) เปรียบเทียบ ทั้งค่าและ type const strictComparison = (a, b) => { console.log(typeof a); // number console.log(typeof b); // s

เมื่อเริ่มเขียน React components อาจเจอ error: Cannot read property setState of undefined และ this.setState is not a function บทความนี้เสนอวิธีแก้ 2 วิธี สาเหตุ Error เกิดเพราะ method ใน React Component ไม่ได้ bind this ถูกต้อง โค้ดที่ทำให้ Error import React from react; class App extends React.Co

โปรแกรมแรกที่เขียนเพื่อทดสอบ Node.js คือ Hello World มี 2 วิธี: ใน terminal หรือใน code editor (VS Code, Vim, ฯลฯ) ต้องติดตั้ง Node.js ก่อน วิธี 1: Terminal พิมพ์ node ใน terminal เพื่อเริ่ม Node REPL พิมพ์ console.log(Hello World) กด Enter จะเห็น Hello World บรรทัดถัดไป (บรรทัดต่อมาบอก unde

ใช้ Date Object เปรียบเทียบวันที่และเวลา เพื่อ render logic แบบ conditional บทความนี้ดูวิธีเปรียบเทียบ 2 วันที่ ว่าตัวไหนมากกว่า/น้อยกว่า การตั้งค่า Date Object JavaScript มี built-in Date Object สร้างด้วย: const date = new Date(09-20-2020); // 2020-09-20T07:00:00.000Z เวลา (หลัง T) แตกต่างตาม time

ใน JavaScript มีหลายวิธีกรอง whitespace ออกจากสตริง บทความนี้แสดง 4 วิธีหลัก: ใช้ Loops ใช้ Array Methods: Split/Filter/Join ใช้ Array Methods: Split/Join ใช้ Replace Method กับ Regular Expression 1. ใช้ Loops (for loop) ประกาศตัวแปรสตริงใหม่ก่อนลูป เพื่อสะสมตัวอักษรที่ไม่ใช่ whitespace c

บ่อยครั้งที่เขียนฟังก์ชันต้องการสร้าง ranges (ช่วงข้อมูล) เพื่อทำงานกับ data Range แทนข้อมูลใน array/object ด้วยค่าเริ่มต้นและค่าสิ้นสุด หลายภาษามี built-in method เช่น Ruby [a,b,c,d,e] แต่ JavaScript ไม่มี built-in สำหรับ range มีหลายวิธีสร้างเอง 3 วิธีดังนี้ 1. _.range() - Lodash Library ใช้ _.

เมธอด document.getElementById() ใช้เลือก element จาก HTML DOM หากสะกดผิด จะได้ error document.getElementByID is not a function สาเหตุ document.getElementById() เป็น case-sensitive ต้องใช้ I ใหญ่ d เล็กเท่านั้น รูปแบบอื่นไม่ได้: document.getelementbyid() document.getElementByID() ← error นี้

JavaScript ใช้ brackets ระบุจุดเริ่มต้นและสิ้นสุดของ function calls หากขาด syntax ก่อนปิดฟังก์ชัน จะได้ error SyntaxError: missing ) after argument list สาเหตุของ Error นี้ ใส่ comma ท้าย argument list แต่ไม่มี argument ต่อมา JavaScript คาดหวัง argument หลัง comma ปิด comma ที่คั่น arguments ไ

ใน JavaScript TypeError คืออ็อบเจ็กต์แทนข้อผิดพลาดจากการดำเนินการที่ไม่สามารถทำได้ ปกติเพราะค่าใน operation ไม่ใช่ type ที่คาดหวัง ชนิดข้อมูล 9 ชนิดใน JavaScript (ECMAScript) undefined: ค่าที่กำหนดให้ตัวแปรที่ประกาศแต่ยังไม่กำหนดค่า Boolean: true หรือ false Number: ตัวเลข String: ลำดับตัวอ