Working with JavaScript

website မှာ action တွေ ထည့်ချင်တယ် interactive ဖြစ်ချင်တယ်ဆိုရင်တော့ JavaScript ကို အသုံးပြုရပါမယ်။ ဒီအခန်းမှာ JavaScript code ကို ဘယ်လို ထည့်သွင်းရမယ်ဆိုတာကို ဖော်ပြပေးပါမယ်။ ဒီစာအုပ် HTML အဓိကထားပြီး ရေးသားထားတဲ့ စာအုပ်ဖြစ်တာကြောင့် JavaScript နဲ့ ပတ်သက်ပြီးတော့ အသေးစိတ်တော့ ပါဝင်မှာ မဟုတ်ပါဘူး။

Understanding JavaScript

JavaScript ကို web page မှာ dynamic effect တွေ ဖြစ်အောင် ဖန်တီးဖို့ အသုံးချကြပါတယ်။ HTML page ဟာ JavaScript နဲ့ ပေါင်းလိုက်တဲ့အခါမှာ ပုံမှန် သမာရိုးကျ HTML ထက် ပိုပြီး ထူးခြားတဲ့ ပုံစံကို ဖန်တီးနိုင်ပါတယ်။ JavaScript ကို အသုံးပြုပြီး div တွေကို show/hide လုပ်တာတွေ နောက်ပြီးတော့ message box ပြတာတွေ image ပြောင်းတာတွေ စသည်ဖြင့် အများကြီး ဖန်တီးနိုင်ပါတယ်။

JavaScript ဟာ script language အမျိုးအစားဖြစ်ပြီးတော့ အသုံးပြုသူ click လုပ်လိုက်တဲ့အခါ ဒါမှမဟုတ် cursor ကို ပုံပေါ်မှာ တင်လိုက်တဲ့ အခါ စသည့် event တွေ ပါဝင်လာပါတယ်။ Script ဟာ ကျွန်တော်တို့ရဲ့ website ထဲက ဖြစ်နိုင်သလို အခြား တနေရာက script တွေကိုလည်း ယူသုံးနိုင်ပါတယ်။

JavaScript ဟာ popular script language ဖြစ်တာကြောင့် browser တွေ အကုန်လုံးမှာ support လုပ်ပါတယ်။ Web browser ဟာ client-side မှာ ရေးသားတဲ့အတွက် JavaScript ကို client-side scripting လို့ ခေါ်ကြပါတယ်။ အခုနောက်ပိုင်း Node.js ကို အသုံးပြုပြီးတော့ server side အတွက်ပါ ရေးသားနိုင်ပါပြီ။

JavaScript ဟာ Java programming language နဲ့ မတူပါဘူး။ Java ဟာ JavaScript နှင့် ယှဉ်ရင်တော့ အသုံးချတဲ့ နေရာလည်း မတူပါဘူး။

Adding Scripts

JavaScript ကို html code နဲ့ တွဲပြီး ရေးနိုင်သလို အပြင်က .js file ကိုလည်း ယူသုံးနိုင်ပါတယ်။ html code အထဲမှာ ရေးလိုရင်တော့ <script> နဲ့ </script> ကြားမှာ အသုံးပြုနိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script type="text/javascript" src="external.js"></script>
  <script type="text/javascript">
    function showalert()
    {
        alert("Hello World!");
    }
  </script>
</head>
</html>

ဒီ code မှာ ဆိုရင် external.js file ကို 

<script type="text/javascript" src="external.js"></script>

နဲ့ အသုံးပြုထားပါတယ်။

Internal အတွက်ကိုတော့ 

<script type="text/javascript">
  function showalert()
  {
      alert("Hello World!");
  }
</script>

function ဆိုတာကတော့ အလုပ်လုပ်မယ့် အပိုင်းလေး တစ်ခုပါ။ function ရဲ့ အနောက်မှာ function name ပါပါတယ်။ function name ကို showalert ဆိုပြီး ပေးထားပါတယ်။ function name အနောက်မှာ argument parameter ပါပါတယ်။ ဘာ data မှာ ထည့်တာကို allow မလုပ်ထားတာကြောင့် showalert() ဆိုပြီးပဲ ရေးသားထားတာပါ။ alert ဆိုတာကတော့ message box ပြမယ့် function ပါ။ JavaScript မှာ ပါပြီးသား function ပေါ့။ double quote ကြားမှာ ရေးချင်တဲ့ စာကို ထည့်ပြီး ရေးသားရပါတယ်။

Document Object Model

JavaScript နဲ့ HTML ကို တွဲသုံးတဲ့အခါမှာတော့ DOM (document object model) က မဖြစ်မနေ အရေးပါပါတယ်။ DOM ဆိုတာကတော့ HTML ကို အဆင့်ဆင့် ခွဲသွားတဲ့ tree ပုံစံပါ။

Figure 10-1

Figure 10-1

Document root ဟာ <html> က စပြီးတော့ သူ့အောက်မှာ <head> နဲ့ <body> ရှိပါတယ်။ <head> အောက်မှာတော့ <title> ရှိတယ်။ <title> ထဲမှာတော့ My Page ဆိုတဲ့ စာ ရှိပါတယ်။ JavaScript ဟာ DOM ကို အသုံးပြုပြီးတော့ အဆင့်ဆင့် ခေါ်ပြီး လိုအပ်တဲ့ value ကို ရအောင် access လုပ်နိုင်ပါတယ်။ ဒါမှမဟုတ် id attribute ကို ခေါ်ပြီးတော့ DOM object ကို ရနိုင်ပါတယ်။

JavaScript Syntax

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

ဥပမာ။။

var k = 1;
k = k + 5;

အဲဒီမှာဆိုရင် k ထဲကို ၁ ထည့်ထားပါတယ်။ ပြီးလျှင် k ထဲကို k ထဲက တန်ဖိုးနဲ့ ၅ နဲ့ ပေါင်းပါဆိုပြီး ရေးသားထားပါတယ်။

သချာၤက ရေးသားပုံနဲ့ မတူတာကတော့ ညာဘက်ကနေ ဘယ်ဘက် variable ထဲကို တန်ဖိုး ထည့်ပါတယ်။ JavaScript မှာ အဆုံး ကို semicolons (;) နဲ့ ဆုံးရပါတယ်။ programming ကို မလေ့လာဖူးသေးရင်တော့ JavaScript ရေးရမှာ နည်းနည်းခက်ခဲပေမယ့် နားလည် သွားရင် ရေးသားရတာလွယ်ကူပါလိမ့်မယ်။

နောက်ထပ် ဥပမာ ကြည့်ရအောင်။

var x = "Hello";
x = x + " World!";
alert(x);

ဒီမှာဆိုရင်တော့ x ကို Hello ဆိုတဲ့ စာထည့်လိုက်ပါတယ်။ ပြီးမှ World! ဆိုတဲ့ စာကြောင်း ကပ်လိုက်ပါတယ်။ alert ဆိုတာကတော့ JavaScript မှာ messagebox ဖော်ပြဖို့ အတွက် အသုံးပြုပါတယ်။

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

Understanding Script Events and Handlers

JavaScript ကို ထည့်တော့မယ်ဆိုရင် JavaScript ဟာ ဘယ်လို အလုပ်လုပ်တယ်ဆိုတာကို သိဖို့လိုပါတယ်။ JavaScript ဟာ ပုံမှန်အားဖြင့် webpage တက်လာတာနဲ့ အလုပ်လုပ်ပါတယ်။ တချို့တွေကတော့ action တစ်ခုခု ရှိမှသာ အလုပ်လုပ်တာတွေရှိပါတယ်။ web developer အနေနဲ့ script တွေကို ဘယ်လို အလုပ်လုပ်စေချင်လဲဆိုတာကို ရေးသားထားပေးဖို့ လိုပါတယ်။

Script Events

သို့ပေမယ့် ကျွန်တော်တို့တွေဟာ button click လုပ်လိုက်တဲ့ အခါ ဒါမှမဟုတ် ပုံပေါ်ကို mouse ရောက်သွားတဲ့အခါမှသာ အလုပ်လုပ်စေချင်တဲ့အခါတွေမှာ သူနဲ့ သက်ဆိုင်ရာ event တွေမှာ ရေးသားထားပေးရပါတယ်။ JavaScript events action တွေဟာ web page ကို အသုံးပြုနေတဲ့ အချိန်မှာ အလုပ်လုပ်နေပါတယ်။ ဥပမာ။။ button ကို နှိပ်လိုက်ရင် alert ပြတာမျိုးပေါ့။ mouse event အတွက်ကတော့ mouse ရွှေ့လိုက်တဲ့အခါမှာ position ဘယ်နေရာမှာ ရှိလဲဆိုတာကို သိနိုင်ဖို့အတွက်ပါ။ နောက်ပြီး keyboard event တွေအတွက် key တစ်ခုခု နှိပ်လိုက်တိုင်း ဘယ် စာလုံးကို နှိပ်တယ်ဆိုတာကို သိနိုင်ပါတယ်။

Event Handlers

<img src="dog.png" onclick="bark()">
<img src="cat.png" onmouseover="purr()">

Event handlers ကတော့ event တစ်ခု ထဲရောက်လာပြီဆိုရင် ဘယ် function ကို သွားခေါ်မလဲဆိုတာကို ရေးသားထားပေးရပါတယ်။ အထက်ပါ code မှာ ဆိုရင် dog.png ပုံလေးကို နှိပ်လိုက်တဲ့ အခါမှာ onclick event ကို ရောက်လာပါတယ်။ အဲဒီအခါ handler က bark() function ဖြစ်နေတဲ့အတွက် bark() ကို လှမ်းခေါ်လိုက်ပါတယ်။

နောက်ထပ် ဥပမာလေး ကြည့်ရအောင်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
  <script>
  function showAlert()
  {
    alert('Clicked');
  }
  </script>
</head>
<body>
  <img src="world.png" onclick="showAlert();">
</body>
</html>

ဒီ code လေးမှာဆိုရင် world.png ပုံလေးကို နှိပ်လိုက်တာနဲ့ alert box လေးတက်လာတာကို တွေ့ရပါလိမ့်မယ်။

Event Handler Action
onload browser က page ကို load ဖြစ်တဲ့အချိန် တက်လာတဲ့ event
onunload Browser က page ကနေ ထွက်သွားတဲ့ အခါမှာ ခေါ်တဲ့ event
onmouseover element ပေါ်မှာ mouse တင်လိုက်တဲ့ အခါ ရောက်လာတဲ့ event
onmousedown mouse ခလုတ် နှိပ်လိုက်တဲ့ အချိန် ရောက်လာတဲ့ event
onmouseup mouse ခလုတ် နှိပ်ပြီး လွှတ်လိုက်တဲ့ အချိန် ရောက်လာတဲ့ event
onmousemove mouse ရွှေ့လိုက်တဲ့အချိန်အတွက်
onmouseout element ကနေ mouse ထွက်သွားတဲ့ အချိန်
onclick click နှိပ်လိုက်တဲ့ အခါမှာ ရောက်လာတဲ့ event
ondblclick double click နှိပ်လိုက်တဲ့ အခါမှာ ရောက်လာတဲ့ event
onkeypress keyboard ကနေ key ကို ဖိပြီး လွှတ်လိုက်တဲ့ အချိန်မှာ ရောက်လာတဲ့ event
onkeydown key ကို ဖိထားချိန်အတွက်
onkeyup key ကို လွှတ်လိုက် ချိန်အတွက်
onsubmit submit button ကို နှိပ်လိုက်တဲ့ အချိန်အတွက်

Add JavaScript to a Web Page

JavaScript ကို <script> နဲ့ </script> ကြားမှာ code တွေကို ရေးသားရပါတယ်။ အရင် code တွေမှာ type="text/javascript" ကို တွေ့ရတတ်ပေမယ့် modern HTML မှာ JavaScript က default ဖြစ်တာကြောင့် type attribute ကို မထည့်လည်း ရပါတယ်။ ပုံမှန် အားဖြင့် script တွေကို <head> tag ကြားမှာရေးပေမယ့် ကျွန်တော်တို့တွေ body မှာ လည်း အသုံးပြုနိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  <script type="text/javascript">
  document.write("Screen width : " + screen.width);
  document.write("<br>");
  document.write("Screen height : " + screen.height);  
  </script>
</body>
</html>

အဲဒီ code ဟာ screen ရဲ့ width နဲ့ height ကို webpage မှာ ရိုက်ထုတ်ပြထားတာပါ။

Figure 10-2

Figure 10-2

ViewSource မှာ ဆိုရင်တော့ ကျွန်တော်တို့ ရေးထားသည့် code အတိုင်းပဲ မြင်ရပါလိမ့်မယ်။ Chrome သို့မဟုတ် firefox ကို အသုံးပြုရင် Browser ပေါ်မှာ right click နှိပ်ပြီး Inspect Element ကို နှိပ်လိုက်ပါ။

Figure 10-3

Figure 10-4

Elements ထဲမှာ document.write နဲ့ရေးထားတာ မဟုတ်ပဲ HTML code တွေကို တွေ့ရပါလိမ့်မယ်။

Figure 10-4

Figure 10-4

Link to a JavaScript File

JavaScript ကို ကျွန်တော်တို့ တွေ သီးသန့် ခွဲရေးပြီးတော့ HTML ထဲမှာ ပြန်ပေါင်းထည့်လို့လည်း ရပါတယ်။ အရင်ဆုံး ကျွန်တော်တို့တွေ browser.js file ကို ဖန်တီးပါမယ်။

browser.js မှာ

function browserDetails()
{
  document.write("Browser code name : " + navigator.appCodeName + "<br>");
  document.write("Browser name : " + navigator.appName + "<br>");
  document.write("Browser version : " + navigator.appVersion + "<br>");
  document.write("Browser platform : " + navigator.platform + "<br>");
  document.write("Browser details : " + navigator.userAgent + "<br>");
}

ကျွန်တော်တို့ browser.js file နေရာနဲ့ အတူတူ index.html တစ်ခု ဖန်တီးပါမယ်။

index.html ထဲမှာ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script type="text/javascript" src="browser.js"></script>
</head>
<body>
  <script type="text/javascript">
  browserDetails();
  </script>
</body>
</html>

ကျွန်တော်တို့ အနေနဲ့ HTML ကနေ ပြင်ပ JavaScript ကို ခေါ်ချင်ရင် src နဲ့မှာ ပတ်လမ်းကြောင်းထည့်ပေးရပါတယ်။

src နဲ့ JavaScript ကို ခေါ်ပြီးတဲ့အခါမှာတော့ JavaScript file ထဲက function တွေကို ကျွန်တော်တို့ တိုက်ရိုက် ခေါ်လို့ရပါပြီ။ body မှာ ကျွန်တော် JavaScript file ထဲမှာ ရေးထားတဲ့ browserDetails() function ကို ခေါ်လိုက်ပါတယ်။

Figure 10-5

Figure 10-5

navigator ဟာ browser နဲ့ ပတ်သက်တဲ့ အချက်အလက်တွေ ကို ရယူနိုင်ပါတယ်။ browserDetails function ဟာ browser information တွေကို document.write နဲ့ web page မှာ ရိုက်ထုတ်ထားပါတယ်။

Insert the Current Date and Time

ကျွန်တော်တို့တွေ JavaScript ကို အသုံးပြုပြီးတော့ web page မှာ အချိန်တွေ ထည့်လို့ရပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  <h2>Current Date and Time</h2>
  <time>
    <script type="text/javascript">
    document.write(Date());
    </script>
  </time>
</body>
</html>

ကျွန်တော်တို့ Date() ဆိုတဲ့ function ကို ခေါ်ထားပြီးတော့ ရလာတဲ့ ရလာဒ်ကို document.write နဲ့ body မှာ ရိုက်ပြထားပါတယ်။ Page ကို refresh လုပ်လိုက်တုန်း second ပါ လိုက်ပြောင်းသွားတာကို တွေ့ရပါလိမ့်မယ်။ Date() ဟာ အခု လက်ရှိ computer မှာ သတ်မှတ်ထားတဲ့ အချိန်ကို ဖော်ပြပေးပါတယ်။

Figure 10-6
Figure 10-6

Display an Alert Message Box

JavaScript ကို အသုံးပြုပြီးတော့ ကျွန်တော်တို့တွေ web page တွေမှာ alert message box ဖော်ပြလို့ရပါတယ်။ alert message ဟာ အသုံးပြုသူကို အရေးကြီးတဲ့ အချက်အလက်တွေ ဖော်ပြတဲ့ အနေနဲ့ အသုံးပြုကြပါတယ်။ ဥပမာ။။ form ကို submit လုပ်လိုက်တဲ့ အခါမှာ data တွေ ထည့်ထားတာမှားနေရင် မှားနေကြောင်းကို alert message box နဲ့ ဖော်ပြပါတယ်။ အခု ကျွန်တော်တို့တွေ page တက်တက်ခြင်းမှာ alert message box တစ်ခု တက်လာအောင် ဖန်တီးကြည့်ရအောင်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body onload="alert('Welcome to our new site!')">
  <h2>Alert!</h2>
</body>
</html>

ဒီ code လေးဟာ body ရဲ့ onload event မှာ ရေးထားပါတယ်။ ဒါကြောင့် page load တက်လာတာနဲ့ alert function ကို သွားခေါ်ပါမယ်။ alert message မှာ Welcome to our new site! လို့ရေးသားထားတဲ့အတွက် Welcome to our new site! ဆိုတဲ့ စာလေး တက်လာတာကို တွေ့ရပါမယ်။

Figure 10-7

Figure 10-7

Display a Pop-Up Window

JavaScript ကို အသုံးပြုပြီးတော့ pop-up window ကို web page မှာ ဖော်ပြနိုင်ပါတယ်။ Pop-up windows ဟာ နောက်ဆုံး သတင်းတွေကို ဖော်ပြရမှာ အသုံးပြုနိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  <a href="#" onclick="window.open('readme.html','Readme','width=350,height=180');">Read this first</a>
</body>
</html>

အဲဒီ code မှာ link ကိုနှိပ်လိုက်တာနဲ့ pop up windows လေး တက်လာပါလိမ့်မယ်။ href attribute ကို # လို့ရေးထားတာကတော့ link ကို ဘာနဲ့ မှ မချိတ်ထားတာပါ။ onclick လုပ်လိုက်တဲ့ အခါမှာတော့ popup windows ခေါ်ပါတယ်။

window.open('readme.html','Readme','width=350,height=180');

readme.html ကတော့ ကိုယ် ဖွင့်ချင်တဲ့ file ပါ။ ဒုတိယ parameter ကတော့ windows name ပါ။ ပြီးတော့ တတိယ parameter မှာ width နဲ့ height ကို ပေးထားပါတယ်။ တက်လာမယ့် popup windows ရဲ့ width နဲ့ height ပါ။

Figure 10-8

Figure 10-8

တကယ်လို့ popup windows ကို screen ပေါ်မှာ နေရာ အတိအကျနဲ့ ပေါ်ချင်ရင်တော့ top နဲ့ left ကို အသုံးပြုနိုင်ပါတယ်။

window.open('readme.html','Readme','width=350,height=180,left=150,top=200');

အထက်ပါ code အရဆိုရင်တော့ ဘယ်ဘက်ကနေ အကွာ ၁၅၀ pixel နဲ့ အပေါ်ကနေ အကွာ ၂၀၀ pixel မှာ ပေါ်ပါလိမ့်မယ်။

Create an Image Rollover Effect

JavaScript မှာ mouse hover event ပါပါတယ်။ ဒါကို အသုံးချပြီးတော့ image ပေါ်ကို ပုံတင်လိုက်တဲ့ အခါ နောက်ပုံတစ်ခု ပြောင်းသွားအောင် ဖန်တီးနိုင်ပါတယ်။

Rollover image ကို ဖန်တီးဖို့ အတွက် mouse event handlers ၂ခု ကို အသုံးပြုပါတယ်။ image အရွယ်အစား တူသည့် image ၂ ခု လိုပါမယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
<img src="house_bw.jpg" onmouseover="this.src='house.jpg';" onmouseout="this.src='house_bw.jpg';">
</body>
</html>

အဲဒီ code မှာ mouse ကို ပုံပေါ်တင်လိုက်တာနဲ့ src ကို house.jpg ပြောင်းလိုက်ပါတယ်။ mouse က ပြန်ထွက်သွားရင် မူရင်းပုံ house_bw.jpg ကို ပြန်ပြောင်းထားပါတယ်။

Figure 10-9

Figure 10-9. house_bw.jpg

Figure 10-10

Figure 10-10. house.jpg

Show a Hidden Element

ကျွန်တော်တို့တွေ web site တွေမှာ link တစ်ခုကို ဒါမှမဟုတ် button ကို click နှိပ်လိုက်မှ သက်ဆိုင်ရာ စာတွေ ကို အောက်မှာ ပေါ်လာတာမျိုးတွေကို ဖန်တီးလို့ရပါတယ်။ ပထမဆုံး သက်ဆိုင်ရာ element ကို css က display property မှာ none လုပ်ထားပါမယ်။ ပြီးမှ click နှိပ်လိုက်မှ ပြန်ပြပေးပါမယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  
  <script>
  function showmore()
  {
      document.getElementById('more').style.display='block';
      document.getElementById('more_link').style.display='none';
  }
  
  function hide()
  {
    document.getElementById('more').style.display='none';
    document.getElementById('more_link').style.display='block';
  }
  </script>
</head>
<body>
<p>
  One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014.
</p>

<a href="#" onclick="showmore()" id="more_link">Show more</a>    
<div style="display:none" id="more">
  <p>One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>

  <a href="#" onclick="hide()">Hide</a>    
</div>
</body>
</html>

အဲဒီ code လေးမှာ show more ဆိုတာကို နှိပ်လိုက်ရင် ဒုတိယ စာပိုဒ် ပေါ်လာပါလိမ့်မယ်။ အောက်ဆုံးမှာ Hide ဆိုတာလေးကို နှိပ်လိုက်ရင်တော့ ဒုတိယ စာပိုဒ် ပြန်ပျောက်သွားတာကို တွေ့ရပါလိမ့်မယ်။ document.getElementById နဲ့ paragram ရှိတဲ့ <div> ရဲ့ css ကို ပြင်လိုက်ပါတယ်။ ပြီးတော့ showmore ဖြစ်နေရင် div layer ကို ဖော်ပြပြီးတော့ id='more_link' ကို hidden ပြန်လုပ်ထားတာကို တွေ့ရပါလိမ့်မယ်။

Figure 10-11

Figure 10-11. Show more link

Figure 10-12

Figure 10-12

Change Page Content

ကျွန်တော်တို့တွေ JavaScript နဲ့ DOM object ကို ရယူပြီးတော့ အထဲမှာ ရှိတဲ့ content တွေကိုလည်း ပြောင်းလဲ နိုင်ပါတယ်။ ကျွန်တော်တို့တွေ id နဲ့ DOM ကို ရယူပါမယ်။ ပြီးတော့ innerHTML method ကို သုံးပြီး အထဲက HTML code ကို ပြောင်းလဲနိုင်ပါတယ်။ အောက်မှာ ဥပမာ code လေးကြည့်ရအောင်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script>
  function updateText()
  {
    document.getElementById('content').innerHTML = document.getElementById('update_text').value;
  }
  </script>
</head>
<body>
  
  <section>
    <input type="text" value="" id="update_text">
    <input type="button" value="Update" onclick="updateText()">
  </section>
  
  <section id="content">
    Hello World!
  </section>
</body>
</html>

ဒီ code လေးမှာ text box ထဲကို စာရိုက်ထည့်ပြီး update လုပ်လိုက်တဲ့ အခါ Hello World! ဆိုတဲ့စာ အစား text box က စာ ပြောင်းသွားတာကို တွေ့ရပါလိမ့်မယ်။

Figure 10-13

Figure 10-13

Figure 10-13

Figure 10-14

Text box ထဲက data ကို လိုချင်ရင် value property နဲ့ ဖတ်ရပါတယ်။ div , section စတဲ့ element ထဲက HTML data တွေကို ပြောင်းချင်ရင်တော့ innerHTML property ကို update လုပ်ပေးရပါတယ်။

Display a Calculation

Modern HTML မှာ <output> ဆိုတဲ့ tag ပါပါတယ်။ <output> tag ကို အသုံးပြုပြီးတော့ calculation တွေရဲ့ ရလဒ်ကို ဖော်ပြရမှာ အသုံးပြုနိုင်ပါတယ်။ <output> tag ရဲ့ ပုံစံကို ပြင်ချင်ရင်တော့ CSS ကို အသုံးပြုဖို့လိုပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  <h2>Ticket Price</h2>
  <form name="ticket" oninput="total.value= adult.valueAsNumber * 10 + child.valueAsNumber * 8">
    Adult : <input type="number" step="1" value="0" name="adult"><br/>
    Children : <input type="number" step="1" value="0" name="child"><br/>
    Total : {{content}}lt;output name="total">0</output>
  </form>
</body>
</html>

ဒီ code မှာ ဆိုရင် textbox မှာ စာရိုက်တာနဲ့ oninput event ကို ရောက်သွားပြီးတော့ output မှာ ရလဒ်ကို ထုတ်ပြပေးမှာ ဖြစ်ပါတယ်။ ကျွန်တော်တို့တွေဟာ form မှာ JavaScript ရေးထားတာကြောင့် name နဲ့ တိုက်ရိုက်ခေါ်လို့ရပါတယ်။

ကျွန်တော်တို့ function ခွဲပြီး ရေးရင်တော့ input နဲ့ output tag ကို ခေါ်ဖို့အတွက် form နာမည်နဲ့ ခေါ်ဖို့လိုပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <script>
  function calculate()
  {
    ticket.total.value= ticket.adult.valueAsNumber * 10 + ticket.child.valueAsNumber * 8;
  }
  </script>
</head>
<body>
  
  <h2>Ticket Price</h2>
  <form oninput="calculate()" name="ticket">
    Adult : <input type="number" step="1" value="0" name="adult"><br/>
    Children : <input type="number" step="1" value="0" name="child"><br/>
    Total : {{content}}lt;output name="total">0</output>
  </form>
</body>
</html>

အထက်ပါ code မှာ calculate() ဆိုတဲ့ function ကို ခေါ်ထားပြီးတော့ 

ticket.total.value= ticket.adult.valueAsNumber * 10 + ticket.child.valueAsNumber * 8;

လို့ ရေးထားပါတယ်။ ticket ဆိုတာကတော့ form name ဖြစ်ပါတယ်။

အခုလောက်ဆိုရင်တော့ JavaScript နဲ့ ပတ်သက်ပြီး ဘာတွေ လုပ်လို့ရလဲ ဘယ်လိုရေးလို့ရသလဲ ဆိုတာကို သိလောက်ပါပြီ။ နောက်အခန်းမှာတော့ canvases ကို စပါမယ်။