Successfully reported this slideshow.
Your SlideShare is downloading. ×

Guide javascript

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 140 Ad

Guide javascript

Download to read offline

Présentation donnée au Breizhcamp en juin 2012, il s'agit d'un guide de découverte de JavaScript qui insiste sur les piège du langage pour inciter les gens à apprendre JavaScript avant de réaliser des applications.

Présentation donnée au Breizhcamp en juin 2012, il s'agit d'un guide de découverte de JavaScript qui insiste sur les piège du langage pour inciter les gens à apprendre JavaScript avant de réaliser des applications.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Guide javascript (20)

Advertisement

Recently uploaded (20)

Guide javascript

  1. 1. Guide du développeur au pays du JavaScript Christophe Jollivet
  2. 2. Christophe Jollivet • Neurobiologiste • Informaticien • Homme de communauté • @jollivetc
  3. 3. Sondages
  4. 4. Atwood Law • «Any application that can be written in JavaScript, will eventually be written in JavaScript» • http://www.codinghorror.com/blog/ 2007/07/the-principle-of-least-power.html
  5. 5. Histoire
  6. 6. Histoire
  7. 7. Histoire
  8. 8. Histoire
  9. 9. Histoire
  10. 10. Histoire
  11. 11. • Erreur en ligne XXX
  12. 12. • Erreur en ligne XXX • Cela fait un moment que c’est le bazar mais là je ne m’en sors plus
  13. 13. La révélation
  14. 14. La révélation • Projet en HTML 5 • De vrais développeurs JavaScript • Des ateliers
  15. 15. «JavaScript is the only language that people feel they don’t need to learn to use it» Doug Crockford
  16. 16. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
  17. 17. L’outillage
  18. 18. Navigateur • Libre choix • Outillage varie selon le navigateur
  19. 19. Debugger • Points d’arrêts • Inspection de variables • Console
  20. 20. IDE • Editeur de texte • IDE
  21. 21. Langage
  22. 22. Le langage • Types / Syntaxe • Scope • Object et héritage
  23. 23. Types
  24. 24. Types • Faiblement typé • number, string, boolean, null, undefined • Object, function
  25. 25. typeof
  26. 26. typeof
  27. 27. typeof
  28. 28. typeof
  29. 29. Objet
  30. 30. Objet • Container de propriétés avec un nom et une valeur
  31. 31. Objet • Container de propriétés avec un nom et une valeur • nom est une string y compris ""
  32. 32. Objet • Container de propriétés avec un nom et une valeur • nom est une string y compris "" • propriété est n’importe quelle valeur sauf undefined
  33. 33. Déclaration objet
  34. 34. Déclaration objet
  35. 35. Déclaration objet
  36. 36. Déclaration objet
  37. 37. Déclaration objet
  38. 38. Accès aux valeurs
  39. 39. Fonction
  40. 40. Fonction
  41. 41. Arguments
  42. 42. Arguments
  43. 43. Arguments • Il n’y a pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas
  44. 44. Arguments • Il n’y a pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas • arguments contient la liste des arguments
  45. 45. Arguments
  46. 46. apply • Permet l’invocation d’une fonction en lui passant un contexte et des paramètres
  47. 47. Apply
  48. 48. Coercition de type
  49. 49. Coercition de type • Forcer le type d’une variable
  50. 50. Coercition de type • Forcer le type d’une variable • == fait la coercition de type
  51. 51. Coercition de type • Forcer le type d’une variable • == fait la coercition de type • === ne fait pas la coercition de type : évaluation de type
  52. 52. Coercition de type • '1' ==1 TRUE • '1'===1 FALSE
  53. 53. Coercition de type
  54. 54. Coercition de type • false == 'false' FALSE
  55. 55. Coercition de type • false == 'false' FALSE • false == '0' TRUE
  56. 56. Coercition de type • false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE
  57. 57. Coercition de type • false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE • ",,," == new Array(4) TRUE
  58. 58. Coercition de type • false == undefined FALSE • false == null FALSE • null == undefined TRUE
  59. 59. Coercition de type
  60. 60. Coercition de type • if( foo === null || foo === undefined )
  61. 61. Coercition de type • if( foo === null || foo === undefined ) • if( foo == null )
  62. 62. Coercition type (bonus)
  63. 63. Coercition type (bonus) • foo=+foo
  64. 64. Coercition type (bonus) • foo=+foo • foo = parseInt(foo)
  65. 65. Coercition type (bonus) • foo=+foo • foo = parseInt(foo) • foo = parseFloat(foo)
  66. 66. Coercition et transitivité
  67. 67. Coercition et transitivité • 0 =='' TRUE
  68. 68. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE
  69. 69. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE • ''=='0'
  70. 70. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE • ''=='0' FALSE
  71. 71. Piège
  72. 72. Truthy et Falsy
  73. 73. Truthy et Falsy • "foo" ou 1 sont TRUE
  74. 74. Truthy et Falsy • "foo" ou 1 sont TRUE • "", 0, null, undefined, NaN, void sont FALSE
  75. 75. Truthy et Falsy • "foo" ou 1 sont TRUE • "", 0, null, undefined, NaN, void sont FALSE • if( array.length>0 ) équivalent à if( array.length )
  76. 76. Truthy et Falsy • "foo" ou 1 sont TRUE • "", 0, null, undefined, NaN, void sont FALSE • if( array.length>0 ) équivalent à if( array.length ) • if( string ) équivalent à if( string !== "" )
  77. 77. Valeur par défaut
  78. 78. Appel sécurisé
  79. 79. Point virgule
  80. 80. Point virgule • Séparation d’expression
  81. 81. Point virgule • Séparation d’expression • Pas toujours obligatoire
  82. 82. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification
  83. 83. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification • Grand débat sur quand il est nécessaire
  84. 84. Point virgule https://github.com/twitter/bootstrap/issues/3057
  85. 85. Point virgule
  86. 86. Point virgule
  87. 87. Scope
  88. 88. Scope
  89. 89. Scope • Syntaxe à « la C » avec bloc
  90. 90. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction
  91. 91. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var»
  92. 92. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var» • /! déclaration automatique
  93. 93. Déclaration
  94. 94. Déclaration
  95. 95. Hoisting • Déplace les déclarations en tête du bloc
  96. 96. Hoisting
  97. 97. Hoisting
  98. 98. Objet et héritage
  99. 99. Création d’objet Forme littérale
  100. 100. Création d’objet Constructeur
  101. 101. Création d’objet Piège
  102. 102. Création d’objet Piège Si pas de new -> this du constructeur est «global», pas d’erreur ou de warning !
  103. 103. Problème unRectangle anotherRectangle longueur longueur largeur largeur surface surface
  104. 104. Problème Occupation mémoire unRectangle anotherRectangle longueur longueur largeur largeur surface surface
  105. 105. Héritage par prototype • Un objet hérite directement d’un autre objet, il n’y a pas de notion de classe • On place les objets communs dans le prototype pour la mémoire
  106. 106. Création d’objet
  107. 107. Solution unRectangle anotherRectangle longueur longueur largeur largeur surface Prototype
  108. 108. Closure • Une fonction objet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a été créée (contexte)
  109. 109. Closure
  110. 110. Closure •Pollution de Global •Risque de collision de nom •names est modifiable
  111. 111. Closure
  112. 112. Closure •Lent car construction de names à chaque appel
  113. 113. Closure
  114. 114. Closure
  115. 115. Closure
  116. 116. Framework
  117. 117. Frameworks
  118. 118. Frameworks
  119. 119. http://addyosmani.github.com/todomvc/
  120. 120. Frameworks • Fonctionnalités diverses • binding • routing • templating • ......
  121. 121. Frameworks • Backbone • KnockoutJS • AngularJS • ember.js • Meteor
  122. 122. Supplément
  123. 123. Supplément • Utilisation de lib
  124. 124. Supplément • Utilisation de lib • Dépendance / AMD
  125. 125. Supplément • Utilisation de lib • Dépendance / AMD • Minification
  126. 126. Supplément • Utilisation de lib • Dépendance / AMD • Minification • CDN
  127. 127. Tests • QUnit • Jasmine • JSTest
  128. 128. Qualité • JsLint • attention cela fait mal. • utiliser dès le début avant les mauvaises habitudes ! • Sonar
  129. 129. Questions ?
  130. 130. Creative Commons Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). Noncommercial — You may not use this work for commercial purposes. Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Javascript est utilisable du scientifique au non développeur. Pas besoin de compilateur, on le mets dans un page HTML et l’affiche directement.\nMauvaise réputation a cause de l’API DOM qui varie entre les navigateurs. Les libs JS simplifie le truc\n
  • good parts 176 p\ndefinitive guide 1100 p\n\n\n
  • \n
  • \n
  • \n
  • \n
  • JSFiddle Cloud9\n
  • \n
  • \n
  • \n
  • number string boolean null undefined sont types simple ie objet avec methodes mais immutable\nle reste est objet\n\nObjet en js est collection mutable à clé\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Déclaration littérale\n
  • Déclaration littérale\n
  • Déclaration littérale\n
  • \n
  • Noter le point virgule à la fin de la deuxième forme.\ndifference de couleur liée au global fonction ou global variable.\n\n\n
  • le second affiche «Hello undefined»\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • wrongName -> renvoie de undefined\nnull == undefined\n2 erreurs qui s’annulent !\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Quand le compilateur croise erreur cherche retour à la ligne et tente insertion point virgule\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • noté le changement de couleur dans IntelliJ\n
  • \n
  • Affichage de 10\n
  • \n
  • \n
  • \n
  • \n
  • Rectangle est en fond orange parce que IntelliJ a vu le constructeur sans new.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • names est Globlal :\n- pollution - collision\n- tout le monde peut modifier\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • lib masque les différences entre les navigateurs\n
  • lib masque les différences entre les navigateurs\n
  • lib masque les différences entre les navigateurs\n
  • lib masque les différences entre les navigateurs\n
  • QUnit utiliser par JQuery\nJasmine intégration avec continuous Build\nJSTest support dans plugin sonar\n
  • \n
  • \n
  • \n

×