Javascript
Au-delà Du Langage

Par Dr Samir ROUABHI
rouabhi@gmail.com
Plan
Javascript

À Savoir
Avant de savoir
Un peu d’Histoire..

NCSA Mosaïc

Sun Microsystems

Netscape

Mocha
LiveScript

Java

Mozilla Foundation

Javascript

Orac...
Standards

 ECMA-262

6/1997

Dernière version ECMAScript 5.1, Javascript 1.9
Prochaine version ECMAScript 6, Javascript ...
Spécifications
 ECMA-262 : http://www.ecma








international.org/publications/files/ECMAST/Ecma-262.pdf
ECMA-3...
1998
Javascript : le tournant
Le tournant

 Spécifications du DOM Level 1

1/1998

 MS Internet Explorer 5.0

9/1998

Implémente XMLHttpRequest comme ...
Javascript
Ce qu’il ne fait plus
Une utilité de perdue..
Une utilité de perdue..

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

Une de p...
Javascript

Un langage
en quelques
mots…
En quelques mots..

 Langage de Script, Dynamique, Interprété
 Sensible à la casse

 Typage dynamique faible
 Orienté ...
Un langage & des mots

61 mots réservés:
abstract, boolean, break, byte, case, catch, char, class, co
nst, continue, debug...
Un langage & des mots

30 Mots réservés utilisés:
abstract, boolean, break, byte, case, catch, char, class, c
onst, contin...
Types
6 types natifs:
• string
• number
• boolean
• function
• object
• undefined
4 types prédéfinies:
• Array
• Date
• Re...
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()
...
Variables: toutes des booléens
!"Bonjour"
!!
!!
!!
!!
!!
!!
!!
!!
!!

"Beyond"
""
3
0
{}
null
[]
undefined
function(){}

f...
Variables: toutes des miettes
function f(){
var x = { name:"X" , value: 1 },
y = new Object({ name:"Y" , value:-2 });
retu...
Variables: Les fonctions, des objets de première classe

var sqare=function g(a){return a*a;}
console.log(typeof sqare) ->...
Les closures : au-delà de l’accessible
function Baz(initial) {
var compteur = initial || 0;
return {
plus:function() { ret...
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 ...
Javascript: Un langage objet par prototypes
function obj (a , n){
this.valeur = a||1;
this.pow = function(){return Math.po...
Javascript

Inside The Machine
Les Javascript Machines
Javascript engine + Layout engine
Mozilla Firefox
SpiderMonkey, TraceMonkey, JägerMonkey, OdinMonk...
La programmation par événements
La programmation en Environnement Mono-Thread

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

Chainage de fonctions :
function f(a, b, ca...
La programmation par événements
La programmation en Environnement Mono-Thread

Programmation évènementielle:
table.findAll...
Plateforme

de développement
Plateforme de développement
 Vanilla Javascript
 Frameworks & Librairies
 Génériques: jQuery, Prototype, Dojo Toolkit
...
Javascript en mode MVC
Backbone, Ember, Angular, SproutCore, Spine, Knockout,
Batman, Sammy, Cappuccino, Yahoo! Mojito,…
Backbone
Obfuscation du code

Google Closure Compiler (http://closure-compiler.appspot.com)
 Renomme les variables, comprime le co...
Code originel

function DBConstructor( db , user, pass , host ) {
if (!user) this.con = new (require('sequelize-mysql').se...
Code obfusqué
function DBConstructor(c,b,a,e){this.con=b?new (require("sequelize-mysql")
.sequelize)(c,b,a,{host:e,languag...
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 ...
Qui utilise Node.js ?

https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node

 LinkedIn (s...
Exemple de Webstack full Javascript

Bootstrap
jQuery

Socket.IO
Express.js
Node.js

Backbone / Angular

Jade

RequireJs

...
Au dessus de

Javascript
Au dessus de Javascript
 CoffeeScript
 Compilateur écrit en Ruby et produit du Javascript (2009)
 Simplifie, allège et ...
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 jeu...
Aller

Javascript

+
Plus
+

Loin
Aller plus loin, avec Javascript

 Code Academy

 Khan Academy
Javascript

The
Best
Is
Yet
To
Come
Upcoming SlideShare
Loading in …5
×

Présentation Javascript à l'ESI (Alger)

998 views
833 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
998
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
1
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Présentation Javascript à l'ESI (Alger)

  1. 1. Javascript Au-delà Du Langage Par Dr Samir ROUABHI rouabhi@gmail.com
  2. 2. Plan
  3. 3. Javascript À Savoir Avant de savoir
  4. 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. 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. 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. 7. 1998 Javascript : le tournant
  8. 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. 9. Javascript Ce qu’il ne fait plus
  10. 10. Une utilité de perdue..
  11. 11. Une utilité de perdue.. Validation de formulaires : Nom* : Prénom* : Date de naissance * : Email* : Enregistrer Une de perdue, dix de retrouvées
  12. 12. Javascript Un langage en quelques mots…
  13. 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. 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. 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. 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. 17. Variables: Duck typing function f(a){ var x="chaine"; x=1; console.log(a) } f(); -> undefined Typage dynamique faible
  18. 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. 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. 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. 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. 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. 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. 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. 25. Javascript Inside The Machine
  26. 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. 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. 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. 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. 30. Plateforme de développement
  31. 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. 32. Javascript en mode MVC Backbone, Ember, Angular, SproutCore, Spine, Knockout, Batman, Sammy, Cappuccino, Yahoo! Mojito,…
  33. 33. Backbone
  34. 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. 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. 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. 37. Node.js Javascript comme serveur web
  38. 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. 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. 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. 41. Au dessus de Javascript
  42. 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. 43. L’avenir proche : asm.js Le browser comme Plateforme de jeux
  44. 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. 45. Aller Javascript + Plus + Loin
  46. 46. Aller plus loin, avec Javascript  Code Academy  Khan Academy
  47. 47. Javascript The Best Is Yet To Come

×