เพื่อปิดการทำงานของแอนิเมชันทั่วไป (globally) โดยใช้ jQuery ให้ใช้เมธอด jQuery.fx.off เพื่อเปิดใช้งานแอนิเมชัน: $(#enable).click(function(){ jQuery.fx.off = false; }); เพื่อปิดการทำงานของแอนิเมชัน ให้ตั้งค่า jQuery.fx.off เป็น true: $(#disable).click(function(){ jQuery.fx.off = true; })

แม้ GatsbyJS จะเป็น React framework แต่การรู้วิธีเพิ่ม JavaScript แบบกำหนดเองในโปรเจกต์ Gatsby อาจมีประโยชน์ อาจคุณเพิ่งย้ายเว็บเก่าไป Gatsby และมี custom vanilla JavaScript เยอะที่ไม่ค่อยอยากแปลงเป็น ReactJS syntax ทันที — ผมเข้าใจ โชคดีที่การเพิ่ม plain JavaScript ลง Gatsby ไม่ยากเลย คุณเพียงต้อง

การเพิ่มสไตล์หลายอย่างให้อิลีเมนต์ด้วย vanilla JavaScript แบบดิบ อาจรู้สึก clunky (ไม่เป็นระบบ) วิธีทั่วไปที่สุดที่ผมเห็นในการ styling อิลีเมนต์ด้วย plain JavaScript คือ ดึงอิลีเมนต์เป้าหมาย แล้วเพิ่มสไตล์ทีละอย่าง: // Grab target element (here via its class attribute) const buttonAddToCart = docume

มาเรียนรู้วิธีดึงอิลีเมนต์สุดท้ายของอาร์เรย์ด้วย JavaScript แบบดิบ 3 วิธีต่างกัน ก่อนอื่นมาสร้างอาร์เรย์ของรายการ เพื่อมีสิ่งให้ทำงาน ในกรณีนี้ใช้รายการออกกำลังกาย สร้าง Exercise Array const exercises = [pull-up, push-up, squat, deadlift] หากเราอยากดึงตัวแรกในรายการ เราใช้ exercises[0] ตัวที่สองใช้

มีหลายวิธีที่เราสามารถเรียกหรือรันฟังก์ชันหลังจากเวลาที่กำหนดด้วย JavaScript ผมจะแสดง 2 เมธอดเวลาของ JavaScript คือ setTimeout() และ setInterval() ความแตกต่างระหว่างเมธอดเวลาทั้งสองคือ: setTimeout() รันฟังก์ชัน ครั้งเดียว หลังจากรอจำนวน milliseconds ที่ระบุ setInterval() รันฟังก์ชันซ้ำๆ ตลอดเวลาในช

เรียนรู้วิธีล้างอาร์เรย์ด้วย JavaScript การล้างอาร์เรย์ด้วย JavaScript ไม่สามารถง่ายกว่านี้ได้ สมมติว่าคุณมีอาร์เรย์พร้อมรายการออกกำลังกาย: let exerciseList = [squat, deadlift, push-up, pull-up] ใช้ console.log(exerciseList) พิมพ์รายการออกกำลังกายออกมายืนยันว่าทำงาน ตอนนี้เพื่อล้างอาร์เรย์ของคุณ ให้

เพื่อดึงวันที่วานนี้ด้วย JavaScript คุณเพียงต้องดึงวันที่ปัจจุบัน แล้วลบหนึ่งวันออกไป เช่นนี้: const today = new Date() const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) today.toDateString() yesterday.toDateString() ตอนนี้ลอง console log วันที่วานนี้: console.log(yesterday

เรียนรู้วิธี disable หรือ enable ปุ่ม ขึ้นอยู่กับว่าช่องกรอกว่างหรือไม่ เมื่อคุณกรอกฟอร์มบนเว็บ คุณจะสังเกตว่าบ่อยครั้งคุณไม่สามารถส่งฟอร์มได้จนกว่าช่องกรอกข้อความทั้งหมดหรือบางส่วนจะถูกกรอก (required fields) หลักการเดียวกันใช้กับ checkboxes และ radio buttons นี่คือวิธีควบคุม state ของปุ่ม (enabled

The Ternary Operator คือ JavaScript operator ที่ช่วยให้คุณประหยัดโค้ดมากใน if/else statements Syntax: condition ? expressionIfTrue : expressionIfFalse ตัวอย่างเปรียบเทียบ: = 18 ? adult : minor; Ternary operator เหมาะสำหรับ simple conditional assignments สร้าง code ให้กระชับและอ่านง่าย (ถ้าไม่ซับซ้อน

เรียนรู้วิธี auto-focus ช่องกรอกข้อมูลแรกเมื่อโหลดหน้าในฟอร์ม HTML หนึ่งในสมมติฐานพื้นฐานของ UX Design ที่ดีคือ ประหยัดขั้นตอนให้มากที่สุดจากจุด A ไป B เพื่อให้ผู้ใช้ได้สิ่งที่ต้องการ เร็ว ไม่มีใครชอบกรอกฟอร์ม โดยเฉพาะฟอร์มยาวๆ มาช่วยประหยัดเวลาผู้ใช้เล็กน้อยโดย auto-focus ช่องกรอกแรกในฟอร์ม HTML เม

Gatsbyjs และ Next.js เป็นหัวข้อร้อนแรงที่สุดในการพัฒนาเว็บตอนนี้ ผมเห็นหลายคนบนกระดานข่าวและคอมเมนต์ YouTube ถามว่าทำไมต้องเลือกตัวหนึ่งมากกว่าอีกตัว ผมดูแลโลกของ Next.js และ Gatsbyjs มา 12 เดือนแล้ว และเชื่อว่าทำให้ผมมีคุณสมบัติพอที่จะออกมาพูดในเรื่องนี้ เมื่อพูดถึงการใช้ Next.js หรือ Gatsby สำหรับ

เรียนรู้ว่า JavaScript Object Literals คืออะไร มีบางแนวคิดในการเขียนโปรแกรมที่ตั้งชื่อไว้ทำให้คุณคิดว่ามันซับซ้อนกว่าจริง Object Literals ไม่ซับซ้อนกว่ารายการซื้อของที่ตลาดมากนัก Object Literal คืออะไร? Object เป็นประเภทค่าพิเศษใน JavaScript ที่สามารถมีการเชื่อมต่อกับค่าอื่นๆ ได้ Object Literal คือค

เรียนรู้ว่า JavaScript Dot Notation คืออะไร อย่าใส่ใจมากไปที่ส่วน notation ของ dot notation มันอาจทำให้ดูซับซ้อนกว่าจริง Dot notation คือเพียงการอ่านหรือกำหนดค่าให้อ็อบเจ็กต์โดยใช้จุด (.) สมมติว่าคุณมีอ็อบเจ็กต์ชื่อ dog: const dog = { name: Naya, age: 2 } ตอนนี้เราอยากอ่านค่าหนึ่งของมัน เช่น อายุของ

เรียนรู้ว่าความแตกต่างระหว่าง arguments และ parameters ใน JavaScript คืออะไร และว่ามันสำคัญไหมที่จะใช้คำศัพท์ไหน JavaScript argument/parameter คืออะไร? เมื่อคุณ execute ฟังก์ชันใน JavaScript คุณมีตัวเลือกในการส่งข้อมูลบางส่วนไปยังฟังก์ชันขณะที่เรียกมัน ข้อมูลที่คุณส่ง ถูกอ้างอิงว่าเป็น argument หรือ

เรียนรู้ความแตกต่างระหว่าง function declarations และ function expressions ใน JavaScript นี่คือ function expression: // Function expression let excuteMe = function () { console.log(Function Expression) } นี่คือ function declaration: // Function declaration function excuteMe() { console.log(Function D

ใน JavaScript Literal คือเมื่อคุณอ้างอิงค่าโดย เขียนมันลงไปในไฟล์สคริปต์โดยตรง (literally) มีประเภท Literals ต่างๆ: 4 เป็น number literal Icecream เป็น string literal {color: red} เป็น object literal อ่านเพิ่มเติมเกี่ยวกับ object literals ที่นี่

Variable ใน JavaScript คืออะไร และมันทำหน้าที่อะไร? ใน JavaScript และภาษาโปรแกรมมิ่งทั่วไป ตัวแปร (variable) คือภาชนะที่คุณใช้เก็บ references (อ้างอิง) ไปยัง values (ค่า) เพื่อให้คุณทำอะไรกับมันได้เมื่อต้องการ ค่าเหล่านี้อาจเป็นอะไรก็ได้ ตั้งแต่สตริง (ข้อความ) ตัวเลข ฟังก์ชัน แม้แต่ตัวแปรอื่นๆ ตัวอย

เรียนรู้ว่าอะไรถือว่าเป็น value ใน JavaScript ใน JavaScript คำว่า value เป็นแนวคิด abstract (กว้าง) เพราะหลายสิ่งถือว่าเป็น values และมี ประเภท ของ values หลายอย่าง เช่น: ตัวเลข (numbers) สตริง (strings) ฟังก์ชัน (functions) อ็อบเจ็กต์ (objects) บูลีน (boolean) null undefined หากคุณสงสัยประเภทขอ

เรียนรู้ความแตกต่างระหว่าง strict equality vs loose equality operators ใน JavaScript และทำไมมันถึงสำคัญ ใน JavaScript คุณสามารถใช้ equality operators สองตัวเพื่อเปรียบเทียบค่า คือ loose equality operator == (double equals) และ strict equality operator === (triple equals) พวกมันดูเหมือนกันบนผิว แต่จร

เรียนรู้ว่า Expression ใน JavaScript คืออะไร และว่าบางคำทำให้สิ่งต่างๆ ดูซับซ้อนกว่าจริง ใน JavaScript Expression คือเพียงวิธีหนึ่งในการถามคำถามที่ได้รับคำตอบเป็นค่า — และจะเป็น ค่าเดี่ยว เสมอ นี่คือ Expression: console.log(5 + 5) // result: 10 สิ่งที่เกิดขึ้นข้างบน: คุณถาม: JavaScript, 5 + 5 คือเท