Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Sommaire Préambule ............................................................

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. Cette façon de procéder est selon moi la meilleure manière de vous rendre rapidement autonome. Si vous faites l’effort de prendre le temps de refaire les exemples et exercices, vous devriez être capable de réaliser la plupart de vos projets dès la fin du cours. Ce cours s’adresse donc à toute personne curieuse et motivée par l’apprentissage JavaScript. La plupart des notions en JavaScript sont relativement simples à apprendre et à comprendre et il n’y a pas de niveau ou de connaissance préalable à avoir pour suivre ce cours ; il est donc ouvert à tous. Le seul prérequis nécessaire pour suivre ce cours dans de bonnes conditions est d’avoir une bonne connaissance du HTML et du CSS qui sont deux langages web incontournables car nous allons utiliser le JavaScript pour manipuler le code HTML et CSS. Méthodologie et pédagogie Le domaine de la programmation web est en constante évolution et évolue de plus en plus vite. Il est donc essentiel qu’un développeur possède ou acquière des facultés d’adaptation et c’est la raison pour laquelle ce cours a pour but de vous rendre autonome. Pour servir cet objectif, les différentes notions abordées dans ce cours sont illustrées par de nombreux exemples et exercices. Je vous conseille fortement de passer du temps sur chaque exemple et chaque exercice et de ne pas simplement les survoler car c’est comme cela que vous apprendrez le mieux. En effet, en informatique comme dans beaucoup d’autres domaine, la simple lecture théorique n’est souvent pas suffisante pour maitriser complètement un langage. La meilleure façon d’apprendre reste de pratiquer et de se confronter aux difficultés pour acquérir des mécanismes de résolution des problèmes. Ensuite, une fois ce cours terminé, pensez à rester curieux et à vous tenir régulièrement au courant des avancées des langages et surtout continuez à pratiquer régulièrement. Plan et déroulement du cours Ce cours contient 18 sections qui s’enchainent dans un ordre logique et cohérent. Je vous recommande donc de les suivre dans l’ordre proposé pour retirer le maximum de ce cours puisque certaines leçons vont réutiliser des notions vues dans les leçons précédentes. Nous allons commencer par étudier les fonctionnalités de base du JavaScript qui sont des concepts incontournables et communs à de nombreux langages de programmation comme les variables, les fonctions et les structures de contrôle. Nous irons ensuite progressivement vers des notions plus pointues et plus spécifiques au langage avec notamment la programmation orientée objet en JavaScript et la manipulation du DOM HTML qui sont des concepts centraux de ce langage. Nous verrons finalement des notions avancées et nouvelles du JavaScript comme la gestion des erreurs, la création d’itérateurs et de générateurs et l’asynchrone entre autres. Introduction au JavaScript Dans cette première leçon d’introduction, nous allons définir ce qu’est le JavaScript ainsi que les principes fondateurs de ce langage et allons comprendre la place du JavaScript parmi les autres langages et ses usages. Une uploads/s3/ cours-complet-javascript-2020.pdf