JavaScript

Table des matières

● Introduction ● Les Dates
○ Le JavaScript, c’est quoi ? ○ L’objet de type « Date »
○ Premiers pas en JavaScript ○ Méthodes d’un objet « Date »
● Les variables ● Les opérateurs
○ Déclaration de variable ○ Les opérateurs d’égalité
○ Le typage ○ Les opérateurs de comparaison
○ Les valeurs prédéfinies ○ Les opérateurs logique
● Interaction avec le DOM - Les Bases ● Traitement conditionnelle
○ Introduction au DOM ○ La structure « if…else »
○ Interaction basique avec une page ○ La structure « switch »
● Les types de données ○ L’opérateur « ternaire »
○ Number ○ Les opérateurs logiques
○ BigInt ○ L’opérateur « nullish coalescing »
○ String
○ Boolean
○ Object
Table des matières
● Interaction avec le DOM - Modifier la page ● Les fonctions
○ Créer un nouvel élément ○ Déclaration et utilisation
○ Les méthodes d'interaction ○ Les paramètres
● Traitement itératif ○ Les fonctions fléchées
○ La structure « while » ○ Les « Callback »
○ La structure « do…while » ● Les timers
○ La structure « for » ○ Timeout
○ Instructions « continue » et « break » ○ Interval
● Les collections indexées ● Interaction avec le DOM - Les événements
○ Déclaration et utilisation ○ Abonnement aux events
○ Les méthodes des collections ○ Variable de l'événement
● Traitement itératif - Les collections ○ Types d’events des éléments du DOM
○ Les structures itératives ○ Types d’events de « Window »
○ La méthode « [Link] » ● Les exceptions
○ La structure « for…of » ○ L’instruction « try … catch … finally »
○ La structure « for…in » ○ Déclencher une exception
Table des matières
● Les promesses ● Annexes
○ Déclaration et utilisation ○ Aperçu des méthodes sur les types
○ Les méthodes des promesses ○ Les collections à clefs : Map et Set
○ Les fonctions asynchrones ○ Évaluation en court-circuit
● Interaction avec le DOM - Les formulaires ○ Le destructuring
○ Objectif des formulaires ● Références
○ Manipulation les formulaires
○ L’API de validation des contraintes
Introduction
Le JavaScript, c’est quoi ?
Introduction
Le langage JavaScript
Créé en 1995 par Brendan Eich et intégré au navigateur Netscape, celui-ci est utilisé
pour permettre de réaliser la validation des formulaires par le navigateur.
Ensuite, il a rapidement évolué pour devenir un langage puissant et polyvalent.

Quelques particularités du langage :

● Le code du JavaScript est interprété ou compilé à la volée.
● Il dispose d’un typage faible et dynamique.
● Il utilise le concept d’objet à prototype.
Utilisation du langage JavaScript
Bien que principalement connu en tant que langage de script Web, le langage
Javascript n’est plus limité à une utilisation au sein d’un navigateur Web.

Aujourd’hui, le JavaScript permet de réaliser, par exemple :

● Site web dynamique (formulaire interactif, animation 3D, jeux vidéo …)
● Application client Web, à l’aide des framework tels que NextJS, Angular,...
● Application server, grâce à des plateformes telles que NodeJS, Deno, Bun...
● Application Mobile, en utilisant les framework React Native, Ionic,...
Le standard ECMAScript
En 1997, le JavaScript est standardisé par la norme ECMAScript (ECMA-262).
Cette norme permet de définir :
● La syntaxe du langage.
● Les types de variables.
● Les objets et fonctions natives.
● Le mécanisme de traitement des erreurs.
● Etc…

Depuis 2015, le rythme de publication de la norme ECMAScript est annuel.

Site Web utile
➢ La documentation du JavaScript - MDN Web Docs
[Link]

➢ Spécification du langage ECMAScript

[Link]

➢ Contribuer à la norme ECMAScript

[Link]

➢ Vérifier la compatibilité des navigateurs

[Link]
Développer en JavaScript
Dans le cadre du cours, nous allons faire du JavaScript destiné à une page Web.
Il nous faudra donc les deux outils suivants : Un éditeur de texte et un navigateur.

Il existe plusieurs éditeurs de texte adaptés au JavaScript :

● Visual Studio Code
● WebStorm (gratuit pour une utilisation non commerciale)
● Vim
● Sublime Text
● …
Premiers pas en JavaScript
Introduction
Emplacement du code
Pour intégrer du code JavaScript dans une page web, il y a plusieurs possibilités :
● Directement dans la page HTML

● Depuis un fichier « js »
Déboguer son code
Les navigateurs web permettent d’avoir accès à un outil de développement.

La console permet de voir les messages envoyés par le code ou d’en exécuter.

Les raccourcis habituels pour l’ouvrir sont « F12 » ou « Ctrl Maj i ».

Utilisation de la console
Afficher un message dans la console : Résultat dans la console :

Les différentes méthodes permettent La console permet d’ajouter un filtre sur

d’afficher un message dans la console le niveau de criticalité des messages.
avec un niveau de criticalité.
Interaction avec le navigateur
Les navigateurs Web permettent d’afficher des popups depuis le JavaScript.
Cela permet de :
● Afficher un message
● Réaliser une saisie
● Obtenir une confirmation

Bien que ces méthodes d'interaction soient simple à utiliser, il ne faut pas en abuser.
Il sera toujours préférable d’interagir à l’aide de la page Web (via l’API du DOM), pour
offrir une meilleur expérience à l’utilisateur.
Interaction avec le navigateur
Afficher un message via le navigateur :

Résultat dans le navigateur :

Interaction avec le navigateur
Permettre la saisie de l'utilisateur via le navigateur :

Résultat dans le navigateur :

Interaction avec le navigateur
Obtenir une confirmation de l'utilisateur via le navigateur :

Résultat dans le navigateur :

Le mode strict
Depuis l’ECMAScript 5, il est possible d’utiliser une variante restrictive du JavaScript.

Cette variante est appelée le « Strict Mode », elle apporte les changements suivants :
● Élimination d’erreurs silencieuses, en les transformant en erreurs explicites.
● Interdiction de mots-clefs susceptibles d’être utilisés dans les futures versions.
● Correction des erreurs pour permettre une meilleure optimisation par les moteurs
JavaScript (Un même code sera donc exécuté plus rapidement en mode strict).

Pour l’activer sur un fichier, ajouter « 'use strict'; » en première instruction.

Les commentaires
Ajouter des commentaires dans votre code JavaScript permettra de documenter votre
code pour que celui-ci reste compréhensible.
● Commentaire sur une ligne

● Commentaire sur plusieurs lignes

Bien évidemment, les commentaires ne sont pas interprétés par le moteur JavaScript.
Les variables
Déclaration de variable
Les variables
Déclaration de variable
Il existe trois manières de déclarer des variables en JavaScript :
● Variable globale modifiable « var »
● Variable locale modifiable « let »
● Variable locale immuable « const »

Portée limitée Portée limitée

Global Ré-assignable Re-déclarable Hoisting
à la fonction au bloc

var ✔ ✔ ❌ ✔ ✔ ✔

let ❌ ✔ ✔ ✔ ❌ ❌

const ❌ ✔ ✔ ❌ ❌ ❌
Nommer une variable
Le nom d’une variable peut contenir les caractères suivants :
● des caractères alphanumériques
● des underscores
● des dollars
Le nom de la variable doit commencer par un dollar, un underscore ou une lettre.

Bonne pratique :
La convention de nommage pour les variables est le « camelCase ».
Le typage
Les variables
Le typage
Le JavaScript est un langage à typage dynamique.

Le type d’une variable sera défini dynamiquement lors de l'exécution en fonction du

type du contenu qu’elle stockera.
De plus, il est possible que le type d’une variable change durant l'exécution

Bonne pratique :
Ne pas utiliser une même variable pour stocker plusieurs types de données !
Les types de valeurs
En JavaScript, ce sont des « pseudo-objets » qui permettent de définir les différents
types de donnée avec leurs propriétés et leurs méthodes.
● Number : Un nombre (entier ou réel)
● BigInt : Un grand nombre entier
● String : Une chaîne de caractères
● Boolean : Type dont les valeurs possibles sont « true » ou « false »
● Undefined : Variable non initialisée
● Null : Variable initialisée sans aucune valeur
● Object : Élément complexe possédant plusieurs valeurs
Aperçu de quelques types de données
● Un nombre entier ● Un tableau de nombre

● Un nombre réel ● Un tableau de chaîne de caractères

● Une chaîne de caractères ● Une valeur « null »

● Un booléen ● Un objet
Obtenir le type d’une variable
L'opérateur « typeof » permet d'obtenir le type d’une variable.
Le type est renvoyé sous la forme d’une chaîne de caractères.

Remarque : L’utilisation de l’opérateur « typeof » sur une variable de type « Null »

renvoie la valeur « 'object' » pour des raisons historiques.
Obtenir le type d’une variable - Les objets
L'opérateur « typeof » ne peut pas indiquer le prototype d’un objet (tableau, date, …).
Celui-ci renverra toujours le résultat « 'object' ».

Pour connaître le prototype d’une variable de type « Object », il est possible :

● D’obtenir le nom du prototype via la propriété « constructor »
● De tester l'appartenance à un prototype via l’opérateur « instanceof »
Les valeurs prédéfinies
Les variables
Undefined
La valeur « undefined » est une propriété globale qui représente la primitive undefined.

Cette valeur primitive est affectée automatiquement :

● aux variables qui viennent d’être déclarées sans avoir été initialisée.
● aux paramètres de fonction qui ne possèdent pas de valeur par défaut.
Null
La valeur « null » est un littéral qui représente l’absence intentionnelle de valeur pour
une variable objet. C’est une valeur primitive du langage JavaScript.

Contrairement à la valeur « undefined », ce n’est pas une propriété globale.

NaN
La valeur « NaN » (Not a Number) est une propriété globale qui permet de représenter
une valeur numérique invalide.

Particularité de cette propriété « NaN » :

● Elle est de type « 'number' »

● Les opérateurs d’égalité ne peuvent pas être utilisés sur celle-ci.

Pour tester cette valeur, il est possible d’utiliser la méthode globale « isNaN(...) »
Infinity
La valeur « Infinity » est une propriété globale qui permet de représenter l’infini.

Comportement de la valeur « Infinity » :

● Tout nombre multiplié par Infinity sera égal à Infinity
● Zéro multiplié par Infinity sera égal à NaN
● NaN multiplié par Infinity sera égal à NaN
● Tout nombre divisé par Infinity sera égal à zéro
● Infinity divisé par Infinity sera égal à NaN
● Infinity divisé par un nombre sera égal à Infinity
Interagir avec le DOM
- Les Bases -
 Introduction au DOM
Interagir avec le DOM - Les Bases
C’est quoi le DOM ?
Le DOM (Document object Model) est la
représentation sous la forme d’objet des
données qui composent la structure et le
contenu d’une page Web et de XML.

Le DOM n’est pas un langage de

programmation, ce n’est qu’une API qui
met à disposition des méthodes pour
permettre de réaliser des interactions
avec des pages Web et du XML.
Apprentissage progressif du DOM
Bien que le DOM ne soit pas une matière qui fait partie du langage JavaScript,
interagir avec celui-ci à travers l’utilisation de l’API de DOM est essentiel.

Dans le cadre du cours, nous aborderons progressivement l’utilisation de l’api du DOM.

Les différents points de matière vu durant ce cours seront :
● Manipulation basique avec une page
● Modifier les éléments d’une page
● Interagir avec des événements
● Gestion de formulaire en JavaScript
Manipulation basique avec une page
Interagir avec le DOM - Les Bases
Récupérer un élément à l’aide de son Id
La méthode « getElementById(...) » retourne l'élément ayant l'attribut id spécifié
Récupérer un élément à l’aide d’un sélecteur CSS
La méthode « querySelector(...) » retourne le premier élément qui correspond au
sélecteur CSS
Récupérer des éléments à l’aide d’un sélecteur CSS
La méthode « querySelectorAll(...) » retourne une « NodeList » avec tous les éléments
qui correspondent au sélecteur CSS.
Quelques propriétés des éléments du DOM
● .id
Permet d’obtenir ou modifier la valeur de l'attribut « id » de la balise.

● .innerHTML
Permet d’obtenir ou modifier le contenu html de la balise.

● .textContent
Permet d’obtenir ou modifier le contenu textuel de la balise.
Le code HTML est automatiquement échappé.
Quelques propriétés des éléments du DOM
● .className
Permet d’obtenir ou modifier la valeur de l'attribut « class » de la balise.

● .classList
Permet d'interagir avec la valeur de l'attribut « class » de la balise via les méthodes :
➔ add(...) : Ajoute les classes spécifiées
➔ remove(...) : Supprime les classes spécifiées
➔ contains(...) : Vérifie la présence de la classe spécifiée
➔ replace(..., …) : Replace une classe par la nouvelle classe
➔ toggle(...) : Ajoute ou supprime la classe spécifiée
Quelques propriétés des éléments du DOM
● .firstElementChild / .lastElementChild
Permet d’obtenir respectivement le premier et le dernier élément de la balise.

● .children
Permet d’obtenir une collection avec tous les éléments enfants de la balise.

Remarque : Les propriétés ci-dessus permettent uniquement d’obtenir les nœuds de

type « Element » de la balise ciblé. Les nœuds de type « Text » et « Commentaire » ne
seront pas renvoyés.
Propriétés des balises de saisie de l’utilisateur
● .value
Permet d’obtenir ou modifier la valeur d’une balise « input / textarea / select ».

● .valueAsNumber
Permet d’obtenir ou modifier la valeur d’une balise « input » en type « number ».
Cette propriété n’est disponible que sur des balises de type « number » et « date ».

● .valueAsDate
Permet d’obtenir ou modifier la valeur d’une balise « input » en type « Date ».
Cette propriété n’est disponible que sur des balises de type « date ».
Propriétés des balises de saisie de l’utilisateur
● .checked
Permet d’obtenir ou modifier l’état une balise « input » de type « checkbox ».

● .disabled
Permet d’obtenir l’état de désactivation de la balise, et de modifier sa valeur.
Lorsqu'une balise est désactivé, elle n’est plus cliquable ou focusable.

● .readOnly
Permet de savoir si la balise est en lecture seul, et de modifier sa valeur.
Cette propriété fonctionne uniquement sur les balises de saisie de contenant du texte.
Interagir à l'événement « click » d’un élément
La méthode « .addEventListener('click', ...) » permet d’ajouter un code “en sommeil” sur
l'événement clique de l’élément ciblé.

Remarque : Les autres événements seront abordés ultérieurement dans le support.

Les types de données
 Number
Les types de données
Déclaration d’une variable de type « Number »
Le type « Number » permet de stocker un nombre réel.

Exemple de déclaration de variable

Pour la lisibilité, le symbole « underscore » peut être utilisé comme séparateur.

Il est possible d’écrire un nombre sous la forme d’exposant décimal.
Exemple : 5e2 → 5 x 10²
Convertir en nombre
Le JavaScript possède deux méthodes pour convertir une variable de type « String » :
● parseInt(..., ...)
● parseFloat(...)
En cas d’échec de la conversion, ces méthodes renvoient le résultat « NaN ».

Rappel :
Pour tester que la valeur est « NaN », il faut utiliser la méthode « isNaN(...) »
Convertir en nombre - Entier
La méthode « parseInt » permet d’obtenir la valeur entière d’une chaîne de caractères.
Celle-ci prend en paramètres :
➔ La chaîne de caractères à convertir
➔ La base (par défaut : 10)
Convertir en nombre - Réel
La méthode « parseFloat » permet d’obtenir la valeur d’un réel.
Celle-ci ne prend qu’un seul paramètre :
➔ La chaîne de caractères à convertir.
Les opérateurs arithmétiques
Le langage JavaScript supporte les
opérateurs arithmétiques suivants :
● Addition
● Soustraction
● Multiplication
● Division
● Modulo
● Puissance
Les opérateurs arithmétiques
Le langage JavaScript permet de
combiner un opérateur d’affectation avec
un opérateur arithmétique.
Les opérateurs d’incrément et de décrément
Le langage JavaScript permet de réaliser
des actions d’incrémentation et de
décrémentation à l’aide d’un raccourci
d'écriture.

Deux possibilités :
● Post-Action :
Après l’utilisation de la variable.
● Pré-Action :
Avant l’utilisation de la variable.
Les constantes de « Number »
Quelques constantes utiles du pseudo-objet« Number » :
Les méthodes de « Number »
Quelques méthodes utiles du pseudo-objet« Number » :

Remarque : Contrairement aux méthodes globales, les méthodes “isFinite” et “isNaN” du

pseudo-objet « Number » ne réalise pas de conversion avant de tester la valeur.
L’objet « Math »
L’objet « Math » est un élément natif du Javascript qui permet d’utiliser :
- Des constantes
- Des fonctions mathématiques
Quelques exemples :
 BigInt
Les types de données
Déclaration d’une variable de type « BigInt »
Le type « BigInt » permet de stocker des nombres entiers trop grands qui ne peuvent
pas être représentés correctement par le type « Number ».

Exemple de déclaration de variable

Les opérateurs
Les « BigInt » supportent les opérateurs arithmétiques, d’incrément et de décrément.

Remarque : Il n’est pas autorisé d’utiliser les opérateurs arithmétiques avec un autre
type de donnée. Les deux valeurs doivent être de type « BigInt ».
 String
Les types de données
Les chaînes des caractères
Les chaînes des caractères sont stockées dans des variables de type « String ».
Le contenu d’une chaîne de caractères doit être déclaré entre des guillemets.
C’est un type de donnée immuable, c'est-à-dire qu’il n’est pas possible de modifier son
contenu une fois que celle-ci a été créée.

Exemple de déclaration de variable

Il est possible d’utiliser les simples ou doubles quotes

La propriété « length » permet d’obtenir la longueur de la chaîne de caractères

Concaténation
Pour concaténer des chaînes de caractères, il est possible d’utiliser trois méthodes :

Le « Template String » nécessite d’utiliser les « backtick » et non des guillemets !

 Boolean
Les types de données
Déclaration d’une variable de type « Boolean »
Le type « Boolean » permet de stocker une variable booléenne.

Exemple de déclaration de variable

Conversion implicite en booléen
Le Javascript réalise une conversion implicite lorsqu’une valeur est évaluée dans un
contexte booléen (par exemple : dans la condition d’une structure conditionnelle).

Il existe donc deux types de valeur possible :

● Truthy : Les valeurs considérées comme vraies.
● Falsy : Les valeurs considérées comme fausses.
Les valeurs « Truthy »
Voici un tableau d’exemple de valeur « Truthy » de JavaScript
Valeur Type Description

true Boolean Le mot clef « true »

42 / -3.14 / 13n Number / BigInt Des valeurs numériques différentes de 0

Infinity / -Infinity Number Une valeur représentant l’infinie

{} Object Un objet

[] Array Un tableau

new Date() Object Une instance du prototype « Date »

"Della" / "false" String Une chaîne de caractères

Les valeurs « Falsy »
Voici un tableau avec la liste complète des valeurs « Falsy » de JavaScript
Valeur Type Description

null Null L’absence de valeur

undefined Undefined La valeur primitive « undefined »

false Boolean Le mot clef « false »

NaN Number Une valeur numérique invalide

0 / -0 / 0n Number / BigInt La valeur numérique zéro (positive ou négative)

"" / '' / `` String Une chaîne de caractères vide

[Link] Object Le seul objet « Falsy » en JS → Pour des raison de compatibilité

 Object
Les types de données
Création d’un objet en JavaScript
Le type « Object » permet de stocker un ensemble de valeur sous forme de propriété.

Exemple de déclaration d’objet

Interagir avec les propriétés d’un objet
Les « Property accessors » (Accesseurs de propriétés) permettent d’accéder aux
différentes propriétés d’un objet à l’aide d’une notation avec un point ou des crochets.
L’opérateur « Optional chaining »
Lorsqu’on lit la valeur d’une propriété d’un objet « null » ou « undefined », une erreur est
levée par le JavaScript.

Pour éviter cette erreur, il est possible d’utiliser l’opérateur « Optional chaining ».
L’opérateur fonctionne comme la notation « . », sauf qu’il ne déclenche pas d’erreur sur
les objets « null » ou « undefined », à la place, la valeur « undefined » est renvoyé.
Les Dates
L’objet de type « Date »
Les Dates
Les objets de type « Date »
Le type « Date » permet de représenter une date/heure en JavaScript.
Une date est stockée sous la forme d’un entier qui correspond au nombre de
millisecondes écoulées depuis le premier janvier 1970 (UTC).

Pour initialiser une variable date, il est possible d’utiliser le constructeur :

● Sans paramètre (date et heure courante).
● Avec des valeurs individuelles pour la date et l’heure.
● Avec un nombre qui représente une valeur temporelle (en millisecondes) .
● Avec une chaîne de caractère au format ISO 8601 : YYYY-MM-DDTHH:mm:[Link]
Les objets de type « Date »
Exemple de déclaration de variable de type « Date »
Méthodes d’un objet « Date »
Les Dates
Getter et setter d’une date
● .getDate() / .setDate(nbJour)
Permet d’obtenir ou de modifier la valeur du jour du mois d’une date.

● .getMonth() / .setMonth(indexMois)
Permet d’obtenir ou de modifier l’index (0-11) représentant le mois d’une date.

● .getFullYear() / .setFullYear(nbAnnée)
Permet d’obtenir ou de modifier la valeur de l’année d’une date.
Getter et setter d’une date
● .getHours() / .setHours(nbHeure)
Permet d’obtenir ou de modifier la valeur de l’heure d’une date.

● .getMinutes() / .setMinutes(nbMinute)
Permet d’obtenir ou de modifier la valeur des minutes d’une date.

● .getSeconds() / .setSeconds(nbSeconde)
Permet d’obtenir ou de modifier la valeur des secondes d’une date.
Getter et setter d’une date
● .getMilliseconds() / .setMilliseconds(nbMilliseconde)
Permet d’obtenir ou de modifier la valeur des millisecondes d’une date.

● .getDay()
Permet d’obtenir la valeur du jour de la semaine (0-6) d’une date. (0 = Dimanche)

● .getTime()
Permet d’obtenir en millisecondes le temps écoulées depuis le premier janvier 1970.
Convertir une date en chaîne de caractères
● .toString()
Renvoie la date formatée en chaîne de caractère.
Exemple : « Tue Aug 19 1975 23:15:30 GMT+0000 (Coordinated Universal Time) »

● .toISOString()
Renvoie la date formatée avec la norme ISO 8601 : YYYY-MM-DDTHH:mm:[Link]

● .toJSON()
Renvoie la date formatée en JSON (en utilisant la méthode « toISOString »).
Convertir une date en chaîne de caractères
● .toLocaleString(locale, options)
Renvoie la date formatée en chaîne de caractère en tenant compte de la locale.
Les « options » permet de préciser le contexte de formatage.

● .toLocaleDateString(locale, options)
Même comportement que « toLocaleString » limité à la date.

● .toLocaleTimeString(locale, options)
Même comportement que « toLocaleString » limité à l'heure.
Les opérateurs
Les opérateurs d’égalité
Les opérateurs
Les différents opérateurs d’égalité et d’inégalité
Le langage Javascript possède deux types opérateurs : faible et strict.

● Égalité (==) / Inégalité (!=)

L’opérateur tente de convertir les valeurs si celle-ci sont de type différents.
Ensuite, il compare les valeurs et renvoie le résultat booléen.

● Égalité stricte (===) / Inégalité stricte (!==)

L’opérateur strict considère comme fausse une égalité entre deux valeurs de type
différents. Si le type est identique, il compare les valeurs et retourne le résultat.
Danger de l’utilisation des opérateurs « faibles »
L’utilisation des opérateurs d’égalités
faibles est déconseillée car il est plus
compliqué de prévoir son résultat dû au
mécanisme de conversion réalisé.

Il est donc conseillé de privilégier

l’utilisation des opérateurs stricts.
Opérateurs de comparaison
Les opérateurs
Les différents opérateurs de comparaison
Le langage Javascript possède quatre opérateurs de comparaison :
● < : Plus petit
● <= : Plus petit et égal
● > : Plus grand
● >= : Plus grand et égal
Les types comparés par l’opérateur
Les opérateurs de comparaison permettent de tester :
● Deux valeurs de type numérique (Number ou BigInt)
● Deux chaînes de caractères (String)

Si les valeurs comparées sont d’un autre type, le moteur Javascript tentera de convertir
les valeurs non-numériques et ensuite de réaliser une comparaison numérique.

NB : Si une des valeurs vaut « NaN », la comparaison sera toujours fausse.

Les opérateurs logiques
Les opérateurs
Les opérateurs logiques
Le langage Javascript possède 3 opérateurs logiques :
● && : Le ET logique
Renvoie « true » si les deux opérandes sont « true ».

● || : Le OU logique
Renvoie « true » si au moins une des deux opérandes est « true ».

● ! : Le NON logique
Renvoie la valeur booléenne inversée de son opérande.
Traitement conditionnel
La structure « if…else »
Traitement conditionnel
Le « if…else »
La structure « if…else » permet d'exécuter du code en fonction de condition(s).
Elle peut être constituée de 3 blocs de code :
● if : Condition initiale à tester [Obligatoire]
● else if : Condition à tester si les précédentes sont fausses
● else : Si aucune condition n’a été validée

Syntaxe :
Exemple de structure « if…else »
La structure « switch »
Traitement conditionnel
Le « switch »
La structure « switch » permet d'exécuter du code en fonction d’une égalité stricte

Syntaxe :
Exemple de structure « switch »
L’opérateur « ternaire »
Traitement conditionnel
L’opérateur ternaire
Cet opérateur permet d’affecter une variable sur base d’une condition.
Il est souvent utilisé comme raccourci pour la déclaration d’un « if...else ».

Sa syntaxe est composée de 3 opérantes :

- Une condition suivie d’un point d'interrogation (?)
- L’expression à réaliser si la condition est « Truthy », suivie de deux-point (:)
- Finalement, l’expression à réaliser si la condition est « Falsy »
Exemple d’utilisation de l’opérateur ternaire
L’opérateur « nullish coalescing »
Traitement conditionnel
L’opérateur « nullish coalescing »
Cet opérateur permet de réaliser une condition avec la valeur « null » ou « undefined ».
Sa syntaxe se compose de 2 expressions séparées par deux points d'interrogation (??)

Il peut par exemple être utilisé pour :

● Affecter une valeur par défaut, si une variable ciblée n’a pas de valeur.
● Créer un court-circuit dans l’évaluation de l’instruction.

Remarque : contrairement à l’opérateur logique OU, le nullish coalescing ne base pas

son résultat sur les valeurs « falsy ». Il ne prend en compte que « null » ou « undefined »
!
Interaction avec le DOM
- Modifier la page -
 Créer un nouvel élément
Interaction avec le DOM - Modifier la page
Créer un élément HTML
La méthode « createElement » de « document » permet de générer un nouvel élément.
Elle prend en paramètre le type de balise à créer.

Remarque : L’élément sera créé en mémoire, mais il ne sera pas ajouté à la page Web.
Les méthodes d'interaction
Interaction avec le DOM - Modifier la page
Les méthodes d'interaction
Les éléments HTML héritent des classes « Node » et « Element », celles-ci possèdent
plusieurs méthodes qui permettent d’interagir avec la page Web.

Ces méthodes permettent de :

● Ajouter un élément enfant.
● Insérer un élément adjacent.
● Supprimer un élément.

Remarque : Un élément déjà présent dans la page sera déplacé, lorsqu’il est re-ajouté.
Ajouter un élément enfant
● [Link](element)
Permet d’ajouter un élément en tant que dernier enfant de la balise parent.

● [Link](element, referenceElement)
Permet d’ajouter un élément dans la balise parent avant un élément de référence.
Ajouter un élément enfant
● [Link](element1, …, elementN)
Permet d’ajouter des éléments en tant que derniers enfants de la balise parent.

● [Link](element1, …, elementN)
Permet d’ajouter des éléments en tant que premiers enfants de la balise parent.
Insérer un élément adjacent
● [Link](position, element)
Permet d'insérer un élément à une position par rapport à l’élément de référence.
La position où celui-ci est ajouté dépend de la valeur du paramètre :
- beforebegin : Avant l’élément de référence.
- afterbegin : En premier enfant à l’intérieur de l’élément de référence.
- beforeend : En dernier enfant à l’intérieur de l’élément de référence.
- afterend : Après l’élément de référence.
Insérer un élément adjacent
● [Link](element1, …, elementN)
Permet d'insérer des éléments avant l’élément référence.

● [Link](element1, …, elementN)
Permet d'insérer des éléments après l’élément référence.
Supprimer un élément
● [Link](targetElement)
Permet de supprimer l’élément ciblé de la balise parent.

● [Link]()
Permet de supprimer l’élément ciblé.
Traitement itératif
La structure « while »
Traitement itératif
Le « while »
La structure « while » permet de répéter l'exécution d’un bloc de code.
Fonctionnement de la boucle :
● Test de la condition.
● Si la condition est « vraie », exécution du code
● Retour à la condition

Syntaxe :
Exemple de structure « while »
La structure « do…while »
Traitement itératif
Le « do…while »
La structure « do…while » permet d'exécuter un bloc de code et de le répéter.
Fonctionnement de la boucle :
● Exécution du code
● Test de la condition.
● Si la condition est « vraie », retour à l’exécution du code

Syntaxe :
Exemple de structure « do…while »
La structure « for »
Traitement itératif
Le « for »
La structure « for » est une boucle qui possède un bloc de code d’initialisation et final.
Fonctionnement de la boucle :
● Exécution du code d’initialisation
● Test de la condition.
● Si la condition est « vraie », exécution du code de la boucle et du code final.
● Retour à la condition

Syntaxe :
Exemple de structure « for »
Instructions « continue » et « break »
Traitement itératif
Les instructions d’une structure itérative
Les mots clefs « continue » et « break » sont deux instructions pouvant être utilisées
dans une structure itérative.

● continue
Permet d’arrêter le traitement actuel et de passer à l'itération suivante de la boucle.

● break
Permet de terminer la boucle et de passer au code suivant.
Les collections indexées
Déclaration et utilisation
Les collections indexées
C’est quoi une collection indexée ?
Une collection indexée est une structure de données qui permet de stocker un
ensemble de valeurs dans une variable et de les rendre accessibles à l’aide d’un index.

La valeur d’index commence à 0 et celui-ci est une valeur entière positive.

Les collections indexées en JavaScript
En JavaScript, les collections indexées sont implémentées par l'objet global « Array ».

Particularités d’une collection de type « Array » :

● On peut accéder à leur contenu à l’aide de l’opérateur d'accès [].
● Le nombre d’éléments est dynamique.
● Les valeurs stockées peuvent être de type différents (non conseillé).
● Les structures itératives permettent de parcourir leur contenu.
● Elles possèdent des méthodes.
Les objets de type « Array »
Exemple de déclaration de variable de type « Array »
Les objets de type « Array »
L’opérateur d'accès [] permet d’obtenir ou de modifier la valeur d’un élément du tableau
à l’aide de son index.

Si on affecte une valeur à un index supérieur à l’index maximum, l’élément est ajouté.
Les objets de type « Array »
Les méthodes « [Link](...) » et « [Link](...) » permettent de visualiser
facilement le contenu du tableau dans le terminal
Les objets de type « Array »
La propriété « length » permet d’obtenir la longueur du tableau.

Remarque : La propriété prend en compte les éléments vides du tableau.

Les méthodes des collections
Les collections indexées
Ajouter des éléments
● .push(element1, ..., elementN)
Permet d’ajouter un ou plusieurs éléments à la fin de la collection.

● .unshift(element1, ..., elementN)

Permet d’ajouter un ou plusieurs éléments au début de la collection
Supprimer un élément
● .pop()
Permet d’obtenir et de supprimer le dernier élément de la collection

● .shift()
Permet d’obtenir et de supprimer le premier élément de la collection
Ajouter et supprimer des éléments
● .splice(indexDebut, deleteCount [, element1, ..., elementN])
Permet de supprimer de 0 à plusieurs éléments à partir de l’index reçu et ensuite
d’ajouter de 0 à plusieurs éléments sur la collection.

● .toSpliced(indexDebut, deleteCount, element1, ..., elementN)

Traitement identique à la méthode « .splice(...) » sauf que celle-ci crée une copie de la
collection qui est modifiée et renvoyée.
Convertir en chaîne de caractères
● .join([séparateur])
Renvoie une chaîne de caractères en concaténant tous les éléments d'un tableau
séparés par le séparateur (par défaut : «,»)

● .toString()
Renvoie une chaîne de caractères représentant le tableau spécifié et ses éléments.
Cette méthode génère le même résultat que la méthode « .join() ».
Trier les éléments
● .sort([methodeComparaison])
Permet de trier les éléments d’un tableau sur base d’une méthode qui doit retourner un
nombre positif, négatif ou zéro.

● .toSorted([methodeComparaison])
Traitement identique à la méthode « .sort(...) » sauf que celle-ci crée une copie de la
collection qui est modifiée et renvoyée.
Inverser l’ordre des éléments
● .reverse()
Permet d’inverser l’ordre des éléments d’un tableau sur base d’une fonction qui doit
retourner un nombre positif, négatif ou zéro.

● .toReversed()
Traitement identique à la méthode « .reverse(...) » sauf que celle-ci crée une copie de la
collection qui est modifiée et renvoyée.
Fusionner des tableaux
● .concat(element1, ..., elementN)
Permet de générer un tableau en fusionnant deux ou plusieurs tableaux.
Extraire des portions de tableaux
● .slice([start, [end]])
Permet de générer un tableau qui contient la copie d’une portion du tableau cible.
La portion sélectionnée dans le tableau est définie par des index.
Rechercher un élément
● .includes(elementRecherché [, indiceDebut]);
Permet de déterminer si le tableau contient une valeur recherchée.

● .some(methodeRecherche)
Permet de déterminer si le tableau contient une valeur sur base d’une méthode de test.
Obtenir un élément
● .find(methodeRecherche) / .findLast(methodeRecherche)
Permet d’obtenir la première ou dernière valeur correspondant à une méthode de test.
Appliquer un filtre à la collection
● .filter(methodeFiltre)
Permet d’obtenir la copie filtrée d’un tableau sur base d’une fonction.
Transformer la collection
● .map(methodeTransformation)
Permet d’obtenir la copie modifiée d’un tableau sur base d’une fonction.
Traitement itératif
- Les collections -
Les structures itératives
Traitement itératif - Les collections
Parcourir une collection avec une boucle
Pour parcourir les différents éléments d’une collection indexée, il est possible d’utiliser
les structures itératives précédemment abordées :
● « while »
● « do…while »
● « for »

Pour cela, il sera souvent nécessaire de créer une variable qui nous permettra de définir
la condition de fin de boucle, pour éviter de “sortir” de la collection.
Exemple avec la structure « while »
Exemple avec la structure « for »
Les autres boucles pour les collections
Bien que ces structures itératives soient suffisantes, le langage JavaScript propose
d’autres solutions pour manipuler les collections.

Celui-ci permet également d’utiliser d’autres boucles adaptées aux collections :

● La méthode « forEach (...) » du prototype Array
● La structure « for .. of »
● La structure « for .. in »
La méthode « [Link] »
Traitement itératif - Les collections
Le « forEach »
La méthode « forEach » du prototype « Array » permet d'exécuter un bloc de code pour
chaque élément d’une collection à l’aide d’une méthode reçue en paramètre.
La méthode peut posséder jusqu’à 3 paramètres :
● Premier : La valeur de l'élément en cours de traitement.
● Deuxième (Optionnel) : L'indice de l'élément en cours de traitement.
● Troisième (Optionnel) : La collection utilisée par la méthode « forEach ».

Syntaxe :
Exemple de la méthode « forEach »
Limitation de la méthode « forEach »
La méthode « forEach » parcourt la totalité des éléments de la collection.
Il n’est pas possible d’arrêter le traitement d’une boucle « forEach », à part en
déclenchant une exception (code d’erreur).

Si vous avez besoin d'arrêter la boucle, utiliser plutôt :

● Une boucle classique (for, while, do .. while)
● Une boucle for .. of
● Une boucle for .. in
● Une méthode des collections (filter, find, findIndex, …)
La structure « for…of »
Traitement itératif - Les collections
Le « for .. of »
La structure « for .. of » permet de parcourir des objets itérables (Array, Map, String, ...).

Cette boucle permet de parcourir tous les éléments d’un itérable.

La variable initialisée par la structure reçoit une copie de la valeur parcourue.

Syntaxe :
Exemple de structure « for .. of »
La structure « for…in »
Traitement itératif - Les collections
Le « for .. in »
La structure « for .. in » permet de parcourir les propriétés énumérables d’un objet.

Bien que cette boucle permet de parcourir les collections, il n’est pas recommandé de
l’utiliser car :
● Elle ne permet pas de garantir l’ordre de parcours de la collection.
● Elle manipule les index (int) sous la forme de chaîne de caractères (string)

Syntaxe :
Exemple de structure « for .. in »
Les fonctions
Déclaration et utilisation
Les fonctions
Déclaration d’une fonction
Les fonctions permettent de stocker un
bloc de code et de l'exécuter.

Les fonctions ont comme objectif :

● D’éviter de répéter du code.
● Diviser le code en un ensemble de
fonction simple.

La fonction renvoie la valeur retournée

par l’instruction « return », ou «
undefined » si la fin du code a été atteint.
Déclaration d’une fonction
Ils est également possible de déclarer une fonction en l’affectant à une variable.
Cela permet, par exemple, de garantir son unicité en l’affectant à une constante.

Remarque : contrairement à la syntaxe classique, une fonction déclaré à l’aide d’une

variable ne peut pas être utilisé avant sa déclaration.
Les paramètres
Les fonctions
Paramètres d’une fonction
Lors de la déclaration d’une fonction, il
est possible de définir ses paramètres.
Les paramètres peuvent être :
● Une valeur primitive (number, …)
● Un objet
● Une collection
● Une fonction
Paramètres avec une valeur par défaut
Il est possible de définir une valeur par
défaut aux paramètres d’une fonction.

Pour cela, il faut définir la valeur par

défaut lors de la déclaration du
paramètre à l’aide de l’opérateur égal.

Cette valeur sera utilisée si :

● Aucune valeur n’a été définie
● La valeur « undefined » a été passée
Paramètre avec l’opérateur « rest »
L’opérateur « rest » permet de définir un
paramètre qui peut obtenir un nombre
indéfini d'arguments.
Les valeurs reçues seront stockées sous
la forme d’une collection (Array).

La syntaxe de l’opérateur est « … »

Les fonctions fléchées
Les fonctions
Déclaration d’une fonction fléchée
L’écriture fléchée permet de déclarer une
fonction à l’aide de la syntaxe :
« ( ... ) => { … } ».
Note : lorsqu’il n’y a qu’un seul paramètre,
les parenthèses sont optionnelles.

Lors de la déclaration d’une fonction

fléchée, il est possible ne pas définir de
corps à celle-ci.
Dans ce cas, il ne faut pas mettre les
accolades et le « return » est implicite.
Les « Callback »
Les fonctions
Principe de « Callback »
Les callback (fonction de rappel en francais) consistent à envoyer une fonction “interne”
à une autre fonction en tant qu’argument.
Cette fonction “interne” sera ensuite invoquée par la fonction pour réaliser une action.

Exemple de fonction (qu’on a utilisé) qui attendent un callback en paramètre :

● [Link]('click', callback)
● array.find(callback)
● array.filter(callback)
Exemple d’implémentation d’un « Callback »
Les timers
Timeout
Les timers
Déclencher un timer « Timeout »
La méthode « setTimeout » permet l’appel d’une fonction après un délai.

Cette méthode prend en arguments :

- functionRef (obligatoire)
La fonction à exécuter.
- delay
Le délai à appliquer.
- param1, …, paramN
Les arguments à envoyer à la fonction exécutée.
Cette méthode retourne un entier positif qui représente le « Timeout Id »
Arrêter un timer « Timeout »
La méthode « clearTimeout » permet d’annuler un timer généré par « setTimeout ».

Cette méthode prend en argument le « Timeout Id » du timer à annuler.

Remarque : Si le paramètre « Timeout Id » fourni n'identifie pas un timer

précédemment créé, l’appel de cette méthode ne fait rien.
Interval
Les timers
Déclencher un timer « Interval »
La méthode « setInterval » permet l’appel répété d’une fonction espacé d’un délai fixe.

Cette méthode prend en arguments :

- functionRef (obligatoire)
La fonction à exécuter.
- delay
Le délai à appliquer.
- param1, …, paramN
Les arguments à envoyer à la fonction exécutée.
Cette méthode retourne un entier positif qui représente le « Interval Id »
Arrêter un timer « Interval »
La méthode « clearInterval » permet d’annuler un timer généré par « setInterval ».

Cette méthode prend en argument le « Interval Id » du timer à annuler.

Remarque : Si le paramètre « Interval Id » fourni n'identifie pas un timer précédemment

créé, l’appel de cette méthode ne fait rien.
Les exceptions
L’instruction « try … catch … finally »
Les exceptions
L’instruction « try … catch … finally »
Le « try » permet d'exécuter un bloc de code dans lequel une erreur pourrait survenir.
Cette instruction ne peut pas être utilisée seule. Celle-ci doit être suivie de minimum
une des clauses suivantes :
- La clause « catch » : Code permettant de réagir à l’exception.
- La clause « finally » : Code qui sera toujours exécuté.

Il peut donc y avoir trois formes suivantes pour cette instruction :

➔ try … catch
➔ try … finally
➔ try … catch … finally
La clause « catch »
La clause « catch » permet de définir un bloc de code qui s'exécutera si une exception
se déclenche dans le « try ».
La clause « catch »
S’il est nécessaire de réaliser un traitement différent en fonction du type d’erreur, il faut
utiliser une structure conditionnelle avec l'opérateur « instanceOf ».
La clause « finally »
La clause « finally » permet de définir du code qui s'exécutera après l'exécution du code
du « try » et de la clause « catch », si celle-ci est présente.
Déclencher une exception
Les exceptions
Déclencher une exception
L’instruction « throw » permet de déclencher une exception.
Celle-ci entraîne l’arrêt de l'exécution de la fonction actuelle et le premier bloc « catch »
rencontré reprend la suite de l’exécution du script.
Si aucun « catch » n’a été trouvé, l'exécution du script se termine.

Lorsqu’on souhaite déclencher une exception, il est nécessaire de définir une

expression avec la valeur à renvoyer
Déclencher une exception - Best Practice
Bien qu’il n’y ai pas de limitation de type Liste des exceptions de ECMAScript :
pour l’expression envoyée par le « throw ● Error
», la valeur envoyée par l’exception
devrait toujours être d’un type « Error ». ● EvalError
La raison étant que le code qui traite ● RangeError
l’exception pourrait s'attendre à utiliser ● ReferenceError
certaines propriétés, telles que le
message. ● SyntaxError
● TypeError
Les types d’exceptions pour du JS client : ● URIError
- Les ECMAScript exceptions. ● AggregateError
- La « DOMException »
Interaction avec le DOM
- Les événements -
 Abonnement aux events
Interaction avec le DOM - Les événements
Interagir aux événements d’une page Web
Les éléments d’une page Web peuvent provoquer des événements.
L’API de DOM permet au JavaScript de réagir à ceux-ci à l’aide de fonction.

Pour s’abonner à un event, il est possible d’utiliser deux techniques :

● La propriété de gestion d'event (Spécification du DOM 0 - Ancienne manière)
Permet de remplacer l’écouteur d'événement existant de l'élément.
● Utilisation des Event Listeners (Spécification du DOM 2)
Permet d’ajouter ou retirer l'enregistrement d’un nouvel écouteur d'événements.
La propriété de gestion d'évent - Via le code HTML
Pour lier une fonction à un event depuis le code HTML, il faut :
- Créer une fonction dans le code JS
- Définir un attribut commençant par « on… » suivit du type d’event dans la balise.
- Affecter à cet attribut, le nom de la fonction sans oublier les parenthèses.
La propriété de gestion d'évent - Via le code JS
Pour lier une fonction à un event à l’aide de la propriété de gestion d'event, il faut :
- Récupérer la balise HTML dans le code JS.
- Utiliser une propriété d'event commençant par « on… » suivi du type d'event.
- Affecter à cette propriété, le callback à exécuter.
Les Event Listeners
S’abonner à des events à l’aide de « Event Listener » est la manière d'enregistrer un
écouteur d’événements telle que spécifiée dans le DOM du W3C.

Les Event Listeners ont comme avantages :

● de pouvoir ajouter plusieurs « listener » sur un même événement,
● de supprimer les instances dupliquées si des « listener » identiques sont ajoutés
plusieurs fois avec les mêmes paramètres,
● de fonctionner avec tout élément DOM (pas uniquement les éléments HTML).
● de pouvoir retirer un ou plusieurs « listener » d’un élément.
Les Event Listeners - S’abonner à un événement
La méthode « addEventListener » permet d’ajouter un « Listener » à un élément.
Cette méthode prend en arguments :
- Le type d’event
- Une fonction de callback
- Un objet « options » ou un booléen « useCapture » (Optionnel)
Les Event Listeners - S’abonner à un événement
L’objet « options » permet de spécifier les caractéristiques du « listener».

Les options disponibles sont :

➔ once (Booléen)
Permet d’indiquer que le listener doit être supprimé après son premier appel
➔ passive (Booléen)
Permet de spécifier que le listener ne doit pas appeler la méthode « preventDefault »
➔ capture (Booléen)
Permet de définir que l’événement sera distribué au « Listener » avant d’être
distribué aux « EventTarget » situés en dessous dans l'arborescence DOM.
Les Event Listeners - Se désabonner à un événement
La méthode « removeEventListener » permet de retirer un « Listener » à un élément.
Cette méthode prend en arguments :
- Le type d’event
- Une fonction de callback
- Un objet « options » ou un booléen « useCapture » (Optionnel)

Remarque : Si l’abonnement du listener a été configuré avec l’option de « capture » (via

l’objet options ou useCapture), il sera nécessaire de le définir lors du désabonnement.
 Variable de l'événement
Interaction avec le DOM - Les événements
La variable de l'événement
Une fonction abonnée à un événement reçoit en paramètre la variable d’évent.
Cette variable permet :
● D'accéder à des information relative à l’event
● Déclencher des comportement sur l’évent.
Quelques propriétés de la variable de l'événement
● .type
Permet d’obtenir le type d’événement déclenché.

● .target
Identifie l'élément à partir duquel l'événement s'est déclenché.

● .currentTarget
Identifié la cible pour l'évènement lorsque celui-ci traverse le DOM (via la propagation).
Celle-ci fait toujours référence à l’élément sur lequel l’abonnement a été réalisé.
Quelques méthode de la variable de l'événement
● .preventDefault()
Annule l’action par défaut de l’événement.

● .stopPropagation()
Arrête la propagation de l’événement aux éléments parents.

● .stopImmediatePropagation()
Arrête la propagation de l’événement à élément en cours et aux éléments parents.
Types d’events des éléments du DOM
Interaction avec le DOM - Les événements
Liste non exhaustive des events
● click ● keydown
Clique sur un élément. Une touche est pressée.

● dblclick ● keyup
Double clique sur un élément. Une touche est relâchée.

● contextmenu ● keypress (déprécié)

Ouverture du menu via le clique droit. Une touche de caractère est pressée.
Liste non exhaustive des events
● focus / focusin La différence entre les évents de focus
L'élément reçoit le focus. est que « focus / blur » ne se propage
pas, à l’inverse de « focusin / focusout ».
● blur / focusout
L'élément perd le focus.

● mousemove
Le curseur est déplacé.
Liste non exhaustive des events
● change ● submit
La valeur d'une balise a été modifiée. Le formulaire a été validé.

● input ● reset
La valeur d'une balise est modifié, Le formulaire a été réinitialisé.
cet event se déclenche en temps réel.
● formdata
● invalid Génération d’un objet « FormData »,
Le contenu d’un balise input est invalide. celui-ci contient les données du form.
Types d’events de « Window »
Interaction avec le DOM - Les événements
Liste non exhaustive des events de Window
● load ● online
La page et toutes ses dépendances sont Le navigateur a obtenu l'accès au réseau
complètement chargées. et « [Link] » passe à true.

● beforeunload ● offline
La page va être déchargée. Permet Le navigateur perd l'accès au réseau
d'interrompre la fermeture de celle-ci. et « [Link] » bascule à false.

● languagechange
La langue préférée (via le navigateur) de
l'utilisateur a été changée.
Les promesses
Déclaration et utilisation
Les promesses
C’est quoi une promesse ?
Le mécanisme des promesses permet à une méthode de renvoyer un objet de
type « Promise », alors que celle-ci n’a pas encore terminé sa tâche.
Cet objet représente littéralement la promesse faite par cette méthode de transmettre
un résultat une fois sa tâche accomplie.

Les promesses sont généralement utilisées pour réaliser des actions asynchrones en
JavaScript et cela permet d’éviter d’avoir recours au mécanisme des callbacks.
L’objet de type « Promise »
Un objet « promise » représente donc une valeur qui peut être disponible maintenant,
dans le futur, voire jamais.

Cet objet peut être dans l'un de ces trois états :

● pending (en attente) : la promesse est en cours de traitement.
● fulfilled (tenue) : la promesse est résolue et a réussi.
● rejected (rompue) : la promesse est résolue et a échoué.
Création d’une promesse
Pour créer un objet du type « Promise », il est nécessaire de l’instancier à l’aide de son
constructeur en lui fournissant en paramètre une fonction de callback.
Cette fonction contiendra le code à exécuter et possède jusqu'à deux paramètres :
● resolve : Promesse « fulfilled »
Fonction pour terminer une promesse avec succès.
Celle-ci prend un paramètre pour renvoyer une valeur.
● reject : Promesse « rejected »
Fonction pour terminer une promesse avec une erreur.
Celle-ci prend un paramètre pour renvoyer la raison de l'échec de la promesse.
Exemple de création d’une fonction avec une promesse
Utilisation d’une promesse
Pour utiliser une promesse, il est possible d’utiliser trois méthodes sur cet objet :
● .then( resolveCallback [, rejectCallback] )
Permet de traiter le succès et l’erreur (si le callback est défini) d’une promesse.
● .catch( rejectCallback )
Permet de traiter l’erreur d’une promesse.
● .finally( finallyCallback)
Permet de traiter la complétion d’une promesse (en succès ou en erreur).

Ces méthodes renvoient également une promesse, ce qui permet de les enchaîner.
Exemple d’utilisation d’une promesse
Enchaîner des promesses
Les méthodes « then», « catch » et « finally » renvoient toutes des promesses.
Ce qui permet de pouvoir les chaînées.
Enchaîner des promesses
Exemple avec quatre promesses chaînés
Les méthodes des promesses
Les promesses
Méthode pour créer des promesses terminées
● [Link]( [data] )
Créer un objet du type « Promise » qui est résolu avec la valeur donnée.

● [Link]( [reason] )
Créer un objet du type « Promise » qui est rejeté avec la cause.
Méthode pour utiliser des promesses en parallèle
● [Link](promiseCollection)
Créer une promesse qui attend que toutes les promesses reçues soit résolue.
Elle renvoie le résultat de chaque promesse dans une collection.
Dès qu’une des promesse est rejeté, celle-ci passe en état « rejected ».
Si la collection reçu est vide, la promesse sera résolue avec une collection vide.
Méthode pour utiliser des promesses en parallèle
● [Link](promiseCollection)
Créer une promesse qui attend que toutes les promesses reçues soit terminé.
Elle renvoie le résultat de chaque promesse (fulfilled ou rejected) dans une collection.
Si la collection reçu est vide, la promesse sera résolue avec une collection vide.
Méthode pour utiliser des promesses en parallèle
● [Link](promiseCollection)
Créer une promesse qui attend qu’une des promesses reçues soit résolue.
Elle renvoie le résultat de la première promesse résolue.
Si toutes les promesses sont rejetées, celle-ci passe en état « rejected ».
Si la collection reçu est vide, la promesse sera rejeté avec une “AggregateError”.
Méthode pour utiliser des promesses en parallèle
● [Link](promiseCollection)
Créer une promesse qui attend qu’une des promesses reçues soit terminée.
Elle renvoie le résultat de la première promesse terminé (fulfilled ou rejected).
Si la collection reçu est vide, la promesse sera continuellement en attente.
Les fonctions asynchrones
Les promesses
Les fonctions asynchrones
Une fonction peut être déclaré en tant
que fonction asynchrone, pour cela, il est
nécessaire de la précéder de « async ».
Celle-ci peut contenir des promesses
précédées du mot clef « await ».
Ce qui interrompt son exécution et
attend la résolution de la promesse.

La fonction renvoie une promesse :

- Résolue lorsque elle est terminé.
- Rompue en cas d’exception.
Les fonctions asynchrones
Les fonctions asynchrone permettent de simplifier l'utilisation des promesses.
Elle évite de devoir configurer explicitement les chaînes de promesse.
Pour traiter les exceptions provoqués par des promesses en attente (via await) lorsque
celles-ci sont rompu, il est nécessaire d’utiliser un bloc « try / catch ».
Enchaîner des promesses avec async/await
Exemple avec quatre promesses chaînés
Interaction avec le DOM
- Les formulaires -
 Objectif des formulaires
Interaction avec le DOM - Les formulaires
Objectif des formulaires
Les formulaires sont utilisés pour qu’un utilisateur puisse interagir avec une page web.
Ils permettent d’envoyer des données au serveur.
➔ Par défaut, via le comportement de la balise « form » (en « GET» ou « POST »)
➔ En JS, via des requêtes Ajax (abordé ultérieurement)

Le langage JavaScript permet :

● D'accéder aux données du formulaire (en lecture et écriture)
● D'interrompre ou de déclencher les comportements « Submit » et « Reset »
● D’ajouter des règles de validation sur les différentes inputs
Structure d’un formulaire
Les formulaires sont généralement constitués :
● D’une balise « form »
● De balise de saisie pour l’utilisateur
○ input (text, number, radio, checkbox, …)
○ textarea
○ select
● D’un bouton de validation et d’annulation
Structure du formulaire utilisé dans le support
Manipulation les formulaires
Interaction avec le DOM - Les formulaires
Récupérer un formulaire
Pour récupérer une balise de formulaire, il existe de plusieurs possibilité :
● À l’aide des méthodes « getElementById » et « querySelector ».
● Via la propriété « forms » de l’objet « document » (via son nom ou son index).
● En utilisant le nom du formulaire en tant que propriété de « document ».
Récupérer les champs d’un formulaire
La propriété « elements » d’un objet de type « HTMLFormElement » permet d’obtenir
une collection qui contient tous les champs (input, textarea, button) du formulaire.
Récupérer un champ d’un formulaire
Pour récupérer un des champs d’un formulaire, il est possible de l’obtenir :
● Depuis la propriété « element ».
● Directement depuis l’objet formulaire.
Ces deux méthodes fonctionnent avec le nom et l’index du champ ciblé.
Interagir avec les évents d’un formulaire
L’event « submit » permet d'interagir sur la validation d’un formulaire avant que les
données de celui-ci ne soit envoyé.

L’event « reset » permet d'interagir sur la remise à zéro d’un formulaire avant que les
données ne soit effacé.

Rappel : L’utilisation de « [Link]() » annule leurs comportements.

Interagir avec les évents d’un formulaire
L’event « formdata » se déclenche quand l’objet avec les valeurs du formulaire est créé.
Il est donc possible d’ajouter, de modifier et de supprimer des valeurs du formData.

Données reçues par le serveur

Attention, cette événement n’est pas annulable !

L’API de validation des contraintes
Interaction avec le DOM - Les formulaires
Objectif de l’API de validation des contraintes
Les données d’un formulaire peuvent être validé par règle définie dans la balise html
telle que : required, minlength, maxlength, pattern, etc…
Si vous souhaitez ajouter des règles custom, il est nécessaire d'utiliser le JavaScript.

L’API de validation des contraintes permet d’ajouter facilement des règles de validation
sans devoir gérer manuellement le comportement du navigateur.
Elle permet :
● D’obtenir l’état de validation des champs.
● De définir un champs en erreur.
Les propriétés de l'API de validation des contraintes
● .validity
Un objet avec l’états (booléen) des différentes contraintes à valider

● .validationMessage
Le message d’erreur lorsqu’une contrainte est invalide.
Sinon, la propriété contient une chaîne de caractère vide

● .willValidate
Valeur booléen qui indique si l’élément doit être validé.
Les méthodes de l'API de validation des contraintes
● .checkValidity()
La méthode renvoi « true » si l'élément n'a pas de problème de validation.
Sinon, elle renvoi « false » et déclenche également l’évent « invalid ».

● .setCustomValidity(message)
Permet de définir une erreur personnalisé sur un élément avec son message d’erreur.
Cet élément sera considéré comme invalide par le formulaire.
Si l’argument est une chaîne de caractères vide, elle supprime l’erreur personnalisé.
Exemple d’erreur personnalisé sur un champ
Annexes
Aperçu de méthodes sur les types
Annexes
Méthodes des variables de type « number »
● .toFixed(nbChiffre)
Renvoie le nombre formaté en chaîne de caractère avec une notation à point-fixe.

● .toLocaleString(locale, options)
Renvoie le nombre formaté en chaîne de caractère en tenant compte de la locale.
Les « options » permettent de préciser le contexte de formatage (décimal, monnaie… ).
Méthodes des variables de type « string »
● .indexOf( ‘valeur cherchée’ ) / .lastIndexOf( ‘valeur cherchée’ )
Permet d’obtenir l'indice de la première ou dernière occurrence de la valeur cherchée
dans la chaîne de caractères. Si la valeur cherchée n'est pas trouvée, elle renvoie -1.

● .includes( ‘chaîne recherchée’ )

Permet de déterminer si la chaîne recherchée est contenue dans la variable.

● .startsWith( ‘chaîne recherchée’ ) / .endsWith( ‘chaîne recherchée’ )

Permet de déterminer si la variable commence ou termine par la chaîne recherchée
Méthodes des variables de type « string »
● .localeCompare( ‘chaîne cible’, locale)
Renvoie un nombre qui permet de déterminer la position de la variable par rapport à la
chaîne cible dans la locale choisie :
- Nombre positif : Elle se situe après
- Valeur « 0 » : Les deux chaînes de caractères sont identiques
- Nombre négatif : Elle se situe avant

● .trim() / .trimStart() / .trimEnd()

Renvoie une copie de la variable sans les caractères blancs (espace, tabulation, ...)
Méthodes des variables de type « string »
● .toUpperCase() / .toLowerCase()
Renvoie une copie de la variable en majuscule ou minuscule.

● .toLocaleUpperCase(locale) / .toLocaleLowerCase(locale)
Renvoie une copie de la variable en majuscule ou minuscule en respectant la locale.

● .padStart(longueur [, ‘chaîne compl’] ) / .padEnd(longueur [, ‘chaîne compl’] )

Permet d’obtenir la chaîne complétée à la longueur demandée. Pour cela, la valeur du
deuxième paramètre (par défaut : un espace) sera ajouté en début ou fin de la chaîne.
Méthodes des variables de type « string »
● .replace(‘cible’ , ‘remplacement’)
Renvoie une nouvelle chaîne dans laquelle la 1ère occurrence de la chaîne ‘cible’ est
remplacée par la chaîne ‘remplacement’.

● .replaceAll(‘cible’ , ‘remplacement’)
Renvoie une nouvelle chaîne dans laquelle toutes les occurrences de la chaîne ‘cible’
sont remplacées par la chaîne ‘remplacement’.

Remarque : Il est possible de remplacer la chaîne cible par une regex.

Pour la méthode « replaceAll » la regex est utilisé doit être global « /regex/g ».
Méthodes des variables de type « string »
● .substring(indiceA [, indiceB] )
Renvoie une chaîne de caractère commençant au plus petit indice et jusqu'au plus
grand indice. Le deuxième indice est optionnel (par défaut : la longueur de la chaîne).

● .slice(indiceDebut [, indiceFin] )
Renvoie une chaîne de caractère commençant à l’indice de début et jusqu'à l'indice de
fin. Contrairement à la méthode substring, celle-ci peut utiliser des valeurs négatives.

● .split(‘separateur’)
Permet d’obtenir un tableau avec le contenu de la chaîne divisé par le séparateur.
La collection à clefs « Map »
Annexes
Les objets de type « Map »
Un objet « Map » permet de stocker des éléments sous la forme de « Clef / Valeur ».
Les clefs peuvent être de n'importe quel type de valeur (primitive ou objet).

Celui-ci est un itérable, il peut être parcouru à l’aide d’une boucle.

L’ordre d’insertion des éléments est mémorisé.

Aperçu d’un objet « Map » :

Méthodes sur un objet de type « Map »
● .set(clef, valeur)
Permet d’ajouter une combinaison clef / valeur dans l’objet « Map ».
Si la clef existe déjà, la valeur sera mise à jour avec celle reçue.

● .get(clef)
Renvoie la valeur liée à la clef. Si aucune valeur n’est trouvée, elle renvoie « undefined ».

● .has(clef)
Renvoie un booléen pour indiquer si la clef est présente dans l’objet « Map ».
Méthodes sur un objet de type « Map »
● .delete(clef)
Permet de supprimer un élément à l’aide de sa clef.
Cette méthode renvoie « true » si l’élément existe et qu’il a bien été supprimé.

● .clear()
Permet de supprimer tous les éléments.

● .forEach (méthode)
Permet d’effectuer un traitement itératif. (Identique à la méthode forEach() des Array)
Propriété sur un objet de type « Map »
La propriété « size » permet d’obtenir le nombre d’éléments de l’objet « Map ».
Exemple de l’utilisation d’un objet « Map »
La collection à clefs « Set »
Annexes
Les objets de type « Set »
Un objet « Set » permet de stocker des éléments sous la forme de clef unique.
Les clefs peuvent être de n'importe quel type de valeur (primitive ou objet).

Celui-ci est un itérable, il peut être parcouru à l’aide d’une boucle.

L’ordre d’ajout des éléments est mémorisé.

Aperçu d’un objet « Set » :

Méthodes sur un objet de type « Set »
● .add(clef)
Permet d’ajouter une clef dans l’objet « Set ».
Si la clef existe déjà, la méthode sera ignorée.

● .has(clef)
Renvoie un booléen pour indiquer si la clef est présente dans l’objet « Set ».
Méthodes sur un objet de type « Set »
● .delete(clef)
Permet de supprimer une clef.
Cette méthode renvoie « true » si l’élément existe et qu’il a bien été supprimé.

● .clear()
Permet de supprimer toutes les clefs.

● .forEach (méthode)
Permet d’effectuer un traitement itératif. (Identique à la méthode forEach() des Array)
Propriété sur un objet de type « Set »
La propriété « size » permet d’obtenir le nombre d’éléments de l’objet « Set ».
Évaluation en court-circuit
Annexes
Évaluation en court-circuit
Le JavaScript permet d’utiliser les opérateurs logiques pour créer un « court-circuit »
lors de l’évaluation d’une instruction.

Cela permet de rendre l'exécution d’instruction de code conditionnel.

● Opérateur logique ET : si l’expression est « Truthy », la suite sera interprétée

● Opérateur logique OU : si l’expression est « Truthy », la suite ne sera pas

interprétée
Le destructuring
Annexes
Objectif du destructuring
Le destructuring est une syntaxe qui permet de réaliser une affectation par
décomposition. Celle-ci permet d’extraire des données depuis un objet ou un tableau.
L’objectif du destructuring est donc de pouvoir affecter les valeurs d’une structure de
données à des variables en une seule instruction.
Décomposition de collection
● Déclaration de variable et initialisation
La valeur des variables est basée sur la position des éléments de la collection.
Décomposition de collection
● Affectation sans déclaration
Il est possible d’utiliser le destructuring pour uniquement affecter des variables.

● Valeurs par défaut

On peut définir une valeur qui sera utilisée si la valeur extraite est « undefined ».
Décomposition de collection
● Affecter le reste d'une collection à une variable
Il est possible d’utiliser l’opérateur « rest » avec le destructuring.
Décomposition de collection
● Ignorer des valeurs
Il est possible d’ignorer certaines des valeurs de la collection.

● Échange de variables
Le destructuring permet également d'inverser le contenu de variables.
Décomposition d’objet
● Déclaration de variable et initialisation
La valeur des variables est basée sur le nom des clefs de l’objet ciblé.
Décomposition d’objet
● Affectation sans déclaration
Il est possible d’utiliser le destructuring pour uniquement affecter des variables.

● Valeurs par défaut

On peut définir une valeur qui sera utilisée si la valeur de la clef est « undefined ».
Décomposition d’objet
● Affecter le reste
Il est possible d’utiliser l’opérateur « rest » avec le destructuring.
Décomposition d’objet
● Affectation avec un nom différent
Il est possible définir un nom de variable différent que celui de la clef ciblé.

Il est également possible de définir une valeur par défaut en plus du nom de variable.
Décomposition d’objet
● Décomposition imbriquée
Décomposition d’objet
● Décomposition d’un paramètre d’une fonction
Lorsqu’on créer une méthode, il est possible d’utiliser le destructuring pour définir le
nom des paramètre de l’objet attendu et si nécessaire la valeur par défaut de ceux-ci.
Références
Références
● MDN Web Docs
[Link]

● Ecma International's TC39

[Link]
[Link]
Merci pour votre attention.