Like us on Facebook

02. JavaScript Variables සමග වැඩ කරමු...

JavaScript Tutorial Part2

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 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 ලිවීමේදී ඒවා වෙන්කර ලිවීමට "+" යොදා ගනී.


වැඩිදුර අධ්‍යනයට: 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>


<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>
<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 :

පට්ට මචන්... දිගටම ලියමු ... එල එල

October 13, 2013 at 10:37 AM comment-delete

බොහොම ස්තූතියි මචං... දිගටම රැදිලා ඉන්න අපේ බ්ලොග් එක එක්ක..

November 4, 2013 at 5:06 AM comment-delete

Post a Comment

Related Posts Plugin for WordPress, Blogger...