JavaScript

This tutorial is about basic and advanced features of JavaScript (a.k.a. ECMAScript). JavaScript is probably the worst programming language ever invented, worse than C!
Indeed, JavaScript is not statically typed. This feature prevents early fault detection at compilation time, but JavaScript cannot be ignored in the Internet era!
From JavaScript 5, it is essential to impose rigorous interpretation rules through the "use strict"; statement that most often appears at the top of a source file.
This tutorial also discusses JavaScript 6 whose key novelties are summarized here…

Example (downloading jQuery from Google)

Loading (in sequence) JavaScript libraries in HTML files may involve a lot of manual management: sequence must respect dependencies, asynchronous loading (for performance) must be explicit
using async, etc. RequireJS or
Browserify are utilities that avoid such a tricky management.

In this example, we consider a 'UV_mapping_three.js' file as the main program file of a simple Web application .
This application reuses the three.js 3D library as a dependency.
Only the 'require.js' file is loaded in HTML:

<!-- 'data-main' attribute tells 'require.js' to load 'UV_mapping_three.js' after 'require.js' loads... -->
<!-- *By construction*, 'UV_mapping_three.js' is loaded in an asynchronous way by 'require.js' -->
<!-- Do not be confused by 'async' (see below): it just embodies the asynchronous loading of 'require.js' itself! -->
<script async data-main="./js/UV_mapping_three" src="./js/require.js"></script>

The 'UV_mapping_three.js' must then load what it requires, namely 'three.js'. Note that 'require.js', 'three.js' and 'UV_mapping_three.js' are together stored in a 'js' sub-directory where 'index.html' is located.

requirejs(['three'], function (module) {
window.THREE = module;
// While 'three.js' may be used from here, one has however to check that the DOM and/or the full window (images, sounds, videos…) is loaded.
});

Because of serious permissivity, it is strongly advised to write JavaScript in strict mode so that the interpreter checks the code at run-time (and generates errors viewable in the console navigator if necessary).

Rule(s)

The strict mode brings out many advantages including security concerns in browsers.

Example

"use strict";
var well_declared_variable = "Strict mode is activated from all statement lines in the rest of this source file!";
ill_declared_variable = 2016; // The absence of 'var' normally raises an error at execution time thanks to the strict mode

Example

Objects: JavaScript objects are either primitive or, by default, they are created from a prototype that belongs to the Object type.
Primitive types are Boolean, Number, String, undefined and Symbol.
Another key type is the Function type.

Rule(s)

Structured objects with attributes may benefit from being created by means of Object.create in a more sophisticated way.

Example

Arrays in JavaScript are, by their very deep flexibility, a core tool to manage collections of elements.
Common arrays are instance of the predefined Array constructor
while typed arrays have been recently introduced to (mainly) deal with bit streams (i.e., buffers).

JavaScript functions are powerful tools of the language. They have a first-class status as plain objects.
The absence of static typing in JavaScript suppresses any control about functions' arguments and returned objects: their types and number.

Lambda expressions

Rule(s)

Similar to Java, C++…, JavaScript supports lambda expressions; they lighten the way by which anonymous functions are manipulated in the code.
However, again, one has to carefully address readability issues raised by the compact style of lambda expressions!

Example

Meta-functions

Rule(s)

Meta-functions are part of the Function constructor itself: call and apply.

Example

var my_function = function (my_parameter) {
window.alert(this.surname); // 'Barbier' is displayed since 'Franck' is substituted for 'this' below
return ++my_parameter;
};
// This is equivalent to 'my_function(0)' above, but the call is more sophisticated:
window.alert("call: " + my_function.call(Franck, 0)); // First arg. plays the role of 'this' inside the function while '0' is substituted for 'my_parameter'
window.alert("apply: " + my_function.apply(Franck, [0])); // First arg. plays the role of 'this' inside the function while '[0]' is a one-element array containing '0' as unique element

Even though JavaScript is not an original OO programming language, design efficiency and rationality strive us to adopt a disciplined approach.

Resource(s)

Temperature.js.zip

Initially, JavaScript has no native support for inheritance and polymorphism. However, as a prototype-based programming language, inheritance and polymorphism can be simulated.
One may look at this blog in order to understand how such a simulation may be instrumented.

Resource(s)

CAI.js.zip

The foundation of JavaScript is its event model.
In other words, there is no concurrent programming support in JavaScript as multithreading in Java.
However, JavaScript is intrinsically concurrent by the possibility of dispatching event occurrences to (developer-defined) handling functions.
A lot of event types are available in the JavaScript system.
Occurrences of these events (mouse event occurrences for instance) are dispatched by JavaScript for asynchronous processing: events are queued and delivered to handling functions at appropriate moments.
The JavaScript event model may be extended through the
CustomEvent interface in particular.

Resource(s)

Time_management.js.zip

Time management is the simple way to perform periodic and/or repetitive tasks.
In this scope, window.setInterval (cyclic timer) and
window.setTimeout (one-shot timer, see jQuery section)
are ready-to-use facilities for time management.

Resource(s)

Time_management.js.zip

Animation is the ability to register a function (e.g., _animate_3D_object in the code below), which is called each time the browser repaints frames.
For enabling this mechanism, the devoted facility is window.requestAnimationFrame.
Of course, this facility is the key support for rich animation beyond the use of time management facilities. The recommended rate is 60 refreshed frames per sec. (one may note that the original Cinéma used 24 images per sec.).

Resource(s)

Time_management.js.zip

jQuery is probably the most popular JavaScript library. It mainly offers a graceful way (syntax, etc.) of dealing with the DOM, AJaX and events.
jQuery remains a third-party library, i.e., it is not in the core of JavaScript. However, numerous developers use it plus famous extensions like
jQuery UI.

Example (event sending)

Note(s)

The 'on' function may link more than one event type to the same handling function.
However, this is NOT a conjunction (as of the idea of Deferred Object in jQuery) of two event occurrences of each type.
In other words, below, 'e1_e2_handling_function' is launched when 'e1_event' OR 'e2_event' occurs.

Note(s)

Resource(s)

Web_Services.js.zip

WebSockets is a technology that promotes bi-directional full-duplex communication between (not exclusively) browsers and WebSockets servers.
Deploying servers for homemade business relies on products like Node.js or libraries like Tyrus in Java. For testing purposes, it is also possible to get access to
running servers on the Web like the “echo” WebSockets server at this place: https://www.websocket.org/echo.html.
Otherwise, the general way of dealing with WebSockets in Javascript is described here.
Web Workers is a support for dealing with a kind of multithreading. More precisely, some JavaScript code may run outside the browser so that this code lightens the load on the browser.
Web Workers mainly consist in facilities to assign background tasks from a browser to a given Web worker that runs in parallel with the said browser.

Rule(s)

A Web worker does not access to common JavaScript facilities, window in particular.
The self keyword then refers to the worker's own resources.

Rule(s)

Because of privacy issues, the browser requires a user's agreement before going on… Note that Chrome requires the user's agreement only once
(and records it for future sessions) while Firefox and Safari ask for it each time.