◐ Shell
Open
reader mode
source ↗
Show tasks
JavaScript le langage
Une introduction
Une Introduction à JavaScript
Manuels et spécifications
Les éditeurs de code
La console de développement
Fondamentaux JavaScript
Hello, world!
Afficher une alerte
Afficher une alerte avec un script externe
Structure du code
Le mode moderne, "use strict"
Les variables
Travailler avec des variables
Assigner le bon nom
Constante en majuscule ?
Les types de données
String quotes
Interaction: alert, prompt, confirm
Une simple page
Les conversions de types
Opérateurs de base, mathématiques
Les formes postfixes et préfixes
Résultat d'affectation
Les conversions de type
Corrigez l'addition
Comparaisons
Comparaisons
Branche conditionnelle : if, '?'
if (une chaîne de caractères avec zéro)
Le nom de JavaScript
Afficher le signe
Réécrire 'if' en '?'
Réécrire 'if..else' en '?'
Opérateurs logiques
Quel est le résultat de OR ?
Quel est le résultat des alertes OR ?
Quel est le résultat de AND ?
Quel est le résultat des alertes AND ?
Le résultat de OR AND OR
Vérifiez la plage entre
Vérifiez à l'extérieur de la plage
Une question à propos de "if"
Check the login
L'opérateur de coalescence des nuls '??'
Boucles : while et for
Dernière valeur de boucle
Quelles valeurs affiche la boucle while ?
Quelles valeurs sont affichées par la boucle "for" ?
Extraire les nombres pairs dans la boucle
Remplacer "for" par "while"
Répéter jusqu'à ce que l'entrée soit correcte
Extraire des nombres premiers
La déclaration "switch"
Réécrire le "switch" dans un "if"
Réécrire le "if" dans un "switch"
Fonctions
Est-ce que "else" est requis ?
Réécrivez la fonction en utilisant '?' ou '||'
Fonction min(a, b)
Fonction pow(x,n)
Fonctions Expressions
Fonctions fléchées, les bases
Réécrire avec les fonctions fléchées
JavaScript specials
Qualité du code
Débogage dans le navigateur
Style de codage
Mauvais style
Commentaires
Ninja code
Testing automatisé avec Mocha
Quel est le problème dans le test ?
Polyfills et transpilers
Objets: les bases
Objets
Bonjour objet
Vérifier le vide
Objets constants ?
Somme des propriétés de l'objet
Multipliez les valeurs de propriétés numériques par 2
Les références d'objet et leur copie
Ramasse-miettes (garbage collection)
Méthodes d'objet, "this"
Utilisation de "this" dans le littéral d'objet
Créer une calculatrice
Chaining
Le constructeur, l'opérateur "new"
Deux fonctions - un objet
Créer une nouvelle calculatrice
Créer un nouvel accumulateur
Chaînage optionnel '?.'
Type symbole
Conversion d'objet en primitive
Types de données
Méthodes des primitives
Pouvons-nous ajouter une propiété à une primitive ?
Nombres
Somme des nombres du visiteur
Pourquoi 6.35.toFixed(1) == 6.3 ?
Répéter jusqu'à ce que l'entrée soit un nombre
Une boucle infinie
Un nombre aléatoire de min à max
Un entier aléatoire de min à max
Strings
Mettre en majuscule le premier caractère
Vérifier le spam
Tronquer le texte
Extraire l'argent
Arrays
Le tableau est-il copié ?
Opérations de tableaux
Appel dans un contexte de tableau
Somme des nombres saisis
Un sous-tableau maximal
Méthodes de tableau
Traduit border-left-width en borderLeftWidth
Filter range
Filter range "in place"
Trier par ordre décroissant
Copier et trier le tableau
Create an extendable calculator
Map en noms
Map en objets
Trier les objets
Mélanger un tableau
Obtenir l'âge moyen
Filtrer les membres uniques du tableau
Create keyed object from array
Iterables
Map et Set
Filtrer les membres uniques du tableau
Filter les anagrams
Clés Iterables
WeakMap et WeakSet
Stocker les messages non-lus
Stocker les dates de lectures
Object.keys, values, entries
Additionner les propriétés
Compter les propriétés
L'affectation par décomposition
L'affectation par décomposition
Le salaire maximal
Date et Temps
Créer une date
Montrer un jour de la semaine
Jour de la semaine européenne
Quel jour du mois était il y a plusieurs jours ?
Dernier jour du mois ?
Combien de secondes se sont écoulées aujourd'hui ?
Combien de secondes jusqu'à demain ?
Formater la date relative
JSON methods, toJSON
Transforme l'objet en JSON et revenez en arrière
Exclure les backreferences
Travail avancé avec les fonctions
Récursion et pile
Additionner tous les nombres jusqu'à celui donné
Calcule factoriel
Numéros de Fibonacci
Produire une liste de simple lien
Afficher une liste à lien unique dans l'ordre inverse
Les paramètres Rest et la syntaxe spread
Variable scope, closure
Une fonction récupère-t-elle les dernières modifications ?
Quelles variables sont disponibles ?
Les compteurs sont-ils indépendants ?
Objet compteur
Fonction dans if
Somme avec des closures
La variable est-elle visible ?
Filtrer par fonction
Trier par champ
Armée de fonctions
L'ancien "var"
L'objet global
L'objet Function, NFE
Un mutateur et diminution pour counter
La somme avec une quantité arbitraire de parenthèses
La syntaxe "new Function"
L'ordonnancement avec setTimeout et setInterval
Un résultat par seconde
Réécrire setTimeout avec setInterval
Que va afficher setTimeout ?
Décorateurs et transferts, call/apply
Décorateur spy
Décorateur de retardement
Décorateur debounce
Décorateur d'accélération
Le "bind" de fonction
Bound function as a method
Second bind
Function property after bind
Fix a function that loses "this"
Application de fonction partielle pour login
Les fonctions fléchées revisitées
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
Travailler avec prototype
Algorithme de recherche
Où est-ce écrit ?
Pourquoi deux hamsters sont rassasiés ?
F.prototype
Changement de "prototype"
Créer un objet avec le même constructeur
Prototypes natifs
Ajouter la méthode "f.defer(ms)" aux fonctions
Ajouter la décoration "defer()" aux fonctions
Méthodes de prototypes, objets sans __proto__
Ajouter toString au dictionnaire
La différence entre les appels
Classes
Syntaxe de base de la Classe
Réécrire en classe
Héritage de classe
Erreur lors de la création d'une instance
Horloge étendue
Propriétés et méthodes statiques
Class extends Object ?
Propriétés et méthodes privées et protégées
Extension des classes intégrées
Vérification de classe : "instanceof"
instanceof étrange
Les mixins
La gestion des erreurs
Gestion des erreurs, "try...catch"
Finally ou juste le code ?
Les erreurs personnalisées, extension de Error
Hériter de SyntaxError
Promesses, async/await
Introduction: callbacks
Promesse (promise)
Re-résoudre une promesse ?
Un délai avec une promesse
Animer un cercle avec une promesse
Chaînage des promesses
Promesse: then contre catch
Gestion des erreurs avec des promesses
Erreur dans setTimeout
Promesse API
Promisification
Les micro-tâches
Async/await
Réécriture avec async/await
Réécriture de "rethrow" avec async/await
Appeler l'asynchrone à partir du non-asynchrone
Générateurs, itération avancée
Générateurs
Pseudo-random generator
Itérateurs et générateurs asynchrones
Modules
Modules, introduction
Exporter et importer
Importations dynamiques
Divers
Proxy et Reflect
Erreur lors de la lecture d'une propriété inexistante
Accès au tableau [-1]
Observable
Eval : exécution d'un texte code
Calculatrice-eval
Curryfication
Type référence
Vérification de la syntaxe
Expliquez la valeur de "this"
BigInt
Unicode et fonctionnement des chaînes de caractères
Navigateur : Document, Évènements, Interfaces
Document
L'environnement du navigateur, spécifications
L'arbre DOM
Parcourir le DOM
Enfants DOM
La question des frères et sœurs
Sélectionner toutes les cellules diagonales
Recherches: getElement*, querySelector*
Recherche d'éléments
Propriétés de nœud : type, balise et contenu
Compter les descendants
Qu'y a-t-il dans le nodeType ?
Balise dans le commentaire
Où est le "document" dans la hiérarchie ?
Attributs et propriétés
Obtenez l'attribut
Rendre les liens externes orange
Modification du document
createTextNode vs innerHTML vs textContent
Effacer l'élément
Pourquoi "aaa" reste-t-il ?
Créer une liste
Créer un arbre à partir de l'objet
Afficher les descendants dans un arbre
Créer un calendrier
Horloge colorée avec setInterval
Insérez le HTML dans la liste
Trier le tableau
Styles et classes
Create a notification
Taille des éléments et défilement
Quel est le défilement à partir du bas ?
Quelle est la largeur de la barre de défilement ?
Placer la balle au centre du terrain
La différence: largeur CSS vs clientWidth
Tailles des fenêtres et défilement
Coordonnées
Trouver les coordonnées de la fenêtre du champ
Afficher une note près de l'élément
Afficher une note près de l'élément (absolute)
Positionnez la note à l'intérieur (absolute)
Introduction to Events
Introduction to browser events
Hide on click
Hide self
Which handlers run?
Move the ball across the field
Create a sliding menu
Add a closing button
Carousel
Bubbling and capturing
Délégation d'événement
Masquer les messages avec délégation d'événement
Menu arborescent
Table triable
Comportement info-bulle
Actions par défaut du navigateur
Pourquoi "return false" ne fonctionne pas?
Capturer des liens dans l'élément
Galerie d'images
Distribution d'événements personnalisés
UI Events
Evenements de la souris
Liste sélectionnable
Déplacer la souris : mouseover/out, mouseenter/leave
Improved tooltip behavior
Info-bulle "Intelligente"
Les évènements Glisser-Déposer de la souris
Barre de défilement
Glisser les superhéros à l’intérieur du terrain
Les événements de pointeur
Le Clavier: les évènements keydown et keyup
Raccourcis clavier étendus
Le Défilement
Page sans Fin
Bouton Up/down
Charger les images visibles
Forms, controls
Propriétés de formulaire
Ajouter une option à un select
Focus: focus/blur
Div éditable
Modifier TD au clique
Souris dirigée par le clavier
Les événements: change, input, cut, copy, paste
Deposit calculator
Formulaires: l'événement et la méthode "submit"
Formulaire modal
Chargement du document et des ressources
Page: DOMContentLoaded, load, beforeunload, unload
Les scripts: async, defer
Chargement des ressources: onload et onerror
Charger des images avec une fonction de rappel
Miscellaneous
Mutation observer
Selection et Range
La boucle d'événement: les microtâches et les macrotâches
Quelle sera la sortie de ce code?
Articles supplémentaires
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
Concaténation de tableaux typés
TextDecoder and TextEncoder
Blob
File and FileReader
Requêtes réseau
Fetch
Récupérer des utilisateurs depuis GitHub
FormData
Fetch: Download progress
Fetch: Abort
Fetch: Requêtes Cross-Origin
Pourquoi avons-nous besoin d'Origin ?
API Fetch
Les objets URL
XMLHttpRequest
Upload pouvant être repris
L'interrogation longue
WebSocket
Server Sent Events
Stockage des données dans le navigateur
Cookies, document.cookie
LocalStorage, sessionStorage
Enregistrer automatiquement un champ de formulaire
IndexedDB
Animation
Courbe de Bézier
CSS-animations
Animate a plane (CSS)
Animate the flying plane (CSS)
Animated circle
Animated circle with callback
Animations JavaScript
Animer la balle rebondissante
Animer la balle pour qu'elle rebondisse vers la droite.
Composants Web
Prenons un peu de recul
Custom elements
Live timer element
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
Regexp ^$
Multiline mode of anchors ^ $, flag "m"
Limite de mot : \b
Trouvez l'heure
Échappement, caractères spéciaux
Ensembles et intervalles [...]
Java[^script]
Trouvez l'heure sous forme hh:mm ou hh-mm
Quantificateurs +, *, ? et {n}
Comment trouver une ellipse "..." ?
Regexp pour couleurs HTML
Quantificateurs gloutons ou paresseux
Correspondance pour /d+? d+?/
Trouvez des commentaires HTML
Trouver des balises HTML
Groupes capturant
Vérification d'adresse MAC
Trouver des couleurs au format #abc ou #abcdef
Trouvez tous les nombres
Parsez une expression
Rétro référence dans le pattern : \N et \k<name>
Alternance (OU) |
Trouver les langages de programmation
Trouver les paires de bbtag
Trouver les chaines de caractère
Trouver la balise entière
Lookahead et Lookbehind
Trouver des nombres entiers non négatifs
Insérer après Body
La rétroaction catastrophique
Marqueur collant "y", recherche depuis une position
Methodes des Expressions Rationnelles et des chaînes de caractères