Cool Emerald: Javascript

Showing posts with label Javascript. Show all posts

Monday, December 2, 2013

မြန်မာ ပြက္ခဒိန် အခါပေးရက်များ

မြန်မာ ပြက္ခဒိန်တွေမှာ ဗေဒင်နဲ့ ဆက်စပ်တဲ့ အခါပေးရက် ဥပမာ ရက်ကောင်း၊ရက်ဆိုး တွေကို ဖော်ပြလေ့ ရှိပါတယ်။ ဒီစာတမ်းမှာ အောက်ကရက်တွေနဲ့ သူတို့ကို javascript ကုဒ် သုံးပြီး ဘယ်လိုတွက်မလဲဆိုတာ ဖော်ပြပါမယ်

Chord-changer Javascript

I have written a Javascript program to transpose the guitar chords for a song into a different key. In the lyrics of the song, the guitar chords are supposed to be between <sup> and </sup>. You can try it at Myanmar Lyrics by clicking the Key Up and Key Down buttons. The codes are shown below.

Algorithm, Program and Calculation of Myanmar Calendar

Read this article in English

မြန်မာ ပြက္ခဒိန် တွက်တဲ့ အခါ ပိုမို မြန်ဆန်လွယ်ကူ စေမယ့် ညီမျှခြင်းများကို တင်ပြမှာဖြစ်ပြီး၊ ပြီးခဲ့တဲ့ မြန်မာ ပြက္ခဒိန် ရက်ကိုပဲ ဖြစ်ဖြစ်၊ နောက်လာမည့် မြန်မာ ပြက္ခဒိန်ရက် ကို ကြိုပြီးပဲဖြစ်ဖြစ် ဘယ်လို တွက်မလဲ ဆိုတာ ဆွေးနွေးပါမယ်။ မြန်မာ ပြက္ခဒိန် ရက်စွဲ တစ်ခုရဲ့ မြန်မာ ခုနှစ်၊ မြန်မာလ၊ လဆန်း လဆုတ်၊ မြန်မာရက်၊ အဲဒီနှစ်က ဝါထပ် မထပ်၊ ထပ်ရင် လည်း ဝါကြီးလား၊ ဝါငယ်လား ဆိုတာ ကိုအလွယ်တကူ တွက်ထုတ်နိုင်ဖို့ ကိန်းသေတွေ၊ ဖော်မြူလာတွေ၊ တွက်ချက်ပုံ အဆင့် တွေ ကို ရှင်းရှင်းလင်းလင်း တင်ပြပါမယ်။ မြန်မာ ပြက္ခဒိန်၊ နတ္ခတ် အခေါ်အဝေါ် တွေနဲ့ မရင်းနှီးရင် တောင်မှ အလွယ် တစ်ကူ နားလည် နိုင်မှာပါ။

Capturing and Sending Key -Using AJAX

AJAX က programming language အသစ်တစ်ခု မဟုတ်ပါဘူး။ ပိုကောင်း၊ ပိုမြန်၊ ပို interactive ဖြစ်တဲ့ web applications တွေရဖို့ အတွက် နည်းပညာသစ် တစ်ခုပါ။ AJAX ရဲ့ အရေးအပါဆုံး အဓိက object တစ်ခုဖြစ်တဲ့ XMLHttpRequest ကိုသုံးပြီး web server တစ်ခုဆီကို ဒေတာ လှမ်းတောင်းတာ၊ response ပြန်ယူတာတွေကို နောက်ကွယ်ကနေ ဝက်ဘ် စာမျက်နှာကို reload ပြန်လုပ်စရာမလိုပဲ လုပ်ဆောင်နိုင်ပါတယ်။ အဲဒီ ဝက်ဘ် စာမျက်နှာ ကို ဖွင့်သုံးနေသူတောင် ဒေတာ ပို့တာ၊ ယူတာတွေကို သတိပြု မိမှာ မဟုတ်ပါဘူး။ အရင် ပို့စ်မှာ လုပ်ခဲ့ဘူးတဲ့ ကီးဖမ်းတာ၊ ပို့တာ ကိုပဲ AJAX နဲ့ ပြန်ရေးကြည့်ပါမယ်။ ဒီနမူနာကို W3Schools မှာဖော်ပြထားတဲ့ Script များကို အခြေခံပြီး ရေးထားပါတယ်။ keyCapture.html ၊ keyCapture.js ၊ and keyCapture.php ဆိုပြီး သုံးဖိုင်ပါ ပါတယ်။
ပထမဆုံး "keyCapture.html" လို့ခေါ်တဲ့ HTML page တစ်ခု ဖန်တီးပါမယ်။ သူ့မှာ server ကပြန်ပို့တဲ့ စာကို ဖော်ပြဖို့ DIV element တစ်ခု ထည့်ထားပါတယ်။ နောက် သပ်သပ်ခွဲရေးထားတဲ့ JavaScript ဖိုင်ကို head ထဲမှာ ချိတ်ထားပါမယ်။


<html>
<head>
    <title>Key Capture</title>
    <script src='keyCapture.js'></script>
</head>
<body>
<form>
Press a key to send to server.
<div id='text1' style="font-size: 40px; color:blue;">
 </div>
</form>
</body>
</html>

ဒုတိယ အနေနဲ့ ကီးတွေကိုဖမ်းဖို့၊ AJAX ကိုသုံးပြီး server ကိုပို့ဖို့ "keyCapture.js" ဖိုင်ကို အောက်ပါ အတိုင်း ရေးပါမယ်။ နောက်မှာ သူ့ကို အသေးစိတ် ရှင်းထားပါတယ်။

var xmlHttp;
document.onkeypress = DisplayMsg;
function DisplayMsg(key_event) {
    var keyChar;
    if (document.all) {
        keyChar = String.fromCharCode(event.keyCode);
    }
    else if (document.getElementById) {
        keyChar = String.fromCharCode(key_event.which);
    }
    else if (document.layers) {
        keyChar = String.fromCharCode(key_event.which);
    }
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
        alert("Your Browser does not support AJAX!");
        return;
    }
    var url = "keyCapture.php";
    url = url + "?keyC=" + keyChar + "&sid=" + Math.random();
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function stateChanged() {
    if (xmlHttp.readyState == 4) {
        document.getElementById('text1').innerHTML = xmlHttp.responseText;
    }
}
function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

ဒီ JavaScript file မှာ ပါတဲ့ အဓိက အပိုင်းသုံးပိုင်း ကတော့
၁။ XMLHttpRequest object ကို ဖန်တီးခြင်း
၂။ ဆာဗာ ကပြန်ပို့တဲ့ ဒေတာ တွေကို သုံးဖို့ function သတ်မှတ်ခြင်း
၃။ ဆာဗာ ကို request လှမ်းပို့ခြင်း
တို့ဖြစ်ပါတယ်။
၁။ XMLHttpRequest object ကို ဖန်တီးခြင်း
ကိုယ်သုံးတဲ့ browser ပေါ်မူတည်ပြီး XMLHttpRequest object ကို ဖန်တီးပုံ ဖန်တီးနည်း ကလည်း အမျိုးမျိုး ကွဲပြားနေပါတယ်။ Internet Explorer က ActiveXObject ကိုသုံးပြီး၊ အခြား browser များက XMLHttpRequest ဆိုတဲ့ JavaScript object ကိုသုံးပါတယ်။ အားလုံးနဲ့ အဆင်ပြေအောင် အောက်ပါအတိုင်း ရေးနိုင်ပါတယ်။

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

XMLHttpRequest object ကို သုံးချင်ရင် အခုဒီ GetXmlHttpObject() function ကို အောက်ပါ အတိုင်း ခေါ်သုံးနိုင် ပါတယ်။

var xmlHttp
xmlHttp=GetXmlHttpObject();

အကယ်၍ object ဖန်တီးတာ မအောင်မြင်ရင် AJAX ကိုသုံးလို့ မရကြောင်း စာပေါ်လာဖို့ အောက်ပါ အတိုင်း ရေးနိုင် ပါတယ်။

if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }

၂။ ဆာဗာ ကပြန်ပို့တဲ့ ဒေတာ တွေကို သုံးဖို့ function သတ်မှတ်ခြင်း အောက်ပါ JavaScript ကိုသုံးပြီး ဆာဗာ က response status ပြောင်းသွားတိုင်း ခေါ်မယ့် function ကို ရေးသားနိုင်ပါတယ်။ အဲဒီ readyState property မှာ တန်ဖိုး (၀ ကနေ ၄ အထိ) ငါးခု ရှိပြီး request complete state (state value ၄) ကိုရောက်မှ လုပ်ဆောင်အောင် အောက်ပါ အတိုင်း ရေးပါ။


function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

ဆာဗာရဲ့ response status ပြောင်းသွားတိုင်း onreadystatechange property မှာသိမ်းထားတဲ့ function ကို အလိုအလျောက် လှမ်းခေါ်မှာ ဖြစ်ပြီး XMLHttpRequest ကို ဖန်တီး အစပြုခဲ့ ပြီးရင် အောက်ပါ အတိုင်း သတ်မှတ် ထားခဲ့ရမှာ ဖြစ်ပါတယ်။


xmlHttp.onreadystatechange=stateChanged;

၃။ ဆာဗာ ကို request လှမ်းပို့ခြင်း
"GET" method ကိုသုံးပြီး request ကို ပို့တိုင်းမှာ လှမ်းပို့တဲ့ ဆာဗာ script ဖိုင်ရဲ့ url နောက်မှာ ? ခံပြီး ပို့ပေးတာကို သတိပြုမိ ကြမှာပါ။ ဒါကြောင့် url ကို အောက်ပါအတိုင်း ပြင်ပြီး တစ်ခါ request လုပ်တိုင်း သိမ်းထားတဲ့ cached version ကို ပြန်မပို့အောင် url မှာ ကြုံရာ ကျဘမ်း တန်ဖိုး နောက်တစ်ခုကို တွဲထည့်ပေး ပါမယ်။


var url = "keyCapture.php";
url = url + "?keyC=" + keyChar + "&sid=" + Math.random();

ဆာဗာကို request ပို့ဖို့ အတွက် XMLHttpRequest object ရဲ့ open() method နဲ့ send() method ကို သုံးနိုင်ပါတယ်။ open() method ရဲ့ ပထမ argument က request လုပ်တဲ့ method ကို GET သုံးမှာလား၊ POST သုံးမှာလား ဆိုတာ သတ်မှတ်ပါ တယ်။ ဒုတိယ တစ်ခုက URL သတ်မှတ်ပြီး၊ နောက်ဆုံး တစ်ခုက request ကို asynchronous လုပ်မလုပ် သတ်မှတ်တာ ဖြစ်ပါတယ်။


xmlHttp.open("GET", url, true);
xmlHttp.send(null);

တတိယ ပိုင်းအနေနဲ့ "keyCapture.php" ဆိုတဲ့ server side script ဖိုင်ကို PHP သုံးပြီး အောက်ပါအတိုင်း ရေးနိုင်ပါတယ်။


<?php
//get the parameter from URL
$k=$_GET["keyC"];
echo "Received: " . $k;
?>

Saturday, January 17, 2009

Capture Key Event in JavaScript

မိတ်ဆွေ တစ်ယောက်က Linux server တစ်ခုမှာချိတ်ထားတဲ့ hardware တစ်ခုကို အဝေးက web page keyboard input ကနေ ဘယ်လို control လုပ်လို့ရမလဲလို့ မေးလာပါတယ်။ ကျွန်တော်လည်း ကောင်းကောင်းမသိပေမယ့် client ဘက်မှာ JavaScript နဲ့ Server ဘက်မှာ PHP သုံးဖို့ ဆုံးဖြတ်လိုက်ကြပါတယ်။ သူက ထိန်းမယ့် web page မှာ ဖောင်ဖြည့်တာတို့၊ submit လုပ်တာတို့ လုပ်ဖို့ မလိုပဲ ခလုပ်နှိပ်တာနဲ့ တန်းပြီး ပို့စေချင်တယ်တဲ့။ ဒါ့ကြောင့် hardware ကို တိုက်ရိုက်ထိန်းဖို့ ကီးတွေကို တိုက်ရိုက်ဖမ်း ပို့ဖို့လိုလာပါတယ်။ ဂူဂယ်နဲ့ အင်တာနက်မှာ ရှာကြည့်တော့ ဒီနေရာမှာ JavaScript နဲ့ ကီးတွေ ဖမ်းတဲ့ အကြောင်းရေးထားတာ တွေ့ရပါတယ်။ ခုနက script နဲ့ PHP နဲ့ပေါင်းရေးလိုက်တော့ အောက်ပါအတိုင်း key.php ရလာပါတော့တယ်။


<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
document.onkeypress = DisplayMsg;
function DisplayMsg(key_event)
{
    if (document.all) //Checks for IE 4.0 or later
    {
      document.form1.text1.value = String.fromCharCode(event.keyCode);   
    }
    else if (document.getElementById) //checks for Netscape 6 or later
    {
      document.form1.text1.value = String.fromCharCode(key_event.which);   
    }
    else if (document.layers) //Checks for Netscape 4
    {
      document.form1.text1.value = String.fromCharCode(key_event.which);
    }
    document.form1.submit();
}
//-->
</script>
<title>Capture Key Pressed</title>
</head>
<body>
<div style="display:none">
<form name="form1" action="key.php" method=GET>
<input type = "text" name = "text1">
</form>
</div>
<div style="font-size: 40px; color:blue;">
<?php
echo "Received: ";
echo $_GET["text1"];
?>
</div>
</body>
</html>

ဒီမှာ အဓိက ပြဿနာ ကတော့ ကီးတစ်ခု နှိပ်လိုက်တိုင်း ဝက်ဘ် စာမျက်နှာ တစ်ခုလုံး အသစ်ပြန်ပြန် ဖွင့်ပြီး reload လုပ်နေရတာ ပါပဲ။ အကယ်၍ အဲဒီစာမျက်နှာမှာ အခြား ရေးထားတာ အများကြီး ပါနေရင် အလုပ်လုပ်တာ အရမ်းနှေးသွား နိုင်ပါတယ်။ ပိုကောင်းတာက AJAX (Asynchronous JavaScript and XML) နည်းပညာကို သုံးတာပါပဲ။

Cool Emerald

Pages

Search This Blog