ใช้ Event Delegation บน document ตรวจสอบว่า Click target ไม่ใช่ Element ที่ต้องการ แล้วซ่อนมัน ตัวอย่างจากบทความ <!DOCTYPE html> <html> <body> <script> window.onload = function(){ var hideMe = document.getElementById(hideMe); document.onclick = fu
ใช้ Event Delegation บน document ตรวจสอบว่า Click target ไม่ใช่ Element ที่ต้องการ แล้วซ่อนมัน ตัวอย่างจากบทความ <!DOCTYPE html> <html> <body> <script> window.onload = function(){ var hideMe = document.getElementById(hideMe); document.onclick = fu
JavaScript ไม่มี Associative Array จริงๆ Array ใน JS ใช้ Numeric Index (0, 1, 2...) เท่านั้น สำหรับ Key-Value ให้ใช้ Object หรือ Map แทน ตัวอย่างจากบทความ (Array แบบปกติ) <!DOCTYPE html> <html> <body> <p id="test"></p> <script> var dept
Logical OR (||) คืนค่า true ก็ต่อเมื่อ อย่างน้อยหนึ่ง operand เป็น truthy มิฉะนั้นคืนค่า operand ตัวสุดท้าย (Short-circuit evaluation) ตัวอย่างจากบทความ <html> <body> <script> var a = true; var b = false; document.write((a || b) => ); result = (a |
Logical AND (&&) คืนค่า true ก็ต่อเมื่อ ทั้งสอง operand เป็น truthy มิฉะนั้นคืนค่า operand แรกที่เป็น falsy (Short-circuit evaluation) ตัวอย่างจากบทความ <html> <body> <script> var a = true; var b = false; document.write((a && b) => ); result = (a &
ใช้ setTimeout() เพื่อหน่วงเวลาการเรียกฟังก์ชัน รันเพียงครั้งเดียวหลังจากเวลาที่กำหนด ไวยากรณ์ setTimeout(functionName, milliseconds, arg1, arg2, arg3...) Parameters: functionName - ฟังก์ชันที่จะรัน (function reference หรือ callback) milliseconds - เวลาหน่วงในมิลลิวินาที (1000 = 1 วินาที) a
Multiplication Assignment (*=) คูณค่าด้านขวากับตัวแปรด้านซ้าย แล้วเก็บผลลัพธ์กลับไปที่ตัวแปรด้านซ้าย ตัวอย่างจากบทความ <html> <body> <script> var a = 33; var b = 10; document.write(Value of a => (a *= b) => ); result = (a *= b); document.w
ใช้ Default Parameters (ES6) เพื่อประกาศ Optional Parameters ได้โดยตรงใน Function Signature ตัวอย่างจากบทความ <html> <body> <script> // default is set to 1 function inc(val1, inc = 1) { return val1 + inc; } document.write(inc(10, 10)); // 20
ใช้ arguments object (array-like) หรือ Rest Parameters (...args) (ES6) เพื่อรับจำนวน arguments ไม่จำกัด ตัวอย่างจากบทความ (arguments object) <html> <body> <script> function functionArgument(val1, val2, val3) { var res = ; res += Expected Arguments: + f
ใช้ window.top หรือ window.parent เพื่อเข้าถึงฟังก์ชันในหน้าผู้ปกครอง (Parent Window) จาก iframe ตัวอย่างจากบทความ Click</a> </iframe> </body> </html> window.top vs window.parent Propertyคำอธิบาย window.topหน้าต่างบนสุด (Top-most window) - ข้ามหลายชั
มาตรฐานที่ใช้กันอย่างกว้างขวางคือ JSDoc ใช้บล็อกคอมเมนต์ /** ... */ พร้อมแท็ก (tags) เพื่ออธิบายฟังก์ชัน พารามิเตอร์ ค่าคืน และอื่นๆ ตัวอย่างจากบทความ (JSDoc Format) /** * Adds two numbers * @param {Number} num1 * @param {Number} num2 * @return {Number} sum */ function sum(num1, num2) { retu
ไม่จำเป็น JavaScript function สามารถไม่มี return statement ได้ (implicit return undefined) หรือมี return โดยไม่มีค่า ก็ได้ ตัวอย่างจากบทความ <html> <head> <script type="text/javascript"> function concatenate(first, last) { var full; full = fir
ใช้ JSON.parse() แปลงสตริง JSON เป็น JavaScript Object และ JSON.stringify() ทำทางกลับ ตัวอย่างจากบทความ <!DOCTYPE html> <html> <body> <script> myData = JSON.parse({event1:{title:Employment period,start:12/29/2011 10:20 ,end:12/15/2013 00:00 },event2:{title:Employ
JavaScript มี 2 ออเปอเรเตอร์เปรียบเทียบ: Loose Equality (==) และ Strict Equality (===) ควรใช้ === (Strict) เป็นหลัก == (Abstract Equality / Loose Equality) ทำ Type Coercion (แปลงชนิดข้อมูล) ก่อนเปรียบเทียบ 5 == 5 // true 5 == 5 // true (string → number) 5 == 5 // true 0 == false
JavaScript มี 2 วิธีหลักในการสร้างฟังก์ชัน: Function Declaration และ Function Expression ซึ่งแตกต่างกันในการ Hoisting และการใช้งาน Function Declaration function sayHello(name, age) { document.write(name + is + age + years old.); } คุณสมบัติ Hoisting: ฟังก์ชันถูกยกไปด้านบนสุดของ scope เรียก
ใช้ getMonth() ดึงเดือน (0-11) แล้วบวกจำนวนเดือนที่ต้องการ แล้วตั้งค่ากลับด้วย setMonth() ซึ่งจัดการ year rollover อัตโนมัติ ตัวอย่างจากบทความ (Basic) <!DOCTYPE html> <html> <body> <script> var d, e; d = new Date(); document.write(d); e = d.getM
ใช้ isNaN() ตรวจสอบว่าค่า ไม่ใช่ ตัวเลข (Not-a-Number) คืน true ถ้าไม่ใช่ตัวเลข, false ถ้าเป็นตัวเลข ตัวอย่างจากบทความ <!DOCTYPE html> <html> <body> <button onclick="display()">Check</button> <p id="test"></p> <script>
ใช้ parseInt() แปลงสตริงเป็นจำนวนเต็ม คืน NaN ถ้าแปลงไม่ได้ ตัวอย่างจากบทความ <!DOCTYPE html> <html> <body> <button onclick="display()">Check</button> <p id="demo"></p> <script> function display() { var
ใช้ decodeURI() สำหรับถอดรหัส URL ทั้งหมด และ decodeURIComponent() สำหรับส่วนประกอบ ตัวอย่างจากบทความ <!DOCTYPE html> <html> <body> <button onclick="display()">Check</button> <p id="demo"></p> <script> function
Operator ++ และ -- ควรหลีกเลี่ยงเพราะอาจให้ผลลัพธ์ไม่คาดคิด เนื่องจาก precedence, side effects, และความสับสนระหว่าง prefix/postfix ตัวอย่างปัญหาจากบทความ <html> <body> <script> var a = 5; var b = ++a; // b = 6, a = 6 var c = a++; // c = 6, a = 7 var
Logical NOT Operator (!) กลับสถานะตรรกะของ operand: true→false, false→true และแปลงค่าให้เป็น Boolean ตัวอย่างจากบทความ <html> <body> <script> var a = true; document.write(a = ); document.write(a); // true result = !a; document.write(<b