JavaScript avancé
Adresses derrière les liens

Livres, sites et guides
Écran 2
  1. Eloquent JavaScript: A Modern Introduction to Programming https://www.amazon.com/gp/product/1593275846/
  2. You Don't Know JS: Scope & Closures http://shop.oreilly.com/product/0636920026327.do
  3. Code Conventions for the JavaScript Programming Language http://crockford.com/javascript/code.html
  4. JavaScript The Right Way http://jstherightway.org/
  5. JavaScript Standard Style https://standardjs.com/
  6. Guide JavaScript https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide
  7. Référence JavaScript https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference
  8. Référence du DOM https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model
  9. Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony https://www.youtube.com/watch?v=iINLewCGnuY
  10. www.espacecourbeformation.com/fr/cours/javascript-avance/ https://www.espacecourbeformation.com/fr/cours/javascript-avance/
Rappel sur les méthodes pour les tableaux
Écran 4
  1. chapitre du livre Eloquent JavaScript https://eloquentjavascript.net/05_higher_order.html
  2. Array https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
Array.filter()
Écran 5
  1. Array.prototype.filter https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter
Array.map()
Écran 6
  1. Array.prototype.map https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map
Array.forEach()
Écran 7
  1. Array.prototype.from() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/from
  2. Array.prototype.forEach https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
Array.reduce()
Écran 8
  1. Array.prototype.reduce https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce
En vrac : autres méthodes d'intérêt pour les tableaux
Écran 9
  1. Array.prototype.entries() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/entries
  2. Array.prototype.keys() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/keys
  3. Array.prototype.find() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/find
  4. Array.prototype.findIndex() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/findIndex
  5. Array.prototype.some() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/some
  6. Array.prototype.every() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/every
  7. Array.prototype.reduceRight() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduceRight
Méthodes pour créer un objet
Écran 11
  1. Object.create() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
  2. notion de "classe" https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
  3. 3 ways to define a JavaScript object http://www.phpied.com/3-ways-to-define-a-javascript-class/
  4. Initialisateur d'objets https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet
  5. There is no right way! https://youtu.be/GhbhD1HR5vk?list=PL0zVEGEvSaeHBZFy6Q8731rcwk0Gtuxub&t=94
Prototypes et délégation de comportement (p. 1/2)
Écran 12
  1. Le modèle objet JavaScript en détails https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails
  2. Prototypes in JavaScript https://hackernoon.com/prototypes-in-javascript-5bba2990e04b
  3. Understanding JavaScript: Prototype and Inheritance https://hackernoon.com/understanding-javascript-prototype-and-inheritance-d55a9a23bde2
Rappel : bonne méthode pour ajouter des méthodes
Écran 18
  1. Methods Within Constructor vs Prototype in Javascript https://www.thecodeship.com/web-development/methods-within-constructor-vs-prototype-in-javascript/
Propriétés et méthodes (p. 1/2)
Écran 21
  1. Object https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object
Méthode Object.defineProperty()
Écran 23
  1. Object.defineProperty() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty
Méthode Object.assign()
Écran 27
  1. Object.assign() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create
  2. section Object.assign dans "Dealing With Objects" https://alligator.io/js/dealing-with-objects/#objectassign
Méthode Object.create()
Écran 28
  1. Object.create() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create
Objets littéraux avec la méthode create() sans propriétés
Écran 29
  1. JS Objects: De”construct”ion https://davidwalsh.name/javascript-objects-deconstruction
Mais quelle est la meilleure façon?
Écran 32
  1. no "right" way https://youtu.be/GhbhD1HR5vk?t=91
  2. object litterals or constructor functions https://stackoverflow.com/questions/4859800/should-i-be-using-object-literals-or-constructor-functions
Avant de commencer sur les patrons
Écran 34
  1. JavaScript, the right way http://jstherightway.org/#getting-started
Hissage des variables (hoisting)
Écran 36
  1. JavaScript Scoping and Hoisting http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
Fermetures (closures)
Écran 37
  1. Closures in JavaScript https://www.kirupa.com/html5/closures_in_javascript.htm
  2. Closures https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures
Immediately-Invoked-Function-Expressions (IIFE)
Écran 38
  1. Immediately-Invoked Function Expression (IIFE) http://benalman.com/news/2010/11/immediately-invoked-function-expression/
Qu'est-ce qu'un patron
Écran 40
  1. antipatron https://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns
Exemple d'usage d'un patron : Façade
Écran 41
  1. patron Façade https://addyosmani.com/resources/essentialjsdesignpatterns/book/#facadepatternjavascript
Références pour les patrons de conception
Écran 42
  1. Learning JavaScript Design Patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/
  2. Article général sur patrons de conception https://fr.wikipedia.org/wiki/Patron_de_conception
  3. 4 JavaScript Design Patterns You Should Know https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know
  4. Patterns For Large-Scale JavaScript Application Architecture https://addyosmani.com/largescalejavascript/
Patron Module
Écran 44
  1. cette publication par Richard Cornford http://groups.google.com/group/comp.lang.javascript/msg/9f58bd11bd67d937
  2. création des composantes de YUI https://yuiblog.com/blog/2007/06/12/module-pattern/
Exemple d'usage d'un module : base d'un plugin jQuery
Écran 45
  1. création d'un module jQuery https://learn.jquery.com/plugins/basic-plugin-creation/
Patron Revealing Module
Écran 46
  1. patron Revealing Module https://christianheilmann.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/
ECMAScript 6 et les autres versions récentes du standard (p. 1/2)
Écran 51
  1. ECMAScript sur Wikipedia (en anglais) https://en.wikipedia.org/wiki/ECMAScript
ECMAScript 6 et les autres versions récentes du standard (p. 2/2)
Écran 52
  1. résumé des fonctionnalités ajoutées https://medium.com/@selvaganesh93/javascript-whats-new-in-ecmascript-2019-es2019-es10-35210c6e7f4b
  2. https://github.com/tc39/proposals https://github.com/tc39/proposals
  3. différents états https://tc39.github.io/process-document/
  4. The TC39 process for ECMAScript features http://2ality.com/2015/11/tc39-process.html
Références pour ES6
Écran 53
  1. Exploring ES6 http://exploringjs.com/es6.html
  2. Understanding ECMAScript 6 https://leanpub.com/understandinges6/read
  3. ECMAScript 6 Features https://github.com/lukehoban/es6features
  4. ECMAScript 6 — New Features: Overview & Comparison http://es6-features.org/
  5. ECMAScript® 2015 Language Specification https://www.ecma-international.org/ecma-262/6.0/
Polyfill pour ES6
Écran 54
  1. Babel https://babeljs.io/docs/setup/
  2. https://babeljs.io/repl/ https://babeljs.io/repl/
  3. support de ES6 https://kangax.github.io/compat-table/es6/
Exemple de transpilisation avec Babel à travers node.js
Écran 55
  1. Transpile ES6 modules to ES5 using Babel http://www.dotnetcurry.com/javascript/1293/transpile-es6-modules-es5-using-babel
  2. Upgrading from babel-preset-es2015 to babel-preset-env http://babeljs.io/env
  3. babel-preset-env: a preset that configures Babel for you http://2ality.com/2017/02/babel-preset-env.html
Webpack
Écran 57
  1. Webpack https://webpack.js.org/
  2. Setting up ES6 https://leanpub.com/setting-up-es6/
Étendue de bloc avec let depuis ES6
Écran 61
  1. énoncé let https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let
  2. let in for loops http://exploringjs.com/es6/ch_variables.html#_for-loop
Éviter les fermetures (closures) avec let (p. 3/3)
Écran 66
  1. documentation de l'énoncé let sur MDN https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let#Une_meilleure_lisibilit%C3%A9_pour_les_fonctions_internes
Constantes avec const
Écran 67
  1. énoncé const https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/const
Conseil d'usage pour const, let et var
Écran 68
  1. Coding style: const versus let versus var http://exploringjs.com/es6/ch_variables.html#const-vs-let-vs-var
Littéraux de modèle
Écran 71
  1. littéraux gabarits https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits
Littéraux de modèle étiquetés
Écran 72
  1. Template litterals http://exploringjs.com/es6/ch_template-literals.html
Affectation par décomposition : sans déclaration et échange de variables
Écran 74
  1. affecter par décomposition https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition
Valeurs de défaut avec ES6
Écran 79
  1. Valeurs par défaut des arguments https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments
Paramètres du reste (rest operator)
Écran 82
  1. Paramètres du reste https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste
Opérateur de décomposition
Écran 83
  1. Opérateur de décomposition https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Syntaxe_d%C3%A9composition
Usage de l'opérateur de décomposition avec les littéraux
Écran 84
  1. Learning ES6: Enhanced object literals http://www.benmvp.com/learning-es6-enhanced-object-literals/
Syntaxe des fonctions fléchées (p. 1/3)
Écran 86
  1. syntaxe des fonctions fléchées https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es
  2. Lambda Calculus in JavaScript https://medium.com/functional-javascript/lambda-calculus-in-javascript-part-1-28ff63824d4d
Règles pour les fonctions fléchées (p. 1/2)
Écran 91
  1. ES6 in depth : arrow functions https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
Règles pour les fonctions fléchées (p. 2/2)
Écran 92
  1. ES6 in depth : arrow functions https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
ES6 vs ES5.x pour contexte de this
Écran 93
  1. méthode bind() pour Function https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind
  2. forEach() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
Exemple : curryfication (p. 1/2)
Écran 94
  1. définition de curryfication sur Wikipedia https://fr.wikipedia.org/wiki/Curryfication#JavaScript
Exemple : curryfication (p. 2/2)
Écran 95
  1. Currying in JavaScript ES6 https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400
Objets avec class
Écran 97
  1. Classes https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
Appeler le parent avec super
Écran 100
  1. Super https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
Héritage ou composition?
Écran 101
  1. How to Use Classes and Sleep at Night https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4
  2. Objects over classes https://gist.github.com/indiesquidge/f8c486795d7dd455c0327ce7e0aa8c16
  3. Object Composition in Javascript https://medium.com/code-monkey/object-composition-in-javascript-2f9b9077b5e6
  4. Composition over inheritance https://www.youtube.com/watch?v=wfMtDGfHWpA
Méta-propriété new.target pour les constructeurs de classes
Écran 102
  1. new.target https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/new.target
Clarifications pour le constructeur
Écran 103
  1. Constructor https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes/constructor
Méthodes statiques (p. 1/2)
Écran 105
  1. static https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes/static
À venir dans ECMAScript
Écran 107
  1. https://github.com/tc39/proposal-static-class-features/ https://github.com/tc39/proposal-static-class-features/
  2. https://github.com/tc39/proposal-class-fields https://github.com/tc39/proposal-class-fields
  3. https://github.com/tc39/proposal-private-methods https://github.com/tc39/proposal-private-methods
  4. https://github.com/justinfagnani/proposal-mixins https://github.com/justinfagnani/proposal-mixins
  5. JavaScript’s New Private Class Fields, and How to Use Them https://www.sitepoint.com/javascript-private-class-fields/
Exercice pour les classes (p. 2/2)
Écran 109
  1. Introduction à React http://www.espacecourbeformation.com/fr/cours/intro-react/
À quoi servent les promesses?
Écran 111
  1. Promise https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
Références sur les promesses
Écran 112
  1. JavaScript Promises: an Introduction https://developers.google.com/web/fundamentals/primers/promises
  2. Section Promises http://eloquentjavascript.net/11_async.html#h_sdRy5CTAP/
  3. Chapter Promises https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
  4. Promises https://www.promisejs.org/
  5. What is a Promise? https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
  6. Understanding JavaScript Promises, Pt. I: Background & Basics https://scotch.io/tutorials/understanding-javascript-promises-pt-i-background-basics
Support des promesses
Écran 113
  1. couverture de support pour les promesses http://caniuse.com/#search=Promises
  2. polyfill pour les promesses https://github.com/jakearchibald/ES6-Promises#readme
États d'un objet Promise
Écran 117
  1. Promise https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
Méthodes d'instances d'un objet Promise
Écran 118
  1. Promises - instance methods https://developers.google.com/web/fundamentals/getting-started/primers/promises#instance_methods
Méthode then()
Écran 119
  1. Promise.then() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/then
Méthode catch()
Écran 121
  1. Handling multiple catches in promise chain https://stackoverflow.com/questions/26076511/handling-multiple-catches-in-promise-chain
  2. Promise.catch() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/catch
Méthodes statiques d'un objet Promise
Écran 122
  1. Promises - static methods https://developers.google.com/web/fundamentals/getting-started/primers/promises#static_methods
Exemple d'usage de Promise.race()
Écran 124
  1. discussion sur Cancelable promises https://esdiscuss.org/topic/cancelable-promises
  2. AbortController https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
Exercices pour les promesses
Écran 125
  1. JavaScript Promises: an Introduction https://developers.google.com/web/fundamentals/primers/promises
Boucle for...of
Écran 128
  1. boucle https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L'instruction_for...of
  2. for...of https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of
Que sont les générateurs?
Écran 130
  1. itérateurs et générateurs https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs
Fonctionnement d'un générateur (p. 2/2)
Écran 132
  1. énoncé function* https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/function*
Exercice : reprendre le conte avec un générateur
Écran 136
  1. await https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await
Introduction à async/await
Écran 138
  1. async function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction
  2. await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
  3. objet AsyncFunction https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction
  4. support de async/await sur caniuse.com https://caniuse.com/#feat=async-functions
Exercice : reprendre le conte avec async/await
Écran 142
  1. Chargement asynchrone d'un ensemble ordonné de ressources avec async/await et Promise.all https://youtu.be/EdFwpTUm3lE
Le problème
Écran 144
  1. commentaire de 2015 sur la nouvelle API Fetch https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/
Contexte des modules
Écran 145
  1. Understanding ES6 modules via their history https://www.sitepoint.com/understanding-es6-modules-via-their-history/
Références pour apprendre à utiliser les modules
Écran 146
  1. Understanding ES6 modules https://www.sitepoint.com/understanding-es6-modules/
  2. A 10 minute primer to JavaScript modules, module formats, module loaders, and module bundlers https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/
  3. Use ES6 modules in the browser today with SystemJS http://jsramblings.com/2016/11/09/use-es6-modules-in-the-browser-today-with-systemjs.html
  4. ES6 modules support lands in browsers: is it time to rethink bundling? https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/
  5. ES6 Modules in Chrome M61+ https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
  6. ECMAScript modules in browsers https://jakearchibald.com/2017/es-modules-in-browsers/
Modules
Écran 147
  1. début de la phase d'implémentation https://jakearchibald.com/2017/es-modules-in-browsers/
Règles du jeu avec les modules
Écran 149
  1. ECMAScript modules in browsers https://jakearchibald.com/2017/es-modules-in-browsers/
Syntaxe de l'instruction import
Écran 150
  1. import https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import
Syntaxe de l'instruction export
Écran 152
  1. export https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/export
API d'internationalisation
Écran 160
  1. vérifier son support https://caniuse.com/#search=NumberFormat
  2. polyfill pour l'API d'internationalisation https://github.com/andyearnshaw/Intl.js/
  3. Intl https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl
Internationalisation de la représentation des nombres
Écran 161
  1. Intl.NumberFormat https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat
Comprendre la spécification de la localisation
Écran 162
  1. BCP 47 https://tools.ietf.org/html/rfc5646
  2. Intl, section « Identification et choix de la locale » https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl#Identification_et_choix_de_la_locale
Internationalisation de la représentation temporelle
Écran 164
  1. Intl.DateTimeFormat https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat
Tous droits réservés 2020, Espace Courbe Formation inc. —29 novembre 2020 — 17:41:15