Le Tutoriel JavaScript Moderne

FR

• ARعربي
• ENEnglish
• ESEspañol
• FAفارسی
• FRFrançais
• IDIndonesia

• ITItaliano
• JA日本語
• KO한국어
• RUРусский
• TRTürkçe
• UKУкраїнська

• UZOʻzbek
• ZH简体中文

Nous souhaitons rendre ce projet open source disponible pour les gens du monde entier.

Aidez-nous à traduire le contenu de ce tutoriel dans votre langue!

AcheterEPUB/PDFRechercheRechercheCarte du tutorielLight themeDark themePartagerعربيEnglishEspañolفارسیFrançaisIndonesiaItaliano日本語한국어РусскийTürkçeУкраїнськаOʻzbek简体中文Le Tutoriel JavaScript Moderne

Comment c'est fait maintenant. Des bases aux sujets avancés avec des explications simples mais détaillées.

RechercherDernière mise à jour le 6 février 2026AcheterEPUB/PDFPartager:240 ★githubDiscord Chat (English)

Table des matières

Le cours principal contient 2 parties qui couvrent JavaScript en tant que langage de programmation et l'utilisation d'un navigateur. Il existe également des séries supplémentaires d'articles thématiques.

Partie 1JavaScript le langagePartie 2Navigateur : Document, Évènements, InterfacesPartie 3Articles supplémentaires

JavaScript le langage

Dans ce guide nous allons apprendre JavaScript, en partant de zéro jusqu’à des concepts avancés comme la POO.

Nous allons nous concentrer ici sur le langage lui même, avec le minimum de notes spécifiques aux environnements.

Une introduction

• Une Introduction à JavaScript
• Manuels et spécifications
• Les éditeurs de code
• La console de développement

Fondamentaux JavaScript

• Hello, world!
• Structure du code
• Le mode moderne, "use strict"
• Les variables
• Les types de données
• Interaction: alert, prompt, confirm
• Les conversions de types
• Opérateurs de base, mathématiques
• Comparaisons
• Branche conditionnelle : if, '?'
• Opérateurs logiques
• L'opérateur de coalescence des nuls '??'
• Boucles : while et for
• La déclaration "switch"
• Fonctions
• Fonctions Expressions
• Fonctions fléchées, les bases
• JavaScript specials
• Plus …

Qualité du code

• Débogage dans le navigateur
• Style de codage
• Commentaires
• Ninja code
• Testing automatisé avec Mocha
• Polyfills et transpilers

Objets: les bases

• Objets
• Les références d'objet et leur copie
• Ramasse-miettes (garbage collection)
• Méthodes d'objet, "this"
• Le constructeur, l'opérateur "new"
• Chaînage optionnel '?.'
• Type symbole
• Conversion d'objet en primitive

Types de données

• Méthodes des primitives
• Nombres
• Strings
• Arrays
• Méthodes de tableau
• Iterables
• Map et Set
• WeakMap et WeakSet
• Object.keys, values, entries
• L'affectation par décomposition
• Date et Temps
• JSON methods, toJSON
• Plus …

Travail avancé avec les fonctions

• Récursion et pile
• Les paramètres Rest et la syntaxe spread
• Variable scope, closure
• L'ancien "var"
• L'objet global
• L'objet Function, NFE
• La syntaxe "new Function"
• L'ordonnancement avec setTimeout et setInterval
• Décorateurs et transferts, call/apply
• Le "bind" de fonction
• Les fonctions fléchées revisitées
• Plus …

Configuration des propriétés d'objet

• Attributs et descripteurs de propriétés
• Getters et Setters de propriété

Prototypes, héritage

• Héritage prototypal
• F.prototype
• Prototypes natifs
• Méthodes de prototypes, objets sans __proto__

Classes

• Syntaxe de base de la Classe
• Héritage de classe
• Propriétés et méthodes statiques
• Propriétés et méthodes privées et protégées
• Extension des classes intégrées
• Vérification de classe : "instanceof"
• Les mixins

La gestion des erreurs

• Gestion des erreurs, "try...catch"
• Les erreurs personnalisées, extension de Error

Promesses, async/await

• Introduction: callbacks
• Promesse (promise)
• Chaînage des promesses
• Gestion des erreurs avec des promesses
• Promesse API
• Promisification
• Les micro-tâches
• Async/await

Générateurs, itération avancée

• Générateurs
• Itérateurs et générateurs asynchrones

Modules

• Modules, introduction
• Exporter et importer
• Importations dynamiques

Divers

• Proxy et Reflect
• Eval : exécution d'un texte code
• Curryfication
• Type référence
• BigInt
• Unicode et fonctionnement des chaînes de caractères

Navigateur : Document, Évènements, Interfaces

Apprendre à gérer les pages du navigateur: ajouter des éléments, manipuler leur taille et leur position, créer dynamiquement des interfaces et interagir avec le visiteur.

Document

• L'environnement du navigateur, spécifications
• L'arbre DOM
• Parcourir le DOM
• Recherches: getElement*, querySelector*
• Propriétés de nœud : type, balise et contenu
• Attributs et propriétés
• Modification du document
• Styles et classes
• Taille des éléments et défilement
• Tailles des fenêtres et défilement
• Coordonnées
• Plus …

Introduction to Events

• Introduction to browser events
• Bubbling and capturing
• Délégation d'événement
• Actions par défaut du navigateur
• Distribution d'événements personnalisés

UI Events

• Evenements de la souris
• Déplacer la souris : mouseover/out, mouseenter/leave
• Les évènements Glisser-Déposer de la souris
• Les événements de pointeur
• Le Clavier: les évènements keydown et keyup
• Le Défilement

Forms, controls

• Propriétés de formulaire
• Focus: focus/blur
• Les événements: change, input, cut, copy, paste
• Formulaires: l'événement et la méthode "submit"

Chargement du document et des ressources

• Page: DOMContentLoaded, load, beforeunload, unload
• Les scripts: async, defer
• Chargement des ressources: onload et onerror

Miscellaneous

• Mutation observer
• Selection et Range
• La boucle d'événement: les microtâches et les macrotâches

Articles supplémentaires

Liste des sujets supplémentaires qui supposent que vous avez couvert les deux premières parties du tutoriel. Il n'y a pas de hiérarchie claire ici, vous pouvez lire les articles dans l'ordre que vous voulez.Cadres et fenêtres

• Les méthodes de pop-ups et fenêtres
• Communication entre les fenêtres
• L'attaque par clickjacking

Les données binaires et les fichiers

• ArrayBuffer, tableaux binaires
• TextDecoder and TextEncoder
• Blob
• File and FileReader

Requêtes réseau

• Fetch
• FormData
• Fetch: Download progress
• Fetch: Abort
• Fetch: Requêtes Cross-Origin
• API Fetch
• Les objets URL
• XMLHttpRequest
• Upload pouvant être repris
• L'interrogation longue
• WebSocket
• Server Sent Events
• Plus …

Stockage des données dans le navigateur

• Cookies, document.cookie
• LocalStorage, sessionStorage
• IndexedDB

Animation

• Courbe de Bézier
• CSS-animations
• Animations JavaScript

Composants Web

• Prenons un peu de recul
• Custom elements
• DOM fantôme
• L'élément Template
• Shadow DOM slots, composition
• Application de style depuis le Shadow DOM
• DOM fantôme et événements

Expressions régulières

• Modèles et marqueurs
• Classes de caractères
• Unicode: indicateur "u" et classe \p{...}
• Ancres : début ^ et fin $ d'une chaîne de caractères
• Multiline mode of anchors ^ $, flag "m"
• Limite de mot : \b
• Échappement, caractères spéciaux
• Ensembles et intervalles [...]
• Quantificateurs +, *, ? et {n}
• Quantificateurs gloutons ou paresseux
• Groupes capturant
• Rétro référence dans le pattern : \N et \k<name>
• Alternance (OU) |
• Lookahead et Lookbehind
• La rétroaction catastrophique
• Marqueur collant "y", recherche depuis une position
• Methodes des Expressions Rationnelles et des chaînes de caractères
• Plus …

PartagerCarte du tutoriel

Commentaires

lire ceci avant de commenter…

• Si vous avez des améliorations à suggérer, merci de soumettre une issue GitHub ou une pull request au lieu de commenter.
• Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.
• Pour insérer quelques bouts de code, utilisez la balise <code>, pour plusieurs lignes – enveloppez-les avec la balise <pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen…)

• © 2007—2026 Ilya Kantor
• à propos du projet
• nous contacter