ජාවා උපදේශාවලිය
වෙබ් තාක්ෂණයේ සැලකිය යුතු දියුණුවක් වනනේ සන් මයික්‍රෝ සිස්ටම් ගේ ජාවා වේදිකාවය. එය කුඩා වැඩසටහන් (යෙදුමිත්ත ලෙස හඳුන්වන) කෙලින්ම දර්ශනය කිරීමට වෙබ් පිටුවලට ඉඩ සලස්වයි. මෙම යෙදුමිති පරිශීලකයාගේ පරිගණකයේ ක්‍රියාත්මක වන අතර සරල වෙබ් පිටුවලට වඩා පොහොසත් පරිශීලක අතුරු මුහුණක් සපයයි. ජාවා සේවාලාභී - පැති යෙදුමිති, විවිධ හේතු ගණනවක් නිසා , සන් බලාපොරොත්තු වූ ප්‍රසිද්ධිය ලබා ගත්තේ නැත. ඒ හේතු අතරට , අනෙකුත් අන්ත්ගතය සමඟ සමෝධානය අඩු වීම (යෙදුමිති අදාල පිටුව තුළ කුඩා කොටුවලට සීමාකර තිබිණි) හා එකල බොහොමයක් පරිගණක ගැලපෙන පරිදි ජාවා අතාත්වික යන්ත්‍රය ස්ථාපනය නොකර පරිශීලකයන් අතට පත් කර තිබීම අයත් වේ. එම නිසා පරිශීලකයන්ට යෙදුමිති දර්ශනය වීමට ඒවා පළමුව බාගත කර ගත යුතුය. මුල දී ජාවා යෙදුමිති සඳහා වූ බොහොමයක් කාර්යයන් අඩෝබ් ෆ්ලෑෂ් (Adobe Flash) මඟින් ඉටු කරයි. ඒවාට වීඩියෝ අන්තර්ගත සජීවීකරණ හා සමහරක් දියුණු UI අංග ධාවනය කිරීම ඇතුළත් වේ. ජාවා, වේදිකාවක් ලෙස බහුලව භාවිතා වන අතර සේවාදායක පැති හා අනෙක් ක්‍රමලේඛකරණ (programming) සඳහා භාෂාවක් ලෙස ද භාවිතා වේ.
ජාවා උපදේශාවලි, අනෙක් අතට, වෙබ් පිටු තුළ භාවිතය සඳහා දියුණු කරන ලද උපදේශාවලි භාෂාවකි. සම්මතකරණය කරන ලද සංස්කරණය වනනේ ECMA උපදේශාවලියයි. නෙට් ස්කේප් නිර්මාණය කළ ජාවා උපදේශාවලිය එහි නමින් ජාවාට සමාන නමුත් එයට ජාවා සමඟ කළ හැකි කිසිවක් නොවීය. එසේ නමුත් ජාවා මෙන් එහි වාග් රීතිය (syntax) ව්‍යුත්පන්න වූයේ ක්‍රමලේඛ භාෂාවෙනි. වෙබ් පිටුවල, ලේඛ වස්තු ආකෘතිය සමඟ සසඳා බලන කළ එහි නිර්මාණකරුවන් සිතුවාටත් වඩා බලවත් තාක්ෂණික ක්‍රමයක් බවට ජාවා උපදේශාවලි පත්ව ඇත. ස්ථිතික HTML සංදර්ශනවලින් වෙන් කිරීම සඳහා , සේවා ලාභියාට පිටුව ලැබුණු පසු පිටුවේ ලේඛ වස්තු ආකෘතිය ක්‍රියාත්මක කිරීම ඩයිනමික් HTML (DHTML) ලෙස හඳුන්වනු ලැබීය.
සරල සිද්ධිවල දී , පිටුව ප්‍රථමයෙන් ලැබෙන විට, ජාවා උපදේශාවලි වර්ධිත වෙබ් පිටුවේ සියලු අතිරේක තොරතුරු හා ක්‍රියා බාගත වේ. අජැක්ස් (Ajax) (අසමකාලික ජාවා උපදේශාවලි හා XML) යනු පරිශීලක ක්‍රියාවලට ප්‍රතිචාරලෙස පසු කාලීනව ජාලය හරහා ගත් නව තොරතුරු යොදා ගෙන වෙබ් පිටුවක් තුළ වූ කොටස් යාවත් කාලීන කළ හැකි ක්‍රමයක් සපයන, වෙබ් යෙදුම් නිර්මාණයට යොදා ගන්නා, අන්තර්ව බැදුණු වෙබ් නිර්මාණකරණ තාක්ෂණික ක්‍රම කාණ්ඩයකි. මෙය නිසා වෙබ් පිටුව වඩා ප්‍රතිචාරී අන්තර් ක්‍රියාකාරී හා රුචි ජනක වන අතර මුලු පිටුවක නැවත පැමිණෙන තෙක් පරිශීලකයාට බලා හිඳීමට සිදු නොවේ. වෙබ් 2.0 ලෙස හඳුන්වන්නෙහි වැදගත් අංගයක් ලෙස ඇජැක්ස් දැකිය හැකිය. දැනට භාවිතා වන අජැක්ස් තාක්ෂණික ක්‍රමවලට උදාහරණ ජී මේල්, ගූගල් මැප් හා අනෙක් උද්‍යෝගී වෙබ් යෙදුම්වල දැකගත හැකිය.
Example - syntax and semantics
[සංස්කරණය]This sample code showcases various JavaScript features. The example can be executed with the following steps: (1) Copy the code to a file with extension .html. (2) Use Mozilla Firefox or Google Chrome to open the file.
<html>
<head><title>LCM Calculator</title></head>
<body>
<font face="Courier New" size="3">
<script type="text/javascript">
/* Finds the lowest common multiple of two numbers */
function LCMCalculator(x, y) { // constructor function
function checkInt(x) { // inner function
if (x % 1 != 0)
throw new TypeError(x + " is not an integer"); // exception throwing
return x;
}
//semicolons are optional (but beware since this may cause consecutive lines to be
//erroneously treated as a single statement)
this.a = checkInt(x)
this.b = checkInt(y)
}
// The prototype of object instances created by a constructor is
// that constructor's "prototype" property.
LCMCalculator.prototype = { // object literal
gcd : function() { // method that calculates the greatest common divisor
// Euclidean algorithm:
var a = Math.abs(this.a), b = Math.abs(this.b), t;
if (a < b) {
t = b; b = a; a = t; // swap variables
}
while (b !== 0) {
t = b;
b = a % b;
a = t;
}
// Only need to calculate gcd once, so "redefine" this method.
// (Actually not redefinition - it's defined on the instance itself,
// so that this.gcd refers to this "redefinition" instead of LCMCalculator.prototype.gcd.)
// Also, 'gcd' == "gcd", this['gcd'] == this.gcd
this['gcd'] = function() { return a; };
return a;
},
"lcm" /* can use strings here */: function() {
// Variable names don't collide with object properties, e.g. |lcm| is not |this.lcm|.
// not using |this.a * this.b| to avoid FP precision issues
var lcm = this.a / this.gcd() * this.b;
// Only need to calculate lcm once, so "redefine" this method.
this.lcm = function() { return lcm; };
return lcm;
},
toString : function() {
return "LCMCalculator: a = " + this.a + ", b = " + this.b;
}
};
// Note: Array's map() and forEach() are predefined in JavaScript 1.6.
// They are currently not available in the JScript engine built into
// Microsoft Internet Explorer, but are implemented in Firefox, Chrome, etc.
// They are used here to demonstrate JavaScript's inherent functional nature.
[[25,55],[21,56],[22,58],[28,56]].map(function(pair) { // array literal + mapping function
return new LCMCalculator(pair[0], pair[1]);
}).sort(function(a, b) { // sort with this comparative function
return a.lcm() - b.lcm();
}).forEach(function(obj) {
/* Note: print() is a JS builtin function available in Mozilla's js CLI;
* It is functionally equivalent to Java's System.out.println().
* Within a web browser, print() is a very different function
* (opens the "Print Page" dialog),
* so use something like document.write() or alert() instead.
*/
// print (obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
// alert (obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
document.write(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm() + "<br />");
});
</script>
<noscript>
(Message from JavaScript example) <br />
Your browser either does not support JavaScript, or you have JavaScript turned off.
</noscript>
</body>
</html>
The following output should be displayed in the browser window.
LCMCalculator: a = 28, b = 56, gcd = 28, lcm = 56 LCMCalculator: a = 21, b = 56, gcd = 7, lcm = 168 LCMCalculator: a = 25, b = 55, gcd = 5, lcm = 275 LCMCalculator: a = 22, b = 58, gcd = 2, lcm = 638
If Internet Explorer is used, the example will generate an error. Hence the example illustrates the point that the JScript interpreter in Internet Explorer executes code differently from the JavaScript interpreters in other browsers. (See comments in the source code for details on the relevant differences for this example.)