JavascriptLes fondamentaux   Jean-pierre VINCENT (indépendant)   Pierre lagarde (Microsoft)
Qui ça ?     Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick12 ans de WebConsultant, formateur, exper...
Pourquoi Javascript ?
Présent partout● Navigateur● Jeux Web (remplace Flash)● Mobile (Phonegap ...)● Télévisions● Serveur (Node.js, ...)● Softwa...
Mauvaise réputation
Mauvaise réputationparseInt(06); // 6parseInt(08); // 0      wftjs.com
Mauvaise réputationtypeof NaN // numberNaN === NaN // falsetypeof null // objectnull instanceof Object // false          w...
Mauvaise réputation(1.7976931348623157e+308 ===1.7976931348623158e+308 )// true!alert(111111111111111111111); //alerts 111...
APIs●    DOM (window.document)●    Node●    WinRT●    ...
Compliqué ?
Différent !
Historique court●  Né pendant la guerre (95)●  En quelques semaines●  Influence Erlang, Lisp, Python, Askell    IE et Nets...
Evolution● EcmaScript 5● Harmony● EcmaScript.Next● EcmaScript.Next.Next
En attendant ...   EcmaScript 3
ObjectifsPortée des variables (var + function)●Contexte (this)●Function()●
Portée des variables 1 closure = 1 portéeClosure = function() {    PORTÉE}
Portée des variablestest1 = function() {     var x = 1;    console.log(x); // 1}();console.log(x); // undefined
Portée des variablestest1 = function() {     var x = 1;     test2 = function() {     var x = 2;    console.log(x); // 2   ...
Portée des variablestest1 = function() {     var x = 1;     test2 = function() {     var x = 2;    console.log(x); // 2   ...
Portée des variablestest1 = function() {     var x = 1;     test2 = function() {     var x = 2;     test3 = function() {  ...
Démo « porté et boucle »
Morales1 Toujours utiliser var
Application pratiqueDémo « module pattern »
Créer un scope1/3 : fonction anonyme function() {    var privateVariable = true;    console.log( privateVariable ); }
Créer un scope1/3 : fonction anonyme function() {    var privateVariable = true;    console.log( privateVariable ); }=> pa...
Créer un scope2/3 : parler gentiment au parser( function() {    var privateVariable = true;    console.log( privateVariabl...
Créer un scope3/3 : auto-exécution( function() {     var privateVariable = true;     console.log( privateVariable );})()=>...
Application pratique(function() {     var privateVariable = true;     window.init = function() {          console.log( pri...
Morales1 Toujours utiliser var2 Utiliser le pattern module
Contextethis = contexte dexécution
ContexteDémo « contexte »
Contexte - DOMmyClass = function() {     this.id = myClass;     this.getId = function() {          console.log(this.id);  ...
Contexte – fix portéemyClass = function() {     this.id = myClass;     var me = this;     this.getId = function() {       ...
Contexte – fix portéeDémo du fix
Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte
Function()Déclarations●  function action() {}action = function() {}●
Function()Déclarations●  function action() {}action = function() {}●Exécution● action();
Function()Un petit jeu ?
function action()Le hoisting, cest pratiqueaction(); // truefunction action() {    console.log(true);}
function action()Le hoisting, cest dangereuxif( 1 === 1) {  function action() {    console.log(1 === 1);  }} else {  funct...
function action()Implicitement sensible à la portée(function() {     function action() {          console.log(action);    ...
var action = function()Plus explicite donc moins dangereux
Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec varaction ...
Avant la Démo « mise en pratique »     Utilisation des     ●écrasements de fonction
Utilisation des     écrasements de fonctionvar bind = function( el, ev, callback) {  if(document.body.attachEvent){       ...
return function()var bind =function( el, ev, callback) {  if(document.body.attachEvent)     return function(el, ev, callba...
Démo « mise en pratique »Problème : écouter la liste déléments
Teasing : 17h30 amphi Havane  OOJS, bonnes pratiques...
ConclusionJavascript est différent, apprenez le
Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynickRDV maintenant :stand Generative Objects(N° 55 à côté HP)
Introduction à JavaScript
Prochain SlideShare
Chargement dans…5
×

Introduction à JavaScript

631 vues

Publié le

JavaScript est désormais omniprésent et rend possible l'écriture d'applications complexes et riches. Mais il est souvent mal connu des développeurs orientés objets classiques comme ceux pratiquant le C#, le Java ou le PHP. Cette session passera donc en revue les bases du langage JavaScript, ses spécificités comme les portées, les closures, le this différent de ce que vous pouvez connaître. Bref, vous verrez qu'il y a des pièges à éviter et qu'il ne faut pas négliger JavaScript. Il est très puissant mais potentiellement différent de ce vous connaissez déjà. Venez apprendre à le respecter avant de le maitriser!

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Introduction à JavaScript

  1. 1. JavascriptLes fondamentaux Jean-pierre VINCENT (indépendant) Pierre lagarde (Microsoft)
  2. 2. Qui ça ? Jean-pierre VINCENTbraincracking.org (veille techno)@theystolemynick12 ans de WebConsultant, formateur, expertise
  3. 3. Pourquoi Javascript ?
  4. 4. Présent partout● Navigateur● Jeux Web (remplace Flash)● Mobile (Phonegap ...)● Télévisions● Serveur (Node.js, ...)● Software (Chromeless, ...)● OS (JoliCloud, WebOS...)● Windows 8 !
  5. 5. Mauvaise réputation
  6. 6. Mauvaise réputationparseInt(06); // 6parseInt(08); // 0 wftjs.com
  7. 7. Mauvaise réputationtypeof NaN // numberNaN === NaN // falsetypeof null // objectnull instanceof Object // false wftjs.com
  8. 8. Mauvaise réputation(1.7976931348623157e+308 ===1.7976931348623158e+308 )// true!alert(111111111111111111111); //alerts 1111111111111111100009999999999999999 //=> 10000000000000000 wftjs.com
  9. 9. APIs● DOM (window.document)● Node● WinRT● ...
  10. 10. Compliqué ?
  11. 11. Différent !
  12. 12. Historique court● Né pendant la guerre (95)● En quelques semaines● Influence Erlang, Lisp, Python, Askell IE et Netscape daccord pour EcmaScript 3
  13. 13. Evolution● EcmaScript 5● Harmony● EcmaScript.Next● EcmaScript.Next.Next
  14. 14. En attendant ... EcmaScript 3
  15. 15. ObjectifsPortée des variables (var + function)●Contexte (this)●Function()●
  16. 16. Portée des variables 1 closure = 1 portéeClosure = function() { PORTÉE}
  17. 17. Portée des variablestest1 = function() { var x = 1; console.log(x); // 1}();console.log(x); // undefined
  18. 18. Portée des variablestest1 = function() { var x = 1; test2 = function() { var x = 2; console.log(x); // 2 }(); console.log(x); // ?}();console.log(x); // undefined
  19. 19. Portée des variablestest1 = function() { var x = 1; test2 = function() { var x = 2; console.log(x); // 2 }(); console.log(x); // 1}();console.log(x); // undefined
  20. 20. Portée des variablestest1 = function() { var x = 1; test2 = function() { var x = 2; test3 = function() { console.log(x); // 2 }(); console.log(x); // 2 }(); console.log(x); // 1}();console.log(x); // undefined
  21. 21. Démo « porté et boucle »
  22. 22. Morales1 Toujours utiliser var
  23. 23. Application pratiqueDémo « module pattern »
  24. 24. Créer un scope1/3 : fonction anonyme function() { var privateVariable = true; console.log( privateVariable ); }
  25. 25. Créer un scope1/3 : fonction anonyme function() { var privateVariable = true; console.log( privateVariable ); }=> parse error
  26. 26. Créer un scope2/3 : parler gentiment au parser( function() { var privateVariable = true; console.log( privateVariable );})=> rien
  27. 27. Créer un scope3/3 : auto-exécution( function() { var privateVariable = true; console.log( privateVariable );})()=> true
  28. 28. Application pratique(function() { var privateVariable = true; window.init = function() { console.log( privateVariable ); }}())init(); // trueconsole.log(privateVariable);//undefined
  29. 29. Morales1 Toujours utiliser var2 Utiliser le pattern module
  30. 30. Contextethis = contexte dexécution
  31. 31. ContexteDémo « contexte »
  32. 32. Contexte - DOMmyClass = function() { this.id = myClass; this.getId = function() { console.log(this.id); };};myObject = new myClass();document.body.onclick = myObject.getId;// document.body.id
  33. 33. Contexte – fix portéemyClass = function() { this.id = myClass; var me = this; this.getId = function() { console.log(me.id); };};myObject = myClass();document.body.onclick = myObject.action;// myClass
  34. 34. Contexte – fix portéeDémo du fix
  35. 35. Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte
  36. 36. Function()Déclarations● function action() {}action = function() {}●
  37. 37. Function()Déclarations● function action() {}action = function() {}●Exécution● action();
  38. 38. Function()Un petit jeu ?
  39. 39. function action()Le hoisting, cest pratiqueaction(); // truefunction action() { console.log(true);}
  40. 40. function action()Le hoisting, cest dangereuxif( 1 === 1) { function action() { console.log(1 === 1); }} else { function action() { console.log(1 !== 1); }}
  41. 41. function action()Implicitement sensible à la portée(function() { function action() { console.log(action); }}())action(); // undefined
  42. 42. var action = function()Plus explicite donc moins dangereux
  43. 43. Morales1 Toujours utiliser var2 Utiliser le pattern module3 Verrouiller le contexte4 déclarer ses fonction avec varaction = function() { }
  44. 44. Avant la Démo « mise en pratique » Utilisation des ●écrasements de fonction
  45. 45. Utilisation des écrasements de fonctionvar bind = function( el, ev, callback) { if(document.body.attachEvent){ el.attachEvent(on+ev, callback); } else { el.addEventListener( ev, callback); }}; Le test est fait à chaque exécution
  46. 46. return function()var bind =function( el, ev, callback) { if(document.body.attachEvent) return function(el, ev, callback) {element.attachEvent(on+event, callback); }; else return function(el, ev, callback) { el.addEventListener( ev, callback); };}();
  47. 47. Démo « mise en pratique »Problème : écouter la liste déléments
  48. 48. Teasing : 17h30 amphi Havane OOJS, bonnes pratiques...
  49. 49. ConclusionJavascript est différent, apprenez le
  50. 50. Questions ?Jean-pierre VINCENTbraincracking.org@theystolemynickRDV maintenant :stand Generative Objects(N° 55 à côté HP)

×