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

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

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

Feb 18, 2018

แก้ไขล่าสุด มีผู้อ่าน 13,609  |  JAVASCRIPT 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 กันครับ

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com

หลักสูตร

สอน JQuery สำหรับผู้เริ่มต้น

สอนการใช้ JQuery - Javascript Library ตัวหนึ่งที่นิยมมากในปัจจุบัน ด้วยความเร็วในการทำงาน ขนาดที่เล็กและมีส่วนเสริมมากมายให้เลือกใช้
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย