SlideShare une entreprise Scribd logo
1  sur  164
Télécharger pour lire hors ligne
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)
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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>
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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é :
Formateur Jaouad Assabbour
JavaScript externe
Les scripts peuvent également être placés dans des fichiers externes :
Fichier externe : monScript.js
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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().
Formateur Jaouad Assabbour
• É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():
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
• 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.
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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) .
Formateur Jaouad Assabbour
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 .
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
Mais vous ne pouvez PAS réaffecter l'objet :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
Opérateurs de comparaison JavaScript
Opérateurs logiques JavaScript
Opérateurs de type JavaScript
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 .
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
É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".
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 .
Formateur Jaouad Assabbour
Un moyen plus sûr de décomposer une chaîne consiste à utiliser l'ajout de
chaîne :
Formateur Jaouad Assabbour
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)
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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é :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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() :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Notez que la fonction prend 3 arguments :
La valeur de l'article
L'index des articles
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 :
Formateur Jaouad Assabbour
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 :
Notez que la fonction prend 3 arguments :
La valeur de l'article
L'index des articles
Le tableau lui-même
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 :
Formateur Jaouad Assabbour
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().
Notez que la fonction prend 4 arguments :
Le total (la valeur initiale / la valeur précédemment renvoyée)
La valeur de l'article
L'index des articles
Le tableau lui-même
L'exemple ci-dessus n'utilise pas les paramètres d'index et de tableau. Il peut être
réécrit en :
Formateur Jaouad Assabbour
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().
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Notez que la fonction prend 3 arguments :
• La valeur de l'article
• L'index des articles
• Le tableau lui-même
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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é :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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) :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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) :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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":
Formateur Jaouad Assabbour
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é.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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é.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
Array.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
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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():
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
La méthode entry()
La méthode entry() renvoie un objet itérateur avec la [clé, valeurs]
dans un Map :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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).
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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") :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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:
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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).
Formateur Jaouad Assabbour
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).
Formateur Jaouad Assabbour
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) :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
Conversion de booléens en nombres
La méthode globale Number() peut également convertir des booléens en
nombres.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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!
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
Les métacaractères sont des caractères ayant une signification
particulière :
Les quantificateurs définissent les quantités :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 .
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 .
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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).
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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) :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
La suppression d'une fonction n'est pas autorisée.
Formateur Jaouad Assabbour
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é :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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).
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
Syntaxe
Créez une méthode Class nommée "age", qui renvoie l'âge de la voiture :
Formateur Jaouad Assabbour
Vous pouvez envoyer des paramètres aux méthodes Class :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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) :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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)
Formateur Jaouad Assabbour
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 :
Formateur Jaouad Assabbour
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.
Formateur Jaouad Assabbour
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).
Formateur Jaouad Assabbour
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
Formateur Jaouad Assabbour
Formateur Jaouad Assabbour

Contenu connexe

Tendances

JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java Youness Boukouchi
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPierre Faure
 
Workshop Spring - Session 4 - Spring Batch
Workshop Spring -  Session 4 - Spring BatchWorkshop Spring -  Session 4 - Spring Batch
Workshop Spring - Session 4 - Spring BatchAntoine Rey
 
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...ENSET, Université Hassan II Casablanca
 
La persistance des données : ORM et hibernate
La persistance des données : ORM et hibernateLa persistance des données : ORM et hibernate
La persistance des données : ORM et hibernateYouness Boukouchi
 
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACKCv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACKMoez Hamzaoui
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootDNG Consulting
 
Application Spring MVC/IOC & Hibernate
Application Spring MVC/IOC & HibernateApplication Spring MVC/IOC & Hibernate
Application Spring MVC/IOC & HibernateInes Ouaz
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockageLilia Sfaxi
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVCNathaniel Richand
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 

Tendances (20)

JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Hibernate jpa
Hibernate jpaHibernate jpa
Hibernate jpa
 
Workshop Spring - Session 4 - Spring Batch
Workshop Spring -  Session 4 - Spring BatchWorkshop Spring -  Session 4 - Spring Batch
Workshop Spring - Session 4 - Spring Batch
 
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Les Servlets et JSP
Les Servlets et JSPLes Servlets et JSP
Les Servlets et JSP
 
La persistance des données : ORM et hibernate
La persistance des données : ORM et hibernateLa persistance des données : ORM et hibernate
La persistance des données : ORM et hibernate
 
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACKCv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
 
Hive ppt (1)
Hive ppt (1)Hive ppt (1)
Hive ppt (1)
 
Application Spring MVC/IOC & Hibernate
Application Spring MVC/IOC & HibernateApplication Spring MVC/IOC & Hibernate
Application Spring MVC/IOC & Hibernate
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
 
Spring Batch Avance
Spring Batch AvanceSpring Batch Avance
Spring Batch Avance
 
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka StreamsTraitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 

Similaire à js.pdf

Cours javascript
Cours javascriptCours javascript
Cours javascriptkrymo
 
Formation java script
Formation java scriptFormation java script
Formation java scriptRomdhani Asma
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.pptPROFPROF11
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScriptMouna Dhaouadi
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Martin Latrille
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Alexandre Marie
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.pptMarwenJAZI
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024YounesOuladSayad1
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Gregory Renard
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Gregory Renard
 
Jquery
JqueryJquery
Jquerykrymo
 

Similaire à js.pdf (20)

Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Formation java script
Formation java scriptFormation java script
Formation java script
 
Chapitre 4 Java script
Chapitre 4 Java scriptChapitre 4 Java script
Chapitre 4 Java script
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
Cours Ynov JS B1_1
Cours Ynov JS B1_1Cours Ynov JS B1_1
Cours Ynov JS B1_1
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Cours Php
Cours PhpCours Php
Cours Php
 
Cours Php
Cours PhpCours Php
Cours Php
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Chapter1
Chapter1Chapter1
Chapter1
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.ppt
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
CSS 3
CSS 3CSS 3
CSS 3
 
Jquery
JqueryJquery
Jquery
 

Plus de Jaouad Assabbour (12)

Kubernetes (k8s).pdf
Kubernetes (k8s).pdfKubernetes (k8s).pdf
Kubernetes (k8s).pdf
 
docker.pdf
docker.pdfdocker.pdf
docker.pdf
 
Ansible-cours .pdf
Ansible-cours .pdfAnsible-cours .pdf
Ansible-cours .pdf
 
test-formulaire-angular.pdf
test-formulaire-angular.pdftest-formulaire-angular.pdf
test-formulaire-angular.pdf
 
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdfJWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
 
ajax.pdf
ajax.pdfajax.pdf
ajax.pdf
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
nodejs.pdf
nodejs.pdfnodejs.pdf
nodejs.pdf
 
cours java complet-2.pdf
cours java complet-2.pdfcours java complet-2.pdf
cours java complet-2.pdf
 
git.pdf
git.pdfgit.pdf
git.pdf
 
SQL.pdf
SQL.pdfSQL.pdf
SQL.pdf
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 

js.pdf

  • 2. 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) Formateur Jaouad Assabbour
  • 3. 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 : Formateur Jaouad Assabbour
  • 4. 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> Formateur Jaouad Assabbour
  • 5. 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. Formateur Jaouad Assabbour
  • 6. 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é : Formateur Jaouad Assabbour
  • 7. JavaScript externe Les scripts peuvent également être placés dans des fichiers externes : Fichier externe : monScript.js Formateur Jaouad Assabbour
  • 8. 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 Formateur Jaouad Assabbour
  • 9. 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(). Formateur Jaouad Assabbour
  • 10. • É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(): Formateur Jaouad Assabbour
  • 11. 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 : Formateur Jaouad Assabbour
  • 12. 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 : Formateur Jaouad Assabbour
  • 13. 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. Formateur Jaouad Assabbour
  • 14. 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. Formateur Jaouad Assabbour
  • 15. 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 : Formateur Jaouad Assabbour
  • 16. 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 : Formateur Jaouad Assabbour
  • 17. 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 : Formateur Jaouad Assabbour
  • 18. 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. Formateur Jaouad Assabbour
  • 19. 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. Formateur Jaouad Assabbour
  • 20. 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 : Formateur Jaouad Assabbour
  • 21. 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 : Formateur Jaouad Assabbour
  • 22. • 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. Formateur Jaouad Assabbour
  • 23. 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 Formateur Jaouad Assabbour
  • 24. 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. Formateur Jaouad Assabbour
  • 25. 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) . Formateur Jaouad Assabbour
  • 26. 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 . Formateur Jaouad Assabbour
  • 27. 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 : Formateur Jaouad Assabbour
  • 28. 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. Formateur Jaouad Assabbour
  • 29. 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. Formateur Jaouad Assabbour
  • 30. 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 : Formateur Jaouad Assabbour
  • 31. Mais vous ne pouvez PAS réaffecter l'objet : Formateur Jaouad Assabbour
  • 32. 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. Formateur Jaouad Assabbour
  • 33. 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 : Formateur Jaouad Assabbour
  • 34. Opérateurs de comparaison JavaScript Opérateurs logiques JavaScript Opérateurs de type JavaScript Formateur Jaouad Assabbour
  • 35. 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. Formateur Jaouad Assabbour
  • 36. 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. Formateur Jaouad Assabbour
  • 37. 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. Formateur Jaouad Assabbour
  • 38. 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 : Formateur Jaouad Assabbour
  • 39. 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. Formateur Jaouad Assabbour
  • 40. 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. Formateur Jaouad Assabbour
  • 41. 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. Formateur Jaouad Assabbour
  • 42. 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. Formateur Jaouad Assabbour
  • 43. 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 : Formateur Jaouad Assabbour
  • 44. 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 : Formateur Jaouad Assabbour
  • 45. 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 Formateur Jaouad Assabbour
  • 46. 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 . Formateur Jaouad Assabbour
  • 47. 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. Formateur Jaouad Assabbour
  • 48. 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 : Formateur Jaouad Assabbour
  • 49. É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". Formateur Jaouad Assabbour
  • 50. 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 : Formateur Jaouad Assabbour
  • 51. 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 Formateur Jaouad Assabbour
  • 52. 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 : Formateur Jaouad Assabbour
  • 53. 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 . Formateur Jaouad Assabbour
  • 54. Un moyen plus sûr de décomposer une chaîne consiste à utiliser l'ajout de chaîne : Formateur Jaouad Assabbour
  • 55. 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) Formateur Jaouad Assabbour
  • 56. 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. Formateur Jaouad Assabbour
  • 57. 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 : Formateur Jaouad Assabbour
  • 58. 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. Formateur Jaouad Assabbour
  • 59. 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é : Formateur Jaouad Assabbour
  • 60. 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. Formateur Jaouad Assabbour
  • 61. 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 Formateur Jaouad Assabbour
  • 62. 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 : Formateur Jaouad Assabbour
  • 63. 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 Formateur Jaouad Assabbour
  • 64. 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() : Formateur Jaouad Assabbour
  • 65. 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 : Formateur Jaouad Assabbour
  • 66. 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 Formateur Jaouad Assabbour
  • 67. 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 : Notez que la fonction prend 3 arguments : La valeur de l'article L'index des articles 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 : Formateur Jaouad Assabbour
  • 68. 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 : Notez que la fonction prend 3 arguments : La valeur de l'article L'index des articles Le tableau lui-même 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 : Formateur Jaouad Assabbour
  • 69. 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(). Notez que la fonction prend 4 arguments : Le total (la valeur initiale / la valeur précédemment renvoyée) La valeur de l'article L'index des articles Le tableau lui-même L'exemple ci-dessus n'utilise pas les paramètres d'index et de tableau. Il peut être réécrit en : Formateur Jaouad Assabbour
  • 70. 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(). Formateur Jaouad Assabbour
  • 71. 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. Formateur Jaouad Assabbour
  • 72. 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 : Notez que la fonction prend 3 arguments : • La valeur de l'article • L'index des articles • Le tableau lui-même Formateur Jaouad Assabbour
  • 73. 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. Formateur Jaouad Assabbour
  • 74. 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. Formateur Jaouad Assabbour
  • 75. 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é : Formateur Jaouad Assabbour
  • 76. 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 : Formateur Jaouad Assabbour
  • 77. 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 : Formateur Jaouad Assabbour
  • 78. 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) : Formateur Jaouad Assabbour
  • 79. 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 Formateur Jaouad Assabbour
  • 80. 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) : Formateur Jaouad Assabbour
  • 81. 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 : Formateur Jaouad Assabbour
  • 82. 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 Formateur Jaouad Assabbour
  • 83. 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. Formateur Jaouad Assabbour
  • 84. 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": Formateur Jaouad Assabbour
  • 85. 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é. Formateur Jaouad Assabbour
  • 86. 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 : Formateur Jaouad Assabbour
  • 87. 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 : Formateur Jaouad Assabbour
  • 88. 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 Formateur Jaouad Assabbour
  • 89. 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é. Formateur Jaouad Assabbour
  • 90. 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 : Formateur Jaouad Assabbour
  • 91. Array.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 Formateur Jaouad Assabbour
  • 92. 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. Formateur Jaouad Assabbour
  • 93. 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 Formateur Jaouad Assabbour
  • 94. 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 : Formateur Jaouad Assabbour
  • 95. 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 Formateur Jaouad Assabbour
  • 96. 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 : Formateur Jaouad Assabbour
  • 97. 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 Formateur Jaouad Assabbour
  • 98. 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 : Formateur Jaouad Assabbour
  • 99. 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 Formateur Jaouad Assabbour
  • 100. 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(): Formateur Jaouad Assabbour
  • 101. 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 : Formateur Jaouad Assabbour
  • 102. 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 : Formateur Jaouad Assabbour
  • 103. La méthode entry() La méthode entry() renvoie un objet itérateur avec la [clé, valeurs] dans un Map : Formateur Jaouad Assabbour
  • 104. 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 Formateur Jaouad Assabbour
  • 105. 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). Formateur Jaouad Assabbour
  • 106. 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. Formateur Jaouad Assabbour
  • 107. 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") : Formateur Jaouad Assabbour
  • 108. 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. Formateur Jaouad Assabbour
  • 109. 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: Formateur Jaouad Assabbour
  • 110. 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 : Formateur Jaouad Assabbour
  • 111. 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). Formateur Jaouad Assabbour
  • 112. 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). Formateur Jaouad Assabbour
  • 113. 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) : Formateur Jaouad Assabbour
  • 114. 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. Formateur Jaouad Assabbour
  • 115. 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. Formateur Jaouad Assabbour
  • 116. 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 : Formateur Jaouad Assabbour
  • 117. Conversion de booléens en nombres La méthode globale Number() peut également convertir des booléens en nombres. Formateur Jaouad Assabbour
  • 118. 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 : Formateur Jaouad Assabbour
  • 119. 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 Formateur Jaouad Assabbour
  • 120. 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! Formateur Jaouad Assabbour
  • 121. 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 : Formateur Jaouad Assabbour
  • 122. Les métacaractères sont des caractères ayant une signification particulière : Les quantificateurs définissent les quantités : Formateur Jaouad Assabbour
  • 123. 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 : Formateur Jaouad Assabbour
  • 124. 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. Formateur Jaouad Assabbour
  • 125. 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 Formateur Jaouad Assabbour
  • 126. 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 : Formateur Jaouad Assabbour
  • 127. 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 . Formateur Jaouad Assabbour
  • 128. 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 : Formateur Jaouad Assabbour
  • 130. 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 : Formateur Jaouad Assabbour
  • 131. 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. Formateur Jaouad Assabbour
  • 132. 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. Formateur Jaouad Assabbour
  • 133. 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. Formateur Jaouad Assabbour
  • 134. 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 . Formateur Jaouad Assabbour
  • 135. 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. Formateur Jaouad Assabbour
  • 136. 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. Formateur Jaouad Assabbour
  • 137. 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). Formateur Jaouad Assabbour
  • 138. 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. Formateur Jaouad Assabbour
  • 139. 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 : Formateur Jaouad Assabbour
  • 140. 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. Formateur Jaouad Assabbour
  • 141. 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) : Formateur Jaouad Assabbour
  • 142. 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. Formateur Jaouad Assabbour
  • 143. 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. Formateur Jaouad Assabbour
  • 144. La suppression d'une fonction n'est pas autorisée. Formateur Jaouad Assabbour
  • 145. 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é : Formateur Jaouad Assabbour
  • 146. 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 : Formateur Jaouad Assabbour
  • 147. 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 : Formateur Jaouad Assabbour
  • 148. 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). Formateur Jaouad Assabbour
  • 149. 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 : Formateur Jaouad Assabbour
  • 150. 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 : Formateur Jaouad Assabbour
  • 151. 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. Formateur Jaouad Assabbour
  • 152. 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. Formateur Jaouad Assabbour
  • 153. Syntaxe Créez une méthode Class nommée "age", qui renvoie l'âge de la voiture : Formateur Jaouad Assabbour
  • 154. Vous pouvez envoyer des paramètres aux méthodes Class : Formateur Jaouad Assabbour
  • 155. 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 : Formateur Jaouad Assabbour
  • 156. 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 : Formateur Jaouad Assabbour
  • 157. 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) : Formateur Jaouad Assabbour
  • 158. 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. Formateur Jaouad Assabbour
  • 159. 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) Formateur Jaouad Assabbour
  • 160. 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 : Formateur Jaouad Assabbour
  • 161. 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. Formateur Jaouad Assabbour
  • 162. 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). Formateur Jaouad Assabbour
  • 163. 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 Formateur Jaouad Assabbour