Présentation sur Javascript aux étudiants de 4ème année à l'Ecole Supérieure d'Informatique (Oued Smar, Alger) faite le 5 janvier 2014

1. Javascript
Au-delà Du Langage
Par Dr Samir ROUABHI
rouabhi@gmail.com

2. Plan

3. Javascript
À Savoir
Avant de savoir

4. Un peu d’Histoire..
NCSA Mosaïc
Sun Microsystems
Netscape
Mocha
LiveScript
Java
Mozilla Foundation
Javascript
Oracle
Créé par Brendan Eich en 1995, sortie en 1996 sur NN 2.0 & IE 3.0
ECMA Script
JScript
ActionScript

5. Standards
 ECMA-262
6/1997
Dernière version ECMAScript 5.1, Javascript 1.9
Prochaine version ECMAScript 6, Javascript 2
D’autres implémentations: JScript, ActionScript, PDF, Node.js,…
 ECMA-327
ES-CP
6/2001
 ECMA-357
E4X
6/2004

6. Spécifications
 ECMA-262 : http://www.ecma






international.org/publications/files/ECMAST/Ecma-262.pdf
ECMA-327 : http://www.ecmainternational.org/publications/files/ECMAST/Ecma-327.pdf
ECMA-357 : http://www.ecmainternational.org/publications/files/ECMAST/Ecma-357.pdf
XMLHttpRequest :
http://www.w3.org/TR/XMLHttpRequest/
HTML 5 :
http://dev.w3.org/html5/spec/Overview.html
CSS 3 : http://www.w3.org/Style/CSS/
HTTP : http://www.w3.org/Protocols/
DOM : http://www.w3.org/TR/DOM-level-3-Core/

7. 1998
Javascript : le tournant

8. Le tournant
 Spécifications du DOM Level 1
1/1998
 MS Internet Explorer 5.0
9/1998
Implémente XMLHttpRequest comme ActiveX
Prémices du web 2.0

9. Javascript
Ce qu’il ne fait plus

10. Une utilité de perdue..

11. Une utilité de perdue..
Validation de formulaires :
Nom* :
Prénom* :
Date de naissance * :
Email* :
Enregistrer
Une de perdue, dix de retrouvées

12. Javascript
Un langage
en quelques
mots…

13. En quelques mots..
 Langage de Script, Dynamique, Interprété
 Sensible à la casse
 Typage dynamique faible
 Orienté objet, par prototypes
 Mono thread
 Asynchrone, par évènements

14. Un langage & des mots
61 mots réservés:
abstract, boolean, break, byte, case, catch, char, class, co
nst, continue, debugger, default, delete, do, double, else,
enum, export, extends, false, final, finally, float, for, func
tion, goto, if, implements, import, in, instanceof, int, int
erface, long, native, new, null, package, private, protecte
d, public, return, short, static, super, switch, synchronize
d, this, throw, throws, transient, true, try, typeof, undefi
ned, var, void, volatile, while, with

15. Un langage & des mots
30 Mots réservés utilisés:
abstract, boolean, break, byte, case, catch, char, class, c
onst, continue, debugger, default, delete, do, double,
else, enum, export, extends, false, final, finally, float, f
or, function, goto, if, implements, import, in, instanc
eof, int, interface, long, native, new, null, package, priv
ate, protected, public, return, short, static, super, switc
h, synchronized, this, throw, throws, transient, true, tr
y, typeof, undefined, var, void, volatile, while, with

16. Types
6 types natifs:
• string
• number
• boolean
• function
• object
• undefined
4 types prédéfinies:
• Array
• Date
• RegExp
• Error
"une chaine"
1.5e-2, NaN, Infinity
true, false
function(){…}
{}, null
undefined
typeof [] -> "object"
[1,2]
new Date()
/^[a-z]+[0-9]{1,3}$/gi
throw("Invalid_Value")

17. Variables: Duck typing
function f(a){
var x="chaine";
x=1;
console.log(a)
}
f();
-> undefined
Typage dynamique faible

18. Variables: toutes des objets
"beyond strings".toUpperCase()
"BEYOND STRINGS"
new String("beyond strings")
.toUpperCase()
.valueOf()
(.1253454).toPrecision(2)
"0.13"
new Number(.1253454)
.toPrecision(2)
.valueOf()
Les classes natives et prédéfinies peuvent être étendue !!

19. Variables: toutes des booléens
!"Bonjour"
!!
!!
!!
!!
!!
!!
!!
!!
!!
"Beyond"
""
3
0
{}
null
[]
undefined
function(){}
false
true
false
true
false
true
false
true
false
true
truthy, falsy
Ecriture idiomatique:
function(myName,myAge){
var name = myName || "Nom par défaut";
var age = myAge || 0;
}

20. Variables: toutes des miettes
function f(){
var x = { name:"X" , value: 1 },
y = new Object({ name:"Y" , value:-2 });
return x;
}
var z = f();
.
.
.
z = null;
Ramasse Miettes
Garbage Collector
Quand elles ne sont plus référencées,
les données sont détruites

21. Variables: Les fonctions, des objets de première classe
var sqare=function g(a){return a*a;}
console.log(typeof sqare) -> "function"
console.log(sqare(2))
-> 4
function f(n){
var power=function(x){return Math.pow(x,n);}
return power;
}
var square=f(2),cube=f(3);
console.log(square(3));
console.log(cube(5));
// 9
// 125
Les fonctions sont des objets comme les autres

22. Les closures : au-delà de l’accessible
function Baz(initial) {
var compteur = initial || 0;
return {
plus:function() { return compteur++; },
moins:function() { return --compteur; }
};
}
var X=Baz(), Y=Baz(5);
console.log(
console.log(
console.log(
console.log(
console.log(
X.plus() );
X.plus() );
X.plus() );
X.moins() );
Y.plus() );
//
//
//
//
//
0
1
2
2
5
Les closures sont un des mécanismes les plus puissants de Javascript

23. Les closures
var a=5,b=2;
var c=f(a,b);
console.log(window.a , window.b);
// 5 2
Traitement nécessitant la création de variables globales
var c;
( function(){var a=5,b=2; c=f(a,b);} )();
Aucune variable globale n’est créée

24. Javascript: Un langage objet par prototypes
function obj (a , n){
this.valeur = a||1;
this.pow = function(){return Math.pow(this.valeur , n||1);};
obj.prototype.compteur++;
}
obj.prototype.inc = function(){return ++this.valeur;}
obj.prototype.dec = function(){return this.valeur--;}
obj.prototype.set = function(a){this.valeur=a; return this;}
obj.prototype.compteur = 0;
var X=new obj(4,3), Y=new obj();
X
valeur=4
pow()
valeur=0
pow()
constructor
prototype
inc()
dec()
set()
compteur
Y

25. Javascript
Inside The Machine

26. Les Javascript Machines
Javascript engine + Layout engine
Mozilla Firefox
SpiderMonkey, TraceMonkey, JägerMonkey, OdinMonkey (+Gecko)
Microsoft Internet Explorer 9
Chakra (+ Trident)
Google Chrome
V8 (+ Webkit/Blink)
Apple Safari
JavascriptCore (+ Webkit)
Konqueror
KJS (+KHTML)
Javascript Engine : Environnement Mono-Thread

27. La programmation par événements
La programmation en Environnement Mono-Thread
Fonction bloquante :
for(var i=0;i<1000;i++) console.log(i);

28. La programmation par événements
La programmation en Environnement Mono-Thread
Chainage de fonctions :
function f(a, b, callback) {
|
callback();
}
f(1,2, function(){...});

29. La programmation par événements
La programmation en Environnement Mono-Thread
Programmation évènementielle:
table.findAll( {where:{login:"user"}} )
.success( function(data){...} )
.error( function(error){...} );

30. Plateforme
de développement

31. Plateforme de développement
 Vanilla Javascript
 Frameworks & Librairies
 Génériques: jQuery, Prototype, Dojo Toolkit
 Outils: Underscore.js, D3.js/ Raphaëljs
 AMD: Require.js, Browserify
 TDD: jUnit
 MVC :
Backbone, Ember, AngularJs, SproutCore, Spine, Knock
out, Batman, Sammy, Cappuccino, Mojito

32. Javascript en mode MVC
Backbone, Ember, Angular, SproutCore, Spine, Knockout,
Batman, Sammy, Cappuccino, Yahoo! Mojito,…

33. Backbone

34. Obfuscation du code
Google Closure Compiler (http://closure-compiler.appspot.com)
 Renomme les variables, comprime le code.
 Obfusque & optimise le code.
 L’optimisation fait certaines hypothèses sur le code pour
supprimer le code mort.

35. Code originel
function DBConstructor( db , user, pass , host ) {
if (!user) this.con = new (require('sequelize-mysql').sequelize)(db, {language:'en',logging:console.log, define:{freezeTableName: true}});
else this.con = new (require('sequelize-mysql').sequelize)(db,user,pass, {host:host, language:'en',logging: console.log, define:{freezeTableName:
true}});
}
DBConstructor.prototype.schemas = function( db , schemas , complete , force) {
var sequelize = require('sequelize-mysql').sequelize;
if (typeof schemas == "string") schemas = [schemas];
db = db || "user", remain = schemas.length, err=false; tables={};
if (!remain) complete(err , tables);
for(var index=0; index<schemas.length; index++) {
tables[ schemas[index] ] = require("./schema").table(db , schemas[index] , this.con);
tables[ schemas[index] ].sync({force:!!force})
.success( function(){ remain--; if (!remain) complete(err , tables); } )
.error( function(){ remain--; err=true; if (!remain) complete(err , tables); } );
}}
DBConstructor.prototype.loadData = function( db , schema , Options , key , onComplete) {
var table=require("./schema").table( db , schema , this.con);
if (!onComplete) {onComplete = key;key=null;}
if (!table) {onComplete(null);return;}
Options = Options || {};
Options.limit = Options.limit || 20;
table.findAll(Options)
.success(function(result){ var fields=require("./schema").fields(db,schema), data = require("./ormize")(result).get(fields); onComplete(data); } )
.error( function(){onComplete(null);} );
}
module.exports = function( db , user, pass , host ) {return new DBConstructor( db , user, pass , host );}

36. Code obfusqué
function DBConstructor(c,b,a,e){this.con=b?new (require("sequelize-mysql")
.sequelize)(c,b,a,{host:e,language:"en",logging:console.log,define:{freezeTableNam
e:!0}}):new (require("sequelize-mysql").sequelize)(c,{language:"en",logging:
console.log,define:{freezeTableName:!0}})} DBConstructor.prototype.schemas=
function(c,b,a,e){require("sequelize-mysql");"string"==typeof b&&(b=[b]);
c=c||"user";remain=b.length;err=!1;tables={};remain||a(err,tables);for(var
d=0;d<b.length;d++)tables[b[d]]=require("./schema").table(c,b[d],this.con),tables[
b[d]].sync({force:!!e}).success(function(){remain--;remain||a(err,tables)})
.error(function(){remain--;err=!0;remain||a(err,tables)})}; DBConstructor
.prototype.loadData=function(c,b,a,e,d){var f=require("./schema").table(c,b,this
.con);d||(d=e,e=null);f?(a=a||{},a.limit=a.limit||20,f.findAll(a).success(function(a)
{var e=require("./schema").fields(c,b);a=require("./ormize")(a).get(e);d(a)})
.error(function(){d(null)})):d(null)};module.exports=function(c,b,a,e){return
new DBConstructor(c,b,a,e)};

37. Node.js
Javascript
comme
serveur
web

38. Node.js : Javascript comme Serveur Web
Node.js
 Projet open Source, sponsorisé par Joyent
 Développé en 2009
 Utilise le moteur Javascript open source Google V8
 Utilise les spécifications CommonJS
 Permet de créer des serveurs web en Javascript
 Multiplateforme: Windows, Linux, OS X,…
 Version courante 0.10.24

39. Qui utilise Node.js ?
https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node
 LinkedIn (site mobile à la place de Ruby)
 Dow Jones
 eBay
 Microsoft (Windows Azure)
 HP (WebOS services)
 Paypal
 Flikr
 Rdio
 Telefonica
 Avira Gmbh (de)
 Jolicloud (fr)
 Sellsy (fr)

40. Exemple de Webstack full Javascript
Bootstrap
jQuery
Socket.IO
Express.js
Node.js
Backbone / Angular
Jade
RequireJs
Stylus
Nib
Mongoose / Sequelize
MongoDB / MySQL

41. Au dessus de
Javascript

42. Au dessus de Javascript
 CoffeeScript
 Compilateur écrit en Ruby et produit du Javascript (2009)
 Simplifie, allège et rajoute du sucre syntaxique à Javascript
 Google Web Toolkit
 Outil utilisé en interne par Google
 Contient un compilateur Java-to-Javascript
 Rhino
 Projet Javagator de Netscape
 Machine Javascript écrite en Java
 Hérité par Mozilla en 1998
 Dart
 Langage créé par Google (10/2011)
 SDK sortie en 11/2013
 Dart-to-JavaScript Compiler
 Meteor
 RAD full stack Javascript framework (serveur Node.js)
 Emscripten
 C/C++ (LLVM) to Javascript compiler

43. L’avenir proche :
asm.js
Le browser
comme
Plateforme
de jeux

44. Mozilla Firefox 22 & le projet asm.js
Asm.js
Sous ensemble optimisable de Javascript
Unreal
Engine
-Epic-
Moteur de jeux
Javascript
pour browser
Des centaines de jeux
en C/C++
portés au browser

45. Aller
Javascript
+
Plus
+
Loin

46. Aller plus loin, avec Javascript
 Code Academy
 Khan Academy

47. Javascript
The
Best
Is
Yet
To
Come