สอน JQuery ตอนที่ 1 ทำความรู้จัก JQuery

JQuery - write less, do more.

Introduction

JQuery เป็น Open source Javascript Library ตัวหนึ่งที่นิยมมากในปัจจุบัน ด้วยความเร็วในการทำงาน ขนาดที่เล็ก และจุดเด่นหลายอย่าง ดังนี้

• HTML document traversal
• Manipulation
• Event handling
• Animation
• Ajax

การใช้งานสามารถเข้าใจได้ง่าย รองรับการทำงานกับ Browser ที่หลากหลาย JQuery เปลี่ยนแปลงวิธีที่นักพัฒนานับล้านเขียน Javascript ไปเลย 

 

ตัวอย่างเมื่อนำ JQuery มาใช้งาน

HTML document traversal and Manipulation

ทำการหาปุ่มที่มี class เป็น continue และทำการเปลี่ยน HTML ภายในปุ่ม หรือก็ชื่อที่ปรากฏอยู่บนปุ่มเป็น "share.olanlab.com"

JQuery

$("button.continue").html("share.olanlab.com");

Javascript

var buttons = document.getElementsByClassName("continue");

for (var i = 0; i < buttons.length; i++){
     buttons[i].innerHTML = "share.olanlab.com";
}

 

Event Handling

แสดง element ที่มี id เป็น banner-message ที่ถูกซ่อนไว้ด้วย style="display:none"

เมื่อ button ที่มี  id เป็น button-container ถูกกด

JQuery 

var hiddenBox = $("#banner-message");
$("button#button-container").on("click",function(event){
    hiddenBox.show();
});

Javascript

var hiddenBox = document.getElementById("banner-message");
var button = document.getElementById("button-container");
button.onclick = function() {
    hiddenBox.style.display = 'none';
}

 

Ajax

การใช้ Ajax เพื่อดึงข้อมูลจาก Web server โดยส่ง query parameter เป็น zipcode=11001 และนำข้อมูลที่ได้มาแทน HTML ใน element ที่มี id เป็น weather-temp 

JQuery

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 11001
  },
  success: function( data ) {
    $("#weather-temp").html("<strong>" + data + "</strong> degrees");
  }
});

Javascript

var http = new getXMLHttpRequestObject();

http.open("GET", "/api/getWeather?zipcode=11001", true);
http.onreadystatechange = function() { 
    if(http.readyState == 4) {
        document.getElementById('weather-temp').innerHTML = "<strong>" + data + "</strong> degrees";
    }
}

http.send(null);

*สังเกตุว่า เมื่อเราใช้ JQuery มาแทนการใช้ Javascript แบบปกติ จะช่วยลดจำนวนโค้ดและความยากในการพัฒนาได้มากทีเดียว จึงทำให้ JQuery เป็นที่นิยมแพร่หลายในปัจจุบัน

 

นอกจาก JQuery แล้ว ก็ยังมี Javascript Library ตัวอื่นที่มีคุณสมบัติคล้ายๆ กัน เช่น

• MooTools
• Prototype
• Dojo
• YUI
• อื่นๆ

เมื่อเราเริ่มเข้าใจ JQuery คร่าวๆ แล้ว ก่อนจะเริ่มต้นเขียน JQuery เรามาเตรียมอุปกรณ์ให้พร้อมกันก่อนครับ

---

Software Requirments

การจะเริ่มต้นเขียน JQuery ได้ เราต้องเตรียมอุปกรณ์ให้พร้อมก่อน สิ่งที่จำเป็นต้องมีประกอบด้วย

• Text editor
• Browser
• Web server 
• JQuery Library

Text editor - เครื่องมือสำหรับเขียน JQuery เราแนะนำ Eclipse สามารถใช้งานได้ทั้ง Window, MAC - วิธีติดตั้งคลิ๊ก

Browser - Internet Explorer 8+, Mozilla Firefox, Google Chrome, Safari และอื่นๆ

Web server - เครื่องคอมพิวเตอร์ที่ติดตั้ง PHP, MySQL, Apache ทำหน้าที่เก็บ Website - วิธีติดตั้งคลิ๊ก

JQuery Library - โค้ดและชุดคำสั่งของ JQuery วิธีการดาวโหลด สามารถดูได้จากด้านล่าง

---

Download JQuery

1. ไปที่ http://jquery.com/download/
2. เลือกดาวโหลด jQuery 1.x ที่ต้องการ โดยมีให้เลือกแบบ production, development 
   - production จะถูกบีบอัดให้มีขนาดของไฟล์เล็กลง เพื่อเพิ่มความเร็วในการทำงาน
   - development จะไม่ถูกบีบอัดเหมาะสำหรับให้นักพัฒนา ที่ต้องการดูโค้ดของ JQuery 
3. เมื่อดาวโหลดเสร็จจะปรากฏดังรูป ด้านล่าง

ทำการเซฟเก็บ JQuery Library ที่ได้ไว้ใน Folder ที่ต้องการ

---

Folder setup

เมื่อเราเตรียมอุปกรณ์ทั้ง 4 อย่างเสร็จเรียบร้อย ขั้นตอนต่อไปคือการจัดโครงสร้าง Folder สำหรับเริ่มต้นการพัฒนา Website สำหรับผู้เริ่มต้น เราแนะนำวิธีการจัด Folder โครงสร้างง่ายๆ ที่นิยมใช้กัน ดังรูปด้านล่าง

Project  (Folder สำหรับเก็บโปรเจคนิยมตั้งชื่อตามชื่อโปรเจค)

      - img   (Folder สำหรับเก็บรูปภาพ)

      - js      (Folder สำหรับเก็บโค้ด Javascipt)

      - css   (Folder สำหรับเก็บโค้ด Cascade Style Sheet)

 

จบตอนที่ 1 เตรียมความพร้อมก่อนเขียน JQuery  ตอนต่อไปเราจะเริ่มต้นทดลองเขียน JQuery กันครับ