Masterclass JavaScript : Cours complet

Sommaire
Préambule ................................................................................................................................. 5
Introduction au JavaScript ...................................................................................................... 8
Mise en place de notre environnement de travail............................................................. 14
Où écrire le code JavaScript ................................................................................................ 16
Commentaires, indentation et syntaxe de base en JavaScript ...................................... 23
Introduction aux variables JavaScript ................................................................................. 27
Les types de données JavaScript ....................................................................................... 33
Présentation des opérateurs arithmétiques et d’affectation ........................................... 40
Concaténation et littéraux de gabarits ................................................................................ 45
Les constantes ....................................................................................................................... 49
Structures de contrôle, conditions et opérateurs de comparaison JavaScript............. 51
Les conditions if, if…else et if…else if…else JavaScript ................................................. 56
Opérateurs logiques, précédence et règles d’associativité des opérateurs en
JavaScript ............................................................................................................................... 62
Utiliser l’opérateur ternaire pour écrire des conditions condensées ............................. 70
L’instruction switch en JavaScript ....................................................................................... 74
Présentation des boucles et opérateurs d’incrémentation et de décrémentation ....... 77
Les boucles while, do…while, for et for…in et les instructions break et continue....... 81
Présentation des fonctions JavaScript ............................................................................... 91
Portée des variables et valeurs de retour des fonctions ................................................. 96
Fonctions anonymes, auto-invoquées et récursives ...................................................... 105
Introduction à la programmation orientée objet en JavaScript ..................................... 112
Création d’un objet littéral ................................................................................................... 117
Définition et création d’un constructeur ............................................................................ 124
Constructeur Object, prototype et héritage ..................................................................... 131
Les classes en orienté objet JavaScript ........................................................................... 141
Valeurs primitives et objets prédéfinis .............................................................................. 149
Propriétés et méthodes de l’objet global String .............................................................. 155
Propriétés et méthodes de l’objet global Number .......................................................... 164
Propriétés et méthodes de l’objet global Math ................................................................ 173
Présentation des tableaux et de l’objet global Array ...................................................... 180
L’objet global Date et les dates en JavaScript ................................................................ 191
APIs, Browser Object Model et interface Window .......................................................... 201
Interface et objet Navigator et géolocalisation ................................................................ 211
Interface et objet History ..................................................................................................... 216

Interface et objet Location .................................................................................................. 219
Interface et objet Screen .................................................................................................... 221
Présentation du DOM HTML et de ses interfaces .......................................................... 224
Accès aux éléments HTML et modification du contenu ................................................ 229
Naviguer dans le DOM ....................................................................................................... 237
Ajouter, modifier ou supprimer des éléments du DOM ................................................. 243
Manipuler les attributs et les styles des éléments .......................................................... 252
Gestion d’évènements ........................................................................................................ 260
Propagation des évènements ............................................................................................ 265
Empêcher la propagation d’évènements ......................................................................... 270
EXERCICE #1 : Création d’un convertisseur d’unités ................................................... 274
Introduction aux expressions régulières .......................................................................... 278
Recherches et remplacements .......................................................................................... 280
Classes de caractères et classes abrégées .................................................................... 286
Les métacaractères ............................................................................................................. 293
Sous masques et assertions .............................................................................................. 300
Les options ........................................................................................................................... 304
Paramètres du reste et opérateur de décomposition ..................................................... 308
Les fonctions fléchées ........................................................................................................ 311
Les closures (« fermetures ») ............................................................................................ 316
Délai d’exécution : setTimeout() et setInterval() ............................................................. 320
EXERCICE #2 : Afficher et cacher un élément ............................................................... 325
EXERCICE #3 : Tri dynamique d’un tableau .................................................................. 328
Gestion des erreurs ............................................................................................................. 339
Le mode strict ....................................................................................................................... 345
Introduction à l’asynchrone ................................................................................................ 350
Les promesses ..................................................................................................................... 356
Utiliser async et await pour créer des promesses plus lisibles .................................... 363
Chemin critique du rendu et attributs HTML async et defer ......................................... 368
Les symboles et l’objet Symbol ......................................................................................... 372
Protocoles et objets Iterable et Iterateur .......................................................................... 375
Les générateurs ................................................................................................................... 377
Les cookies ........................................................................................................................... 381
L’API Web Storage .............................................................................................................. 386
L’API de stockage IndexedDB ........................................................................................... 390
L’élément HTML canvas et l’API Canvas ........................................................................ 400
Dessiner des rectangles dans un canevas ...................................................................... 402

Définir des tracés et dessiner des formes ....................................................................... 407
Création de dégradés ou de motifs ................................................................................... 414
Ombres et transparence dans un canevas ..................................................................... 420
Ajouter du texte ou une image dans un canevas ........................................................... 424
Appliquer des transformations à un canevas .................................................................. 428
Les modules JavaScript – import et export ..................................................................... 436
Présentation de JSON ........................................................................................................ 442
Introduction à l’Ajax ............................................................................................................. 445
Créer des requêtes Ajax avec XMLHttpRequest ............................................................ 447
Présentation de l’API Fetch ............................................................................................... 454
Conclusion du cours ............................................................................................................ 458

Préambule
De quoi traite ce cours ?
Dans ce cours, nous allons découvrir et apprendre à utiliser le JavaScript. Le JavaScript
est un langage de programmation qui n’a cessé de gagner en popularité ces dernières
années car c’est un langage très puissant et très polyvalent : il peut être utilisé dans des
environnements très différents et peut permettre de réaliser un éventail de projets
relativement impressionnant.
Nous allons ici principalement nous concentrer sur une utilisation du JavaScript pour le
web et côté client (côté navigateur) sans toutefois oublier d’étudier les dernières
fonctionnalités du langage qui le rendent si attrayant pour les développeurs.
Quels sont les objectifs du cours et à qui s’adresse-t-il ?
Le JavaScript est un langage dit « facile à apprendre, difficile à maitriser ». Cela est
d’autant plus vrai que ses applications sont de plus en plus variées et que son panel de
fonctionnalités ne cesse de s’élargir depuis quelques années.
Ces particularités rendent le JavaScript à la fois incontournable et véritablement excitant
mais en font également l’un des langages les plus durs (si ce n’est le plus dur) à maitriser
complètement.
Pas d’inquiétude cependant : 90% du JavaScript est relativement simple à comprendre et
à apprendre et ce sont ces 90% qui vont être le plus souvent utilisés et rares sont les
développeurs qui maitrisent les 10% restants.
Pour autant, je vais essayer de vous présenter toutes les possibilités du JavaScript dans
ce cours et tenter de vous présenter les notions complexes sous un angle le plus
compréhensible possible.
Les objectifs de ce cours sont donc déjà de vous proposer un tour d’horizon le plus complet
possible des notions, fonctionnalités et possibilités d’utilisation du JavaScript afin que vous
ayez une bonne compréhension d’ensemble du langage et que vous puissiez utiliser ses
différents outils et également de vous rendre le plus autonome possible.
En effet, l’objectif de ce cours n’est pas, comme beaucoup d’autres, de simplement
« balancer » des définitions de notions les unes après les autres mais plutôt de vous les
présenter afin que vous les compreniez et les maitrisez parfaitement et également afin
que vous puissiez comprendre comment elles vont fonctionner ensemble.
Pour cela, je vous proposerai de nombreux exemples et exercices avec chaque nouveau
concept étudié et nous allons nos confronter aux difficultés plutôt que de les esquiver afin
que vous puissiez vous assurer d’avoir véritablement compris comment fonctionne tel ou
tel concept.