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.

1. Guide du développeur
au pays du JavaScript
Christophe Jollivet

2. Christophe Jollivet
• Neurobiologiste
• Informaticien
• Homme de communauté
• @jollivetc

3. Sondages

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. Histoire

6. Histoire

7. Histoire

8. Histoire

9. Histoire

10. Histoire

12. • Erreur en ligne XXX

13. • Erreur en ligne XXX
• Cela fait un moment que c’est le bazar mais
là je ne m’en sors plus

14. La révélation

15. La révélation
• Projet en HTML 5
• De vrais développeurs JavaScript
• Des ateliers

20. «JavaScript is the only
language that people feel they
don’t need to learn to use it»
Doug Crockford

21. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg

23. L’outillage

24. Navigateur
• Libre choix
• Outillage varie selon le navigateur

25. Debugger
• Points d’arrêts
• Inspection de variables
• Console

26. IDE
• Editeur de texte
• IDE

27. Langage

28. Le langage
• Types / Syntaxe
• Scope
• Object et héritage

29. Types

30. Types
• Faiblement typé
• number, string, boolean, null, undefined
• Object, function

31. typeof

32. typeof

33. typeof

34. typeof

35. Objet

36. Objet
• Container de propriétés avec un nom et
une valeur

37. Objet
• Container de propriétés avec un nom et
une valeur
• nom est une string y compris ""

38. 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

39. Déclaration objet

40. Déclaration objet

41. Déclaration objet

42. Déclaration objet

43. Déclaration objet

44. Accès aux valeurs

45. Fonction

46. Fonction

47. Arguments

48. Arguments

49. Arguments
• Il n’y a pas d’erreur si le nombre d’arguments
et paramètres ne correspondent pas

50. 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

51. Arguments

52. apply
• Permet l’invocation d’une fonction en lui
passant un contexte et des paramètres

54. Apply

55. Coercition de type

56. Coercition de type
• Forcer le type d’une variable

57. Coercition de type
• Forcer le type d’une variable
• == fait la coercition de type

58. Coercition de type
• Forcer le type d’une variable
• == fait la coercition de type
• === ne fait pas la coercition de type :
évaluation de type

59. Coercition de type
• '1' ==1 TRUE
• '1'===1 FALSE

60. Coercition de type

61. Coercition de type
• false == 'false' FALSE

62. Coercition de type
• false == 'false' FALSE
• false == '0' TRUE

63. Coercition de type
• false == 'false' FALSE
• false == '0' TRUE
• " trn " == 0 TRUE

64. Coercition de type
• false == 'false' FALSE
• false == '0' TRUE
• " trn " == 0 TRUE
• ",,," == new Array(4) TRUE

65. Coercition de type
• false == undefined FALSE
• false == null FALSE
• null == undefined TRUE

66. Coercition de type

67. Coercition de type
• if( foo === null || foo === undefined )

68. Coercition de type
• if( foo === null || foo === undefined )
• if( foo == null )

69. Coercition type
(bonus)

70. Coercition type
(bonus)
• foo=+foo

71. Coercition type
(bonus)
• foo=+foo
• foo = parseInt(foo)

72. Coercition type
(bonus)
• foo=+foo
• foo = parseInt(foo)
• foo = parseFloat(foo)

73. Coercition et
transitivité

74. Coercition et
transitivité
• 0 =='' TRUE

75. Coercition et
transitivité
• 0 =='' TRUE
• 0 =='0' TRUE

76. Coercition et
transitivité
• 0 =='' TRUE
• 0 =='0' TRUE
• ''=='0'

77. Coercition et
transitivité
• 0 =='' TRUE
• 0 =='0' TRUE
• ''=='0' FALSE

78. Piège

79. Truthy et Falsy

80. Truthy et Falsy
• "foo" ou 1 sont TRUE

81. Truthy et Falsy
• "foo" ou 1 sont TRUE
• "", 0, null, undefined, NaN, void sont FALSE

82. Truthy et Falsy
• "foo" ou 1 sont TRUE
• "", 0, null, undefined, NaN, void sont FALSE
• if( array.length>0 ) équivalent à
if( array.length )

83. 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 !== "" )

84. Valeur par défaut

85. Appel sécurisé

88. Point virgule

89. Point virgule
• Séparation d’expression

90. Point virgule
• Séparation d’expression
• Pas toujours obligatoire

91. Point virgule
• Séparation d’expression
• Pas toujours obligatoire
• Pose problème dans la minification

92. Point virgule
• Séparation d’expression
• Pas toujours obligatoire
• Pose problème dans la minification
• Grand débat sur quand il est nécessaire

93. Point virgule
https://github.com/twitter/bootstrap/issues/3057

94. Point virgule

95. Point virgule

96. Scope

97. Scope

98. Scope
• Syntaxe à « la C » avec bloc

99. Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction

100. Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
• Déclaration de variable avec «var»

101. Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
• Déclaration de variable avec «var»
• /! déclaration automatique

102. Déclaration

103. Déclaration

104. Hoisting
• Déplace les déclarations en tête du bloc

105. Hoisting

106. Hoisting

107. Objet et héritage

108. Création d’objet
Forme littérale

109. Création d’objet
Constructeur

110. Création d’objet
Piège

111. Création d’objet
Piège
Si pas de new -> this du constructeur est «global»,
pas d’erreur ou de warning !

112. Problème
unRectangle anotherRectangle
longueur longueur
largeur largeur
surface surface

113. Problème
Occupation mémoire
unRectangle anotherRectangle
longueur longueur
largeur largeur
surface surface

114. 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

115. Création d’objet

116. Solution
unRectangle anotherRectangle
longueur longueur
largeur largeur
surface
Prototype

117. Closure
• Une fonction objet contient :
• une fonction (nom, paramètres, body)
• une référence à l’environnement où elle a
été créée (contexte)

118. Closure

119. Closure
•Pollution de Global
•Risque de collision de nom
•names est modifiable

120. Closure

121. Closure
•Lent car construction de names à chaque appel

122. Closure

123. Closure

124. Closure

125. Framework

126. Frameworks

127. Frameworks

128. http://addyosmani.github.com/todomvc/

130. Frameworks
• Fonctionnalités diverses
• binding
• routing
• templating
• ......

131. Frameworks
• Backbone
• KnockoutJS
• AngularJS
• ember.js
• Meteor

132. Supplément

133. Supplément
• Utilisation de lib

134. Supplément
• Utilisation de lib
• Dépendance / AMD

135. Supplément
• Utilisation de lib
• Dépendance / AMD
• Minification

136. Supplément
• Utilisation de lib
• Dépendance / AMD
• Minification
• CDN

137. Tests
• QUnit
• Jasmine
• JSTest

138. Qualité
• JsLint
• attention cela fait mal.
• utiliser dès le début avant les mauvaises
habitudes !
• Sonar

139. Questions ?

140. 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.