JSවලින් පිස්සු නටමු!

JavaScript (JS) කියන්නෙ දැන් ජාල (web) පිටුවලට නැතුව ම බැරි දෙයක්නෙ. හැබැයි ගොඩක් අය තවම දන්නෙ නෑ, JSවලින් පිටුවක සමහර පරිශීලක පැත්තෙ (client side) වැඩ බොහොම ලේසියෙන් කරගන්න පුළුවන් බව!

මම මට JS පිහිට වුණ වෙලාවක් කියල දාන්නම්. බලන්න ඔයාලටත් ජාලයෙ සැරිසරද්දි මේ වගේ උවමනාවන් ඇති වෙලා තියෙනව ද කියල!

FileStream කියන අඩවිය පාවිච්චි කරකන අය දන්නව ඇති, නිකම් බාගත කළොත් සෑහෙන වෙලාවක් යන ටොරන්ටු (torrents) වගේ ම සාමාන්‍යයෙන් ලොකු ගොනුත් ඒකෙන් කෑෂ් (cache) කරල ඉක්මනින් බාගත කරගන්න පුළුවන් බව. මට එක පාරක් ඕනි වුණා විශේෂ දෘෂ්‍ය ආචරණ (video special effects) 8000ක් විතර තියෙන, 8 GB විතර ලොකු ගොනුවක් බාගන්න.

වැඩේ කියන්නෙ, FileStream අඩවියෙන් කොච්චර ලොකු ධාරිතාවක් අපට දුන්නත්, එක පාර කෑෂ් කරන්න පුළුවන් 1 GB වගේ පොඩි දත්ත ප්‍රමාණයක් විතරයි. මේ නිසා මට සිද්ද උණේ අර ගොනු 8000න් 1000ක විතර කොටස් වෙන වෙන ම තෝර තෝර බාගත කරන්න.

ගොනු තෝරන්න තියෙන්නෙ, හැම ගොනුවක් ම ඉදිරියෙ තියෙන කොටුවෙ (check box) හරි ලකුණ යොදල (tick). හැබැයි ඉතිං මේ විදිහට ගොනු 8000ක ලයිස්තුවකින් ගොනු 1000 ගානෙ අතින් තෝරන්න ගියොත් කොහොම හිටියි ද? ඒ නිසා මම වැඩේට පොඩි කේතයක් (script) හදාගත්ත. ඒක දිව්වම ගොනු එකින් එක ඉබේ ම ක්ලික් (click) වෙලා එ්වට හරි ලකුණු වැටෙනව.

වැඩේ සරලයි; හැබැයි JS දැනුම නම් ටිකක් හරි තියෙන්න ඕනි; වෙබ් පිටුවක ව්‍යුහය (DOM; document object model) ගැනත් පොඩි අදහසක් තිබ්බොත් වැඩේ ලේසියි.

මුලින් ම, තෝරන්න ඕනි කොටු ලයිස්තුවක් හදා ගමු. මේකට පිටුවෙ මූලිකාංග (DOM elements) තෝරන getElementById, getElementsByName, getElementsByClassName වගේ JS ශ්‍රිතයක් (function) යොදාගන්න පුළුවන්. පිටුවෙ jQuery තියෙනවනම් වැඩේ තවත් ලේසියි.

මේ වැඩේට, අපට ක්ලික් කරන්න ඕනි මූලිකාංගයෙ විශේෂ ලක්ෂණ (attributes) හොයා ගන්නෙපැයි. ඒකට, ඔයාට ක්ලික් කරන්න ඕනි ජාතියෙ එකක් දකුණු මූසික බොත්තමෙන් ක්ලික් කරල (right click) Inspect Element තෝරන්න. එතකොට අදාල කොටසෙ HTML ප්‍රභවය (source) කෙළින් ම බලාගන්න පුළුවන්, ඔක්කොම ලක්ෂණත් එක්ක. මේක Firefox, Chrome දෙකට ම අදාලයි.

ඔයා ක්ලික් කරන්න හදන කොටස මේ වගේ නම්

<input class="x y" name="a1" type="checkbox"/>

x හෝ y, getElementsByClassName වලට යවල වැඩේ කරගන්න පුළුවන්.

හැබැයි පිටුවෙ වෙන තැනක මෙහෙම එකකුත් කරුමෙටවත් තිබ්බොත්

<input class="x" name="b1" type="button"/>

වැඩේ දෙල් වෙනව. මොකද, එතකොට checkbox වගේ ම button වර්ගයෙ මූලිකාංගත් ක්ලික් වෙන්න පටන් ගන්නව. ඒ වගේ වෙලාවට පිටුවෙ හැසිරීමෙන් ගොඩක් දුරට අවුල හොයාගන්න පුළුවන්, මොකද click() වගේ සිද්ධියක (event) ප්‍රතිඵලය නිතර ම වගේ බ්‍රවුසරයෙන් දැකගන්න පුළුවන්. එ් වගේ වෙලාවට පිටුව අලුත් කරල (refresh) හරි වහල ආයෙ විවෘත කරල හරි තමයි අවුල් විදිහට දුවන වැඩේ නවත්තන්න වෙන්නෙ.

අපි දැන් මේ බලන අවස්ථාවෙ නම් මේකට සරල විසඳුමක් තියෙනව; x වෙනුවට y පන්තිය (class) යොදාගන්න පුළුවන්. හැබැයි කරුමෙට y දාපු වෙන මොකක්හරි මූලිකාංගයක් පිටුවෙ තිබ්බොත් ඒකටත් කෙළවෙන්න ඉඩ තියෙනව.

හරි, දැන් වැඩේ කරන විදිහ බලමුකො:

අපි බලන පිටුවෙ හැටියට ඕනි වෙන්නෙ, x කියන CSS පන්තිය (class) තියෙන කොටු නම්

l = document.getElementsByClassName('x');

කිව්වම හරි.

බැරි වෙලාවත් කලින් කතා වුණා වගේ x කියන class එක තියෙන වෙන elements තියෙනව නම් තව පොඩ්ඩක් නටන්න වෙනව.

for(i in l)
	if(l[i] instanceof HTMLCheckBoxElement) {
		...
	}

JS ටිකක් දන්න කෙනෙකුටනම් ලොකු දෙයක් නෑනෙ, ලයිස්තුවෙ තියෙන HTMLCheckBoxElement වර්ගයෙ මූලිකාංගවලට විතරක් අපේ කේතය (... කියන තැනට දාන්න ඕනි) දුවන එක තමයි කොටින් ම කිවුවොත් මෙතන වෙන්නෙ.

පිටුවෙ jQuery තියේ නම් තෝරන එක වන්ෂොට්:

$('input[type="checkbox"].x')

දැන් මේ ඔක්කොම click කරමු:

l = document.getElementsByClassName('x');
for(i in l)
	l[i].click();

jQuery නම්

$('input[type="checkbox"].x).each(function(k, v) {
	v.click();
});

ලයිස්තුව ගොඩක් දිග නම් මේ වැඩේ එක දිගට දුවද්දි බ්‍රවුසරය හිර වෙන්න (stuck) පුළුවන්. එහෙම වෙලාවට පොඩ්ඩක් සැර බාල කරල

i = 0;
t = setInterval(function() {
	l[i].click();
	i++;
	if(i == l.length) clearInterval(t);
}, 1000);

වගේ කේතයක් හදා ගත්තොත් තප්පරේට (1000 ms) එක ගානෙ ක්ලික් වෙන්න හදා ගන්න පුළුවන්. 1000 අගය අඩු කරල වේගය වැඩි කරගන්න පුළුවන්. සරල ව කිවුවොත්

බින්දුවෙන් (පළමු මූලිකාංගයෙන්) පටන් ගන්න
කාලමානයක් (timer) හදන්න; ඒක දුවන හැම පාර ම {
	ඊළඟ මූලිකාංගය ක්ලික් කරන්න
	ඊට පස්සෙ ක්ලික් කරන්න තියෙ මූලිකාංගයට මාරු වෙන්න
	මූලිකාංග ඉවර නම්:
		කාලමානය නවත්තන්න
}, කාලමානය මිලිතප්පර 1000කට වරක් දුවවන්න)

මෙහෙම කේතය ලියා ගත්තට පස්සෙ තියෙන්නෙ, බ්‍රවුසරයෙ Web Console කොටස විවෘත කරල (Firefox නම් Tools > Developer Tools > Web Console හෝ Ctrl+Shift+K හෝ F12; Chrome නම් Menu > Tools > Developer Console හෝ Ctrl+Shift+J) කේතය අලවල (paste) Enter යතුර ඔබන්න විතරයි! ඉතුරු ටික බ්‍රවුසරය බලා ගනියි.

මේ JSවලින් දාන්න පුළුවන් බොහොම පොඩි බ්‍රවුසර් ජිල්මාට් එකක් විතරයි; පෝර්ම (forms) ඉබේ පුරවන්න, පිටුවෙ තියෙන ලින්කු (links) ගොඩක් අලුත් ටැබ්වල විවෘත කරන්න, පිටුවෙ තියෙන පින්තූර ඔක්කොම නැවත අලුත් කරන්න (refresh/reload) වගේ පොඩි පොඩි කම්මැලි වැඩ බොහොම පොඩි JS කේත (scripts)වලින් ලේසියෙන් කරගන්න පුළුවන්.