Webwi Lernblog Wintersemester

JavaScript is nowadays one of the most used programming languages according to the TIOBE Index (Q1). This article describes some components of the whole JavaScript landscape including AJAX and modern development utilities like jQuery. It further dives into the history of JavaScript and gives insights about the latest standardization release ECMAScript 2015.

What is JavaScript?

JavaScript is a platform independent programming language which can be executed on many different host systems like node.js or web browsers (Q2). Regarding the web browser as host system, the code will be executed on the client side, e.g. the computer of the user which requested the content (most likely a HTML page with JavaScript code associated to it in any way). This client executable code can be used to manipulate elements on the page, to give users a better web experience compared to static pages with no dynamic client side behavior.

History

In the very first days of the Web, there was no way to put fancy animations into web pages or do form validations on the client side rather than making a roundtrip to the server to check the validity of the input. It was the time, where static HTML documents were transferred without any dynamic behavior. But as the Web grew and gained popularity, more sophisticated techniques were needed to meet the people’s demands and expectations (Q3). Brendan Eich came up with a loosely-typed scripting language where developers must not have any knowledge of object-oriented software design, as it should be present developing Java Applets, which were already present in the Web in those days (Q4).

The first version of JavaScript, which was initially be named as “LiveScript”, was included and shipped with Netscape 2.0. Other browser vendors like Microsoft included JScript, another scripting language slightly comparable to JavaScript, into their Internet Explorer 3.0. It was the start of a war between different browser vendors (mainly Netscape and Microsoft with the Internet Explorer) regarding functionality of their browsers including JavaScript.

The first standardization of the JavaScript programming language was made by ECMA (European Computer Manufacturers Association) with their standard ECMA-262 first published on June 1997 (Q5). Even with the announced standard, vendors implemented their own “standard” including some browser dedicated functionality, which eventually led to frustration on the developer side, as programmed scripts can potentially run on one browser but fail on another one. Even nowadays browsers differ in their exposed JavaScript functionality (Q6).

AJAX and the XMLHttpRequest object

The abbreviation AJAX stands for “Asynchronous JavaScript and XML” and describes a technique for communication between client side scripts (e.g. JavaScript) and the server backend without refreshing the page (Q7). This communication is intended to be asynchronous in order to preserve the user’s experience with the user interface by avoiding request stalls.

AJAX requests use the XMLHttpRequest (Q8) object to send requests to the server and receive responses in several possible formats including HTML, JSON and XML. Defined event handlers will then process the received response. 

Without further restrictions on the browser host side, such AJAX requests can be used by malicious JavaScript code, as every request from the site also includes all cookies related with it, potentially revealing session IDs to untrusted third parties (Q9). The same origin policy checks whether the requested origin is the same as the origin where the script is loaded from. An origin is defined by the protocol, the port and the host. If the two origins match request are allowed, otherwise the request will be denied (Q10).

Prototypical inheritance

Objects in JavaScript (and in most other programming languages) are models of real world objects which are only using a subset of the real world object’s state and behavior (Q11). An object typically consists of properties like the name, birthday, color (depending on the real world object) and methods to manipulate the state of the object like start and stop within a car object.

Inheritance is a way to structure and organize the models (Q12). Example: “The model teacher inherits from the person model as every teacher is by definition a person. All concrete objects of the teacher model inherit all the properties and methods from the person” 

The inheritance strategy used within JavaScript is called “Prototypical inheritance”. The inheritance hierarchy is based on a chain where every object has a link to a predecessor object called the “prototype”. The chain can be traversed down to an object with no predecessor (null value). Properties and methods which are not defined on the actual object where they are accessed might be declared in one of the super-objects. The system will traverse the prototypical chain trying to find the property / method on any prototype object of the actual object (Q13).

jQuery and MVC frameworks

Using plain JavaScript to manipulate DOM objects or to send AJAX requests to server can involve some boilerplate code. To avoid writing unnecessary code again and again, powerful libraries covered all that boilerplate code and expose it via easy to use interfaces. One of the most prominent libraries in the JavaScript community is jQuery (Q14). It provides feature-rich functionality for manipulating DOM elements, animations and much more. One of jQuery’s strength is the cross browser compatibility including various newer and older browsers (Q15).

The MVC (Model-View-Controller) pattern splits a whole application into several parts with the goal to increase the maintainability (Q16):

• Model: Representation of the data
• View: User Interface
• Controller: Manages interactions between the model and the view

This pattern might be known from backend or rich client development, but has entered the web development as well with popular frameworks like AngularJS (Q17) or KnockoutJS (Q18).

ECMAScript 2015 (6^th edition)

The 6^th version of the JavaScript specification (ECMAScript 2015) has officially been released on June 2015 (Q19). As of now, modern browsers still don’t cover all the new features within the new standard (Q20). Developing a project using new ES 6 features might therefore be a bad idea, if broad browser availability / compatibility is needed.

Some key features of the new standard (Q21):

• Classes: are used as syntactic sugar over the JavaScript prototyped based pattern, but still improves readability due to its declarative form
• Templating Strings: Syntactic sugar for string construction
• Introducing the let keyword, which gives variables a block scope rather than a default function or global scope.
• Constants
• Iteration of special objects using the “for .. of” syntax
• New data structures like Map and Set

Quotations:

Q1: http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html (visited on 2016/01/03)

Q2: https://developer.mozilla.org/en/docs/Web/JavaScript (visited on 2016/01/03)

Q3: Object-Oriented JavaScript - Second Edition, Stoyan Stefanov, July 2013

Q4: http://archive.oreilly.com/pub/a/javascript/2001/04/06/js_history.html (visited on 2016/01/03)

Q5: http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf (visited on 2016/01/03)

Q6: http://kangax.github.io/compat-table/es5/ (visited on 2016/01/03)

Q7: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started (visited on 2016/01/03)

Q8: https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest (visited on 2016/01/03)

Q9: https://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy (visited on 2016/01/03)

Q10: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy (visited on 2016/01/03)

Q11: http://www.w3schools.com/js/js_objects.asp (visited on 2016/01/03)

Q12: https://docs.oracle.com/javase/tutorial/java/concepts/ (visited on 2016/01/03)

Q13: https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain (visited on 2016/01/03)

Q14: https://jquery.com/ (visited on 2016/01/03)

Q15: https://jquery.com/browser-support/ (visited on 2016/01/03)

Q16: https://msdn.microsoft.com/en-us/library/ff649643.aspx (visited on 2016/01/03)

Q17: https://angularjs.org/ (visited on 2016/01/03)

Q18: http://knockoutjs.com/ (visited on 2016/01/03)

Q19: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf (visited on 2016/01/03)

Q20: http://kangax.github.io/compat-table/es6/ (visited on 2016/01/03)

Q21: https://github.com/lukehoban/es6features (visited on 2016/01/03)