JavaScript - Yan Naing Htun PDF

F T ra n sf o F T ra n sf o
PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
A B B Y Y.c A B B Y Y.c
Chaper 1
YAN NAING
HTUN(UCSM)
JAVASCRIPT 2.0 COMPLETE REFERENCE
Chapter 1 | Myanmar Edition@(http:\\so25stars.wordpress.com)

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
Introduction to JavaScript
‘JavaScript’ ဆိုတာ ယေန႔ Web ေပၚမွာ အမ်ားဆံုးအသံုးျပဳေနတဲ့ client-side scripting
language တစ္ခုပဲျဖစ္ပါတယ္။အဲ့ဒီ client-side scripting language ဆိုတာကုိပဲျပန္ရွင္းျပရရင္ မိမိ

စက္အတြင္းမွာပဲ run ႏိင
ု ျ္ ပီး scripting language ဆိတ
ု ာကေတာ့ မိမဘ
ိ ာသာသီးသန္႔
မရပ္တည္ႏိုင္ပဲ Programming language တစ္ခုခုနဲ႔ ၾကားညွပ္ေရးရတဲ့ Programming Language
မ်ိဳးကုိဆိုလိုတာပါ။ Site တစ္ခုရဲ႕ server ေပၚမွာသာ run ႏိုင္တဲ့ server-side programming
language ဆိုတာေတြလည္းရိွပါေသးတယ္။ ဥပမာ- PHP (HyperText Preprocessor) လို
Programming Language မိ်ဳးေပါ့။ သူကလည္း script language တစ္ခုပါပဲ။ဒါေပမယ့္ php ကုိအ
သံုးျပဳေရးသားထားတဲ့ site ေတြးဟာအလြန္ပဲေပါ့ပါးပါတယ္။ ျမင္သာေအာင္ေျပာျပရရင္ ကၽြန္ေတာ္တို႔
ေန႔စဥ္အသံုးျပဳေနၾကတဲ့ facebook ဟာ php ကိုအသံုးျပဳျပီးေရးသားထားတာပါ။ ထားပါ။ JavaScript
အေၾကာင္းကုိျပန္ဆက္ရရင္JavaScriptကုိသင္ယူဖို႔ HTML(Hyper Text Markup Language)ကုိမ
ျဖစ္မေန တတ္ထားဖို႔ေတာ့လိုပါလိမ့္မယ္။ ဒီစာအုပ္မွာ သင့္ကုိ HTML တတ္ထားျပီးသူတစ္
ေယာက္လယ
႔ုိ ူ ဆျပီး ရွငး္ ျပထားလိပ
႔ု ါ။ JavaScript ဟာရွဳပ္ေထြးလွတဲ့ web ေပၚမွ user interface
ဆီမွ Data Validation (user ဆီမွ ထည့္သင
ြ ္းလိုက္ေသာ Data ႏွင့္ Data base အတြင္းရိွေသာ
Data ႏွစ္ခု တိုက္ဆိုင္စစ္ျခင္း)မ်ိဳး၊ ေရးထားတဲ့ program document အတြင္းမွာပဲ တြက္ခ်က္ျခင္းမ်ိဳး
(manipulate) အစရိွတာေတြကုိ ေကာင္းမြန္စြာလုပ္ေဆာင္ႏိုင္ပါတယ္။ ဒါ့အျပင္ JavaScript ရဲ႕
အသံးု ၀င္မဳွ ႕ကုိ သတိျပဳမိၾကတဲ့ Developer အခ်ိဳ႕ဟာ X(HTML), CSS, XML အစရိတ
ွ ့ဲ Language
ေတြနတ
ဲ႔ ြဲဖက္ အသံးု ခ်ပါတယ္။
တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 1

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
First Look at JavaScript
JavaScript Language ရဲ႕ Structure ေရာ၊ Syntax ေတြကုိေရာ အနည္းငယ္ သတိျပဳမိသြား

ေအာင္ Browser ေပၚမွာ “Hello World from JavaScript!” ဆိုတဲ့ စာသားေလးကုိ Output
ထုတ္ေပးႏိုင္မယ့္ ပထမဆံုး Program ေလးတစ္ခုကုိ ကၽြန္ေတာ္တို႔ အတူတူေရးၾကည့္ရေအာင္။
ပထမဆံုး Program ေရးဖိ႔ု ကၽြနေ

္ တာ္တ႔ုိရဲ႕ မရိွမျဖစ္ မိတေ
္ ဆြၾကီး Notepad ကုေ
ိ ခၚလိက
ု ပ
္ ါ။
notepad++ ဆုိတဲ့ Text Editor ေလးကုိ သင့္ computer မွာတင္ထားရင္ေတာ့ အဲ့ဒီ Editor ေလး
ဟာ Program Error ရွာရာမွာ Notepad ထက္သင့္ကုိပိုျပီး အကူအညီေပးပါလိမ့္မယ္။JavaScript ကုိ
<head></head>အတြင္းမွာပဲအမ်ားဆံုးေရးေလ့ရိွပါတယ္။ေအာက္ေဖာ္ျပပါ program မွာေတာ့
Body Tag အတြင္းမွာပဲ ေရးျပထားပါတယ္။
helloWorld.html
<!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" lang="en">
<head>
<title>JavaScript Hello World</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-

1" />
</head>
<body>
<h1 align="center">First JavaScript</h1>
<hr />
<script type="text/javascript">
document.write("Hello World from JavaScript!");

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
</script>
</body>
</html>
မွတခ
္ ်က္ - “<!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" lang="en">”အစရိွတဲ့ codeေတြကိုနားမလည္လို႔ စိတ္ပူမေန
ပါနဲ႔။ သူတို႔ေတြမပါလည္း browser ကသင့္ code ေတြကုိ ေကာင္းေကာင္းနားလည္ပါတယ္။ အဲ့ဒီ code ေတြကုိ
ႏိုင္ငံတကာ W3C standard အတိုင္းကုိက္ညီမွဳ႕ရိွေအာင္ ထည့္သြင္းေပးထားတာပါ။
စာလံးု အနီနဲ႔ ျပေပးထားတဲ့ code ၃ေၾကာင္းကသာ JavaScript code ျဖစ္ပါတယ္။ က်န္

Html code မ်ားကေတာ့ သူ႕အလုပသ
္ လ
ူ ုပသ
္ ြားၾကပါလိမမ
့္ ယ္။ HTML code ေတြၾကားမွာ
JavaScript code ေတြကို ကြဲျပားေစဖိ႔ု <script></script> ဆိတ
ု ဲ့ tag ထဲမာွ ေရးပါတယ္။ အဲ့ဒီ
script tag ထဲမွာမွ type ဆိုတာက script tag ရဲ႕ Attribute တစ္ခုပါ။ သူ႕ထဲမွာ သံုးမယ့္ script
အမ်ိဳးအစားကုိေဖာ္ျပပါတယ္။
document.write();ဆိုတာကေတာ့ Browser မွာစာသားတစ္ခုေပၚလာဖို႔အသံုးျပဳတဲ့ built-

in function တစ္ခုပါ။သူ႔ထဲမွာ မိမိ Browser မွာေဖာ္ျပလိုတဲ့ စာသားကုိေရးရမွာျဖစ္ပါတယ္။
‘HelloWorld.html’ ဆိုတဲ့ နာမည္နဲ႔ save ျပီး run ၾကည့္ပါ။ ေအာက္ပါအတိုင္း Browser ေပၚမွာေဖာ္
ျပေပးလာပါလိမ့္မယ္။

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
အဲဒ
့ ီ document.write function ထဲမာွ Html code ေတြကို ေအာက္ပါအတိင
ု း္ ညွပေ
္ ရးႏိုငပ
္ ါ
ေသးတယ္။
document.write("<strong>Hello World from JavaScript!</strong>");

Hello World from JavaScript! ဆိတ
ု ဲ့ စာသားေလးဟာ bold ျဖစ္သြားပါလိမမ
့္ ယ္။
Adding JavaScript to XHTML Documents
JavaScript code ေတြကို Html Document ထဲထည္သ

့ ြင္းရာမွာ ေအာက္ပါအတိင
ု း္ နည္း
လမ္း (၄) မိ်ဳးနဲထ
႔ ည္သ
့ ြငး္ ေရးသားႏိုငပ
္ ါတယ္။
၁။ <script> tag ထဲမာွ ထည္သ

့ ြငး္ ေရးသားျခင္း။ (Within the <script> element)
တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏုင

ိ ္ ၊ေၾကး/ေျမ) Page 4
PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
၂။ <script> tag ထဲက attribute တစ္ချု ဖစ္တဲ့ ‘src’ ဆိတ

ု ဲ့ attribute ကုအ
ိ သံးု ျပဳျပီး
Javascript file ကုိေခၚယူအသံးု ျပဳျခင္း။ (As a linked file via the src attribute of the <script>
element)
၃။ Html ထဲက event handler ေတြျဖစ္တဲ့ OnClick, OnMouseOver အစရိတ

ွ ဲ့ event မ်ားနဲ႔
တြဲဖက္အသံးု ခ်ျခင္း (Within an XHTML event handler attribute such as onclick)
၄။ Pseudo Link တစ္ခုအျဖစ္ <a> tag ထဲတြင္ထည့္သြင္းေရးသားျခင္း(Via the pseudo-URL

javascript: syntax referenced by a link)
၁။ <script> tag ထဲမွာထည့္သြင္းေရးသားျခင္း။ (Within the <script> element)
အထက္မာွ ေဖာ္ျပခဲတ
့ ဲ့ example အတိင
ု း္ ေရးသားျခင္းမ်ိဳးျဖစ္ျပီး JavaScript ရဲ႕ function
ေတြကေ
ို တာ့ <head> </head> tag ထဲတြငေ
္ ရးသားရပါမယ္။ အဲဒ
့ ေ
ီ နာက္ body tag ထဲကေန
ယင္းfunction ကုေ
ိ ခၚယူအသံးု ခ်ႏိင
ု ပ
္ ါျပီ။ ေအာက္မာွ ေဖာ္ျပထားတဲ့ example program ကုေ
ိ လ့လာ
ၾကည္ရ
့ ေအာင္။
script.html
<head>
<title>JavaScript in the Head</title>

1" />

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
function alertTest()
alert("Danger! Danger! JavaScript Ahead");
</script>
</head>
<body>
<h2 align="center">Script in the Head</h2>
<hr />
alertTest();
</script>
</body>
</html>
The <noscript> element
JavaScript ကုိ browser ကေကာင္းေကာင္း support မလုပတ

္ ဲ့ အခါ (ဒါမွမဟုတ္) browser
မွာ JavaScript ကုိ turned off (ပိတ္ထားတဲ့အခါ) လုပ္ထားတဲ့အခါ သင့္ရဲ႕ web application ကေန
သံးု စြဲသူ (user) ထံ သင္ရ
့ ဲ႕ application ဟာ JavaScript ကုအ
ိ သံးု ျပဳထားေၾကာင္း၊ သိေ
႔ု သာ္ user ၏
browser မွ JavaScript ကုိ support မလုပ္ေၾကာင္း ျပန္ျပီး information ေပးဖိလ
႔ု ပ
ုိ ါတယ္။ အဲဒ
့ လ
ီ ုိ
လိအ
ု ပ္လာတဲအ
့ ခါ ကုယ
ိ ေ
္ ပးခ်င္တဲ့ information ကုိ <noscript> tag ထဲမာွ ထည္သ
့ ြင္းေရးသားရပါ
လိမ့္မယ္။ေအာက္ေဖာ္ျပပါ program ကုိေလ့လာၾကည္ပါ။ အလြန္ပဲရိုးရွင္းပါတယ္။

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
function.html
<head>
<title>noscript Demo</title>

1" />
</head>
<body>

</script>
<noscript>
<em>Either your browser does not support JavaScript or it
is currently disabled.</em>
</noscript>
</body>
</html>

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
JavaScript ကုိ support မလုပတ

္ ့ဲ အခုေခတ္မာွ မရိွေတာ့သေလာက္ပါပဲ။ ဒါေပမယ့္ Mozilla
FireFox ရဲ႕ Tool=>options ထဲမာွ enable JavaScript ကုအ
ိ မွနၿ္ ခစ္ျဖဳတ္ထားရင္ေတာ့ JavaScript
ကုိ သင့္ Mozilla ကမသိေယာင္ေဆာင္ေနပါလိမမ
့္ ယ္။
၂။ <script> tag ထဲက attribute တစ္ချု ဖစ္တဲ့ ‘src’ ဆိတ

ု ဲ့ attribute ကုအ
ိ သံးု ျပဳျပီး Javascript
file ကုေ
ိ ခၚယူအသံးု ျပဳျခင္း။ (As a linked file via the src attribute of the <script> element)
JavaScript ကုိ External CSS File လို သီးသန္႔ထုတျ္ ပီးေရးသားျခင္းမ်ိဳးပါ။ ဆိလ

ု တ
ုိ ာက
script ေတြကို Html Document ထဲမာွ မေရးသားေတာ့ပဲ သူခ
႔ ်ည္းသက္သက္ ေရးျပီးလိအ
ု ပ္မွ ေခၚသံးု
တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏုင

ိ ္ ၊ေၾကး/ေျမ) Page 8
PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
တာပါ။ အဲဒ
့ လ
ီ ေ
ုိ ခၚသံးု တဲအ
့ ခါ “<script>” tag ရဲ႕ attribute တစ္ချု ဖစ္တဲ့ “src” ဆိတ
ု ဲ့ attribute မွာ
JavaScript သက္သက္ေရးသားထားတဲ့ File name(.js) ကုိထည့္သြင္းေပးရပါမယ္။
၃။ Html ထဲက event handler ေတြျဖစ္တဲ့ OnClick, OnMouseOver အစရိတ

ွ ဲ့ event မ်ားနဲ႔
တြဲဖက္အသံးု ခ်ျခင္း (Within an XHTML event handler attribute such as onclick)
Html ရဲ႕ Form ေတြထဲမွာ Button ေတြရဲ႕ event handler ဆိုတဲ့ attribute ေတြရိွပါတယ္။
အဲဒ
့ ီ Form ေတြကေနတစ္ဆင့္ JavaScript ကုေ
ိ ခၚယူျပီး အလုပလ
္ ပ
ု တ
္ ာပါ။ ပိျု ပီးျမင္လြယေ
္ အာင္
ေခါင္းစဥ္ ၂ နဲ႔ ၃ တို႔ ျခံဳငံု ပါ၀င္တဲ့ Porgram တစ္ပုဒ္ကုိ ရွင္းျပပါမယ္။
alertTest.html
<head>
<title>Event Trigger Example using Linked Script</title>

1" />
<script type="text/javascript" src="danger.js"></script>
</head>
<body>
<div align="center">
<form action="#" method="get">
<input type="button" value="Don't push me!" onclick="alertTest();" />
</form>

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
</div>
</body>
</html>
danger.js (** js mean: javascript file extension)
function alertTest()
alert("Danger! Danger!");
့ ဲ့ Function.html ဆိုတဲ့ program မွာ <body>tag မွာေခၚသံုးဖို႔လိုအပ္တဲ့ function

ျပီးခဲတ
ကုိ <head></head> tag ထဲမွာေရးခဲ့သလိုမ်ိဳးပဲအထက္ပါ alertTest.html ဆိတ
ု ဲ့ program မွာေရး
သားထားပါတယ္။ ဒါေပမယ့္ အျပည့္အစံုမဟုတ္ပါဘူး။ function သက္သက္ပေ
ဲ ရးထားတဲ့
“Danger.js” ဆိတ
ု ဲ့ file ေလးကုပ
ိ ဲေခၚယူအသံုးျပဳထားပါတယ္။ အဲဒ
့ လ
ီ ုိ ေရးသားအသံးု ျပဳတဲအ
့ တြက္
တူညတ
ီ ့ဲ function ေတြကို Document တိင
ု း္ မွာေခၚယူေရးသားရန္မလိအ
ု ပ္ပဲ အလြယတ
္ ကူ ျမန္ျမန္
ဆန္ဆန္ ေရးသားလာႏိုင္မွာျဖစ္သလို function ေတြကုိျပင္ဆင္စရာရိွလာရင္လည္း အဲ့ဒီ function
file ေလးကုဖ
ိ ြငျ့္ ပီးျပင္လက
ုိ ရ
္ ုံပါပဲ။
၄။ Pseudo Link တစ္ခအ

ု ျဖစ္ <a> tag ထဲတြငထ
္ ည္သ
့ ြငး္ ေရးသားျခင္း(Via the pseudo-URL
javascript: syntax referenced by a link)
ကၽြန္ေတာ္တို႔သိခဲ့ဖူးတဲ့ Html မွာ “<a></a>” ဆိုတဲ့ tag ဟာ page တစ္ခုကေန တစ္ခု

(ဒါမွမဟုတ္) page တစ္ခုအတြင္းမွာပဲ တစ္ေနရာကေန တစ္ေနရာကူးေျပာင္းလိုတဲ့အခါ အသံုးျပဳတာ

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
ပါ။ ဒါေပမယ့္ အခုတစ္ခါေတာ့ သူ႔ကုိ click တာနဲ႔ JavaScript ကို run ေပးမယ့္ event handler
အေနနဲ႔ အသံုးျပဳပါမယ္။ ေအာက္ပါ program ကုိေလ့လာၾကည့္ရေအာင္။
pseudoLink.html
<head>

1" />
</head>
<body>
<a href=”javascript:alertTest();”>Click To invoke</a>
</form>
</div>
</body>
</html>
အဲ့ဒီ <a></a> tag ထဲမွာပဲ ကၽြန္ေတာ္တို႔ဟာ အေပါင္း၊ အႏုတ္၊ အေျမွာက္၊ အစား၊

အစရိွတဲ့ manipulation ကိစၥေတြကုိ ေဆာင္ရြက္ႏိုင္ပါေသးတယ္။ေအာက္က program မွာ ဆက္
ေလ့လာၾကည္လ
့ က
ုိ ္ပါ။

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
manipulation.html
<head>

1" />
</head>
<body>
<a href=”javascript:x=3;y=4;alert(“The Sum is ”+(x+y));”>Click To

invoke</a>
</form>
</div>
</body>
</html>
Chapter (1) ကုအ

ိ ဆံးု သတ္တဲအ
့ ေနနဲ႔ ယခင္က သံးု ခဲတ
့ ဲ့ Browser version ေတြနဲ႔ သူတက
႔ုိ
ေန support လုပေ
္ ပးတဲ့ JavaScript version ေတြကဗ
ို ဟုသတ
ု အေနနဲ႔ ေဖာ္ျပေပးလိက
ု ပ
္ ါတယ္။

PD rm PD rm
Y Y
Y
Y
er
er
ABB
ABB
y
y
bu
bu
3.0
3.0
to
to
Chaper 1
re
re
he
he
k
k
lic
lic
C
C
w om w om
w
w
w. w.
Table 1-1: Browser Versions and JavaScript Support

Browser Version JavaScript Support
Netscape 2.x 1.0
Netscape 3.x 1.1
Netscape 4.0–4.05 1.2
Netscape 4.06–4.08, 4.5x, 4.6x, 4.7x 1.3
Netscape 6.x,7.x 1.5
Mozilla variants 1.5
Internet Explorer 3.0 Jscript 1.0
Internet Explorer 6 Jscript 5.6
Coming soon!
~ Chapter (2) JavaScript core Features will be continue on

http://so25stars.wordpress.com.

JavaScript - Yan Naing Htun PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript - Yan Naing Htun PDF

Uploaded by

Copyright:

Available Formats

F T ra n sf o F T ra n sf o

Chapter 1 | Myanmar Edition@(http:\\so25stars.wordpress.com)

‘JavaScript’ ဆိုတာ ယေန႔ Web ေပၚမွာ အမ်ားဆံုးအသံုးျပဳေနတဲ့ client-side scripting

language တစ္ခုပဲျဖစ္ပါတယ္။အဲ့ဒီ client-side scripting language ဆိုတာကုိပဲျပန္ရွင္းျပရရင္ မိမိ

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 1

First Look at JavaScript

JavaScript Language ရဲ႕ Structure ေရာ၊ Syntax ေတြကုိေရာ အနည္းငယ္ သတိျပဳမိသြား

ပထမဆံုး Program ေရးဖိ႔ု ကၽြနေ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<title>JavaScript Hello World</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-

<h1 align="center">First JavaScript</h1>

document.write("Hello World from JavaScript!");

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 2

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, <html xmlns=

စာလံးု အနီနဲ႔ ျပေပးထားတဲ့ code ၃ေၾကာင္းကသာ JavaScript code ျဖစ္ပါတယ္။ က်န္

document.write();ဆိုတာကေတာ့ Browser မွာစာသားတစ္ခုေပၚလာဖို႔အသံုးျပဳတဲ့ built-

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 3

document.write("<strong>Hello World from JavaScript!</strong>");

Adding JavaScript to XHTML Documents

JavaScript code ေတြကို Html Document ထဲထည္သ

၁။ <script> tag ထဲမာွ ထည္သ

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏုင

၂။ <script> tag ထဲက attribute တစ္ချု ဖစ္တဲ့ ‘src’ ဆိတ

၃။ Html ထဲက event handler ေတြျဖစ္တဲ့ OnClick, OnMouseOver အစရိတ

၄။ Pseudo Link တစ္ခုအျဖစ္ <a> tag ထဲတြင္ထည့္သြင္းေရးသားျခင္း(Via the pseudo-URL

၁။ <script> tag ထဲမွာထည့္သြင္းေရးသားျခင္း။ (Within the <script> element)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<title>JavaScript in the Head</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 5

alert("Danger! Danger! JavaScript Ahead");

<h2 align="center">Script in the Head</h2>

The <noscript> element

JavaScript ကုိ browser ကေကာင္းေကာင္း support မလုပတ

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-

alert("Your JavaScript is on!");

<em>Either your browser does not support JavaScript or it

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 7

JavaScript ကုိ support မလုပတ

၂။ <script> tag ထဲက attribute တစ္ချု ဖစ္တဲ့ ‘src’ ဆိတ

JavaScript ကုိ External CSS File လို သီးသန္႔ထုတျ္ ပီးေရးသားျခင္းမ်ိဳးပါ။ ဆိလ

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏုင

၃။ Html ထဲက event handler ေတြျဖစ္တဲ့ OnClick, OnMouseOver အစရိတ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<title>Event Trigger Example using Linked Script</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-

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

<form action="#" method="get">

<input type="button" value="Don't push me!" onclick="alertTest();" />

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 9

danger.js (** js mean: javascript file extension)

့ ဲ့ Function.html ဆိုတဲ့ program မွာ <body>tag မွာေခၚသံုးဖို႔လိုအပ္တဲ့ function

၄။ Pseudo Link တစ္ခအ

ကၽြန္ေတာ္တို႔သိခဲ့ဖူးတဲ့ Html မွာ “<a></a>” ဆိုတဲ့ tag ဟာ page တစ္ခုကေန တစ္ခု

တတ္သည့္ပညာႏွင့္ ေရာက္သည့္ေနရာတြင္ အမ်ားအက်ိဳးကုိေဆာင္ရြက္ႏိုင္ၾကပါေစ။ (ရန္ႏိုင္ ၊ေၾကး/ေျမ) Page 10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"