JavaScript |
JavaScript, in its modern form, is an object-based scripting programming language based on the concept of prototype-oriented. The language is best known for its use in websites, but is also used to enable scripting access to objects embedded in other applications. It was originally developed by Brendan Eich of Netscape Communications Corporation under the name Mocha , then LiveScript , and finally renamed to JavaScript. Like Java programming language, JavaScript has a C programming language syntax, but it has far more in common with the Self programming language than with Java.
As of 1999, the latest version of the language is JavaScript 1.5, which corresponds to ECMA-262 Edition 3. ECMAScript, in simple terms, is a standardized version of JavaScript. Mozilla versions since 1.8 Beta 1 also have partial support of E4X, which is a language extension dealing with XML, defined in the ECMA-357 standard.
=Java, JavaScript, and JScript=
The change of name from LiveScript to JavaScript happened at roughly the time when Netscape was including support for Java technology in its , and is only available on Internet Explorer, unlike JavaScript, which is available in most browsers. When faced with the problem of choosing between the two languages, programmers will most often opt for JavaScript.
Due to the de facto success of JavaScript as a web page enhancement language, Microsoft developed a compatible language known as JScript. JScript was first supported in the Internet Explorer browser version 3.0 released in August, 1996. When web developers talk about using JavaScript in the IE browser, they usually mean JScript. The need for common specifications for that language was the basis of the ECMA 262 standard for ECMAScript (see #External links below), three editions of which have been published since the work started in November 1996 (and which in turn set the stage for the standardization of C Sharp programming language a few years later). One term often related to JavaScript, the Document Object Model (DOM), is actually not part of the ECMAScript standard; it s rather a standard on its own, and closely related to XML.
=Usage=
JavaScript is a prototype-based programming scripting language with a syntax loosely based on C. Like C, it has the concept of reserved keywords , which (being executed from source) means it is almost impossible to extend the language without breakage.
Also like C, the language has no input or output constructs of its own. Where C relies on standard I/O libraries, a JavaScript engine relies on a host program into which it is embedded. There are many such host programs, of which web technologies are the most well known examples. These are examined first.
JavaScript embedded in a web browser connects through interfaces called Document Object Model (DOM) to applications, especially to the server side (web servers) and the client side (web browsers) of web applications. Many web sites use client-side JavaScript technology to create powerful dynamic web applications. It may use unicode and can evaluate regular expressions (introduced in version 1.2 in Netscape Navigator 4 and Internet Explorer 4). JavaScript expressions contained in a string can be evaluated using the eval function.
One major use of web-based JavaScript is to write functions that are embedded in or included from HTML pages and interact with the DOM of the page to perform tasks not possible in static HTML alone, such as opening a new window, checking input values, changing images as the mouse cursor moves over, etc. Unfortunately, the DOM interfaces in various browsers differ and don t always match the W3C DOM standards. Different browsers expose different objects and methods to the script. It is therefore often necessary to write different variants of a JavaScript function for the various browsers, though this situation is improving. Major design methodologies using JavaScript to interact with DOM include Dynamic HTML, Ajax (programming), and Single Page Application.
Outside of the Web, JavaScript interpreters are embedded in a number of tools. Adobe Systems Adobe Acrobat and Adobe Reader support JavaScript in Portable Document Format files. The Mozilla platform, which underlies several common web browsers, uses JavaScript to implement the user interface and transaction logic of its various products. JavaScript interpreters are also embedded in proprietary applications that lack scriptable interfaces. Dashboard (software) in Apple s Mac OS X v10.4 are implemented using JavaScript. Microsoft s Active Scripting technology supports JavaScript-compatible JScript as an operating system scripting language. JScript .NET is a Common Language Infrastructure-compliant language that is similar to JScript, but has further object oriented programming features.
Each of these applications provides its own object model which provides access to the host environment, with the core JavaScript language remaining mostly the same in each application.
=Core language elements =
==Whitespace==
Space (punctuation)s, tabs, newlines and Comments used outside string constants are called whitespace. Unlike C, whitespace in JavaScript source can directly impact semantics. Because of a technique called semicolon insertion , any statement that is well formed when a newline is parsed will be considered complete (as if a semicolon were inserted just prior to the newline). Programmers are advised to supply statement terminating semicolons explicitly to enhance readability and lessen unintended effects of the automatic semicolon insertion.
Unnecessary whitespace , whitespace characters that are not needed for correct syntax, can increase the amount of wasted space, and therefore the file size of .js files. Where file compression techniques that remove unnecessary whitespace are used, performance can be improved if the programmers have included these so-called optional semicolons.
Comment syntax is the same as in C plus plus. That is, either blocked comments as /* ... */ or rest of line comments delimited by // .
==Variables==
Variables are generally dynamically typed. Variables are defined by either just assigning them a value or by using the var statement. Variables declared outside of any function, and variables declared without the var statement, are in global scope, visible in the entire web page; variables declared inside a function with the var statement are local to that function.
To pass variables from one page to another, a developer can set a HTTP cookie or use a hidden frame or window in the background to store them. This feature is not a part of JavaScript language, rather, it is part of the browser DOM.
==Objects==
For convenience, Types are normally subdivided into primitives and objects . Objects are entities that have an identity (they are only equal to themselves) and that map property names to values, ( slots in prototype-based programming terminology). That is, an object is an associative array similar to hashes in the Perl programming language, arrays in PHP, or dictionaries in Python programming language, PostScript and Smalltalk programming language.
JavaScript has several kinds of built in objects, namely Array, Boolean datatype, Date, Function (programming), Mathematics, Number, Object (computer science), regular expressions and String#Mathematics and Computer Science. Other objects are host objects , defined not by the language but by the runtime environment. For example, in a browser, typical host objects belong to the Document Object Model (window (computing), form (document), links etc.).
By defining a constructor function it is possible to define objects. JavaScript is a prototype-based programming object-based language. This means that inheritance is between objects, not between classes (JavaScript has no classes). Objects inherit properties from their prototypes.
One can add and remove properties or methods to individual objects after they have been created. To do this for all instances created by a single constructor function, one can use the prototype property of the constructor to access the prototype object. Object deletion is not mandatory as the scripting engine will Garbage collection (computer science) any variables that are no longer being referenced.
Example: Manipulating an object // constructor function function MyObject(attributeA, attributeB) { this.attributeA = attributeA; this.attributeB = attributeB; } // create an Object obj = new MyObject( red , 1000); // access an attribute of obj alert(obj.attributeA); // access an attribute with the associative array notation alert(obj[ attributeA ]); // add an new attribute obj.attributeC = new Date(); // remove an attribute of obj delete obj.attributeB; // remove the whole Object delete obj;
JavaScript supports inheritance hierarchies through prototyping. For example:
function Base() { this.Override = function() { alert( Base::Override() ); } this.BaseFunction = function() { alert( Base::BaseFunction() ); } } function Derive() { this.Override = function() { alert( Derive::Override() ); } } Derive.prototype = new Base(); d = new Derive(); d.Override(); d.BaseFunction(); d.__proto__.Override(); // mozilla only
will result in the display: Derive::Override() Base::BaseFunction() Base::Override() // mozilla only
Object hierarchy may also be created without prototyping:
function red() { this.sayRed = function () { alert ( red wine ) } } function blue() { this.sayBlue = function () { alert( blue sky ) } this.someName = black // inherits black this.someName() // inherits black } function black () { this.sayBlack = function () { alert( black night ) } } function anyColour() { this.anotherName = red // inherits red this.anotherName() // inherits red this.sayPink = function() { alert( Any Colour You Like is a song of Pink Floyd ) } this.anotherName = blue // inherits blue ( + black ) this.anotherName() // inherits blue ( + black ) this.anotherName = released 1973 // now it s a string - just for fun } var hugo = new anyColour() hugo.sayRed() hugo.sayBlue() hugo.sayBlack() hugo.sayPink() alert(hugo.anotherName)
==Data structures==
A typical data structure is the Array, which is a map from integers to values. In JavaScript, all objects can map from integers to values, but Arrays are a special type of object that has extra behavior and methods specializing in integer indices (e.g., join, slice, and push).
Arrays have a length property that is guaranteed to always be larger than the largest integer index used in the array. It is automatically updated if one creates a property with an even larger index. Writing a smaller number to the length property will remove larger indices. This length property is the only special feature of Arrays that distinguishes it from other objects.
Elements of Arrays may be accessed using normal object property access notation:
myArray[1] myArray[ 1 ]
These two are equivalent. It s not possible to use the dot -notation or strings with alternative representations of the number: myArray.1 (syntax error) myArray[ 01 ] (not the same as myArray[1])
Declaration of an array can use either an Array literal or the Array constructor: myArray = [0,1,,,4,5]; (array with length 6 and 4 elements) myArray = new Array(0,1,2,3,4,5); (array with length 6 and 6 elements) myArray = new Array(365); (an empty array with length 365)
Arrays are implemented so that only the elements defined use memory; they are sparse arrays . Setting myArray[10] = someThing and myArray[57] = somethingOther only uses space for these two elements, just like any other object. The length of the array will still be reported as 58.
Object literals allow one to define generic structured data:
var myStructure = { name: { first: Mel , last: Smith }, age: 33, hobbies: [ chess , jogging ] };
This syntax has its own defacto standard, JSON.
==Control structures==
===If else===
if (condition) { statements } else { statements }
=== ===
Also known as the ternary operator condition statement : statement;
===While loop===
while (condition) { statements }
===Do ... while===
do { statements } while (condition);
===For loop===
for ([initial-expression]; [condition]; [increment-expression]) { statements }
===For ... in loop===
This loop goes through all enumerable properties of an object (or elements of an array).
for (slot in object) { statements involving object[slot] }
===Control_flow#Choice_based_on_specific_constant_values===
switch (expression) { case label1 : statements; break; case label2 : statements; break; default : statements; }
==Functions==
A function (programming) is a block with a (possibly empty) argument list that is normally given a name. A function may give back a return value.
function function-name(arg1, arg2, arg3) { statements; return expression; }
Example: Euclidean algorithm of finding the greatest common divisor. (This is a geometrical solution which subtracts the shorter segment from the longer):
function gcd(segmentA, segmentB) { while(segmentA!=segmentB) if(segmentA>segmentB) segmentA -= segmentB; else segmentB -= segmentA; return(segmentA); }
The number of arguments given when calling a function may not necessarily correspond to the number of arguments in the function definition; a named argument in the definition that does not have a matching argument in the call will have the value undefined. Within the function the arguments may also be accessed through the arguments list (which is an object); this provides access to all arguments using indices (e.g. arguments[0], arguments[1], ... arguments[n]), including those beyond the number of named arguments.
Basic data types (strings, integers, ...) are passed by value wheras objects are passed by reference.
=== Functions as objects and anonymous functions === Functions are first-class objects in JavaScript. Every function is an instance of Function, a type of base object. Functions can be created and assigned like any other objects, and passed as arguments to other functions. Thus JavaScript supports higher-order functions. For example:
Array.prototype.fold = function (value, functor) { var result = value; for (var i = 0; i < this.length; i++) { result = functor(result, this[i]); } return result; } var sum = [1,2,3,4,5,6,7,8,9,10].fold(0, function (a, b) { return a + b })
results in the value:
55
As functions are objects Javascript allows the definition of anonymous functions. function() { statements; }
The implicit object available within the function is the object itself it is assigned. In the example below the Point prototype object an alert method is assigned as defined by an anonymous function.
function Point( x, y ) { this.x = x; this.y = y; } Point.prototype.alert = function() { window.alert( ( + this.x + , + this.y + ) ); } var pt = new Point( 1, 0 ); pt.alert();
Methods can also be added within the constructor:
function Point( x, y ) { this.x = x; this.y = y; this.alert = function() { window.alert( ( + this.x + , + this.y + ) ); } } var pt = new Point( 1, 0 ); pt.alert();
In fact, there is no need to create a class first, as members can be added directly to a variable:
var pt = { x: 1, y: 0, alert: function() { window.alert( ( + this.x + , + this.y + ) ); } } pt.alert();
By default, all members of an object are public. There are no private or protected members (though these can be emulated). For detailed control of member access, getters and setters can be used (e.g. to create a read only property or a property that the value is generated):
function Point( x, y ) { this.x = x; this.y = y; } Point.prototype.__defineGetter__( dimensions , function() { return [this.x, this.y]; } ); Point.prototype.__defineSetter__( dimensions , function( dimensions ) { this.x = dimensions[0]; this.y = dimensions[1]; } ); var pt = new Point( 1, 0 ); window.alert( pt.dimensions.length ); pt.dimensions = [2,3];
The functions __defineSetter__ and __defineGetter__ are implementation-specific and not part of the ECMAScript standard.
==Error handling==
Depending on the development environment debugging used to be difficult. Since errors in JavaScript only appear in run-time (i.e., there is no way to check for errors without executing the code), and since JavaScript is interpreted by the web browser as the page is viewed, it may be difficult to track the cause for errors. However nowadays the Gecko (layout engine)-based browsers come with a fairly good Debugger (Venkman) and a DOM inspector. Newer versions of JavaScript (as used in Internet Explorer 5 and Netscape (web browser) 6) include a try ... catch error handling statement. Purloined from the Java_programming_language, this is intended to help with run-time errors but does so with mixed results.
The try ... catch ... finally statement catches exception handling resulting from an error or a throw statement. Its syntax is as follows:
try { // Statements in which exceptions might be thrown } catch(error) { // Statements that execute in the event of an exception } finally { // Statements that execute afterward either way }
Initially, the statements within the try block execute. If an exception is thrown, the script s control flow immediately transfers to the statements in the catch block, with the exception available as the error argument. Otherwise the catch block is skipped. Once the catch block finishes, or the try block finishes with no exceptions thrown, then the statements in the finally block execute. This is generally used to free memory that may be lost if a fatal error occurs—though this is less of a concern in JavaScript. This figure summarizes the operation of a try...catch...finally statement:
try { // Create an array arr = new Array(); // Call a function that may not succeed func(arr); } catch (...) { // Recover from error logError(); } finally { // Even if a fatal error occurred, we can still free our array delete arr; }
The finally part may be omitted:
try { statements } catch (err) { // handle errors }
===Error Scope===
Scripting languages are especially susceptible to bugs, and since JavaScript has varying implementations it is common to spend a great deal of time debugging. Each script block is parsed separately. On pages where JavaScript in script blocks is mixed with HTML, syntax errors can be identified more readily by keeping discrete functions in separate script blocks, or (for preference), using many small linked .js files. This way, a syntax error will not cause parsing/compiling to fail for the whole page, and can enable a dignified die.
= Offspring =
The programming language used in Macromedia Flash (called ActionScript) bears a resemblance to JavaScript. ActionScript has similar syntax as JavaScript, but the object model is dramatically different.
JSON, or JavaScript Object Notation, is a general-purpose data interchange format.
JavaScript OSA (JavaScript for OSA, or JSOSA), is a Apple Macintosh scripting language based on the Mozilla 1.5 JavaScript implementation, SpiderMonkey. It is a freeware component made available by Late Night Software. Interaction with the operating system and with third-party applications is scripted via a MacOS object. Otherwise, the language is virtually identical to the core Mozilla implementation. It was offered as an alternative to the more commonly used AppleScript language.
Of only historical interest now, ECMAScript was included in the VRML97 standard for scripting nodes of VRML scene description files.
=See also=
*CorbaScript *LiveConnect *Dynamic HTML *JavaScript engine *Client-side JavaScript *Server-side JavaScript *List of JavaScript engines
= References =
==Specifications==
*[http://mozilla.org/js/language/js20/ Proposal for JavaScript 2.0] *[http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference Reference for JavaScript 1.5] *[http://research.nihonsoft.org/javascript/CoreReferenceJS14/ Reference for JavaScript 1.4] *[http://research.nihonsoft.org/javascript/ClientReferenceJS13/ Reference for JavaScript 1.3] *[http://research.nihonsoft.org/javascript/jsref/index.htm Reference for JavaScript 1.2] *[http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html Guide for JavaScript 1.1 as used by Navigator 3.x] *[http://e-pla.net/documents/manuals/javascript-1.0/index.html Guide for JavaScript 1.0]
==External links==
*[http://developer.mozilla.org/en/docs/JavaScript Mozilla JavaScript Language Documentation] *[http://www.yourhtmlsource.com/javascript/ HTML Source JavaScript Tutorials] *[http://www.pfeiffer-mediation.de/remast/javascript.php JavaScript functional programming Tutorial] *[http://www.w3schools.com/js/ W3Schools.com JavaScript Tutorial] *[http://www.openjsan.org/ JavaScript Archive Network]
==History==
*[http://wp.netscape.com/comprod/columns/techvision/innovators_be.html Innovators of the Net: Brendan Eich and JavaScript] (Marc Andreesen, Netscape TechVision, 24 Jun 1998) *[http://inventors.about.com/library/inventors/bl_javascript.htm Brendan Eich and JavaScript] (about.com) *[http://weblogs.mozillazine.org/roadmap/archives/008325.html Brendan s Roadmap Updates: JavaScript 1, 2, and in between] - the author s blog entry|
|