เรียน HTML CSS JavaScript ฟรี Archives

jQuery Event ที่ใช้งานบ่อยๆ

jQuery มี Event Methods หลากหลายที่ช่วยให้การจัดการกับเหตุการณ์ (events) บนเว็บเพจง่ายขึ้น โดย Event Methods เหล่านี้จะทำให้เราสามารถกำหนดการทำงานเมื่อเกิดเหตุการณ์ต่าง ๆ เช่น เมื่อผู้ใช้คลิกเมาส์ กดแป้นพิมพ์ หรือทำการโต้ตอบอื่น ๆ

มาดูรายละเอียดของ Event Methods ที่สำคัญใน jQuery

1. .on()

.on() เป็นวิธีการหลักที่ใช้เพื่อจัดการกับหลายเหตุการณ์ในหลายองค์ประกอบ (elements) ใน jQuery มันสามารถใช้เพื่อจับ event หลายชนิดใน selector เดียว

การใช้งาน

$("selector").on("event", function(){
    // คำสั่งที่จะทำงานเมื่อเกิด event
});

ตัวอย่าง

$("#myButton").on("click", function(){
    alert("Button clicked!");
});

ในตัวอย่างนี้ เมื่อมีการคลิกปุ่มที่มี id ว่า myButton จะมีการแสดงข้อความแจ้งเตือนออกมา

ตัวเลือก (Selectors) ใน jQuery

ตัวเลือกใน jQuery เป็นฟีเจอร์ที่ทรงพลังมาก ช่วยให้นักพัฒนาสามารถค้นหาและจัดการกับองค์ประกอบ HTML ได้อย่างง่ายดายและรวดเร็ว คล้ายกับตัวเลือกใน CSS แต่มีความสามารถเพิ่มเติมในการทำงานร่วมกับ DOM (Document Object Model) ได้ นี่คือตัวอย่างการใช้งานตัวเลือกต่าง ๆ ของ jQuery แบบละเอียด

ตัวเลือกพื้นฐาน (Basic Selectors)

ตัวเลือกแท็ก (Element Selector)

รูปแบบ $("element")

ตัวอย่าง

$("p")

เลือกแท็ก <p> (ย่อหน้าข้อความ) ทุกตัวในหน้าเว็บ

ตัวเลือก ID (ID Selector)

รูปแบบ $("#id")

ตัวอย่าง

$("#header")

เลือกองค์ประกอบที่มี id="header" ซึ่งระบุ ID เฉพาะ

เริ่มเขียน jQuery Syntax

jQuery เป็นไลบรารี JavaScript ที่ช่วยให้การเขียนโค้ดง่ายขึ้น โดยมี syntax ที่ใช้งานง่ายและย่อส่วน ซึ่งสามารถทำงานร่วมกับ HTML, CSS และ JavaScript ได้อย่างมีประสิทธิภาพ นี่คือรายละเอียดของ jQuery Syntax

พื้นฐานของ jQuery Syntax

jQuery ใช้สัญลักษณ์ $ เป็นตัวแทนของ jQuery เรียกง่ายๆ ว่าเป็นสัญลักษณ์ย่อ เช่นเดียวกับการเรียกฟังก์ชันของ jQuery

$(selector).action()

องค์ประกอบหลักของ jQuery Syntax

$ (ตัวแทนของ jQuery) สัญลักษณ์ $ ใช้เพื่อเรียก jQuery เช่นเดียวกับการบอกให้ jQuery ทำงาน

$(document).ready(function() {
   // โค้ด jQuery อยู่ที่นี่
});

Selector (ตัวเลือก) ใช้เพื่อเลือกองค์ประกอบ (HTML elements) ที่ต้องการจะทำงานด้วย คล้ายกับการใช้งาน CSS Selectors

เริ่มต้นใช้งาน jQuery

jQuery คืออะไร?

jQuery คือไลบรารี JavaScript ที่ออกแบบมาเพื่อลดความซับซ้อนของการทำงานกับ DOM (Document Object Model) และการเขียน JavaScript ในเว็บเพจ มันช่วยให้เราสามารถเลือกและจัดการองค์ประกอบ HTML, จัดการกับเหตุการณ์ (events), ทำงานกับเอฟเฟกต์แอนิเมชัน, และแม้กระทั่งส่งข้อมูลแบบ AJAX ได้อย่างง่ายดาย

jQuery เป็นที่นิยมมากเนื่องจากสามารถทำให้โค้ด JavaScript ที่เคยยาวซับซ้อน กลายเป็นโค้ดที่สั้นและง่ายต่อการเข้าใจมากขึ้น

การติดตั้ง jQuery

วิธีที่ 1 โหลด jQuery ผ่าน CDN

คุณสามารถเรียกใช้งาน jQuery โดยใช้ CDN (Content Delivery Network) ซึ่งไม่จำเป็นต้องดาวน์โหลดไฟล์ไปเก็บไว้ในโฟลเดอร์โปรเจกต์ของคุณ สามารถแทรกโค้ดต่อไปนี้ในส่วน <head> หรือท้ายของ <body> ใน HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

วิธีที่ 2 ดาวน์โหลด jQuery

ถ้าต้องการใช้งานออฟไลน์ คุณสามารถดาวน์โหลด jQuery ได้จากเว็บไซต์ jQuery.com แล้วเพิ่มไฟล์ .js ไว้ในโปรเจกต์ของคุณ โดยสามารถเรียกใช้ได้ดังนี้

<script src="path/to/jquery.min.js"></script>

การเขียน JavaScript Syntax

JavaScript (JS) เป็นภาษาโปรแกรมที่ใช้งานได้หลายด้าน โดยเฉพาะในเว็บเบราว์เซอร์ เพื่อทำให้หน้าเว็บมีความโต้ตอบและมีฟังก์ชันที่หลากหลายขึ้น การเรียนรู้ Syntax ของ JavaScript เป็นเรื่องสำคัญเพราะมันเป็นโครงสร้างพื้นฐานที่ทำให้โปรแกรมทำงานได้ตามที่เราต้องการ

1. ตัวแปร (Variables)

ใน JavaScript สามารถประกาศตัวแปรได้โดยใช้คำสำคัญ var, let, หรือ const ซึ่ง let และ const เป็นวิธีที่แนะนำมากกว่า เนื่องจาก var มีปัญหาเรื่องการ scope ที่ไม่ชัดเจน

var ใช้ประกาศตัวแปรทั่วไป

var name = "John";  // ประกาศตัวแปร name

let ใช้สำหรับตัวแปรที่ต้องการเปลี่ยนค่าได้

let age = 25;  // สามารถเปลี่ยนค่าได้
age = 26;

const ใช้สำหรับตัวแปรที่ค่าคงที่ ไม่สามารถเปลี่ยนค่าได้

const pi = 3.14159;  // ไม่สามารถเปลี่ยนค่าได้

2. ชนิดข้อมูล (Data Types)

JavaScript รองรับหลายชนิดข้อมูล เช่น

String ข้อความ

let greeting = "Hello World!";

Number ตัวเลข (ทั้งจำนวนเต็มและทศนิยม)

let age = 30;
let price = 9.99;

การใช้งาน JavaScript Statements

JavaScript statements (คำสั่งในภาษา JavaScript) คือชุดคำสั่งที่ให้เบราว์เซอร์หรือโปรแกรมทำงานตามที่เราต้องการ โปรแกรมในภาษา JavaScript จะประกอบด้วยลำดับของ statements ซึ่งแต่ละคำสั่งจะบอกให้คอมพิวเตอร์ทำบางสิ่งบางอย่าง

โครงสร้างของ JavaScript Statements

แต่ละ statement ใน JavaScript มักจะประกอบด้วย

คำสั่ง (Command) สิ่งที่เราต้องการให้โปรแกรมทำ เช่น การกำหนดค่า การคำนวณ หรือการเรียกใช้ฟังก์ชัน
ตัวจบคำสั่ง (;) ส่วนใหญ่ใน JavaScript เราจะใช้เครื่องหมาย ; เพื่อจบแต่ละคำสั่ง (แต่ในหลายกรณีสามารถเว้นได้)

ตัวอย่าง

let name = "John";  // กำหนดตัวแปร name ให้มีค่าเป็น "John"
let age = 25;       // กำหนดตัวแปร age ให้มีค่าเป็น 25
console.log(name);  // แสดงค่า name บน console

ในตัวอย่างนี้ มี 3 statements

กำหนดตัวแปรชื่อ name และให้ค่าเป็น "John"
กำหนดตัวแปรชื่อ age และให้ค่าเป็น 25
แสดงผลตัวแปร name ผ่านทางฟังก์ชัน console.log

การแสดงผลลัพธ์ JavaScript

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

วิธีการแสดงผลใน JavaScript

การแสดงผลใน JavaScript มีหลายวิธีที่ใช้กันบ่อย ๆ เช่น

ใช้ console.log() วิธีนี้เป็นวิธีที่ง่ายที่สุดในการแสดงผลลัพธ์ไปยัง “คอนโซล” (Console) ของเบราว์เซอร์ ซึ่งคอนโซลเป็นเครื่องมือสำหรับนักพัฒนาเพื่อใช้ตรวจสอบหรือแสดงข้อความเพื่อดีบั๊กโค้ด

ตัวอย่างโค้ด

console.log("สวัสดีโลก!");

ผลลัพธ์: ข้อความ “สวัสดีโลก!” จะถูกแสดงในคอนโซลของเบราว์เซอร์ (สามารถเปิดคอนโซลได้ใน Developer Tools)

ใช้ alert() วิธีนี้จะแสดงข้อความในรูปแบบหน้าต่างป๊อปอัพ (alert box) บนเบราว์เซอร์ ซึ่งผู้ใช้จะต้องกดปุ่ม “ตกลง” (OK) เพื่อปิดหน้าต่างนี้

การเรียกใช้งาน JavaScript

ในการเขียนโค้ด JavaScript สิ่งที่สำคัญคือการเลือกตำแหน่งที่เหมาะสมในการวางโค้ด เพื่อให้สคริปต์ทำงานตามที่ต้องการ ในบทนี้เราจะอธิบายถึง 3 ตำแหน่งหลักที่สามารถใส่ JavaScript ได้ใน HTML

Internal JavaScript (เขียนภายในไฟล์ HTML)
External JavaScript (แยกไฟล์ JavaScript ออกมา)
In-line JavaScript (เขียนใน Attribute ของ HTML Tag)

1. Internal JavaScript (ภายในไฟล์ HTML)

การเขียนโค้ด JavaScript ภายในไฟล์ HTML สามารถทำได้โดยวางโค้ดภายในแท็ก <script> โดยทั่วไปนิยมวางไว้ที่ส่วน <head> หรือท้าย <body> ของเอกสาร HTML

ตัวอย่างการใส่ใน <head>

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <script>
        document.write("Hello from the Head section!");
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>