Learning Jquery 1.3

Chapter 1 : Getting Start

အခုအချိန်မှာတော့ Web လောကမှာ dynamic တွေဖြစ်ကုန်ပြီး site တွေကို ဆွဲဆောင်မှုရှိလာအောင် interactive ဖြစ်လာအောင် developer တွေက ဖန်တီးလာတယ်။ အဲဒီလို ဖန်တီးရာမှာ လွယ်ကူလာအောင် JQuery လိုမျိုး javascript library တွေ အသုံးပြုလာတယ်။ Jquery ဟာ javascript library ဖြစ်ပြီး အခုအချိန်မှာ လူတောှတောှများများ အသုံးပြုရွေးချယ်နေကြပါတယ်။ Jquery မှာ function တွေအများအပြားရှိပြီးတော့ အခြား plugin တွေများပြားလို့လည်း လူသုံးများလာတယ်ဆို မမှားပါဘူး။ Jquery ဟာ HTML သာမက Cascading Style Sheets (CSS) တို့မှာရှိတဲ့ function တွေကို ခေါှပြီး အသုံးပြုလို့ရတယ်။ JQuery ကို အသုံးပြုမယ်ဆိုရင် programming skill အနည်းငယ်ရှိရမှာ ဖြစ်ပြီး web developers တွေအနေနဲ့ကတော့ programming experience ရှိပြီး javascript တတ်ကျွမ်းထားပြီးတွေ ဖြစ်တဲ့အတွက်ကြောင့် web developer တွေအနေနဲ့ jquery ကို လွယ်လွယ်နဲ့ လေ့လာနိုင်ပါတယ်။ အဲ တခြားအပိုင်းတွေ မပြောသေးခင် Jquery ဘာတွေ လုပ်နိုင်လဲဆိုတာ စပြောရအောင်။

Jquery ဘာတွေ လုပ်နိုင်လဲ

Jquery ဟာ စွယ်စုံသုံးဖို့ ရည်ရွယ်ထားတဲ့ web scripting တစ်ခုပါ။ web scripting ဖြစ်သောကြောင့် အကုန်လုံးကို script နဲ့သာရေးသားရပါတယ်။ Jquery အတွက် plugins တွေ ရေးသားနိုင်သလို လက်ရှိ ရေးသားထားပြီးသား plugins တွေကလည်း အများကြီးရှိပါတယ်။ core features တွေကို အောက်မှာ ဖောှပြထားပါတယ်။

Access elements in a document

Javascript library တွေကိုသာ အသုံးမပြုဘူးဆိုရင် Document Object Model (DOM) tree အတွက် လိုင်းတွေအများကြီးရေးရပါလိမ့်မယ်။ နောက်ပြီးတော့ HTML document’s structure အတိုင်း အဆင့်ဆင့်ခေါှယူအသုံးပြုနေရပါလိမ့်မယ်။ Jquery ကတော့ HTML document တွေအဆင့်ဆင့် ခေါှယူနေစရာမလိုပဲ လွယ်လွယ်ကူကူခေါှယူသုံးစွဲနိုင်ပါတယ်။

Modify the appearance of a web page

CSS ကတော့ web design အတွက် အလွန်တကာကောင်းမွန်တဲ့ language တစ်ခုပါ။ သို့ပေမယ့် css style တွေက render လုပ်ပြီးရင် run time မှာ ထပ်ပြောင်းဖို့အတွက် javascript တွေနဲ့ အသုံးပြုရေးသားရပါတယ်။ jquery က လက်ရှိ အသုံးပြုထားတဲ့ css style တွေကို run time အချိန်မှာ လွယ်လွယ်ကူကူပြောင်းလဲနိုင်ပါတယ်။

Alter the content of a document

web page တွေက loading  လုပ်ပြီးသွားတဲ့အခါမှာတော့ content တွေကို ပြင်ဖို့ ခက်ခဲသွားပါပြီ။ ဒါပေမယ့် Jquery ကတော့ လွယ်လွယ်ကူကူ ပြောင်းလဲနိုင်အောင် လုပ်ပေးနိုင်ပါတယ်။ နောက်ပြီး document တွေထဲမှာ ပြုပြင်လို့ရရုံသာမကပဲ image တွေ ထည့်သွင်းခြင်းတွေပါ လုပ်ဆောင်နိုင်ပါတယ်။ ဒါ့အပြင် HTML rewrite လုပ်လို့လည်းရပါသေးတယ်။

Respond to a user’s interaction

Web 2.0 ရောက်လာတာနဲ့အမျှ user’s interaction ဟာ web site တွေမှာ မပါမဖြစ် ပါလာပါတယ်။ Jquery ကတော့ user’s interaction တွေကို အလွယ်တကူ လုပ်နိုင်ပြီး  event တွေကို လွယ်လွယ်ကူကူ ရေးသားနိုင်ပါတယ်။ HTML code တွေကို event တွေအနေနဲ့ ရေးသားနိုင်တဲ့အတွက် user’s interaction အတွက် Jquery က ကောင်းမွန်လှပါတယ်။

Animate changes being made to a document

Jquery မှာ Visual Effect တွေအနေနဲ့ animation အပိုင်းတွေပါ ပါဝင်လာပါတယ်။ Animation ကို ရေးသားတဲ့အပိုင်းမှာလည်း code တွေနဲ့ပဲရေးသားရပြီး ခက်ခဲလှတယ်လို့တော့ မဟုတ်ပါဘူး။

Retrieve information from a server without refreshing a page

Jquery ကနေ server ကနေ information တွေကို page refresh လုပ်စရာမလိုပဲ ခေါှယူလို့ရပါတယ်။ ကျွန်တောှတို့ အသိများတဲ့ Asynchronous JavaScript And XML (AJAX) ပိုင်းပေါ့။ Page ကို refresh ချဖို့မလိုပဲ AJAX နဲ့ ပြောင်းလဲပေးနိုင်ပါတယ်။ ဥပမာ searching ပိုင်းတို့ Login check တဲ့အပိုင်းတို့မှာပေါ့။

Simplify common JavaScript tasks

Jquery မှာ အရင်သုံးနေကျ Javascript တွေကိုလည်း ယူသုံးလို့ရပါတယ်။ ကျွန်တောှတို့ javascript မှာသုံးနေတဲ့ looping တို့ condition တို့ array တို့ စတာတွေကိုပေါ့။

အခြား အကြောင်းတွေ ပြောစရာ အများကြီးရှိပါသေးတယ်။ ဒါပေမယ့်လည်း စာဖတ်ရတာ စိတ်မရှည်မှာဆိုးလို့ ကျွန်တောှတို့တွေ Jquery လေး စလိုက်ရအောင်။

Our first jQuery-powered web page

ပထမဆုံးအနေနဲ့ Jquery ကို ဘယ်လို အသုံးပြုရမလဲဆိုတာလေး စလိုက်ရအောင်။

Downloading Jquery

http://www.jquery.com ကနေ နောက်ဆုံး jquery version ကို download ချလိုက်ပါ။ .js file လေး 1 file ရပါလိမ့်မယ်။

home page မှာ Download Jquery ဆိုတာပါပြီး နှိပ်လိုက်ရင် google page ကို ရောက်သွားမယ်။ အဲဒီမှာ .js file လေးကို download ချလိုက်ပါ။

ကျွန်တောှတို့အနေနဲ့ Production ဆိုတာလေးကို ရွေးရုံပါပဲ။ size လေး 19 KB လောက်ပဲရှိပါတယ်။ code တွေကို လေ့လာချင်ရင်တော့ uncompress version ကို download ချလိုက်ပေါ့။ ရလာတဲ့ file လေးကို jquery.js အဖြစ် နာမည်ပေးလိုက်ပါ။

Setting up the HTML document

အခု code ထဲမှာ CSS ကို ခေါှသုံးထားတပါမယ်။ နောက်ပြီး .js file လေး တစ်ခုခေါှသုံးထားတပါမယ်။ .js file လေး jquery ရေးထားတဲ့အပိုင်းပါ။ HTML code ကို အရင်ဆုံး ဖန်တီးလိုက်ပါ။

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type”

content=”text/html; charset=utf-8″/>

<title>Through the Looking-Glass</title>

<link rel=”stylesheet” href=”alice.css”

type=”text/css” media=”screen” />

<script src=”jquery.js” type=”text/javascript”></script>

<script src=”alice.js” type=”text/javascript”></script>

</head>

<body>

<h1>Through the Looking-Glass</h1>

<div class=”author”>by Lewis Carroll</div>

<div class=”chapter” id=”chapter-1″>

<h2 class=”chapter-title”>1. Looking-Glass House</h2>

<p>There was a book lying near Alice on the table,

and while she sat watching the White King (for she

was still a little anxious about him, and had the

ink all ready to throw over him, in case he fainted

again), she turned over the leaves, to find some

part that she could read, <span class=”spoken”>

“&mdash;for it’s all in some language I don’t know,”

</span> she said to herself.</p>

<p>It was like this.</p>

<div class=”poem”>

<h3 class=”poem-title”>YKCOWREBBAJ</h3>

<div class=”poem-stanza”>

<div>sevot yhtils eht dna ,gillirb sawT'</div>

<div>;ebaw eht ni elbmig dna eryg diD</div>

<div>,sevogorob eht erew ysmim llA</div>

<div>.ebargtuo shtar emom eht dnA</div>

</div>

</div>

<p>She puzzled over this for some time, but at last

a bright thought struck her. <span class=”spoken”>

“Why, it’s a Looking-glass book, of course! And if

I hold it up to a glass, the words will all go the

right way again.”</span></p>

<p>This was the poem that Alice read.</p>

<div class=”poem”>

<h3 class=”poem-title”>JABBERWOCKY</h3>

<div class=”poem-stanza”>

<div>’Twas brillig, and the slithy toves</div>

<div>Did gyre and gimble in the wabe;</div>

<div>All mimsy were the borogoves,</div>

<div>And the mome raths outgrabe.</div>

</div>

</div>

</div>

</body>

</html>

ဒါတွေပြီးရင်တော့ Jquery လေးမစခင် html လေးကို တချက်လောက် အရင်ကြည့်ကြည့်လိုက်ပါ။ အောက်က ပုံလိုမျိုး မြင်ရပါလိမ့်မယ်။

ပြီးရင် alice.js လေးကို ဖန်တီးပါမယ်။

Adding jQuery

ကျွန်တောှတို့တွေ jquery ထည့်သွင်းဖို့ alice.js လေးဖန်တီးပြီး အောက်က code လေး ဖြည့်လိုက်ပါ။

HTML က <script src=”alice.js” type=”text/javascript”></script> လေး နေရာ အတွက်ပေါ့။

ပြီးရင် အရင်ဆုံး run ကြည့်လိုက်ပါ။အောက်မှာ ပြထားတဲ့ ပုံအတိုင်း မြင်ရပါလိမ့်မယ်။ နောက်မှ ကျွန်တောှ code လေးကို ရှင်းပြပေးပါမယ်။

$(document).ready(function() {
$(“.poem-stanza”).addClass(“highlight”);
});

လက်ရှိ code ကို မြင်ချင်ရင်တော့ ဒီမှာ သွားကြည့်နိုင်ပါတယ်။ download ချချင်ရင်တာ့ ဒီမှာ download ရယူနိုင်ပါတယ်။

Finding the poem text
Jquery မှာ ပုံမှန်အားဖြင့် လိုချင်တဲ့ document ကို လွယ်လွယ်ကူကူ select လုပ်လို့ရပါတယ်။ ကျွန်တောှတို့အနေနဲ့ $() လေးကို အသုံးပြုရပါမယ်။နောက်ပြီး string parameter ပို့ပေးရုံပါပဲ။ CSS မှာ သုံးခဲ့အတိုင်း class ဆိုရင် . ဖြစ်ပြီးတော့ id တွေဆိုရင်တော့ # ပေါ့။ ရိုးရိုး tag တွေကိုတော့ ဒီအတိုင်းရေးရုံပဲပေါ့။ ကျွန်တောှတို့ CSS မှာ ရေးခဲ့တဲ့အတိုင်း $() ထဲမှာ ထည့်ရေးရုံပါပဲ။ ဒါကြောင့် ကျွန်တောှတို့တွေ ပြောင်းချင်တဲ့ poem-stanza ကို $(“.poem-stanza”) ဆိုပြီး ခေါှလိုက်တာပါ။ HTML code ထဲမှာ class=&quote;poem-stanza” ဆိုတာ ရှိပါတယ်။ အဲဒီ document ပိုင်းကို ညွှန်းလိုက်တာပါ။ နောက်ပိုင်းမှာ $() လေးကနေ အများကြီး လုပ်လို့ရတယ်ဆိုတာကို တွေံလာမှာပါ။

Injecting the new class
ကျွန်တောှတို့တွေ css အသစ်ဖြည့်ချင်တယ်။ တနည်းပြောရင် CSS ကို injection လုပ်မယ်ပေါ့။ အဲဒီအတွက် .addClass() ကိုအသုံးပြုထားပါတယ်။ အစအနေနဲ့ကတော့ သေသေချာချာ နားလည်အုံးမှာ မဟုတ်သေးပေမယ့် နောက်ပိုင်း တဖြည်းဖြည်းနဲ့ သဘောပေါက်လာမှာပါ။ .addClass() အပြင် အခြား method တွေ properties တွေ ရှိပါသေးတယ်။ .addClass() အထဲမှာ ကျွန်တောှတို့ အသစ်ဖြည့်ချင်တဲ့ class ကိုထည့်လိုက်ရုံပါပဲ။

Executing the code

$() နှင့် .addClass() ကို အသုံးပြုရခြင်းကတော့ ကျွန်တောှတို့ poem text ကို ပုံစံပြောင်းချင်လို့ပါ။ ဒါပေမယ့်လည်း ကျွန်တောှတို့တွေက document header မှာ code line ကို ထည့်ထားတာတွေ့နိုင်ပါမယ်။ ကျွန်တောှတို့ javascript မှာ သုံးထားတာနဲ့ မတူတာကို တွေ့မှာပါ။ ကျွန်တောှတို့  javascript ရေးတုန်းကဆိုရင် ဒီလိုရေးရပါလိမ့်မယ်။

function highlightPoemStanzas() {
$(‘.poem-stanza’).addClass(‘highlight’);
}

ဆိုပြီး function တစ်ခု ကြေငြာခဲ့ရမယ်။ နောက်ပြီးတော့ HTML တွေအကုန်အလုပ်မလုပ်ခင်မှာ ဦးစွာ အလုပ်လုပ်အောင် body onload မှာ function သွားထည့်ရမယ်။

<body onload=”highlightPoemStanzas();”>

ဒါဟာ ကျွန်တောှတို့ javascript မှာတုန်းက ရေးတဲ့ပုံစံပါ။ တနည်းပြောရင် body onload မှာ function ကို သီးသန့် သွားကြေငြာနေရမယ်။ code အတွက် function သီးသန့် ဖန်တီးရမှာပါ။ Jquery မှာတော့ ပိုပြီး လွယ်ကူသွားအောင် script ထဲမှာတင် HTML အဆင်သင့်ဖြစ်ပြီ ဆိုတာနဲ့ အလုပ်လုပ်အောင်

$(document).ready(function() {
// some jquery code here
});

ဆိုပြီး ရေးသားလာပါတယ်။ တနည်းပြောရင် Jquery ရေးတဲ့အခါမှာ HTML event တွေမှာ သီးသန့် သွားထည့်ရေးစရာမလိုတော့ပါဘူး။ နောက်ပိုင်းမှာ တွေ့လာမှာပါ။ ဒါကြောင့် ကျွန်တောှတို့ စစခြင်းမှာ CSS class ထည့်တာကို အလုပ်လုပ်အောင်

$(document).ready(function() {
$(‘.poem-stanza’).addClass(‘highlight’);
});

ဆိုပြီး ရေးထားတာပါ။

The finished product

ကျွန်တောှတို့ အဆုံးသတ်မှာတော့ အပေါှမှာ ပြထားတဲ့ ပုံလေး မြင်ရတာပဲ။ highlight ဆိုတဲ့ class ကတော့ alice.css မှာ ထည့်ရေးထားတာကြောင့် အဲဒီမှာ ရေးထားတဲ့ css အတိုင်း poem text တွေက အလုပ်လုပ်မှာပါဗျာ။

Summary

ကဲ… ကျွန်တောှတို့ Chapter 1 ပြီးပါပြီဗျာ။ Chapter 1 မှာ Jquery အကြောင်း ကျွန်တောှနည်းနည်းလေး ပြောပြခဲ့တယ်။ အကုန်လုံးပြောရင်လည်း အများကြီးဖြစ်သွားပြီး ပျင်းသွားမှာ ဆိုးလို့ပါ။ နောက်ပြီးတော့ Jquery ရဲ့ လွယ်ကူပုံတွေ အသုံးဝင်ပုံတွေ သိလောက်ပါပြီ။ $() အကြောင်းကိုလည်း ကျွန်တောှ ပြောပြခဲ့ပါတယ်။ နောက်ပြီး .addClass() ဆိုတာကိုလည်း ရှင်းပြခဲ့ပါတယ်။ Chapter 1 ပြီးလို့ နောက်ထပ် Chapter တစ်ခု ထပ်တက်ပြီး Jquery ကို လေ့လာရအောင်ဗျာ။ နောက်တော့ Chapter မှာ Selector တွေအကြောင်း သေသေချာချာ ရှင်းပြပေးမယ်။

Taken together, $() and .addClass() are enough for us to accomplish our goal of
changing the appearance of the poem text. However, if this line of code is inserted
alone in the document header, it will have no effect. JavaScript code is generally
run as soon as it is encountered in the browser, and at the time the header is being
processed, no HTML is yet present to style. We need to delay the execution of the
code until after the DOM is available for our use.