js.pdf

JavaScript
Formateur Jaouad Assabbour

what is javascript ?
JavaScript est le langage de programmation le plus populaire au monde.
JavaScript est le langage de programmation du Web.
JavaScript est facile à apprendre.
Ce cours vous apprendra JavaScript de base à avancé.
Apprendre par des exemples
Les exemples valent mieux que 1000 mots. Les exemples sont souvent
plus faciles à comprendre que les explications textuelles.
Ce cours complète toutes les explications avec des exemples clarifiants.
Pourquoi étudier JavaScript ?
JavaScript est l'un des 3 langages que tout développeur web doit
apprendre :
1. HTML : pour définir le contenu des pages web
2. CSS : pour spécifier la mise en page des pages Web
3. JavaScript : pour programmer le comportement des pages web
Remarque :
Ce tutoriel couvre toutes les versions de JavaScript :
• Le JavaScript d'origine ES1 ES2 ES3 (1997-1999)
• La première révision principale ES5 (2009)
• La deuxième révision ES6 (2015)
• Les ajouts annuels (2016, 2017, 2018)

Présentation de Javascript
JavaScript peut modifier le contenu HTML
L'une des nombreuses méthodes JavaScript HTML est
getElementById().
L'exemple ci-dessous "trouve" un élément HTML (avec
id="demo") et change le contenu de l'élément (innerHTML) en
"Hello JavaScript":
Exemple:
JavaScript accepte les guillemets simples et doubles :
JavaScript modifie la valeur de l' src attribut (source) d'une balise
<img> :
JavaScript peut modifier les styles HTML (CSS)
JavaScript peut Masquer les éléments HTML peut être fait en
changeant le display style :

Le saviez-vous?
JavaScript et Java sont des langages complètement différents, à
la fois dans le concept et la conception.
JavaScript a été inventé par Brendan Eich en 1995 et est devenu
une norme ECMA en 1997.
ECMA-262 est le nom officiel de la norme. ECMAScript est le
nom officiel du langage.
La balise < script >
En HTML, le code JavaScript est inséré entre les balises
<script>et .</script>

Remarque :
Les anciens exemples JavaScript peuvent utiliser un attribut type : <script type="text/
javascript">.
L'attribut type n'est pas obligatoire. JavaScript est le langage de script par défaut en
HTML.
Fonctions et événements JavaScript
Une function JavaScript est une bloc de code JavaScript, qui peut être
exécuté lorsqu'il est "appelé".
Par exemple, une fonction peut être appelée lorsqu'un événement se
produit, comme lorsque l'utilisateur clique sur un bouton.
Vous en apprendrez beaucoup plus sur les fonctions et les événements dans
les chapitres suivants.
JavaScript dans <head> ou <body>
Vous pouvez placer n'importe quel nombre de scripts dans un document
HTML.
Les scripts peuvent être placés dans le <body>, ou dans la
<head>section d'une page HTML, ou dans les deux.

JavaScript dans <tête>
Dans cet exemple, une function JavaScript est placé dans la section
<head> d'une page HTML.
La fonction est invoquée (appelée) lorsqu'un bouton est cliqué :
JavaScript dans <body>
Dans cet exemple, une function JavaScript est placé dans la section
<body> d'une page HTML.
La fonction est invoquée (appelée) lorsqu'un bouton est cliqué :

JavaScript externe
Les scripts peuvent également être placés dans des fichiers externes :
Fichier externe : monScript.js

Les scripts externes sont pratiques lorsque le même code est utilisé dans de
nombreuses pages Web différentes.
Les fichiers JavaScript ont l'extension de fichier .js .
Pour utiliser un script externe, mettez le nom du fichier de script dans
l'attribut src(source) d'une <script>balise :
Vous pouvez placer une référence de script externe dans <head>ou
<body>comme vous le souhaitez.
Le script se comportera comme s'il se trouvait exactement à l'endroit où se
trouve la balise <script>.
Remarque :
Les scripts externes ne peuvent pas contenir des balises <script>.
Avantages de JavaScript externe
Placer des scripts dans des fichiers externes présente certains avantages :
• Il sépare HTML et code
• Il rend HTML et JavaScript plus faciles à lire et à maintenir
• Les fichiers JavaScript mis en cache peuvent accélérer le chargement des pages

Pour ajouter plusieurs fichiers de script à une page, utilisez plusieurs balises de
script :
Références externes
Un script externe peut être référencé de 3 manières différentes :
• Avec une URL complète (une adresse Web complète)
• Avec un chemin de fichier (comme /js/)
• Sans aucun chemin
Cet exemple utilise un URL complète pour créer un lien vers myScript.js :
Cet exemple utilise un chemin de fichier pour créer un lien vers myScript.js :
JavaScript Output
JavaScript peut "afficher" les données de différentes manières :
• Écrire dans un élément HTML, en utilisant innerHTML.
• Écrire dans la sortie HTML à l'aide de document.write().

• Écrire dans une boîte d'alerte, en utilisant window.alert().
• Écrire dans la console du navigateur, en utilisant console.log().
Utiliser innerHTML
Pour accéder à un élément HTML, JavaScript peut utiliser la méthode
document.getElementById(id).
L' attribut id définit l'élément HTML. La propriété innerHTML définit le contenu
HTML :
La modification de la propriété innerHTML d'un élément HTML est une
manière courante d'afficher des données en HTML.
Utilisation de document.write()
A des fins de test, il est pratique d'utiliser document.write():

Remarque :
L'utilisation de document.write() après le chargement d'un document HTML supprimera
tout le code HTML existant :
Utilisation de window.alert()
Vous pouvez utiliser une boîte d'alerte pour afficher les données :

Vous pouvez ignorer le mot-clé window.
En JavaScript, l'objet window est l'objet de portée globale, ce qui signifie que les variables,
les propriétés et les méthodes appartiennent par défaut à l'objet window. Cela signifie
également que la spécification du mot-clé window est facultative :

Utilisation de console.log()
À des fins de débogage, vous pouvez appeler la méthode console.log()
dans le navigateur pour afficher les données.
JavaScript print()
JavaScript n'a pas d'objet d'impression ni de méthode d'impression.
Vous ne pouvez pas accéder aux périphériques de sortie à partir de JavaScript.
La seule exception est que vous pouvez appeler la méthode
window.print() dans le navigateur pour imprimer le contenu de la fenêtre
en cours.

JavaScript Statements
Un programme informatique est une liste "d'instructions" à "exécuter" par un
ordinateur.
Dans un langage de programmation, ces instructions de programmation sont appelées
instructions .
Un programme JavaScript est une liste d' instructions de programmation .
Les instructions JavaScript sont composées de :
Valeurs, opérateurs, expressions, mots-clés et commentaires.
Cette instruction indique au navigateur d'écrire "Hello Dolly". dans un élément
HTML avec id="demo":
La plupart des programmes JavaScript contiennent de nombreuses instructions
JavaScript.
Les instructions sont exécutées, une par une, dans le même ordre qu'elles sont écrites.

Points-virgules ;
Les points-virgules séparent les instructions JavaScript.
Ajoutez un point-virgule à la fin de chaque instruction exécutable :
Lorsqu'elles sont séparées par des points-virgules, plusieurs instructions sur une
même ligne sont autorisées :
Remarque :
Sur le Web, vous pouvez voir des exemples sans points-virgules.
Terminer les instructions par un point-virgule n'est pas obligatoire, mais fortement
recommandé.
Espace blanc JavaScript
JavaScript ignore plusieurs espaces. Vous pouvez ajouter un espace blanc à
votre script pour le rendre plus lisible.
Les lignes suivantes sont équivalentes :

Une bonne pratique consiste à mettre des espaces autour des opérateurs ( = + - * / ) :
Longueur de ligne JavaScript et sauts de ligne
Pour une meilleure lisibilité, les programmeurs aiment souvent éviter les
lignes de code de plus de 80 caractères.
Si une instruction JavaScript ne tient pas sur une seule ligne, le meilleur
endroit pour la casser est après un opérateur :
Blocs de code JavaScript
Les instructions JavaScript peuvent être regroupées dans des blocs de
code, à l'intérieur d'accolades {...}.
Le but des blocs de code est de définir des instructions à exécuter
ensemble.
Un endroit où vous trouverez des instructions regroupées en blocs, c'est
dans les fonctions JavaScript :

Mots-clés JavaScript
Les instructions JavaScript commencent souvent par un mot- clé pour identifier
l'action JavaScript à effectuer.
Voici une liste de certains des mots-clés que vous apprendrez dans ce cours :
JavaScript Syntax
La syntaxe JavaScript est l'ensemble des règles, comment les programmes
JavaScript sont construits :

Valeurs JavaScript
La syntaxe JavaScript définit deux types de valeurs :
• Valeurs fixes
• Valeurs variables
Les valeurs fixes sont appelées Literals .
Les valeurs variables sont appelées Variables .
Littéraux JavaScript
Les deux règles de syntaxe les plus importantes pour les valeurs fixes sont :
1. Les nombres s'écrivent avec ou sans décimales :
2. Les chaînes sont du texte, écrit entre guillemets doubles ou simples :
Variables JavaScript
Dans un langage de programmation, les variables sont utilisées pour stocker des
valeurs de données.

JavaScript utilise les mots clés var, let et const pour déclarer les variables.
Un signe égal est utilisé pour attribuer des valeurs aux variables.
Dans cet exemple, x est défini comme une variable. Ensuite, x est affecté (donné) la
valeur 6 :
Opérateurs JavaScript
JavaScript utilise des opérateurs arithmétiques ( + - * /) pour
calculer les valeurs :
JavaScript utilise un opérateur d'affectation ( = ) pour affecter des
valeurs aux variables :
Expressions JavaScript
Une expression est une combinaison de valeurs, de variables et d'opérateurs, qui
calcule une valeur.

Le calcul s'appelle une évaluation.
Par exemple, 5 * 10 est évalué à 50 :
Les valeurs peuvent être de différents types, tels que des nombres et des chaînes.
Par exemple, "John" + " " + "Doe", est évalué à "John Doe":
Mots-clés JavaScript
Les mots- clés JavaScript sont utilisés pour identifier les actions à effectuer.
Le mot- clé let indique au navigateur de créer des variables :
Le mot-clé var indique également au navigateur de créer des variables :

Remarque :
Dans ces exemples, l'utilisation var ou let produira le même résultat.
Vous en apprendrez plus sur var et let plus tard dans ce cours.
Commentaires JavaScript
Toutes les instructions JavaScript ne sont pas "exécutées".
Le code après les doubles barres obliques // ou entre /*et */ est traité comme
un commentaire .
Les commentaires sont ignorés et ne seront pas exécutés :
Vous en apprendrez plus sur les commentaires dans un chapitre ultérieur.
Identifiants / Noms JavaScript
Les identifiants sont des noms JavaScript.
Les identificateurs sont utilisés pour nommer des variables et des mots-clés, et des fonctions.
Les règles pour les noms légaux sont les mêmes dans la plupart des langages de programmation.
Un nom JavaScript doit commencer par :

• Une lettre (AZ ou az)
• Un signe dollar ($)
• Ou un trait de soulignement (_)
Les caractères suivants peuvent être des lettres, des chiffres, des traits de soulignement ou des
signes dollar.
Remarque :
Les chiffres ne sont pas autorisés comme premier caractère dans les noms.
De cette façon, JavaScript peut facilement distinguer les identifiants des nombres.
JavaScript est sensible à la casse
Tous les identifiants JavaScript sont sensibles à la casse .
Les variables lastName et lastname, sont deux variables différentes :
Commentaires JavaScript
Les commentaires JavaScript peuvent être utilisés pour expliquer le code JavaScript et pour
le rendre plus lisible.
Les commentaires JavaScript peuvent également être utilisés pour empêcher l'exécution,
lors du test de code alternatif.

Commentaires sur une seule ligne
Les commentaires sur une seule ligne commencent par //.
Tout texte entre // et la fin de la ligne sera ignoré par JavaScript (ne sera pas exécuté).
Cet exemple utilise un commentaire sur une seule ligne avant chaque ligne de code :
Commentaires multi-lignes
Les commentaires multi-lignes commencent par /*et se terminent par */.
Tout texte entre /*et */sera ignoré par JavaScript.
Cet exemple utilise un commentaire multiligne (un bloc de commentaire) pour expliquer le code :
façons de déclarer une variable JavaScript :
• Utilisant var
• Utilisant let
• Utilisant const
• Ne rien utiliser

Qu'est-ce qu'une variable ?
Les variables sont des conteneurs pour stocker des données (stocker des valeurs de
données).
Dans cet exemple, x, y, et z, sont des variables, déclarées avec le mot clé var :
Dans cet exemple, x, y, et z, sont des variables, déclarées avec le mot clé let :
Quand utiliser JavaScript const ?
Si vous voulez une règle générale : déclarez toujours les variables avec const.
Si vous pensez que la valeur de la variable peut changer, utilisez let.

Dans cet exemple, price1, price2, et total, sont des variables :
Les deux variables price1 et price2 sont déclarées avec le mot clé const.
Ce sont des valeurs constantes et ne peuvent pas être modifiées.
La variable total est déclarée avec le mot clé let.
C'est une valeur qui peut être modifiée.
JavaScript Let
Le mot-clé let a été introduit dans ES6 (2015) .

Les variables définies avec let ne peuvent pas être redéclarées.
Les variables définies avec let doivent être déclarées avant utilisation.
Les variables définies avec let ont une portée de bloc.
Ne peut pas être redéclaré
Les variables définies avec let ne peuvent pas être redéclarées .
Vous ne pouvez pas redéclarer accidentellement une variable.
Avec let vous ne pouvez pas faire ceci :
Avec var vous pouvez :
Portée du bloc
Avant ES6 (2015), JavaScript n'avait que Global Scope et Function Scope .

ES6 a introduit deux nouveaux mots-clés JavaScript importants : let et const.
Ces deux mots-clés fournissent Block Scope en JavaScript.
Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles depuis l'extérieur du bloc :
Les variables déclarées avec le mot- clé var ne peuvent PAS avoir une portée de
bloc.
Les variables déclarées à l'intérieur d'un bloc { } sont accessibles depuis l'extérieur du bloc.
Redéclarer des variables
Redéclarer une variable à l'aide du mot-clé var peut poser des problèmes.
Redéclarer une variable à l'intérieur d'un bloc redéclarera également la variable à l'extérieur du
bloc :
Redéclarer une variable à l'aide du mot- letclé peut résoudre ce problème.
Redéclarer une variable à l'intérieur d'un bloc ne redéclarera pas la variable à l'extérieur du bloc :

JavaScript Const
Le mot-clé const a été introduit dans ES6 / 2015.
Les variables définies avec const ne peuvent pas être redéclarées.

Les variables définies avec const ne peuvent pas être réaffectées.
Les variables définies avec const ont une portée de bloc.
Les variables JavaScript constdoivent être valorisées lors de leur
déclaration :
Objets constants et tableaux
Le mot-clé const est un peu trompeur.
Il ne définit pas une valeur constante. Il définit une référence constante à une valeur.

Pour cette raison, vous ne pouvez PAS :
• Réaffecter une valeur constante
• Réaffecter un tableau constant
• Réaffecter un objet constant
Mais tu peux:
• Changer les éléments du tableau constant
• Modifier les propriétés de l'objet constant
Mais vous ne pouvez PAS réaffecter le tableau :
Objets constants
Vous pouvez modifier les propriétés d'un objet constant :

Mais vous ne pouvez PAS réaffecter l'objet :

JavaScript Operators
Les opérateurs arithmétiques sont utilisés pour effectuer des opérations
arithmétiques sur des nombres :
Opérateurs d'affectation JavaScript
Les opérateurs d'affectation attribuent des valeurs aux variables JavaScript.

L' opérateur d'affectation d'addition += ajoute une valeur à une variable.
L'opérateur + peut également être utilisé pour ajouter (concaténer)
des chaînes.
L'opérateur += d'affectation peut également être utilisé pour ajouter (concaténer)
des chaînes :
L'ajout de deux nombres renverra la somme, mais l'ajout d'un nombre et d'une
chaîne renverra une chaîne :

Opérateurs de comparaison JavaScript
Opérateurs logiques JavaScript
Opérateurs de type JavaScript

Opérateurs d'affectation JavaScript
Les opérateurs d'affectation attribuent des valeurs aux variables JavaScript.
L' opérateur = d'affectation affecte une valeur à une variable.
L' opérateur += d'affectation ajoute une valeur à une variable.
L' opérateur -= d'affectation soustrait une valeur d'une variable.
L' opérateur *= d'affectation multiplie une variable.
L' affectation /= divise une variable.
L' opérateur %= d'affectation affecte un reste à une variable.

Types de données JavaScript
Les variables JavaScript peuvent contenir différents types de
données : nombres, chaînes, objets, etc. :
Le concept de types de données
En programmation, les types de données sont un concept important.
Pour pouvoir opérer sur des variables, il est important de connaître le type.
Sans types de données, un ordinateur ne peut pas résoudre en toute sécurité ceci :
Remarque :
Lors de l'ajout d'un nombre et d'une chaîne, JavaScript traitera le nombre
comme une chaîne.

Les types JavaScript sont dynamiques
JavaScript a des types dynamiques. Cela signifie que la même variable peut être
utilisée pour contenir différents types de données :
Chaînes JavaScript
Une chaîne (ou une chaîne de texte) est une série de caractères comme "John Doe".
Les chaînes sont écrites avec des guillemets. Vous pouvez utiliser des guillemets
simples ou doubles :
Vous pouvez utiliser des guillemets à l'intérieur d'une chaîne, tant
qu'ils ne correspondent pas aux guillemets entourant la chaîne :
Booléens JavaScript
Les booléens ne peuvent avoir que deux valeurs : true ou false.

Tableaux JavaScript
Les tableaux JavaScript sont écrits entre crochets.
Les éléments du tableau sont séparés par des virgules.
Le code suivant déclare (crée) un tableau appelé cars, contenant trois éléments (noms de
voiture):
Les index de tableau sont basés sur zéro, ce qui signifie que le
premier élément est [0], le second est [1], etc.
Objets JavaScript
Les objets JavaScript sont écrits avec des accolades {}.
Les propriétés d'objet sont écrites sous la forme de paires nom : valeur, séparées par
des virgules.
L'objet (personne) dans l'exemple ci-dessus a 4 propriétés : firstName,
lastName, age et eyeColor.
Le type d'opérateur
Vous pouvez utiliser l' opérateur typeof JavaScript pour trouver le type d'une variable
JavaScript.
L' opérateur typeof renvoie le type d'une variable ou d'une expression :

Indéfini
En JavaScript, une variable sans valeur a la valeur undefined. Le genre est aussi
undefined.
Toute variable peut être vidée, en définissant la valeur sur undefined. Le
type sera également undefined.

JavaScript Functions
Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche
particulière.
Une fonction JavaScript est exécutée lorsque "quelque chose" l'invoque (l'appelle).
Syntaxe de la fonction JavaScript
Une fonction JavaScript est définie avec le mot-clé function, suivi d'un nom
, suivi de parenthèses () .
Les noms de fonction peuvent contenir des lettres, des chiffres, des traits de
soulignement et des signes dollar (mêmes règles que les variables).
Les parenthèses peuvent inclure des noms de paramètres séparés par des
virgules :
( paramètre1, paramètre2, ... )
Le code à exécuter, par la fonction, est placé entre accolades : {}
Les paramètres de la fonction sont répertoriés entre parenthèses ()
dans la définition de la fonction.
Les arguments de la fonction sont les valeurs reçues par la fonction lorsqu'elle est
invoquée.
A l'intérieur de la fonction, les arguments (les paramètres) se comportent comme des
variables locales.

Appel de fonction
Le code à l'intérieur de la fonction s'exécutera lorsque "quelque chose" invoque (appelle) la
fonction :
• Lorsqu'un événement se produit (lorsqu'un utilisateur clique sur un bouton)
• Lorsqu'il est invoqué (appelé) à partir du code JavaScript
• Automatiquement (auto-invoqué)
Retour de fonction
Lorsque JavaScript atteint une instruction return la fonction s'arrête.
Si la fonction a été appelée à partir d'une instruction, JavaScript "reviendra" pour
exécuter le code après l'instruction d'appel.
Les fonctions calculent souvent une valeur de retour . La valeur de retour est
"renvoyée" à "l'appelant":
Exemple :
Calculez le produit de deux nombres et retournez le résultat :
Pourquoi Fonctions ?
Vous pouvez réutiliser le code : définissez le code une fois et réutilisez-le
plusieurs fois.
Vous pouvez utiliser le même code plusieurs fois avec des arguments
différents, pour produire des résultats différents.

Variables locales
Les variables déclarées dans une fonction JavaScript deviennent
LOCALES à la fonction.
Les variables locales ne sont accessibles qu'à partir de la fonction.
Étant donné que les variables locales ne sont reconnues
qu'à l'intérieur de leurs fonctions, les variables portant le
même nom peuvent être utilisées dans différentes
fonctions.
Les variables locales sont créées lorsqu'une fonction démarre et supprimées lorsque la
fonction est terminée.

JavaScript Objects
Objets, propriétés et méthodes de la vie réelle
Dans la vraie vie, une voiture est un objet .
Une voiture a des propriétés comme le poids et la couleur, et des
méthodes comme le démarrage et l'arrêt :
Toutes les voitures ont les mêmes propriétés , mais les valeurs des propriétés
diffèrent d'une voiture à l'autre.
Toutes les voitures ont les mêmes méthodes , mais les méthodes sont exécutées
à des moments différents .
Objets JavaScript
Vous avez déjà appris que les variables JavaScript sont des conteneurs pour les
valeurs de données.
Ce code attribue une valeur simple (Fiat) à une variable nommée car :

Les objets sont aussi des variables. Mais les objets peuvent contenir
de nombreuses valeurs.
Ce code attribue plusieurs valeurs (Fiat, 500, blanc) à une variable nommée car :
Les valeurs sont écrites sous forme de paires nom:valeur (nom et
valeur séparés par deux points).
Définition d'objet
Vous définissez (et créez) un objet JavaScript avec un littéral d'objet :
Les espaces et les sauts de ligne ne sont pas importants. Une définition d'objet peut
s'étendre sur plusieurs lignes :

Propriétés de l'objet
Les paires name:values dans les objets JavaScript sont appelées properties :
Accéder aux propriétés de l'objet
Vous pouvez accéder aux propriétés d'un objet de deux manières :
ou

Méthodes d'objet
Les objets peuvent aussi avoir des méthodes .
Les méthodes sont des actions qui peuvent être effectuées sur des objets.
Les méthodes sont stockées dans les propriétés en tant que définitions de fonction .
Une méthode est une fonction stockée en tant que propriété.
Dans l'exemple ci-dessus, this fait référence à l' objet person .
IE this.firstName signifie la propriété firstName de this .
IE this.firstName signifie la propriété firstName de person .

Qu'est- ce que THIS ?
En JavaScript, le mot- clé this fait référence à un objet .
Quel objet dépend de la façon dont il this est invoqué (utilisé ou appelé).
Le mot- clé this fait référence à différents objets selon la façon dont il est utilis :
Dans une méthode d'objet, thisfait référence à l' objet .
Seul, thisfait référence à l' objet global .
Dans une fonction, thisfait référence à l' objet global .
Dans une fonction, en mode strict, thisvaut undefined.
Dans un événement, thisfait référence à l' élément qui a reçu l'événement.
Des méthodes telles que call(), apply() et bind() peuvent faire référence à
this n'importe quel objet .
Remarque :
this n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this.

Le mot- clé this
Dans une définition de fonction, this fait référence au "propriétaire" de la fonction.
Dans l'exemple ci-dessus, this est l' objet personne qui "possède" la fonction
fullName.
En d'autres termes, this.firstName désigne la propriété firstName de cet
objet .
Accéder aux méthodes d'objet
Vous accédez à une méthode objet avec la syntaxe suivante :
Si vous accédez à une méthode sans les parenthèses (), elle retournera la
définition de la fonction :

Événements JavaScript
Les événements HTML sont des "choses" qui arrivent aux
éléments HTML.
Lorsque JavaScript est utilisé dans des pages HTML, JavaScript
peut "réagir" à ces événements.
Événements HTML
Un événement HTML peut être quelque chose que fait le navigateur ou quelque
chose que fait un utilisateur.
Voici quelques exemples d'événements HTML :
• Une page Web HTML a fini de se charger
• Un champ de saisie HTML a été modifié
• Un bouton HTML a été cliqué
Souvent, lorsque des événements se produisent, vous voudrez peut-être faire quelque
chose.
JavaScript vous permet d'exécuter du code lorsque des événements sont détectés.
HTML permet d'ajouter des attributs de gestionnaire d'événements, avec du code
JavaScript , aux éléments HTML.
Dans l'exemple suivant, un attribut onclick (avec code) est ajouté à un élément
<button>:
Dans l'exemple ci-dessus, le code JavaScript modifie le contenu de l'élément avec
id="demo".

Dans l'exemple suivant, le code modifie le contenu de son propre élément (en
utilisant this.innerHTML :
Remarque :
Le code JavaScript fait souvent plusieurs lignes. Il est plus courant de voir des
attributs d'événement appeler des fonctions :
Événements HTML courants
Voici une liste de certains événements HTML courants :

onchange : Un élément HTML a été modifié
onclick : L'utilisateur clique sur un élément HTML
onmouseover : L'utilisateur déplace la souris sur un élément HTML
onmouseout : L'utilisateur éloigne la souris d'un élément HTML
onkeydown : L'utilisateur appuie sur une touche du clavier
onload : Le navigateur a fini de charger la page
Gestionnaires d'événements JavaScript
Les gestionnaires d'événements peuvent être utilisés pour gérer et vérifier les entrées
de l'utilisateur, les actions de l'utilisateur et les actions du navigateur :
• Choses à faire à chaque fois qu'une page se charge
• Choses à faire lorsque la page est fermée
• Action à effectuer lorsqu'un utilisateur clique sur un bouton
• Contenu qui doit être vérifié lorsqu'un utilisateur saisit des données
• Et plus ...
De nombreuses méthodes différentes peuvent être utilisées pour permettre à
JavaScript de fonctionner avec des événements :
• Les attributs d'événement HTML peuvent exécuter directement du code
JavaScript
• Les attributs d'événement HTML peuvent appeler des fonctions JavaScript
• Vous pouvez attribuer vos propres fonctions de gestionnaire d'événements aux
éléments HTML
• Vous pouvez empêcher l'envoi ou le traitement d'événements

Chaînes JavaScript
Les chaînes JavaScript servent à stocker et à manipuler du texte.
Une chaîne JavaScript est composée de zéro ou plusieurs caractères écrits
entre guillemets.
Vous pouvez utiliser des guillemets simples ou doubles .
Vous pouvez utiliser des guillemets à l'intérieur d'une chaîne, tant qu'ils ne
correspondent pas aux guillemets entourant la chaîne .
Longueur de chaine
Pour trouver la longueur d'une chaîne, utilisez la propriété length intégrée :
Caractère d'échappement
Étant donné que les chaînes doivent être écrites entre guillemets, JavaScript
comprendra mal cette chaîne :

La solution pour éviter ce problème est d'utiliser le caractère d'échappement
antislash .
Le caractère d'échappement barre oblique inverse ( ) transforme les caractères
spéciaux en caractères de chaîne :
Briser les longues lignes de code
Pour une meilleure lisibilité, les programmeurs aiment souvent éviter les
lignes de code de plus de 80 caractères.
Si une instruction JavaScript ne tient pas sur une seule ligne, le meilleur
endroit pour la casser est après un opérateur :
Vous pouvez également décomposer une ligne de code dans une chaîne
de texte avec une seule barre oblique inverse :
La méthode n'est pas la méthode préférée. Il se peut qu'il n'ait pas de
support universel.
Certains navigateurs n'autorisent pas les espaces derrière le caractère .

Un moyen plus sûr de décomposer une chaîne consiste à utiliser l'ajout de
chaîne :

Les méthodes et propriétés de String
Les valeurs primitives, comme "John Doe", ne peuvent pas avoir de
propriétés ou de méthodes (car ce ne sont pas des objets). Mais avec
JavaScript, les méthodes et les propriétés sont également disponibles pour
les valeurs primitives, car JavaScript traite les valeurs primitives comme
des objets lors de l'exécution des méthodes et des propriétés.
Longueur de la chaîne JavaScript
La propriété length renvoie la longueur d'une chaîne :
Extraction de parties de cordes
Il existe 3 méthodes pour extraire une partie d'une chaîne :
slice(start, end)
substring(start, end)
substr(start,length)

Tranche de chaîne JavaScript ()
slice() extrait une partie d'une chaîne et renvoie la partie extraite dans une
nouvelle chaîne.
La méthode prend 2 paramètres : la position de départ et la position de fin
(fin non incluse).
String substring()
substring() est similaire à slice().
La différence est que les valeurs de début et de fin inférieures à 0 sont
traitées comme 0 dans substring().
Si vous omettez le deuxième paramètre, substring() découpera le reste de
la chaîne.

JavaScript String substr()
substr() est similaire à slice().
La différence est que le deuxième paramètre spécifie la longueur de la
partie extraite.
Remplacement du contenu de la chaîne
La méthode replace() remplace une valeur spécifiée par une autre valeur
dans une chaîne :

Conversion en majuscules et minuscules
Une chaîne est convertie en majuscule avec toUpperCase() :
Une chaîne est convertie en minuscules avec toLowerCase() :
Trim de chaîne JavaScript()
La méthode trim() supprime les espaces des deux côtés d'une chaîne :
Chaîne JavaScript trimStart()
ECMAScript 2019 a ajouté la méthode String trimStart() à JavaScript.
La méthode trimStart() fonctionne comme trim(), mais ne supprime les espaces qu'au
début d'une chaîne.

Méthodes de recherche JavaScript
String indexOf()
String lastIndexOf()
String startsWith()
String endsWith()
Chaîne JavaScript indexOf()
La méthode indexOf() renvoie l'index de (la position de) la première occurrence d'un
texte spécifié dans une chaîne :
Chaîne JavaScript lastIndexOf()
La méthode lastIndexOf() renvoie l'index de la dernière occurrence d'un texte spécifié
dans une chaîne :
Remarque :
indexOf() et lastIndexOf() renvoient tous deux -1 si le texte n'est pas trouvé :

Les méthodes lastIndexOf()
recherchent en arrière (de la fin au début), ce qui signifie : si le deuxième paramètre est 15,
la recherche commence à la position 15 et recherche jusqu'au début de la chaîne.
Recherche de chaîne JavaScript()
La méthode search() recherche une chaîne pour une valeur spécifiée et renvoie la position
de la correspondance :
Correspondance de chaîne JavaScript()
La méthode match() recherche dans une chaîne une correspondance avec une
expression régulière et renvoie les correspondances, sous la forme d'un objet Array.
La chaîne JavaScript inclut()
La méthode includes() renvoie true si une chaîne contient une valeur spécifiée.

Les littéraux du modèle de syntaxe Back-Tics
utilisent des backticks (``) plutôt que les guillemets ("") pour définir une chaîne :
backticks à l'intérieur des chaînes
Avec les modèles littéraux, vous pouvez utiliser à la fois des guillemets simples et
doubles dans une chaîne :
Interpolation
Les littéraux de modèle permettent d'interpoler facilement des variables et des
expressions dans des chaînes.
La méthode est appelée interpolation de chaîne.
HTML Templates

JavaScript Arrays
Un tableau est une variable spéciale, qui peut contenir plusieurs valeurs :
Création d'un tableau
L'utilisation d'un littéral de tableau est le moyen le plus simple de créer un
tableau JavaScript.
Syntaxe:
exemple :
Utilisation du mot-clé new JavaScript
L'exemple suivant crée également un tableau et lui attribue des valeurs :
Accéder aux éléments du tableau
Vous accédez à un élément de tableau en vous référant au numéro d'index :

Modification d'un élément de tableau
Cette instruction modifie la valeur du premier élément dans cars :
Propriétés et méthodes des tableaux
La véritable force des tableaux JavaScript réside dans les propriétés et méthodes
de tableau intégrées :
La propriété length d'un tableau renvoie la longueur d'un tableau (le nombre
d'éléments du tableau).
Accéder au dernier élément du tableau

Looping Array Elements
Une façon de parcourir un tableau consiste à utiliser une boucle for :
Vous pouvez également utiliser la fonction Array.forEach() :
Ajout d'éléments de tableau
Le moyen le plus simple d'ajouter un nouvel élément à un tableau consiste à
utiliser la méthode push() :

Tableaux associatifs
De nombreux langages de programmation prennent en charge les tableaux avec
des index nommés.
Les tableaux avec des index nommés sont appelés tableaux associatifs (ou
hachages).
JavaScript ne prend pas en charge les tableaux avec des index nommés.
En JavaScript, les tableaux utilisent toujours des index numérotés.
Inverser un tableau
La méthode reverse() inverse les éléments d'un tableau.
Vous pouvez l'utiliser pour trier un tableau par ordre décroissant :

Tri des tableaux d'objets
Les tableaux JavaScript contiennent souvent des objets :
Tableau JavaScript pour forEach()
La méthode forEach() appelle une fonction (une fonction de rappel) une fois
pour chaque élément du tableau.
Notez que la fonction prend 3 arguments :
La valeur de l'article
L'index des articles
Le tableau lui-même

L'exemple ci-dessus utilise uniquement le paramètre value. L'exemple peut être
réécrit en :
JavaScript Array map()
La méthode map() crée un nouveau tableau en exécutant une fonction sur
chaque élément du tableau.
La méthode map() n'exécute pas la fonction pour les éléments de tableau sans
valeurs.
La méthode map() ne modifie pas le tableau d'origine.
Cet exemple multiplie chaque valeur de tableau par 2 :
Le tableau lui-même Lorsqu'une fonction de rappel utilise uniquement le paramètre
value, les paramètres index et array peuvent être omis :

Filtre de tableau JavaScript()
La méthode filter() crée un nouveau tableau avec des éléments de tableau qui
réussissent un test.
Cet exemple crée un nouveau tableau à partir d'éléments dont la valeur est supérieure
à 18 :
Dans l'exemple ci-dessus, la fonction de rappel n'utilise pas les paramètres d'index et
de tableau, ils peuvent donc être omis :

Réduire le tableau JavaScript ()
La méthode reduce() exécute une fonction sur chaque élément du tableau pour
produire (le réduire à) une seule valeur.
La méthode reduce() fonctionne de gauche à droite dans le tableau. Voir aussi
reduceRight().
Le total (la valeur initiale / la valeur précédemment renvoyée)
L'exemple ci-dessus n'utilise pas les paramètres d'index et de tableau. Il peut être
réécrit en :

La méthode reduce() peut accepter une valeur initiale :
Tableau JavaScript reduceRight()
La méthode reduceRight() exécute une fonction sur chaque élément du tableau pour
produire (le réduire à) une seule valeur.
Le reduceRight() fonctionne de droite à gauche dans le tableau. Voir aussi reduce().

Tableau JavaScript chaque()
La méthode every() vérifie si toutes les valeurs du tableau réussissent un test.
Cet exemple vérifie si toutes les valeurs du tableau sont supérieures à 18 :
Tableau JavaScript some()
La méthode some() vérifie si certaines valeurs du tableau réussissent un test.
Cet exemple vérifie si certaines valeurs de tableau sont supérieures à 18 :
Tableau JavaScript indexOf()
La méthode indexOf() recherche dans un tableau une valeur d'élément et renvoie sa
position.

find() dans tableau JavaScript ()
La méthode find() renvoie la valeur du premier élément du tableau qui réussit une
fonction de test.
Cet exemple trouve (renvoie la valeur de) le premier élément supérieur à 18 :
• La valeur de l'article
• L'index des articles
• Le tableau lui-même

Const tableau JavaScript
En 2015, JavaScript a introduit un nouveau mot-clé important : const.
Il est devenu courant de déclarer des tableaux en utilisant const:
Un tableau déclaré avec constne peut pas être réaffecté :
Les tableaux ne sont pas des constantes
Le mot-clé const est un peu trompeur.
Il ne définit PAS un tableau constant. Il définit une référence constante à
un tableau.
Pour cette raison, nous pouvons toujours modifier les éléments d'un
tableau constant.

Les éléments peuvent être réaffectés
Vous pouvez modifier les éléments d'un tableau constant
Le mot-clé const n'est pas pris en charge dans Internet Explorer 10 ou version
antérieure.

Attribué lors de la déclaration
Les variables JavaScript const doivent être valorisées lors de leur déclaration
Signification : Un tableau déclaré avec const doit être initialisé lors de sa
déclaration.
Utiliser const sans initialiser le tableau est une erreur de syntaxe :
Les tableaux déclarés avec varpeuvent être initialisés à tout moment.
Vous pouvez même utiliser le tableau avant qu'il ne soit déclaré :

Portée du bloc Const
Un tableau déclaré avec consta Block Scope .
Un tableau déclaré dans un bloc n'est pas identique à un tableau déclaré en
dehors du bloc :
Un tableau déclaré avec var n'a pas de portée de bloc :

Sortie de date JavaScript
Par défaut, JavaScript utilisera le fuseau horaire du navigateur et affichera une
date sous forme de chaîne de texte complète :
Lun Oct 17 2022 09:08:05 GMT+0200 (heure d'été d'Europe centrale)
Création d'objets de date
Les objets de date sont créés avec le constructeur new Date().
Il existe 4 façons de créer un nouvel objet date :
nouvelle date()
new Date()crée un nouvel objet date avec la date et l'heure actuelles :
nouvelle Date( chaîneDate )
new Date(dateString) crée un nouvel objet date à partir d'une chaîne de
date :
nouvelle date ( millisecondes )
new Date(milliseconds)crée un nouvel objet date en tant que temps zéro
plus millisecondes :

Obtenir l'heure actuelle
getFullYear()
La getFullYear()méthode renvoie l'année d'une date sous la forme d'un nombre à quatre
chiffres :
La méthode getMonth()
La getMonth()méthode renvoie le mois d'une date sous la forme d'un nombre (0-11) :
getHours()
La getHours()méthode renvoie les heures d'une date sous forme de nombre (0-23)
getMinutes()
La getMinutes()méthode renvoie les minutes d'une date sous forme de nombre
(0-59) :

JavaScript Math Object
L'objet JavaScript Math vous permet d'effectuer des tâches mathématiques
sur des nombres.
L'objet mathématique
Contrairement aux autres objets, l'objet Math n'a pas de constructeur.
L'objet Math est statique.
Toutes les méthodes et propriétés peuvent être utilisées sans créer d'abord un
objet Math.
Propriétés mathématiques (constantes)
La syntaxe de toute propriété Math est : .Math.property
JavaScript fournit 8 constantes mathématiques accessibles en tant que
propriétés Math :
Méthodes mathématiques
La syntaxe des méthodes Math any est la suivante : Math.method(number)
Nombre en entier
Il existe 4 méthodes courantes pour arrondir un nombre à un nombre entier

Math.rond(x) Renvoie x arrondi à son entier le plus proche
Math.ceil(x) Renvoie x arrondi à son entier le plus proche
Math.floor(x) Renvoie x arrondi à son entier le plus proche
Math.trunc(x) Renvoie la partie entière de x ( nouveau dans ES6 )
Math.signe()
Math.sign(x) renvoie si x est négatif, nul ou positif :
Math.pow()
Math.pow(x, y) renvoie la valeur de x à la puissance y :
Math.sqrt()
Math.sqrt(x) renvoie la racine carrée de x :
Math.abs()
Math.abs(x) renvoie la valeur absolue (positive) de x :
Math.sin()
Math.sin(x) renvoie le sinus (une valeur comprise entre -1 et 1) de l'angle x (exprimé en
radians).
Si vous souhaitez utiliser des degrés au lieu de radians, vous devez convertir les degrés en radians :
Angle en radians = Angle en degrés x PI / 180.
Math.min() et Math.max()
Math.min() et Math.max() peut être utilisé pour trouver la valeur la plus basse ou la
plus haute dans une liste d'arguments :
Math.aléatoire()
Math.random() renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclusif) :

JavaScript Booleans
Un booléen JavaScript représente l'une des deux valeurs suivantes : true ou false .
Valeurs booléennes
Très souvent, en programmation, vous aurez besoin d'un type de données qui ne peut avoir qu'une des deux
valeurs, comme
• OUI NON
• ALLUMÉ ÉTEINT
• VRAI FAUX
Pour cela, JavaScript a un type de données booléen . Il ne peut prendre que les valeurs true ou false .
La fonction booléenne()
Vous pouvez utiliser la Boolean() fonction pour savoir si une expression (ou une
variable) est vraie :
Comparaison JavaScript et opérateurs logiques
Les opérateurs de comparaison et logiques sont utilisés pour tester true ou false.
Opérateurs de comparaison
Les opérateurs de comparaison sont utilisés dans les instructions logiques pour déterminer l'égalité
ou la différence entre des variables ou des valeurs.
Opérateurs logiques
Les opérateurs logiques sont utilisés pour déterminer la logique entre les variables ou les valeurs.
Étant donné que x = 6et y = 3, le tableau ci-dessous explique les opérateurs logiques :

Opérateur conditionnel (ternaire)
JavaScript contient également un opérateur conditionnel qui attribue une valeur à une variable en
fonction d'une condition.
Syntaxe
Exemple
Expressions conditionnelles
Très souvent, lorsque vous écrivez du code, vous souhaitez effectuer différentes
actions pour différentes décisions.
Vous pouvez utiliser des instructions conditionnelles dans votre code pour ce faire.
En JavaScript, nous avons les instructions conditionnelles suivantes :
• if Utiliser pour spécifier un bloc de code à exécuter, si une condition
spécifiée est vraie
• else Sert à spécifier un bloc de code à exécuter, si la même condition est
fausse
• else if Permet de spécifier une nouvelle condition à tester, si la première
condition est fausse
• switch Utilisez pour spécifier de nombreux blocs de code alternatifs à
exécuter

L'instruction if
Utilisez l' instruction if pour spécifier un bloc de code JavaScript à exécuter si une
condition est vraie.
Syntaxe
Exemple
Faites un message d'accueil "Bonne journée" si l'heure est inférieure à 18h00 :
La déclaration d'autre
Utilisez l' instruction else pour spécifier un bloc de code à exécuter si la condition
est fausse.

Si l'heure est inférieure à 18h, créez un message d'accueil "Bonne journée", sinon
"Bonsoir":
L'instruction else if
Utilisez l' instruction else if pour spécifier une nouvelle condition si la
première condition est fausse.
Syntaxe
Exemple
S'il est moins de 10h00, créez un message d'accueil "Bonjour", sinon, mais il est
moins de 20h00, créez un message d'accueil "Bonjour", sinon un "Bonsoir":

L'instruction JavaScript Switch
Utilisez l' instruction switch pour sélectionner l'un des nombreux blocs
de code à exécuter.
Voilà comment cela fonctionne:
• L'expression switch est évaluée une fois.
• La valeur de l'expression est comparée aux valeurs de chaque cas.
• S'il y a correspondance, le bloc de code associé est exécuté.
• S'il n'y a pas de correspondance, le bloc de code par défaut est exécuté.

Exemple
La méthode getDay() renvoie le jour de la semaine sous la forme d'un
nombre compris entre 0 et 6.
(dimanche=0, lundi=1, mardi=2 ..)
Cet exemple utilise le numéro du jour de la semaine pour calculer le nom du
jour :

Lorsque JavaScript atteint un mot-clé break, il sort du bloc de commutation.
Cela arrêtera l'exécution à l'intérieur du bloc de commutation.
Il n'est pas nécessaire de casser le dernier cas dans un bloc de commutation. Le
bloc se casse (se termine) là de toute façon.
Le mot clé default spécifie le code à exécuter s'il n'y a pas de
correspondance de casse :
Le cas default ne doit pas nécessairement être le dernier cas dans un bloc de
commutation :

Boucles JavaScript
Les boucles sont pratiques si vous souhaitez exécuter le même code encore
et encore, à chaque fois avec une valeur différente.
C'est souvent le cas lorsque vous travaillez avec des tableaux :
Tu peux écrire:
Différents types de boucles
JavaScript prend en charge différents types de boucles :
• boucle for plusieurs fois sur un bloc de code
• boucle for/in à travers les propriétés d'un objet
• boucle for/of sur les valeurs d'un objet itérable
• while - parcourt un bloc de code alors qu'une condition spécifiée est
vraie
• boucle do / while également à travers un bloc de code alors
qu'une condition spécifiée est vraie

L' instruction for crée une boucle avec 3 expressions facultatives :
L'expression 1 est exécutée (une fois) avant l'exécution du bloc de code.
L'expression 2 définit la condition d'exécution du bloc de code.
L'expression 3 est exécutée (à chaque fois) après l'exécution du bloc de
code.
Dans l'exemple ci-dessus, vous pouvez lire :
L'expression 1 définit une variable avant le début de la boucle (soit i = 0).
L'expression 2 définit la condition d'exécution de la boucle (i doit être inférieur
à 5).
L'expression 3 augmente une valeur (i++) chaque fois que le bloc de code dans
la boucle a été exécuté.

La boucle For In
L'instruction for JavaScript inparcourt les propriétés d'un objet :
Exemple
Exemple expliqué
• La boucle for in itère sur un objet personne
• Chaque itération renvoie une clé (x)
• La clé est utilisée pour accéder à la valeur de la clé
• La valeur de la clé est personne[x]
L'instruction JavaScript for in peut également boucler sur les propriétés
d'un Array :

Array.forEach()
La méthode forEach()appelle une fonction (une fonction de rappel)
une fois pour chaque élément du tableau.
• La valeur de l'article
• L'index des articles
• Le tableau lui-même

La boucle For Of
L'instruction JavaScript for of parcourt les valeurs d'un objet itérable.
Il vous permet de boucler sur des structures de données itérables telles que
des tableaux, des chaînes, des cartes, des listes de nœuds, etc. :
variable - Pour chaque itération, la valeur de la propriété suivante est affectée à
la variable. La variable peut être déclarée avec const, let ou var.
itérable - Un objet qui a des propriétés itérables.

La boucle While
La boucle while parcourt un bloc de code tant qu'une condition spécifiée est
vraie.
Syntaxe
Exemple
Dans l'exemple suivant, le code de la boucle s'exécutera encore et encore tant
qu'une variable (i) est inférieure à 10 :
La boucle Do While
La boucle do while est une variante de la boucle while. Cette boucle
exécutera le bloc de code une fois, avant de vérifier si la condition est vraie,
puis elle répétera la boucle tant que la condition est vraie.
Syntaxe

Exemple
L'exemple ci-dessous utilise une boucle do while. La boucle sera
toujours exécutée au moins une fois, même si la condition est fausse, car le
bloc de code est exécuté avant que la condition ne soit testée :
Comparer For et While
à propos de la boucle for, vous découvrirez qu'une boucle while est
sensiblement la même qu'une boucle for, avec les instructions 1 et 3 omises.
La boucle de cet exemple utilise une boucle for pour collecter les noms de
voitures à partir du tableau cars :

La boucle de cet exemple utilise une boucle while pour collecter les noms de
voitures à partir du tableau cars :
Itérables JavaScript
Les itérables sont des objets itérables (comme les tableaux).
Les itérables sont accessibles avec un code simple et efficace.
Les itérables peuvent être itérés avec des for..ofboucles
La boucle For Of
L'instruction JavaScript for..of parcourt les éléments d'un objet
itérable.
Syntaxe

Itérer
L'itération est facile à comprendre.
Cela signifie simplement boucler sur une séquence d'éléments.
Voici quelques exemples simples:
• Itérer sur une chaîne
• Itérer sur un tableau
Itérer sur un tableau
Vous pouvez utiliser une for..ofboucle pour parcourir les éléments d'un
tableau :

JavaScript Sets
Un set JavaScript est une collection de valeurs uniques.
Chaque valeur ne peut apparaître qu'une seule fois dans une set.
Méthodes d'set essentielles
Comment créer un set
Vous pouvez créer un set JavaScript en :
• Passer un tableau à new Set()
• Créez un nouvel ensemble et utilisez- le add() pour ajouter des valeurs
• Créez un nouvel ensemble et utilisez- le add() pour ajouter des
variables

La nouvelle méthode Set()
Passez un tableau au constructeur new Set():
Créez un set() et ajoutez des valeurs :
La méthode forEach() invoque (appelle) une fonction pour chaque élément
Set :

JavaScript Maps
Une Maps contient des paires clé-valeur où les clés peuvent être n'importe
quel type de données.
Une Maps se souvient de l'ordre d'insertion d'origine des clés.
Méthodes cartographiques essentielles

Comment créer une Map
Vous pouvez créer une carte JavaScript en :
• Passer un tableau à new Map()
• Créer une carte et utiliser Map.set()
La nouvelle méthode Map()
Vous pouvez créer un Map en passant un Array au constructeur new Map():
La méthode set()
Vous pouvez ajouter des éléments à une Map avec la méthode set():

La méthode set() peut également être utilisée pour modifier
les valeurs Map existantes :
La méthode get()
La méthode get() obtient la valeur d'une clé dans un Map :
La taille de la propriété
La propriété size renvoie le nombre d'éléments dans un Map :
La méthode delete()
La méthode delete()supprime un élément Map :
La méthode has()
La méthode has()renvoie true si une clé existe dans une Map :

Objects vs Maps
Différences entre les objets JavaScript et les Maps :
La méthode forEach()
La méthode forEach() appelle une fonction pour chaque paire
clé/valeur dans un Map :

La méthode entry()
La méthode entry() renvoie un objet itérateur avec la [clé, valeurs]
dans un Map :

JavaScript typeof
En JavaScript, il existe 5 types de données différents pouvant contenir des valeurs :
• string
• number
• boolean
• object
• function
Il existe 6 types d'objets :
• Object
• Date
• Array
• String
• Number
• Boolean
Et 2 types de données qui ne peuvent pas contenir de valeurs :
• null
• undefined

Le type d'opérateur
Vous pouvez utiliser l'opérateur typeof pour trouver le type de données
d'une variable JavaScript.
Veuillez observer :
• Le type de données de NaN est le nombre
• Le type de données d'un tableau est un objet
• Le type de données d'une date est un objet
• Le type de données de null est un objet
• Le type de données d'une variable indéfinie est indéfini *
• Le type de données d'une variable à laquelle aucune valeur n'a été
affectée est également indéfini *
Vous ne pouvez pas utiliser typeof pour déterminer si un objet
JavaScript est un tableau (ou une date).

Données primitives
Une valeur de données primitive est une valeur de données simple unique
sans propriétés ni méthodes supplémentaires.
L'opérateur typeof peut renvoyer l'un de ces types primitifs :
• string
• number
• boolean
• undefined
Données complexes
L' opérateur typeof peut renvoyer l'un des deux types complexes
suivants :
• function
• object
L'opérateur typeof renvoie "object" pour les objets, les tableaux et null.
L'opérateur typeof ne renvoie pas "object" pour les fonctions.

Le type de données de typeof
L' opérateur typeof n'est pas une variable. C'est un opérateur. Les opérateurs (
+ - * / ) n'ont aucun type de données.
Mais, l' opérateur typeof renvoie toujours une chaîne (contenant le type de
l'opérande).
La propriété constructeur
La propriété constructor renvoie la fonction constructeur pour toutes les
variables JavaScript.
Vous pouvez vérifier la propriété du constructeur pour savoir si un objet
est un Array (contient le mot "Array") :

Ou encore plus simple, vous pouvez vérifier si l'objet est une fonction
Array :
Vous pouvez vérifier la propriété du constructeur pour savoir si un objet
est un Date(contient le mot "Date") :
Ou encore plus simple, vous pouvez vérifier si l'objet est une fonction
Date :
Indéfini
En JavaScript, une variable sans valeur a la valeur undefined. Le genre
est aussi undefined.

Toute variable peut être vidée, en définissant la valeur sur undefined.
Le type sera également undefined.
Valeurs vides
Une valeur vide n'a rien à voir avec undefined.
Une chaîne vide a à la fois une valeur légale et un type.
Nul
En JavaScript null, c'est "rien". C'est censé être quelque chose qui
n'existe pas.
Malheureusement, en JavaScript, le type de données de null est un
objet.
Vous pouvez le considérer comme un bogue dans JavaScript qui typeof
null est un objet. Ça devrait être null.
Vous pouvez vider un objet en le définissant sur null:

Vous pouvez également vider un objet en le définissant sur undefined:
Différence entre indéfini et nul
Undefined et null sont de valeur égale mais de type différent :

L'opérateur instanceof
L' opérateur instanceof renvoie true si un objet est une instance de
l'objet spécifié :
L'opérateur du vide
L' opérateur void évalue une expression et renvoie undefined . Cet opérateur
est souvent utilisé pour obtenir la valeur primitive indéfinie, en utilisant
"void(0)" (utile lors de l'évaluation d'une expression sans utiliser la valeur de
retour).

Conversion de types JavaScript
Conversion de chaînes en nombres
• Conversion de nombres en chaînes
• Conversion de dates en nombres
• Conversion de nombres en dates
• Conversion de booléens en nombres
• Conversion de nombres en booléens
Conversion de types JavaScript
Les variables JavaScript peuvent être converties en une nouvelle variable
et un autre type de données :
• Par l'utilisation d'une fonction JavaScript
• Automatiquement par JavaScript lui-même
Conversion de chaînes en nombres
La méthode Number() globale convertit une variable (ou une valeur) en
nombre.
Une chaîne numérique (comme "3.14") est convertie en un nombre
(comme 3.14).
Une chaîne vide (comme "") est convertie en 0.
Une chaîne non numérique (comme "John") est convertie en NaN(Not a
Number).

Méthodes numériques
Dans le chapitre Méthodes numérique , vous trouverez d'autres méthodes
pouvant être utilisées pour convertir des chaînes en nombres :
L'opérateur unaire +
L' opérateur unaire + peut être utilisé pour convertir une variable en un
nombre :
Si la variable ne peut pas être convertie, elle deviendra quand même un
nombre, mais avec la valeur NaN (Pas un nombre) :

Conversion de nombres en chaînes
La méthode String() globale peut convertir des nombres en chaînes.
Il peut être utilisé sur n'importe quel type de nombres, de littéraux, de
variables ou d'expressions :
La méthode Number toString() fait de même.

Plus de méthodes
Dans le chapitre Méthodes numériques , vous trouverez d'autres
méthodes pouvant être utilisées pour convertir des nombres en
chaînes :
Conversion de dates en nombres
La méthode globale Number() peut être utilisée pour convertir des dates
en nombres.
La méthode de la date getTime() fait la même chose.
Conversion de dates en chaînes
La méthode globale String() peut convertir des dates en chaînes.

La méthode Date toString() fait de même.
Vous trouverez d'autres méthodes pouvant être utilisées pour convertir des
dates en chaînes :

Conversion de booléens en nombres
La méthode globale Number() peut également convertir des booléens en
nombres.

JavaScript Regular Expressions
Une expression régulière est une séquence de caractères qui forme un
modèle de recherche.
Le modèle de recherche peut être utilisé pour les opérations de recherche
et de remplacement de texte.
Qu'est-ce qu'une expression régulière ?
Une expression régulière est une séquence de caractères qui forme un modèle de
recherche .
Lorsque vous recherchez des données dans un texte, vous pouvez utiliser ce modèle
de recherche pour décrire ce que vous recherchez.
Une expression régulière peut être un caractère unique ou un modèle plus compliqué.
Les expressions régulières peuvent être utilisées pour effectuer tous les types d'
opérations de recherche et de remplacement de texte .
Syntaxe
Exemple :

Exemple expliqué :
/w3schools/i est une expression régulière.
w3schools est un modèle (à utiliser dans une recherche).
i est un modificateur (modifie la recherche pour qu'elle soit insensible à la
casse).
Utilisation de méthodes de chaîne
En JavaScript, les expressions régulières sont souvent utilisées avec les deux
méthodes de chaîne : search() et replace().
La méthode search() utilise une expression pour rechercher une correspondance
et renvoie la position de la correspondance.
La méthode replace() renvoie une chaîne modifiée où le modèle est remplacé.
Utilisation de String search() avec une chaîne
La méthode search() recherche une chaîne pour une valeur spécifiée et renvoie la
position de la correspondance :
Exemple
Utilisez une chaîne pour rechercher "W3schools" dans une chaîne :
Le résultat en n sera : 6

Utilisation de String search() avec une expression régulière
Exemple
Utilisez une expression régulière pour effectuer une recherche insensible à la casse
pour "w3schools" dans une chaîne :
Le résultat en n sera : 6
Utilisation de String replace () avec une chaîne
La méthode replace() remplace une valeur spécifiée par une autre valeur dans
une chaîne :
Utiliser String replace() avec une expression régulière
Exemple
Utilisez une expression régulière insensible à la casse pour remplacer Microsoft par
W3Schools dans une chaîne :
Le résultat en résolution sera : Visit W3Schools!

Modificateurs d'expression régulière
Les modificateurs peuvent être utilisés pour effectuer des recherches plus globales
insensibles à la casse :
Modèles d'expressions régulières
Les parenthèses sont utilisées pour trouver une plage de caractères :

Les métacaractères sont des caractères ayant une signification
particulière :
Les quantificateurs définissent les quantités :

Utilisation de l'objet RegExp
En JavaScript, l'objet RegExp est un objet d'expression régulière avec des propriétés
et des méthodes prédéfinies.
Utiliser test()
La méthode test() est une méthode d'expression RegExp.
Il recherche un modèle dans une chaîne et renvoie vrai ou faux, selon le
résultat.
L'exemple suivant recherche dans une chaîne le caractère "e" :
Puisqu'il y a un "e" dans la chaîne, la sortie du code ci-dessus sera : true
Vous n'avez pas besoin de mettre d'abord l'expression régulière dans une
variable. Les deux lignes ci-dessus peuvent être raccourcies en une seule :

Utiliser exec()
La méthode exec() est une méthode d'expression RegExp.
Il recherche une chaîne pour un modèle spécifié et renvoie le texte trouvé sous forme
d'objet.
Si aucune correspondance n'est trouvée, elle renvoie un objet vide (null) .
L'exemple suivant recherche dans une chaîne le caractère "e" :
Référence RegExp complète
Pour une référence complète, rendez-vous sur notre Complete JavaScript RegExp
Reference
La référence contient des descriptions et des exemples de toutes les propriétés et
méthodes RegExp.

JavaScript Operator Precedence
La priorité des opérateurs décrit l'ordre dans lequel les opérations sont effectuées
dans une expression arithmétique.
La multiplication ( *) et la division ( /) ont une priorité plus élevée que l'addition (
+) et la soustraction ( -).
Comme en mathématiques traditionnelles, la multiplication se fait d'abord :
Lorsque vous utilisez des parenthèses, les opérations à l'intérieur des parenthèses sont
calculées en premier :
Les opérations avec la même priorité (comme * et /) sont calculées de gauche à droite

Erreurs JavaScript
Lancez et essayez... attrapez... enfin
L' instruction try définit un bloc de code à exécuter (à essayer).
L' instruction catch définit un bloc de code pour gérer toute erreur.
L' instruction finally définit un bloc de code à exécuter quel que soit le
résultat.
L' instruction throw définit une erreur personnalisée.
Des erreurs arriveront !
Lors de l'exécution du code JavaScript, différentes erreurs peuvent se produire.
Les erreurs peuvent être des erreurs de codage faites par le programmeur, des erreurs
dues à une mauvaise saisie et d'autres choses imprévisibles.
Exemple
Dans cet exemple, nous avons mal orthographié "alert" en tant que "addlert" pour
produire délibérément une erreur :

JavaScript détecte adddlert comme une erreur et exécute le code de capture pour le
gérer.
JavaScript essayer et attraper
L' instruction try vous permet de définir un bloc de code à tester pour les erreurs
pendant son exécution.
L' instruction catch vous permet de définir un bloc de code à exécuter, si une
erreur se produit dans le bloc try.
Les instructions JavaScript try et catch vont par paires :
JavaScript génère des erreurs
Lorsqu'une erreur se produit, JavaScript s'arrête normalement et génère un message
d'erreur.
Le terme technique pour cela est : JavaScript lèvera une exception (lancera une
erreur) .
JavaScript créera en fait un objet Error avec deux propriétés : name et message .

La déclaration de lancer
L' instruction throw vous permet de créer une erreur personnalisée.
Techniquement, vous pouvez lancer une exception (lancer une erreur) .
L'exception peut être un JavaScript String, un Number, un Boolean ou un
Object:
Si vous utilisez throw avec try et catch, vous pouvez contrôler le déroulement
du programme et générer des messages d'erreur personnalisés.
Exemple de validation d'entrée
Cet exemple examine l'entrée. Si la valeur est erronée, une exception (err) est
levée.
L'exception (err) est interceptée par l'instruction catch et un message d'erreur
personnalisé s'affiche :

Validation HTML
Le code ci-dessus n'est qu'un exemple.
Les navigateurs modernes utilisent souvent une combinaison de JavaScript et de
validation HTML intégrée, en utilisant des règles de validation prédéfinies définies
dans les attributs HTML :
La déclaration finally
L' instruction finally vous permet d'exécuter du code, après try and catch, quel
que soit le résultat :

Exemple
L'objet d'erreur
JavaScript a un objet d'erreur intégré qui fournit des informations sur l'erreur
lorsqu'une erreur se produit.
L'objet error fournit deux propriétés utiles : name et message.

JavaScript Scope
La Scope détermine l'accessibilité (visibilité) des variables.
JavaScript a 3 types de portée :
Block scope
Function scope
Global scope
Scope du bloc
Avant ES6 (2015), JavaScript n'avait que Global Scope et Function Scope .
ES6 a introduit deux nouveaux mots-clés JavaScript importants : let et const.
Ces deux mots-clés fournissent Block Scope en JavaScript.
Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles depuis
l'extérieur du bloc :
Les variables déclarées avec le mot- clé var ne peuvent PAS avoir une scope de
bloc.
Les variables déclarées à l'intérieur d'un bloc { } sont accessibles depuis l'extérieur du
bloc.

Scope locale
Les variables déclarées dans une fonction JavaScript deviennent LOCALES à la
fonction.
Étant donné que les variables locales ne sont reconnues qu'à l'intérieur de leurs
fonctions, les variables portant le même nom peuvent être utilisées dans différentes
fonctions.
Les variables locales sont créées lorsqu'une fonction démarre et supprimées lorsque
la fonction est terminée.

Scope de la fonction
JavaScript a une portée de fonction : chaque fonction crée une nouvelle portée.
Les variables définies à l'intérieur d'une fonction ne sont pas accessibles (visibles)
depuis l'extérieur de la fonction.
Les variables déclarées avec var, let et constsont assez similaires lorsqu'elles
sont déclarées dans une fonction.
Ils ont tous une portée de fonction :
Variables JavaScript globales
Une variable déclarée en dehors d'une fonction, devient GLOBAL .

Global scope
Les variables déclarées Globally (en dehors de toute fonction) ont Global Scope .
Les variables globales sont accessibles de n'importe où dans un programme
JavaScript.
Les variables déclarées avec var, let et const sont assez similaires lorsqu'elles
sont déclarées en dehors d'un bloc.
Ils ont tous une Global scope :
En JavaScript, les objets et les fonctions sont également des variables.

Automatiquement global
Si vous affectez une valeur à une variable non déclarée, elle deviendra
automatiquement une variable GLOBALE .
Cet exemple de code déclarera une variable globale carName, même si la valeur est
affectée à l'intérieur d'une fonction.
La durée de vie des variables JavaScript
La durée de vie d'une variable JavaScript commence lorsqu'elle est déclarée.
Les variables de fonction (locales) sont supprimées lorsque la fonction est
terminée.
Dans un navigateur Web, les variables globales sont supprimées lorsque vous
fermez la fenêtre (ou l'onglet) du navigateur.

JavaScript Hoisting
Le Hoisting est le comportement par défaut de JavaScript pour déplacer les
déclarations vers le haut.
Les déclarations JavaScript sont hissées
En JavaScript, une variable peut être déclarée après avoir été utilisée.
Autrement dit; une variable peut être utilisée avant d'avoir été déclarée.
L' exemple 1 donne le même résultat que l' exemple 2 :
Exemple 2
Pour comprendre cela, vous devez comprendre le terme "Hoisting".
Le Hoisting est le comportement par défaut de JavaScript consistant à
déplacer toutes les déclarations vers le haut de la portée actuelle (vers le
haut du script actuel ou de la fonction actuelle).

Les mots-clés let et const
Les variables définies avec let et const sont hissées en haut du bloc,
mais pas initialisées .
Signification : Le bloc de code connaît la variable, mais elle ne peut pas
être utilisée tant qu'elle n'a pas été déclarée.
L'utilisation d'une variable let avant qu'elle ne soit déclarée entraînera un
Reference Error.
La variable est dans une "zone morte temporelle" depuis le début du bloc
jusqu'à ce qu'elle soit déclarée :
L'utilisation d'une const variable avant qu'elle ne soit déclarée est une
erreur de syntaxe, donc le code ne s'exécutera tout simplement pas.

Les initialisations JavaScript ne sont pas hissées
JavaScript ne hisse que les déclarations, pas les initialisations.
L' exemple 1 ne donne pas le même résultat que l' exemple 2 :
Est-il logique que y soit indéfini dans le dernier exemple ?
En effet, seule la déclaration (var y), et non l'initialisation (=7) est hissée au sommet.
En raison du hoisting, y a été déclaré avant d'être utilisé, mais comme les
initialisations ne sont pas hissées, la valeur de y est indéfinie.
L'exemple 2 revient au même que d'écrire :

Déclarez vos variables en haut !
Le hoisting est (pour de nombreux développeurs) un comportement inconnu
ou négligé de JavaScript.
Si un développeur ne comprend pas le hoisting, les programmes peuvent
contenir des bogues (erreurs).
Pour éviter les bogues, déclarez toujours toutes les variables au début de
chaque scope.
Puisque c'est ainsi que JavaScript interprète le code, c'est toujours une
bonne règle.

Utilisation stricte de JavaScript
"use strict";Définit que le code JavaScript doit être exécuté en "mode
strict".
The "use strict" Directive
La directive "use strict" était nouvelle dans ECMAScript version 5.
Ce n'est pas une déclaration, mais une expression littérale, ignorée par les versions
antérieures de JavaScript.
Le but de "use strict" est d'indiquer que le code doit être exécuté en "mode strict".
Avec le mode strict, vous ne pouvez pas, par exemple, utiliser des variables non
déclarées.
Tous les navigateurs modernes prennent en charge "use strict" sauf Internet Explorer
9 et inférieur :
Déclarer le mode strict
Le mode strict est déclaré en ajoutant "use strict" ; au début d'un script ou d'une
fonction.
Déclaré au début d'un script, il a une portée globale (tout le code du script s'exécutera
en mode strict) :

Déclarée à l'intérieur d'une fonction, elle a une scope locale (seul le code à
l'intérieur de la fonction est en mode strict) :
Le Syntaxe "use strict" ;
La syntaxe, pour déclarer le mode strict, a été conçue pour être compatible
avec les anciennes versions de JavaScript.
Compiler un littéral numérique (4 + 5;) ou un littéral de chaîne ("John
Doe";) dans un programme JavaScript n'a aucun effet secondaire. Il se
compile simplement en une variable non existante et meurt.
Cela "use strict" n'a donc d'importance que pour les nouveaux
compilateurs qui en "comprennent" le sens.

Pourquoi le mode strict ?
Le mode strict facilite l'écriture de JavaScript "sécurisé".
Le mode strict transforme la "mauvaise syntaxe" précédemment acceptée en
véritables erreurs.
Par exemple, en JavaScript normal, la saisie erronée d'un nom de variable crée
une nouvelle variable globale. En mode strict, cela générera une erreur, rendant
impossible la création accidentelle d'une variable globale.
En JavaScript normal, un développeur ne recevra aucun retour d'erreur en
attribuant des valeurs aux propriétés non inscriptibles.
En mode strict, toute affectation à une propriété non inscriptible, une propriété
getter uniquement, une propriété inexistante, une variable inexistante ou un
objet inexistant génère une erreur.
Non autorisé en mode strict
L'utilisation d'une variable, sans la déclarer, n'est pas autorisée :
L'utilisation d'un objet, sans le déclarer, n'est pas autorisée :
La suppression d'une variable (ou d'un objet) n'est pas autorisée.

La suppression d'une fonction n'est pas autorisée.

The JavaScript this Keyword
Qu'est- ce que THIS ?
En JavaScript, le mot- clé this fait référence à un objet .
Quel objet dépend de la façon dont il est this invoqué (utilisé ou
appelé).
Le mot- clé this fait référence à différents objets selon la façon dont il
est utilisé :

THIS dans une méthode
Lorsqu'il est utilisé dans une méthode d'objet, this fait référence à l' objet .
Dans l'exemple en haut de cette page, this fait référence à l' objet personne .
Parce que la méthode fullName est une méthode de l' objet person .
this seul
Lorsqu'il est utilisé seul, this fait référence à l' objet global .
Parce que this s'exécute dans la scope globale.
Dans une fenêtre de navigateur l'objet global est [object Window]:
En mode strict , lorsqu'il est utilisé seul, this fait également référence à l' objet
global :

THIS dans une fonction (par défaut)
Dans une fonction, l' objet global est la liaison par défaut pour this.
Dans une fenêtre de navigateur l'objet global est [object Window]:
this dans les gestionnaires d'événements
Dans les gestionnaires d'événements HTML, this fait référence à
l'élément HTML qui a reçu l'événement :

Liaison de méthode d'objet
Dans ces exemples, this est l' objet person :
c'est-à -dire que this.firstName est la propriété firstName de this (l'objet
personne).

JavaScript Arrow Function
Les fonctions fléchées ont été introduites dans ES6.
Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus
courte :
let myFunction = (a, b) => a * b;
Avant Flèche :
Apres Flèche :
ça devient plus court ! Si la fonction n'a qu'une seule instruction et que
l'instruction renvoie une valeur, vous pouvez supprimer les crochets et le mot-
clé return :

Les fonctions fléchées renvoient la valeur par défaut :
Si vous avez des paramètres, vous les passez entre parenthèses :
En fait, si vous n'avez qu'un seul paramètre, vous pouvez également ignorer les
parenthèses :

JavaScript Classes
ECMAScript 2015, également connu sous le nom d'ES6, a introduit les classes
JavaScript.
Les classes JavaScript sont des modèles pour les objets JavaScri
Syntaxe de classe JavaScript
Utilisez le mot-clé class pour créer une classe.
Ajoutez toujours une méthode nommée constructor():
Syntaxe
Exemple
L'exemple ci-dessus crée une classe nommée "Car".
La classe a deux propriétés initiales : "nom" et "année".
Une classe JavaScript n'est pas un objet.
C'est un modèle pour les objets JavaScript.

Utiliser une classe
Lorsque vous avez une classe, vous pouvez l'utiliser pour créer des objets :
L'exemple ci-dessus utilise la classe Car pour créer deux objets Car .
La méthode constructeur est appelée automatiquement lorsqu'un nouvel
objet est créé.
La méthode constructeur
La méthode constructeur est une méthode spéciale :
• Il doit avoir le nom exact "constructeur"
• Il est exécuté automatiquement lorsqu'un nouvel objet est créé
• Il est utilisé pour initialiser les propriétés de l'objet
Si vous ne définissez pas de méthode constructeur, JavaScript ajoutera une
méthode constructeur vide.
Méthodes de classe
Les méthodes de classe sont créées avec la même syntaxe que les méthodes
d'objet.
Utilisez le mot-clé class pour créer une classe.
Ajoutez toujours une méthode constructor().
Ajoutez ensuite n'importe quel nombre de méthodes.

Syntaxe
Créez une méthode Class nommée "age", qui renvoie l'âge de la voiture :

Vous pouvez envoyer des paramètres aux méthodes Class :

JavaScript Modules
Les modules JavaScript vous permettent de diviser votre code en fichiers
séparés.
Cela facilite la maintenance de la base de code.
Les modules JavaScript reposent sur les instructions import et
export.
Exporter
Vous pouvez exporter une fonction ou une variable à partir de n'importe quel fichier.
Créons un fichier nommé person.js et remplissez-le avec les éléments que nous
voulons exporter.
Il existe deux types d'exportations : nommées et par défaut.
Exportations nommées
Vous pouvez créer des exportations nommées de deux manières. En ligne
individuellement, ou tous à la fois en bas.
En ligne individuellement :
Tout à la fois en bas :

Exportations par défaut
Créons un autre fichier, nommé message.js, et utilisons-le pour
démontrer l'exportation par défaut.
Vous ne pouvez avoir qu'une seule exportation par défaut dans un fichier.
Importer
Vous pouvez importer des modules dans un fichier de deux manières, selon qu'il
s'agit d'exportations nommées ou d'exportations par défaut.
Les exportations nommées sont construites à l'aide d'accolades. Les
exportations par défaut ne le sont pas.
Importer à partir des exportations par défaut
Importez un export par défaut depuis le fichier message.js :

Javascript JSON
JSON est un format de stockage et de transport de données.
JSON est souvent utilisé lorsque des données sont envoyées d'un serveur à une page
Web.
Qu'est-ce que JSON ?
• JSON signifie Java Script Object Notation
• JSON est un format d'échange de données léger
• JSON est indépendant de la langue *
• JSON est "auto-descriptif" et facile à comprendre
* La syntaxe JSON est dérivée de la syntaxe de notation d'objet JavaScript, mais le
format JSON est uniquement du texte. Le code de lecture et de génération de données
JSON peut être écrit dans n'importe quel langage de programmation.
Exemple JSON
Cette syntaxe JSON définit un objet Employés : un tableau de 3 enregistrements
d'employés (objets) :

Le format JSON est évalué en objets JavaScript
Le format JSON est syntaxiquement identique au code de création d'objets
JavaScript.
En raison de cette similitude, un programme JavaScript peut facilement convertir des
données JSON en objets JavaScript natifs.
Règles de syntaxe JSON
• Les données sont dans des paires nom/valeur
• Les données sont séparées par des virgules
• Les accolades maintiennent des objets
• Les crochets contiennent des tableaux
Données JSON - Un nom et une valeur
Les données JSON sont écrites sous forme de paires nom/valeur, tout comme les propriétés d'objet
JavaScript.
Une paire nom/valeur se compose d'un nom de champ (entre guillemets doubles), suivi de deux-
points, suivi d'une valeur :
Les noms JSON nécessitent des guillemets doubles. Les noms JavaScript ne le font
pas.

Objets JSON
Les objets JSON sont écrits entre accolades.
Comme en JavaScript, les objets peuvent contenir plusieurs paires nom/valeur :
Tableaux JSON
Les tableaux JSON sont écrits entre crochets.
Comme en JavaScript, un tableau peut contenir des objets :
Dans l'exemple ci-dessus, l'objet "employés" est un tableau. Il contient trois objets.
Chaque objet est un enregistrement d'une personne (avec un prénom et un nom de
famille)

Conversion d'un texte JSON en objet JavaScript
Une utilisation courante de JSON consiste à lire des données à partir d'un serveur
Web et à afficher les données dans une page Web.
Pour plus de simplicité, cela peut être démontré en utilisant une chaîne comme entrée.
Commencez par créer une chaîne JavaScript contenant la syntaxe JSON :
Ensuite, utilisez la fonction intégrée JavaScript JSON.parse() pour convertir la
chaîne en objet JavaScript :
Enfin, utilisez le nouvel objet JavaScript dans votre page :

JavaScript Debugging
Le code de programmation peut contenir des erreurs de syntaxe ou des erreurs
logiques.
Beaucoup de ces erreurs sont difficiles à diagnostiquer.
Souvent, lorsque le code de programmation contient des erreurs, rien ne se passe. Il
n'y a pas de messages d'erreur et vous n'obtiendrez aucune indication sur l'endroit où
rechercher les erreurs.
La recherche (et la correction) des erreurs dans le code de programmation s'appelle le
débogage du code.
Débogueurs JavaScript
Le débogage n'est pas facile. Mais heureusement, tous les navigateurs modernes ont
un débogueur JavaScript intégré.
Les débogueurs intégrés peuvent être activés et désactivés, ce qui force le
signalement des erreurs à l'utilisateur.
Avec un débogueur, vous pouvez également définir des points d'arrêt (endroits où
l'exécution du code peut être arrêtée) et examiner les variables pendant l'exécution du
code.
Normalement (sinon suivez les étapes en bas de cette page), vous activez le débogage
dans votre navigateur avec la touche F12, et sélectionnez "Console" dans le menu du
débogueur.

La méthode console.log()
Si votre navigateur prend en charge le débogage, vous pouvez utiliser
console.log() pour afficher les valeurs JavaScript dans la fenêtre du débogueur
Définir des points d'arrêt
Dans la fenêtre du débogueur, vous pouvez définir des points d'arrêt dans le code
JavaScript.
À chaque point d'arrêt, JavaScript arrête de s'exécuter et vous permet d'examiner les
valeurs JavaScript.
Après avoir examiné les valeurs, vous pouvez reprendre l'exécution du code
(généralement avec un bouton de lecture).

Le mot-clé du débogueur
Le mot-clé debugger arrête l'exécution de JavaScript et appelle (si disponible) la fonction de
débogage.
Cela a la même fonction que de définir un point d'arrêt dans le débogueur.
Si aucun débogage n'est disponible, l'instruction de débogage n'a aucun effet.
Avec le débogueur activé, ce code cessera de s'exécuter avant d'exécuter la troisième ligne.
Outils de débogage des principaux navigateurs
Normalement, vous activez le débogage dans votre navigateur avec F12, et sélectionnez "Console"
dans le menu du débogueur.
Sinon suivez ces étapes :
Chrome
• Ouvrez le navigateur.
• Dans le menu, sélectionnez "Plus d'outils".
• Dans les outils, choisissez "Outils de développement".
• Enfin, sélectionnez Console.
Firefox
• Ouvrez le navigateur.
• Dans le menu, sélectionnez "Développeur Web".
• Enfin, sélectionnez "Console Web".
Fin merci pour votre attention

js.pdf

Contenu connexe

Tendances (20)

Similaire à js.pdf (20)

Plus de Jaouad Assabbour (16)

js.pdf