Successfully reported this slideshow.
Your SlideShare is downloading. ×
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
JavaScript
Formateur Jaouad Assabbour
what is javascript ?
JavaScript est le langage de programmation le plus populaire au monde.
JavaScript est le langage de p...
Présentation de Javascript
JavaScript peut modifier le contenu HTML
L'une des nombreuses méthodes JavaScript HTML est
getE...
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Upcoming SlideShare
test-formulaire-angular.pdf
test-formulaire-angular.pdf
Loading in …3
×

Check these out next

1 of 164 Ad

More Related Content

Recently uploaded (20)

Advertisement

js.pdf

  1. 1. JavaScript Formateur Jaouad Assabbour
  2. 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. 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. 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. 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. 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. 7. JavaScript externe Les scripts peuvent également être placés dans des fichiers externes : Fichier externe : monScript.js Formateur Jaouad Assabbour
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 31. Mais vous ne pouvez PAS réaffecter l'objet : Formateur Jaouad Assabbour
  32. 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. 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. 34. Opérateurs de comparaison JavaScript Opérateurs logiques JavaScript Opérateurs de type JavaScript Formateur Jaouad Assabbour
  35. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 54. Un moyen plus sûr de décomposer une chaîne consiste à utiliser l'ajout de chaîne : Formateur Jaouad Assabbour
  55. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 117. Conversion de booléens en nombres La méthode globale Number() peut également convertir des booléens en nombres. Formateur Jaouad Assabbour
  118. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  129. 129. Formateur Jaouad Assabbour
  130. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 144. La suppression d'une fonction n'est pas autorisée. Formateur Jaouad Assabbour
  145. 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. 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. 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. 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. 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. 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. 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. 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. 153. Syntaxe Créez une méthode Class nommée "age", qui renvoie l'âge de la voiture : Formateur Jaouad Assabbour
  154. 154. Vous pouvez envoyer des paramètres aux méthodes Class : Formateur Jaouad Assabbour
  155. 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. 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. 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. 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. 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. 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. 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. 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. 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
  164. 164. Formateur Jaouad Assabbour

×