Coding සිංහලෙන්: JS

Showing posts with label JS. Show all posts

Sunday, December 23, 2012

JavaScript - පාඩම 07 (JavaScript Popup Boxes)

JavaScript වලදී අපට වර්ග තුනක popup කවුලු සෑදිය හැකිය. එනම්

Alert Box
Confirm Box
Prompt Box ය

Alert Box

Alert Box යොදා ගන්නේ භාවිතා කරන්නාට තොරතුරු/පනිවිඩ ලබා දීම සදහායි. එහිදී භාවිතා කරන්නා ok බොත්තම එබීමෙන් තොරතුර ලැබුනු බව සනාත කල යුතුයි.

පහත කේතය බලන්න

<html>

<head>

function disp_alert()

{

alert("I am an alert box!!");

}

</script>

</head>

<body>

</body>

</html>

මෙහිදී HTML වල button එකක් සාදා එමගින් html header කොටසේ function එකකට call කර ඇත.

Confirm Box

confirm box යොදා ගනුයේ යම් දෙයක් අනුමත/තහවුරු කර ගැනීමටයි. මේහිදී popup කවුලුවේ okහා cancel ලෙස තේරීම් දෙකක් පවතී. ok තේරූ කල true ලෙසද cancel තේරූ කල false ලෙසද ලැබේ.

පහත කේතය බලන්න

<html>

<head>

function disp_confirm()

{

var r=confirm("Press a button");

if (r==true)

{

document.write("You pressed OK!");

}

else

{

document.write("You pressed Cancel!");

}

</script>

</head>

<body>

</body>

</html>

මෙහිදී HTML වල button එකක් සාදා එමගින් html header කොටසේ function එකකට call කර ඇත. එහිදී නැවත ලබාදෙන අගය(return value) මත if කේතයක් මගින් තේරිමක් කර ඇත. OK(true) බොත්තම තේරූ කල You pressed OK! ලෙසද Cancel(false) බොත්තම තේරූ කල You pressed Cancel! ලෙසද ලබා දේ.

Prompt Box

prompt box භාවිතා කරනුයේ භාවිතා කරන්නාගෙන් විවිධ දත්ත ලබා ගැනීම සදහාය.

පහත කේතය බලන්න

html>

<head>

function disp_prompt()

{

var name=prompt("Please enter your name","Harry Potter");

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?");

}

</script>

</head>

<body>

</body>

</html>

මෙහිදී HTML වල button එකක් සාදා එමගින් html header කොටසේ function එකකට call කර ඇත. මෙම කලුවේ ඇති inpu box එකේ type කර ok කල විට එය name නම් variable එකට ඇතුල් කර ගනී. cancel කල විට ක්‍රියා දාමය නවතී. parry poter යනු inpu box එකේ defult ඇති වදනයි. එය අපට අවශ්‍ය එකක් හෝ හිස් ව තැබිය හැකිය.

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

මා අතින් යම් වරදක් වී ඇත්නම් හෝ යමක් මග හැරී ඇත්නම් ඒවාත් නිවැරදි කිරීම පිනිස Comments වල දමන්න.

JavaScript - පාඩම 06 ( Conditional Statements )

If Statement

if (condition)

code to be executed if condition is true

}

condition සත්‍ය නම් පමනක් {} තුල ඇති දෙය සිදු කරන්න

<script type="text/javascript">

var d=new Date();

var time=d.getHours();

if (time==11)

document.write("<b>Lunch-time!</b>");

</script>

time නමින් variable එකක් සාදා එයට දැන් වේලාව ආදේශ කර ඇත.
if හීදී දැන් වේලාව 11 නම් පමනක් Lunch-time! යනුවෙන් ලබාදේ

If...else statement

if (condition)

code to be executed if condition is true

else

code to be executed if condition is not true

}

condition සත්‍ය නම් පමනක් {} තුල ඇති දෙය සිදු කරන්න නැත්නම් else පසු{} ඇති දේ කරන්න

<script type="text/javascript">

var d = new Date();

var time = d.getHours();

if (time < 10)

{ document.write("Good morning!");

else

{ document.write("Good day!");

</script>

time නමින් variable එකක් සාදා එයට දැන් වේලාව ආදේශ කර ඇත.
if හීදී දැන් වේලාව 10 ට අඩු නම් පමනක් Good morning! යනුවෙන්ද නැත්නම් Good day! යනුවෙන්ද ලබාදේ.

if...else if....else statement

if (condition1)

code to be executed if condition1 is true

else if (condition2)

code to be executed if condition2 is true

else

code to be executed if condition1 and

condition2 are not true

}

පලමු condition සත්‍ය නම් පමනක් {} දෙවන condition සත්‍ය නම් පමනක් දෙවන {} තුල ඇති දෙය සිදු කරන්න ..... නැත්නම් else පසු{} ඇති දේ කරන්න

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time<10)

document.write("<b>Good morning</b>");

else if (time>10 && time<16)

     { document.write("<b>Good day</b>");

     else

     { document.write("<b>Hello World!</b>");

</script>

time නමින් variable එකක් සාදා එයට දැන් වේලාව ආදේශ කර ඇත.
if හීදී දැන් වේලාව 10 ට අඩු නම් පමනක් Good morning යනුවෙන්ද, වේලාව 10 ත් 16ත් අතරනම් පමනක් Good day ඒ කිසිවක් සපුරන්නේ නැත්නම් පමනක් Hello World! යනුවෙන්ද ලබාදේ.

switch statement

switch(n)

case 1:

  execute code block 1

  break;

case 2:

  execute code block 2

  break;

default:

  code to be executed if n is

  different from case 1 and 2

}

switch හී n ස්ථානයට ලබාදෙන variable නම ට අදාලව ලැබිය හැකි එක් එක් අගයන් සදහා සිදුකල යුතු දෑ case තුල ලියායි. ඒ කිසිම අගයක් නොලැබුන විටදී default යන්න තුල ලීයා ඇති දේ සිදුවේ.

<script type="text/javascript">

var d=new Date();

theDay=d.getDay();

switch (theDay)

case 5:

  document.write("Finally Friday");

  break;

case 6:

  document.write("Super Saturday");

  break;

case 0:

  document.write("Sleepy Sunday");

  break;

default:

  document.write("I'm looking forward to this weekend!");

</script>

theDay නමින් variable එකක් සාදා එයට දැන් දිනය ආදේශ කර ඇත.
switch හීදී දැන් දිනය 5 නම් පමනක් Finally Friday යනුවෙන්ද, switch හීදී දැන් දිනය 6 නම් පමනක් Super Saturday යනුවෙන්ද, switch හීදී දැන් දිනය 0 නම් පමනක් Sleepy Sunday යනුවෙන්ද, ඒ කිසිවක් නොවී වෙනත් දිනයක් නම් I'm looking forward to this weekend! යනුවෙන්ද ලබාදේ.

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

JavaScript - පාඩම 05 (JavaScript Operators 2)

Conditional Operator
මෙහිදී සිදු කරනුයේ යම් අවශ්‍යතාවක් සපුරා ඇත්නම් පලමු අගයද නැත්නම් දෙවන අගයද විචල්‍ය සදහා ආදේශ කර ගැනීමයි.

Variable_name=(condition)?value1:value2

උදා

Status=(age<18)?"young":"old";

age යව විචල්‍යයේ අගය 18ට අඩු නම් Status විචල්‍ය සදහා young ද වැඩි හෝ සමාන නම් old යන්නද ආදේශ වේ.

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

JavaScript - පාඩම 04 (JavaScript Operators 1)

JavaScript Arithmetic Operators / සංඛ්‍යායා ක්‍රියා කාරකය
සංඛ්‍යාමය අගයන්ගේ ගනිතමය ක්‍රියා සදහා

y=5 නම්

ක්‍රියා කාරකය	විස්තරය	උදාහරණය	ප්‍රතිඵලය
+	එකතු කිරීම	x = y+2	x=7
-	අඩු කිරීම	x = y-2	x=3
*	ගුන කිරීම	x =y*	x=10
/	බෙදීම	x =y/	x=2.5
%	බෙදා ඉතිරිය	x = y%	x=1
++	වැඩි වීම	x = y++	x=6
--	අඩු වීම	x = y--	x=4

JavaScript Assignment Operators/ ආදේශන ක්‍රියා කාරක
සංඛ්‍යාමය අගයන්ගේ ගනිතමය ක්‍රියා සදහා යොදා ගන්නා variable වලින් එක් variable එකකට ආදේශ කිරීම සදහා
x=10 ද y=5 ද විට

ක්‍රියා කාරකය	උදාහරණය	සමානයි	ප්‍රතිඵලය
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

අකුරු සමග + ක්‍රියා කාරකය(Operator) යෙදීම
අකුරු, වචන එක් කිරීම සදහා (concatenation)

var one="Muditha";
var two=" Ekanayake";
var three=one+two (Muditha Ekanayake)

Comparison Operators / සංසංදන ක්‍රියා කාරක

variable සංසංදනය කිරීම සදහා. මෙහිදී ලැබෙනුයේ සත්‍ය(true) හෝ අසත්‍ය(false) යන්නයි

x=5 විට

ක්‍රියා කාරකය	විස්තරය	උදාහරණය
==	සමානයි	x==8 is false අසත්‍ය
===	සර්ව සමානයි (අගය හා වර්ගය)	x==5 is true සත්‍ය x==="5" is false අසත්‍ය
!=	අසමානයි	x!=8 is true සත්‍ය
>	කුඩයි	x>8 is false අසත්‍ය
<	විශාලයි	x<8 is true සත්‍ය
>=	කුඩයි හෝ සමානයි	x>=8 is false අසත්‍ය
<=	විශාලයි හෝ සමානයි	x<=8 is true සත්‍ය

Logical Operators/ තාර්කික ක්‍රියා කාරක
ප්‍රකාෂන කිහියක් එක විට යොදා ගෑනීමට හා සම්පූර්ණ ප්‍රකාශනයක විලොම අගය ගැනීමට
x=6 ද y=3 ද විට

ක්‍රියා කාරකය	විස්තරය	උදාහරණය
&&	and ( සහ)	(x < 10 && y > 1) is true
\|\|	or (හෝ )	(x==5 \|\| y==5) is false
!	not ( නෑ)	!(x==y) is true

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

JavaScript - පාඩම 03 (javascript විචල්ල්‍ය (Variables))

javascript වල variables අර්ත දැක්වීම හා අගයන් ආදේශය පිලිබදව මෙම පාඩමෙදී සාකච්චා කර බලමු.

variable අර්ත දැක්වීම

javascript වල variables නම් තෝරාගැනීමේදී සම්මතයන් කිහිපකි.

* variables නම් ආරම්භ විය යුත්තේ අකුරකිනි(ඉක්කමක් හෝ සලකුනක් නොවේ)

* variables නම් $ ලකුනින්ද ආරම්භ කල හැකිය.

* javascript වල variables නම් වලදී සිම්පල් හා කැපිටල් අකුරු වෙනස් අගයන් වේ එනම් y හා Y ලෙස

variables දෙකක් නම් කල හැකිය.

පහත නම් කිරීම බලන්න.

var x;

var carname;

එහිදී x හා charname ලෙස variables දෙකක් අර්ත දක්වා ඇත.

variables වලට අගයන් ආදේශය

javascript වල variables අගයන් ආදේශ කිරීමේදී සංඛ්‍යාමය අගයන්

var x=5; හෝ (අගය ඉහලින් අර්ත දක්වා ඇති විට)x=5;

ලෙසද

වචන, අකුරු

var carname="Volvo"; හෝ (අගය ඉහලින් අර්ත දක්වා ඇති විට) carname="Volvo";

ලෙසද ආදේශ කල හැකිය.

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

JavaScript - පාඩම 02 (javascript Comments)

javascript වල comment දාන ආකාර දෙකක් ඇත.

පලමු ක්‍රමය තනි පෙල comment කිරීම
//this is one line comment

දෙවනි ක්‍රමය පෙලී කීපයක් comment කිරීමයි
/* this
is
the
multy
line comment */

මෙම ආකාර දෙකෙන් එකකට කොඩ් comment කල විට එම කෙතය ක්‍රියා නොකරයි. ඒසේම කෙත type කරන අතර තුර ඒ පිලිබදව අදහස් පසුව බලන දවසකට තේරුම් ගැනීමට comment කර තැබිය හැකිය.

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

JavaScript - පාඩම 01 (ආරම්භය - Helo Word)

පලමුවෙන් ම JavaScript ඉගෙන ගැනීමට පෙර HTML හා CSS ගැන මූලික නිරවුල් අවබොධයක් තිබිය යුතුය. HTML හා CSS ඉගෙන ගැනීමට අවශ්‍ය නම් මේ blog එකේම එම පාඩම් පවතින අතර එවා බලා ගැටලු ඇතිනම් comment මගින් ඉදිරිපත් කර නිරවුල් කරගන්න.

JavaScript කේත type සදහා note pad භාවිතා කල හැකිය. ඒවා සාමාන්‍යයේන් html තුලම අත්තර් ගත කරන බැවින් html කේතනය සදහා භාවිතා කරන text editer ම භාවිතා කල හැකිය. මම මේ සදහා note pad++ භාවිතා කරන්නෙමි.

JavaScript කේත html ගොනුවතට ඇතුල් කල හැකි ක්‍රම තුනකි

html ගොනුවේ header එක තුල
html ගොනුවේ body එක තුල
.js ගොනුවක් ලෙස

නමුත් මම මේ ක්‍රම තුන දැන් සාකච්චා කිරීමට බලාපොරෝත්තු නොවෙම්. ඒ ගැන පසු පාඩමක්න් සාකච්චා කරමු. මුලින් අපි html ගොනුවකම අන්තර් ගත කරන අයුරින් JavaScript ගැන ඉගෙන ගනිමු. මෙහිදී කේතයන් සාමාන්‍ය html කේතයන් save කරන අන්දමටම save කර එම ගොනුව web browerයක් මගින් විවෘත්ත කර ප්‍රතිඵලය බල්න්න.

දැන් පහත කේතය බලන්න

javascript කේත type කරනුයේ <script typr="text/javascript">හා</script> යන ටැග් යුගල තුලයි. එයින් පිටත javascript කෙටස් අත්තර්ගත කලද ක්‍රියා නොකරයි. එම කේතයයේ ප්‍රතිඵලය පහතින් වේ එනම් document.write("") මගින් " " තුල ඇකි අකුරු එලෙසින්ම ඉදිරිපත් කෙරේ.

JavaScript ගැන තවත් පාඩමකින් හමුවෙමු.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

JavaScript - හැදින්වීම

මොනවද මේ javascript

Javascript කියන්නේ scripting language එකක්. මේ මගින් වෙනස් වන(dynamic) වෙබ් අඩවි සෑදීම සිදුකල හැකිය. Javascript හදලා තියෙන්නේ html තුල යොදන්න පුලුවන් වෙන විදිහට. මේ javascript වැඩ කරන්නේ වෙබ් බ්‍රවුසරය තුලයි. එනම් මෙය ක්‍රියා කර බැලීමට වෙබ් ප්‍රවුසරයක් පමනක් ප්‍රමානවත්වේ. Javascript වල ඇති කේත බොහෝදුරට C, java, වැනි පරිගනක භාශාවන්හී syntax වලට සමාන වේ. Javascript ගොනුවක extention එක .js වේ. ඒ වගේම Javascript තුල object oriented ගතිලක්ෂණද අන්තර්ගතය. Javascript වෙබ් පිටු වලින් පරිභාහිරවත් යොදා ගන්නා අවස්තා ඇත. ඒනම් PDF ගොනු සඳහා, Desktop Gadget සඳහා, සහ වෙනත් මෘදුකාංග බොහෝමයකට ද භාවිතා කරයි.

javascript ඉතිහාසය

1994 (එනම් වසර 18 කට පෙර) දී බ්‍රෙන්ඩන් ඊච් (Brendan Eich) විසින් මුලින්ම Javascript නිර්මානය කරන ලදි. දැනට පවතින ස්ථායි සංස්කරණයක් නිකුත් කරණ ලද්දේ 2011 මාර්තු මස 22 දායි. ඒ 1.8.5 වන සංස්කරණයයි. ඉන් පසු වැඩිදියුනු කිරීම් සිදුකරන්නේ මොසිල්ලා පදනමෙන් හා (Mozilla Foundation) හා නෙට් ස්කේප් සංනිවේදන ආයතනයෙනි(Netscape Communications Corporation)

JavaScript වල නිල නාමය ECMAScript ය.

---------------------------------------------------------------------------

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.

Pages

Sunday, December 23, 2012

JavaScript - පාඩම 07 (JavaScript Popup Boxes)

Saturday, December 22, 2012

JavaScript - පාඩම 06 ( Conditional Statements )

Friday, December 21, 2012

JavaScript - පාඩම 05 (JavaScript Operators 2)

Thursday, December 20, 2012

JavaScript - පාඩම 04 (JavaScript Operators 1)

Wednesday, December 19, 2012

JavaScript - පාඩම 03 (javascript විචල්ල්‍ය (Variables))

Tuesday, December 18, 2012

JavaScript - පාඩම 02 (javascript Comments)

Monday, December 17, 2012

JavaScript - පාඩම 01 (ආරම්භය - Helo Word)

Saturday, December 1, 2012

JavaScript - හැදින්වීම

අපි යන එන තැන්

About