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