SlideShare une entreprise Scribd logo

Présentation Javascript à l'ESI (Alger)

Dr Samir A. ROUABHI
Dr Samir A. ROUABHI
Dr Samir A. ROUABHIFounder, à Cloudestin Business Software

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

Présentation Javascript à l'ESI (Alger)

1  sur  47
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

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/
Publicité

Recommandé

Rouabhi algiers meetup
Rouabhi algiers meetupRouabhi algiers meetup
Rouabhi algiers meetupSamir Rouabhi
 
GPGPU facile avec JavaCL, et trivial avec ScalaCL !
GPGPU facile avec JavaCL, et trivial avec ScalaCL !GPGPU facile avec JavaCL, et trivial avec ScalaCL !
GPGPU facile avec JavaCL, et trivial avec ScalaCL !ochafik
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6Julien CROUZET
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieurFredy Fadel
 

Contenu connexe

Tendances

Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)Julien CROUZET
 
Perf ug comment ne plus rajouter de ram a vos jvm sans savoir pourquoi
Perf ug   comment ne plus rajouter de ram a vos jvm sans savoir pourquoiPerf ug   comment ne plus rajouter de ram a vos jvm sans savoir pourquoi
Perf ug comment ne plus rajouter de ram a vos jvm sans savoir pourquoipkernevez
 
Perfug Guide de survie du développeur dans une application Java qui rame
Perfug Guide de survie du développeur dans une application Java qui ramePerfug Guide de survie du développeur dans une application Java qui rame
Perfug Guide de survie du développeur dans une application Java qui ramebleporini
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoftdavrous
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptMicrosoft
 
C++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in ParisC++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in Parischristophep21
 
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Microsoft
 
Les Promises en Javascript
Les Promises en JavascriptLes Promises en Javascript
Les Promises en JavascriptBenoit Zohar
 
Java version 11 - les 9 nouveautes
Java version 11 -  les 9 nouveautesJava version 11 -  les 9 nouveautes
Java version 11 - les 9 nouveautesAbdenour Bouateli
 
Voxxdays luxembourg 2016 retours java 8
Voxxdays luxembourg 2016 retours java 8Voxxdays luxembourg 2016 retours java 8
Voxxdays luxembourg 2016 retours java 8Jean-Michel Doudoux
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEBAbbes Rharrab
 
Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10Jean-Michel Doudoux
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Julien Jakubowski
 
Breizhcamp : Guide de survie du développeur dans une application (Java) qui rame
Breizhcamp : Guide de survie du développeur dans une application (Java) qui rameBreizhcamp : Guide de survie du développeur dans une application (Java) qui rame
Breizhcamp : Guide de survie du développeur dans une application (Java) qui ramebleporini
 

Tendances (19)

Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Perf ug comment ne plus rajouter de ram a vos jvm sans savoir pourquoi
Perf ug   comment ne plus rajouter de ram a vos jvm sans savoir pourquoiPerf ug   comment ne plus rajouter de ram a vos jvm sans savoir pourquoi
Perf ug comment ne plus rajouter de ram a vos jvm sans savoir pourquoi
 
Perfug Guide de survie du développeur dans une application Java qui rame
Perfug Guide de survie du développeur dans une application Java qui ramePerfug Guide de survie du développeur dans une application Java qui rame
Perfug Guide de survie du développeur dans une application Java qui rame
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
La programmation fonctionnelle en javascript / PF
La programmation fonctionnelle en javascript / PFLa programmation fonctionnelle en javascript / PF
La programmation fonctionnelle en javascript / PF
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
C++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in ParisC++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in Paris
 
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
 
Les Promises en Javascript
Les Promises en JavascriptLes Promises en Javascript
Les Promises en Javascript
 
Java version 11 - les 9 nouveautes
Java version 11 -  les 9 nouveautesJava version 11 -  les 9 nouveautes
Java version 11 - les 9 nouveautes
 
Voxxdays luxembourg 2016 retours java 8
Voxxdays luxembourg 2016 retours java 8Voxxdays luxembourg 2016 retours java 8
Voxxdays luxembourg 2016 retours java 8
 
Java 11 to 17 : What's new !?
Java 11 to 17 : What's new !?Java 11 to 17 : What's new !?
Java 11 to 17 : What's new !?
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 
Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
 
Breizhcamp : Guide de survie du développeur dans une application (Java) qui rame
Breizhcamp : Guide de survie du développeur dans une application (Java) qui rameBreizhcamp : Guide de survie du développeur dans une application (Java) qui rame
Breizhcamp : Guide de survie du développeur dans une application (Java) qui rame
 

En vedette

En vedette (19)

Геофак БГУ
Геофак БГУГеофак БГУ
Геофак БГУ
 
ADP Background
ADP Background ADP Background
ADP Background
 
Food security cansa december2013_ram
Food security cansa december2013_ramFood security cansa december2013_ram
Food security cansa december2013_ram
 
12 Benefits of Drinking Oolong Tea
12 Benefits of Drinking Oolong Tea12 Benefits of Drinking Oolong Tea
12 Benefits of Drinking Oolong Tea
 
Adaptation Landscape
Adaptation LandscapeAdaptation Landscape
Adaptation Landscape
 
Climate Finance from COP21
Climate Finance from COP21Climate Finance from COP21
Climate Finance from COP21
 
Αγγλία
ΑγγλίαΑγγλία
Αγγλία
 
Trailer analysis template_micro_macro
Trailer analysis template_micro_macroTrailer analysis template_micro_macro
Trailer analysis template_micro_macro
 
Poster anlaysis
Poster anlaysisPoster anlaysis
Poster anlaysis
 
A2 Media Studies Evaluation
A2 Media Studies EvaluationA2 Media Studies Evaluation
A2 Media Studies Evaluation
 
Adaptation actions in bangadesh
Adaptation actions in bangadeshAdaptation actions in bangadesh
Adaptation actions in bangadesh
 
Presentation on sv workshop
Presentation on sv workshopPresentation on sv workshop
Presentation on sv workshop
 
Conventions of a magazine front cover
Conventions of a magazine front coverConventions of a magazine front cover
Conventions of a magazine front cover
 
Cast Choices
Cast ChoicesCast Choices
Cast Choices
 
NAPs in South Asia
NAPs in South Asia NAPs in South Asia
NAPs in South Asia
 
Presentation18
Presentation18Presentation18
Presentation18
 
Fast stone. захват экрана
Fast stone. захват экранаFast stone. захват экрана
Fast stone. захват экрана
 
Cyanobacteria, microcystins and cylindrospermopsin in public drinking supply ...
Cyanobacteria, microcystins and cylindrospermopsin in public drinking supply ...Cyanobacteria, microcystins and cylindrospermopsin in public drinking supply ...
Cyanobacteria, microcystins and cylindrospermopsin in public drinking supply ...
 
Diwali Gift Ideas
Diwali Gift IdeasDiwali Gift Ideas
Diwali Gift Ideas
 

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

GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture zaghir
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJean-Pierre Vincent
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech daysJean-Pierre Vincent
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Ruau Mickael
 
Javascript : que fait ce code?
Javascript : que fait ce code?Javascript : que fait ce code?
Javascript : que fait ce code?Ruau Mickael
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovyguest6e3bed
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation GroovyJS Bournival
 
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Normandy JUG
 
Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptMicrosoft Technet France
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mareValtech
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech daysJean-Pierre Vincent
 
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Loic Yon
 
Retours Devoxx France 2016
Retours Devoxx France 2016Retours Devoxx France 2016
Retours Devoxx France 2016Antoine Rey
 
Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanMicrosoft
 
Future of java script web version
Future of java script web versionFuture of java script web version
Future of java script web versionSébastien Pertus
 

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

Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
The future of JavaScript
The future of JavaScriptThe future of JavaScript
The future of JavaScript
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
 
Javascript : que fait ce code?
Javascript : que fait ce code?Javascript : que fait ce code?
Javascript : que fait ce code?
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
 
Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
 
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
 
Retours Devoxx France 2016
Retours Devoxx France 2016Retours Devoxx France 2016
Retours Devoxx France 2016
 
Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet Spartan
 
Spark - Ippevent 19-02-2015
Spark - Ippevent 19-02-2015Spark - Ippevent 19-02-2015
Spark - Ippevent 19-02-2015
 
Future of java script web version
Future of java script web versionFuture of java script web version
Future of java script web version
 

Plus de Dr Samir A. ROUABHI

10 innovations qui bouleversent le e-commerce
10 innovations qui bouleversent le e-commerce10 innovations qui bouleversent le e-commerce
10 innovations qui bouleversent le e-commerceDr Samir A. ROUABHI
 
Effectuation : comment les entrepreneurs pensent et agissent
Effectuation : comment les entrepreneurs pensent et agissentEffectuation : comment les entrepreneurs pensent et agissent
Effectuation : comment les entrepreneurs pensent et agissentDr Samir A. ROUABHI
 
Crossing The Chasm : l'Innovation de Rupture à la conquête du marché
Crossing The Chasm : l'Innovation de Rupture à la conquête du marchéCrossing The Chasm : l'Innovation de Rupture à la conquête du marché
Crossing The Chasm : l'Innovation de Rupture à la conquête du marchéDr Samir A. ROUABHI
 
Démarches entrepreneuriales : se lancer avec succès
Démarches entrepreneuriales : se lancer avec succèsDémarches entrepreneuriales : se lancer avec succès
Démarches entrepreneuriales : se lancer avec succèsDr Samir A. ROUABHI
 

Plus de Dr Samir A. ROUABHI (7)

10 innovations qui bouleversent le e-commerce
10 innovations qui bouleversent le e-commerce10 innovations qui bouleversent le e-commerce
10 innovations qui bouleversent le e-commerce
 
Effectuation : comment les entrepreneurs pensent et agissent
Effectuation : comment les entrepreneurs pensent et agissentEffectuation : comment les entrepreneurs pensent et agissent
Effectuation : comment les entrepreneurs pensent et agissent
 
Crossing The Chasm : l'Innovation de Rupture à la conquête du marché
Crossing The Chasm : l'Innovation de Rupture à la conquête du marchéCrossing The Chasm : l'Innovation de Rupture à la conquête du marché
Crossing The Chasm : l'Innovation de Rupture à la conquête du marché
 
Démarches entrepreneuriales : se lancer avec succès
Démarches entrepreneuriales : se lancer avec succèsDémarches entrepreneuriales : se lancer avec succès
Démarches entrepreneuriales : se lancer avec succès
 
L'Innovation de Rupture
L'Innovation de RuptureL'Innovation de Rupture
L'Innovation de Rupture
 
Lean Startup
Lean StartupLean Startup
Lean Startup
 
Business Model Canvas
Business Model CanvasBusiness Model Canvas
Business Model Canvas
 

Dernier

Wave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfWave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfDomotica daVinci
 
Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by NijiNiji
 
JDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfJDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfAlexandre Contat
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualDomotica daVinci
 
Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)benj_2
 
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdfConteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdfHamida Rebai Trabelsi
 

Dernier (6)

Wave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfWave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdf
 
Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by Niji
 
JDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfJDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdf
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave Manual
 
Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)
 
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdfConteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
 

Présentation Javascript à l'ESI (Alger)

  • 1. Javascript Au-delà Du Langage Par Dr Samir ROUABHI rouabhi@gmail.com
  • 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/
  • 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
  • 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
  • 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
  • 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){...} );
  • 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,…
  • 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)};
  • 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
  • 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
  • 46. Aller plus loin, avec Javascript  Code Academy  Khan Academy