จนมาถึงปัจจุบันที่ JavaScript ได้พัฒนาไปมาก มีทั้ง AJAX และ Lib เช่น jQuery มาให้ใช้ ผมเลยกลับมาสนใจอีกครั้ง อ้อ... และที่จะลืมเสียไม่ได้ยังมี google chrome ช่วยในการ debug
ในบทความนี้ผมจะแนะนำการทำงานกับ element ของ html โดยผ่าน jQuery ล้วนๆ โดยที่ไม่แตะในส่วนของ html body เลย ตัวอย่างง่ายๆนี้คือการสร้างปุ่มกดเพื่อสุ่มเลือกรายการรุ่นรถจักรยานยนต์
การทำงานคือ เมื่อโหลดเพจขึ้นมา ผมจะใช้ jQuery สร้างรายการพร้อมกับปุ่มกดขึ้นมาก่อน จากนั้นพอกดปุ่มโปรแกรมจะทำการสุ่มเลือกรายการและเปลี่ยนตัวอักษรเป็นสีแดงเพื่อบ่งบอกการเลือก
Code แบ่งเป็น 3 ส่วนครับ
ส่วนที่ 1 คือ ส่วนของ css จะอยู่ในส่วนของ tag header <head>...</head>
ภายในคือ css class .hilight เพื่อกำหนดสีแดง
<style>
.hilight{
color:#FF0000;
}
</style>
ส่วนที่ 2 คือ tag ในการเรียกใช้ lib ของ jQuery
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
ส่วนที่ 3 คือส่วนของ JavaScript อยู่ใน ส่วนของ tag header <head>...</head> เช่นกัน ซึ่งผมจะเขียนโปรแกรมการทำงานทั้งหมดไว้ในส่วนนี้
<script type="text/javascript">
//ประกาศตัวแปร array เพื่อเก็บค่ารายการทั้งหมด
var modelName=["Kawasaki Ninja H2","Honda CBR1000RR","Suzuki GSXR1000",
"BMW S1000RR","DUCATI Penigale 1299","Benelli 1130 cafe racer",
"KTM Superduke 1290","YAMAHA R1M","Triumph speed triple r"]
//ตรวจสอบการทำงานของ lib jQuery ว่าพร้อมหรือไม่ เขียนเต็มๆก็คือ $(document).ready(...)
$(function(){
//เพิ่ม tag div ใน tag body
$("body").html("<div></div>");
//เพิ่ม tag ul และปุ่มกด ใน tag div
var ul=$("div").append("<ul id=\"motorbikeModel\"></ul>");
var btn=$("div").append("<input id=\"btn1\" name=\"btn1\" type=\"button\" value=\"Select random\" />");
//วนลูปเพิ่มรายการจากตัวแปร array ที่ประกาศไว้ด้านบน
for(var m in modelName){
ul.append("<li>"+modelName[m]+"</li>");
}
//ทำ event handle ให้กับปุ่มกด
$("#btn1").click(function(){
//เรียกฟังชั่น เพื่อล้างค่าสไตล์ทั้งหมด
clear();
//หาค่าสุ่มรายการมาเก็บไว้ในตัวแปร rd
var rd=Math.ceil(Math.random()* $("li").length-1);
//เมื่อได้รายการที่สุ่มแล้วก็จัดการใส่ css class สี
$("li:eq("+rd+")").addClass("hilight");
});
//ฟังชั่นล้างค่าสไตล์ของรายการ
function clear()
{
//เก็บค่ารายการทั้งหมด ในที่นี้ค่าของ allItm จะเป็น array โดยอัตโนมัติ
var allItm=$("li");
//วนลูปเพื่อนำ css class ออก
for(var i=0;i < allItm.length;i++)
{
var itm=$(allItm)[i];
//หาว่ารายการนี้มี css class ชื่อ hilight อยู่แล้วหรือไม่
if($(itm).hasClass("hilight"))
//ถ้าพบว่ามีให้เอาออก
$(itm).removeClass("hilight");
//บรรทัดนี้ผมลองให้โปรแกรมเขียน log ออกมาแสดง
console.log(itm);
}
}
});
</script>
ลองทดสอบดู การกด 3 ครั้งได้ผลดังนี้
 |
| ครั้งที่ 1 |
 |
| ครั้งที่ 2 |
 |
| ครั้งที่ 3 |
การทำงานเป็นไปตามวัตถุประสงค์ บทความหน้าผมจะเขียนเกี่ยวกับการ debug JavaScript ด้วย google Chrome เผื่อท่านใดยังไม่เคยลองเล่นครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น