Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Guide du développeurau pays du JavaScript      Christophe Jollivet
Christophe Jollivet• Neurobiologiste• Informaticien• Homme de communauté• @jollivetc
Sondages
Atwood Law• «Any application that can be written in  JavaScript, will eventually be written in  JavaScript»• http://www.co...
Histoire
Histoire
Histoire
Histoire
Histoire
Histoire
• Erreur en ligne XXX
• Erreur en ligne XXX• Cela fait un moment que c’est le bazar mais  là je ne m’en sors plus
La révélation
La révélation• Projet en HTML 5• De vrais développeurs JavaScript• Des ateliers
«JavaScript is the onlylanguage that people feel theydon’t need to learn to use it»Doug Crockford
http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
L’outillage
Navigateur• Libre choix• Outillage varie selon le navigateur
Debugger• Points d’arrêts• Inspection de variables• Console
IDE• Editeur de texte• IDE
Langage
Le langage• Types / Syntaxe• Scope• Object et héritage
Types
Types• Faiblement typé• number, string, boolean, null, undefined• Object, function
typeof
typeof
typeof
typeof
Objet
Objet• Container de propriétés avec un nom et  une valeur
Objet• Container de propriétés avec un nom et  une valeur• nom est une string y compris ""
Objet• Container de propriétés avec un nom et  une valeur• nom est une string y compris ""• propriété est n’importe quelle...
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Accès aux valeurs
Fonction
Fonction
Arguments
Arguments
Arguments• Il n’y a pas d’erreur si le nombre d’arguments  et paramètres ne correspondent pas
Arguments• Il n’y a pas d’erreur si le nombre d’arguments  et paramètres ne correspondent pas• arguments contient la liste...
Arguments
apply• Permet l’invocation d’une fonction en lui  passant un contexte et des paramètres
Apply
Coercition de type
Coercition de type• Forcer le type d’une variable
Coercition de type• Forcer le type d’une variable• == fait la coercition de type
Coercition de type• Forcer le type d’une variable• == fait la coercition de type• === ne fait pas la coercition de type : ...
Coercition de type• 1 ==1   TRUE• 1===1   FALSE
Coercition de type
Coercition de type• false == false   FALSE
Coercition de type• false == false   FALSE• false == 0       TRUE
Coercition de type• false == false   FALSE• false == 0       TRUE• " trn " == 0    TRUE
Coercition de type• false == false        FALSE• false == 0            TRUE• " trn " == 0         TRUE• ",,," == new Array...
Coercition de type• false == undefined   FALSE• false == null       FALSE• null == undefined    TRUE
Coercition de type
Coercition de type• if( foo === null || foo === undefined )
Coercition de type• if( foo === null || foo === undefined )• if( foo == null )
Coercition type   (bonus)
Coercition type        (bonus)• foo=+foo
Coercition type         (bonus)• foo=+foo• foo = parseInt(foo)
Coercition type         (bonus)• foo=+foo• foo = parseInt(foo)• foo = parseFloat(foo)
Coercition et transitivité
Coercition et       transitivité• 0 ==   TRUE
Coercition et       transitivité• 0 ==    TRUE• 0 ==0   TRUE
Coercition et       transitivité• 0 ==    TRUE• 0 ==0   TRUE• ==0
Coercition et       transitivité• 0 ==    TRUE• 0 ==0   TRUE• ==0   FALSE
Piège
Truthy et Falsy
Truthy et Falsy• "foo" ou 1 sont TRUE
Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE
Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE• if( array.length>0 ) équivalent à  if(...
Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE• if( array.length>0 ) équivalent à  if(...
Valeur par défaut
Appel sécurisé
Point virgule
Point virgule• Séparation d’expression
Point virgule• Séparation d’expression• Pas toujours obligatoire
Point virgule• Séparation d’expression• Pas toujours obligatoire• Pose problème dans la minification
Point virgule• Séparation d’expression• Pas toujours obligatoire• Pose problème dans la minification• Grand débat sur quand...
Point virgulehttps://github.com/twitter/bootstrap/issues/3057
Point virgule
Point virgule
Scope
Scope
Scope• Syntaxe à « la C » avec bloc
Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction
Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction• Déclaration de variable avec «var»
Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction• Déclaration de variable avec «var»• /! déclaration automati...
Déclaration
Déclaration
Hoisting• Déplace les déclarations en tête du bloc
Hoisting
Hoisting
Objet et héritage
Création d’objet    Forme littérale
Création d’objet    Constructeur
Création d’objet      Piège
Création d’objet                     PiègeSi pas de new -> this du constructeur est «global»,           pas d’erreur ou de...
ProblèmeunRectangle      anotherRectanglelongueur             longueur  largeur         largeur  surface              surf...
Problème  Occupation mémoireunRectangle      anotherRectanglelongueur             longueur  largeur         largeur  surfa...
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 obje...
Création d’objet
SolutionunRectangle              anotherRectanglelongueur                     longueur  largeur                 largeur   ...
Closure• Une fonction objet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a ...
Closure
Closure•Pollution de Global•Risque de collision de nom•names est modifiable
Closure
Closure•Lent car construction de names à chaque appel
Closure
Closure
Closure
Framework
Frameworks
Frameworks
http://addyosmani.github.com/todomvc/
Frameworks• Fonctionnalités diverses • binding • routing • templating • ......
Frameworks• Backbone• KnockoutJS• AngularJS• ember.js• Meteor
Supplément
Supplément• Utilisation de lib
Supplément• Utilisation de lib• Dépendance / AMD
Supplément• Utilisation de lib• Dépendance / AMD• Minification
Supplément• Utilisation de lib• Dépendance / AMD• Minification• CDN
Tests• QUnit• Jasmine• JSTest
Qualité• JsLint • attention cela fait mal. • utiliser dès le début avant les mauvaises    habitudes !• Sonar
Questions ?
Creative CommonsAttribution — You must attribute the work in themanner specified by the author or licensor (but not inany w...
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Guide javascript
Upcoming SlideShare
Loading in …5
×

Guide javascript

1,786 views

Published on

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.

Published in: Technology
  • Be the first to comment

Guide javascript

  1. 1. Guide du développeurau 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 onlylanguage that people feel theydon’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 virgulehttps://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ègeSi pas de new -> this du constructeur est «global», pas d’erreur ou de warning !
  103. 103. ProblèmeunRectangle anotherRectanglelongueur longueur largeur largeur surface surface
  104. 104. Problème Occupation mémoireunRectangle anotherRectanglelongueur 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. SolutionunRectangle anotherRectanglelongueur 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 CommonsAttribution — You must attribute the work in themanner specified by the author or licensor (but not inany way that suggests that they endorse you or your useof the work).Noncommercial — You may not use this work forcommercial purposes.Share Alike — If you alter, transform, or build uponthis work, you may distribute the resulting work onlyunder the same or similar license to this one.

×