02. JavaScript Variables සමග වැඩ කරමු...
Hey .. ඔන්න ඉතින් යාලුවනේ JavaScript වල තවත් ලිපියක් ලියන්න හිතුන ඉක්මනටම. එහෙනම් අපි නවත්තපු තැන ඉඳලා පටන් ගමු. මම හිතනවා මුලිකව දැනුමක් පළමු ලිපිය කියෙව්වා නම් ලැබිලා ඇති කියල.
ම්ම්.. මම මුලින්ම බලමු JavaScript ආධාරයෙන් යම් කිසි දෙයක් Print කරන්නෙ කොහොමද කියල.
1)Creating Output
Syntax: Document.write("Output goes here");
මේ උදාහරණයේ script තුල ලියා ඇති Document.write("javascript output"); මගින් java-script output ප්‍රින්ට් කරනු ලබයි.
** මෙහිදී අපිට semicolon ඇතුලත ("") HTML tag ද භාවිතා කිරීමට හැක.
ex:
</script>
2)Comments
1) Single line comment
Syntax: <!-- This is a Single line commnet -->
// This is also a Single line comment
2) Multi line comment
Syntax: /* This
is
a Multi line Comment */
3)Get Browser type
Syntax: <script language="javascript" type="text/javascript" >
document.write(navigator.userAgent);
</script>
මෙය භාවිතා කර Browser එකෙහි විස්තර Print කරගත හැක.
** navigator.userAgent භාවිතා කර තිබෙන්නේ Property එකක් ලෙස නිසා double quotation mark භාවිතා නොකල යුතුය. එමෙන්ම javascript කියන්නේ Case Sensitive Language එකක් නිසා අනිවාර්යෙන්ම Capital, Simple පිළිබඳව අවදානය යොමු කරන්න.
4) PoP Up Boxes
Alert Box
Syntax: alert("Alert that you want to print ");
මෙහිදී Alert ලෙස Dialog Box එකක් Pop Up වේ. එවිට Userට එය කියවා බලා "OK" කර ඉදිරියට Continue කිරීමට හැක.
Prompt Box
Confirm Box පිළිබඳව ඉදිරි ලිපි වලදී සදහන් කරන්නම්.
5)Work With Variables
JavaScript වල ඉදිරියට Coding කිරීමේදී Variable අත්‍යාවශය කාරණයක් වෙනවා.
Syntax: <script language="javascript" type="text/javascript" >
var x;
x=10;
document.write(x);
</script>
variable එකක් creat කර ගැනීම් හා ඒවා සමග ගනුදෙනු කිරීම වෙනත් Languages වල භාවිතයට ගොඩාක් දුරට සමාන වේ. සෑම Data Type එකකටම Keyword එක ලෙස Var යොදා ගැනීම සිදුකරයි.
ex: <script language="javascript" type="text/javascript" >
var name, age ;
name="Smantha" ;
age=21;
document.write("My name is "+ name+ " and my age is" + age );
</script>
වැඩිදුර අධ්‍යනයට: w3schools
5)Function
Syntax: function functionName( parameters )
{
-------------
-------------
}
මම හිතනවා මේ function කියන දේ ඔයාලට හොදින් හුරුපුරුදු දෙයක් කියලා. කොහොම වෙතත් යම් විශේෂිත කාර්යයක් කර ගැනීමට අපි මේ function යොදා ගන්නවා.
ex:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to call a function with arguments</p>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job); //creat a alert box
}
</script>
</body>
</html>
5)Globle and local Variables.
<script language="javascript" type="text/javascript" >
document.write("<h3 align='center'><font color='red'> <i>javaScript is very easy /i></font></h3> <br> <p align='right'>Also We can use HTML Tag inside JavaScript</p> ");
</script>
** මෙහි html tag තුල align හි Value(Center) එක double quotation mark(" ") භාවිතා නොකර Single quotation mark (' ') භාවිතා කර පමණක් ලිවිය යුතුය.
2)Comments
1) Single line comment
Syntax: <!-- This is a Single line commnet -->
// This is also a Single line comment
2) Multi line comment
Syntax: /* This
is
a Multi line Comment */
3)Get Browser type
Syntax: <script language="javascript" type="text/javascript" >
document.write(navigator.userAgent);
</script>
මෙය භාවිතා කර Browser එකෙහි විස්තර Print කරගත හැක.
** navigator.userAgent භාවිතා කර තිබෙන්නේ Property එකක් ලෙස නිසා double quotation mark භාවිතා නොකල යුතුය. එමෙන්ම javascript කියන්නේ Case Sensitive Language එකක් නිසා අනිවාර්යෙන්ම Capital, Simple පිළිබඳව අවදානය යොමු කරන්න.
4) PoP Up Boxes
Alert Box
Syntax: alert("Alert that you want to print ");
මෙහිදී Alert ලෙස Dialog Box එකක් Pop Up වේ. එවිට Userට එය කියවා බලා "OK" කර ඉදිරියට Continue කිරීමට හැක.
Prompt Box
Confirm Box පිළිබඳව ඉදිරි ලිපි වලදී සදහන් කරන්නම්.
5)Work With Variables
JavaScript වල ඉදිරියට Coding කිරීමේදී Variable අත්‍යාවශය කාරණයක් වෙනවා.
Syntax: <script language="javascript" type="text/javascript" >
var x;
x=10;
document.write(x);
</script>
variable එකක් creat කර ගැනීම් හා ඒවා සමග ගනුදෙනු කිරීම වෙනත් Languages වල භාවිතයට ගොඩාක් දුරට සමාන වේ. සෑම Data Type එකකටම Keyword එක ලෙස Var යොදා ගැනීම සිදුකරයි.
ex: <script language="javascript" type="text/javascript" >
var name, age ;
name="Smantha" ;
age=21;
document.write("My name is "+ name+ " and my age is" + age );
</script>
** variable type එක ලෙස int සහ String ගත්තා වගේම ඍන(-) අගයන් හා දශම අගයන්ද ගන්න පුළුවන්.
** එමෙන්ම Write method එක ඇතුලත ඇති double quotation mark වල variable කිහිපයක් හෝ variables සහ Text ලිවීමේදී ඒවා වෙන්කර ලිවීමට "+" යොදා ගනී.
5)Function
Syntax: function functionName( parameters )
{
-------------
-------------
}
මම හිතනවා මේ function කියන දේ ඔයාලට හොදින් හුරුපුරුදු දෙයක් කියලා. කොහොම වෙතත් යම් විශේෂිත කාර්යයක් කර ගැනීමට අපි මේ function යොදා ගන්නවා.
ex:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job); //creat a alert box
}
</script>
</body>
</html>
මම මේ ගත්තේ www.w3schools.com වෙබ්අඩවියෙන් ගත්ත උදාරණනයක්.
එහි Button යන tag එකෙහි Onclick නම් attribute එකේ Value එක ලෙස myFunction('Harry Potter','Wizard') දුන් විට myFunction කියන function එක call වේ. එමෙන්ම function එක call කරන අතරතුරම parameter 2ක්ද pass කරලා තියෙනවා.
5)Globle and local Variables.
මෙහි සරලම අදහස වෙන්නෙ අපි Variable එකක් එක function එකක් ඇතුලත Create කරගන්නා විට එය local Variable එකක් ලෙසද, function එක පිටතින් Create කරගන්නා විට එය Global Variable එකක් ලෙසද හදුන්වනවා. දැන් අපි උදාහරණයකින් බලමු මේ ජාති 2හි වෙනස්කම.
ex:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<body>
<script>
var girl_1="Wanushi" // Gloable variable
function myFunction()
{
var girl_2="Sadamali" // local variable
document.write(girl_1+"<br>");
document.write(girl_2+"<br>");
}
myFunction();
document.write("<br><br><br><br><br>");
document.write(girl_1+"<br>");
document.write(girl_2+"<br>");
</script>
</body>
</html>
මේ උදාහරණයත් ඔයාලා browser එකේ run කරලා බලන්න, එතකොට Output එකෙන්ම තේරෙයි මොකක්ද Scene ඒක කියලා, මේකේ Global ලෙස හදන variable එක function එක ඇතුලත හා පිටත Use කිරීමට පුළුවන්, නමුත් local ලෙස හදන variable එක Use කරන්න පුළුවන් වෙන්නේ function එක ඇතුලත පමණි.
ම්ම්ම්... එහෙනම් මේ ලිපිය මෙතනින් නවතනවා, තවත් ලිපියකින් ඉක්මනින්ම හමුවෙමු,
මේ ලිපියේ කිසියම් අතපසුවීමක් හරි පැහැදිලි නැති දෙයක් හරි , ඕනෑම ගැටළුවක්( ලිපියට අදාලව ) තියෙනවා නම් comment මගින් දන්වන්න.
Written by Admin Thisa.
2 comments :
පට්ට මචන්... දිගටම ලියමු ... එල එල
බොහොම ස්තූතියි මචං... දිගටම රැදිලා ඉන්න අපේ බ්ලොග් එක එක්ක..
Post a Comment