Guide javascript

1,637 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,637
On SlideShare
0
From Embeds
0
Number of Embeds
551
Actions
Shares
0
Downloads
48
Comments
0
Likes
1
Embeds 0
No embeds

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

    ×