Wednesday, September 12, 2012

JavaScript Essential Tranning Part 1

မိတ္ဆက္
Javascript ကုိစတင္ျပီးေလ႔လာဖုိ႔သူေတြကေတာ႔ Html , Css ကိုသိဖို႔လိုအပ္ပါတယ္

Html ပံုစံ
<htmll>
    <head>
        <title>Simple Page</title>
    </head>
    <body>
        <div id="main">
            <h1>Today's Headline<h1>
            <p>Regular paragraph text goes here.</p>
        </div>
    </body>
</html>

Css ပံုစံ
p
{
    color:#333;
    font-size:1.2em;
}
#main
{
    width:90%;
    background-color:#eee;
}

 Javascript ကိုေရးဖို႔ Programmer ျဖစ္ရန္မလိုပါဘူး ကၽြန္ေတာ္တို႔အေကာင္းဆံုးစဥ္းစားဖို႔ပဲ႔လိုပါတယ္
 ပထမဆံုး javascript ကိုစေရးဖို႔အတြက္ html web page တစ္ခုကိုအရင္တည္ေဆာက္ရေအာင္

 <html>
<head>
<title>Simple Page</title>
</head>
<body>
    <h1>Simple HTML Page</h1>   
        <p>
        This is a very simple HTML page.
        </p>

    <p>It's about as basic as they come. It has:<p>

    <ul>
        <li>An H1 Tag</li>
        <li>Two paragraphs</li>
        <li>An unordered list</li>
    </ul>
</body>
</html>

အေပၚမွာေရးထားတာက html ပံုစံပါ
ဒါကို ကၽြန္ေတာ္တို႔က Js code ေလးကို alert ေလးေပၚေအာင္ထည္႔ၾကည္႔ရေအာင္

<script type="text/javascript">
alert("Hello ,Welcome from cyberoot.blogspot.com");
</script>

အဲဒါက javascript instruction တစ္ခုျဖစ္သလို႔ statement တစ္ခုလည္းျဖစ္ပါတယ္
ဒီေတာ႔ အဲဒီ statement ကို html နဲ႔ေပါင္းေရးလိုက္ေတာ႔ ေအာက္ကလို႔ ျဖစ္သြားမွာေပါ႔

<html>
<head>
<title>Simple Page</title>
</head>
<body>
    <h1>Simple HTML Page</h1>   
        <p>
        This is a very simple HTML page.
        </p>

    <p>It's about as basic as they come. It has:<p>

    <ul>
        <li>An H1 Tag</li>
        <li>Two paragraphs</li>
        <li>An unordered list</li>
    </ul>

    <script type="text/javascript">
        alert("Hello, Welcome from cyberoot.blogspot.com");
    </script>
</body>
</html>

 ကၽြန္ေတာ္တို႔ programming လို႔ေျပာလိုက္တာနဲ႔  tools ေတြ application ေတြကိုအသံုးျပဳၾကတာသိမွာေပါ႔
ဥပမာ
iPhone Application ဆိုရင္ Object C , Mac os X , Xcode စတာေတြသံုးမယ္
.Net Application ဆိုရင္ C# or vb.net ,Window, Visual Studio စသျဖင္႔ေပါ႔
ဟုတ္ျပီ ဒါဆို Javascript မွာေကာ ဘယ္လိုသံုးမလဲဆိုတာ သိလား?
Javascript ကိုသံုးဖို႔အတြက္အေကာင္းဆံုးက ဘယ္လို tool မ်ိဳးလဲ?

ဟုတ္ကဲ႔ ကၽြန္ေတာ္တို႔ အျမဲတမ္းအသံုးျပဳေနက် application ေတြျဖစ္တဲ႔
Dreamweaver , Xcode , Visual Studio ,TextMate , NetBeans စတဲ႔ application ေတြကလည္း Javascript ကို support လုပ္ပါတယ္

Mac အတြက္ေတာ႔ aptana ကိုသံုးစြဲနိုင္ပါတယ္ www.aptana.com မွာသြားၾကည္႔နိုင္ပါတယ္

Window အတြက္ေတာ႔ firebug ကို js နဲ႔တြဲ႔သံုးတာအရမ္းကိုေကာင္းပါတယ္
firebug အေၾကာင္းကိုလည္းကၽြန္ေတာ္ေရးေပးတာတာရွိပါေသးတယ္ မသိဘူးဆိုရင္ေတာ႔ရွာဖတ္လိုက္ဦး
firebug ကိုေဒါင္းခ်င္တယ္ဆိုရင္
http://getfirebug.com


1 ျပထားတဲ႔ေနရာက အလုပ္အလုပ္လုပ္တာကိုျပတာပါ console ကို enable လုပ္ထားဖို႔ေတာ႔လိုပါတယ္
2 ကေတာ႔ run မယ္႔ ေနရာကိုေခၚတာပါ toggle သေဘာေပါ႔
3 ကေတာ႔ script ေရးျပီးရင္ run မယ္ေနရာပါ
result ကိုေတာ႔ browser မွာျပျပီး 1 ျပထားတဲ႔ေနရာမွာလည္း ကၽြန္ေတာ္တို႔ run လိုက္တဲ႔ script ကိုျပေပးမွာပါ

ok လား
ဒါဆိုေစာေစာကေျပာထားခဲ႔တဲ႔ အေျခခံေလးေတြကိုနည္းနည္းေလးထပ္ေျပာမယ္
HTML , CSS , JAVASCRIPT

HTML ဆိုတာက     mark up မိတ္ကပ္ လိမ္းတဲ႔ language ေပါ႔ဗ်ာ content အေၾကာင္းရာေတြကိုေဖာ္ျပေပးပါတယ္
CSS    ဆိုတာက Style Sheet Language ပါ ပဲ႔မ်ားတဲ႔ language ေပါ႔ Presentation ေပါ႔ မိန္းကေလးေတြနဲ႔တူပါတယ္ အလွဆင္တဲ႔ language
JAVASCRIPT ဆိုတာကေတာ႔ programming language ပါ behaviour ဘယ္မ်ိဳးျဖစ္လာတယ္ ဘယ္လိုမ်ိဳေပၚလာတဲ႔ စတဲ႔ effect ေတြကိုေကာင္းေကာင္းေရးနိုင္ပါတယ္

အမ္ ဒါဆိုရင္ scripting language ဆိုတာေကာဘာလဲဟ
Operating System ေပၚမွာ  C++ , Java , .Net စတာေတြကို Run နိုင္ပါတယ္
Js ကေတာ႔ Operating ေပၚမွာ အလုပ္မလုပ္ပဲ႔ browser ေပၚမွာ run တဲ႔အတြက္ scripting langugae ျဖစ္သြားပါတယ္

--------------------------------Web Browser--------------------------
||--------------------------------Web page----------------------------||
||                                 Javascript                                          ||
||--------------------------------------------------------------------------||
||--------------------------------------------------------------------------||

web browser ထဲမွာ webpage ကို run တယ္  webpage ထဲမွာ javascript code ကို run ပါတယ္
ဒါေၾကာင္႔ local file ကို access မလုပ္နိုင္ပါဘူး  database ကိုလည္းတိုက္ရိုက္ access မလုပ္နိုင္ပါဘူး
hardware ကို access မလုပ္နိုင္ပါဘူး ဥပမာ USB

ေနာက္တစ္ခုက Javascript ဆိုတာက Client Side language တစ္ခုပါ
user computer ထဲ႔က browser က server ကို request လုပ္တဲ႔အခါ server က html နဲ႔ css ကို brower ဆီျပန္ပို႔ေပးပါတယ္
မွတ္ခ်က္ Javascript ကို disable လုပ္လို႔ရပါတယ္

သမိုင္းေၾကာင္ေလးနည္းနည္းေျပာရေအာင္ ေျပာင္းလဲလာပံုအဆင္႔ဆင္႔

1995 မွာ LiveScript
1996 မွာ JavaScript NetScape 2
         IE 3 မွာ JScript ျဖစ္လာ
1997 မွာ ECMAScript
1999 မွာ ECMAScript 3
2009 မွာ ECMAScript 5 ကို publish လုပ္ခဲ႔ပါတယ္

Javascript ကိုေရးဖို႔ ဘာေတြလိုမလဲ?
text editor ပဲ႔လိုပါတယ္ notepad , wordpad စသည္ျဖင္႔ အျခား application နဲ႔လည္းေရးနိုင္ပါတယ္

အဆင္ေျပၾကပါေစ

No comments:

Post a Comment

Thanks for your comments
Welcome from cyberoot