Fondamentaux portée - contexte - function ms tech days

1,160 views
1,038 views

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total views
1,160
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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)

    ×