Présentation Javascript à l'ESI (Alger)

Javascript
Au-delà Du Langage

Par Dr Samir ROUABHI
rouabhi@gmail.com

Javascript

À Savoir
Avant de savoir

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

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

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/

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

Javascript
Ce qu’il ne fait plus

Une utilité de perdue..

Validation de formulaires :
Nom* :
Prénom* :
Date de naissance * :
Email* :
Enregistrer

Une de perdue, dix de retrouvées

Javascript

Un langage
en quelques
mots…

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

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

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

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")

Variables: Duck typing

function f(a){
var x="chaine";
x=1;
console.log(a)
}
f();

-> undefined

Typage dynamique faible

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 !!

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;
}

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

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

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

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

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

Javascript

Inside The Machine

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

La programmation par événements
La programmation en Environnement Mono-Thread

Fonction bloquante :
for(var i=0;i<1000;i++) console.log(i);


Chainage de fonctions :
function f(a, b, callback) {
|
callback();
}
f(1,2, function(){...});


Programmation évènementielle:
table.findAll( {where:{login:"user"}} )
.success( function(data){...} )
.error( function(error){...} );

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

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

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.

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 );}

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)};

Node.js

Javascript
comme
serveur
web

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

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)

Exemple de Webstack full Javascript

Bootstrap
jQuery

Socket.IO
Express.js
Node.js

Backbone / Angular

Jade

RequireJs

Stylus

Nib

Mongoose / Sequelize
MongoDB / MySQL

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

L’avenir proche :

asm.js

Le browser
comme
Plateforme
de jeux

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

Aller

Javascript

+
Plus
+

Loin

Aller plus loin, avec Javascript

 Code Academy

 Khan Academy

Javascript

The
Best
Is
Yet
To
Come

Présentation Javascript à l'ESI (Alger)

Contenu connexe

Tendances

En vedette

Similaire à Présentation Javascript à l'ESI (Alger)

Plus de Dr Samir A. ROUABHI

Présentation Javascript à l'ESI (Alger)