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 Netscap...
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)
Fondamentaux   portée - contexte - function ms tech days
Prochain SlideShare
Chargement dans…5
×

Fondamentaux portée - contexte - function ms tech days

1 591 vues

Publié le

Decouvrez les particularités de JavaScript qui vous aideront à débogguer sans craindre ce langage aujourd'hui indispensable.
- la portée des variables et comment ne pas polluer l'espace global
- comprendre le mot clé this
- les particularités des fonctions
- introduction aux namespaces
Loin de la théorie vous aurez des explications pratiques et des démos de code ainsi que les bonnes pratiques.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 591
Sur SlideShare
0
Issues des intégrations
0
Intégrations
56
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • 2/6/12
  • Fondamentaux portée - contexte - function ms tech days

    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); }}action(); // 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)

    ×