Community project by students of the Faculty of Information Technology, University of Moratuwa, Sri Lanka.

JavaScript ක්‍රමලේඛනයට ඇරඹුමක්

Unofficial JavaScript Logo

Unofficial JavaScript Logo

තොරතුරු තාක්ෂණය පුළුල් පරාසයක විහිදුනු විෂය පථයක්. එය දැනුම සොයා යන්නට පොළඹවන සුළු ආකර්ශනීය මෙන්ම දිනෙන් දින යාවත්කාලීන වන දැනුම් ක්ෂේත්‍රයක්. ඔබේ විෂය නිර්දේශයට අමතරව මේ දැනුමත් ඔබට ලබා දෙන්නට අප සැලසුම් කලේ එ නිසයි.


 

සබැඳිය http://inear.se/beanstalk/

කෙතරම් වෙලාවක් බලා සිටියත් වෙහෙසට පත් වන්නේ නැහැ නේද? මෙය තොරතුරු තාක්ෂණයේ කේත සංකලනයකින් සිදු කරන ලද නිර්මාණයක් බව ඔබ දන්නවද ?

ඔබ මේ දකින්නේ අද පටන් ඔබට ගෙන එන JavaScript ක්‍රමලේඛනයේ එක් නිර්මාණාත්මක පැතිකඩක්. මෙය පමණක් නොවේ, ඔබ නිතර දකින Google  සෙවුම් පිටුවේ දක්නට ලැබෙන Google Doodle මෙන්ම  අන්තර්ජාලයේ සැරිසරන විට ඔබ දකින ආකර්ශනීය වෙබ්  පිටු නිර්මාණයටත්  JavaScript ක්‍රමලේඛනය  යොදා ගැනෙනවා.

JavaScript යනුවෙන් හදුන්වන්නේ ලොව බහුතරයක් විසින් භාවිතා කරන එහෙත් බොහෝදෙනෙකු විසින් වැරදි ලෙස හඳුනා ගත් ක්‍රමලේඛන භාෂාවක්. මේ පළමු ලිපියෙන් JavaScript ක්‍රමලේඛනය පිලිබඳ මූලික අවබෝධයක් ලබා දෙන්නටත්, සරල වැඩසටහනක් ආධාරයෙන් JavaScript ක්‍රමලේඛණයට පලමු පියවර තබන්නටත් ඔබට අවස්ථාව ලබා දීමට අප බලාපොරොත්තු වෙනවා.

JavaScript ඉතිහාසය

JavaScript මුල්වරට දියුණු කරන ලද්දේ Brendan Eich විසිනුයි. මුල් වරට එය Mocha නමින් හැදින්වූ අතර පසුව එය “LiveScript” ලෙස නිල වශයෙන් හඳුන්වනු ලැබුවා. එය Netscape වෙබ් ගවේෂකය (web browser) සඳහා එතෙක් භාවිත කළ , “Java applet”  වෙනුවට සැහැල්ලු interpreted පරිගණක භාෂාවක් ලෙස පළමු වරට දියුණු කළත් පසුව Java පහසුකම Netscape Navigator වෙබ් ගවේෂකයට (web browserයට) ලබා දීමත් සමගම එය “JavaScript” ලෙස නම් කරනු ලැබුවා.

වර්තමානයේ එහි සම්මතයන් ECMA (European Computer Manufacturers Association) අන්තර්ජාතික සංගමය මගින් ප්‍රකාශයට පත්කරනු ලබනවා. JavaScript වල සම්මතය EcmaScript ලෙස හඳුන්වනු ලබන අතර එම සම්මතයන් JavaScript වල විවිධ ක්‍රියාත්මක කිරීම් වලදී තරමක් වෙනස් ස්වරූපයන් ගනු ලබනවා. නමුත් JavaScript වල සම්මතයන් සැම විටම EcmaScript අනුගමනය කරමින් නිර්මාණය කර තිබෙනවා. EcmaScript සම්මතයන් ECMA-262 spceficationහි සඳහන් වනවා. එහි 5.1 වන සංශෝධනය වර්තමානයේ ක්‍රියාත්මක වන අතර මේ වසර මැද එහි 6 වන සංශෝධනය නිකුත් කිරීමට නියමිතයි. එය EcmaScript Harmony ලෙස හැඳින්වෙනවා. එම සංශෝධනයත් සමගම JavaScript එහෙමත් නැතිනම් EcmaScript (සම්මත JavaScript) වල සුවිශේෂී වෙනස්කම් රාශියක් සිදුවීමට නියමිතයි.

JavaScript පරිගණක ක්‍රමලේඛන භාෂාවක් ලෙස

JavaScript යනු Windows, Unix වැනි ඕනෑම පරිගණකයක ක්‍රියා කරන වැඩසටහන් ලිවීමට යොදාගත හැකි භාෂාවක් (cross-platform). එය object-oriented  පරිගණක භාෂාවක් වන අතර scripting පරිගණක භාෂා ගණයට (පරිගනකයට ලබා දෙන උපදෙස් එසැනින් ක්‍රියාවට නංවන) අයත් වෙනවා. Object-oriented වුවත් සාමාන්‍ය object-oriented පරිගනක භාෂාවන්හි object-oriented සංකල්ප ක්‍රියාවට නංවා ඇති ආකාරයට වඩා වෙනස් ආකරයකට JavaScript වල ඒවා ක්‍රියාත්මක කරවා තිබෙනවා. පසු ලිපියකින් JavaScript වල Object-oriented සංකල්ප පිලිබද සාකච්චා කිරීමට බලාපොරොත්තු වෙනවා. JavaScript හි standard library එකක් තිබෙනවා. එහි Array, Date සහ Math සහ එවැනි libraries විශාල ප්‍රමාණයක් අඩංගු වෙනවා. ඊට අමතරව JavaScript භාෂාවේ අනෙක් පරිගණක භාෂාවල මෙන්ම වැඩසටහනක් ලිවීමට අවශ්‍ය වන සියලු control structures, operators වැනි දෑ එහි අඩංගු වෙනවා. JavaScript කේත ක්‍රියාවට නැංවීම් ප්‍රධාන ආකාර දෙකක් තිබෙනවා,

1. Client-Side JavaScript

මෙය ප්‍රධාන වශයෙන්ම වෙබ් ගවේෂක වල (web browsers වල) JavaScript ක්‍රියා කරන ආකාරයයි. වෙබ් පිටුවක ඇති විවිධ කොටස් (HTML elements)  පාලනය කිරීමට වෙබ් ගවේෂක  වලට හැකියාව ලැබෙන්නේ මෙම java script භාවිතය නිසයි. උදාහරනයක් ලෙස වෙබ් පි‍ටුවක බොත්තමක් එබූ විට යම් පින්තූරයක් හෝ විස්තරයක් පෙන්වීමට අවශ්‍ය උපදෙස් ලබා දීම client-side JavaScript වලින් කළ හැකියි.

2. Server-Side JavaScript

Server වල ක්‍රියා කරන ආකාරයට සැකසු JavaScript ක්‍රියාත්මක කිරීමක් Server-Side JavaScript ලෙස සැලකිය හැකියි. NodeJs මේ සදහා හොඳ උදාහරණයක්. මෙවන් ක්‍රියාත්මක කරවීමකදී server එකක් පාලනය කිරීමට අවශ්‍ය වන විධාන JavaScript engine එකේ අඩංගු වෙනවා. උදාහරණයක් ලෙස File එකක් කියවා එහි අඩංගු දෑ client side වෙත එවීම සදහන් කල හැකියි. එලෙසම database එකක් සමග ක්‍රියා කිරීම වැනි Client-Side JavaScript වල නැති බොහෝ විශේෂ විධානයන් Server-Side JavaScript හි අඩංගු වෙනවා.

JavaScript ක්‍රමලේඛනයට පියවර තබමු

මෙහි සඳහන් වැඩසටහන තේරුම් ගැනීම සදහා HTML පිලිබඳ මූලික අවබෝධයක් අවශ්‍ය වෙනවා. එසේ නැති වුවත් පහසුවෙන් අවබෝධ කර ගැනීමට හැකි වන ලෙස සියලු කරුණු පැහැදිලි ලෙස සඳහන් කොට අැත. වැඩිදුර JavaScript ක්‍රමලේඛනයට යොමු වනවා නම් HTML හා CSS පිලිබද මූලික අවබෝධයක් ලබා ගැනීම ඔබට වැදගත් වනු අැත.

පලමුව ඔබ කැමති text editor එකක් ‍තෝරා ගත යුතුයි. මෙහි Sublime Text 3 අපගේ වැඩසටහන ලිවීමට යොදාගෙන තිබෙනවා. Text editor එකක් ‍තෝරාගැනීමේදී word වැනි ලිපි සකසන වැඩසටහන් ‍තෝරාගැනීමෙන් වලකින්න. Windows සමග එන notepad මේ සරල වැඩසටහන ලිවීමට සුදුසුයි, එසේත් නැතිනම් notepad++ හෝ ඔබ Linuxහි වැඩ කරනවානම් gedit වැනි සරල නිදහස් මෘදුකාංගයක් යොදාගත හැකියි.

“Hello JavaScript!” යන පණිවිඩය (message), බොත්තමක් එබූ විට පෙන්වීමට මෙම වැඩසටහන ලියා තිබෙනවා. පසු ලිපි වලින් JavaScript භාෂාවක් ලෙස ඉගෙන ගැනීමට අවශ්‍ය දැනුම ලබා දීමට බලාපොරොත්තු වෙනවා. (මෙය JavaScript ක්‍රමලේඛනය ඇරඹීමට මුලික අඩිතාලමක් බැවින් JavaScript වල සංකල්ප අප ගැඹුරින් සඳහන් කර නොමැති බව සලකන්න.)

පලමුව index.html නමින් නව document එකක් ඔබගේ text editor එක ආධාරයෙන් විවෘත කර ගන්න. එහි  පහත සදහන් HTML mark-up කේත කොටස අඩංගු කරන්න. එය ඕනෑම web පි‍ටුවක් නිර්මානය කිරීමට අවශ්‍ය පලමු පියවරයි.

 මින්පසු html button element එකක් හා පනිවිඩය පෙන්වීමට අදාල JavaScript කේතය පහත සදහන් ආකාරයට ඇතුලත් කරන්න.

එහි  id එක එම button element එක හඳුනා ගැනීමට වැදගත්වෙනවා. එහි click event එකට JavaScript හි පනිවිඩයක් පෙන්වීමට යොදා ගන්නා alert විධානය හා පෙන්වීමට අවශ්‍ය දේ සඳහන් කර තිබෙනවා. මෙහිදී එය Hello JavaScript! ලෙස සඳහන් කර තිබෙනවා. මෙහි පෙරලි කොමා භාවිතය පිලිබද සැලකිලිමත් විය යුතුයි. (single quote හා double quote) එකම අකාරයේ පෙරලි කොමා භාවිත කලහොත් සිදුවන දෑ අත්හදා බලන්න.

ඉන් පසු index.html එක වෙබ් ගවේෂකයකින්  විවෘත කර button එක click කරන්න. එවිට අදාල පනිවිඩය දිස්වන ආකරය දැකිය හැකියි.

Capture3

මෙහිදී සිදුවන්නේ html button element එක මත click කළ විට එහි click event එක ක්‍රියාත්මක වීමයි. එසේත් නැතිනම් fire වීමයි. එවිට onclick=”alert(‘Hello JavaScript!’);” හි alert(‘Hello JavaScript!’); කොටස ක්‍රියාත්මක වෙනවා. මෙහි onclick event එක DOM event එකක් ලෙස හැඳීන්වෙනවා. එම DOM event බොහොමයක් event driven පරිගණක භාෂා වලින් පාලනය කල හැකියි. මෙහිදී එම click event එකට JavaScript වලින් ලියා ඇති alert විධානය ලියාපදිංචි කර තිබෙනවා. එය event handler එකක් නමින් හඳුන්වනවා. මෙලෙස JavaScript විධාන html element තුලම event handle කිරීම නරක පුරුද්දක් (bad practice) ලෙසටයි සලකනු ලබන්නේ.

පෙර වැඩසටහනම මීලග වැඩසටහනේ ලෙස function එකක් ආධාරයෙන් නිවැරදි ලෙස ලිවිය හැකියි. එවිට එම function එක click event handler එක වනවා. එම කේත කොටස HTML Script tag එකක් තුල ලියා තිබෙනවා. වෙබ් පිටුවක JavaScript කේත කොටස් ලිවීමේදී මෙලෙස Script Tag තුල ලිවිය යුතුයි.

මෙලෙස JavaScript කේතයන් HTML පි‍ටු තුල ලිවීමද නරක පුරුද්දක් ලෙසයි සලකන්නේ. පසු ලිපි වලින් නිවැරදි භාවිත රීති අනුව වැඩසටහන් ලියන ආකාරය සලකා බලමු.

JavaScript පිලිබද වැරදි මත

JavaScript වර්තමානයේ අති ජනප්‍රිය ක්‍රමලේඛන භාෂාවක් වුවත් බොහෝදෙනෙක් එය Java ක්‍රමලේඛන භාෂාවට ආදේශකයක්, Java වල සරල ආකාරයක් එසේත් නැතිනම් අති සරල නොවැදගත් ක්‍රමලේඛන භාෂාවක් ලෙස සැලකීමට පුරුදුව තිබෙනවා. නමුත් JavaScript කිසිසේත්ම Java වලට සම්බන්ධයක් නැති ස්වාධීන ක්‍රමලේඛන භාෂාවක්. Java උපසර්ගය මෙම වියවුලට හේතු වී තිබෙනවා. Java ප්‍රසිද්ධ වූ කාලයේ එම ප්‍රසිද්ධිය ලබා ගැනීම සදහා JavaScript නිර්මාපකයන් විසින් එම නම යොදාගෙන තිබෙනවා. Java හා JavaScript අතර ඇති එකම සමානකම ලෙස භාෂා දෙකම C ක්‍රමලේඛන භාෂා කුලයට අයත් වීම සලකන්න පුලුවන්.

අනෙක් මතය නම් JavaScript යනු බොහෝසෙයින් සරල නොවැදගත් ක්‍රමලේඛන භාෂාවක් ලෙස සැලකීමයි. මේ වැරදි මතයට හේතුව Script යන ප්‍රත්‍යය අගට යෙදීම හේතු වී ඇතැයි සිතන්න පුලුවන්. අද ඔබ සැරිසරන අන්තර්ජාලයේ දියුණුවට JavaScript බොහෝසෙයින් දායක වී තිබෙනවා. Dynamic content ලබා දෙන සෑම වෙබ් පිටුවක්ම පාහේ JavaScript නිසා එම හැකියාවන් ලබා ගෙන තිබෙනවා. එලෙසම වෙබ් ගවේෂකයන්ගෙන් පිටතදී ද අධික ලෙස JavaScript භාවිතයට දැන් ලොව හුරු වී සිටිනවා. ඒ JavaScript සතු සුවිශේෂී ගුණාංග හා එය බොහෝ dynamic සහ බල සම්පන්න ක්‍රමලේඛන භාෂාවක් වීමයි. මෑත කාලීන තාක්ෂණ ලෝකයේ පෙරලියක් කල NodeJS ඒ සදහා හොද උදාහරණයක්. සාමාන්‍යයෙන් JavaScript කේත ක්‍රියාත්මක වනුයේ වෙබ් බ්‍රවුසරය තුල වුවත් NodeJS හරහා වෙබ් බ්‍රවුසරයක් නොමැතිව JavaScript කේත ක්‍රියාත්මක කිරීමට අවස්ථාව සැලසෙනවා.

JavaScript පරිගණක භාෂාව පිලිබඳ මුලික දැනුම ඔබට ලබා දෙන්නටයි මෙම ලිපිය අපි වෙන් කලේ. තොරතුරු තාක්ෂණ ක්‍ෂේත්‍රයේ මෙවැනි නව දැනුම ඔබ සමග බෙදා ගන්නට fit2school නිරන්තරයෙන් කැපවී සිටිනවා. JavaScript ඉදිරි ලිපි පෙලෙන් JavaScript කේත වෙනත් file එකකට ගෙන යන්නෙ කෙසේද, function හා JavaScript වල ක්‍රමලේඛන විධි භාවිත කරන්නේ කෙසේද, යන්න අපි සවිස්තරාත්මකව සාකච්චා කරමු.

 

The following two tabs change content below.

Ruwanka De Silva

Latest posts by Ruwanka De Silva (see all)

Comments
  1. anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.