Téléchargé 189 fois
JavaScript pour le développeur Java
- 1. JavaScript pour le développeurJava Christophe Jollivet
- 2. Christophe Jollivet • Neurobiologiste •Informaticien • Homme de communauté • @jollivetc
- 3.
- 4.
- 5.
- 6. Les autres, quise dit qu’il devrait apprendre JavaScript ?
- 7.
- 8. Atwood Law • «Anyapplication 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
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 16. • Erreur enligne XXX
- 17. • Erreur enligne XXX • Cela fait un moment que c’est le bazar mais là je ne m’en sors plus
- 18.
- 19. La révélation • Projetsen HTML 5 • De vrais développeurs JavaScript • Des ateliers
- 20.
- 25. «JavaScript is theonly language that people feel they don’t need to learn to use it» Doug Crockford
- 26. Java is toJavaScript
- 27. Java is toJavaScript What ham is to hamster
- 28.
- 30.
- 32.
- 33.
- 34. Types • Number, String,Boolean, undefined • Object, function • Faiblement typé
- 35. Number • 64 bitsfloating point • IEEE-754 (aka Double) • Ecriture littérale • 1.024e+3 === 1024 • Méthodes (toExponential, toFixed, toPrecision...)
- 36.
- 37. valeurs approximatives (0.1 +0.2) + 0.3 === 0.1 + (0.2 + 0.3)
- 38. valeurs approximatives (0.1 +0.2) + 0.3 === 0.1 + (0.2 + 0.3) FALSE
- 39. valeurs approximatives 9007199254740992 === 9007199254740992 +1 (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3) FALSE
- 40. valeurs approximatives 9007199254740992 === 9007199254740992 +1 TRUE (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3) FALSE
- 41.
- 42.
- 43. Objet • Container depropriétés avec un nom et une valeur
- 44. Objet • Container depropriétés avec un nom et une valeur • nom de propriété est une string y compris ""
- 45. Objet • Container depropriétés avec un nom et une valeur • nom de propriété est une string y compris "" • propriété est n’importe quelle valeur sauf undefined
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. 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 propriétés communes dans le prototype pour la mémoire
- 62.
- 63.
- 64. Extension • Ajout d’uneméthode dans un prototype • la méthode est alors disponible pour toutes les instances existantes et à venir
- 65. Résolution de propriété • Sefait en remontant la chaîne de prototype • il est possible de surcharger une propriété
- 66. for in • itérateursur les propriétés de l’objet Les propriétés du prototype sont listées
- 67. hasOwnProperty • TRUE sila propriété est à l’objet et pas au prototype Attention si foo a une propriété ‘hasOwnProperty’
- 68.
- 69. Fonction Conserve une référencesur son contexte de création
- 70. Fonction Conserve une référencesur son contexte de création
- 71.
- 72.
- 73. Arguments • Il n’ya pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas
- 74. Arguments • Il n’ya pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas • arguments contient la liste des arguments
- 75.
- 76.
- 77. apply • Permet l’invocationd’une fonction en lui passant un contexte et des paramètres
- 79.
- 80.
- 81. 4 patterns • méthode •fonction • new • apply
- 82. this et méthode •pattern : bar.foo() • this référence l’objet contenant la méthode • binding à l’invocation
- 83. this et fonction •pattern : foo() • this est l’objet global, même si la fonction est déclarée dans une méthode
- 84.
- 85. this et fonction Pollutionde l’espace global
- 86.
- 87.
- 88.
- 89. this et new •pattern : var bar = new Foo(); • création d’un objet avec lien au prototype de la fonction et this pointe cet objet
- 90.
- 91.
- 92.
- 93. this et apply •pattern : foo.apply(bar, args); • this est lié à bar
- 94.
- 95.
- 96.
- 97. Coercition de type •Forcer le type d’une variable
- 98. Coercition de type •Forcer le type d’une variable • == fait la coercition de type
- 99. Coercition de type •Forcer le type d’une variable • == fait la coercition de type • === ne fait pas la coercition de type
- 100. Coercition de type •'1' ==1 TRUE • '1'===1 FALSE
- 101.
- 102. Coercition de type •false == 'false' FALSE
- 103. Coercition de type •false == 'false' FALSE • false == '0' TRUE
- 104. Coercition de type •false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE
- 105. Coercition de type •false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE • ",,," == new Array(4) TRUE
- 106. Coercition de type •false == undefined FALSE • false == null FALSE • null == undefined TRUE
- 107.
- 108. Coercition de type •if( foo === null || foo === undefined )
- 109. Coercition de type •if( foo === null || foo === undefined ) • if( foo == null )
- 110.
- 111.
- 112. Coercition type (bonus) • foo=+foo •foo = parseInt(foo,10)
- 113. Coercition type (bonus) • foo=+foo •foo = parseInt(foo,10) • foo = parseFloat(foo,10)
- 114. Coercition type (bonus) • foo=+foo •foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’
- 115. Coercition type (bonus) • foo=+foo •foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’ NaN
- 116. Coercition type (bonus) • foo=+foo •foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’ NaN 10
- 117. Coercition type (bonus) • foo=+foo •foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’ NaN 10 10.2
- 118.
- 119. Coercition et transitivité • 0=='' TRUE
- 120. Coercition et transitivité • 0=='' TRUE • 0 =='0' TRUE
- 121. Coercition et transitivité • 0=='' TRUE • 0 =='0' TRUE • ''=='0'
- 122. Coercition et transitivité • 0=='' TRUE • 0 =='0' TRUE • ''=='0' FALSE
- 123.
- 124.
- 125. Truthy et Falsy •false, "", 0, null, undefined, NaN, void sont FALSY
- 126. Truthy et Falsy •false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY
- 127. Truthy et Falsy •false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE"
- 128. Truthy et Falsy •false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE" • if( array.length )
- 129. Truthy et Falsy •false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE" • if( array.length ) • if( string )
- 130.
- 131. Valeur par défaut Attentionsi b vaut 0 car 0 est falsy
- 132.
- 135.
- 136. Point virgule • Séparationd’expression
- 137. Point virgule • Séparationd’expression • Pas toujours obligatoire
- 138. Point virgule • Séparationd’expression • Pas toujours obligatoire • Pose problème dans la minification
- 139. Point virgule • Séparationd’expression • Pas toujours obligatoire • Pose problème dans la minification • Grand débat sur quand il est nécessaire
- 140.
- 141.
- 142.
- 143.
- 144.
- 145. Scope • Syntaxe à« la C » avec bloc
- 146. Scope • Syntaxe à« la C » avec bloc • Le scope est la fonction
- 147. Scope • Syntaxe à« la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var»
- 148. Scope • Syntaxe à« la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var» • /! déclaration automatique
- 149.
- 150.
- 151. Hoisting • Déplace lesdéclarations en tête du bloc
- 152.
- 153.
- 154. Closure • Une fonctionobjet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a été créée (contexte)
- 155.
- 156. Closure •Pollution de Global •Risquede collision de nom •names est modifiable
- 157.
- 158. Closure •Lent car constructionde names à chaque appel
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166. namespace • Séparation decode pour limiter les collisions de nom • Masquer le fonctionnement de votre librairie
- 167. Namespace •Tout n’est pasdans un bloc •Tout est public
- 168. IIFE • Immediatly InvokedFunction Expression • Fonction exécutée au chargement du script et qui renvoie un objet avec les fonctions/ variables utiles.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174. Callback • fonction donnéeen paramètre pour des opération asynchrone
- 175.
- 176.
- 177.
- 178.
- 179.
- 181.
- 184. Promise • Objet avecune méthode then qui prend 3 paramètres • success callback • failure callback • progress callback (pas obligatoire)
- 185. Promise • 3 étatspossibles • unfulfilled or pending • fulfilled or resolved • failed or rejected
- 192.
- 193. Résumé • JavaScript s’apprend! • Scope / Hoisting • this (constructeur et callback) • Héritage par prototype
- 194.
- 195.
- 197. • Enormes progrèssur lesVM (V8, Rhino, XMonkey)
- 198. • Enormes progrèssur lesVM (V8, Rhino, XMonkey) • compilateur JIT
- 199. • Enormes progrèssur lesVM (V8, Rhino, XMonkey) • compilateur JIT • Cible du transpiling
- 200. • Enormes progrèssur lesVM (V8, Rhino, XMonkey) • compilateur JIT • Cible du transpiling • Coffeescript, Dart, GWT...
- 201. JS n’est pasmaintenable
- 205.
- 206.
- 207.
- 208.
- 209.
- 211. • One languageto rule them all
- 212. • One languageto rule them all • Write once run anywhere ?
- 213.
- 214.
- 215.
- 216.
- 217.
- 218. Modularisation • AMD :AsynchronousModule Definition • Chargement asynchrone en parallèle dans son propre scope • requirejs, Dojo, JQuery, Curl, Backdraft
- 219.
- 220.
- 221.
- 222.
- 223.
- 224. Grunt • Ant +Ivy du JavaScript • 2 fichiers • package.json -> dépendances et plugins • grunt.js -> configuration
- 225.
- 226.
- 227. NPM • Node PackageManager • provisionneur de dépendances
- 228. Bower • Provisionnement dedépendances pour la webapp
- 229. Yeoman • Scaffolding • IntégrationdeYo, Grunt et Bower • Générateur
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240. Bonus • Rapport detests dans différents formats • Couverture de code
- 241.
- 242. Sinon.js • Mock, Spies..... •Fake sur XMLHttpRequest • Fake sur Timer
- 243. CasperJs • Headless scriptableWebkit • Screenshot • Test recorder dans Chrome
- 244.
- 245.
- 246. Job dédié • commandeshell
- 247. Plugin Maven • Lancementdes outils en ligne de commande
- 248. Aggregation résultats • Reporterau format XUnit • Plugin Jenkins TAP
- 249.
- 250.
- 251.
- 252.
- 254. Frameworks • Fonctionnalités diverses •binding • routing • templating • ......
- 255. Frameworks • Backbone • KnockoutJS •AngularJS • ember.js • Meteor • chfo
- 256.
- 257. use strict • Enhaut du script ou dans une fonction • Transforme en erreur certaines fautes • déclaration implicite de variable • syntaxe octale • double propriété
- 258. JSLint / JSHint •attention cela fait mal. • utiliser dès le début avant les mauvaises habitudes ! • en ligne ou en plugin
- 259. Sonar • Plugin pourle JavaScript • tests, coverage, métriques,
- 260.
- 261.
- 262.
- 263. IDE • Difficile.... • Ilfaut essayer
- 264. Console des navigateurs • Debugging •Test en live
- 265.
- 266. Creative Commons Attribution —Youmust 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.