Le cours complet de JavaScript 2025 : de débutant à pro

1. Bienvenue et plan de cours: Bienvenue dans le cours complet de JavaScript pour 2025. Dans ce cours, vous allez apprendre tout ce que vous devez savoir pour maîtriser le Javascript et commencer à maîtriser le Javascript et commencer créer des applications du monde réel. Que vous débutiez ou que vous cherchiez à parfaire vos compétences, ce cours est conçu pour vous présenter étape par étape tous les principes fondamentaux et les sujets avancés. Voici ce que vous allez apprendre dans le cadre de ce cours. Nous allons commencer par comprendre ce qu'est JavaScript, son historique et comment configurer un environnement de développement. Nous aborderons les éléments fondamentaux tels que les types de données, les opérateurs, manière de contrôler le flux, d'exécuter des boucles en JavaScript, d'utiliser des fonctions, des objets, etc. Nous découvrirons ensuite le modèle d'objet du document et comment interagir avec les éléments d'une page Web et comment les manipuler à l'aide de JavaScript. Ensuite, nous passerons à la gestion des erreurs et au débogage Nous comprendrons comment gérer les erreurs et comment les déboguer dans la console ainsi que dans les outils de développement du navigateur Dans les dernières sections, nous allons également découvrir le JavaScript asynchrone, notamment comment gérer des tâches chronophages telles que les requêtes réseau ou les rappels avec promesses, l'attente asynchrone, attente asynchrone L'avantage de ce cours est que tout au long du cours, vous ne vous contenterez pas de regarder passivement les vidéos Vous participerez activement à des exercices pratiques et à des projets pratiques. C'est le moyen le plus efficace de vraiment comprendre et internaliser ces concepts Développez des projets pratiques pour appliquer ce que vous avez appris dans ce cours, un calculateur en ligne, un questionnaire et un tableau de bord météo. À la fin de ce cours, vous aurez non seulement compris la théorie qui sous-tend JavaScript, mais vous aurez également les compétences nécessaires pour créer vos propres projets Web. Un petit mot à mon sujet. Je suis Hike, un développeur senior de logiciels complets avec plus de sept ans d'expérience dans la création applications JavaScript réelles. J'ai travaillé avec plus de dix entreprises et j'ai réalisé plus de 20 projets, dont la plupart utilisaient JavaScript. J'ai hâte de vous aider à devenir un développeur JavaScript confiant. En maîtrisant les sujets abordés dans ce cours, vous serez sur la bonne voie pour devenir un développeur JavaScript réactif ou Full Stack 2. Qu'est-ce que JavaScript ?: Commencez par la question la plus évidente, ce qu'est JavaScript et pourquoi vous devriez envisager de l'apprendre. JavaScript est l'un des langages de programmation les plus populaires. Il domine le développement Web en alimentant fois les interactions côté client dans les navigateurs et les applications côté serveur via node JS Comme vous pouvez le constater, selon la dernière enquête menée auprès des développeurs sur Stack Overflow ainsi que dans les dernières mises à jour de Statista, JavaScript est le langage le plus utilisé par les Toutes les grandes entreprises comme Google, Meta, Netflix et d'innombrables autres s'appuient sur JavaScript pour créer leurs applications Web complexes. C'est également le langage de programmation le plus demandé, selon cette étude de l'année dernière, basée sur les offres d'emploi sur les principales plateformes telles que LinkedIn, Indeed Cluster et d'autres Et vous remarquerez peut-être qu'il est écrit JavaScript TypeScript, qui n'est qu'un sur-ensemble de JavaScript, qui inclut le backend frontal et inclut le backend frontal les lignes de développement FSTAC, et vous pouvez choisir votre chemin et celui que vous Mais au total, JavaScript est le langage de programmation le plus demandé à ce jour. Regardons quelques statistiques salariales. Le salaire moyen des développeurs JavaScript est supérieur à 100 000$ par an, et cela est basé sur le marché américain Si vous regardez la porte vitrée, vous pouvez voir qu'il s' agit d'une fourchette typique, et c'est le montant que gagne un développeur moyen aux États-Unis. Maintenant, si vous venez d'Europe, agit du salaire moyen des développeurs JavaScript en Europe, qui est encore une fois supérieur à 100 000 par an. Vous pouvez également consulter le Web gratuitement, qui concerne principalement les emplois de développeur à distance. Ici, comme vous pouvez le constater, le salaire de base commence à 60 K et le maximum peut être de 240 k par an. Maintenant, évidemment, ce chiffre peut être beaucoup plus élevé si vous travaillez pour des entreprises de fang. Et cette gamme de portes de classe est destinée aux développeurs américains. Mais vous pouvez définir votre zone ici et voir combien s'élève ce chiffre pour votre zone spécifique. Mais votre localisation n'a pas vraiment d'importance de nos jours, car la plupart des emplois de développeur sont à distance, surtout après la COVID, les entreprises ne se soucient pas vraiment de votre localisation et la plupart des rôles de développeur sont supprimés. Mais vous pouvez quand même vérifier cela pour votre région et voir combien coûte ce chiffre dans votre cas. Maintenant, si vous êtes convaincu de la raison pour laquelle vous devriez apprendre le Javascript et que vous êtes sûr de vouloir commencer, voyons pourquoi Javascript a été créé en premier lieu. Pour comprendre cela, imaginons comment fonctionnaient les sites Web avant qu'ils n'existent. Lorsque vous consultiez un site Web sur votre navigateur, vous envoyiez généralement une demande au serveur, qui vous renvoyait les fichiers HTML et CSS pour créer la mise en page visuelle. Vous pouvez penser à ces pages esthétiques sans aucune interactivité au-delà des liens de base Ensuite, si vous avez cliqué sur un bouton, disons, rempli un formulaire ou si vous souhaitez voir un contenu mis à jour, cette page entière devra être rechargée qui entraînera une interface utilisateur lente et maladroite Cela signifie que vous devrez effectuer un autre cycle de réponse aux demandes pour récupérer la page Web mise à jour Cette communication constante avec le serveur était un goulot d'étranglement C'est pourquoi JavaScript a été introduit pour rendre le Web plus dynamique et interactif. Au lieu d'avoir besoin d'un aller-retour vers le serveur pour chaque action, nous pouvons utiliser JavaScript, qui nous permet de mettre à jour le contenu de la page Web en cours directement dans le navigateur. Cela nous ouvre de nouvelles fonctionnalités, telles que des applications d'une seule page ou des animations fluides, la validation instantanée des entrées de formulaires ou des éléments tels que des curseurs d'image, des cartes interactives et des mises à jour en temps réel sans avoir à actualiser la page complète comme nous le faisions auparavant 3. JavaScript en action: Jetez un coup d'œil au fonctionnement de Javascript dans le navigateur. Vous pouvez ouvrir n'importe quelle page Web dans votre navigateur, qu'il s'agisse de Google Chrome, Safari, Microsoft Edge ou autre. Ici, vous pouvez cliquer avec le bouton droit de la souris et choisir Inspecter pour ouvrir les outils de développement. L'alternative est que vous pouvez utiliser le raccourci F 12 pour ouvrir à nouveau les outils de développement. Maintenant, selon votre configuration, cela peut se trouver sur le côté droit de votre navigateur, sur le côté gauche ou en bas, ou il peut s'agir d'une fenêtre entière séparée. Comme vous pouvez le voir en haut, nous avons un tas d' onglets que nous aborderons tout au long de ce cours. Le premier onglet qui s' ouvrira ici est l'onglet des éléments. Ici, vous pouvez voir votre fichier HTML ainsi que vos styles CSS. Mais pour l'instant, nous nous intéressons l'onglet console, alors allons-y. Cet onglet de console sera principalement utilisé pour accéder à vos journaux JavaScript. Supposons que vous ayez un site Web ou une application Web qui s' exécute dans le navigateur. Vous pouvez voir ici vos messages d'erreur provenant du Javascript ou des journaux que vous avez enregistrés. Supposons que vous suivez certaines variables, etc. Vous pouvez voir tout cela dans cet onglet. Mais vous pouvez également écrire du JavaScript directement dans cet onglet, et c'est ce que nous allons faire maintenant. Par exemple, nous pouvons enregistrer un message dans cette console en tapant console point log, et nous devons l'ouvrir avec les parenthèses ouvrantes Et ici, nous devons écrire le message que nous voulons imprimer. Disons bonjour Javascript. Et nous devons fermer les guillemets doubles, et nous devons également fermer les parenthèses Cela enregistrera ce message dans la console, et nous pouvons également marquer la fin de cette ligne de code en utilisant ce point-virgule et en appuyant sur Entrée. Et vous pouvez voir notre message s'imprimer dans la console ici. Et si vous ne comprenez pas la syntaxe pour le moment, c'est très bien. Nous aborderons cela tout au long de ce cours. C'est juste pour vous montrer comment fonctionne JavaScript dans le navigateur. Nous pouvons également créer une petite fenêtre contextuelle dans cette page Web en utilisant la fonction d'alerte de JavaScript, et nous devons à nouveau ouvrir la parenthèse ouvrante et transmettre le message Vous pouvez voir que cela nous aide également ici à faire passer le message, nous l'ouvrons à nouveau avec des guillemets doubles, et ici nous pouvons écrire notre message d'alerte, disons un message d'alerte. Comme pour la commande ci-dessus, nous fermons cette commande, nous fermons les parenthèses nous marquons la fin de cette ligne de code et nous appuyons sur Entrée Maintenant, vous pouvez voir ce petit message d'alerte et nous avons le message dans le corps du message. Nous pouvons cliquer sur ce bouton pour fermer l'alerte Vous pouvez également effectuer des opérations arithmétiques simples ici. Par exemple, nous pouvons faire cinq plus trois et nous obtiendrons le résultat ici, qui est huit. Vous pouvez également enregistrer l'un de ces nombres dans une variable. Nous pouvons déclarer une variable en utilisant le clavier principal, puis nous devons définir le nom de cette variable. Supposons que X soit égal à trois et que vous entriez. Nous pouvons maintenant accéder à ce nombre qui est stocké dans X en tapant X et en appuyant sur Entrée, et vous pouvez voir que nous en avons trois stockés dans cette variable X. Cela signifie que nous pouvons également effectuer des opérations avec ce X. Nous pouvons faire X plus cinq, et ce sera le même résultat que huit car nous en avons trois stockés à l'intérieur de ce X, donc cela se convertit en trois plus cinq, soit huit. Et lorsque ce journal de console devient désordonné, vous pouvez toujours l'effacer en cliquant sur ce bouton, et cela effacera la console pour vous Stockez également d'autres variables, nous pouvons stocker le nom d' une personne ici et disons qu'il s'agit de John. Nous pouvons maintenant utiliser cette variable dans un message de journal de console. Supposons que nous voulions enregistrer des points sur console. Disons que nous voulons dire bonjour et le nom de cette personne. Nous pouvons dire bonjour et fermer ces guillemets, puis ajouter le nom de la variable qui y est stockée et Enter. Et cela imprimera Hello John dans notre console. Ce n'était qu'un bref aperçu du fonctionnement de Javascript. Évidemment, nous n'utilisons pas cette console pour écrire notre code. Nous le faisons dans un environnement de développement. Ce toucher de console est principalement utilisé pour vérifier les messages d'erreur dans votre code ou suivre les variables, etc. Mais nous avons besoin d'un environnement de développement approprié pour que vous puissiez commencer à écrire du code en JavaScript, et c'est ce que nous allons faire ensuite. 4. Préparer votre environnement de développement: Cette console de navigateur n'est qu'un terrain de jeu pour nous permettre de voir comment fonctionne JavaScript. Mais évidemment, ce n'est pas là véritables applications JavaScript sont développées. Pour cela, nous devons configurer votre environnement de développement. Et votre première étape consiste à télécharger et à installer un éditeur de code. Je recommande le code Visual Studio. Vous pouvez vous rendre sur code.visualstudio.com et télécharger Visual Studio Une fois le téléchargement terminé, suivez les instructions à l'écran et installez-le sur votre machine Une fois le code VS installé, installons deux extensions dont nous aurons besoin tout au long de ce cours. Vous pouvez accéder à l'onglet des extensions ici. Recherchez la première extension que nous devons installer et elle s'appelle Live Server. Si vous recherchez un serveur live, vous verrez que le premier résultat est l'extension que nous devons installer. Cela nous permettra de lancer un serveur de développement local directement à partir du code VS, et toutes les modifications que vous apporterez à votre code seront automatiquement reflétées dans le navigateur sans actualisation manuelle La deuxième extension que nous devons installer s'appelle pre tier. Si vous recherchez le plus petit, ce sera à nouveau le premier résultat dans les extensions Installez également cette extension, formatera automatiquement votre code pour le rendre cohérent et facile à lire. Enfin, si vous souhaitez avoir exactement la même configuration du code VS que moi, c'est-à-dire les extensions, les thèmes et les couleurs, je vais laisser une vidéo sous cette leçon où je vous montre exactement comment le configurer et comment installer les extensions et tout ce que j' ai dans mon code VS. Fermons maintenant cet onglet d'extensions et passons à l'explorateur. Créons un dossier de projet sur notre bureau, et appelons simplement ce premier projet. Maintenant, glissez et déposez ce projet dans le code VS, et cela ouvrira ce dossier de projet ici. Dans le code VS sur le panneau de gauche, créons un fichier HTML simple. Appelons-le index HML. Dans ce fichier, générons un modèle HTML de base en tapant une marque d'explication et en appuyant sur Entrée, ce qui générera un squelette HTML de base pour nous. Ici, dans la balise body de votre fichier HTML, ajoutons du code JavaScript. Nous devons d'abord placer notre code JavaScript dans une balise de script, qui enveloppe le code JavaScript à l'intérieur de celui-ci Ici, nous pouvons essentiellement écrire exactement le même code que celui que vous avez vu dans la console de notre navigateur, mais cette fois, nous pouvons l'écrire dans le code de notre projet. Cela signifie que nous pouvons utiliser le même journal de points de console ici. Vous remarquerez que lorsque vous ouvrez la parenthèse, cela ajoute automatiquement la dernière et nous devons également ajouter le message à l'intérieur de celle-ci Nous allons ouvrir un guillemet double, et encore une fois, vous pouvez voir qu'il marque également la fin de ce guillemet double. Cela simplifie le flux de travail car ici nous pouvons écrire n'importe quel message que nous voulons. Nous pouvons écrire le même message que celui que nous avions dans la console de notre navigateur. Dans ce cas, nous demandons au navigateur d'afficher ce message dans la console du développeur. Nous pouvons maintenant marquer la fin de cette instruction Javascript en ajoutant à nouveau cette demi-colonne. Mais techniquement, elles sont facultatives dans la plupart des cas, et même si vous oubliez d' ajouter une demi-colonne comme celle-ci, elle sera automatiquement ajoutée par la plus jolie extension que nous avons installée Si vous ne l'avez pas déjà configuré, laissez-moi vous montrer comment procéder. Vous pouvez cliquer sur Command Shift P, et je crois que c'est Control Shift P sous Windows. Recherchez ici les paramètres et choisissez cette option ici. Dans les paramètres, recherchez à nouveau les paramètres, puis cliquez sur Modifier les paramètres point JCO Ici, vous trouverez les configurations de votre code VS, et ici n'importe où vous pouvez passer cette ligne et appuyer sur Safe. Cela permet de configurer votre format par défaut pour qu' il soit l' extension la plus jolie que nous avons installée Vous pouvez le voir, vous pouvez également le configurer pour qu'il s'applique spécifiquement au TypeScript, au code JavaScript, au JSON ou à tout ce que vous voulez Vous pouvez spécifier des scénarios spécifiques dans lesquels vous souhaitez formater avec PreTeero si vous collez cette ligne globalement, cela signifie qu' elle utilisera toujours Preeer dans les fichiers HTML, dans les fichiers CSS et n'importe où dans Si vous cliquez sur Enregistrer ici et que vous revenez à votre fichier HTML à points d'index, il suffit de supprimer cette demi-colonne et de cliquer sur Enregistrer. Je peux voir que cela a été automatiquement ajouté par Prettier et qu'il a également correctement formaté notre code Voyons maintenant si ce code est exécuté. Et pour cela, nous utiliserons l'autre extension que nous avons installée. Cliquez donc avec le bouton droit sur ce fichier HTML à points d' index, et vous verrez ici ouvrir avec le serveur live, et cela est dû à l'extension de serveur live que nous avons installée. Et si vous cliquez dessus, vous serez redirigé vers cette page Web. Et évidemment, c'est vide pour le moment car nous n'avons ajouté aucun code HTML à l'intérieur du corps. Mais vous pouvez cliquer avec le bouton droit de la souris et inspecter les outils de développement ici. Et si vous allez dans l'onglet Console, vous pouvez voir notre message, hello JS, ici à l'intérieur de la console. Vous pouvez également utiliser les mêmes variables que celles que vous avez vues dans la console du navigateur. Par exemple, je peux déclarer une variable ici avec un message let and say égal à deux. Et ici, vous pouvez stocker n'importe quoi dans cette variable. Disons que c'est notre variable de message, et en dessous, je peux utiliser cette variable de message. Par exemple, je peux enregistrer le journal de la console , puis le message que nous avons stocké dans cette variable. Maintenant, je vais également ignorer les demi-colonnes ici. Et si je l'enregistre, il sera automatiquement ajouté. Et vous pouvez voir que Prettier change également les guillemets doubles en guillemets simples, et cela n'a aucun effet Vous pouvez donc utiliser les guillemets simples ou les guillemets doubles, et vous pouvez également le configurer dans les paramètres point JSO ici si vous recherchez un guillemet, et ici vous pouvez voir plus joli ce paramètre de code unique, et il est défini sur true Maintenant, si nous définissons ces deux valeurs sur false et que nous les enregistrons, si vous enregistrez à nouveau ce fichier, vous pouvez voir qu'il utilise maintenant des guillemets doubles, et ce n'est qu'une préférence. Vous pouvez définir ces deux modes simples ou doubles. Dans mon cas, je l'ai juste défini sur true, et il utilisera les guillemets simples. Ainsi, si vous revenez simplement au navigateur sans l' actualiser, vous pouvez voir la variable de votre message ici, qui est l'autre journal que nous y avons mis. Cela est dû à l'extension de serveur live que nous venons d'installer. Vous pouvez également utiliser des commandes en JavaScript. Par exemple, si je veux ajouter un commentaire ici disant qu' il s'agit d'une commande Javascript. Je l'enregistre et je reviens à la console, vous ne le verrez pas dans la console et le navigateur l'ignorera simplement. Les commentaires en JavaScript commencent donc par deux barres obliques, ce qui indique qu'il s'agit d'une commande et qu'elle doit être ignorée par le navigateur Ce ne sont que des nœuds lisibles par l'homme que nous pouvons mettre en place afin que les autres développeurs puissent comprendre notre code. Discutons d'une dernière chose dans cette leçon. Balise de script que nous avons ajoutée dans notre corps, c'est juste un moyen rapide pour nous d'écrire du JavaScript. Mais dans les applications réelles, nous n'écrivons pas de code JavaScript à l'intérieur des balises de script. Comme vous pouvez l'imaginer, notre fichier HTML peut devenir beaucoup plus volumineux que cela, et si nous ajoutons également le Javascript ici, cela peut devenir très compliqué et il nous sera très difficile de lire le code et de le comprendre C'est ce qu'on appelle la séparation des préoccupations où nous séparons le code Javascript à l'intérieur des fichiers Javascript. Nous séparons le code HTML à l'intérieur des fichiers HTML, et nous séparons également notre code CSS à l'intérieur des fichiers CSS Tod au lieu de les écrire dans le code HTML Pour que notre code reste organisé, nous pouvons copier ce code JavaScript à partir d'ici et créer un fichier ici appelé script point JS, et nous pouvons le coller dans ce fichier sans avoir à le formater manuellement. Vous pouvez simplement cliquer sur Commande S ou Contrôles pour l'enregistrer. Ensuite, nous devons accéder au fichier HTML à points d'index. Et ici, nous pouvons nous débarrasser de ce code Il suffit de lier ce fichier JavaScript ici et nous le lierons par l' attribut source de la balise de script. Nous passons donc un attribut source et nous le lierons au fichier script JS que nous avons créé et enregistré. Vous pouvez vérifier que cela fonctionne en accédant à votre navigateur et vous verrez les deux messages que nous avons dans notre code. Comme vous pouvez le voir, nous l' avons placé le corps de ce fichier HTML, et c'est l'endroit le plus courant pour placer notre balise de script. Si vous ajoutez du contenu HTML ici comme une balise H one, des DIV, etc., vous devez généralement placer cette balise de script à la fin de la balise body Cela garantit que tout votre contenu HTML est chargé avant l'exécution du code JavaScript, ce qui permet d' éviter que Javascript tente d' interagir avec des éléments qui ne figurent pas encore sur la page. C'est l'endroit le plus courant pour localiser votre fichier de script. Maintenant, évidemment, si vous avez des besoins spécifiques où une partie de votre code Javascript doit se produire avant votre code HTML, vous pouvez le modifier et peut-être diviser vos fichiers en deux fichiers Javascript ou plus, et certains d'entre eux peuvent s'exécuter avant votre contenu et d' autres peuvent s'exécuter après votre contenu, mais c'est juste l'endroit le plus courant où des besoins spécifiques où une partie de votre code Javascript doit se produire avant votre code HTML, vous pouvez le modifier et peut-être diviser vos fichiers en deux fichiers Javascript ou plus, et certains d'entre eux peuvent s'exécuter avant votre contenu et d' autres peuvent s'exécuter après votre contenu, mais c'est juste l'endroit le plus courant où vous aurait besoin de votre Javascript. Avec cela, vous venez de configurer votre environnement de développement et écrire vos toutes premières lignes de code JavaScript. Mais dans la leçon suivante, nous allons comprendre comment fonctionne JavaScript et comment notre code est exécuté dans le navigateur. 5. Comment JavaScript est-il exécuté ?: Regardez de plus près comment le code JavaScript est exécuté. JavaScript a été initialement conçu pour fonctionner dans les navigateurs Web et chaque navigateur possède un moteur JavaScript. Ce moteur est intégré à la plupart des principaux navigateurs. Il s'agit de moteurs tels que V eight sur Chrome ou Javascript Core sur Safari, Spider Monkey sur Mozilla ou Chakra sur Microsoft Edge, et de nombreux autres moteurs Javascript qui s'exécutent dans les navigateurs Web. Il s'agit essentiellement d'un logiciel qui se trouve dans votre navigateur Web et qui est chargé d'exécuter notre code JavaScript. Découvrez comment cela fonctionne réellement. abord, vous écrivez votre code JavaScript et une fois le fichier JavaScript reçu par le navigateur, le moteur commence à compiler votre code JavaScript. Mais avant de le compiler, il analyse d'abord votre code JavaScript. Cela signifie qu'il convertit le code source en jetons, et les jetons ne sont que de petites unités, et les jetons ne sont que de petites unités comme des mots clés tels que let const ou function, des mots clés et opérateurs, des littéraux et des identifiants Ce moteur JavaScript analyse ensuite ces jetons pour créer l'arbre syntaxique abstrait L'étape suivante est l'étape de compilation. moteurs Javascript modernes tels que V Eight utilisent une technique appelée compilation temporelle. Cela signifie qu'il comprime notre code Javascript dans un code machine afin qu'il puisse être exécuté Ensuite, nous passons à l'étape d'exécution, et c'est à ce moment-là que nous verrons les effets de notre code dans le navigateur. Au cours de cette étape, le moteur commence à interpréter notre code JavaScript, qui est ensuite exécuté par la machine virtuelle Javascript. Et une fois qu'il sera exécuté, nous verrons l'effet sur notre navigateur Web, qui est comme Google Chrome, Safari, Microsoft Edge et tous les autres principaux navigateurs. Et une fois exécuté, il passe également par l'étape de collecte des ordures. Nous allons maintenant apprendre ce que cela signifie réellement dans les sections suivantes de ce cours. Voyons maintenant ce que fait le moteur Javascript dans cette étape. Il analyse et nettoie régulièrement variables inutilisées et la mémoire inaccessible Dans la dernière étape, nous avons la boucle d'événements. C'est encore une fois un sujet un peu avancé, nous en parlerons dans les sections suivantes. Mais en gros, étant donné que Javascript est à thread unique, ce qui signifie qu'il ne peut pas effectuer des opérations fastidieuses de manière synchrone, nous avons cette boucle d'événements vérifie en permanence le Costac et la file de messages pour qui vérifie en permanence le Costac et la file de messages pour détecter les opérations asynchrones terminées et elle avertit la pile afin que notre code asynchrone puisse Voyons comment fonctionne JavaScript dans le navigateur en mode développement. Le mode développement consiste essentiellement à le développer sur votre ordinateur et à ne le déployer nulle part Vous essayez donc ce code sur votre machine. C'est pourquoi nous appelons ce mode de développement, qui signifie que nous l'exécutons sur notre propre ordinateur et nos fichiers ne sont pas encore optimisés pour le serveur de production. abord, vous écrivez votre code tel que HTML, CSS et JavaScript dans votre éditeur de code, qui peut être du code VS ou autre. Vous lancez l'extension Live Server ou vous actualisez simplement manuellement chaque fois que vous apportez des modifications. Et cela démarre le serveur local sur votre ordinateur. Ensuite, lorsque vous ouvrez le fichier HTML dans le navigateur, il récupère les fichiers CSS et JavaScript associés sur votre serveur live local Et une fois que votre navigateur reçoit le fichier JavaScript, moteur JavaScript entre en jeu et lit votre code JavaScript, le comprend, puis l'exécute, ce qui donne vie à votre page Web C'est donc ainsi que nous travaillons généralement en mode développement sur notre ordinateur. Voyons maintenant comment cela fonctionne en production. Votre application est prête à être mise en ligne, vous allez optimiser les fichiers HTML, CSS et JavaScript et vous allez la déployer sur un serveur Web. Il s'agit simplement d'un serveur distant qui contiendra vos fichiers JavaScript HMLCSS et les servira aux utilisateurs Supposons qu'un utilisateur entre et ouvre votre page Web. Lorsqu'ils visitent votre site Web, leur navigateur envoie une demande à votre serveur et celui-ci reçoit le fichier HTML contenant le contenu, puis il récupère les fichiers CSS associés ainsi que le fichier JavaScript Encore une fois, tout comme en mode développement, lorsque le navigateur reçoit le fichier JavaScript, c'est ici que le moteur JavaScript entre en jeu. Il commence à exécuter votre code et crée une expérience interactive pour l'utilisateur. Maintenant que nous savons comment JavaScript est exécuté dans le navigateur, voyons ce que vous pouvez créer avec JavaScript. Comme nous l'avons vu, JavaScript a été initialement conçu pour les navigateurs uniquement, ce qui signifie qu'il était uniquement destiné à s'exécuter à l'intérieur du navigateur. Mais en 2009, Ryan Dall a pris ce moteur JavaScript et l' a placé dans un programme C plus plus Ce faisant, il a introduit node JS, qui est un environnement d'exécution différent de JavaScript. Il a donc pris le moteur V Eight de Chrome et l' a intégré dans un programme C plus, ce qui nous permet maintenant d'exécuter JavaScript n'importe où en dehors des navigateurs. Nous pouvons désormais exécuter JavaScript sur des serveurs ou sur des ordinateurs de bureau ou dans tout autre environnement en dehors du navigateur. C'est ce qui a rendu JavaScript beaucoup plus populaire dans d'autres domaines de développement, autres que les navigateurs. De toute évidence, vous pouvez créer applications Web frontales avec JavaScript, et c'est pour cela qu' elles ont été initialement conçues. Mais vous pouvez également créer des applications côté serveur ou des API ou des applications en temps réel telles que des applications chat ou des outils de ligne de commande avec elle. Vous pouvez même créer des applications mobiles l'aide de frameworks tels que React Native, qui vous permet d'utiliser JavaScript pour créer des applications mobiles multiplateformes, puis les distribuer sur les téléphones IOS et Android. Vous pouvez également créer des ordinateurs de bureau avec elle. Vous pouvez utiliser des outils tels qu'Electron, mais vous utiliserez toujours le HTML, le CSS et le JavaScript que vous connaissez dans le domaine du développement Web et que vous pouvez utiliser pour créer des ordinateurs de bureau. Vous pouvez utiliser des frameworks tels que Phaser, qui offrent des fonctionnalités avancées, créer jeux basés sur un navigateur et les exécuter dans les navigateurs Il y a beaucoup de choses que vous pouvez faire avec JavaScript Une fois que vous connaissez les bases de JavaScript, vous pouvez facilement passer à la création d'applications mobiles, au développement de Bacon, à des jeux ou à tout ce que vous pouvez imaginer. Dans ce cours, nous nous concentrerons principalement sur le JavaScript côté client, c'est-à-dire le JavaScript qui s'exécute dans votre navigateur Web. En effet, les environnements d' exécution tels que No JS ou frameworks tels que React Native sont des sujets importants en eux-mêmes, et ils méritent des cours dédiés séparément. Dans ce cours, nous nous concentrerons sur la maîtrise des principes fondamentaux du Javascript, qui est la partie la plus importante, puis vous pourrez facilement passer à d'autres domaines si vous le souhaitez 6. JavaScript vs Java vs ECMAScript: Il y a souvent une certaine confusion autour de termes tels que JavaScript, autour de termes tels que JavaScript, ECMAScript et Java Clarifions-le avant de passer à autre chose. JavaScript est le langage de programmation lui-même. C'est ce que vous allez écrire dans votre éditeur de code et il fournit la syntaxe, les règles et les outils que vous utilisez pour créer vos programmes. D'un autre côté, Java est un langage de programmation complètement distinct, et même si les noms peuvent sembler similaires, Java et Javascript ont très peu de points communs en termes de syntaxe. Java est un langage à usage général. Il est souvent utilisé pour créer des applications à grande échelle, tandis que JavaScript est principalement utilisé pour le développement Web et les technologies connexes. Ensuite, nous avons ECMAScript, qui est le standard officiel qui définit le langage Javascript Vous pouvez le considérer comme le livre de règles que toutes les implémentations de Javascript essaient Il définit les fonctionnalités de base du langage, telles que ses types de données syntaxiques objets intégrés, etc. script DCMA a connu une grande évolution depuis sa création Tout d'abord, il a été créé en 1997. Il s'agissait de la version ES, qui ne contenait que les constructions linguistiques de base suite, il a reçu de nombreuses mises à jour, comme en 1998 ou 1999, puis en 2009 et 2011. Mais la mise à jour la plus importante a eu lieu en 2015, lorsque ES six a été introduit ES six a introduit de nombreuses nouvelles fonctionnalités telles que les fonctions de flèche, les classes, les modèles tera, déstructuration et bien d'autres choses encore Après cela, il a de nouveau reçu de nombreuses mises à jour chaque année, et la dernière date de 2023, c'est-à-dire l'ES. Vous voyez ici que nous avons reçu de nouvelles fonctionnalités, telles que nouvelles méthodes matricielles et d'autres fonctionnalités mineures. J'ai donc eu de nombreuses mises à jour depuis 1997 depuis sa création. Mais cela ne signifie pas que vous devez connaître toutes les mises à jour d'ECMAScript publiées. Dans ce cours, nous allons apprendre toutes les dernières syntaxes. Ainsi, tout ce que vous apprenez ici est la dernière syntaxe proposée par ECMAScript, et vous n'avez pas besoin de parcourir les documentations pour rechercher les pour rechercher Mais si vous êtes intéressé par l'histoire et l' évolution d'EQMAScript, je vais créer un lien vers une ressource utile ci-dessous afin que vous puissiez les consulter. Récapitulons cette section et voyons ce que nous avons appris jusqu'à présent Dans ce premier module, qui est l'introduction à JavaScript, nous avons appris ce qu'est le JavaScript et pourquoi il est si largement utilisé dans le développement Web. Nous avons appris comment JavaScript est exécuté dans le navigateur à l'aide du moteur JavaScript et comment moteur JavaScript fonctionne sous le capot. Nous avons également examiné l'histoire et l' évolution d'ECMAScript, et nous avons abordé la confusion courante entre JavaScript, EQMAScript Configurez également votre environnement de développement avec le code VS, les paramètres et les extensions afin de pouvoir commencer à créer des applications JavaScript. Et nous avons découvert la syntaxe de base de JavaScript en écrivant du code dans la console du navigateur et également dans le code VS de votre premier projet. Nous avons appris comment fonctionne JavaScript dans le navigateur et au-delà à l' aide du runtime Nod JS et d' autres frameworks tels que React Native, etc. C'est donc tout pour ce premier module. Dans la leçon suivante, nous allons commencer à en apprendre davantage sur les blocs de construction JavaScript, qui nous aideront à écrire du code JavaScript et à créer des applications. 7. Créer le projet: Bienvenue dans la deuxième section de ce cours où nous allons découvrir les éléments de base de Javascript. Dans cette deuxième section, nous aborderons la syntaxe et les fonctionnalités fondamentales de Javascript, qui nous aideront à créer des applications Web interactives. Dans cette première partie de ce module, nous allons découvrir les variables et les constantes. Vous allez apprendre à stocker des données dans des variables et à travailler avec différents types de données. Ensuite, nous découvrirons les types de données primitifs en JavaScript , à savoir les nombres, les chaînes, les lingots, etc. Nous utiliserons des opérateurs dans notre code, qui sont des opérateurs de comparaison arithmétique, logiques et des opérateurs d'affectation pour effectuer des calculs et des comparaisons dans notre code Nous apprendrons ensuite comment utiliser des conditions dans notre code pour contrôler le flux de nos applications avec instructions EL ou des instructions switch, etc. Enfin, dans la première partie de ce module, nous en apprendrons davantage sur les fonctions et nous les utiliserons pour créer des blocs de code réutilisables. travaillant avec des fonctions, nous allons apprendre comment déclarer une fonction, comment utiliser des expressions de fonction, comment lui transmettre des arguments et comment utiliser les valeurs renvoyées par les fonctions. Et nous apprendrons tout cela de manière pratique, pas simplement en m'entendant en parler, mais en créant ce calculateur en ligne dans notre navigateur. Il s'agira d'une calculatrice simple où, dans cette première entrée, vous pourrez saisir un nombre tel que deux, puis dans le second sélecteur, vous pourrez choisir l'opération que vous souhaitez effectuer Disons plus, puis le deuxième chiffre, qui peut être gratuit. Et si vous cliquez sur Calculer, cela calculera et vous montrera le résultat dans ce paragraphe. Et vous pouvez également changer d'opérateur à partir d'ici. Supposons que vous vouliez faire une division et que vous changiez ce premier chiffre en six et que vous puissiez appuyer à nouveau sur Calculer, et cela vous montrera le résultat dans ce paragraphe de résultat. dessous de cette vidéo, vous trouverez ce fichier zip joint à celle-ci, qui est le code standard lequel nous allons commencer Vous devrez le télécharger et décompresser sur votre bureau ou quelque part dans votre système, puis le glisser-déposer dans votre code Visual Studio Il s'agit d'un projet très simple avec un seul fichier HTML et un seul fichier CSS. Ce fichier CSS contient uniquement les styles de cette page Web et vous pouvez ignorer la structure de celle-ci Ce qui nous intéresse, c'est le point d'index HTML, qui contient les entrées et sélecteurs de notre calculatrice Cliquez dessus avec le bouton droit de la souris et choisissez Open Wet Live Server, vous verrez notre calculateur sur votre écran. Mais pour l'instant, il n'est pas fonctionnel. Supposons que si je veux faire deux plus deux et calculer, vous verrez que nous n'avons aucune interactivité sur cette page Web, et c'est pour cela que nous aurons besoin de JavaScript pour ajouter interactivité et la logique de cette en revenir à notre code HTML à points d' index, vous pouvez voir la première entrée ici, qui est le premier chiffre que nous y avons inclus. Ensuite, nous avons ce sélecteur qui choisit l'opérateur comme plus moins multiplication ou division Dans la deuxième entrée, nous incluons le deuxième chiffre de notre calculatrice, puis nous avons ce bouton, qui est le bouton de calcul que vous avez vu sur notre écran. Et une fois que l'utilisateur a cliqué sur ce bouton de calcul, nous voulons effectuer le calcul, puis inclure le résultat dans cette balise de paragraphe ici. À partir de la leçon suivante, nous allons commencer à construire cette logique de calculatrice étape par étape, et nous allons commencer par la leçon suivante où nous allons également en apprendre davantage sur les variables JavaScript. 8. Variables: Rendez cette calculatrice interactive, nous devons d'abord commencer par stocker certaines données comme les données contenues dans ces numéros ou l'opérateur, etc. C'est là que nous aurons besoin de variables pour stocker toutes ces données. Revenons à notre projet et créons notre premier fichier JavaScript dans ce projet. Appelons-le script point js. Pour déclarer une variable en JavaScript, nous utilisons le clavier principal. En fait, nous avons déjà vu des variables JavaScript dans le module précédent de ce cours, mais nous ne les avons pas explorées en détail. Vous pouvez utiliser ce mot clé let , puis attribuer un nom à notre variable. Nommons notre variable en tant que nombre, et pour l'instant, enregistrons simplement cette variable sur console et voyons ce qu'elle contient. Si nous enregistrons ce fichier et revenons à notre calculatrice, nous devons ouvrir les outils de développement du navigateur pour le voir dans la console. Pour ce faire, cliquez avec le bouton droit de la souris et sélectionnez Inspecter. À partir de là, passons à l'onglet Console. Comme vous pouvez le constater, il est vide pour le moment et nous ne voyons pas le journal de notre console. C'est parce que nous n'avons pas lié ce script point JS dans notre fichier HTML d'index Comme vous l'avez vu dans la leçon précédente, nous devons lier cela à la fin de notre body tag. Juste après le dernier Tf, nous devons ajouter une balise de script ici. Ici, avec l'attribut source, nous devons créer un lien vers notre fichier JavaScript, savoir le fichier script point JS. Si nous sauvegardons ce fichier maintenant, si vous allez dans le navigateur, vous pouvez voir la valeur de cette variable et elle n' est pas définie pour le moment Cela signifie que si nous déclarons simplement la variable ainsi et que nous ne lui attribuons rien, elle ne sera pas définie par défaut Mais nous pouvons également attribuer une valeur à ces variables. Disons que nous déclarons une autre variable et que nous l'appelons X. Et pour lui attribuer une valeur, nous ajoutons le signe égal sur le côté droit de cette variable. Et ici, nous pouvons attribuer une valeur à cette variable, qui peut être dix, par exemple. Et maintenant, nous pouvons enregistrer la variable X sous le numéro et l'enregistrer. Et si nous revenons en arrière, vous pouvez voir que notre première variable contient la valeur non définie et que la deuxième variable contient la valeur dix Ces valeurs de variables ne sont pas fixes. Nous pourrons toujours les modifier ultérieurement. Par exemple, je peux maintenant attribuer à X la valeur cinq et c'est sûr. Si nous regardons dans notre navigateur, vous pouvez voir que la dernière valeur de X est cinq, non dix, c'est donc ce que nous avons verrouillé dans cette console. Ces connaissances sont déjà suffisantes pour que nous commencions à réfléchir aux variables dont nous aurons besoin dans notre calculateur. Revenons à notre calculateur et réfléchissons ici aux variables dont nous aurons besoin dans notre code. Si vous le souhaitez, vous pouvez maintenant poser cette vidéo et réfléchir aux variables et à leurs noms que nous utiliserons dans notre calculateur. Si ce n'est pas le cas, réfléchissons-y ensemble. Comme vous pouvez le voir, nous avons ici un premier chiffre, qui sera attribué à une valeur, disons deux, puis nous pouvons choisir l' opérateur dans ce sélecteur, qui peut être plus, moins , multiplier, etc. Ensuite, nous avons le deuxième numéro qui sera attribué dans la deuxième entrée, et nous aurons également besoin de la quatrième valeur où nous stockerons le résultat de ce calcul. Disons que c'est deux plus trois, nous devrons stocker ce résultat quelque part, et pour cela, nous aurons besoin d'une autre variable, et elle sera également affichée dans ce paragraphe de résultats ici Pour en revenir à notre code, nous pouvons maintenant déclarer ces variables. Le premier sera le premier chiffre inclus dans la première entrée. Appelons ça le numéro un. Et de la même manière, nous aurons le chiffre deux, qui est la deuxième valeur de la deuxième entrée. Ensuite, nous devrons d'une manière ou d'une autre extraire l'opérateur de notre écran, et cela sera appelé opérateur. Et le dernier contiendra le résultat de ce calcul, qui peut être comme le numéro un plus le numéro deux ou quoi que ce soit d'autre. Et pour cela, déclarons une autre variable et appelons-la résultat. Peut également utiliser une console qui enregistre ces variables pour voir si elles sont définies ou non. Nous pouvons enregistrer le numéro un, le numéro deux, l'opérateur, ainsi que le résultat et enregistrer ce fichier. Et comme vous pouvez le constater, pour l'instant, nous avons quatre valeurs non définies, elles ne contiennent donc aucune donnée pour l'instant, et nous les ajouterons bientôt dans le code Mais avant cela, mettons en pratique ce que nous venons d'apprendre en faisant un petit exercice ici. Notre exercice consistera à échanger deux variables ensemble. Ici, je vais vous donner deux variables. Appelons la première X, et assignons à celle-ci une valeur de deux, et nous aurons la deuxième variable, qui sera Y. Et assignons une autre valeur à cette variable Y, et disons que c'est quatre Maintenant, ce que vous devez faire dans cet exercice, lorsque nous enregistrons les variables X et Y pour le moment, nous verrons deux et quatre dans la console, ce qui signifie que X est égal à deux et Y égal à quatre. Mais au résultat final, nous voulons que ce soit quatre ou deux, qui signifie que X est égal à quatre et Y égal à deux. Et en gros, cela signifie que nous échangeons ces variables ensemble. Nous sauvegardons et examinons la console pour le moment, nous en avons deux et quatre, et c'est ce que vous devez faire dans cet exercice. Alors allez-y, essayez vous-même pendant dix à 20 minutes, puis revenez chercher la solution. Faisons cet exercice ensemble. Maintenant, votre première pensée pourrait être que vous pouvez simplement faire X égal à Y, et cela échangera les variables. Cela signifie que nous assignons X à Y et Y contient les quatre variables Donc, si nous faisons cela, cela signifie que nous aurons quatre stockés à l'intérieur du X, mais que les quatre mêmes seront également stockés à l'intérieur de la variable Y. Si vous sauvegardez et regardez, vous pouvez voir que nous avons deux quatre dans la console, et vous pourriez penser que nous pouvons faire Y égal à X, et cela stockera également les deux dans la variable Y. En fait, nous pouvons le faire à ce stade car nous avons déjà perdu la valeur stockée dans X. Maintenant, nous en avons également quatre stockées dans X, donc le résultat Y est égal à quatre, et ce sera le même résultat dans notre console. C'est pourquoi pour résoudre cet exercice, nous avons besoin d'une variable Fd qui contiendra la valeur temporaire de X, puis nous pouvons attribuer X à Y, puis nous pouvons les échanger ensemble. Et pour cela, nous allons déclarer une troisième variable ici. Appelons cela TEMP, qui sera la valeur temporaire de X. Maintenant, avant de faire cette opération où nous assignons X à Y, nous allons faire une autre opération et nous allons stocker la valeur X dans notre variable temporaire Cela signifie que notre variable temporaire contiendra les deux à l'intérieur. Ensuite, nous pouvons attribuer X à Y. Maintenant, nous avons perdu la valeur à l'intérieur de X, mais nous la stockons toujours dans la variable temporaire, ce qui signifie que nous pouvons assigner le Y comme variable temporaire, qui en contient deux à l'intérieur Cela devrait signifier que nous en avons stocké quatre dans X et deux dans la variable Y, et nous le verrons dans la console. Si nous l' enregistrons et que nous accédons à notre console, pouvons voir que nous en avons maintenant quatre et deux stockés dans ces variables. Si vous avez réussi à résoudre ce problème, félicitations, sinon, ne vous inquiétez pas trop, car cela aura plus de sens au fil de ce cours, et cela deviendra une seconde nature pour vous à la fin de ce C'est tout pour cet exercice. Je vais clarifier cela pour le moment, passons à la leçon suivante où nous allons apprendre comment nommer ces variables et les meilleures pratiques que nous utilisons lors de la déclaration de variables. 9. Bonnes pratiques en matière de nommage de variables: Découvrez certaines des meilleures pratiques en matière dénomination des variables en JavaScript, car il est très important de choisir de bons noms de variables pour écrire du code propre et compréhensible pour les autres. Et lors de la déclaration de variables, certains noms de variables sont autorisés et également considérés comme des meilleures pratiques D'autre part, certains noms de variables ne sont pas autorisés ou ne sont pas recommandés, ce qui signifie qu'ils ne sont pas considérés comme des meilleures pratiques. Et le premier exemple est que nous pouvons déclarer des variables en utilisant deal puis en attribuant un nom à cette variable Supposons que cela puisse être un utilisateur nous pouvons également déclarer la même variable en utilisant le mot clé var. Mais en réalité, cela n'est pas considéré comme une bonne pratique. Nous utilisions VR avant ES six, qui constitue une mise à niveau majeure de JavaScript, et nous avons utilisé ce mot clé pour déclarer des variables. Cependant, la déclaration de variables avec mot clé var peut entraîner un comportement très étrange, et cela comportait également des inconvénients qui la rendaient loin d'être idéale. Et dans le Javascript moderne, nous déclarons généralement les variables avec le mot clé let, et nous essayons d'éviter d'utiliser le mot clé var. Le deuxième exemple est que, disons, nous avons une variable contenant deux mots. Disons que cela s' appelle prénom. Vous pouvez simplement écrire le prénom ensemble comme ceci, mais ce n'est pas très lisible au premier coup d'œil et nous ne comprendrons peut-être pas qu'il s'agit de deux mots ensemble. Nous pouvons les séparer, par exemple, en utilisant un trait de soulignement entre deux noms ce qui sera mieux que de les utiliser ensemble. En JavaScript, nous n'utilisons pas ces noms de soulignement, ce que l' on appelle « case serpent » Nous utilisons le nom Camel Case pour cela. meilleure façon de le définir sera de le définir comme prénom en utilisant la notation camelcase, ce qui signifie que la première lettre du deuxième mot doit commencer par la première lettre du une majuscule, ce qui le rend à la fois plus facile à lire pour nous, et c'est également une bonne pratique par rapport à une majuscule comme celle-ci Une autre règle est que vous devez choisir des noms significatifs qui décrivent clairement le but de la variable. Par exemple, si vous déclarez simplement une variable nommée A, cela ne permet pas du tout de savoir ce que cette variable A contient. Au lieu de cela, vous devez choisir un nom descriptif pour cela. Supposons que vous stockez le résultat d'un calcul dans ce A, il est préférable de le nommer comme résultat, au moins au lieu de l' appeler A. Une autre règle définie par JavaScript est que vous ne pouvez pas démarrer vos variables avec des nombres. Par exemple, si vous souhaitez déclarer le prénom d'une deuxième personne, vous ne pouvez pas le dire au prénom. Vous pouvez voir que nous obtenons également une erreur en la définissant ainsi. Mais si nous revenons à notre troisième règle, pourquoi voudriez-vous même définir une variable qui commence par un nombre qui n' est pas du tout descriptif Il est préférable de le nommer au moins par le prénom deux et d'ajouter ces deux à la fin de la variable plutôt qu' au début de cette variable. Une autre règle de JavaScript est que vous devez éviter d'utiliser des mots clés réservés à JavaScript. Par exemple, let est un mot clé réservé en JavaScript et chaque fois que le moteur JavaScript voit ce mot clé principal, il sait que la partie suivante est le nom d'une variable. Vous ne pouvez pas utiliser le même clavier principal pour définir le nom d'une variable. Comme vous pouvez le constater, nous recevons une erreur indiquant let n'est pas autorisé à être utilisé comme nom car il s'agit d'un mot clé réservé par Javascript. Supposons que vous souhaitiez déclarer deux variables en même temps. Disons le nom d' une personne et aussi son âge. Ici, devant le nom, vous pouvez attribuer une valeur à cette variable de nom et devant l'âge, vous pouvez attribuer une valeur à la variable d'âge. Mais dans le Javascript moderne, cela n'est pas considéré comme une bonne pratique. Il est préférable de les définir séparément en utilisant la demi-colonne et en les séparant ainsi les uns des autres. Nous ne pouvons donc pas utiliser les mots clés contenus dans JavaScript pour définir les noms. Et il y a une autre chose qui n'est pas autorisée, c'est d'utiliser des caractères spéciaux. Disons si nous voulons définir ce prénom. Mais au lieu du trait de soulignement, nous voulons utiliser cette touche comme ceci. Encore une fois, cela n'est pas autorisé par Javascript car vous ne pouvez utiliser lettres et les chiffres lors définition de votre variable Javascript Une autre mauvaise pratique en JavaScript consiste à définir les variables en commençant par des majuscules. Cela peut être une bonne pratique dans d'autres langages de programmation, mais en JavaScript, nous définissons généralement les variables en commençant par des minuscules comme celui-ci. Enfin, à l'exception des mots clés let et var en JavaScript, nous avons également des coûts pour déclarer des variables dans lesquelles vous pouvez stocker des valeurs constantes. Si vous voulez vraiment définir une variable qui ne changera jamais, disons une constante multiatique comme celle-ci, ne voulez pas que cette variable soit affectée à une autre valeur, comme quatre, en lui attribuant un coût, vous pouvez voir que nous obtenons une erreur sur la ligne suivante car nous ne pouvons pas redéclarer les variables déclarées avec vous pouvez voir que nous obtenons une erreur sur la ligne suivante car nous ne pouvons le déclarées Si vous avez une valeur qui ne changera jamais tout au long de votre programme, vous devez utiliser le clavier Cost au lieu de laisser une bonne règle de base qui consiste à utiliser le coût par défaut et à ne passer à l'option « let » que si vous savez que vous devez réaffecter la variable que vous avez Revoyons maintenant les variables que nous avons déclarées pour notre calculatrice Appliquons ces règles que nous venons d'apprendre. Cela peut être un autre petit exercice pour vous. Réfléchissons à laquelle de ces variables pourrait être mieux nommée en utilisant les noms descriptifs que nous venons d'apprendre et réfléchissons également de ces variables qui pourraient être déclarées comme constantes, car leurs valeurs ne seront pas modifiées par nous une fois qu'elles auront été définies initialement. Vous pouvez à nouveau publier cette vidéo , y réfléchir appliquer à nos variables , puis revenir à la solution. Essayons d'appliquer les meilleures pratiques à nos variables. Tout d'abord, réfléchissons à laquelle de ces variables pourrait être mieux nommée. Par exemple, vous pouvez voir que nous avons le chiffre deux pour la première entrée de notre calculatrice. C'est un peu descriptif, mais cela peut encore être amélioré. Par exemple, nous pouvons le renommer en premier chiffre, ce qui indiquera clairement qu'il s'agit du premier chiffre saisi dans la calculatrice, ou du moins nous pouvons utiliser le numéro un et ne pas le raccourcir comme ça, ce qui ou du moins nous pouvons utiliser le numéro un et ne pas raccourcir comme ça, ce sera mieux lisible pour nous Mais dans ce cas, je vais utiliser nom de la variable du premier numéro et selon le même principe, nous pouvons le renommer deuxième chiffre au lieu de numéro deux. Notre opérateur et notre résultat sont suffisamment descriptifs. Si vous le souhaitez, vous pouvez renommer ce résultat pour qu'il soit peut-être le résultat du calcul Mais puisque nous écrivons un programme dans le contexte d'une calculatrice, nous savons que le résultat est le résultat du calcul, nous n'avons donc pas besoin de le renommer Et c'est tout pour la première question. maintenant à la deuxième question, laquelle de ces variables peut être déclarée constante, c'est-à-dire laquelle de ces variables ne sera pas modifiée tout au long de notre programme. Prenons l'exemple du premier chiffre. Lorsque l'utilisateur nous donne le premier chiffre, disons que c'est deux, voulons-nous changer cela dans notre programme une fois qu'il nous aura donné la saisie ? Maintenant, évidemment, non, car ils sont définis par les utilisateurs et nous ne changerons pas ces chiffres. Nous allons juste faire des calculs. Cela signifie que nous pouvons déclarer ce premier nombre comme une constante plutôt que comme une variable et il en va de même pour la deuxième entrée. Une fois que nous avons obtenu le deuxième numéro d'entrée de l'utilisateur, nous ne voulons pas du tout le modifier dans notre programme, nous allons donc le définir avec. même, l'opérateur est également quelque chose qui provient de l'entrée de l'utilisateur. Nous allons donc la déclarer constante, et nous ne modifierons pas ces variables tout au long de notre programme. Maintenant, la seule chose qui va changer, c'est le résultat car nous le calculerons tout au long de ce programme. Dans un premier temps, nous allons définir cette valeur comme une valeur non définie, comme nous l'avons vu dans la console. Mais plus tard, nous effectuerons le calcul fonction de ces nombres et des opérateurs, et nous devrons modifier le résultat et stocker le résultat réel du calcul au lieu de cette variable. Cela répond à la deuxième question. Maintenant, si vous survolez l'une de ces variables, vous pouvez voir que nous recevons une erreur, que les déclarations de coûts doivent être initialisées Et contrairement à let où vous pouvez simplement déclarer une variable sans lui attribuer de valeur, les variables de coût doivent d'abord être initialisées Et comme nous n'avons pas encore les entrées de l'utilisateur, stockons simplement quelques valeurs initiales, comme deux pour le premier chiffre et quatre pour le second. Attribuons la valeur initiale à l'opérateur. Définissons-le comme une addition et avec cela, nous nous débarrasserons de ces erreurs. Mais évidemment, nous voulons obtenir ces numéros de la part de l'utilisateur et ne pas coder en dur comme ça dans notre programme. Pour cela, passons à la leçon suivante et obtenons ces chiffres et l' opérateur à partir des données saisies par l'utilisateur. 10. Obtenir des valeurs d'entrée: Nous avons maintenant besoin d'un moyen de référencer ces éléments d'entrée dans notre code JavaScript, et pour ce faire, nous utiliserons ce document get element by ID method. Cette méthode recherchera les éléments de notre fichier HTML d'index par leur identifiant. Par exemple, si nous voulons récupérer cet élément d'entrée, qui est notre premier numéro ici, nous pouvons le sélectionner par son identifiant, qui est défini sur le premier chiffre. Si nous copions cet identifiant d' ici et que nous accédons à notre script, nous pouvons le passer entre crochets de cette méthode comme identifiant de cet élément, et cela sélectionnera le premier numéro sur notre écran. Nous la sélectionnons uniquement, mais nous devons également stocker la valeur de ce Sowere et pour cela, nous allons déclarer une nouvelle variable Nous l'appellerons comme première entrée numérique et nous l'attribuerons à tout ce qui est renvoyé par cette méthode. Ce document, Gt Element by ID, est un sélecteur dom, et nous reviendrons sur les sélecteurs dom plus en détail dans la dernière section de ce cours Mais pour l'instant, tout ce que vous devez savoir, c'est que cette méthode sélectionnera un élément spécifique dans notre fichier HTML à partir d'ici. Cet élément spécifique sera déterminé par cet identifiant que nous transmettons ici. Donc, si vous passez le premier chiffre, il sélectionnera cette entrée. Si nous passons l'opérateur, il sélectionnera ce sélecteur, ou si nous passons le deuxième numéro, il sélectionnera cette entrée et ainsi de suite Vérifions-le en enregistrant cela dans la console. Nous allons enregistrer cette première entrée numérique sur console et l'enregistrer. Ouvrons maintenant notre console ici et vous pouvez voir dans notre console nous avons cette entrée, qui est la première entrée numérique que nous avons sélectionnée sur notre écran. Cela signifie que nous avons également accès à la valeur qui sera écrite ici. Par exemple, si vous écrivez un nombre ici, nous pourrons le sélectionner dans cette première saisie numérique. Et nous pouvons extraire ce nombre en accédant à la propriété point sur ce premier élément d'entrée, et cela nous renverra le nombre libre qui est stocké à l'intérieur de cette entrée. Maintenant, au lieu de coder en dur ce nombre pour qu'il soit égal à deux, nous pouvons l'attribuer à la valeur contenue dans cette entrée. Mais nous ne pouvons pas l'attribuer comme ça si j'essaie de saisir la première valeur du point ici et de sauvegarder. Notez que nous recevons une erreur dans notre console indiquant qu'elle ne peut pas accéder à cette première entrée numérique avant de l'initialiser C'est parce que nous l' initialisons sur la ligne numéro six, mais nous essayons d'y accéder sur la ligne numéro un, et c'est pourquoi cela ne fonctionnera pas de cette façon Cela signifie que nous devons déplacer cette initialisation avant ce premier élément numérique Maintenant, si vous enregistrez le premier numéro ici, cela devrait fonctionner de cette façon et vous pouvez voir que nous n'avons aucune erreur ici. Il est également vide car le premier numéro n'a aucune valeur pour le moment. De cette façon, nous attribuons le premier numéro à tout ce qui est stocké dans cette entrée au lieu de coder en dur dans notre fichier JavaScript. nous reste plus qu' à faire de même pour la deuxième saisie numérique et également pour l'opérateur. Dupliquons cette ligne et nous la renommerons en deuxième entrée numérique Nous devons également modifier l'identifiant ici et pour déterminer ce que doit être l'identifiant, revenons à notre code HTML à points d'index. Ici, vous pouvez voir que notre deuxième entrée est nommée deuxième numéro. Nous allons le copier et le coller dans la méthode Get element by ID. Ici, au lieu de l' attribuer à quatre, nous l'attribuerons à la valeur du point d'entrée du deuxième numéro Dupliquons-le une fois de plus, et ce sera notre opérateur. Nous pouvons le renommer en entrée de sélection d' opérateur, et découvrons également quel est l'identifiant de ce sélecteur, et il est défini sur Nous allons le copier et le coller à l'intérieur de ces citations. Ici, au lieu d'un opérateur de codage en dur, nous utiliserons l'opérateur de sélection de la valeur du point d'entrée 11. Fonctions: Capables d'effectuer des opérations avec nos numéros d'entrée, nous devons comprendre les fonctions de JavaScript. Les fonctions sont l'un des concepts les plus importants de JavaScript, et elles permettent à nos programmes fonctionner en arrière-plan. Tout d'abord, définissons ce que sont les fonctions. Tout d'abord, les fonctions sont des blocs de code réutilisables qui exécutent une tâche spécifique ou calculent une valeur spécifique. Ils nous aident également à organiser notre code et à le rendre plus facile à lire et à comprendre pour les autres développeurs Une façon simple de penser aux fonctions est qu'il s'agit simplement de nombreux programmes ou fonctions exécutés au sein de votre programme plus vaste. Enfin, les fonctions en JavaScript peuvent être soit intégrées, c'est-à-dire qu'elles proviennent de Javascript lui-même, soit personnalisées, c'est-à-dire définies par nous. Par exemple, nous avons déjà utilisé des fonctions intégrées, mais nous n'avons encore écrit aucune fonction personnalisée. L'exemple de fonction intégrée est cet élément get by ID. Il s'agit d'une fonction intégrée à l'objet du document. Nous avons également utilisé une autre fonction ici, qui est cette fonction de journalisation, intégrée à la console elle-même. Nous avons déjà utilisé ces fonctions intégrées et nous en utiliserons d' autres tout au long de ce cours. Mais maintenant, nous allons également comprendre les fonctions personnalisées, car nous devrons définir une fonction personnalisée pour effectuer l'opération ici. Définissez les fonctions en Javascript en commençant par mot-clé function, suivi du nom de la fonction. Ensuite, nous ouvrons les bretelles et nous ouvrons et fermons également les bretelles bouclées. C'est ici que vous allez écrire la logique de ce que fera votre fonction. Et puis également à l'intérieur de ces accolades, nous pouvons éventuellement passer des arguments à cette fonction Par exemple, nous pouvons transmettre l'argument un et l'argument deux à cette fonction, puis nous pouvons utiliser ces arguments dans ce corps. Maintenant, créons une simple console, indiquons que cela provient du corps de la fonction et enregistrons-la. Maintenant, pour utiliser cette fonction, nous devons l'appeler quelque part dans notre code. Et pour appeler une fonction, il faut écrire son nom suivi de parenthèses Et ici, vous pouvez transmettre les arguments, mais ignorons-les pour le moment et enregistrons ceci. Vous pouvez voir dans notre console que nous obtenons le journal du corps de cette fonction, qui provient de notre fonction. Vous pouvez voir que l'utilisation du nom est déconseillée et qu'en général, nous essayons de garder les noms de fonctions également descriptifs, comme les noms de variables Les fonctions en général peuvent être divisées en deux types. Le premier type est celui des fonctions qui exécutent une tâche ou un calcul spécifique. Ces types de fonctions peuvent modifier quelque chose à l'écran ici, envoyer une demande au serveur ou interagir avec l' utilisateur d'une manière ou d'une autre, et le second type est celui des fonctions qui calculent et renvoient une certaine valeur. Ces types de fonctions prennent des entrées, comme ces arguments ici traitent, puis renvoient le résultat de ce calcul. Voyons les deux en action. Le premier type sera donc une fonction qui exécute une tâche spécifique. Supposons que nous ayons une fonction qui accueille les nouveaux utilisateurs. Ici, nous pouvons passer le nom d'utilisateur en argument, et maintenant, à l'intérieur du corps, nous pouvons consoler ce journal. Nous pouvons saluer l'utilisateur puis ajouter son nom d'utilisateur devant celui-ci. Nous pouvons maintenant appeler cela en appelant le nom de la fonction et en passant un argument, qui sera le nom ou le nom d'utilisateur de cet utilisateur. Et maintenant, vous pouvez voir que Hello John est imprimé sur notre console. Et le second type est une fonction qui renvoie un résultat. Par exemple, nous pouvons avoir une fonction qui additionne deux nombres, le numéro A et le numéro B. Et à l'intérieur de cette fonction, nous pouvons effectuer une opération A plus B. Et au lieu de l'enregistrer, nous pouvons simplement renvoyer le résultat de A plus B. Et dans ce cas, nous appellerons la fonction d'ajout et lui transmettrons deux nombres. Le premier sera au nombre de deux, et disons que le second est gratuit, sauvegardez ceci. Dans ce cas, étant donné que nous n' enregistrons rien dans la console, vous ne verrez pas le numéro ici, mais si nous le mettons dans le journal à points de la console, vous pouvez voir les cinq verrouillés dans notre console. Nous avons maintenant besoin d'une fonction qui effectuera ce calcul et changera le résultat qui est imprimé ici. Vous pouvez peut-être suspendre la vidéo et réfléchir à la fonction que nous allons utiliser, le premier type ou le second type. Vous pourriez penser que nous allons utiliser une fonction qui renvoie un résultat et calcule quelque chose. Mais en fait, nous allons utiliser le premier type de fonction car nous ne voulons rien renvoyer à partir de cette fonction. Nous voulons plutôt modifier le résultat obtenu dans ce paragraphe. Nous allons définir une fonction et nous l'appellerons calculer car elle va calculer le résultat de notre opération. Supposons maintenant que notre fonction de calcul n'additionne que les premier et deuxième nombres ensemble et ignore l'opérateur Dans ce cas, nous définirons une variable de résultat qui sera égale au premier chiffre plus le second. Ensuite, nous pouvons configurer une console qui verrouille le résultat pour le moment et nous rappeler qu' après l'avoir défini, il ne sera pas appelé par défaut. Nous devons l'appeler quelque part dans notre code. Pour cela, supprimons ce journal de console et invoquons notre fonction en appelant cette méthode de calcul. Pour l'instant, vous pouvez voir qu'il est vide et si j'essaie d'additionner deux nombres, nous n'obtiendrons rien dans notre console. C'est parce que nous appelons déjà cette fonction avant même initialisé ces nombres et de cliquer sur Calculer Mais dans notre cas, nous voulons l'appeler à un moment précis et ce sera lorsque nous écrirons ces deux chiffres, puis que nous cliquerons sur ce bouton Calculer. Pour cela, nous devons d'abord sélectionner le bouton de calcul ici. Revenons à notre code HTML à points d'index. Comme vous pouvez le voir, le bouton de calcul possède l'identifiant de calcul. Nous pouvons le copier, puis dupliquer l'une de ces lignes. Renommons-le en bouton Calculer et nous le sélectionnerons par son identifiant, qui est calculé Maintenant que nous avons le bouton de calcul, nous pouvons appeler cette fonction lorsque vous cliquez sur le bouton de calcul et nous le faisons en utilisant une autre méthode intégrée en JavaScript Nous pouvons appeler cette méthode en accédant au bouton de calcul, puis voici la méthode appelée add event listener Cette méthode intégrée prend deux arguments. Le premier argument est l'événement, c'est-à-dire s'il s' agit d'un événement de souris ou d'un événement d'entrée. Dans notre cas, il s'agira d'un simple clic chaque fois que nous cliquerons sur ce bouton. Le deuxième argument est en fait la fonction qui sera appelée chaque fois que vous cliquerez sur ce bouton et cette fonction devrait être notre fonction de calcul Vous pouvez voir que dans ce cas, nous ne l'appelons pas immédiatement. Nous ne passons pas ces crochets, mais nous passons la fonction et elle l'appellera au bon moment, c' est-à-dire chaque fois que nous cliquons sur ce bouton ici. Avec cela, débarrassons-nous de ce premier appel de fonction, et sauvegardons-le. Nous pouvons maintenant écrire des nombres ici dans ces entrées, par exemple, deux plus trois et calculer. Vous pouvez voir que le résultat est vide pour le moment, et c'est une autre chose importante à comprendre, c'est que nous obtenons cette valeur d'entrée dès le début de ce programme, et comme vous pouvez le voir, au début de ce programme, elle est vide. Nous n'avons aucune valeur ici. Au lieu de cela, nous devons obtenir les valeurs de ces entrées dans notre fonction de calcul, c'est-à-dire juste au moment où nous avons cliqué sur ce bouton, et à ce moment-là, nous aurons les valeurs à jour à l'intérieur du premier chiffre ainsi que des entrées du deuxième chiffre Maintenant, si nous enregistrons, cela devrait fonctionner si nous revenons en arrière et que nous tapons deux plus trois et que nous appuyons sur calculer. Vous pouvez voir que nous avons trouvé quelque chose dans notre console, mais ce n'est évidemment pas ce à quoi vous vous attendiez. Vous vous attendiez à en avoir cinq ici. C'est parce que Javascript commence par comprendre qu'il s'agit de textes et non de chiffres et qu'il les additionne côte à côte. Pour que ce calcul fonctionne, nous devons convertir ces deux nombres et c'est là que nous devons comprendre les types de données en JavaScript. Nous en parlerons dans la leçon suivante. 12. Types de données primitifs: Corrigez ce problème que nous rencontrons dans la console lorsque nous essayons d'en ajouter deux, deux, trois et que nous obtenons 23 dans la console. En Javascript, comme dans tous les autres langages de programmation, nous avons différents types de données qui sont généralement divisés en types de données primitifs ou non primitifs. Pour l'instant, il suffit de comprendre les types de données primitifs. Le premier type de données primitif est celui des chaînes. Ce ne sont que des séquences de caractères, comme un faible que nous avons tapé dans la première fonction ou un, deux, trois, mais sous forme de chaîne Même si cela ressemble à un nombre, il s'agit tout de même d'une chaîne. C'est exactement le problème ici. Si nous essayons d'ajouter deux chaînes à trois, cela les fusionnera simplement et vous pouvez voir dans le résultat que nous obtenons 23 au lieu de cinq. Pour que cela fonctionne, nous avons besoin des autres types primitifs qui sont des nombres et tous les types numériques en Javascript sont traités comme des nombres. Par exemple, un, deux, trois sans ces guillemets, c'est le nombre 123 ; les décimales sont également considérées comme des nombres comme 3,6, etc. En plus de cela, nous avons également des booléens et les booléens ne sont que des valeurs logiques qui peuvent être vraies ou fausses Ayez également ce type spécial non défini qui est spécifique à Javascript. Comme nous l'avons déjà vu, si vous définissez simplement une variable sans lui attribuer de valeur, cette variable sera d' abord indéfinie jusqu'à ce que vous lui attribuiez une valeur Le dernier type primitif de Javascript est nul, ce qui représente simplement l'absence de valeur dans cette variable. La différence entre undefined et null est indéfinie lorsque vous déclarez une variable, mais que vous ne lui avez pas attribué de valeur Mais null, en revanche, indique simplement qu'il n'y a aucune valeur à l'intérieur de cette variable. Ces types de données peuvent être convertis les uns dans les autres. Par exemple, nous pouvons convertir la chaîne un, deux, trois en un , deux, trois, ou nous pouvons convertir 3,6 en chaîne et ce sera la chaîne 3.6 et ainsi de suite. Maintenant que nous avons compris cela, nous allons pouvoir résoudre notre problème ici pour vérifier JalaScript nous fournit un opérateur appelé type of qui indique le type d'une variable Par exemple, nous pouvons déterminer le type du premier chiffre de cette et le mettre dans un journal des points de la console afin de le voir sur notre écran. Maintenant, si nous essayons d'ajouter 525, par exemple, et que nous appuyons sur calculer, vous pouvez voir que la valeur de cette est en fait une chaîne et non un nombre, et c'est pourquoi nous voyons 55 ici au lieu de dix. Nous pouvons convertir la valeur de la première entrée en nombre au lieu d'une chaîne en utilisant une autre méthode intégrée en JavaScript, appelée parse float Cela prend un argument, qui est cette chaîne, et il prendra cette chaîne et la convertira en nombre. Si nous l'enregistrons et que nous réessayons, faisons cinq plus cinq à nouveau et calculons. Je peux voir que maintenant il a été converti en nombre, et maintenant nous pouvons utiliser cette fonction intégrée d' analyse de charge et nous pouvons y insérer la valeur Nous pouvons analyser le chargement puis transmettre la valeur de la première entrée, et nous ferons de même pour la deuxième entrée Avec ces modifications, lorsque nous essayons de calculer le résultat, c'est-à-dire faire le premier chiffre plus le second, nous additionnons en fait nombres au lieu d'une chaîne. Vérifiez que cela fonctionne. Je vais faire deux plus trois ici et appuyer sur calculer. Vous pouvez voir que le résultat est cinq ou que nous pouvons faire quatre plus cinq, et vous pouvez voir que c'est neuf. Il ne les fusionne pas sous forme de chaînes, mais il les traite plutôt comme des nombres et calcule la somme de ces deux Une dernière chose que nous pouvons faire pour améliorer l'expérience utilisateur est évidemment que les utilisateurs n' entreront pas dans cette calculatrice en ligne, n'appuieront pas sur Calculer , puis ouvriront la déconsole pour consulter les journaux Nous devons afficher le résultat ici au lieu de le montrer dans la console. Pour ce faire, nous devons d'abord sélectionner ce paragraphe dans notre fichier HTML à points d' index. Comme nous pouvons le constater, l'idée de ce paragraphe est vouée à se concrétiser. Nous allons copier ce résultat et le sélectionner sous ce bouton de calcul. Renommons ce paragraphe en paragraphe de résultat, et nous devons modifier l'ID à sélectionner par cet ID de résultat Et ici, au lieu d'enregistrer le résultat par console, nous allons placer ce résultat dans ce paragraphe, nous allons placer ce résultat dans ce paragraphe, et nous le ferons contenu du texte à points du paragraphe de résultat, qui est un autre attribut qui existe dans le paragraphe ici, nous pouvons afficher le résultat en écrivant d' abord le texte du résultat devant celui-ci, puis en ajoutant le résultat, quel que soit le résultat de le premier plus le deuxième chiffre est. Si nous l'enregistrons et que nous essayons à nouveau deux plus deux et que nous calculons, vous pouvez voir que nous obtenons un résultat. Un autre concept important que nous pouvons comprendre à partir de ce calcul est que Javascript est typé dynamiquement Cela signifie que lorsque nous essayons d' ajouter une chaîne à un nombre, vous pouvez voir que nous n'obtenons pas d'erreur. Au lieu de cela, il est converti en chaîne, et il fusionne simplement la chaîne et le nombre. Dans d'autres langages, par exemple, en Java, vous obtiendrez une erreur si vous essayez de le faire, mais JavaScript autorise cette syntaxe, ce qui signifie également que, par exemple, si nous déclarons une variable et lui attribuons un numéro, et plus tard, nous voulons modifier cette variable, et au lieu d'y stocker un nombre, nous voulons stocker une chaîne. Conviendra également parfaitement à JavaScript. Si nous enregistrons par points le résultat de X, vous pouvez voir que nous recevons du texte dans la console et que nous ne recevons aucune erreur. C'est pourquoi, en JavaScript, nous devons faire attention à nos types de données en particulier lorsque nous effectuons de tels calculs, car nous pouvons obtenir des résultats inattendus car cela ne nous empêche pas d'obtenir ces erreurs. 13. Opérateurs et contrôle du flux: dernière leçon, nous avons configuré cette fonction de calcul, qui calcule actuellement l'addition de ces première et deuxième entrées ici Par exemple, si je saisis les deux derniers points ici et que je calcule, nous verrons le résultat dans ce paragraphe de résultats. Mais comme vous pouvez le constater, notre code ici ne se soucie pas vraiment de ce sélecteur Par exemple, si je sélectionne trois moins deux et que je calcule, nous obtenons toujours ces cinq résultats ici, car nous ne faisons que des ajouts ici et nous n' utilisons pas cet opérateur que nous avons sélectionné dans le document HDML C'est là que nous devrons en apprendre davantage sur les opérateurs Javascript ainsi que sur les conditionnels JavaScript afin de pouvoir utiliser ces techniques pour effectuer notre calcul en fonction de ce sélecteur ici Commençons par les opérateurs En fait, nous avons déjà utilisé des opérateurs. Nous utilisons cet opérateur plus, qui additionne ces premier et deuxième nombres ensemble, et nous avons tous les opérateurs similaires que vous avez dans les calculs. Par exemple, si je déclare le résultat ici et que je réaffecte la variable de résultat en dessous première est l'opérateur d' addition Nous pouvons également dupliquer cette droite et faire une soustraction au lieu d'une addition Et dans ce cas, nous allons faire le premier chiffre moins le deuxième chiffre. Si je l'enregistre, essayons-le dans cette calculatrice. Si je fais gratuitement moins deux et que je ne me laisse pas tromper par cette icône plus ici parce que nous ne l'utilisons pas encore. Cela signifie donc essentiellement gratuit moins deux. Et si je clique sur Calculer, nous en obtiendrons un dans le résultat. Disposez également de l'opérateur de multiplication. Nous pouvons multiplier le premier et le deuxième nombre. Si je fais trois fois deux, nous en obtiendrons six dans le résultat ici. Enfin, dans les opérateurs simples, nous avons également la division. Si vous voulez diviser le premier nombre par le second, nous pouvons faire un opérateur de division ici, si je fais trois, le divise par deux et que je calcule, nous obtiendrons 1,5 dans le résultat. Les opérateurs que vous avez vus ici sont appelés opérateurs arithmétiques Nous pouvons maintenant effectuer tous les types de calculs que nous avons dans notre sélecteur Mais comment choisir le calcul à utiliser ? Pour cela, nous devons d'abord nous renseigner sur un autre type d'opérateur à savoir les opérateurs de comparaison. Avant d'utiliser l'opérateur de comparaison, enregistrons simplement sur la console l'opérateur que nous avons stocké dans cette variable et voyons ce que nous avons stocké dans cet opérateur lorsque nous effectuons le calcul. Vous ouvrez le journal de la console ici. Dans le premier cas, lorsque nous le réglons addition et que nous appuyons sur Calculer, vous pouvez voir que l' opérateur d'ajout apparaît dans la console. De même, si nous choisissons cette soustraction et que nous appuyons sur calculer, nous obtenons la soustraction ici et tous les autres opérateurs devraient fonctionner de la même manière Si nous sélectionnons la multiplication, vous pouvez le voir dans la console. De même, nous pouvons avoir la division et appuyer sur calculer, puis nous aurons la division dans la console. Les opérateurs de comparaison nous aident à identifier ce qui est stocké dans cette variable et à vérifier si la valeur est égale à une division, à un plus ou à un moins ou à autre chose. L'opérateur de comparaison le plus courant, que nous utiliserons également ici dans ce cas, est l'égalité stricte et libre. Par exemple, avec cet opérateur, nous pouvons vérifier si l' opérateur est égal à deux plus et enregistrer cette valeur ; sa valeur doit être vraie ou fausse. Par exemple, si je sélectionne moins et que je clique sur calculer, vous pouvez voir que la valeur est fausse car cet opérateur est égal à moins et non à plus. Maintenant, si je sélectionne plus et que je clique sur calculer, nous deviendrons vrais dans la console. Nous allons maintenant utiliser cet opérateur de comparaison en combinaison avec des conditions en JavaScript pour effectuer ces opérations fonction de la condition que nous allons définir Les instructions conditionnelles les plus courantes en Javascript sont les instructions EFL. Nous commençons l'instruction par le mot clé If, puis nous ouvrons les accolades L'intérieur de ces accolades sera la condition sur la base de laquelle nous effectuerons notre calcul Ensuite, comme pour les fonctions, nous ouvrons les accolades et à l'intérieur de ces bretelles, nous aurons le code qui sera exécuté au cas où cette condition serait exécuté au cas où cette condition Nous pouvons maintenant utiliser la même condition, mais dans notre instruction If nous pouvons nous débarrasser de cette partie ici. Maintenant, ce code signifie que chaque fois que l'opérateur est égal au signe plus, nous devons effectuer un calcul et ce calcul consistera à additionner ces premier et deuxième nombres ensemble. Cela signifie que nous pouvons déplacer cette partie du code dans cette instruction I et enregistrer ce fichier. Mais ce n'est qu' un des cas que nous pouvons avoir dans ce sélecteur Comme vous pouvez le voir de la même manière, nous pouvons avoir une valeur négative, une multiplication ou une division Pour cela, en JavaScript, nous pouvons continuer cette instruction If, et nous pouvons le faire en ouvrant les accolades et aussi les accolades ici Et cela signifie essentiellement que si cette première condition n'est pas vraie, est-à-dire que l' opérateur sélectionné n'est pas plus, alors nous pouvons vérifier une autre condition. Et disons que dans ce cas, l'opérateur est égal à moins et non à plus. Cette condition est vraie, alors nous devons calculer la soustraction au lieu de l'addition Nous allons donc copier ce code et le coller ici. Et maintenant, nous pouvons simplement continuer cette chaîne. Vous pouvez avoir autant d' instructions SF que vous le souhaitez. Nous pouvons avoir une autre instruction sf pour la multiplication, puis une autre pour la division. À ce stade, vous pouvez suspendre la vidéo et essayer d'écrire vous-même le reste du code. Et si ce n'est pas le cas, continuons à partir d'ici. Nous devons ouvrir les crochets pour l'autre condition, et cette autre condition se produira chaque fois que l'opérateur est égal à la multiplication. C'est alors que nous sélectionnons la multiplication ici dans cette sélection et dans ce cas, nous devons effectuer l'autre calcul, qui consiste à multiplier les premier et deuxième nombres. Et notre dernière condition sera que l'opérateur soit égal à la division, et dans ce cas, nous devons diviser le premier nombre par le second. Et si nous l'enregistrons pour qu' il soit formaté par pretier, revoyons la logique une fois de plus Si l'opérateur est égal à deux plus, nous additionnons les premier et deuxième nombres ensemble. Si l'opérateur est égal à moins, nous soustrayons le deuxième nombre du premier Si l'opérateur est égal à la multiplication, nous multiplions le premier et le deuxième nombre. Ensuite, s'il est égal à deux divisions, nous divisons le premier nombre par le second. Nous pouvons maintenant l'enregistrer et essayer notre code ici. Nous pouvons fermer la console, faire le premier numéro quatre, deux derniers et calculer. Le résultat sera six. Mais maintenant, changeons ce sélecteur et définissons-le sur moins Ce sera quatre moins deux. Si vous cliquez sur Calculer, vous pouvez voir qu'il est égal à deux maintenant. Ce qui se passe dans notre code, c'est que nous obtenons cet opérateur à partir du document HTML, puis nous vérifions si l' opérateur est égal à deux plus, et comme il n'est pas égal à plus, dans ce cas, nous n'exécutons pas ce code. Ensuite, nous passons à la ligne suivante qui vérifie si l'opérateur est égal à la soustraction Et cette comparaison est vraie parce que notre opérateur est configuré pour soustraire ici, et ici nous définissons le résultat comme premier chiffre moins le second, puis nous affichons le résultat à la fin ici Nous pouvons vérifier la présence de tous les autres opérateurs. Si je définis cela comme une multiplication, cela sera égal à huit et si je mets cela à une division, cela sera égal à deux. Une autre chose que nous pouvons ajouter à nos conditions est le dernier cas, c'est-à-dire si l' opérateur n'était égal à aucune de ces valeurs Dans ce cas, nous pouvons saisir un autre bloc de code et définir par le mot clé en Javascript. Nous ajoutons à nouveau les crochets ici pour exécuter ce code, et comme vous pouvez le voir, nous n' avons aucune condition ici. Pour les instructions s, l'opérateur doit être égal à la division ou à la multiplication. Mais dans le cas de l'instruction, nous n'avons aucune condition, ce qui signifie que si aucune des affirmations ci-dessus n'est vraie, nous entrons ce code. Par exemple, ici, nous pouvons définir la valeur du résultat comme un opérateur non valide. Nous pouvons nous débarrasser de ces communs ici et enregistrer notre fichier. Maintenant que notre document HTML est écrit correctement, nous n'aurons pas cette erreur d'opérateur non valide car l'opérateur est égal à l'un de ces quatre et nous avons les conditions ici. Mais par exemple, si nous passons au point d'index HTML, et ajoutons une autre option ici, si nous en changeons la valeur pour qu'elle soit complètement aléatoire et aussi la valeur ici et que nous l'enregistrons. Maintenant, si nous allons dans notre calculatrice et essayons de faire et libérer ici, de sélectionner cette dernière option ici et de cliquer sur Calculer, vous pouvez voir que le résultat est un opérateur non valide. agit pas d'un opérateur valide et nous nous attendions à ce que l'une de ces opérations soit effectuée ici, et si aucune de ces opérations n'était vraie , nous entrons dans ce dernier état, qui est l'opérateur non valide. Maintenant, évidemment, nous ne transmettrons pas quelque chose comme ça depuis notre fichier HTML, mais dans tous les cas, il est bon d'avoir cette dernière instruction, qui est le comportement par défaut. Même si le fichier HTML est mal écrit, cela résoudra ce cas et nous n' aurons aucune erreur sur notre écran. 14. Opérateurs expérimentés: Dans la dernière leçon, nous aborderons les principaux opérateurs arithmétiques et de comparaison nécessaires à notre fonction de calcul pour effectuer le calcul Mais maintenant, élargissons notre boîte à outils avec des opérateurs plus avancés, et nous utiliserons certains d' entre eux dans notre fonction de calculatrice. Commençons par les opérateurs arithmétiques. Nous utilisons déjà les opérateurs arithmétiques de base tels que la division de multiplication plus moins, mais il existe d'autres opérateurs arithmétiques que Par exemple, nous avons l'opérateur de module, qui est le signe du pourcentage, et cet opérateur vous donne essentiellement le reste après la division. Par exemple, si nous faisons dix modulo trois, nous en obtiendrons un, puisque dix est égal à trois fois trois plus un, celui-ci est le reste après la division, et c'est pourquoi nous en obtenons un ici dans la console Par exemple, si nous faisons dix modulo deux, nous devrions obtenir zéro dans la console, car dix est égal à deux, deux fois cinq plus zéro, et ce zéro est le reste que nous obtenons dans la console L'opérateur arithmétique suivant est l'exponentiel, qui correspond à deux icônes de multiplication réunies Par exemple, si vous voulez calculer le deux alimenté par deux, ce qui équivaut à deux fois deux, nous pouvons utiliser cet opérateur exponentiel ou si vous voulez calculer deux alimenté par trois, ce qui équivaut à deux fois deux fois deux, nous pouvons utiliser cet opérateur exponentiel dans ce Si je fais deux opérateurs exponentiels puis f, c'est l'équivalent de deux alimentés par free et vous pouvez voir que dans la console, nous en obtenons huit, soit deux alimentés par free Nous avons également l'opérateur d'incrémentation, qui représente deux avantages proches l'un de l'autre Par exemple, supposons que nous ayons une variable appelée X et que nous en stockions deux à l'intérieur de ce X. Maintenant, si vous voulez ajouter une variable à ce X, nous pouvons faire en sorte que X soit égal à deux X plus un, et maintenant nous en aurons trois stockés à l'intérieur de X. Mais il existe un moyen plus simple de le faire. Au lieu de faire X plus un, nous pouvons faire X plus plus, ce qui en ajoute un à X. Maintenant, si nous consoles X, vous pouvez voir que nous en avons quatre stockés dans cette variable X. Semblable à l'incrément, nous avons également l'opérateur de décrémentation, qui représente deux inconvénients combinés Par exemple, si vous voulez décrémenter un à partir de X, vous pouvez faire X égal à X moins un, et maintenant vous aurez un espace libre de stockage dans X. Mais une façon plus simple de le faire est faire X moins moins Maintenant, si vous enregistrez le X, vous pouvez voir que nous en avons deux stockés à l'intérieur de X parce que nous en avons soustrait un à ce libre Ce sont tous les opérateurs arithmétiques que vous devez connaître Je dirais que les plus utilisés sont ces opérateurs de base, puis nous utilisons également l'incrémentation et la décrémentation en quatre boucles, que vous verrez dans la section suivante Mais il est bon de tous les connaître car vous devrez peut-être parfois utiliser cette exponentielle ou ce modulo dans votre code Cela devrait être un modulo et non un module, donc c'est juste Passons maintenant au type d'opérateurs suivant, les opérateurs de comparaison. Nous avons déjà utilisé l'un d'entre eux, qui est l'égalité stricte. Par exemple, si nous voulons vérifier si deux sont égaux à deux, nous utilisons l'égalité stricte, puis nous obtenons le résultat dans la console, qui est soit vrai soit faux. Par exemple, si je vérifie que deux est égal à trois, nous devrions obtenir la valeur false dans la console car deux n'est pas égal à trois. L'égalité stricte vérifie également le type de ces variables, et pas seulement les valeurs. Par exemple, si je fais deux égale deux chaînes, le résultat sera faux car il s' agit du chiffre deux, et d'un autre côté, c'est le texte deux, et ils ne sont pas égaux les uns aux autres car ils ont des types différents. Mais d'un autre côté, nous avons une faible égalité, c' est-à-dire deux signes égaux au lieu de trois. Et cet opérateur vérifie si deux valeurs sont égales après les avoir converties en un type commun. Par exemple, si deux sont égaux à deux textes, vous verrez que nous parviendrons à passer dans la console, et c'est parce que l'égalité floue les convertit dans le même type. Cette opération est donc l'équivalent de deux stricts égaux à deux car elle convertit cette deuxième chaîne en deux nombres, puis effectue la comparaison. Et c'est pourquoi nous arrivons à accéder à la console. Mais dans la plupart des cas, ce n'est pas la méthode recommandée en JavaScript pour comparer des nombres ou quoi que ce soit d'autre. Si vous voulez comparer deux variables en JavaScript qui n' ont pas le même type, vous feriez mieux de convertir l'une d' entre elles dans le même type, puis d'utiliser l'égalité stricte ici au lieu d'utiliser l'égalité perdue. Cela vous permettra d'éviter résultats inattendus lorsque vous comparez des valeurs de différents types. Semblables aux opérateurs d'égalité, nous avons également les opérateurs d' inégalité, qui sont écrits comme ceci. Par exemple, si nous définissons une variable appelée X et que nous lui attribuons la valeur trois , par exemple, si nous voulons vérifier si ce X n'est pas égal à deux, nous pouvons utiliser cet opérateur d' inégalité, et nous allons maintenant passer au crible dans la console. X est égal à gratuit et non à deux, et c' est pourquoi nous arrivons à passer à travers la console. Ensuite, nous avons l'opérateur supérieur à, qui s' écrit comme ceci. Par exemple, nous pouvons vérifier si X est supérieur à un. Vous pouvez voir que c'est vrai, et si nous vérifions que X est supérieur à quatre, vous pouvez voir que c'est faux parce que X est égal à f et qu'il n'est pas supérieur à quatre. De même, nous avons un opérateur inférieur à, qui est écrit comme ceci. Nous pouvons vérifier si X est inférieur à un, ce qui est évidemment faux, ou nous pouvons vérifier si X est inférieur à quatre, ce qui est vrai car trois est inférieur à quatre. Enfin, nous avons une valeur supérieure ou égale, qui s'écrit ainsi. Par exemple, si nous disons que libre est supérieur à trois, nous aurons une valeur fausse parce que libre n'est pas supérieur à libre, mais ils sont égaux. Donc, si nous comparons, libre est supérieur ou égal à libre. Dans ce cas, nous allons passer car nous vérifions également s'ils sont égaux et dans ce cas, ils le sont. C'est pourquoi nous arrivons à accéder à la console. Le dernier est inférieur ou égal, ce qui revient à supérieur à égal, mais avec le signe opposé. Par exemple, quatre est inférieur à quatre, c'est faux, mais si nous faisons quatre c'est inférieur ou égal à quatre, nous allons maintenant passer à travers la console. Et ce sont tous les opérateurs de comparaison que vous devez connaître en JavaScript. Passons maintenant au premier groupe d'opérateurs, à savoir les opérateurs d'affectation. Les opérateurs d'assignation combinent essentiellement une opération arithmétique avec une assignation Par exemple, si nous déclarons une variable appelée A et que nous lui attribuons une variable, A, nous voulons ajouter cinq à cette variable A. Nous pouvons faire A égal à A plus cinq. Après cette opération, la valeur de A sera de six, mais il existe un moyen plus court de le faire avec les opérateurs d'assignation. Par exemple, nous pouvons faire A plus égal à cinq, ce qui revient essentiellement à écrire ceci. Dans ce cas, nous ajoutons cinq à A et comme la valeur de A est actuellement de six, cela signifie essentiellement six plus cinq , soit 11. Nous en aurons maintenant 11 stockés dans une variable. Et nous avons des raccourcis similaires pour la soustraction. Nous avons des raccourcis similaires pour la multiplication et aussi pour la division, qui font exactement la même chose. Nous avons également le raccourci pour modulo et aussi pour l'exponentiel Ce sont tous les opérateurs d' assignation. Passons maintenant aux opérateurs logiques. Tout d'abord, nous avons l'opérateur final logique ou il est plus courant de l'écrire ainsi. Supposons que nous voulions vérifier deux conditions en même temps. Déclarons d'abord deux variables. Réglons la valeur de A à B un et la valeur de B à B deux. Supposons que nous voulions effectuer deux opérations en même temps. Supposons que nous voulions vérifier si la valeur de A est égale à un et si la valeur de B est égale à deux. Nous pouvons utiliser cet opérateur final ici pour combiner les deux. En gros, cela signifie que si les deux opérateurs de gauche et de droite sont vrais, qu'alors que nous deviendrons vrais. Par exemple, si l'une de ces opérations est fausse, supposons que nous vérifiions si A est égal à deux et B égal à deux. Nous allons maintenant obtenir faux dans la console car cette première partie de notre opération est fausse et peu importe ce qui va suivre, ce résultat sera faux car nous vérifions auprès de l'opérateur final. autre opérateur logique est le ou il est plus habituel de l'écrire comme ceci. Par exemple, si nous faisons la même opération ici, mais avec l'opérateur, cela vérifiera si l'opérateur de gauche est vrai et si ce n'est pas le cas, cela vérifiera si l'opérateur de droite est vrai. Cela donne la valeur true si au moins l'une de ces opérations est vraie. Dans cet exemple, il vérifie d'abord si A est égal à deux, ce qui est faux, puis il passe à la partie suivante de la comparaison, si B est égal à deux et que le résultat c'est-à-dire si B est égal à deux et que le résultat est vrai car nous avons B égal à deux ici. C'est pourquoi nous devenons vrais dans la console. Et le dernier opérateur logique est l'opérateur note, qui s'écrit comme ceci. Cela inverse essentiellement l'opération. Par exemple, si nous ne disons pas vrai, cela se traduira par faux, et si ce n'est pas faux, cela se traduira par vrai. Et encore une chose à savoir à propos des opérateurs logiques, c'est qu'ils ne nous fournissent pas toujours de vraies ou de fausses valeurs. Par exemple, si nous faisons le vrai et le faux, ici, évidemment, nous obtiendrons faux parce que l'une d'entre elles n'est pas vraie, et c'est la deuxième partie de l'opération. Mais cela ne signifie pas que les opérateurs logiques renvoient toujours vrai ou faux. Je vais vous donner un exemple utile. Supposons que nous ayons une variable utilisateur led, qui devrait contenir la valeur des détails de l'utilisateur pour le moment, elle est pas définie, ce qui signifie que nous n'avons pas encore les détails de l'utilisateur, puis nous avons une autre variable qui est l'utilisateur par défaut Si cet utilisateur n' est pas défini, nous lui attribuons un utilisateur par défaut. Disons que nous l'avons défini comme invité. Si l'utilisateur a fourni son nom, nous pouvons l'appeler avec son nom, mais s'il ne l'a pas fourni, nous voulons l'appeler avec son nom d'invité. Supposons que nous voulions créer une autre variable basée sur ces deux valeurs, appelée nom d'affichage, nous voulons l'attribuer au nom d'utilisateur s'il a été fourni et sinon, nous voulons l'attribuer au nom d'invité. Nous pouvons maintenant le faire avec les instructions IL. Nous pouvons le faire en tant qu'utilisateur, et dans ce cas, nous avons défini le nom d'affichage comme étant égal à user, puis nous pouvons le faire, ce qui signifie que le nom d'utilisateur n' a pas été fourni. Dans ce cas, nous pouvons définir le nom d'affichage comme étant égal à celui de l'utilisateur par défaut. Si nous appuyons sur Entrée, vous pouvez voir que nous avons maintenant enregistré l'invité dans le nom d' affichage au lieu de l'utilisateur car ils ne nous ont pas fourni leur nom d'utilisateur. Mais le plus souvent, nous pouvons utiliser opérateurs logiques pour raccourcir notre code. Par exemple, nous pouvons maintenant utiliser un opérateur logique ou, au lieu de faire toutes ces instructions EFL, nous pouvons attribuer la variable de nom d'affichage à l' utilisateur ou à l'utilisateur par défaut Cela signifie que nous voulons utiliser cet utilisateur par défaut au cas où le nom d'utilisateur n'aurait pas été fourni. Au cas où il l'aurait été, nous ne poursuivrons pas le reste de l'opération et nous attribuerons ce nom profane à l'utilisateur. Cela aboutit essentiellement à la même chose que ci-dessus, mais vous pouvez voir que le code est beaucoup plus court que celui-ci. Résumons avec le dernier type d'opérateur, qui est l'opérateur ternaire L'opérateur ternaire est une méthode abrégée pour écrire des instructions EL sur une seule ligne Supposons que nous ayons le même scénario où nous avons le nom d'utilisateur puis l'utilisateur par défaut. Maintenant, si le nom d'utilisateur a été fourni, nous voulons les appeler avec leur nom et sinon, nous voulons les appeler en tant qu'invité. Nous pouvons également utiliser des opérateurs ternaires ici pour raccourcir notre code et pour le raccourcir, nous pouvons utiliser cette condition ici, donc nous faisons utilisateur puis point d'interrogation Après le point d'interrogation vient le code qui sera exécuté si c'est vrai, c'est-à-dire cette partie. Nous allons définir le nom d'affichage sur user et après ce signe vient la deuxième partie qui sera exécutée si l'utilisateur est faux. Dans notre cas, il s'agit du nom d'utilisateur par défaut. Revoyons-le encore une fois. Nous attribuons ce nom de jeu à l'utilisateur ou à l'utilisateur par défaut, selon que le nom d'utilisateur a été fourni ou non. Si le nom d'utilisateur n'est pas défini, ce qui est le cas dans notre cas, cela signifie que ce n'est pas vrai Nous n'exécuterons donc pas cette partie du code Dans ce cas, il sera attribué à l'utilisateur par défaut, ce qui est une supposition. Au cas où cela serait vrai, disons qu'un nom d'utilisateur tel que John nous a été attribué ici. Dans ce cas, nous exécuterons cette partie du code et nous ignorerons cette seconde partie. Nous appuyons sur Entrée, vous pouvez voir que ce nom d'affichage est défini sur invité, et c'est parce que nous n' avons pas défini le nom d'utilisateur. Il n'est pas défini, c'est pourquoi nous l'avons défini sur le nom d'utilisateur par défaut, qui est guest Ce sont tous les opérateurs que nous avons dans JavaScript. Maintenant, c'était beaucoup de théorie sans aucune pratique. Revenons maintenant à notre calculateur et essayons d' intégrer ces nouveaux opérateurs que nous venons d'apprendre. 15. Validation des entrées: Rendons notre calculateur un peu plus robuste en y ajoutant une validation des entrées. Si nous revenons à notre fichier HTML d' index, vous pouvez voir que nous avons déjà une validation d'entrée de base, c' est-à-dire que nous nous attendons à ce que le type de cette entrée soit un nombre. Cela signifie que si vous essayez de saisir autre chose dans l'entrée, il ne s'agit pas d'un nombre. Supposons que vous vouliez taper la lettre A, vous ne la verrez pas s'afficher à l'écran, car cela valide la saisie et ne vous permet pas d'écrire quoi que ce soit qui n'est pas un chiffre Pour l'instant, retirons-le et voyons comment implémenter une validation d'entrée dans le fichier JavaScript. Si vous supprimez cette validation de type d'ici, nous pouvons désormais taper des lettres ici. Disons ces lettres plus ces lettres, et nous pouvons appuyer sur Calculer. Et vous pouvez voir que dans ce cas, nous avons un problème ici, et c'est ce que nous devons corriger dans notre fichier JavaScript. Cela signifie qu'avant d' effectuer toute opération ici, nous devons d'abord vérifier le type du premier et du deuxième chiffre. Ensuite, sur cette base, nous décidons si nous voulons aller plus loin ou si nous voulons en faire autre chose. abord, enregistrons les points de la console, les premier et deuxième chiffres, et voyons ce que nous obtenons dans la console. Si vous ouvrez la console ici et que nous écrivons quelque chose ici, disons A puis plus B, et que nous appuyons sur Calculer, vous pouvez voir que dans la console, nous avons deux nonnes et qu'aucune en Javascript n'est un type numérique, ce qui signifie qu'il n'y a pas de nombre ici Aucun n'est synonyme de chiffre. Et voyons pourquoi c'est le cas pour nous ? Et c'est parce que ce premier nombre provient de la fonction JavaScript parse float et nous prenons la première valeur d'entrée et nous essayons de la convertir en nombre Vous pouvez le voir dans la console. Si vous essayez d'obtenir la valeur de parse float puis que vous lui transmettez la chaîne A, vous pouvez voir que nous n' obtenons pas de nombre ici, et c'est pourquoi nous l'avons dans la console Et pour éviter que cela ne se produise, nous pouvons vérifier si cette valeur est égale à zéro, puis nous pouvons faire autre chose au lieu de calculer le résultat. Et nous pouvons vérifier cela en utilisant une autre fonction JavaScript intégrée, appelée Inn. Et à l'intérieur des crochets, vous passez le chiffre que vous essayez de vérifier. Nous devons faire de même pour le deuxième numéro. Nous devons vérifier si ce n' est pas le cas et l'enregistrer. Maintenant, si vous essayez de faire A plus B et de calculer, vous pouvez voir que nous obtenons deux vérités ici, ce qui signifie que le premier chiffre est nul et que le second est non. Un exemple de solution que nous pouvons faire ici est de vérifier si le premier chiffre est nul en faisant « aucun », premier chiffre. Ici, au lieu d'afficher cette non-valeur, nous allons afficher un message d'erreur indiquant que la première entrée n'est pas correcte. Au lieu d'afficher le paragraphe résultat sous forme de résultat et de numéro, nous allons insérer un autre élément dans ce contenu de texte, et ici nous pouvons, par exemple, dire qu' il faut saisir un nombre valide et que nous devons également revenir à cette fonction. Cela signifie que si le premier chiffre n'est pas valide, nous entrerons dans cette instruction If et nous l'insérerons dans ce paragraphe. Ensuite, au lieu d'effectuer ces autres opérations, nous revenons, ce qui signifie que nous quittons cette fonction de calcul. Si nous enregistrons nos modifications et essayons de le faire à nouveau, faisons A plus deux et appuyons sur calculer. Vous pouvez voir qu'il est écrit, veuillez entrer un numéro valide ici et il ne vous en montre aucun dans ce cas. Maintenant, si nous essayons de faire deux plus B et que nous appuyons sur calculer, vous pouvez voir que nous n'en voyons toujours aucun, et c'est parce que nous n'avons pas vérifié le deuxième chiffre ici. Ce que nous pouvons faire, c'est copier cette instruction If, et ici, au lieu du premier chiffre, nous pouvons vérifier le second chiffre. Cela signifie que si le premier chiffre était valide , nous entrerons dans cette instruction E, et si ce second chiffre n'est pas valide, le même message d'erreur s'affichera à nouveau à l'écran. Maintenant, si nous essayons de faire deux plus P et de calculer, nous verrons le même message d'erreur, et si nous essayons de faire A plus un et de calculer, nous avons à nouveau le même message d'erreur nous demandant de saisir un nombre valide. Nous pouvons raccourcir ce code en utilisant les opérateurs logiques que nous venons d'apprendre. Débarrassons-nous d'abord de ce journal de console ici. Si vous regardez la logique ici, cela signifie essentiellement que si le premier chiffre n' est pas valide ou si le second n'est pas valide, nous allons afficher ce texte au lieu d'afficher le résultat du calcul. Comme ces deux instructions contiennent exactement le même code , nous pouvons les combiner à l'aide de l'opérateur or. pouvons supprimer complètement cette deuxième instruction, et ici nous pouvons faire ou opérer, puis vérifier si le deuxième nombre n'est pas non plus un nombre, et cela aura le même résultat que d'avoir deux instructions pour le premier et le deuxième numéro. Mais au lieu de cela, nous faisons maintenant les deux sur une seule ligne et nous réduisons la duplication du code de ces deux lignes. Enregistrez et vérifiez que cela fonctionne également. Si j'essaie de faire trois plus deux et que j'appuie sur calculer, nous obtiendrons ce message d'erreur ici et si j'essaie de saisir un nombre valide dans la première entrée, mais un nombre non valide dans la deuxième entrée, nous verrons à nouveau ce message d'erreur et si nous essayons les deux comme des nombres invalides et que nous appuyons sur calculer, nous verrons à nouveau le même message d'erreur. Sinon, si nous essayons de faire six plus six et de calculer, nous verrons maintenant le résultat car les deux sont des nombres Nous passerons donc cette vérification, puis nous passerons au processus de calcul et nous afficherons le résultat à l'écran. Maintenant, si nous revenons à notre code HTML à points d'index et que nous ajoutons à nouveau ce type égal à un nombre, nous aurons maintenant deux validations en place Nous aurons la première validation dans un fichier HTML, qui ne vous permettra pas d' écrire du texte ici. Mais même si nous oublions d' ajouter ce numéro de type, nous aurons la deuxième validation dans le Javascript, qui vérifie toujours si le numéro est valide sinon il renvoie une erreur à l'écran. En fait, il y a une autre validation que nous pouvons ajouter. Essayons de faire 4/0 et de calculer. Vous pouvez voir que le résultat est infini. D'après les mathématiques, nous savons que 4/0 devrait donner l'infini, mais en fait, dans les calculatrices, nous ne devrions pas afficher l' infini ici Nous devrions plutôt indiquer que la division par zéro n' est pas autorisée ici et cela se produit dans ce premier scénario où nous avons l'opérateur de division. Ici, avant de calculer le résultat, nous devons ajouter une autre validation en place et cela devrait être pour vérifier si le deuxième nombre que nous avons ici est égal à zéro. Si cela est égal à zéro, nous devons afficher un message à l' écran au lieu de faire les calculs. Nous ne devrions pas passer à cette ligne, mais plutôt afficher un message d'erreur ici. Nous pouvons à nouveau copier le contenu du paragraphe ici et afficher un message indiquant que la division par zéro n'est pas autorisée. Et si vous vous en souvenez, nous devrions à nouveau faire la déclaration de retour ici. Sinon, cette fonction de calcul passera à la ligne suivante et effectuera la division. Nous devrions ajouter cette instruction return ici pour poser l'exécution et pour sortir de cette fonction. Si nous sauvegardons notre code et essayons de faire une division par zéro, disons libre, divisons-le par zéro, puis calculons par erreur, vous pouvez constater que nous avons ajouté vous pouvez constater que nous avons ajouté une autre validation et que nous ne permettons aux utilisateurs d'utiliser zéro comme deuxième entrée lorsqu' ils effectuent des divisions. 16. Commuter les instructions: Implémentez la dernière amélioration notre calculateur, qui consistera à supprimer cette chaîne d' instructions EFL et à utiliser à la place l'instruction switch en JavaScript que nous allons apprendre maintenant Comme vous pouvez le voir ici, nous utilisons une chaîne d' instructions EFL pour déterminer l'opération à effectuer Bien que cela fonctionne, il existe un meilleur moyen de le faire , à savoir les instructions switch en JavaScript. En Javascript, nous pouvons utiliser le clavier switch pour lancer une instruction switch, puis nous ouvrons les crochets et à l'intérieur des crochets, nous aurons la variable que nous essayons d'évaluer. Dans notre cas, cette variable sera l'opérateur. Nous essayons d'effectuer des opérations basées sur la valeur de cet opérateur, puis nous ouvrons les accolades comme nous le faisons dans l'instruction If, puis nous utilisons le mot clé case dans switch et chaque case représente une valeur possible de l'expression Par exemple, cela peut être le cas si l'opérateur est égal à deux plus, et dans ce cas, nous devons effectuer des calculs. Nous définissons ce calcul devant cet exposé de cas. Nous savons qu'en cas d'addition, nous devons effectuer ce calcul. Nous devons le copier et le coller sur la ligne suivante de ce cas avec l'icône plus. Ensuite, une fois que nous avons terminé avec le code, nous devons ajouter l'instruction break ici. Cette instruction est très importante et indique à JavaScript de quitter ce bloc de commutateurs fois la correspondance trouvée. Si vous n'incluez pas cette rupture, cela signifiera simplement que le code passera au cas suivant, même s'il ne correspond pas. Ce sera le premier cas mentionné dans notre déclaration de changement, mais nous savons qu'il y a trois autres cas de cet opérateur. Et ajoutez le cas suivant ici et dans le cas suivant, l'opération sera négative Ici, nous devons effectuer cet autre calcul. Nous allons le copier et coller sous ce deuxième cas ici, puis nous ajouterons la même déclaration de rupture en dessous. À partir de là, nous pouvons avoir un autre cas, qui sera celui de la multiplication. En cas de multiplication, nous devons copier cette partie du code et coller en dessous du cas de multiplication, puis ajouter l'instruction break. En cas de division, nous devons ajouter un autre cas ici pour cela. Dans ce cas, nous devons copier ce bout de code et le coller sous l'énoncé du cas. N'oublions pas d'ajouter l'instruction break après ce cas. Qu'en est-il de cet autre cas où l'opérateur n'est pas valide ? Eh bien, dans les instructions switch pour cela, nous avons la valeur par défaut. Donc, en dessous de tous les cas, nous pouvons ajouter la valeur par défaut ici. Et il s'agit d'un cas facultatif qui est exécuté si aucun des autres cas n'est rempli. Donc, si l'opérateur n'était pas plus moins, multiplication ou division, nous passerons à cet état par défaut. Et c'est ici que nous copions et collons le code du dossier. Et maintenant, cette instruction switch est l'équivalent du code que nous avions ici. Comme vous pouvez le constater, l'instruction switch semble beaucoup plus claire et le code est beaucoup plus facile à lire que les instructions EFL ci-dessous Avec cela, nous pouvons nous débarrasser de cet autre code ici et enregistrer ce fichier. Maintenant, vérifions-nous que tout fonctionne bien ici. Si nous faisons un plus un et calculons, le résultat est deux. Si nous faisons trois moins un et calculons, le résultat est deux. Si nous calculons trois fois deux, le résultat sera six. Si nous essayons de faire 3/2, nous obtiendrons 1,5 ici Avec cette leçon, nous avons terminé la première partie des modules de base de Javascript , dans laquelle nous avons découvert les variables et les constantes. Nous avons découvert les types de données primitifs en JavaScript , à savoir les nombres, les chaînes, les lingots, etc. Nous avons découvert tous les types d' opérateurs tels que les opérateurs arithmétiques, comparaison, logiques et d'affectation Nous avons appris à utiliser les instructions EFL et les instructions switch pour contrôler le flux de notre application, nous avons découvert les fonctions et nous utilisons des fonctions pour effectuer des calculs, et nous avons appris à déclarer une fonction, à coder ces fonctions à leur transmettre des arguments et à utiliser les valeurs renvoyées, etc. Passons à la section suivante où nous allons apprendre le reste des éléments de base de JavaScript. 17. Bienvenue et feuille de route de la section 3: Accédez à ce module où nous allons découvrir les éléments de base avancés de JavaScript. Dans les modules précédents, nous avons jeté des bases solides en comprenant les bases de Javascript, telles que la syntaxe, les variables et les constantes, types de données primitifs en JavaScript, les opérateurs et le flux de contrôle, ainsi que les fonctions et leur utilisation en JavaScript. Dans ce module, nous nous concentrerons sur les concepts avancés. Nous découvrirons le pouvoir des boucles pour automatiser les tâches répétitives, itérer les données et créer un code efficace Ici, vous découvrirez les différents types de boucles, comme quatre, Wil, deux Wil et autres, et vous découvrirez les cas d' utilisation uniques de chacune d'entre elles en faisant des exercices pour vous assurer de bien comprendre quand utiliser chacune d'elles. Nous allons explorer les tableaux, qui sont des structures de données polyvalentes utilisées pour stocker des ensembles ordonnés d'éléments, et vous découvrirez ici comment créer, accéder et manipuler des tableaux à l'aide de diverses méthodes intégrées en JavaScript Ensuite, nous allons explorer un sujet très important en JavaScript, à savoir que les objets ne sont que des paires clé-valeur qui constituent l'épine dorsale de l'organisation des données JavaScript Vous apprendrez comment créer un objet, comment accéder à ses propriétés et différentes méthodes que nous utilisons sur les objets, ainsi que sur le mot clé D, qui est un concept important en JavaScript. Et si vous vous en souvenez, dans le module précédent, nous avons découvert les types de données primitifs. Dans ce module, nous allons découvrir les types de données de référence en JavaScript, à savoir les objets, les tableaux et les fonctions, et quelle est la différence entre les types de référence et les types de données primitifs La principale différence entre ceux-ci réside dans la façon dont ils sont stockés et manipulés en mémoire, et nous allons apprendre en quoi cela diffère des types de données primitifs. Nous explorerons le mot clé D dans les objets, qui est un concept important en Javascript, ainsi que les méthodes call, apply et bind utilisées pour modifier le mot clé this et la différence entre ces méthodes. Enfin, nous allons découvrir cette portée, c' est-à-dire comment Javascript détermine l'accessibilité des variables au sein des différentes parties de votre code. Ici, nous allons en apprendre davantage sur le global, local et le blogscope, ainsi que sur la différence entre les deux. À la fin de la section C, nous terminerons tous ces concepts avancés en JavaScript et, dans l'ensemble, les éléments de base de Javascript, qui nous permettront de créer applications Web interactives et avancées. 18. Boucles: En programmant, il arrive souvent que vous deviez répéter une certaine action plusieurs fois. Supposons que vous vouliez afficher un message, un mot bas dans la console dix fois. Vous pouvez écrire ce mot de code dans la console , puis le copier neuf fois de plus et ce mot sera un mot bas dix fois dans la console. Mais que se passerait-il si nous voulions enregistrer la même chose sur console 100 ou 1 000 fois ? copier-coller de cette même ligne sera très inefficace et JavaScript nous fournit un meilleur moyen de gérer ces tâches répétitives à l' aide de boucles Les boucles nous permettent d'exécuter un bloc de code à plusieurs reprises et de le rendre concis plutôt que de copier-coller le même code plusieurs fois Le type de boucle le plus courant en JavaScript est la boucle à quatre, et voici la structure de base d'une boucle à quatre. Nous avons trois parties entre crochets et la première partie est l'initialisation La deuxième partie est la condition et la dernière partie est l'expression finale. La partie d'initialisation consiste à déclarer pour la première fois une variable de compteur de boucle et à définir la valeur initiale Par exemple, nous pouvons déclarer une variable nommée I et définir la valeur initiale à zéro. Et puis nous avons la condition, qui est une expression booléenne vérifiée avant chaque itération de la boucle Et si l'évaluation aboutit, la boucle continue, et si ce n'est pas le cas, elle s'arrête Dans notre exemple, la condition devrait être que chaque fois que le I est inférieur à dix, nous devons continuer à exécuter ce code. La dernière partie que nous avons est l'expression finale. Cette expression est exécutée à la fin de chaque itération de boucle Habituellement, nous mettons à jour le compteur de boucles dans cette partie. Par exemple, nous avons la variable I ici, nous l'initialisons à zéro, puis la condition est qu'elle soit inférieure à dix Dans la dernière partie de l'expression, nous incrémentons cette variable I à chaque itération, et c'est juste l'équivalent de I plus égal à un où nous ajoutons un à I Si vous vous souvenez de l'opérateur d' incrémentation, est là que c'est utile Nous utilisons cet opérateur d'incrémentation dans quatre boucles, généralement pour incrémenter le compteur des quatre Et puis, tout comme pour les fonctions, nous avons ces accolades, et à l'intérieur des accolades, nous définissons le décodage qui doit être exécuté pour ces quatre boucles nous définissons le décodage qui doit être exécuté pour Dans notre cas, nous avons juste besoin de la console log low word. Nous pouvons donc copier ce message de journal de console et le placer dans la boucle à quatre boucles. Donc, pour réitérer ce qui se passe ici, nous initialisons notre variable I à zéro, et c'est le compteur de nos quatre boucles Ensuite, cette condition est vérifiée avant chaque itération, et tant que I est inférieur à dix, la boucle continue côté de notre boucle for, nous enregistrons le message, mot dans la console, et à la fin de chaque itération, sauf pour enregistrer ce message, nous incrémentons également le compteur I d'un, ce qui signifie que lors de la première itération, I vaut zéro et nous enregistrons le message, Et à la deuxième itération, je ne fais qu'un, puis nous enregistrons également le mot dans la console Et cela continue jusqu'à ce que j'aie neuf ans, puis nous enregistrons le mot bonjour une fois de plus. Et puis lorsque le I est égal à dix, cette condition est fausse, qui signifie que le I n'est pas inférieur à dix. Dans ce cas, nous arrêtons d'exécuter ces quatre boucles, et ce bloc de code fait exactement la même chose que cette première partie, sauf que nous utilisons trois lignes de code sauf dix. Et si nous devions enregistrer ce mot bonjour 100 fois, par exemple, au lieu de dix, nous pourrions simplement incrémenter cette condition I et la définir à moins de 100 et nous utiliserons toujours les trois lignes de code au lieu de 100 lignes de code et ainsi de suite C'est l'avantage des quatre boucles en JavaScript. Ils nous permettent d' exécuter un bloc de code à plusieurs reprises pour des tâches automatisées, et ils rendent notre code plus concis. Il s'agit des quatre types de boucles en JavaScript, mais nous en avons d'autres. Par exemple, nous avons la boucle Wile, et la boucle Wile est un autre type de boucle utile Elle continue à exécuter un bloc de code tant que la condition spécifiée est vraie, et nous spécifions cette condition après l'instruction Wile, nous ouvrons les accolades, nous ouvrons les accolades, et c'est ici que nous allons écrire la condition de cette boucle, puis nous ouvrons les accolades, similaires . Elle continue à exécuter un bloc de code tant que la condition spécifiée est vraie, et nous spécifions cette condition après l'instruction Wile, nous ouvrons les accolades, et c'est ici que nous allons écrire la condition de cette boucle, puis nous ouvrons les accolades, similaires à quatre boucles, et c'est ici que nous allons écrire le code d'exécution de cette boucle Wile Supposons que nous voulions compter 10 à 1. Nous pouvons définir une variable ici. Supposons que le nombre commence dix ici, à l'intérieur du bloc d'exécution, nous enregistrerons ce nombre, et après avoir enregistré ce nombre, nous le décrémenterons également d' un en utilisant l'opérateur de décrémentation Avec ce code à chaque itération, nous verrouillons la valeur du compte puis nous la décrémentons Notre condition pour cette boucle le devrait être si le nombre est supérieur à zéro, alors nous devons enregistrer ce nombre et sinon, nous quittons cette boucle de fichier. Comme vous pouvez le voir sur la console, nous en aurons dix, neuf, huit, sept et jusqu'à un. Lorsque nous définirons la valeur du compte un, nous la décrémenterons ensuite et celle-ci sera égale à zéro À la prochaine itération , zéro sera supérieur à zéro, ce qui évaluera deux chutes et cela sortira de cette boucle de fichiers Tout comme les boucles le, nous avons également les boucles DWi en JavaScript. La principale différence est que ce type de boucle garantit que notre code sera exécuté au moins une fois, même si la condition est initialement fausse. Définissez les boucles DY en commençant par le mot clé Do , puis par le bloc d' exécution du code, puis nous avons le L et la condition qui se trouvent entre crochets Wil. Ce type de boucle est moins courant que la boucle le, mais il peut être utile dans certaines situations où vous devez effectuer une action au moins fois avant de vérifier une condition. Par exemple, si nous définissons la même condition que dans notre boucle y, est-à-dire que le nombre est supérieur à zéro. Comme nous avons déjà décrémenté notre valeur de comptage à zéro, si j'enregistre la valeur de compte ici, vous pouvez voir qu'elle est maintenant réglée à zéro Si nous essayons de consoler cette connexion dans cette boucle de dole, la valeur de la condition de comptage est fausse, car cela signifie que zéro est supérieur à zéro, qui devrait signifier que cela ne doit pas être exécuté Mais c'est le cas de la boucle Y, et du côté de la boucle Di, nous l'exécutons au moins une fois. Et comme vous pouvez le voir, le zéro est imprimé dans la console. Et ce n'est qu'après la première itération il verra que le compteur n' est pas supérieur à zéro, et c'est là qu'il arrêtera cette boucle Et parlons également des boucles infinies en JavaScript. Il est important de faire attention ne pas rester coincé dans des boucles infinies. Ce sont des boucles où la condition ne devient jamais fausse, comme cette condition dans ces deux boucles ou cette condition dans ces quatre boucles. Et cela fait fonctionner votre code à l'infini, et cela entraînera également l' écrasement du navigateur Et pour cela, nous devons toujours nous assurer que nos quatre boucles ont un moyen de se terminer un jour. Voici un exemple de boucle infinie. Nous pouvons définir une boucle à quatre et mettre le compteur initial à zéro, puis nous pouvons vérifier si le I est supérieur à zéro, et dans ce cas, nous incrémenterons la variable I. Ici, vous voulez exécuter n'importe quel code. Supposons que vous souhaitiez simplement afficher le message de somme du journal de la console. Ce message continuera à s' imprimer indéfiniment, et c'est parce que nous avons commencé cette variable I à zéro et que nous l'avons incrémentée à chaque étape Cela signifie simplement que je serai zéro, puis ce sera un, deux, puis cela passera à l'infini comme mille, puis deux plus l'infini. Cette condition ne deviendra fondamentalement jamais vraie et notre boucle s' exécutera pour toujours. Nous avons également quatre boucles d'entrée et quatre boucles d' arrêt en JavaScript. Ils servent à itérer sur des objets et des tableaux. Quatre itérations en boucle sur les propriétés d' un objet et quatre itérations hors boucle sur les valeurs d'un tableau, ou elles peuvent également itérer sur un objet itérable tel que des chaînes, des ensembles Cela aura plus de sens au fur et à mesure que nous en apprendrons davantage sur les objets et les tableaux en JavaScript Nous pouvons également contrôler ces boucles en utilisant les instructions break et continuous en JavaScript. Nous pouvons utiliser break pour quitter immédiatement la boucle et continuer pour sauter le reste de l'itération en cours et passer à la suivante Par exemple, nous pouvons avoir les quatre mêmes boucles où nous initialisons la variable I , puis nous définissons une condition Supposons que I soit inférieur à 100 , puis nous incrémenterons notre variable I. Maintenant, connectons-nous simplement à la console ici, qui comportera 1 à 100 numéros. En fait, définissons simplement ces 210 pour que nous puissions voir tous les chiffres dans la console. Ici, nous pouvons ajouter un conditionnel. Supposons que nous recherchions le numéro cinq dans cette variable I. Nous pouvons définir une condition selon laquelle si I est égal à cinq. Disons que dans ce cas, nous voulons sortir de cette boucle et que nous ne voulons pas continuer parce que nous avons trouvé le numéro que nous recherchions. Nous pouvons définir ici un message du journal de la console indiquant qu'en haut de la boucle à cinq sur la ligne suivante, nous pouvons utiliser l'instruction break et sortira de cette boucle à quatre, qui signifie que nous ne bloquerons que zéro, un, deux, trois, quatre et cinq chiffres dans la console, puis nous quitterons cette boucle C'est ainsi que nous pouvons utiliser l'instruction break dans nos quatre boucles. Voyons maintenant comment utiliser l'instruction continue dans une boucle à quatre boucles. Mais disons que cette fois, nous voulons uniquement verrouiller les nombres impairs à l'écran, c'est-à-dire zéro, deux, quatre, etc. Pour cela, débarrassons-nous de cette condition ici. Nous pouvons ajouter une autre condition et vérifier si ce nombre est impair en faisant en sorte que le pourcentage soit deux, et cela ne doit pas être égal à zéro. Cela signifie essentiellement que nous divisons le nombre par deux. Par exemple, supposons que nous en sommes à la quatrième itération, ce sera 4/2 et la partie restante sera nulle Cette condition sera de quatre. Si le nombre est cinq, par exemple 5/2, et le reste ne sera pas zéro Cette condition sera vraie, et dans ce cas, lorsque cette condition est vraie, nous voulons continuer notre itération, ce qui signifie que nous ne voulons pas verrouiller ce numéro à l'écran Comme vous pouvez le constater pour le moment, nous avons 0-9. Mais si je définis une instruction continue dans ce cas, vous pouvez voir que nous ne verrouillons que les chiffres zéro, deux, quatre, six et huit à l'écran. 19. Exercice en boucle: Mettons maintenant en pratique ce que vous venez d'apprendre. Vous avez trois exercices à effectuer. La première consiste à imprimer des nombres pairs. Vous devez écrire une boucle qui imprime tous les nombres pairs de 2 à 20, qui signifie que cette boucle doit imprimer deux, quatre, six et tous les autres nombres pairs jusqu'à ce qu'elle atteigne 18 puis 20 Dans le deuxième exercice, vous devez calculer la factorielle d'un nombre à l'aide d'une boucle Vous devez écrire une boucle pour calculer la factorielle d'un nombre donné Si vous ne savez pas ce que signifie une factorielle, il s'agit essentiellement des multiplications de tous les nombres précédents et jusqu'à ce nombre, par exemple, si vous avez une factorielle de cinq, cela est égal à cinq fois quatre fois trois fois deux, et le dernier nombre doit être un, soit 220 Par exemple, s'il s' agissait d'une factorielle de six, nous ajouterions simplement 16 devant celle-ci, ce représenterait six fois la factorielle de cinq Le dernier exercice est le jeu de devinette numérique. Vous devez créer un jeu très simple dans lequel l'utilisateur doit deviner un nombre généré de manière aléatoire, ce qui peut être dans une fonction. Par exemple, vous devez utiliser une boucle pour continuer à demander des suppositions jusqu'à ce qu'il fasse les choses correctement Vous n'êtes pas obligé de résoudre tous ces exercices. Essayez simplement de résoudre chacune d' elles pendant dix à 20 minutes, et si vous ne pouvez pas, revenez chercher la solution. Et si vous le souhaitez, je peux maintenant vous donner quelques conseils sur la façon de résoudre chacun d'entre eux. Pour le premier, vous devez utiliser les quatre types de boucles. Pour le second, vous devez utiliser une boucle de type sauvage, et pour le troisième, vous utiliserez la boucle DWil Vous utiliserez tous les types de boucles que nous venons d'apprendre, et vous pratiquerez également chacune d'elles dans ces exercices. Résolvons ces exercices ensemble et commençons par le premier où nous devons imprimer des nombres pairs à l'écran en utilisant une boucle à quatre boucles. Ce devrait être le plus simple de ces exercices. Il suffit d'utiliser les quatre boucles ordinaires et parcourir les 20 éléments , puis d'imprimer tous les nombres pairs. Nous devons définir notre compteur, qui peut être I égal à zéro, puis nous devons définir la condition, c'est-à-dire jusqu'à ce que I soit inférieur ou égal à 20, car nous voulons également inclure ces 20 dans la liste et c'est pourquoi nous avons moins qu'égal au lieu de moins. Ensuite, nous augmenterons notre compteur I. Ici, si vous enregistrez simplement le compteur I sur console, vous pouvez voir VF 0-20, mais nous voulons exclure celui, par exemple, trois, cinq, etc. Pour cela, nous pouvons ajouter une condition dans notre boucle for, et nous pouvons vérifier si I est un nombre pair en faisant en sorte que signe de pourcentage deux ne soit pas égal à zéro. Cela signifie essentiellement qu' après avoir divisé I par deux, le reste doit être égal à zéro, et c'est la condition d'un nombre pair. Dans ce cas, nous pouvons utiliser l'énoncé continu que nous venons d'apprendre. Cela signifie que chaque fois que cette condition est vraie, nous ignorons cet itercon et nous n' enregistrons pas ce numéro à l'écran sur la console Comme vous pouvez le voir, après cette condition, nous imprimons maintenant zéro, deux , quatre et tous les nombres pairs jusqu'à 20. C'est un exemple de solution pour cet exercice. Mais en fait, il existe un moyen plus simple supprimer cette condition de notre boucle à quatre, et au lieu de faire I égal à zéro puis d' incrémenter I d'un, nous pouvons commencer notre itération à partir de deux parce que nous savons qu'il s' agit du premier nombre pair, puis au lieu d' incrémenter i par un, nous pouvons l'incrémenter de deux à chaque itération, ce qui signifie qu'au lieu de faire I plus un, nous devons faire I plus deux, et pour cela, nous utiliserons I plus égal à deux. Dans ce cas, nous commençons à deux positions et à chaque itération, nous ajoutons simplement deux à ce nombre À la deuxième itération, c'est quatre, la première itération, c'est six et ainsi de suite En faisant cela, vous pouvez voir que nous avons tous les nombres pairs dans la console, ce qui est beaucoup plus facile à comprendre que la solution précédente que nous avons vue. Résolvons maintenant ce deuxième exercice qui consiste à calculer une factorielle d'un nombre Dans ce cas, nous utiliserons une boucle y au lieu de quatre boucles. Vous verrez également celui-ci en action. Cet exemple montre que tous les calculs de nombres factoriels commencent par un, puis nous le multiplions par deux, puis par trois, puis nous le faisons jusqu'à ce que nous atteignions ce nombre, qui est cinq dans ce cas Cela signifie que la factorielle d'un nombre est au moins égale à un, et c'est au cas où nous aurions une factorielle qui serait égale à Nous pouvons initialiser notre factorielle et celle-ci sera égale à un au Nous avons besoin d'une autre variable, qui sera le nombre que nous voulons calculer. Par exemple, cela peut être cinq, six, et c'est le nombre que nous voulons calculer factoriel pour le nommer simplement un nombre et pour l'instant, assignons-le à cinq parce que nous voulons calculer la factorielle de cinq nombres Ici, nous pouvons utiliser une boucle Wil pour parcourir les nombres jusqu'à cinq et les multiplier tous. qui concerne la condition qui se trouvera à l'intérieur de cette boucle i, si vous regardez cet exemple, vous pouvez voir que nous faisons cinq fois quatre fois trois fois deux, puis nous arrêtons la boucle chaque fois que nous atteignons 21. La condition doit être chaque fois ce nombre est supérieur à un. Jusqu'à ce qu'il soit supérieur à un, nous poursuivrons notre itération. Nous allons multiplier cette factorielle par le nombre que nous avons à l'intérieur de cette boucle, ce qui signifie qu'au départ, ce sera cinq fois un et cinq à l'itération suivante . Nous devons la décrémenter et définir ce chiffre deux, quatre, ce qui signifie qu' à la deuxième itération, sera quatre fois le nombre que nous avons dans la factorielle, qui est cinq et qui sera 20, et nous ferons la même étape jusqu'à ce que nous en atteignions un, et c'est là que nous sortirons de cette boucle en y. dessous de ce calcul, nous devons faire un nombre moins égal à un, ce qui signifie que nous décrémentons un à partir de ce Mais si vous vous souvenez du raccourci pour cela, nous pouvons faire un nombre moins moins, ce qui équivaut soustraire un de ce Cela devrait être utilisé pour notre calcul factoriel. Nous pouvons vérifier le résultat en vérifiant la factorielle dans la console. Vous pouvez voir que c'est 120 et c'est ce à quoi il faut s'attendre pour cinq facteurs factoriels Maintenant, si vous voulez calculer les six factorielles, nous allons simplement modifier ces 26 et cela fera 720 ou nous pouvons définir 210 et ce sera la factorielle de dix Pour récapituler ce qui se passe ici, nous initialisons le nombre, qui est cinq, par exemple, puis nous faisons une boucle en I et nous continuons cette boucle jusqu'à ce que le nombre soit supérieur à un Lors de la première itération, nous faisons une fois cinq, soit cinq, et nous l' attribuons au nombre factoriel, puis nous décrémentons le nombre d'un, qui est maintenant fixé À la deuxième itération, nous multiplions notre factorielle, qui est actuellement de cinq par quatre et ce sera 20, puis nous la décrémentons à nouveau, qui est définie par deux ou trois, puis nous faisons la même itération pour deux, puis pour Une fois que nous atteignons un, nous constatons que ce nombre est supérieur à un. Nous faisons notre dernier calcul qui est une fois la factorielle cinq, puis nous décrémentons à nouveau le nombre d'un et maintenant il est mis à zéro, qui signifie que cette contrition n'est plus vraie. Nous sortons de cette boucle de wile et notre factorielle est égale à Passons maintenant au dernier exercice, qui est le jeu des devinettes. Tout d'abord, générons un nombre secret aléatoire de 1 à 100, par exemple Nous allons initialiser cette variable avec le coût car nous savons qu'elle ne sera pas modifiée au cours de ce programme Appelons-le numéro secret. Vous pouvez le coder en dur pour obtenir un nombre, par exemple, mais si vous voulez qu' il soit généré de manière aléatoire, nous pouvons utiliser les fonctions MF que nous avons en JavaScript, et la première sera MF random, une méthode statique qui nous renvoie un nombre flottant et ce nombre sera compris entre zéro et un, ce qui signifie que nous devons le multiplier par 100 Mais comme il peut s'agir d'un nombre flottant, nous devons l'arrondir et pour cela, nous pouvons utiliser l' autre méthode mathématique, appelée MF floor, puis le transmettre à l'intérieur de cette fonction. Maintenant, cela contiendra un numéro de 1 à 100. Ensuite, nous accepterons la variable d'estimation, qui sera le nombre d'estimation. Pour cette dernière, nous allons utiliser une boucle Di afin que vous puissiez également voir les quatre types de boucles en action. Nous allons créer une boucle Di ici, et notre condition devrait être que chaque fois que ce numéro d'invité est égal au numéro secret, ce qui signifie que nous l'avons deviné correctement, nous devrions sortir de ces quatre boucles, sinon, à moins que celui-ci nous devrions sortir de ces quatre boucles, ne soit différent, nous devrions informer l'utilisateur si son numéro d'invité est supérieur ou inférieur au numéro secret Nous allons créer un conditionnel ici avec une instruction E, et nous vérifierons si le nombre d'invités est inférieur au numéro secret. Dans ce cas, nous enregistrerons une valeur trop faible sur la console , par exemple. Sinon, si le nombre d'invités est supérieur au numéro secret, nous vous informerons que le nombre est trop élevé. Et le dernier cas sera chaque fois que ce n'est pas inférieur à un nombre secret et qu'il n'est pas supérieur au nombre secret, ce qui signifie qu'il est égal au numéro secret. Nous devons enregistrer sur console qu'ils ont gagné la partie. Par exemple, nous pouvons nous connecter à la console, félicitations, devinez le numéro Ici, nous avons juste oublié d'ajouter Ls, il s'agit pas d'une instruction se, mais d'une instruction LC. Nous pouvons maintenant essayer cela en assignant un nombre à deviner Par exemple, si vous définissez ce 220, vous pouvez voir qu'il est trop bas. Nous devons maintenant essayer un nombre plus élevé. Par exemple, 60, maintenant c'est trop élevé, puis vous devez continuer à essayer jusqu'à ce que vous deviniez correctement le nombre et que vous voyiez des félicitations, vous devinez le nombre à l'écran Pourquoi utilisons-nous une boucle DWi au lieu d'une boucle i normale. En effet, chaque fois que ce numéro d'invité est égal à un numéro secret, nous ferons toujours une autre itération. Dans la dernière itération, nous allons entrer dans cette déclaration et nous pourrons l' imprimer sur la console Alors que si vous le faites avec une boucle Wile, chaque fois que celui-ci est égal au numéro secret, il sortira de cette boucle C'est pourquoi nous avons utilisé la boucle DWi dans ce 20. Tableaux: Dans la leçon précédente, nous avons appris à utiliser des boucles pour répéter des actions. À présent, explorons une puissante structure de données qui va souvent de pair avec des boucles, et cette structure de données est constituée de tableaux Les tableaux ne sont qu'une collection ordonnée d'objets. Vous pouvez les considérer comme une liste où chaque élément a une position numérotée appelée index. Nous définissons le tableau entre crochets en JavaScript, et ici nous pouvons transmettre les éléments du tableau. Par exemple, il peut s'agir d'un tableau de nombres tels que un, deux, trois, sept, dix, etc. Ensuite, nous stockons généralement ce tableau dans une variable. Nous pouvons définir une variable du tableau de coûts, puis lui attribuer les crochets , puis les éléments du tableau qu'il contient. Ces tableaux peuvent contenir n'importe quel type de données. Par exemple, celui-ci contient des nombres, mais nous pouvons définir un autre tableau et y stocker des chaînes. Par exemple, il peut même s'agir de types de données mixtes, ce qui signifie que nous pouvons stocker plusieurs types de données dans un seul Par exemple, nous pouvons avoir le premier élément sous forme de nombre, mais ensuite le deuxième élément peut être une chaîne, puis nous pouvons avoir une autre valeur booléenne, puis de nouveau une chaîne et ainsi Dans le monde réel, ce n' est pas si courant. Nous stockons généralement le même type de données dans un tableau afin de pouvoir l'utiliser facilement. C'est très utile dans le monde réel. Par exemple, vous pouvez stocker les données utilisateur dans des tableaux. Supposons que vous ayez plusieurs utilisateurs dans votre application, que vous puissiez stocker toutes leurs données dans un tableau, puis effectuer facilement certaines opérations avec celui-ci. Ou vous pouvez avoir une plate-forme de blogs où vous avez des articles de blog et vous pouvez stocker tous ces articles de blog dans un tableau, puis les parcourir en boucle et les afficher à l'écran, etc. Voyons maintenant comment accéder à ces éléments à partir des tableaux Comme je l'ai dit, chaque élément de ce tableau a une position et cette position est appelée index. Cette position en JavaScript part de zéro. Le premier objet sera en position zéro. Le deuxième élément se trouvera à une position. Le troisième sera deux, trois, etc. Par exemple, si vous voulez accéder aux sept de ce premier tableau, écrivez le nom de ce tableau, puis nous ouvrons à nouveau les crochets, et nous passons ici la position de cet élément, et comme vous pouvez le voir, la position de sept est libre. Donc, si nous en passons trois ici, nous accèderons à ce chiffre sept, et pour le vérifier, enregistrons ce nombre sur la console. Vous pouvez voir que si nous faisons une position sans tableau, nous en obtenons sept, et c'est parce que c'est au troisième indice. Par exemple, si vous voulez accéder à dix, nous pouvons en faire quatre, et ce sera le quatrième élément du tableau, soit dix. Et en fait, comme vous pouvez le constater, il s' agit du cinquième élément du tableau. Mais comme nous partons de zéro sur les tableaux, s'agit du quatrième élément par index, mais c'est le cinquième élément du tableau Puisque quatre est le dernier élément, voyons ce qui se passera si nous faisons un tableau puis un index cinq. Vous pouvez voir que nous devenons indéfinis et c'est parce que nous n'avons plus de mémoire dans ce tableau Sur l'index 50, nous n' avons rien enregistré. Cela ne se trouve pas dans la mémoire de ce tableau et c'est pourquoi nous ne sommes pas définis car rien n'est défini à cet index Il existe une propriété utile sur les tableaux, qui nous permet d'identifier le dernier élément, longueur des points du tableau Si je consigne la longueur de ce tableau, vous pouvez voir qu'il est de cinq, ce qui signifie que nous avons cinq éléments à l'intérieur Cela nous indique que le dernier élément doit se trouver sur le quatrième index, et si vous dépassez le quatrième index, nous ne serons pas définis Explorons maintenant les méthodes intégrées travailler avec des tableaux en JavaScript. Nous avons des méthodes communes que nous utilisons souvent lorsque nous travaillons avec des tableaux Par exemple, supposons que nous voulions ajouter un autre élément à l'intérieur de ce tableau à la fin. Disons que nous voulons ajouter le chiffre 12 ici. Nous pouvons utiliser cette méthode push sur ce tableau, et ici nous passons le nombre que nous voulons envoyer à la fin de ce tableau. Et nous pouvons passer 12 ici, par exemple, et maintenant si nous enregistrons ce tableau sur console, vous pouvez voir que nous ajoutons le nombre 12 à la fin de ce tableau De même, nous souhaiterons peut-être dévier le dernier élément de ce tableau Nous pouvons utiliser cette méthode pop sur ce tableau et nous n'avons pas besoin de passer d'arguments ici. Cela supprimera simplement le dernier élément de ce tableau. Au moment de l' appel de cette méthode, le dernier élément est 12. Si nous configurons le tableau de log ici, vous pouvez voir que nous supprimons maintenant ce dernier élément et que nous avons la structure initiale telle que nous l'avions avant. Il s'agit de méthodes courantes pour effectuer des opérations à la fin du tableau. Mais que faire si vous souhaitez supprimer le premier élément de ce tableau ? Pour cela, nous avons une autre méthode appelée shift. Cette méthode supprimera le premier élément de ce tableau et le renverra également. Si vous créez un tableau logar après avoir effectué ce changement, vous pouvez constater que nous avons supprimé le premier élément, qui était un, et que nous en avons maintenant deux, trois, sept et dix à l'intérieur de ce Le contraire du décalage est la méthode du décalage, qui nous permet de placer un nombre au début de ce tableau. Par exemple, je peux appuyer le chiffre 100 au début de ce tableau. Si j'enregistre à nouveau notre tableau sur console, vous pouvez voir que le premier chiffre est 100 et nous l'avons poussé en utilisant cette méthode de décalage. Ce ne sont là que quelques exemples. Il existe de nombreuses autres méthodes que nous pouvons utiliser sur les tableaux et nous en rencontrerons d'autres au fur et à mesure que nous développerons des projets tout au long de ce cours N'oubliez pas que j'ai dit que boucles vont de pair avec les tableaux, et c'est parce que nous voulons généralement parcourir des tableaux et effectuer certaines opérations sur eux Pour cela, voyons comment parcourir des tableaux en boucle. Il existe plusieurs manières de parcourir des tableaux en boucle, et l'exemple le plus simple est d'utiliser quatre boucles Nous pouvons utiliser les quatre boucles traditionnelles et régler le compteur pour qu'il commence à zéro, qui est la position zéro dans le tableau, et ce sera le nombre 100. Dans ce cas, notre condition sera que I soit inférieur à la longueur du tableau. N'oubliez pas que nous avons la propriété length sur les tableaux, qui indique combien de temps nous pouvons parcourir ce tableau jusqu'à ce que nous rencontrions une mémoire indéfinie Jusqu'à ce que cette condition soit vraie, nous incrémenterons notre compteur et nous parcourrons ce tableau dans les quatre boucles Ici, nous pouvons accéder à cet élément du tableau en faisant un tableau, puis à l'intérieur des crochets, nous passerons le I, qui est l'élément actuel. Ce sera zéro au départ, puis ce sera un, deux, trois, puis jusqu'à ce que nous atteignions le cinquième élément, qui sera quatre, puis nous sortirons de cette boucle à quatre. Vous pouvez effectuer n'importe quelle opération ici, mais pour le moment, je vais simplement enregistrer cet élément sur la console pour voir ce que nous avons dans la console. Vous pouvez voir que nous accédons à nos articles un par un. Au début, nous avons 100, puis deux, puis trois, puis sept, puis dix, puis nous sortons de cette boucle à quatre. Une méthode plus concise et lisible consiste à utiliser quatre boucles que j'ai mentionnées dans la leçon précédente. Voici comment utiliser quatre boucles. Nous commençons avec les quatre mêmes mots clés , puis ici nous pouvons accéder à chaque élément de ce tableau un par un en faisant un élément de coût du tableau. Cela signifie essentiellement qu'à chaque itération, nous choisissons un élément de ce tableau Lors de la première itération, ce sera 100. Pour le second, il y en aura deux et ainsi de suite. Si nous enregistrons cet élément sur console ici, nous aurons exactement le même résultat que dans le premier cas. Mais c'est beaucoup plus concis et lisible. Maintenant, évidemment, si vous voulez plus de contrôle, vous devez l'utiliser pour la boucle, car ici vous avez également accès à l'index, dont vous pourriez avoir besoin pour certaines opérations. Mais si vous n'avez pas besoin d' accéder à cet index, c'est une méthode plus lisible et plus courte que la première. Nous avons un autre moyen de faire des boucles sur des tableaux, en utilisant la méthode du forage Nous pouvons accéder à cette méthode de forage sur n'importe quel tableau en effectuant un forage par points, et ici nous devons transmettre une fonction qui sera exécutée sur chaque élément du tableau et cette fonction prend un argument, qui est l'élément de ce tableau. À chaque itération, cela sera modifié et réglé sur l'élément suivant Pour l'instant, nous pouvons à nouveau enregistrer cet élément sur console et vous verrez que nous obtenons les mêmes éléments dans l'ordre. À chaque itération, cette fonction est appelée avec un nouvel élément Cela commence par le premier élément, qui est à indice zéro, puis nous passons progressivement au dernier élément. Fach se concentre sur l' exécution d'une action sur chaque élément sans créer nouveau tableau. D'autre part, les options quatre et quatre offrent un meilleur contrôle sur la boucle et vous permettent d'interrompre ou poursuivre l' itération si nécessaire 21. Exercice de tableaux: Faites un petit exercice simple avec des tableaux avant de passer à autre Dans cet exercice , nous devons d'abord créer un tableau appelé villes, qui contiendra cinq noms de villes différents . Ensuite, vous devez utiliser la console pour afficher la deuxième ville du tableau. Ensuite, vous devez ajouter une nouvelle ville à la fin de ce tableau, et dans la quatrième étape, vous devez supprimer la première ville de ce tableau. Enfin, nous devons afficher les éléments mis à jour de ce tableau un par un dans la console. Allez-y, essayez par vous-même , puis revenez pour cette solution. Résolvons ce problème en effectuant les étapes une par une. Tout d'abord, initialisons un tableau de villes Ici, nous avons juste besoin de cinq noms de villes aléatoires Je vais juste copier-coller quelques noms de villes ici. Ensuite, nous devons enregistrer la deuxième ville de cette liste et pour la sélectionner, nous devons utiliser les villes puis les crochets. Ici, nous devons passer l'index de la deuxième ville, qui est Londres si nous passons par ici, sélectionnera Paris et c'est parce que le premier élément est à l'indice zéro Le deuxième élément est à l'index 1 et le troisième à l'index deux. C'est pourquoi nous devrons utiliser le premier index ici pour pouvoir accéder à la deuxième ville. Ensuite, si vous vous souvenez de la méthode qui ajoute un élément à la fin du tableau, c'est la méthode push. Nous devons utiliser la méthode push sur notre tableau de villes et ajouter une autre ville à la fin de cette liste, par exemple Berlin. Maintenant, si nous enregistrons les villes sur console, vous pouvez voir que nous avons notre tableau initial et qu'à la fin, nous avons la dernière ville que nous venons d'ajouter. Et pour supprimer la première ville du tableau, voici une autre méthode dont nous venons de parler, à savoir la méthode shift. Si nous faisons le décalage par points des villes, cela supprimera le premier élément, et maintenant si je consulte les villes, nous pouvons voir que le premier élément, New York, a été retiré de ce tableau, et maintenant nous n'avons que les éléments du premier au dernier index. Enfin, pour afficher ces éléments un par un, nous devons les parcourir en boucle et nous pouvons utiliser l'une des trois boucles que nous venons de voir. Dans ce cas, je choisirai d'en utiliser quatre hors boucle. Nous allons commencer par les quatre mots clés ici nous allons prendre un élément par itération. Nous allons faire Cost City of cities. Il ne nous reste plus qu'à enregistrer chaque élément la console en utilisant Console Log City. Cela imprimera chaque ville par itération. Lors de la première édition, ce sera Londres. Dans le second, ce sera Paris, et ainsi de suite jusqu'à ce que nous atteignions la dernière ville de notre éventail de villes. 22. Objets: Découvrez une autre structure de données puissante en JavaScript , à savoir les objets. Les objets sont des ensembles de paires clé-valeur. Vous pouvez les considérer comme des dictionnaires, où chaque clé, comme un mot dans un dictionnaire, est associée à une valeur, comme une définition dans le dictionnaire clés situées ici sont généralement des chaînes dans l'objet, mais les valeurs peuvent être de n'importe quel type de données, y compris les objets, les tableaux, les fonctions et tous les types de données que vous connaissez, ce qui nous permet de créer complexes et imbriquées Les objets sont parfaits pour représenter des entités du monde réel ou pour regrouper des données connexes. Découvrez comment créer des objets en JavaScript. Nous pouvons utiliser des littéraux d'objets ou des accolades pour définir la structure de l'objet, puis nous la stockons généralement dans Supposons que nous définissions une ampoule variable et que nous l' assignions à cet objet. Et à l'intérieur de l'objet, nous avons les paires clé-valeur dont nous avons parlé. Un exemple de clé ici peut être Ison qui indique si cette ampoule est allumée ou éteinte devant elle, nous définissons la valeur, qui peut être n'importe quel type de données. Dans ce cas, il peut s'agir de Bullion. Par exemple, cela peut être faux. Nous pouvons utiliser un autre exemple de paire clé-valeur. Par exemple, nous pouvons définir la couleur, et maintenant nous pouvons utiliser une chaîne. Par exemple, nous pouvons le définir en jaune. Et comme je l'ai mentionné, nous pouvons également utiliser des structures de données complexes telles que des objets et des tableaux, et nous pouvons les imbriquer dans cet objet Et nous pouvons également utiliser des fonctions, et les fonctions à l'intérieur des objets sont appelées méthodes, mais ce ne sont que des fonctions ordinaires qui exécutent notre code. Par exemple, nous pouvons définir ici une méthode appelée toggle, et il peut s'agir d'une méthode qui active et désactive cette propriété Ici, nous pouvons l'attribuer à une fonction, puis nous pouvons écrire le code qui sera exécuté lorsque cette fonction de bascule sera appelée Ici, l'objet peut utiliser ses propres propriétés en utilisant le mot clé dis et nous reviendrons sur ce mot clé d dans un instant. Mais pour l'instant, vous pouvez voir que nous pouvons accéder à toutes les propriétés auxquelles cet objet a accès. Nous pouvons prendre la propriété eon et lui attribuer l'inverse de cette propriété eon, ce qui signifie que si elle est définie sur false, elle sera désormais définie sur true et si elle est vraie, elle sera définie sur false après avoir appelé cette fonction togal C'est ainsi que vous pouvez créer des objets. Voyons maintenant comment accéder aux propriétés de cet objet. Utilisez deux méthodes principales pour accéder aux propriétés d'un objet. La première consiste à utiliser la notation par points. Pour utiliser la notation par points, vous devez écrire le nom de cet objet, puis vous utilisez la notation par points. Et ici, vous pouvez voir que nous pouvons sélectionner toutes les propriétés ou méthodes qui existent sur cette classe. Par exemple, nous pouvons sélectionner la propriété Ion, et nous pouvons enregistrer les points sur console pour voir ce qu'elle contient ici. peux voir que c'est faux pour le moment, et si nous appelions la méthode toggle que nous venons de définir ? Enregistrons le point de l' ampoule. Comme ceci, nous accédons simplement à la méthode, mais nous devons également l'appeler, ce qui signifie que nous devons l'appeler comme une fonction normale Et comme cette fonction ne renvoie rien, nous voyons juste undefined ici Mais si nous indiquons qu'un journal se trouve sur la ligne suivante, vous pouvez voir qu' il est désormais défini sur true C'est ainsi que vous pouvez accéder aux propriétés d'un objet et également appeler les méthodes qui modifieront les propriétés de cet objet. Il existe une deuxième méthode pour accéder aux propriétés d'un objet, qui consiste à utiliser la notation entre crochets. Au lieu de l'appeler comme cette ampoule puis point Ion, nous pouvons accéder ici au fait qu'il s' agit d'une propriété, mais en utilisant la notation entre crochets. Mais généralement, vous utiliserez cette notation par points lorsque vous connaissez le nom de la propriété à l'avance et qu'il s'agit d'un identifiant Javascript valide car il est plus concis et plus facile à lire. Mais la notation entre crochets a également ses cas d'utilisation. Cela peut être utilisé lorsque le nom de la propriété est stocké dans une variable ou qu'il contient des caractères spéciaux Il est également utile pour accéder dynamiquement à ces propriétés. Supposons que cette clé de couleur soit stockée dans une variable, appelée couleur de l' ampoule, et qu'elle soit définie sur couleur. Dans ce cas, vous pouvez utiliser la notation entre crochets pour y accéder en utilisant la variable dont vous disposez. Si nous consolons ce journal, vous pouvez voir que nous obtenons cette couleur à partir de l'objet de l' ampoule. Enfin, voyons comment ajouter et modifier les propriétés d'un objet. Vous pouvez ajouter des propriétés à cet objet ou modifier les liaisons existantes en utilisant la notation par points ou entre crochets. Vous pouvez utiliser l' objet que vous avez, puis, à l'aide de la notation par points, vous pouvez ajouter une nouvelle propriété. Et ici, vous pouvez lui attribuer une valeur. Par exemple, cela peut être quelque chose comme du lingot, de la ficelle ou autre chose. Vous pouvez également modifier les propriétés existantes. Par exemple, si vous souhaitez modifier la couleur de cette ampoule, vous pouvez lui attribuer une nouvelle valeur et taper ici le nom de la nouvelle valeur. 23. ce mot-clé: Revenez à ce mot clé que nous avons vu dans la leçon précédente. En Javascript, ce mot clé ressemble un peu à un caméléon. Il change de sens en fonction de la manière dont vous l'utilisez et de l' endroit où vous l'utilisez. Cela peut être considéré comme une référence à l'objet qui possède ou appelle cette fonction. Par exemple, dans ce cas, nous l'utilisons à l'intérieur de la bascule et cette bascule appartient à l'ampoule Cela signifie qu'il s' agit de cette classe d' ampoules. Regardons un autre exemple. Supposons que nous ayons mon compte, qui est un compte bancaire et que vous avez le solde, c' est-à-dire le montant d'argent que vous avez sur ce compte bancaire. Vous avez le dépôt qui permet de déposer de l'argent sur ce compte bancaire, et vous avez également une méthode Trow qui retire de l'argent de votre Ainsi, lorsqu'une fonction telle que le dépôt est définie dans cette classe, vous pouvez utiliser ce mot clé dans cette fonction, et cela fera référence à cet objet, qui est mon compte. C'est ce qui permet à ces méthodes d' accéder aux propriétés de l' objet et de les manipuler. Par exemple, ici, vous pouvez accéder au solde, qui est ce solde ici et vous pouvez y ajouter de l'argent et vous pouvez également l'enregistrer en utilisant ce mot clé. même, dans la fonction vitro, nous accédons également au solde, qui est le même que celui que nous avons sur mon compte. De cette façon, nous nous assurons que les méthodes de dépôt et de tirage utilisent le même attribut de solde, qui est la propriété du solde de la classe de comptes May. Juste pour vérifier, si vous regardez le compte de mai, vous pouvez voir que le solde initial est de 1 000. Nous pouvons effectuer un dépôt par points et y ajouter de l'argent, par exemple 500. Maintenant, si vous regardez ce compte de mai, vous pouvez voir que le solde est 1 500 dollars et que nous pouvons également en retirer de l'argent de la même manière. Nous pouvons en retirer 200 et si vous consultez à nouveau Mon compte, vous constaterez que le même solde a été soustrait et qu'il est maintenant de 1 300 C'est ce à quoi cela fait référence dans les méthodes. Voyons maintenant à quoi cela fait référence dans le contexte mondial. Si vous appelez une telle fonction n'importe où en dehors de l'objet, ce qui signifie qu'elle se trouve dans une portée globale, cela fera alors référence à l'objet global, qui est généralement la fenêtre des navigateurs. Il existe également un troisième cas, celui de ce mot clé dans les fonctions de flèche. Pour comprendre cela, commençons par comprendre ce que sont les fonctions de flèche. Jusqu'à présent, nous avons utilisé les fonctions régulières en JavaScript, qui sont définies comme ceci. Supposons qu'il s'agisse d'une fonction de dépôt. C'était la structure. Vous définiriez une fonction en JavaScript. Mais dans le Javascript moderne, nous avons une autre façon de définir une fonction, c'est-à-dire en utilisant les fonctions fléchées. Semblable à la fonction ci-dessus, nous pouvons définir une autre fonction de dépôt. Juste dans ce cas, nous l' attribuerons un peu différemment, il sera donc attribué comme ceci. Mais fondamentalement, cette fonction et ces fonctions sont exactement les mêmes, et la seule différence est leur définition. La première est une déclaration régulière d' une fonction et la seconde est une déclaration d' une fonction flèche. Vous pouvez écrire le même corps dans les deux fonctions de dépôt, mais celle-ci présente certaines différences majeures par rapport aux fonctions traditionnelles notamment leur comportement avec ce mot clé. Par exemple, si nous avons un autre objet où nous avons des propriétés puis deux méthodes la première méthode est une fonction traditionnelle, qui est définie comme ceci et la deuxième méthode est cette fonction flèche, qui est définie comme ceci. La fonction flèche n'aura pas sa propre liaison , ce qui signifie qu' elle hérite de cette valeur de la portée de fermeture environnante dans laquelle elle est définie Et pour comprendre cela sur un exemple, si vous appelez une fonction traditionnelle comme celle-ci, sans y accéder depuis cet objet, vous aurez ceci, qui fera référence à l'objet global, et il en sera de même pour la fonction flèche. Si vous y accédez sans y accéder via cet objet, cela fera référence à l'objet global, qui est à nouveau la fenêtre si vous les utilisez comme méthodes d'un objet, si vous appelez la fonction traditionnelle sur cet objet mon objet, cela fera référence à mon objet et vous aurez accès à toutes les propriétés de cet objet. Mais d'un autre côté, si vous utilisez la méthode des flèches ici, qui est la fonction des flèches définie ici et maintenant, nous y accédons via cet objet MY. Dans ce cas, cela fera toujours référence à l'objet global, et non à mon objet, ce qui signifie que vous n' aurez pas accès au nom et aux autres propriétés de cet objet. C'est la principale différence entre la flèche et la fonction traditionnelle. Il vous suffit de choisir celui qui correspond à votre scénario. Par exemple, si vous souhaitez avoir accès aux propriétés de cet objet, vous devez utiliser une fonction normale, sinon une fonction étroite. Mais même si vous utilisez les méthodes de flèche, vous pouvez toujours en définir explicitement la valeur lors de l'appel d'une fonction, et ce lors de l'appel d'une fonction , en utilisant les méthodes call, apply et bind dans le Javascript. Je vais laisser cette ressource utile en dessous de cette leçon, qui, je pense, explique parfaitement la différence entre call, apply et bind et quand utiliser chacune d'entre elles. Mais pour récapituler, nous avons vu que ce comportement dépend de la façon dont la fonction est appelée et que dans les méthodes, cela fait référence à l'objet Mais si vous l'utilisez dans le contexte global, cela fait référence à l'objet global, qui est une fenêtre en JavaScript. Et cela varie également selon que vous utilisez la fonction traditionnelle ou les flèche, car les fonctions de flèche héritent de leur portée environnante Et nous avons également les méthodes Coal Apply et Bind en JavaScript, qui vous permettent d'en contrôler la valeur. Et si vous souhaitez le modifier pour qu'il pointe vers autre chose, vous pouvez le faire en utilisant ces méthodes intégrées. 24. Opérateurs de déstructuration, de répartition et de repos: Structuring, spread et rest sont des opérateurs en Javascript très utiles lorsque vous travaillez avec des objets et des tableaux Commençons par la déstructuration, qui nous fournit un moyen pratique d'extraire des valeurs d' objets et de tableaux et de les affecter à Supposons que nous ayons cet objet, une personne, qui a un nom, un âge et également des propriétés urbaines. Maintenant que nous voulons accéder à ses propriétés, disons que nous voulons accéder au nom du point de la personne, nous pouvons y accéder avec cette notation par points que nous avons apprise dans la leçon précédente, puis nous pouvons peut-être accéder à une autre propriété telle que H sur cette personne. Mais si vous devez le répéter plusieurs fois dans notre code, disons que nous allons utiliser la même propriété de nom dans tout notre code à plusieurs reprises Il est préférable de l'attribuer à une variable puis de la réutiliser et nous pouvons le faire en lui affectant une variable Mais il existe une meilleure façon de le faire et c'est avec la structuration Cette structuration, vous pouvez utiliser accolades sur le côté gauche pour spécifier les propriétés à spécifier les propriétés extraire et sur le côté droit, vous pouvez spécifier l'objet, vous pouvez spécifier l'objet, qui peut être Maintenant, entre ces crochets, nous pouvons spécifier les noms des variables sur la gauche, et cela doit correspondre aux noms des propriétés de l'objet, qui signifie que si vous souhaitez attribuer une variable à la propriété name, devez la nommer en tant que nom car c'est ce que nous avons également chez la personne. Et si nous voulons extraire la propriété He, nous devons également nommer la variable H. Cela doit correspondre exactement au H que nous avons dans la personne. Ce faisant, nous déstructurons maintenant le nom et lui de cette personne, et nous les attribuons à variables que nous pouvons utiliser dans tout notre code Maintenant, si nous enregistrons par contre le nom et H, vous pouvez voir que le nom est stocké dans la variable name et que le He est également stocké dans la variable He. Cette déstructuration fonctionne également sur les tableaux. Supposons que nous ayons cet exemple de tableau ici. Nous pouvons également extraire des éléments de ce tableau et les affecter à des variables. La façon la plus simple de le faire est d'assigner une variable à ce fruit, disons le premier fruit, et nous pouvons lui attribuer des fruits dont zéro, qui est le premier élément, et c'est-à-dire le fruit de pomme dans lequel et c'est-à-dire le fruit de pomme vous pouvez faire la même chose avec la déstructuration Nous pouvons attribuer des crochets sur le côté gauche et le nom du tableau sur le côté droit. Ici, contrairement à l'objet, le nom n'est pas très important. Comme vous l'avez vu ici, nous devons le nommer pour qu'il corresponde exactement à la propriété que nous avons dans l'objet. Mais ici, nous pouvons le nommer comme bon nous semble. Nous pouvons dire premier fruit ici, par exemple, et nous pouvons dire deuxième fruit pour le second. Cela permettra d' extraire la pomme et de la stocker à l'intérieur du premier fruit. Cela extraira la banane et elle sera stockée à l'intérieur de la deuxième variable. Nous pouvons le vérifier en enregistrant le premier et le second par Coso enregistrant le premier et le second Vous pouvez voir qu'il y a de la pomme dans le premier et de la banane dans le second . Maintenant, le second cas est utile lorsque vous n'avez pas trop d' éléments dans le tableau. Habituellement, lorsque vous avez deux, deux ou trois éléments dans le tableau, vous pouvez utiliser la méthode de déstructuration pour déstructurer les éléments de ce Examinons les opérateurs spread et rest, qui utilisent tous deux les points libres comme celui-ci. Ils utilisent la même syntaxe, mais ils ont des objectifs différents selon le contexte dans lequel nous les utilisons. Supposons que nous ayons cet exemple d'objet, qui contient les valeurs par défaut pour les produits, telles que la couleur et la taille Si vous n'attribuez rien, il sera bleu et la taille sera moyenne. Nous voulons maintenant créer un objet de produit et définir les valeurs par défaut si elles ne sont pas attribuées, et nous voulons également y ajouter d'autres propriétés. Dans ce cas, utilisez l'opérateur de spread pour copier toutes ces valeurs dans le produit et ajouter des propriétés supplémentaires. Et nous le faisons en utilisant les points libres , puis en spécifiant le nom de l'objet que nous voulons diffuser ici, qui est le nom par défaut Et après cela, nous pouvons commencer à y ajouter d'autres propriétés. Nous pouvons fixer le prix à dix, et nous pouvons définir le nom comme t-shirt et ainsi de suite. Ce que cela fait, si nous enregistrons le produit ici sur console, vous pouvez voir que le prix et le nom qui nous ont été assignés sont indiqués à la fin de cet objet, mais que nous avons également la couleur et la taille, qui ont été établies à partir de ces valeurs par défaut, ce qui signifie que nous avons essentiellement copié ces propriétés et que nous les avons collées ici C'est donc exactement l'équivalent de l'utilisation de l'opérateur de spread. Mais nous le faisons avec trois points et en utilisant les valeurs par défaut, car il peut s'agir d'un objet plus gros et nous ne voulons pas copier et coller manuellement toutes les propriétés ici Nous le faisons donc en utilisant l'opérateur de spread. L'opérateur de propagation fonctionne également sur les tableaux. Par exemple, si nous avons un tableau de nombres, nous voulons maintenant créer un autre tableau, qui contiendra tous les éléments de ce premier tableau, plus quelques éléments supplémentaires. Nous pouvons créer une autre variable. Nommons cela d'autres chiffres. Et ici, si nous voulons avoir les mêmes éléments plus les quatre et cinquième éléments supplémentaires, nous pouvons utiliser l' opérateur de propagation sur ce tableau. Et au lieu de copier-coller ceci, nous pouvons utiliser l' opérateur de propagation et étaler les nombres du premier tableau à l'intérieur de ce second tableau Maintenant, si nous enregistrons ce plus de chiffres sur console, vous pouvez voir que nous avons ces quatrième et cinquième éléments supplémentaires ainsi que les éléments originaux que nous avions dans le tableau des nombres. C'est ainsi que vous pouvez les utiliser sur des objets et également sur des tableaux Mais qu'en est-il de l'opérateur de repos, qui ressemble exactement à l'opérateur de spread ? L'opérateur Rest est utilisé dans les paramètres des fonctions. Supposons que nous ayons une fonction et cette fois nous utilisions une fonction flèche. Appelons cette fonction sum, qui sera chargée de faire la somme des nombres que vous fournissez dans l'argument Ici, nous aurons les arguments, puis ensuite, nous aurons le corps fonctionnel. Si nous connaissons les nombres que nous aurons, disons que nous n' aurons que deux arguments ici, A et B, nous pouvons renvoyer A plus B dans ce cas. Mais que se passe-t-il si nous ne savons pas combien d'arguments nous aurons et que nous voulons que cela fonctionne de manière dynamique ? Dans ce cas, nous pouvons utiliser l'opérateur de propagation ici, ce qui signifie que nous allons répartir les nombres que nous obtenons comme arguments à l'intérieur du corps, nous pouvons d'abord définir le total, qui sera la somme totale de ces nombres et initialement, ce sera zéro. Nous pouvons parcourir ces nombres en utilisant la méthode for each. Pour chaque nombre ici, nous allons augmenter le total en faisant le total plus égal au nombre, qui sera l'argument fourni, puis nous pouvons essentiellement renvoyer le total, qui sera la somme de tous ces nombres. Cela signifie que nous pouvons désormais les utiliser de différentes manières. Nous pouvons en utiliser certains pour deux nombres, comme un et deux, et enregistrons la console. peux voir que pour ces deux nombres, il renvoie la somme qui est libre, mais maintenant nous pouvons fournir des arguments supplémentaires comme nous ne pouvons pas le faire . Il calculera également la somme de celui-ci et elle sera de six et nous pouvons continuer à ajouter autant de nombres ici que nous le voulons. Je vais simplement prendre tous ces chiffres ici , puis nous pourrons effectuer certaines opérations avec eux. C'est ainsi que nous utilisons l' opérateur rest sur les fonctions. 25. Exercices: Faisons un petit exercice pour appliquer les opérateurs de déstructuration de spread et de repos abord, vous devez créer un objet qui représentera un étudiant avec ces propriétés, son nom, son âge, son niveau et ses matières préférées , sous forme de tableau. Ensuite, vous devez utiliser la déstructuration pour préciser ces propriétés, à savoir les propriétés de nom et de grade de cet objet en variables Ensuite, créez un nouvel objet, qui représentera un autre étudiant. Ici, vous devez utiliser l'opérateur de propagation pour copier certaines propriétés du premier étudiant et en ajouter de nouvelles pour le deuxième étudiant. Enfin, vous devez écrire une fonction qui prend un nombre variable d'arguments, utilise l'opérateur rest et calcule leur moyenne Essayez-le vous-même, puis revenez chercher la solution. Résolvons ce problème en partant du premier point, qui consiste simplement à créer un objet qui représentera un étudiant. Nous allons créer un nouvel objet. Appelons-le « étudiant ». Et ici, nous devons ajouter les attributs du nom, assignons-le à John. Nous devons définir la propriété He pour l'étudiant ainsi que l'attribut grade, qui sera la note maximale de dix. Disons que celui-ci est un dix. Et nous devons également définir les matières préférées de cet étudiant. Et cela devrait être un éventail de sujets. Par exemple, le premier peut être mathématique, le second peut être scientifique et ainsi de suite. Après l'avoir créé, nous devons utiliser la structuration pour extraire propriétés du nom et du grade dans des variables Bien sûr, nous pouvons y accéder en utilisant le nom du point de l'étudiant, mais nous utiliserons cette structure ici Nous allons donc faire le coût, la première variable sera le nom. Et n'oubliez pas que cela doit être exactement le même que celui que nous avons dans l'objet étudiant. Il sera donc nommé comme nom et le second sera nommé comme grade, et nous les déstructurerons à partir de l'objet étudiant Maintenant, si nous enregistrons le nom et le grade sur console juste pour vérifier, vous pouvez voir que nous avons John et que pour le grade, nous en avons dix. Avant de passer au suivant, utilisons également la déstructuration sur les tableaux Nous voyons que nous avons ici les sujets de prédilection. Essayons maintenant de le déstructurer en utilisant le tableau. Tout d'abord, nous allons le déstructurer à partir de cet objet en faisant des sujets favoris ici Nous devons maintenant déstructurer les sujets individuels que nous avons dans ce tableau Nous pouvons le faire en utilisant la déstructuration du tableau cette fois. Ici, nous pouvons attribuer le premier sujet et le second le deuxième sujet, et nous pouvons attribuer ces deux sujets favoris. Ainsi, si nous enregistrons le premier et le deuxième sujet sur console , vous pouvez voir que nous avons compris les mathématiques et les sciences, et cette fois, nous utilisons la déstructuration des tableaux pour déstructurer ces propriétés Créons ensuite un nouvel objet qui représentera le deuxième étudiant. Ici, nous utiliserons l'opérateur de propagation pour copier certaines des propriétés, et nous en ajouterons une nouvelle pour créer un nouvel étudiant. Nommons cet étudiant deux. Supposons que cet étudiant ait les mêmes intérêts les matières préférées et qu'il ait également la même note , soit dix, mais le nom et l'âge seront différents. Pour cela, nous pouvons utiliser ici l'opérateur de spread. Tout d'abord, nous allons diffuser le nom de l'étudiant, qui est l'objet étudiant, mais nous allons remplacer les propriétés du nom et de l'âge Pour le nom, nous pouvons le définir comme Emilly et pour l'âge, nous pouvons le définir comme étant 17 pour le moment Maintenant, si vous enregistrez les deux étudiants sur console, nous pouvons voir que la note et les matières préférées proviennent du premier étudiant car nous utilisons l'opérateur de propagation mais le nom et l'âge sont remplacés et ils sont fournis par le deuxième objet étudiant Enfin, écrivons une fonction qui prend un nombre variable d'arguments et qui utilise l'opérateur rest pour calculer leurs moyennes. Utilisons une fonction normale cette fois, nommons-la comme « calculer des moyennes » ou « calculer des moyennes Et ici, comme nous ne connaissons pas le nombre d'arguments que nous recevrons, nous devons à nouveau utiliser l'opérateur rest. Nous allons donc faire des nombres de repos, qui seront les arguments numériques que nous recevrons dans cette fonction de calcul de la moyenne. Et ici, nous avons essentiellement un tableau de nombres, et nous devons calculer leurs moyennes dans cette fonction Nous pouvons le calculer en faisant certains de tous les nombres, puis en le divisant par la longueur de ces nombres. Supposons que nous ayons dix nombres, nous puissions les additionner que nous puissions les additionner, puis les diviser par dix, puis nous obtiendrons la moyenne et la renverrons à partir de cette fonction. Définissons d'abord le total, qui sera la somme totale de ces nombres et qui sera initialement égal à zéro. Ensuite, nous devons passer revue ces nombres ici, réutilisons les quatre chacun. Passons en revue les nombres en utilisant quatre chacun et à chaque itération, nous obtiendrons le nombre dont nous avons juste besoin pour augmenter la somme totale Nous allons faire la somme totale plus égale au nombre que nous avons dans la boucle. À la fin de ces quatre boucles, nous aurons la somme totale de tous les nombres. Ici, nous pouvons simplement renvoyer la somme totale divisée par la longueur des nombres, laquelle nous pouvons accéder en faisant la longueur totale des nombres. Essayons de voir si cela fonctionne. Faisons le journal de la console. Calculez la fonction moyenne. Et c'est ici que nous pouvons fournir les arguments. Nous pouvons donc faire un, six, huit, zéro, et le total sera de 3,75 Et c'est parce que si nous additionnons tout cela, ce sera 15. Et si nous faisons le 15/4, nous obtiendrons 3,75 Voilà pour ces exercices, et j'espère que vous avez pu les résoudre vous-même. Et sinon, ne vous inquiétez pas, car vous deviendrez bon dans ce domaine une fois que vous aurez commencé à le faire de plus en plus. 26. Types de référence primitifs et de référence: Javascript, tous les types de données peuvent être classés en deux catégories fondamentales. Ce sont les types primitifs que nous avons déjà appris ainsi que les types de référence, qui sont les objets, les tableaux et les fonctions Les types primitifs sont ceux que nous connaissions déjà, comme les nombres ou les chaînes, lingots qui sont des valeurs vraies ou fausses, la valeur nulle, qui est nulle en Javascript et aussi les valeurs indéfinies qui ne le sont Mais en dehors de cela, nous avons également les types de référence, et ce sont des objets, des tableaux et aussi des fonctions Ils sont appelés types de référence en Javascript, il existe une distinction essentielle entre les types de référence en Javascript et les types primitifs en Javascript. C'est ainsi que ces types sont attribués et copiés dans la mémoire. Commençons par les types primitifs. Lorsque vous attribuez une valeur primitive à une variable, disons que vous avez une variable X et que vous assignez un type primitif tel que le chiffre cinq, une copie de cette valeur est créée et stockée dans l'emplacement mémoire de la variable. Si vous attribuez une autre valeur primitive, disons Y, et que vous lui attribuez la même valeur que X, une autre copie est créée pour cette variable Y et elle est stockée dans la mémoire. Maintenant, si nous essayons de changer le X et que nous le fixons à dix, et si nous enregistrons constamment ces deux valeurs, le X et le Y, vous pouvez voir que pour X, nous en avons dix parce que nous venons de le réaffecter, mais pour Y, nous en avons toujours cinq parce que nous avons créé une copie à ce stade et Y est toujours attribué à cinq et il n'a pas été réaffecté à dix comme X. Là où les chats sont différents, c' est pour les types de référence Supposons que nous ayons un objet appelé object one, cet objet possède un seul nom de propriété et que pour celui-ci, il est défini sur une liste. Lorsque vous assignez un objet à une variable, la variable stocke une adresse mémoire de référence pour cet objet et plusieurs variables peuvent faire référence au même objet, ce qui signifie que si nous créons un autre objet, nommons-le comme objet deux et nous l'assignons comme étant le même que l'objet un. Dans ce cas, contrairement à l'exemple ci-dessus, aucune nouvelle mémoire n'est créée. Il pointe essentiellement vers le même objet que celui que nous avons ici pour l'objet 1. Consignons les deux dans la console. Consignons l' objet 1 et l'objet 2 sur la console. Vous pouvez voir que pour l'instant, nous avons à leurs deux noms Alice, et disons maintenant que nous voulons changer le nom de l'objet et que nous voulons le définir comme étant Bob. Si nous le changeons en Bob, vous pouvez voir que leurs deux noms ont été modifiés non seulement pour l'objet deux, mais également pour l'objet un. En effet, ces deux objets, le premier et le second, pointent vers le même objet dans la mémoire, et lorsque nous modifions une propriété sur l'un d'entre eux, nous la changeons également pour le second. Il est important de le savoir, car si vous souhaitez modifier uniquement le nom du deuxième objet, nous recevrons des erreurs inattendues dans notre programme. Dans ce cas, vous devez créer une copie de cet objet, ce qui signifie qu' il sera copié dans une autre mémoire de notre programme. Disons que nous créons un nouvel objet, appelons-le sans objet. Nous pouvons déstructurer l'objet ici, ce qui signifie que nous avons créé un nouvel objet et nous déstructurons les propriétés ici, mais nous ne lui avons pas assigné la même mémoire que celle de l'objet Si nous procédons de cette façon, nous pouvons maintenant changer le nom libre de l' objet et lui attribuer quelque chose de nouveau, comme un nouveau nom. Consignons-le sur console ici, près de l'objet deux. Je peux voir que pour l'objet un et l'objet deux, nous utilisons la même mémoire et leurs deux noms sont identiques. Mais pour ce qui est de l'objet libre, nous avons ce nouveau nom et nous n'avons pas modifié les anciens noms du premier objet. Il est important de le comprendre car dans votre programme, vous pouvez avoir des scénarios dans lesquels vous devez utiliser le même objet Dans ce cas, vous pouvez l'utiliser ainsi et vous économiserez également vous devez utiliser le même objet. Dans ce cas, vous pouvez l'utiliser ainsi et vous économiserez également de la mémoire car vous utilisez le même objet pour deux variables. Mais dans certains cas, vous devrez peut-être copier l'objet, mais également ajouter des propriétés supplémentaires sans modifier la première. Dans ce cas, vous devez utiliser quelque chose comme déstructuration et créer une nouvelle copie de cet objet, qui signifie qu'il sera copié dans un nouvel emplacement mémoire de votre programme Et il en va de même pour les tableaux et les fonctions. Supposons que nous ayons un tableau composé de numéros 1 à 3, puis que nous attribuons au deuxième tableau le même que le premier tableau. Vous pouvez les voir dans la console ici. Si vous souhaitez ajouter un quatrième élément dans le deuxième tableau et que nous lui attribuons la valeur quatre, vous pouvez voir que le tableau un a également été modifié, et c'est parce que nous utilisons ces mêmes mémoires pour le tableau un et pour le tableau deux. Et si vous ne voulez pas que cela se produise, vous pouvez toujours utiliser la déstructuration, mais dans des tableaux, et vous pouvez déstructurer le premier Et dans ce cas, vous en aurez un, deux, trois dans le premier tableau, mais un, deux, trois, et aussi le quatrième élément dans le second, c'est également important lorsque vous travaillez avec des fonctions. Supposons que vous ayez une fonction qui modifie la valeur du nombre que vous fournissez et que nous ayons ici un seul argument, qui est un nombre. À titre d'exemple simple, supposons que cela change le nombre et le place à 210. Lorsque vous transmettez une valeur primitive telle qu'un nombre à une fonction, la fonction reçoit une copie de cette valeur et les modifications apportées ici sont apportées au sein de cette fonction et n'affectent pas la variable globale. Cela signifie que nous avons une variable numéro un ici et que nous lui attribuons 25 et que nous la passons maintenant à cette valeur de modification qui change cette valeur numéro un et la définit 210. Après cette opération, nous enregistrons ce numéro un sur console. Nous voyons qu'il est toujours de cinq et qu'il n'a pas été modifié et nous l'avons mis à dix. Et c'est parce que cette opération se déroule à l'intérieur du corps fonctionnel, et il a reçu une copie de ce numéro. Ce chiffre n'est donc pas exactement le même que le numéro un. Et lorsque nous apportons des modifications ici, nous le faisons sur une copie de ce numéro et non sur le même numéro que celui que nous avons ici. Mais ces changements lorsque nous utilisons types de référence à l'intérieur d'une fonction, créons une autre fonction et celle-ci sera chargée de changer le nom d'un objet personnel. Ici, une fois que nous aurons reçu l'objet person, nous modifierons la propriété du nom et nous le définirons comme Bob, peu importe ce qu'il était initialement. Dans ce cas, lorsque vous transmettez un objet, c'est-à-dire un type de référence à une fonction, il ne reçoit pas la copie de cette fonction. Au lieu de cela, il reçoit la même fonction dans la mémoire. Donc, tout ce que vous modifiez ici, vous changez et modifiez également l'objet que vous avez reçu. Pour le démontrer, créons une nouvelle variable. Appelons cette personne « une ». Et ici, nous allons définir une seule propriété qui est le nom et définissons-la sur lis. Maintenant, si nous appelons cette fonction, changeons de nom et nous en transmettons un à notre personne. Je vais recevoir cette personne ici et elle changera le nom et le définira comme Bob. Si nous continuons à enregistrer la personne après cette opération, vous pouvez voir que le nom a été modifié et qu'il a été défini sur Bob Il est important de comprendre pourquoi , si vous ne souhaitez pas modifier cet objet personnel que vous avez transmis à cette fonction, vous devez créer une copie de cet objet. Et ici, dans le corps de la fonction avant d'effectuer cette opération, vous pouvez copier cet objet, disons, copie de la personne, et vous pouvez copier cette personne en refaisant cette structuration et accédant à tous les attributs de cette personne Et maintenant, au lieu de modifier le nom de la personne, vous pouvez modifier la copie du nom de la personne. Et dans ce cas, vous aurez toujours le même nom sur la personne ou l'objet que vous avez ici. Cela vous permettra d' éviter les bugs inattendus. Lorsque vous modifiez un objet référencé par plusieurs variables, ces modifications seront visibles dans chacune d'entre elles. Comprendre cela peut également vous aider à gérer efficacement la mémoire. Vous savez maintenant que les types primitifs sont stockés directement tandis que les types de référence utilisent des adresses mémoire, ce qui a un impact sur la façon dont votre code utilise la mémoire en JavaScript 27. Portée et fermetures: Dans la dernière partie de ce module, nous allons parler de ce champ d'application en Javascript. En Javascript, le champ d'application définit l'accessibilité et la durée de vie des variables au sein des différentes parties de votre code. Vous pouvez les considérer comme un ensemble de règles qui déterminent où vous pouvez voir et utiliser ces variables. Le premier type de portée est la portée globale en JavaScript. Les variables déclarées en dehors d'une fonction ou d' un bloc ont une portée globale par défaut, ce qui signifie qu' elles sont accessibles n'importe où dans votre code. Par exemple, si nous définissons une variable globale, nommons-la variable globale et nous l'assignons à n'importe quoi. Supposons qu'il s'agisse d'une variable globale. Nous pouvons accéder à cette variable depuis n'importe où dans notre code. Par exemple, si vous avez une fonction, appelons-la ma fonction. Ici, nous avons accès à cette variable globale. Si nous enregistrons cette variable ici de manière causale et appelons cette fonction sous la déclaration, vous pouvez voir que nous y avons accès et que nous pouvons voir la valeur de cette variable globale à l'intérieur d'une fonction. Nous avons également accès à cette variable globale partir de la portée globale, évidemment. Si nous enregistrons cette variable globale sur console, nous y avons également accès depuis la portée globale et depuis n'importe où Si vous définissez également une instruction NIF et que nous faisons une partie du conditionnel, nous avons également accès à cette variable globale ici et depuis n'importe où dans notre code Ensuite, après le globoscope, nous avons la portée locale, et les variables déclarées dans une fonction ont une portée locale Ils ne sont accessibles que dans le cadre de cette fonction. Créons une autre fonction, et nommons-la simplement fonction. Ici, si nous définissons une autre variable, la nommons variable locale, et que nous lui attribuons une valeur locale. Nous avons accès à cette variable locale partir d'ici, dans le corps de la fonction. Si vous configurez la variable locale et que nous avons appelé cette fonction par la suite, vous pouvez voir que nous avons accès à cette variable, mais nous n'y avons pas accès depuis l'extérieur de cette J'essaie d'accéder à cette variable depuis l'extérieur de la fonction, vous pouvez voir que nous obtenons une erreur indiquant que la variable locale n' est pas définie, et c'est parce que dans la portée globale, nous n'avons pas défié cette variable locale et elle n'est définie que dans la portée locale de cette fonction et nous pouvons y accéder à l'intérieur de la fonction, mais nous ne pouvons pas y accéder en dehors de cette fonction. Enfin, nous avons la portée du bloc en JavaScript, variables déclarées avec les mots clés let ou const dans un bloc, et les moyennes des blocs dans les instructions E ou quatre boucles ou tout autre type d' accolade ont la portée du bloc, et elles ne sont accessibles que dans ce bloc spécifique Par exemple, si nous avons une instruction E, et que nous avons maintenant certaines conditions , disons simplement si elle est vraie, ce qui signifie qu'elle sera toujours vraie. Nous pouvons définir une variable de portée de bloc ici. Tout ce que vous définissez ici avec des mots clés de retard ou de coût est une variable de bloc. Si nous attribuons une valeur à cette variable, disons à une variable de bloc, vous ne pouvez accéder à cette variable qu'à l'intérieur de cette instruction if. Vous ne pouvez pas y accéder en dehors de cette déclaration. Si nous enregistrons cette variable sur console ici, vous pouvez voir que nous y avons accès. Mais si nous essayons de créer le même journal de console en dehors de cette instruction, nous obtiendrons une erreur indiquant que variable de bloc n'est pas définie. Et encore une chose que j'aimerais mentionner à propos de la portée locale. Supposons que plusieurs fonctions soient imbriquées les unes dans les autres. Ici, disons que vous avez la fonction deux imbriquée dans la fonction un, et que vous avez également la fonction f, qui est imbriquée dans la fonction Dans le corps libre de la fonction, vous pouvez accéder à toutes les variables définies dans la fonction f, qui est la variable locale free, et vous avez également accès à toutes les variables à l'intérieur de la fonction deux, qui dans ce cas est la variable locale deux, et vous avez également accès à la variable locale un, qui se trouve à l'intérieur de la fonction un. De là, vous avez accès à toutes les fonctions situées au-dessus de cette fonction. Mais vous n'avez pas accès à la variable locale trois, par exemple, à partir de cette fonction deux. À partir de là, vous n' avez accès qu'aux variables locales deux et un et à partir de la fonction un, vous n'avez accès qu'à cette première variable, et vous n'avez accès à aucune autre variable imbriquée dans cette fonction Pour vérifier cela, nous pouvons appeler la fonction free ici et également la fonction 2 ici. Comme vous pouvez le voir, nous avons l'accès local gratuit, local deux et les variables locales ici. Mais si nous essayons d'y accéder ici dans le corps de la fonction two, vous pouvez voir que la variable locale free n'est pas définie. Donc, si vous le supprimez, nous n'avons accès qu'à ces deux variables ici. Et si nous essayons de faire de même dans la fonction 1, vous pouvez voir que la variable locale deux n'est pas définie, nous devons donc nous en débarrasser et ici nous n'avons accès qu' à cette première variable. Les étendues internes peuvent accéder aux variables depuis les étendues externes, mais pas l'inverse, ce qui signifie que la fonction peut accéder aux variables globales ainsi qu'à toutes les fonctions ci-dessus, et que le bloc peut accéder aux variables à partir de sa fonction englobante ou de sa De plus, les variables portant le même nom peuvent exister dans différentes étendues sans conflit Supposons que nous n'ayons pas de variable X et qu'elle soit affectée à dix. Nous pouvons avoir ici une fonction qui fait la somme de certains nombres. Nous pouvons créer une autre variable, mais nous pouvons la nommer de la même manière. Cela peut être X et cela peut être égal à 20. Ici, si nous enregistrons ce X sur console et que nous appelons cette fonction ici, vous pouvez voir qu'à l'intérieur de cette fonction de somme, la variable X fait référence à cette variable, qui est affectée à 20. Mais si nous enregistrons ce X en dehors de cette fonction sur la console, dans ce cas, cela fait référence à cette variable X, qui est définie sur t. C'est ce qu'on appelle ombrage où la variable de portée interne, qui est ce X dans notre cas, l' ombre à la variable externe dans son bloc. Et il est important de comprendre le champ d'application, car cela vous aide à organiser votre code en conservant les variables contenues dans leurs sections pertinentes. Cela empêchera également les collisions de noms accidentelles entre des variables dans différentes parties de votre code, ce qui est également utile pour la gestion de la mémoire. variables dont la portée est limitée sont automatiquement nettoyées déchets collectés lorsqu'elles ne sont plus nécessaires, et les déchets collectés lorsqu'elles ne sont plus nécessaires, ce qui permet de libérer de la mémoire dans votre programme. 28. Introduction au DOM et à l'application Quiz: Bienvenue dans la section dôme de notre cours de Javascript, qui signifie modèle d'objet de document. Dans ce module, nous allons créer ensemble ce questionnaire simple, et au fil de chaque leçon, nous apprendrons de nouveaux concepts de dôme et les appliquerons directement dans cette application. Ce sera donc un quiz avec des réponses à choix multiples, et vous verrez ce noyau à la fin du quiz, et vous verrez également les mauvaises réponses. Vous verrez donc votre réponse ainsi que la bonne réponse ci-dessous. Et voici un aperçu de haut niveau de ce que nous allons apprendre dans ces leçons. Dans cette leçon, nous allons d'abord apprendre ce qu'est le modèle d'objet du document et quels sont les nœuds, les éléments et les attributs dom. Ensuite, nous allons apprendre comment sélectionner des éléments du dom avec des méthodes telles que les sélecteurs de requêtes ou les sélecteurs d'éléments Après les avoir sélectionnés, nous apprendrons comment manipuler le contenu du texte à l'intérieur de ces éléments et comment mettre à jour les attributs tels que les noms de classes ou les styles. Ensuite, vous apprendrez à gérer les événements des utilisateurs à l'écran et nous apprendrons à associer des auditeurs d' événements à notre application de quiz pour écouter les événements et invoquer des fonctions. Nous apprendrons également les types d'événements invoquer des fonctions. Nous apprendrons courants tels que le clic de souris, le survol de la souris, l'envoi ou la touche Enfin, nous allons apprendre comment créer un nouvel élément de dôme à l'aide JavaScript et comment ajouter cet élément à d'autres éléments de dôme Commençons ce module en comprenant ce qu'est le dôme ou le modèle d'objet du document. Lorsqu'une page Web est chargée, le navigateur crée un modèle d' objet de document à partir de cette page et ce modèle de dôme eStaml est construit sous la forme d'une arborescence d' Le dôme est comme un plan de la structure Edmo que nous avons dans la page Web et il permet JavaScript d'accéder au contenu, à la structure et aux styles et de les modifier de manière Le document se compose d'un élément racine, qui est l'élément enveloppe HTML Ensuite, si vous vous souvenez de l'intérieur de l'élément HTML, nous avons également l'élément head puis l'élément body. De même, chacun de ces éléments peut avoir des enfants, comme le corps peut avoir un enfant bouton et il peut aussi avoir H un enfant. Nous appelons ces objets des éléments du modèle de dôme. Et puis à l'intérieur de chaque élément, vous pouvez également avoir un contenu textuel. Par exemple, à l'intérieur du H, vous pouvez avoir un quiz Javascript à l'intérieur du bouton, vous pouvez avoir le texte d' envoi, etc. De plus, chaque élément peut également avoir des attributs. Par exemple, vous pouvez associer un identifiant à ce bouton, ou vous pouvez associer un nom de classe ou des styles, appelés attributs dans le modèle Dom. Avec ce modèle d'objet, JavaScript obtient toute la puissance dont il a besoin pour créer du HTML dynamique, ce qui signifie que JavaScript peut modifier tous les éléments HTML, les attributs, les styles CSS et tout ce que vous voyez dans ce modèle dom Nous pouvons tout modifier ici avec JavaScript. Si vous imaginez notre Quizap, si nous voulons afficher des questions à choix multiples, nous pouvons utiliser le dôme avec JavaScript pour effectuer ces modifications en temps réel sans avoir à recharger cette Lorsque je sélectionne l'une des options et que je clique sur Soumettre la réponse, cette page ne s'actualise pas et nous modifions simplement les éléments que nous avons à l'intérieur de ce dôme. Pour suivre, vous pouvez télécharger le code QuizaTrter dans la Ce sera un fichier Zip et une fois que vous décompressé et ouvert dans votre éditeur de code, vous verrez ces trois fichiers et l'un d'eux est l'index HTML, qui contient le contenu de notre Quizap, la structure est Nous avons un conteneur div à l'intérieur du corps, puis nous avons cette balise d'en-tête. côté du conteneur de questions, nous insérerons la question dans ce paragraphe et nous insérerons également les choix à l'intérieur de cet élément Tiv Ensuite, nous avons un bouton pour soumettre la réponse et à la fin, nous avons ce résultat Tiv qui, comme vous pouvez le voir, est vide, ne montrera rien tant que nous ne voulons pas montrer quelque chose à l'intérieur et nous allons contrôler cela en utilisant JavaScript En bas, vous pouvez voir que le fichier JavaScript est joint avec une balise de script. Si vous entrez dans ce script JS, pour le moment, il ne contient que les données du quiz, qui sont un tableau d'objets et chacun des objets est l'une des questions. Pour chaque objet, nous avons une propriété question qui contient la chaîne de la question. Ensuite, nous avons des choix, qui sont un tableau de choix et chacun des choix est une chaîne. Ensuite, nous avons également la propriété de réponse correcte, qui indique l'indice de la bonne réponse. Cela signifie que si la bonne réponse est une ici, c'est l'indice de la bonne réponse dans les choix, qui est 22 ou ici lorsque la bonne réponse est zéro, c'est le premier élément à l'intérieur des choix. Téléchargez le fichier zip à partir la description de cette leçon pour suivre. Dans la leçon suivante, nous allons commencer par sélectionner ces éléments dans le Javascript et nous allons commencer à élaborer notre quiz. 29. Sélectionner des éléments DOM: Maintenant que nous en connaissons les bases et que nous avons notre quiz A Starter, voyons comment sélectionner ces éléments dans le code HTML de notre fichier JavaScript. Pour commencer, exécutons-le avec un serveur live. Et comme vous pouvez le constater, les choix ne sont pas affichés ici. C'est parce que nous n'avons pas encore sélectionné ces éléments à l'écran ces éléments à l'écran et que nous ne les avons pas renseignés. Voyons comment les sélectionner. En gros, nous devons sélectionner tous les éléments d'ici, qui sont vides car nous devons insérer des valeurs à l'intérieur de ces éléments. Voici le paragraphe de question ici, le D avec l'identifiant des choix. J'aurai également besoin de ce bouton plus tard pour écouter les événements de soumission et aussi les résultats où nous renseignerons le résultat du quiz Pour ce faire, nous allons utiliser la méthode get element by ID. Nous l'avons déjà constaté lors de la création de notre calculateur en ligne. Mais revenons-y et voyons comment nous utilisons cette méthode. Si vous vous souvenez de la leçon précédente, nous avons le document en haut, qui nous permet de sélectionner les éléments dans le dôme de cet objet de document Nous avons une méthode appelée get element by ID. Cette méthode n'accepte qu'un seul argument, savoir l'ID de l'élément, qui est une chaîne que nous essayons de sélectionner. Et si vous regardez notre fichier HTML, vous pouvez voir que nous avons des attributs ID sur chacun de ces éléments. Donc, si vous souhaitez sélectionner le paragraphe, nous allons simplement transmettre cet identifiant de question ici, et cela devrait sélectionner cet élément, et nous devons également le stocker dans une variable. Et il est courant de l' appeler comme nom de cet élément et d'ajouter un élément à la fin, qui indique qu'il s'agit d'un élément en forme de dôme. Certains le raccourcissent également et l' appellent question L. Mais je pense qu'il vaut mieux avoir le nom complet et que vous ne gagnez pas beaucoup d'espace en supprimant cette dernière partie Il est donc préférable d'avoir le nom complet ici. Journalisons cet élément sur console pour voir si vous l'avez vraiment sélectionné. Si nous l'enregistrons et ouvrons la console dans le navigateur, vous pouvez voir que nous avons effectivement sélectionné ce paragraphe qui est actuellement vide. Vous pouvez le voir à l'écran, mais nous y avons désormais accès dans notre fichier JavaScript. Cette méthode d'analyse élément par identifiant est idéale pour sélectionner un seul élément avec un identifiant unique, mais nous devons parfois sélectionner des éléments en fonction attributs tels que des classes ou des sélecteurs CSS plus complexes L'autre option que nous avons est le sélecteur de requête. Nous avons également une méthode de sélection de requête sur cet objet de document, qui vous permet de sélectionner n'importe quel élément à l'aide de sélecteurs de style CSS Par exemple, vous pouvez sélectionner des éléments en leur identifiant, de leur classe ou d'un exemple de balise . Si vous souhaitez sélectionner l'élément qui a la question d'identification, nous le spécifierons comme ceci, comment nous allons le faire dans le CSS, mais maintenant nous le sélectionnons au lieu du fichier JavaScript Et si nous l'enregistrons, vous pouvez voir que nous avons toujours sélectionné le même paragraphe, et cela sélectionnera le premier élément ayant l'ID de question, ce qui vous permettra également de sélectionner par d'autres requêtes. Par exemple, nous pouvons sélectionner par nom de classe. Vous pouvez voir si nous avons un conteneur de noms de classes, et c'est le DV ici Nous pouvons revenir ici et au lieu de sélectionner Par ID, nous pouvons sélectionner par nom de classe un conteneur. Cela devrait nous donner le conteneur DV que nous avons dans notre fichier HTML Et si nous voulons sélectionner plusieurs éléments comme tous les éléments qui ont la question d'identification ? Dans ce cas, nous avons une autre méthode, appelée query selector all, utile lorsque vous devez sélectionner plusieurs éléments Par exemple, si nous l' enregistrons ainsi, cela nous renverra une liste de nœuds, qui sera un tableau d'éléments. Maintenant, qui sera un tableau d'éléments. Maintenant, nous pouvons parcourir ces éléments de question en boucle, et nous devrons créer ces éléments au lieu d'éléments Il s'agira de plusieurs éléments, et nous pouvons utiliser quatre boucles pour les parcourir en boucle puis effectuer certaines opérations avec eux. Et le dernier sélecteur courant consiste à obtenir les éléments par nom de classe Nous avons une méthode pour cela, obtenir les éléments par nom de classe. Ici, au lieu de transmettre un identifiant, vous transmettez le nom de la classe. Par exemple, si vous souhaitez sélectionner ce conteneur, nous allons simplement transmettre le nom de la classe de conteneur ici. Ici, vous pouvez voir que nous avons sélectionné le DIV, qui porte le nom de classe d'un conteneur. Et si nous l'ouvrons, c' est le conteneur DIV que nous avons dans notre quiz Ap. Et ce sont toutes les méthodes que nous pouvons utiliser pour sélectionner les éléments du dôme. Maintenant, avec cela, vous pouvez effectuer un petit exercice. Vous devez sélectionner tous les éléments à partir d'ici, comme le paragraphe, le DIV, ce bouton et également ce DIV. Vous pouvez donc essayer de sélectionner tous ces éléments puis de les stocker dans une variable. Sinon, faisons-le ensemble. Comprenez d'abord quelle méthode nous allons utiliser. Vous pouvez voir que nous pouvons les sélectionner par nom de classe, par requête ou par ID d'élément. Et si vous regardez notre fichier HDML, vous pouvez voir que tous les éléments que nous devons sélectionner ont des identifiants Dans notre cas, nous utiliserons donc la méthode get element by ID. Et ici, pour sélectionner l'élément de question, nous allons transmettre l'identifiant de la question. Ensuite, nous devons sélectionner les choix que nous avons sous la question, qui a l'idée de choix. Nous allons donc créer une nouvelle variable. Cela s'appellera l'élément Choices. Et encore une fois, nous utiliserons le même document qui obtient élément par ID, et ici nous allons sélectionner par Choices ID. Répliquons cela deux fois de plus. Le troisième élément sera ce bouton, qui est le bouton de soumission. Et il est également courant de l' appeler bouton d'envoi, comme une version abrégée du bouton d'envoi. Mais encore une fois, j'aime les conserver sous forme de noms complets, alors gardons le bouton de soumission. Et ici, l'identifiant doit être un bouton de soumission. Et pour le dernier élément, ce sera le résultat si nous voulons renseigner le résultat d'un quiz, et nous devons le sélectionner en sélectionnant l'identifiant du résultat Renommons également la variable en élément de résultat. Avant d'aller plus loin, il est bon de vérifier que nous avons sélectionné les bons éléments. La console enregistre tous ces éléments, tels que l'élément question, l'élément choix, le bouton d' envoi et l' élément résultat. Sauvegardons ça. Vous pouvez voir que nous obtenons tous les éléments de la console. Par exemple, si nous avons commis une erreur, comme nous avons mal orthographié le résultat ici, vous verrez la valeur nulle pour l'un des éléments, ce qui signifie qu' il n'a pas été possible de sélectionner l'élément. C'est ainsi que vous saurez que vous avez commis une erreur, puis vous reviendrez vérifier les identifiants 30. Créer et manipuler des éléments DOM: Dans cette leçon, nous allons apprendre comment manipuler les éléments que nous avons sélectionnés dans le dôme. Commençons par charger ces questions sur les données du quiz l'écran, ainsi que les choix qui les accompagnent. Commençons par petites étapes en affichant uniquement la première question à l'écran. Pour cela, nous devons créer une fonction ci-dessous et appeler cette fonction une question de chargement. Chaque fois que nous appelons cette fonction, nous voulons que les questions apparaissent sur l'écran situé au-dessus de ce bouton d'envoi. Pour cela, sélectionnons le premier élément parmi les données de ce quiz, qui sera l'indice zéro des données du quiz. Donnons à cette variable le nom de première question, et cela sera égal à zéro pour les données du quiz, qui seront la première question à partir de là. Et à partir de là, nous devons afficher la question ainsi que les choix à l'écran. Et si vous vous souvenez comment nous procédons à la déstructuration à partir d'un objet, nous pouvons déstructurer ces propriétés ici, mais souvenez-vous que cela doit être exactement mais souvenez-vous que cela doit être exactement la même que celle que nous avons dans l' La première sera donc une question et la deuxième propriété, des choix. Nous avons ensuite sélectionné la question et les choix à partir des données du quiz et nous voulons maintenant renseigner cette question dans cet élément de question Si vous vous souvenez du fichier HTML d'index, l'élément de question est ce paragraphe de question. Nous voulons essentiellement copier cette question d' ici et la coller dans ce paragraphe. Si nous l'enregistrons, vous verrez que nous avons ce résultat. Nous voulons obtenir le même résultat, mais en utilisant JavaScript. Pour ce faire à partir de JavaScript, nous avons également des propriétés utiles sur ces éléments. Chaque élément que nous sélectionnons possède également des propriétés auxquelles nous pouvons accéder. Par exemple, notre élément de question en tant que propriété appelée contenu textuel, et c'est le contenu que nous avons à l'intérieur de ce paragraphe. Actuellement, il est vide et nous voulons maintenant le remplir avec la question Tout ce que nous avons à faire est de simplement attribuer cette question à la question que nous obtenons à partir des données de ce quiz. Il suffit d'appeler cette fonction ci-dessous ici. Appelons cette fonction de chargement des questions. Vous pouvez voir que ce contenu textuel a été rempli. Si vous cliquez avec le bouton droit de la souris et inspectez ce paragraphe, vous pouvez voir qu'il s'agit exactement du même paragraphe Maintenant, nous avons inséré du contenu . Maintenant, nous avons inséré du contenu à l'intérieur de celui-ci et nous avons simplement rempli la question à l'intérieur de cette balise de paragraphe. Pour cela, nous devons également renseigner les choix dans l'élément des choix Et nous voulons que chacun de ces choix soit un bouton permettant à l'utilisateur de cliquer sur ce bouton, qui contient ce texte, et ce sera son choix. Et une fois qu'ils auront soumis la réponse ici, nous la sélectionnerons parmi les choix. Et pour ce faire, nous devons insérer un bouton à l'intérieur de l'élément de choix, et l' élément de choix est ce téléviseur. Si nous partons du code HTML, nous voulons avoir quelques boutons ici. Contiendra les choix. Par exemple, pour cette question, nous voulons avoir quatre puis 22, puis un autre nombre, et si nous l'enregistrons, nous voulons avoir de tels boutons, mais encore une fois, nous voulons le faire en les créant dynamiquement à partir de JavaScript au lieu de les coder en dur ici dans le DV Tout d'abord, enregistrons les choix sur console pour voir ce que nous avons à l'intérieur. Vous pouvez voir qu'il s'agit d'un tableau de choix où chaque élément est le choix que nous devons renseigner à l'intérieur du bouton Cela signifie que nous devons passer en revue le premier. Nous allons donc utiliser la méthode for each pour parcourir ces choix. Et pour chaque choix, nous voulons effectuer quelques opérations pour insérer dans les choix T. Tout d'abord, nous devons créer un bouton pour chaque choix. Et cet objet de document nous permet non seulement de sélectionner des éléments, mais aussi de créer des éléments, et c'est ce que nous allons faire ici. Nous utiliserons la méthode document point create element, et cette méthode accepte le déplacement des éléments que nous voulons créer Par exemple, si nous voulons créer un paragraphe, nous passerons le tag DP ici. Mais comme nous voulons créer un bouton, nous allons passer le tag du bouton ici. Stockons cela dans une variable de bouton et enregistrons ce bouton pour voir si nous en avons vraiment créé un dans notre code HTML En effet, quatre boutons ont été créés à la suite de cette itération. Maintenant, ces boutons sont simplement créés, mais ils ne sont pas attachés à ces éléments. Comme vous pouvez le voir, nous avons nos éléments HTML, qui sont le dôme que nous avons. Si vous essayez de les trouver n'importe où ici, vous ne pourrez pas les trouver, car nous ne faisons que les créer, mais nous ne les avons attachés à aucun élément. Il ne suffit donc pas de créer ces boutons. Nous devons également les joindre, et nous devons les attacher à l'élément de choix, qui est le DIV. Pour cela, nous avons une autre méthode utile sur les éléments si nous accédons à l'élément des choix ici. Sur ce point, nous avons la méthode appendhild, et cet enfant d'ajout accepte un nœud, qui est un nœud HTML, et c'est ce bouton. Par exemple, nous pouvons lui transmettre n'importe quel nœud HTML, et cela l'ajoutera simplement, ce qui signifie que cela insérera ces boutons dans ce DIF en tant qu' Nous pouvons donc passer ce bouton ici. Si nous l'enregistrons, d'abord, vous pouvez également voir visuellement que nous avons ces boutons. Mais si nous allons dans les éléments et trouvons l'élément de choix, qui se trouve à l'intérieur du conteneur de questions, c'est le div que nous avons sélectionné ici avec cette ligne de code, nous ajoutons ces boutons à cet élément de choix Si vous développez le dif, vous pouvez voir que quatre boutons sont renseignés à l'intérieur de ces choix Enfin, il suffit de modifier le contenu du texte de ce bouton car il est actuellement vide et nous allons procéder de la même manière que pour la question. Il suffit de sélectionner cet élément de bouton et d'attribuer le contenu textuel de ce bouton comme choix, c' est-à-dire le choix à l'intérieur du tableau. Chacun de ces choix sera l'un de ces choix à l'intérieur de ce tableau de choix. Et si nous l'enregistrons, nous avons maintenant tous les choix renseignés à l'intérieur des boutons, et nous avons également la question à l'intérieur du paragraphe. 31. Gestion d'événements: Que nous avons chargé nos questions et nos choix dans notre dôme. Nous pouvons rendre notre application interactive. Dans cette leçon, nous allons permettre aux utilisateurs sélectionner chacun de ces choix en cliquant sur un bouton. Et pour ce faire, nous devons associer un écouteur d'événements à chacun de ces boutons de choix Allons-y et mettons à jour notre fonction de chargement de questions. Lorsque nous sélectionnons des éléments dans notre JavaScript Dm, nous avons également accès à certaines propriétés. Comme vous l'avez vu, par exemple, ici, nous pouvons ajouter des enfants à cet élément, et nous pouvons faire beaucoup de choses, sauf celle-ci Par exemple, nous pouvons attacher un écouteur d' événements. Dans ce cas, nous devons attacher un écouteur d'événements à ce bouton, qui correspond à chacun de ces choix ici Pour ce faire, nous pouvons accéder au point du bouton sur l'écouteur d'événements, qui est une méthode qui existe sur n'importe lequel de ces éléments Le premier argument ici est le type de l'événement, qui peut être un clic et une touche enfoncée ou un survol souris et tout autre événement que nous avons en Pour l'instant, restons-en au clic car c'est ce dont nous avons besoin ici. Et le deuxième argument est l'écouteur, qui est juste une fonction qui sera appelée chaque fois que ce clic est géré Ici, fournissons simplement une fonction flèche et enregistrons l' événement sur console pour voir si nous avons vraiment appelé cette fonction. Maintenant, si nous revenons à notre quiz Javascript, si nous cliquons sur l'un de ces choix, vous verrez l'événement enregistré dans la console. Si je clique sur celui-ci, vous verrez que l'événement a été appelé à nouveau. Chaque fois que vous cliquez sur l'un d'entre eux, cette fonction est invoquée et pour le moment, la console enregistre simplement l'événement. Mais c'est ici que nous allons écrire une fonction pour gérer ces clics et pour la marquer comme sélectionnée. Cela, créons une fonction qui gérera cette sélection et appelons ce choix de sélection car c'est elle qui sera chargée de sélectionner ce choix lorsque nous cliquerons sur ce bouton. Ici, au lieu d' appeler Console Log, nous devons appeler cette méthode, qui est Select choice. Maintenant, dans ce choix de sélection, nous devons marquer ce bouton comme sélectionné, et nous pouvons le faire, par exemple, en y ajoutant un nom de classe et en marquant l' arrière-plan en bleu. J'ai déjà préparé un style ici pour vous, et c'est ce cours sélectionné par points. Si nous appliquons ce point sélectionné, notre couleur de fond deviendra bleue et cela indiquera que ce bouton est sélectionné. Ici, nous devons d'abord sélectionner les enfants de notre élément de choix. Si nous inspectons ici, vous pouvez voir que ce voleur a le choix, et nous devons sélectionner les enfants qui sont ces boutons Et pour cela, nous pouvons accéder à ces éléments de choix, et nous avons une propriété spéciale pour cela, appelée enfants. Enregistrons-le dans la console pour voir si nous sélectionnons les boutons ici. Si je clique sur l'un d'entre eux, vous pouvez voir que nous l' avons dans le journal, qui est la collection HTML de ces boutons. Ici, par exemple, nous pouvons sélectionner le premier, qui est à indice zéro, et si je le sauvegarde et que nous cliquons ici, vous pouvez voir que nous avons sélectionné le premier, qui est la valeur de quatre. Nous pouvons maintenant accéder à la liste des classes de cet élément et nous pouvons y accéder en faisant une liste de classes par points, qui nous fournit la liste des classes de cet élément et nous pouvons ajouter un nom de classe ici, et ce nom de classe sera celui que nous avons sélectionné dans ce style. Si j'écris sélectionné ici, nous sélectionnons le premier élément et nous ajoutons un nom de classe sélectionné, qui le marquera en bleu. Sauvegardons ceci et essayons-le. Je clique sur ce premier élément, vous pouvez voir que l'arrière-plan a été changé en bleu, ce qui signifie qu'il est maintenant sélectionné. Mais c'est évidemment codé en dur. Si j'essaie de sélectionner le troisième, il sélectionne à nouveau le premier. C'est parce que nous avons ici cet indice zéro, qui est codé en dur et qui doit être appliqué dynamiquement en fonction de celui que nous avons sélectionné. Pour ce faire, nous devons transmettre cet index ici à partir de cette question de chargement et pour pouvoir accéder à l'index ici, nous devrons le convertir pour chacun en quatre boucles régulières afin pouvoir également avoir l'index et fournir ici dans le choix de sélection. Mais en réalité, il existe un deuxième argument pour chaque méthode. J'essaie de fournir un deuxième argument, vous pouvez voir qu'il s' agit en fait de l'index, qui signifie que nous pouvons également accéder l'index à l'intérieur d' une boucle à quatre, qui est le deuxième argument. Donc, si je fournis le deuxième argument ici, celui-ci est l'indice, et celui-ci est la valeur, ce qui signifie que celui-ci est zéro, un, deux, trois, et que ce choix est le quatre, 22, etc. C'est la valeur. En utilisant cet index, nous pouvons le transmettre au choix de sélection ici, et nous devons évidemment l'accepter ici dans cette fonction de choix de sélection. Maintenant, au lieu de fournir ce zéro sous forme de valeur codée en dur, nous pouvons fournir l'index . Cela fonctionnera manière dynamique. Nous pouvons le vérifier en cliquant sur le troisième élément ici, exemple, ou si vous cliquez sur le premier élément ou si vous cliquez sur celui sur lequel vous cliquez est sélectionné et l'arrière-plan passe en bleu. Un dernier problème que nous devons résoudre ici, vous pouvez voir que chaque fois que nous cliquons dessus puis si nous cliquons sur celle-ci, la dernière option reste sélectionnée, et nous devons l'effacer après avoir sélectionné une autre option. Pour ce faire, avant d'appliquer ce style à l'élément sélectionné, nous pouvons effacer le nom de classe sélectionné de tous ces boutons. Ici, nous devons examiner les enfants de ces choix, et nous devons supprimer le nom de classe sélectionné de chacun d'entre eux avant d'ajouter celui-ci à l'élément sélectionné. abord, nous devons le convertir en tableau car il s'agit actuellement d'une collection HTML, et nous pouvons le faire en utilisant l' opérateur de propagation et en le répartissant dans un tableau. Et en faisant cela, nous pouvons maintenant le parcourir en utilisant for each. Et pour chacun des boutons que nous avons, nous supprimerons le nom de la classe, de la même manière que nous l'avons fait pour celui-ci. Nous pouvons accéder à la liste des classes de chacun de ces boutons, et au lieu d'en ajouter, nous pouvons maintenant supprimer le nom de classe, et nous supprimerons le nom de classe sélectionné de tous ces boutons avant appliquer à l'élément sélectionné. Cela permettra donc aux utilisateurs de sélectionner une réponse et de la surligner. Maintenant, si nous essayons de sélectionner le premier élément et nous essayons de sélectionner le troisième élément, vous pouvez voir qu'il a été supprimé du premier élément et qu'il n'est appliqué qu' au troisième. Et si nous sélectionnons une autre option, elle la supprime de la troisième et l'applique à la seconde. Et avant de conclure, laissez-moi vous montrer d'autres types d'événements que vous pouvez utiliser. Par exemple, nous avons utilisé ici un clic, mais nous pouvons également utiliser un événement mouseover Et si je l'enregistre comme ça, maintenant, chaque fois que vous passez votre souris sur l'un d'entre eux, il sera automatiquement sélectionné Il s'agit de l'événement mouseover. Peut également avoir, par exemple, la saisie à la souris. C'est à chaque fois que votre souris entre dans cet élément, et cela aura un effet similaire à celui d'un survol de la souris. Et comme vous pouvez le constater, de nombreux types d'événements peuvent se produire ici. Par exemple, vous pouvez contrôler la pression sur la touche ou la touche vers le bas. C'est donc chaque fois que l'utilisateur a appuyé sur une touche. Par exemple, nous pouvons associer un écouteur d'événements au troisième corps du document, qui est la balise body que nous avons dans l'index HTML Et ici, nous pouvons ajouter un écouteur d'événements. Et cette fois, définissons le type de clé vers le bas. Et ici, si vous le remarquez, il est indiqué que nous pouvons accéder à l'événement sur cet écouteur, et cela nous indiquera quelle touche a été enfoncée et les autres données nécessaires Ici, nous pouvons accéder à cet événement, et consultons-le simplement pour le consigner chaque fois que vous appuyez sur la touche du clavier. Maintenant, si vous allez sur notre site Web et que vous appuyez sur n'importe quelle touche, vous pouvez voir que cet événement a été convoqué. Et ici, vous avez un tas d'attributs, et ceux qui vous intéresseront sont la clé. Par exemple, j'ai appuyé sur la touche D, et c'est ce que nous avons obtenu dans l'événement. Vous avez également l'horodatage du moment où cette touche a été enfoncée, etc. Si je clique sur une autre touche, vous pouvez voir que cet écouteur d'événements est appelé sur n'importe quelle touche enfoncée et que vous obtenez la touche qui a été enfoncée et toutes les autres données nécessaires C'est juste bon à savoir au cas où vous auriez besoin de noter des événements ou tout autre type d'événement. Mais pour notre application de quiz, l'événement principal sur lequel nous allons nous concentrer est le clic qui permet de sélectionner une réponse et de la soumettre. À l'étape suivante, nous utiliserons l'événement click pour gérer la sélection d'une réponse. 32. Soumettre la réponse et montrer les résultats: Les utilisateurs peuvent sélectionner une réponse. Il est temps de gérer la soumission des réponses. Nous devons donc attacher un écouteur d'événements pour gérer le moment où l'utilisateur clique sur ce bouton d'envoi Nous comparerons également réponse qu' ils ont sélectionnée avec la bonne réponse, et nous augmenterons ce score s' ils ont sélectionné la bonne réponse. Pour commencer, nous devons définir deux variables globales pour suivre la question ainsi que le score. Comme vous pouvez le voir pour le moment, nous ne faisons que rendre la première question, et nous devrons la modifier dynamiquement en fonction de la question à laquelle l'utilisateur répond actuellement. La première variable globale sera la question en cours, qui sera l'indice de la question en cours que nous suivons, et nous partirons de zéro, qui sera la première question à partir de là. Et la variable suivante, nous garderons une trace du score de l'utilisateur, et ils commencent tous à zéro, ce qui signifie qu'ils n' ont aucun score. Et une fois qu'ils ont répondu correctement à une question ici, nous devons augmenter le score d'un, et nous l'utiliserons à la fin pour afficher les résultats à l'utilisateur Nous sommes donc prêts à gérer l'événement d'envoi de réponse. Pour cela, définissons un autre écouteur d' événements ci-dessous, mais avant la question de chargement car nous voulons avoir cet écouteur d'événements avant de charger les questions écouteur doit être sur le bouton d'envoi, qui est le bouton de soumission de réponse ici Nous allons sélectionner le bouton d' envoi. Nous allons ajouter un écouteur d'événements à ce sujet, et encore une fois, il gérera les événements liés aux clics Ici, nous devons fournir la fonction qui sera appelée et nous appellerons cette fonction maintenant. Appelons cette fonction « soumettre une réponse ». Nous devons définir la réponse d'envoi ci-dessous en dessous de ce choix de sélection. Définissons une fonction qui s'appelle soumettre une réponse et elle n' acceptera aucun argument. Nous allons définir ici la logique qui gérera la soumission. Mais pour l'instant, il suffit de const log pour voir si nous gérons cela correctement. Si nous cliquons sur ce bouton d' envoi, vous pouvez voir que la fonction a été appelée. Il existe un raccourci utile ici lorsque vous manipulez des écouteurs d' événements Si vous ne prévoyez pas de transmettre arguments à la réponse d'envoi, au lieu d'écrire une fonction flèche puis le nom de la fonction et de l'appeler, vous pouvez écrire directement le nom de la fonction qui doit être appelée, et cela aura exactement le même résultat. Si vous cliquez sur Soumettre la réponse, vous pouvez voir qu'elle a toujours été appelée. Nous pouvons utiliser ce raccourci ici car nous ne transmettons aucun argument. Mais par exemple, dans la question de chargement, nous ne pouvons pas le faire car nous transmettons également l'index, et c'est pourquoi nous utilisons ici la fonction flèche. La première chose que nous devons faire ici est obtenir l'épée sélectionnée, qui est celle qui a été sélectionnée ici à l'écran, et nous pouvons facilement la sélectionner car nous savons que l'épée sélectionnée a une classe qui est sélectionnée. Nous pouvons donc trouver l'élément exact dont le nom de classe est sélectionné, et nous savons qu'il ne s' agira que d'un seul élément. C'est ainsi que nous pouvons obtenir ce bouton. Définissons d'abord une variable pour le bouton sélectionné, sera égale à l'élément Choices. Et ici, au lieu de le trouver par identifiant, nous devons cette fois le trouver par le nom de classe. Nous pouvons donc utiliser le sélecteur de requête, par exemple, et nous pouvons rechercher l'élément dont la classe est sélectionnée Voyons si nous l'avons correctement sélectionné en l' enregistrant dans la console. Si je sélectionne l'une d'entre elles puis que je clique sur Soumettre la réponse, vous pouvez voir que nous avons sélectionné celle dont le nom de classe est sélectionné, et que nous pouvons maintenant accéder au 22, qui est la valeur de ce bouton. Mais avant de le faire, mettons simplement une petite vérification ici, vérifiant si le bouton sélectionné existe, car nous pourrions avoir des scénarios dans lesquels l'utilisateur n'en a sélectionné aucun. Dans ce cas, par exemple, nous ne voulons pas aller plus loin, nous voulons ne rien faire tant qu'ils ont pas sélectionné l'un de ces éléments. Dans ce cas, nous reviendrons simplement, ce qui sortira de cette fonction et obligera les utilisateurs à sélectionner une réponse. Nous devons maintenant comparer cela avec les réponses des données du quiz. Par exemple, ici, ils ont sélectionné cette option. Nous voulons maintenant le comparer à la bonne réponse et voir si l'indice de cette option correspond à la bonne réponse. Si oui, nous augmenterons le score, que nous avons défini ici Tout d'abord, nous devons obtenir l' index de l'élément sélectionné. Définissons une variable et appelons-la index sélectionné. Ici, nous devons trouver l' index de ce bouton Si nous regardons le dôme, vous pouvez voir que nous avons le choix et que nous avons quatre éléments à l'intérieur, correspondent aux données du quiz. Par exemple, ici, le premier élément est à zéro, et là aussi, le premier bouton est à l'index zéro. Le deuxième bouton se trouve à l' index 1 et ainsi de suite, et il correspond à celui-ci Nous allons donc effectuer une recherche ici dans les choix. Et tout comme nous l'avons fait pour le choix sélectionné, nous pouvons examiner ses enfants. Mais au lieu de le parcourir manuellement et de trouver l'index, JA Script nous fournit une méthode utile que nous pouvons utiliser, appelée Index , qui recherchera parcourir manuellement et de trouver l'index, JA Script nous fournit une méthode utile que nous pouvons utiliser, appelée Index , qui recherchera l'index pour nous au lieu de le faire manuellement Ici, nous pouvons passer ce bouton sélectionné. Et ce que cela fera, c' est qu'il recherchera le bouton sélectionné à l'intérieur de ces enfants, qui correspond à ces choix. Et chaque fois qu'il trouvera une correspondance, qui sera là, si vous avez sélectionné le deuxième élément, par exemple, il nous renverra l'index, qui sera un, ou si vous avez sélectionné celui-ci, il sera gratuit. Nous allons maintenant pouvoir comparer cela avec la bonne réponse tirée données du quiz et nous augmenterons le score si cela correspond à l'indice Ici, nous devons ajouter un autre conditionnel et ici nous comparerons l'indice sélectionné, qui est celui-ci. Par exemple, je l'ai sélectionné, alors l'index est deux, et nous le comparerons si cela correspond aux données du quiz pour la question en cours et nous accèderons à la bonne réponse ici. Nous le savons, car le premier en est un. C'est le premier index, et c'est la réponse que l'utilisateur a fournie. Si cela correspond, ils ont sélectionné la bonne réponse. Dans ce cas, il suffit d' augmenter le score d'une unité. À la fin de cela, nous voulons également augmenter la question en cours, car partons maintenant de zéro Nous devons l'incrémenter pour passer à la question suivante et nous augmenterons simplement la question en cours fois qu'ils auront soumis une réponse Si nous l'enregistrons et l'essayons, par exemple, si je sélectionne le premier et que je clique sur Soumettre, nous obtenons une erreur indiquant que nous réaffectons une valeur constante C'est parce que nous l' attribuons comme constante. J'espère que vous l'avez découvert plus tôt. Nous devons le convertir en une variable, pas constante et pareil pour le score, car nous allons l'incrémenter. Maintenant, si nous l'enregistrons comme ceci, si nous sélectionnons le troisième élément et que nous cliquons sur Soumettre, notre fonction est appelée, mais nous ne voyons pas les éléments suivants à l'écran, et c'est parce que nous avons cette valeur codée en dur ici. Nous affichons toujours la première question. Nous devons plutôt montrer la question actuelle. Nous devons également redéfinir cette question après avoir incrémenté la question actuelle Nous devons appeler à nouveau load question après cette opération. Maintenant, si vous sélectionnez l'une d' entre elles et que vous cliquez sur Soumettre, vous pouvez voir que les autres options apparaissent à l'écran Mais les choix de la première réponse sont toujours là. Nous devons effacer cela de l'écran et nous pouvons le faire dans la question de chargement. Si vous vous souvenez, nous sommes en train de renseigner les boutons de choix à l'écran, les boutons de choix à l'écran, mais avant de procéder à cette opération, nous devons effacer tous les choix précédents choix précédents de la question précédente, et nous pouvons le faire en accédant à l'élément choices, qui est le div qui contient ces éléments, et nous devons l'effacer en utilisant le code HTML interne, et nous pouvons le faire en accédant à l'élément choices, qui est le div qui contient ces éléments, et nous devons l'effacer en utilisant le code HTML interne, qui est une autre propriété qui existe sur les éléments HTML, et il suffit de la définir comme une chaîne vide Maintenant, si vous sélectionnez une réponse et que vous la soumettez, vous verrez les questions suivantes et vous pourrez cliquer sur l'une d'entre elles et la soumettre. En gros, nous effaçons les questions précédentes et nous remplissons les nouvelles questions dans cette question de chargement Ensuite, nous augmentons également la question de la requête pour passer à la question suivante, et nous chargeons à nouveau les Une fois que l'utilisateur a sélectionné toutes les questions et soumis les résultats, nous devons lui montrer les résultats, et c'est ce que nous ferons dans la prochaine leçon. 33. Afficher le score final: dernière leçon, nous avons autorisé les utilisateurs à soumettre leur réponse et nous avons également augmenté le score si leur réponse est correcte Nous devons maintenant afficher le score à la fin chaque fois que l'utilisateur répond à toutes les questions, et pour cela, nous devons définir une autre fonction, qui sera chargée d'afficher les résultats. Nous appellerons cette fonction show result. écrivant la logique de cette fonction, réfléchissons d'abord au moment où nous voulons appeler cette fonction. Ainsi, chaque fois que toutes les questions sont soumises et qu'il n'en reste plus, nous voulons afficher le résultat plutôt que les choix, et nous pouvons le déterminer dans la réponse soumise. Ainsi, chaque fois que l'utilisateur répond à la dernière question et qu'il ne reste plus de questions dans les données de ce quiz, nous voulons afficher les résultats au lieu de la question suivante, et nous pouvons le déterminer facilement en ajoutant une autre condition. Vous pouvez vérifier si l'index des questions actuel est inférieur à la longueur des données du quiz, ce qui signifie que si le la question est zéro, par exemple, dans les données de notre quiz, nous avons trois questions. Ce sera inférieur aux données du quiz, nous allons continuer et dans ce cas, nous appellerons la question de chargement pour charger la question suivante avec ses choix, mais sinon, si ce n' est pas le cas, signifie que cela est égal à la longueur des données du quiz, qui signifie que c'est la dernière question. C'est ici que nous appellerons notre fonction et nous afficherons les résultats au lieu d'afficher la question suivante. Écrivons maintenant la logique de cette fonction. Déterminons d'abord le conteneur que nous voulons masquer. Comme vous pouvez le voir dans notre fichier HTML, nous avons ce stif qui est le conteneur de questions, et il contient la question et les choix, qui se trouve dans cette partie de notre site Web Chaque fois que nous voulons afficher le résultat, nous voulons l'afficher à l'intérieur de cette feuille tout masquant ce conteneur de questions car nous ne voulons pas qu'il soit visible à l'écran. Nous devons d'abord sélectionner l'élément par cet identifiant, qui sera le conteneur de questions, et nous le ferons ici au-dessus de l'élément de question. Définissons un autre élément pour le conteneur de questions, qui sera égal à l'élément document point Gate par ID et l'ID de ce conteneur de questions. Ensuite, nous allons sélectionner le conteneur DV et ici nous voulons d'abord le masquer Il existe plusieurs manières de masquer un élément dans le dôme, mais l'une des méthodes les plus simples consiste à régler l'affichage sur aucun. Nous pouvons donc accéder à l'élément, puis nous avons une propriété dessus, qui est le style. Et ici, nous avons accès à toutes les propriétés que nous pouvons définir dans un fichier CSS, mais nous pouvons le faire à partir de Javascript. Et ici, nous pouvons, par exemple, régler l'affichage, et nous pouvons le définir comme égal à aucun. Et nous devons faire de même pour le bouton d'envoi, car nous ne voulons pas que la réponse d'envoi soit visible sur l'écran des résultats. Nous allons donc également cliquer sur le bouton d' envoi et régler l'affichage comme nul, comme nous l'avons fait pour le conteneur de questions. Maintenant, si vous essayez de répondre à toutes les questions et de soumettre les réponses, la troisième est la dernière question. Donc, ici, lorsque je clique sur Soumettre la réponse, nous entrerons dans ce bloc ls et ce résultat d' affichage sera appelé. Et si je clique sur Soumettre, vous pouvez voir que nous masquons le conteneur de questions qui contient la question et les choix et que nous masquons également le bouton d'envoi, et maintenant nous devons renseigner le résultat, qui est celui-ci ici Nous devons renseigner ce résultat avec le score, auquel nous avons accès depuis cette portée globale Nous avons déjà sélectionné ce T, qui a l'idée de résultat et qui est stocké dans la variable de l'élément résultat. Ici, nous pouvons accéder à cette variable d'élément de résultat et nous pouvons insérer des éléments HTML en utilisant le code HTML interne que nous utilisions auparavant. Pour l'instant, nous pouvons simplement afficher le score. Si vous répondez à toutes les questions et que vous les soumettez, vous pouvez constater que le score est égal à un, ce qui signifie que nous avons répondu correctement à une seule question et que les deux autres étaient fausses. Mais au lieu de l' afficher comme ça, nous pouvons ajouter un style pour définir une variable ici, comme le code HTML des résultats. Et au lieu d'insérer uniquement ce noyau, nous pouvons insérer des éléments HTML ici Par exemple, vous pouvez insérer une balise de paragraphe et vous ne pouvez pas écrire de texte devant la partition. Par exemple, nous pouvons dire utiliser CRT, puis nous pouvons afficher ce noyau ici, et nous pouvons fermer cette balise de paragraphe Et dans le style point CSS, j'ai également ajouté cette classe de base, qui définira la taille de la police pour qu'elle soit un peu plus grande et réinitialisera les marges. Nous pouvons donc appliquer ce nom de classe ici. Nous pouvons définir la classe de la balise de paragraphe comme étant égale à sc maintenant au lieu d' insérer score ici, nous pouvons insérer le code HTML du résultat, et maintenant nous aurons Cord et la peur devant Mais nous pouvons également le faire en pourcentage et nous pouvons également indiquer le nombre total de questions auxquelles ils ont répondu. Pour le convertir en pourcentage, nous devons le multiplier par 100, puis le diviser par le nombre total de questions, qui est le point de données du quiz. Nous devons également arrondir ce chiffre. Nous utiliserons MVTRound et nous le transmettrons à l'intérieur. Ajoutons le pourcentage devant ce noyau et enregistrons-le. Vous pouvez maintenant voir que nous affichons le noyau sous forme de pourcentage, et enfin, nous pouvons ajouter ce noyau et le nombre total de questions devant celui-ci. Nous pouvons dire score sur quizdata lié par des points. Vous aurez maintenant noté le pourcentage et aussi celui sur trois, ce qui indiquera le nombre de questions auxquelles ils ont répondu correctement. À la fin du quiz, l'utilisateur verra désormais son score final affiché dans un format clair et facile à comprendre. Il y a une chose qui manque ici. Ils ne peuvent pas voir les questions auxquelles ils ont mal répondu, ils peuvent donc s'entraîner pour la prochaine fois. Nous devrons également afficher les mauvaises réponses ici et c'est ce que nous ferons dans la prochaine leçon. 34. Collecter et afficher de mauvaises réponses: En plus d'afficher le score final, nous pouvons rendre notre quiz plus informatif en affichant les réponses incorrectes à l'écran. De cette façon, les utilisateurs peuvent apprendre de leurs erreurs et voir quelles questions ils se sont trompées. Pour pouvoir afficher les mauvaises réponses, il faut d'abord ajouter une autre variable globale. Nous devrons définir un tableau de mauvaises réponses et nous insérerons toutes les mauvaises réponses dans ce tableau. Si l'utilisateur sélectionne une réponse incorrecte et qu'il clique sur Soumettre les réponses, nous devons la détecter et placer cette réponse parmi ces mauvaises réponses. Ce sera le moment où l' utilisateur soumettra une réponse. Nous devons l'ajouter dans cette fonction et nous avons déjà le conditionnel pour cela. Comme vous pouvez le voir, nous avons cette instruction If qui vérifie si la réponse était correcte Sinon, nous pouvons entrer dans un bloc Eels, ce qui signifie que la réponse était incorrecte Dans ce cas, nous pouvons placer cette question dans le tableau des mauvaises réponses et nous pouvons utiliser la méthode push pour la pousser. Nous ajouterons un objet dans la première propriété que nous stockerons comme question, afin qu'ils puissent voir quelle question ils se sont trompés. Et la question ici concerne les données du quiz, question en cours, puis la question à points. Ensuite, nous devons les informer de leur réponse, que nous pouvons appeler réponse utilisateur, par exemple. Et ici, nous leur donnerons leur réponse, qui sera constituée des données du quiz, de la question en cours, puis nous pourrons accéder aux choix de cette question en cours, et leur réponse était l'index sélectionné, que nous pouvons fournir dans le choix. Nous devons également garder une trace de la bonne réponse afin qu' ils sachent laquelle était la bonne. Nous pouvons stocker une autre propriété appelée réponse correcte, et nous pouvons accéder à la bonne réponse en accédant aux données du quiz pour la question en cours, puis nous avons cette bonne réponse qui indique l'index de la bonne réponse. C'est ainsi que nous allons ajouter toutes les mauvaises réponses à l'intérieur de ce tableau, et nous devons utiliser ce tableau à la fin lorsque nous affichons le résultat et nous devons également afficher les mauvaises réponses ici en dessous de ce score. Ici, nous devons d'abord ajouter un conditionnel, et nous devons vérifier si la longueur des mauvaises réponses est supérieure à zéro, ce qui signifie qu'elles ont de mauvaises réponses , car s'ils n' ont pas de mauvaises réponses, nous ne voulons pas les afficher à l'écran, sinon nous afficherons toutes les mauvaises réponses. Nous pouvons donc convertir ce résultat en variable, car pour le moment c'est une constante, et maintenant nous pouvons insérer plus de choses dans ce résultat HML Ajoutons un titre à ce résultat HTML en ajoutant une balise H free, et nous indiquerons ici les mauvaises réponses, ce qui signifie que nous allons afficher les mauvaises réponses en dessous Et ici, nous allons corriger les mauvaises réponses en utilisant à nouveau les quatre. Ici, nous allons obtenir la mauvaise réponse, et nous devons l'insérer dans le code HTML du résultat. Et ici, il suffit que ce soit code HTML de résultat, pas un élément de résultat. élément de résultat est l'élément que nous avons sélectionné parmi lesquels nous devons ajouter d'autres éléments à ce résultat HTML. Pour chacune des mauvaises réponses, ajoutons un élément de liste. Et à l'intérieur de cet élément de liste, nous aurons des paragraphes. Le premier paragraphe indiquera la question, qui sera la question que nous aurons à l'intérieur de cette réponse. Et nous pouvons y accéder en répondant au point Q, qui est la question que nous commençons ici. Ensuite, nous devons accéder à cette réponse utilisateur, qui n'est pas la bonne réponse. Fermons ce paragraphe, et en dessous, nous ajouterons un autre paragraphe. Nous répondrons à votre question. Et ici, ajoutons un élément span et à l'intérieur de cet élément span, nous allons afficher la réponse de l'utilisateur à point de réponse. Et nous devons fermer l'élément span et nous devons également fermer l'élément paragraphe. Copions cette ligne une fois de plus. Et ici, nous allons afficher la bonne réponse. Nous allons donc dire la bonne réponse. Et à partir de l'objet de réponse, nous sélectionnerons la bonne réponse, qui est stockée sous la propriété de réponse correcte. Nous avons juste besoin d'emballer ces éléments de liste dans un article UL. Pour cela, nous devons insérer un élément UL dans ce code HTML de résultat. abord, nous appuierons sur l'ULTag d'ouverture puis pour chacun d'eux, nous appuierons sur l'ULTA de fermeture comme ceci nous appuierons sur l'ULTA de fermeture comme Désormais, lorsque l'utilisateur aura terminé ce quiz, il aura le score et en dessous, il aura les mauvaises réponses si la longueur des mauvaises réponses est supérieure à zéro, c'est-à-dire s'il a de mauvaises réponses au quiz. Comme vous pouvez le voir, écrivons dans notre questionnaire nous obtenons le score en pourcentage puis les bonnes réponses et le total des réponses. Et nous obtenons également de mauvaises réponses ici. Ici, l'utilisateur peut voir la question à laquelle il n'a pas répondu correctement. Ils peuvent voir leur réponse et ils peuvent également voir la bonne réponse. Maintenant, la bonne réponse indique l'index de la bonne réponse, ce qui n'est pas très utile pour les utilisateurs. Nous devons donc le modifier pour afficher la valeur au lieu de l'index, et nous le ferons ici lorsque nous le placerons dans les mauvaises réponses. Au lieu de pousser cet indice, nous devons augmenter la valeur. Donc, arrêtons ça à partir d'ici. Accédons aux données du quiz de la question en cours, puis nous aurons accès aux choix à partir d'ici. Et parmi les choix, nous allons sélectionner le choix qui possède cet index. accédons donc maintenant à la valeur au lieu d' accéder à l'index. Ainsi, vous pouvez voir que nous affichons la valeur de la bonne réponse, et non l'index. Enfin, marquons simplement la mauvaise réponse en rouge et la bonne réponse en vert, et nous pouvons recommencer en utilisant les styles de notre style CSS. Nous avons déjà des styles pour la bonne et la mauvaise réponse. Il suffit d'ajouter ces noms de classe aux éléments LI que nous avons ici. Nous avons ici cette plage qui indique la réponse de l'utilisateur et c'est évidemment la mauvaise réponse. Nous pouvons ajouter un nom de classe à cela et nous pouvons ajouter le mauvais nom de classe. Pour la bonne réponse, nous ajouterons un autre nom de classe et celui-ci sera correct, et cela correspond aux styles que nous avons ici. C'est ainsi que nous finalisons le quiz. Voyons simplement comment cela fonctionne. Nous sélectionnons les réponses, puis nous sélectionnons la dernière réponse et nous soumettons ici que nous pouvons voir le noyau et nous pouvons voir le nombre total de questions ainsi que les bonnes réponses. Nous voyons également les mauvaises réponses et les mauvaises sont surlignées en rouge et les bonnes sont surlignées en vert. Cette application de quiz fonctionne de manière dynamique, ce qui signifie que nous n'avons pas besoin trois questions ici. Vous pouvez ajouter autant de questions que vous le souhaitez, et le code ici fonctionne de manière dynamique de telle sorte que vous pouvez ajouter autant de questions vous le souhaitez. Cela ne cassera pas l'application et cela fonctionnera pour n'importe quel nombre de questions de quiz. 35. Récap: C'est pour avoir atteint le bout de la section du dôme. Prenons un moment pour récapituler ce que vous avez appris depuis le début Nous avons commencé par l' introduction à JavaScript, où vous vous êtes familiarisé avec le langage lui-même et le fonctionnement du moteur JavaScript sous le capot. Vous avez également découvert l'histoire et l' évolution d'ECMAScript, et nous avons également configuré votre environnement de développement pour vous permettre de commencer à coder en Nous avons abordé la syntaxe de base ainsi fonctionnement de JavaScript dans le navigateur et au-delà dans cette première section. Et dans les briques de base de Javascript. Dans la première section, nous avons abordé les variables et les constantes en JavaScript. Vous avez découvert ici les types primitifs tels que les nombres, les chaînes, les lingots, les valeurs nulles et indéfinies Nous avons découvert les opérateurs tels que comparaison arithmétique, la logique et l'assignation, et nous avons appris à contrôler le flux de notre application à l'aide d'instructions EL ou d'instructions de commutation et d'autres conditions . Nous avons exploré les fonctions plus en détail, comme comment déclarer des fonctions, comment leur transmettre des arguments, comment renvoyer des valeurs à partir de fonctions, etc. Dans la deuxième partie de ces éléments de base, vous avez découvert les boucles telles que les boucles for while ou do while et comment les utiliser pour parcourir certaines données en boucle. Nous avons découvert les tableaux , notamment comment créer des tableaux, comment accéder aux éléments qu'ils contiennent, comment manipuler les valeurs et les méthodes courantes telles que push, pop, etc. Nous avons également exploré les objets, la création, les propriétés des objets, les méthodes appliquées aux objets, ainsi que le mot clé this, qui prête à confusion en JavaScript. Ensuite, vous vous êtes familiarisé avec les types de référence, ainsi qu'avec la différence entre les référence et les types primitifs et avec la façon dont ils sont stockés différemment dans la mémoire de l'application. Nous avons abordé cela plus en détail ainsi que la portée de JavaScript, comme les portées globale, locale et par blocs. Maintenant, dans cette section, vous en apprendrez davantage sur le dom. Vous avez appris comment JavaScript interagit avec les pages Web en utilisant ce dom pour accéder aux éléments d' document HTML et les manipuler. Vous avez découvert les nœuds, les éléments et les attributs DOM . Ensuite, nous avons créé un Quizap pratique et nous avons sélectionné éléments à l'intérieur de ce Quizap en utilisant le paramètre get element by ID, sélecteur de requête et les autres Vous savez maintenant comment modifier le contenu du texte à l'intérieur des éléments HTML en utilisant le contenu du texte ou le code HTML interne. Nous avons également mis à jour les attributs tels que classes ou les styles de certains éléments lorsque nous en avons besoin. Enfin, nous avons appris comment gérer les événements et comment associer écouteurs d' événements pour écouter certains événements et déclencher des fonctions dans ce cas Nous explorons les types d' événements courants tels que les clics, survol de la souris, l'envoi, le clavier enfoncé, etc. Nous avons également créé et ajouté des éléments à l'intérieur de ce questionnaire, qui n'étaient pas définis au début du fichier HTML Vous devriez maintenant travailler en toute confiance avec tous les concepts fondamentaux de JavaScript. JavaScript a bien plus à offrir. Si vous êtes prêt à aller au-delà des notions de base et à vous intéresser à des sujets plus avancés tels que la gestion des erreurs et le débogage en JavaScript ou le JavaScript asynchrone ou manière de travailler avec du JavaScript asynchrone, il est temps Vous pouvez accéder à notre communauté payante où vous aurez non seulement accès à des cours avancés, mais également à des conseils personnalisés de ma part pour vous aider à atteindre vos objectifs de carrière plus rapidement, qu'il s'agisse de décrocher l'emploi de vos rêves obtenir une promotion ou simplement d'affiner vos compétences Si cela vous intéresse, vous pouvez consulter le premier lien de la description pour tous les détails. Pour l'instant, je tiens à vous féliciter à nouveau d'avoir suivi ce cours. Vous avez construit une base solide en JavaScript, depuis les bases jusqu'à l'utilisation du Dom. Ce sera un ensemble de compétences très important pour tout projet de développement Web que vous entreprendrez. Continuez à vous entraîner et à construire davantage et si vous êtes prêt à passer à l'étape suivante, je vous verrai dans la phase suivante. 36. Erreurs de syntaxe, de temps d'exécution et de logique dans JavaScript: Passons à la section de ce cours consacrée à la gestion des erreurs et au débogage Dans cette section, nous aborderons un sujet essentiel pour chaque développeur, à savoir la gestion des erreurs et leur débogage. Au fur et à mesure que vous développez des applications, vous rencontrerez des erreurs, ce qui est essentiellement inévitable Même si vous êtes un développeur senior avec 20 ans d'expérience, vous rencontrerez toujours des erreurs lorsque vous développerez des applications . Vous devez corriger ces erreurs Comprendre comment gérer ces erreurs efficacement fera de vous un meilleur développeur Dans cette section, nous allons découvrir les erreurs les plus courantes et comment nous pouvons les éviter. Nous parlerons de trois principaux types d'erreurs, à savoir les erreurs de syntaxe, d'exécution et les erreurs logiques. Vous découvrirez comment utiliser les journaux de console pour le débogage , puis comment éliminer les erreurs personnalisées de notre code, puis les gérer au lieu d'écraser le programme Vous apprendrez comment utiliser les blocs try and catch pour gérer ces erreurs et comment nous pouvons utiliser les outils de développement de navigateurs pour déboguer notre application Vous apprendrez comment définir points d'arrêt et poser l'exécution du code dans le navigateur, puis comment nous pouvons parcourir notre code ligne par ligne après avoir défini ces points d'arrêt Enfin, nous allons apprendre comment inspecter les valeurs des variables et comment inspecter le costac de nos fonctions Dans cette première leçon, nous allons comprendre les types d'erreurs courants que sont les erreurs de syntaxe, d'exécution et logiques, et nous allons apprendre comment les corriger dans notre code. Il s'agit des types d'erreur courants, à savoir les erreurs de syntaxe, les erreurs d'exécution et les erreurs logiques. Commençons par les erreurs de syntaxe. Des erreurs de syntaxe se produisent lorsque le code n'est pas écrit correctement et empêche son exécution. Par exemple, ici, dans ce code, nous avons une erreur de syntaxe et vous pouvez voir qu'elle est même mise en évidence par le code VS et que nous n'avons pas besoin d' aller sur la console pour le comprendre. Mais même si vous l'avez désactivée et que vous n'avez pas remarqué l'erreur de syntaxe ici, ouvrez le journal de la console ici, vous verrez toutes les erreurs liées aux fichiers Javascript. Et comme vous pouvez le constater, nous avons ici une erreur de syntaxe, pointe même vers le fichier et aussi vers la ligne, qui indique ce fichier, et vers la ligne numéro quatre. Et il y a même une nouvelle fonctionnalité dans les outils de développement de Chrome. Si vous voyez sur le côté droit, nous avons un bouton d'erreur, utilise le modèle Gemini de Google pour comprendre cette erreur et vous expliquer comment la résoudre Si vous cliquez sur ce bouton, vous acceptez ici leurs conditions d'utilisation et cliquez sur Continuer. Vous verrez qu' il génère l'explication de la façon dont cette erreur s'est produite. Ici, il explique cette erreur que vous avez dans votre navigateur dans votre code JavaScript à la ligne numéro quatre. Ici, il vous donne même quelques exemples de la façon dont cette erreur peut se produire lorsque vous manquez une parenthèse lorsque vous appelez une fonction et c'est exactement ce que nous avons dans notre code Ici, dans la ligne suivante, il vous donne des suggestions sur la façon de corriger. Maintenant, il s' agit évidemment d'une simple erreur. Et si vous regardez ceci, vous trouverez le problème qui se trouve ici. Ainsi, en cas d'erreurs de syntaxe, vous pouvez facilement les trouver, mais en cas d'erreur d'exécution ou d'erreur logique, vous pouvez utiliser ce modèle Gemini de Google ici dans la console, et vous pouvez voir les explications et aussi comment les corriger dans votre code Et j'espère qu'à ce stade, vous avez déjà détecté le problème dans notre code. Au numéro de ligne, Au numéro de ligne vous avez vu qu'il pointait vers ces accolades, car le moteur JavaScript ne s' y attendait pas après cette partie du code, et c'est parce que nous avons oublié de fermer les parenthèses ici après cette partie du code, parce que nous avons oublié fermer les parenthèses Si vous mettez simplement des parenthèses ici, fermant ces arguments de fonction, vous verrez que l'erreur disparaît dans le code VS, et si nous enregistrons et allons dans le chrome, vous pouvez voir que l'erreur a également disparu à partir d'ici C'est ainsi que vous pouvez trouver et corriger les erreurs de syntaxe, qui sont l'une des erreurs les plus faciles à corriger, car le navigateur vous indique essentiellement l'emplacement du fichier ainsi que la ligne où l'erreur de syntaxe se produit. En cas d'erreurs d'exécution, celles-ci se produisent pendant l'exécution de votre code. Cela est souvent dû à une hypothèse erronée. Par exemple, nous avons ici cet objet qui possède une seule propriété qui est une liste. Supposons que vous tentiez d' accéder à une propriété de cet utilisateur. Supposons que vous essayez d' accéder à la propriété He et que vous essayez de la convertir en un format de chaîne comme celui-ci. Dans ce cas, vous essayez d'accéder à une propriété qui n' existe pas chez cet utilisateur. Mais cette fois, nous ne recevons aucune indication du code VS comme nous l'avons fait pour le cas d'erreur de syntaxe. Dans ce cas, vous devez consulter le navigateur. Ici, vous pouvez voir que cette fois, nous recevons une erreur de type indiquant que les propriétés non définies ne peuvent pas être lues Chaque fois que vous voyez une erreur comme celle-ci, indiquant que vous ne pouvez pas lire les propriétés de quelque chose, cela signifie généralement que vous essayez d' accéder à une propriété qui n'existe pas, et il s'agit d' une erreur d'exécution. Là encore, vous avez ce bouton AI sur le côté droit. Si vous cliquez dessus, il vous expliquera quelle est l'erreur et comment la débugger Ici, comme vous pouvez le voir, cela nous donne même des suggestions sur notre code spécifique, il indique que nous ne pouvons pas accéder au point utilisateur H parce que la propriété H n'existe pas. Il peut même voir notre objet, c' est-à-dire cet objet que nous définissons. Il détecte que nous n'y avons pas de propriété d'âge. C'est pourquoi nous devenons indéfinis parce que nous essayons d'accéder à une propriété qui n'existe pas, puis nous essayons de convertir cette propriété en chaîne C'est là que nous obtenons l'erreur car vous ne pouvez pas convertir la valeur non définie en chaîne et vous ne pouvez pas appeler cette fonction sur des valeurs non définies Ici, vous pouvez voir comment y remédier et il vous donne des suggestions. Vous devez d' abord vérifier si l'âge de l'utilisateur existe, puis vous pouvez essayer d'y accéder. Sinon, vous constaterez que l'âge de l' utilisateur n'est pas défini. n'est qu'une suggestion de l'IA pour résoudre ce problème. Vous pouvez mettre l' instruction If ici et vérifier si l' âge de l'utilisateur existe , puis appeler cette fonction , sinon vous pouvez enregistrer que cet âge n'est pas défini, ou vous devrez peut-être ajouter une propriété d'âge ici et spécifier l' âge de l'utilisateur. Dans les deux cas, vous vous débarrasserez de cette erreur d'exécution et vous ne la verrez plus dans la console. Le dernier cas concerne les erreurs logiques. Ces erreurs se produisent lorsque votre code s'exécute sans se bloquer, mais qu'il produit des résultats inattendus Comme vous l'avez vu dans les cas précédents concernant les erreurs d'exécution et de syntaxe, votre programme se bloque ce qui est plus facile à déboguer, car vous savez que quelque chose ne va pas et cela vous indique même la bonne destination, à la fois en cas d'erreurs d'exécution et de syntaxe En cas d'erreur logique, vous n'avez pas ce feedback. Un cas très simple de cela peut être une fonction simple qui détecte si l'utilisateur est adulte ou non et renvoie une valeur vraie ou fausse en fonction de cela. Supposons que vous utilisiez cette méthode pour adultes quelque part dans votre code et que nous transmettions le point utilisateur g que nous venons de créer ici. Dans ce cas, vous pouvez voir que pour l'utilisateur de 29 ans, nous devenons faux, ce qui signifie que cet utilisateur n'est pas un adulte, qui n'est évidemment pas vrai Cela signifie que vous avez une erreur logique dans votre code. Dans ce cas, aucune erreur ne s'affiche. Vous n'avez pas ce bouton AI pour vous aider à résoudre ce problème, car il ne sait pas que vous avez un problème dans votre code. Cela peut être l'une des erreurs les plus difficiles à déboguer car vous devez déterminer vous-même quelle est l' erreur dans ce cas Heureusement, il s'agit d'une logique très simple et vous pouvez voir que le seul problème ici est que cet opérateur n'est pas correct. Nous devons le modifier pour qu'il soit supérieur à 18. Si vous l'enregistrez, nous répondrons à cet utilisateur, qui est le bon comportement. Vous pouvez avoir des variantes plus complexes de ces erreurs logiques, et nous en verrons plus dans cette section. Mais ce sont tous les types d'erreur courants. Le premier type est donc celui des erreurs de syntaxe, qui sont les plus faciles à corriger. Ensuite, vous avez les erreurs d'exécution qui se produisent pendant l'exécution du code. Enfin, vous avez des erreurs logiques, qui sont des problèmes de logique dans votre code, et vous ne recevez aucune notification à ce sujet ni aucune erreur dans votre console. C'est donc l'un des plus difficiles à déboguer, mais nous verrons comment le faire dans les prochaines leçons 37. Utiliser console.log pour le débogage: débogage des applications journal de la console est l'un des outils les plus simples mais les plus efficaces pour le Il peut vous aider à observer le comportement de votre application à différentes étapes en insérant des journaux de console à chaque étape Nous avons déjà utilisé ce journal de console pour le débogage dans les leçons précédentes Mais revenons voir comment nous pouvons l'utiliser efficacement dans votre code. Nous avons ici une application en ligne simple où l'utilisateur peut mettre certains articles dans sa voiture , puis nous additionnons tous ces articles, puis nous calculons le total et y ajoutons le taux d'imposition, qui est cette fonction de taux d'imposition, qui est chargée renvoyer le taux de taxe pour ces articles. Nous avons plusieurs problèmes avec cette application. Pour cet utilisateur en particulier, nous avons deux articles dans son panier. L'une est des chaussures avec une quantité de deux et le prix est de 50, et l'autre est une tête avec prix de 20 et la quantité est. Si nous calculons le total manuellement, il devrait être 50 fois deux plus 20 fois un, puis nous appliquons également le taux d'imposition à ce montant. Pour l'instant, si vous accédez à la console de l'application, vous pouvez constater que la taxe V totale est de 94,9, ce qui est très inattendu car nous nous attendons à avoir 50 fois deux plus 20 fois une taxe , ainsi qu'un certain taux d'imposition Mais ce chiffre à lui seul est de 120, et nous obtenons un résultat encore inférieur à ce chiffre avant l'application des impôts. Découvrons donc quel est le problème en ajoutant les journaux de console dans notre application. Notre première hypothèse est peut-être qu'avant d'appliquer le taux d'imposition, le total est peut-être correct, puis que nous appliquons le mauvais taux d'imposition ici. Nous pouvons donc mettre un journal de console ici, puis vous pouvez enregistrer un message utile ici pour le trouver facilement dans la console. Vous pouvez dire le total avant taxes. Et ici, vous bloquerez le total sans appliquer cette taxe à la fin. Ici, vous pouvez voir que le total avant impôts est de 73, et comme vous l'avez vu, nous nous attendons à ce que le total avant impôts soit 120. Le problème ne concerne pas le taux d'imposition, mais c'est avant le calcul des impôts. Nous avons mal additionné ces éléments, et nous pouvons ajouter un autre journal de console quelque part, comme ici Par exemple, avant de calculer le total, vous pouvez enregistrer le total sur console dans le message, nous pouvons ajouter le total avant la somme, puis vous enregistrez le total avant d'additionner ces nombres. Et puis vous pouvez également enregistrer chaque élément sur console ici. Ensuite, en dessous du calcul, vous pouvez le consigner à nouveau sur la console. Mais maintenant, nous allons le modifier pour qu'il soit total après la somme. Donc, si vous revenez ici dans la console, vous pouvez voir le total avant que première somme ne soit nulle, ce qui est correct. Nous avons cet article dans le panier, dont le prix est de 50 et la quantité est de deux. Et comme on peut le voir ici, le total après la somme est de 52, ce qui n'est pas prévu. Nous nous attendions à ce que ce soit 100 parce que nous avons le prix de l'article 50, et nous avons deux de ces articles, donc ce devrait être 100, mais nous en obtenons 52. Et il en va de même pour le second. Nous obtenons le total avant somme, 52, puis nous avons cet article dont le prix est de 20, et la quantité signifie que le total après la somme devrait être de 72, mais nous obtenons 73 après la somme du total, indique clairement que le problème se situe dans cette ligne numéro 14. Ainsi, en insérant les journaux de console dans votre application, vous pouvez isoler le problème Une fois le problème isolé, ne reste plus qu' à l'identifier et à le résoudre. Comme vous pouvez le constater pour chaque itération, nous ajoutons le total en fonction du prix de l'article et également en fonction de la quantité de l'article Et nous devons en fait multiplier cela et ne pas les ajouter car, par exemple, si vous avez un article dont prix est 50 et que vous en avez deux dans ce cas, vous devez ajouter 50 fois deux et non 50 plus deux. C'est donc ce qui ne va pas avec notre application. Nous les additionnons au lieu de les multiplier. Donc, si nous changeons cela pour qu'il s'agisse d'une multiplication et que nous enregistrons notre code, vous pouvez maintenant voir le total avant que la somme ne soit nulle. Ensuite, nous ajoutons cet article, dont le prix est de 50, quantité deux, et en fait, le total après somme est correct maintenant, il est de 100. Et il en va de même pour le second. Après avoir ajouté ce deuxième élément, nous en obtenons 120. Enfin, nous atteignons le total avec l'impôt 156, et disons que nous nous attendons à ce que ce taux d'imposition soit de 10 %, mais que nous augmentons. Si vous divisez 156 par 120, vous pouvez constater que nous obtenons un taux d'imposition de 40 %, mais nous nous attendons à ce qu'il soit de 10 %. Il y a donc un autre problème dans notre application. Dans ce cas, vous devez d'abord vérifier le journal de console que vous avez saisi dans votre code, qui représente le total avant taxes, et vous voyez s'il est correct ou non. Et comme cela est exact, nous savons maintenant que le véritable problème réside dans le calcul de la taxe Nous avons des opérations avec des taxes à deux endroits. L'un est ici où nous multiplions le total par le taux d'imposition, et le second est ici où nous avons le taux de taxe de l'article. Dans ce cas, avant de le renvoyer depuis cette fonction, nous pouvons enregistrer le taux d' imposition sur console et nous pouvons le faire enregistrant le taux d'imposition sur la console avant de renvoyer le résultat. Nous pouvons donc dire taux d'imposition, puis nous enregistrerons ici le taux d'imposition. Maintenant, dans la console, vous pouvez voir que le taux d'imposition est de 1,3, ce qui signifie que nous ajoutons 30 % pour chacun des articles, mais nous nous attendons à ce que ce soit 10 %. Cela indique clairement que le problème se situe dans le cadre de cette fonction de taux d'imposition. Nous pouvons maintenant accéder à la fonction de taux d'imposition et créer des journaux de console pour le découvrir. Mais comme il s'agit d'une fonction très simple, nous pouvons l'identifier sans les journaux de console, mais vous pouvez également ajouter des journaux de console pour détecter le problème. Comme vous pouvez le constater, si le total est supérieur à 150, renvoyons un taux d' imposition de 10 % et sinon, nous renvoyons un taux d'imposition de 40 %. Il s'agit d'un autre cas d'erreur logique. Supposons que dans notre application, nous ne devions appliquer le taux d'imposition de 40 % que pour les commandes supérieures 150 et pour tous les autres cas, ce qui signifie que pour tous les petits achats, nous devons appliquer le taux de taxe de 10 % Le problème ici est lié à cette instruction If et plus particulièrement à cet opérateur . Nous comparons le total comme étant supérieur à 150, mais nous devons inverser cette tendance si le total est inférieur à 150. Dans ce cas, nous devons appliquer taux d'imposition de 10 % et dans tous les autres cas, nous devons appliquer le taux d'imposition de 40 %. Si nous l'enregistrons et que nous consultons à nouveau dans notre navigateur, vous pouvez voir le total avant taxes correctes. Nous nous attendons à ce que ce soit 120. Le taux d'imposition est également correct. Nous nous attendons à ce que ce chiffre soit de 10 % et que la taxe VID totale soit de 142 Nous pouvons également vérifier cela en divisant 132 par 120 et vous pouvez voir que nous obtenons 1,1, ce qui signifie que nous avons appliqué le taux d'imposition de 10 %. C'est l'approche utilisée pour les journaux de console. Vous insérez essentiellement les journaux de console dans votre application pour identifier et isoler le problème. Ensuite, une fois que vous avez isolé le problème, vous le corrigez dans votre code. Et n'oubliez pas d'effacer tous les journaux de la console une fois le problème résolu. Ainsi, chaque fois que vous corrigez des bogues avec les journaux de console, vous devez toujours effacer tous les journaux de console avant transférer votre code vers Git pour l'organisation ou pour vos projets. 38. Faire des erreurs personnalisées | essayer... de prendre des blocages: La détection et le renvoi d'erreurs personnalisées peuvent vous aider à signaler des problèmes spécifiques dans votre application. Et ces erreurs personnalisées sont particulièrement utiles pour valider les entrées des utilisateurs Supposons que nous ayons cette fonction simple qui prend le produit de la carte, ainsi que des arguments relatifs à la quantité, puis qui insère ce produit et cette quantité sur la carte Dans cette fonction, il se peut que la quantité ne soit pas un nombre positif. Par exemple, les utilisateurs peuvent essayer de transmettre un produit dont la quantité est inférieure à un chiffre négatif. Dans ce cas, nous voulons gérer correctement cette erreur sans écraser notre programme est là que nous pouvons lancer une erreur personnalisée et ajouter une condition ici avant de mettre ce produit sur la carte, et ici nous pouvons vérifier si la quantité est inférieure ou égale à zéro parce que nous ne Je ne veux pas autoriser les produits dont la quantité est nulle ou négative. Dans de tels cas, nous pouvons générer une erreur personnalisée et nous le faisons en Javascript en utilisant le mot clé fro, puis nous créons une nouvelle erreur à l'intérieur de cette erreur, nous pouvons passer un argument et c'est le message qui doit être une chaîne. Par exemple, ici, nous pouvons spécifier que la quantité doit être un nombre positif, et dans ce cas, nous ne poursuivons pas plus loin dans notre code et cela écrasera la fonction. Si nous essayons d'utiliser cette fonction avec des arguments incorrects , par exemple pour la carte, passons un tableau vide pour le produit, définissons le nom du produit comme chaussures, par exemple. Et pour la quantité ici, essayons d'ajouter moins un ici et de la sauvegarder. Maintenant, dans le journal de la console, vous recevrez un message indiquant une erreur codée, et vous verrez ici le message exact que vous avez inscrit dans l'erreur personnalisée, qui indique que la quantité doit être un nombre positif. Il vous indique même la fonction exacte où se trouve cette erreur personnalisée et il vous indique également la ligne, qui est la ligne numéro neuf. Encore une fois, ici, vous pouvez utiliser cette IA pour vous expliquer l'erreur. Dans ce cas, il corrigera l' erreur là où elle se produit exactement, c' est-à-dire dans la fonction d' ajout à la carte. Et cela indique que vous l' appelez avec une quantité négative dans votre code, cela explique que puisque la quantité est inférieure à un, vous obtenez cette erreur parce que vous générez une erreur personnalisée à partir de votre code dans ce cas. À la fin, vous pouvez voir la suggestion de cette IA sur la façon de corriger cette erreur. Et comme vous pouvez le voir ici, cela vous suggère de encapsuler dans un bloc de tri cache, et nous n'en avons pas encore discuté. Voyons donc ce qu'est ce bloc de tri cache. Nous pouvons utiliser Trcchblocks pour nous permettre de gérer les erreurs sans écraser Comme vous l'avez vu dans cet exemple, nous lançons une erreur personnalisée, mais nous ne la gérons nulle part dans notre code, et c'est pourquoi notre programme plante toujours Donc, pour éviter que cela ne se produise, nous pouvons utiliser des blocs de cache tr en JavaScript. Et voici la syntaxe selon laquelle nous écrivons le Tricahblo abord, nous écrivons le clavier d'essai, suivi par les Et puis, à l'intérieur des bretelles bouclées se trouve l'opération que nous devons essayer, qui consiste à introduire ce produit dans la carte Et au cas où cela échouerait, vous aurez un bloc de cache ici après l'essai. Et à l'intérieur du bloc de cache, vous avez accès à l'argument d'erreur ici. Et comme pour le bloc d'essai, vous avez les bretelles bouclées Et à l'intérieur de ce bloc, vous allez écrire le code qui sera exécuté en cas d'échec. Pour l'instant, nous pouvons simplement enregistrer notre erreur sur console pour voir ce que nous trouvons dans ce bloc de cache. Maintenant, cette fois, vous pouvez voir que notre console a changé et que nous n'avons pas cette erreur rouge. Au lieu de cela, cela est géré par notre bloc de cache tri, et comme vous pouvez le voir, c'est l'erreur que nous recevons dans le bloc de cache. Et ici vous pouvez voir l'erreur, qui a deux propriétés. premier est le message d'erreur, qui est le message exact que nous avons transmis depuis la partie initiale de notre code. Et puis vous avez également la pile qui indique exactement où cette erreur s'est produite, c'est-à-dire quelle fonction a bloqué cette erreur, et c'est, comme vous pouvez le voir, la fonction à deux cartes En utilisant ces informations, nous pouvons, par exemple, avertir l'utilisateur du problème qui se produit. Par exemple, ici, nous pouvons utiliser la fonction d'alerte, qui accepte un argument , à savoir le message. Comme vous l'avez vu, nous avons une propriété de message sur cette erreur que nous pouvons utiliser. Nous pouvons insérer le message d'erreur à l'intérieur de cette fonction d'alerte et l'appeler. Désormais, l'utilisateur aura un aperçu visuel des raisons pour lesquelles cela se produit et des raisons pour lesquelles il n'est pas en mesure d'ajouter le produit à la carte. Il recevra le message d'erreur dans l'alerte au lieu que nous écrasions le programme. Prenons un dernier exemple pour comprendre ce point. Supposons que nous effectuions des calculs dans le cadre de cette fonction de calcul de réduction. Ici, nous essayons de calculer la réduction, et si une erreur se produit, la réduction dépasse le prix, nous la détectons et l'enregistrons dans un message significatif. Donc, si la réduction est supérieure au prix, cela signifie que la boutique en ligne devra payer les clients pour l'achat, ce qui n' arrivera évidemment pas de toute façon. C'est donc là que nous devons générer cette erreur personnalisée. Ici, nous l'indiquons simplement par un message descriptif indiquant un message descriptif indiquant que la réduction ne peut pas dépasser le prix. contraire, si cette condition n'est pas vraie, nous appliquons la réduction au prix. Puisque nous lançons ici cette erreur personnalisée, nous devons la mettre en cache dans le bloc de cache au cas où cela se produirait. C'est pourquoi nous avons ce bloc de code enveloppé dans un bloc tr, puis nous avons le bloc de cache dans lequel nous devons gérer cette erreur. Dans ce cas, par exemple, vous pouvez verrouiller un message pour que vous puissiez le voir apparaître dans la console où vous pouvez indiquer une voir apparaître dans la console où vous pouvez erreur dans le calcul de la réduction, puis vous ajouterez le message d'erreur, qui sera le message d'erreur que nous renvoyons depuis le trilog Ensuite, pour l'utilisateur, vous remboursez le prix sans y ajouter de réduction. Ici, par exemple, l'utilisateur essaie d'acheter un produit à 100$, et il bénéficie d'une réduction de 120$, cela ne fonctionnera évidemment pas car si vous laissez cette fonction calculer la réduction, elle sera de -20, ce qui n'est pas correct. C'est pourquoi nous allons lancer cette erreur ici, puis nous l' attraperons dans le cache. Ici, dans la console, vous pouvez voir que nous appliquons le prix final à 100 et que nous ne le laissons pas être de -20. Et nous enregistrons également notre erreur personnalisée. Et si c'est rouge, c' est parce que nous utilisons erreur par point de console au lieu du journal par points de console. Vous pouvez donc toujours utiliser le journal de la console. Et dans ce cas, le fond ne sera pas rouge, mais c'est utile si vous essayez de générer des erreurs personnalisées. Vous pouvez utiliser l'erreur de console au lieu du journal de la console Si vous utilisez l'erreur point de console, la seule différence est la couleur d'arrière-plan, qui vous aidera à le trouver visuellement. De plus, vous obtenez ceci : comprenez cette erreur, suggestion de l' IA sur le côté droit, et vous ne l'obtiendrez pas si vous utilisez simplement journal de la console au lieu de l'erreur de console. Pour récapituler, vous pouvez utiliser Trcsblock de deux manières. Dans ce premier cas, nous définissons la fonction AT à deux cartes, puis nous l' encapsulons un bloc tri, puis dans le bloc de cache, nous détectons toutes les erreurs qui pourraient se produire à l'intérieur de cette fonction. Dans ce second cas, nous utilisons le bloc de cache tri à l'intérieur de la fonction au lieu d'utiliser la fonction à l'intérieur du bloc de cache tri, et dans les deux cas, nous effectuons cette opération à l'intérieur du bloc try car nous savons que cela peut échouer , puis nous gérons toutes les erreurs qui peuvent survenir à l'intérieur du bloc de cache. 39. Utiliser les outils de développement de navigateur pour le débogage: Explorons maintenant d'autres outils de développement de navigateurs, qui nous aideront à inspecter le code et à déboguer notre application Jusqu'à présent, nous n'avons utilisé que l'onglet console pour voir les journaux Javascript dans la console. Nous avons également utilisé l'onglet éléments, mais il existe un autre onglet très utile, à savoir l'onglet Sources. Et pour effectuer un débogage efficace ici, vous devez glisser-déposer le projet sur lequel vous travaillez actuellement dans l'onglet sources Il va maintenant ajouter votre code à cet espace de travail. Et en haut, vous pouvez voir cette bannière, qui vous demande d' autoriser Chrome à accéder à ce dossier. Vous devez cliquer sur A pour voir tous les fichiers de votre projet ici et sont exactement les mêmes fichiers que ceux que vous avez dans le code. Par exemple, si nous revenons en arrière et examinons la structure du projet ici, nous avons le même fichier HTML d' index, le fichier CSS à points de style et quatre fichiers pour les leçons. Ce sont exactement les mêmes fichiers que ceux que vous avez là. Ce qui est cool, c'est que chaque fois que vous modifiez quelque chose dans le navigateur, supposons que vous supprimiez ce journal de console et que vous enregistrez ce fichier. Si vous revenez au code VS, vous pouvez voir que ce journal de console a été supprimé d'ici. Maintenant, vous pouvez le ramener et l'enregistrer à partir du code VS si vous retournez dans le navigateur , assurez-vous que cela a également été appliqué ici. Je synchronise dans les deux sens du navigateur vers code VS et également du code VS vers le navigateur Nous allons maintenant voir comment utiliser l' onglet sources à notre avantage lors du débogage de l'application Imaginez que vous disposiez d'une fonction de connexion qui valide les informations d'identification de l'utilisateur. Si nous ne les validons pas, nous devons demander à l'utilisateur saisir le nom d' utilisateur et le mot de passe corrects , sinon nous devrions réussir à le connecter au site Web Ici, en haut, nous enregistrons les utilisateurs dans notre application. Le premier est un utilisateur administrateur, le suivant est un utilisateur et le dernier est un utilisateur invité. un premier scénario, supposons que nous essayions de connecter cet utilisateur avec le nom d'utilisateur admin, et que nous lui transmettions ce mot de passe un, deux, trois, quatre, cinq. Commençons par vérifier la console et voyons ce que nous avons ici. Vous pouvez voir que nous sommes en train de connecter l'utilisateur et voici le nom d'utilisateur. Obtenez également le rôle d'utilisateur et enregistrez-le dans la console. Comme vous pouvez le constater, la connexion est réussie dans ce cas. Ce sont ces trois journaux de console que nous avons dans notre fonction. Mais si vous regardez l'utilisateur administrateur ici, vous pouvez voir que le mot de passe est en fait 1234 et dans ce cas, c'est un, deux, trois, quatre, cinq, qui signifie que les mots de passe ne correspondent pas. Dans ce cas, nous devrions échouer à la connexion, mais nous laissons entrer les utilisateurs en disant que la connexion est réussie. Cette fois, au lieu d'utiliser les journaux de console pour déboguer cette application, essayons d'utiliser le bouton sources dans ce cas Vous pouvez en fait définir un point d'arrêt sur n'importe laquelle de ces lignes que vous voyez ici, puis cela posera l' exécution du code et vous pourrez inspecter les valeurs du nom d'utilisateur et d'autres variables à chaque instant Définissons un point d'arrêt pour chaque exécution de cette fonction, qui est une ligne numéro 20, et c'est la première ligne de cette fonction Ici, sur le côté droit, vous pouvez voir le point d'arrêt qui a été ajouté, et maintenant si vous essayez de l'actualiser, vous pouvez voir que le code a été posé à ce moment Nous avons donc maintenant la possibilité de parcourir notre code ligne par ligne et d'inspecter les variables. Par exemple, ici sur le côté droit, vous pouvez voir les arguments que nous avons également ici à côté du code, vous pouvez voir le nom d'utilisateur et mot de passe qui ont été transmis à cette fonction. Et sur le côté droit, vous pouvez voir la variable de mot de passe. Vous pouvez voir pour l'utilisateur la valeur n'est pas disponible, et il s'agit de cet utilisateur car nous n'avons pas encore atteint cette ligne. Et pour le nom d'utilisateur, nous avons Admin, qui a été transmis à cette fonction. Comme vous pouvez le voir, ce sont les variables locales, c'est-à-dire les variables qui se trouvent à l'intérieur de cette fonction. Si nous fermons ceci, vous pouvez également jeter un œil aux variables globales, qui, si vous vous en souvenez, sont la fenêtre par défaut, et ce sont toutes les méthodes que vous pouvez appeler sur l'objet window. Maintenant, vous trouverez ici de nombreuses variables car elles sont stockées dans la fenêtre et vous avez accès à toutes ces méthodes. À l'intérieur du script, vous pouvez trouver toutes les variables que nous avons stockées dans ce script JavaScript. Pour l'instant, nous avons les utilisateurs, c' est-à-dire le tableau d'utilisateurs que nous avons défini ici Ensuite, nous avons le tag Cs, qui représente le coût des fonctions. Comme vous pouvez le voir actuellement, nous avons l'utilisateur de connexion, qui est cette fonction et qui s'ajoute à notre coût Par exemple, ici, si nous appelons une autre fonction, cette fonction sera placée au-dessus de ce costag et vous trouverez plus de détails sur le fonctionnement de ce costag dans la dernière section de ce cours Jascript En haut, vous pouvez voir que nous avons quelques boutons, et si vous survolez l'un d'entre eux, vous pouvez voir la description de ce bouton Par exemple, celui-ci reprendra l'exécution du script, ce qui signifie qu'il ne parcourra pas le code ligne par ligne, mais qu'il l' exécutera en une seule fois. Bouton suivant, nous passerons au prochain appel de fonction, et celui que nous recherchons est celui-ci, qui se déroulera étape par étape. Donc, si vous cliquez dessus, vous pouvez maintenant voir qu'il exécutera ce code, et il nous montre à nouveau les variables locales auxquelles nous avons accès à ce stade. Si je passe en revue cette question une fois de plus, nous sommes maintenant dans cette fonction. Comme vous pouvez le constater, notre Costac a également changé. Nous avons cette fonction ici, et comme nous n'avons attribué aucun nom à cette fonction, nous avons anonymisé ici. Dans le cadre local, vous pouvez voir que nous avons maintenant accès à l'utilisateur et que, lors de la première itération, ce sera le premier utilisateur du tableau de cet utilisateur Si nous continuons à parcourir ce code, nous pouvons passer à la ligne suivante. Vous pouvez voir ici la valeur renvoyée par cette fonction, qui est vraie, qui signifie que lors de la première itération, elle a comparé le nom d'utilisateur et le mot de passe de cet utilisateur et elle renvoie true Si nous revenons une fois de plus, elle passera à cette instruction If. Ici, nous nous attendons à ce que la connexion échoue car nous avons transmis le mauvais mot de passe à l'utilisateur administrateur . Mais si vous cliquez à nouveau sur ce bouton, vous pouvez voir que cette instruction If a été ignorée et qu'elle n'est pas entrée, ce qui signifie que la condition «   non utilisateur était pas vraie. Maintenant, on arrive à cette ligne, qui indique le rôle de l'utilisateur Dans la ligne suivante, nous dirons que la connexion est réussie. Enfin, cela se réalisera, et nous pouvons même le voir sur le côté droit. Vous pouvez voir que le mot de passe local est 12345, qui est le mot de passe que nous transmettons à cet utilisateur connecté Mais le mot de passe réel de l'utilisateur est 1234, ce qui ne correspond pas à ce mot de passe. Cela signifie que notre code comporte une erreur logique et que nous ne validons probablement pas le mot de passe avant de laisser entrer les utilisateurs. C'est exactement notre cas ici Notez que dans cette fonction, nous ne comparons que le nom d'utilisateur avec le nom d'utilisateur qui a été transmis à cette fonction, mais nous n'utilisons pas le mot de passe pour le valider. Ici, nous devons modifier cette fonction et nous pouvons le faire directement ici dans les outils de développement. Nous pouvons également ajouter un opérateur final conditionnel et vérifier si le mot de passe de l' utilisateur est un point. Correspond au mot de passe qui a été transmis à cette fonction ici. Et maintenant, si vous l'enregistrez ici, cette fonction sera à nouveau invoquée et nous pourrons parcourir les lignes une par une en utilisant ce bouton. Nous pouvons donc passer à la ligne suivante, qui atteindra le tableau de l'utilisateur, et il commencera à itérer dessus Si nous cliquons dessus une fois de plus, cela lancera la première itération. Et l'utilisateur de la première itération sera égal à cet utilisateur, qui est le premier du tableau de l'utilisateur Et si nous recommençons, nous comparons maintenant le nom d'utilisateur et le mot de passe, et vous pouvez voir cette fonction en haut de notre CC. Il comparera d'abord le nom d'utilisateur , puis le mot de passe. Cette première itération comparera le mot de passe du premier utilisateur avec le mot de passe de l'utilisateur connecté et comme ils ne sont pas égaux, il passera à l'utilisateur suivant, et dans l'utilisateur suivant, nous avons ce second mot, qui est celui des utilisateurs Ici, il comparera ce mot de passe et ce nom d'utilisateur avec le mot de passe et nom d'utilisateur que nous avons donnés à l'utilisateur connecté. Évidemment, ils ne correspondront pas à nouveau. Enfin, il comparera l'utilisateur invité, et l'utilisateur invité ne correspond pas non plus à l'utilisateur que nous avons fourni. Vous pouvez maintenant voir dans les variables locales que nous avons le mot de passe, le nom d'utilisateur et que l'utilisateur n' est pas défini car nous n'avons pas pu trouver l'utilisateur correspondant à ces informations d'identification Maintenant, si nous allons plus loin, vous pouvez voir que nous atteignons ce journal de console qui se trouve à l'intérieur de l'utilisateur si ce n'est pas le cas, et c'est parce que l' utilisateur n'est pas défini. Cela signifie que cette fonction renverra désormais false à partir de cette fonction et que si nous l'exécutons une fois de plus, cette fonction renverra false . Nous pouvons maintenant consulter le journal de notre console. Vous pouvez voir ici que la connexion utilisateur dans le premier journal de console, et la deuxième console indique que la connexion a échoué parce que nous avons fourni un nom d'utilisateur ou un mot de passe incorrect. Voyons maintenant si cela fonctionnera avec le bon utilisateur. Essayons de connecter un autre utilisateur. Cette fois, essayons de nous connecter avec cet utilisateur invité. Nous transmettrons le nom d' utilisateur invité , puis nous transmettrons également le mot de passe. Nous copierons le mot de passe à partir de là pour nous assurer qu'il est correct et nous l'enregistrerons. Vous pouvez désormais ajouter d'autres points d'arrêt pour accélérer le débogage Par exemple, à partir de cette ligne, nous voulons sauter sur cette ligne sans passer par cette boucle une par une, car comme vous pouvez l'imaginer, cette boucle peut prendre un certain temps. Vous pouvez avoir des milliers d'utilisateurs au lieu de trois et nous ne voulons pas passer en revue tous les éléments de la boucle. Nous pouvons ajouter un autre point d'arrêt ici dans l'instruction If. Nous pouvons ajouter un autre point d'arrêt pour cette ligne, qui signifiera que l'utilisateur existe C'est pourquoi nous en sommes arrivés là Maintenant, au lieu d'utiliser ce bouton pour parcourir la fonction ligne par ligne, nous pouvons utiliser ce bouton qui reprendra script jusqu'à ce que le prochain point d'arrêt soit exécuté Nous en sommes actuellement à ce stade de la fonction. Si je clique sur ce bouton, nous arriverons maintenant à ce point de la fonction et à ce stade, vous pouvez voir le mot de passe dans le champ d'application local, qui est le mot de passe que nous avons transmis d'ici. Ensuite, nous avons la variable utilisateur, qui est cette variable locale à l'intérieur de la fonction. Comme vous pouvez le constater, nous avons pu trouver l'utilisateur avec ce mot de passe et ce nom d'utilisateur. Nous avons également la variable locale du nom d'utilisateur, qui est ce nom d'utilisateur qui a été transmis à cet utilisateur connecté. Maintenant que nous savons qu' un objet utilisateur est défini ici, cela signifie que ce bloc de code ne doit pas être exécuté, il doit donc ignorer cette instruction If et nous devrions arriver à cette ligne numéro 41 et nous pouvons vérifier cela en appuyant à nouveau sur ce bouton. Comme vous pouvez le constater, cette partie du code n'a pas été exécutée parce que nous avons trouvé notre utilisateur. C'est pourquoi nous enregistrons simplement le rôle de l'utilisateur. Ensuite, si nous cliquons dessus une fois de plus, la fonction sera complètement exécutée. Nous pourrons consulter le journal de notre console et voir si la connexion a été réussie. 40. Utiliser des points d'arrêt conditionnels: Parfois, vous ne voulez pas suspendre l'exécution du code à chaque fois un point d'arrêt est atteint et vous ne voulez le suspendre que lorsque certaines conditions sont remplies Essayons un autre exemple de connexion d'utilisateur, et cette fois, connectons-nous avec l'autre utilisateur que nous avons, qui est le rôle d'utilisateur. Nous allons donc passer un nom d'utilisateur incorrect ici, mais nous allons transmettre le mot de passe correct pour le deuxième argument. Supposons maintenant que nous ayons un problème spécifique qui ne se produit que pour les utilisateurs ayant le rôle d'utilisateur. Dans ce cas, nous souhaiterons peut-être ajouter un autre point d'arrêt ici pour vérifier l'utilisateur que nous obtenons à chaque itération Mais nous ne voulons pas vérifier tous les utilisateurs. Nous voulons vérifier uniquement les utilisateurs qui ont le rôle d'utilisateur. Dans ce cas, nous pouvons utiliser des points d'arrêt conditionnels. Donc, au lieu de cliquer dessus, vous allez cliquer, et à partir de là, nous allons sélectionner Ajouter un point d'arrêt conditionnel au lieu de Ajouter un point d'arrêt Et ici, cela nous demandera d'écrire la condition que nous voulons remplir pour que cette affaire soit publiée, nous savons que nous voulons que le rôle du point de l'utilisateur soit égal à celui de l'utilisateur. Vous pouvez écrire le conditionnel comme ceci et appuyer sur Entrée Vous pouvez maintenant voir qu'il est marqué en orange et non en bleu C'est parce qu'il s'agit d'un point d'arrêt conditionnel, qui ne sera déclenché que lorsque la condition sera vraie, ce qui nous permettra de débuter plus efficacement sans interruption Si vous actualisez cette page, le code sera d'abord affiché sur cette ligne, et nous pourrons vérifier nos variables locales ici, le mot de passe, l'utilisateur et également le nom d'utilisateur. Vous pouvez voir que nous n'avons pas encore trouvé l'utilisateur, et nous pouvons passer au point d'arrêt suivant Et cette fois, vous pouvez voir que nous sommes entrés dans ce point de terminaison et uniquement lorsque le rôle de l'utilisateur était utilisateur. Donc, pour le premier utilisateur, cette partie n'a pas été publiée et uniquement lorsque nous avons atteint le deuxième utilisateur dont le rôle était égal à celui de l'utilisateur. Ce n'est qu'alors que ce point d'arrêt a été appliqué. Nous avons donc ignoré les utilisateurs inutiles et nous sommes passés directement à cet utilisateur qui a le problème Nous pouvons parcourir notre code ligne par ligne ou par points d'arrêt Donc, si nous passons au point d'arrêt suivant, vous pouvez constater qu'à ce stade, nous n'avons pas trouvé notre utilisateur, qui signifie que les informations d'identification ne sont valides ou que notre fonction ne fonctionne pas correctement Et si nous appuyons une fois de plus, vous verrez que nous n'en arrivons pas là, ce qui signifie que nous renvoyons la valeur false dans cette fonction dans ce cas, et nous pouvons le vérifier dans la console. Vous pouvez constater que la connexion a échoué et que nous avons fourni un mot de passe ou un nom d'utilisateur incorrect. Dans ce cas, vous devez vérifier soit les informations d'identification qui ne sont pas valides, soit vérifier cette partie du code, qui compare le nom d'utilisateur et le mot de passe. Dans notre cas, nous savons que nous avons fourni un nom d'utilisateur incorrect. Si je corrige le nom d'utilisateur maintenant et que je l'enregistre, nous pouvons relire le code. Nous pouvons passer au point d'arrêt suivant et nous avons trouvé ici l' utilisateur avec tous les utilisateurs Au prochain point d'arrêt, nous aurons déjà cet objet utilisateur Comme vous pouvez le voir cette fois, nous avons trouvé l'utilisateur, qui signifie que le mot de passe et le nom d'utilisateur étaient corrects. Si nous appuyons une fois de plus, nous atteignons ce point d'arrêt, qui signifie que les informations d'identification sont valides Nous n'avons donc pas quitté la fonction Si je clique une fois de plus dessus, nous reviendrons et nous pourrons vérifier dans la console que la connexion a été réussie. Cette fonction de point d'arrêt conditionnel est particulièrement utile dans les boucles ou les fonctions qui s'exécutent plusieurs fois, car vous pouvez identifier exactement le moment où quelque chose ne va pas en fonction de conditions spécifiques et elle vous permet d'éviter de vérifier des points d'arrêt inutiles 41. Récapitulation et exercices: C'est tout pour cette section où vous avez appris à déboguer et à gérer les erreurs dans votre code JavaScript Nous avons découvert les types d'erreurs les plus courants et les moyens de les éviter. Et ces types d'erreurs courants sont les erreurs de syntaxe, les erreurs d'exécution et les erreurs logiques. Les erreurs de syntaxe et d'exécution sont assez faciles à détecter, mais pour les erreurs logiques, nous avons quelques méthodes qui nous aident à déboguer le code La première option consiste à utiliser les journaux de console pour le débogage, ce qui est l'une des méthodes les plus simples, mais il est également très efficace apprendre comment générer des erreurs personnalisées, puis comment les gérer en utilisant les blocs try catch Vous avez également appris à utiliser les outils de développement du navigateur, et particulièrement l'onglet des sources pour déboguer des applications plus complexes Et vous voyez comment définir points d'arrêt et après l'exécution du décodage, puis comment nous pouvons décoder étape par ligne ou point d'arrêt par point d' arrêt Ensuite, vous déterminez comment inspecter ces variables en temps réel et comment vous pouvez voir le code de vos fonctions et voir quelle fonction est en cours d' exécution à chaque instant Ces techniques vous aideront à déboguer vos applications plus efficacement et à détecter et à gérer les erreurs sans écraser vos programmes Également en dessous de cette dernière leçon, vous trouverez des ressources pour vous entraîner aux erreurs de syntaxe, d'exécution et logiques. Je vais inclure des exercices où vous trouverez de petits programmes contenant des erreurs de syntaxe, d'exécution et de logique. Vous devez déboguer et corriger ces erreurs à la fin, vous pouvez regarder le programme corrigé Essayez d'abord de les déboguer vous-même, et si vous ne trouvez pas la solution, consultez ce document de solution que je fournirai dans la description ci-dessous. 42. Introduction et projet de tableau de bord météo: Bienvenue dans la dernière section de notre cours sur les fondamentaux de JavaScript. Dans cette section, nous aborderons les parties les plus critiques et les plus intéressantes de Javascript, savoir le JavaScript asynchrone. À la fin de cette section, vous maîtriserez les rappels et les promesses en JavaScript Nous en apprendrons davantage sur les minuteries telles que le réglage du délai d'expiration, réglage de l'intervalle, etc. la section précédente, nous avons également appris à gérer les erreurs et à les déboguer. Mais dans cette section, nous allons également apprendre comment gérer ces erreurs asynchrones Vous apprendrez la dernière syntaxe d' utilisation d'Async of eight en JavaScript, puis nous apprendrons comment effectuer des requêtes HTTP à l'aide de l'API Fetch Vous découvrirez également le JSON, la syntaxe de JSON, comment les analyser et comment les stringifier Nous découvrirons également le modèle de fredit unique en JavaScript, ce que cela signifie et quelle est la boucle d'événements qui nous aide à exécuter ces tâches asynchrones Vous découvrirez le Costac, le tas de mémoire et indices de microtâches et de macrotâches, qui sont utilisés pour gérer Enfin, nous parlerons fuites de mémoire en JavaScript et de la manière dont vous pouvez vous assurer d'éviter cette erreur courante dans votre code. Tout au long de cette section, nous allons créer cette application de tableau de bord météo dans laquelle les utilisateurs peuvent saisir le nom d'une ville. Par exemple, je peux saisir le nom d'une ville, disons Berlin, et je peux cliquer sur Rechercher. Ici, nous utiliserons une API externe pour obtenir ces données de la météo de Berlin, puis les afficher pour les utilisateurs. Cela inclura la gestion des réponses asynchrones et la mise à jour dynamique de l'interface utilisateur ici Ici, nous allons faire des requêtes HTTP avec l'API PH. Vous allez gérer des opérations asynchrones avec des promesses et des attentes asynchrones, dont nous avons parlé dans Nous utiliserons également les rappels pour gérer des événements tels que le fait de cliquer sur les boutons ou de définir des délais Nous allons implémenter des minuteries comme celle-ci pour actualiser les données météorologiques Ce sera dynamique et il sera actualisé toutes les minutes pour vous fournir dernières données sur la température et la météo. Nous gérerons également les événements asynchrones Par exemple, si l'utilisateur saisit nom aléatoire et qu'il ne s'agit pas d'un nom de ville et de son centre, il gérera ces événements de manière asynchrone. En interagissant avec ces API, vous apprenez le format JSON et la façon dont il est utilisé pour communiquer entre les serveurs et les navigateurs. Pour suivre, j'ai fourni le fichier Zip, qui est le code de démarrage de cette application météo. Et une fois que vous l'avez décompressé et ouvert, vous ne remarquerez que deux fichiers ici Le premier est l'index HTML et le second ne contient que des vignettes que vous pouvez ignorer. Dans ce fichier HTML à points d'index, nous avons un titre, qui est le titre de cette application. Nous avons le conteneur de recherche qui contient cette entrée où nous écrivons le nom de la ville et appuyons sur Entrée et également sur le bouton pour confirmer la recherche ou nous pouvons également utiliser Entrée. Nous utiliserons donc également les principaux événements de presse dans ces leçons. Et nous avons deux plongées ici. Le premier concerne les informations météorologiques. C'est cette partie que vous avez vue ici lorsque nous affichons les données météorologiques d'une ville en particulier. Et la deuxième partie consiste à afficher des messages d'erreur pour les utilisateurs. C'est donc ce que nous allons utiliser pour gérer ces événements asynchrones en JavaScript Enfin, vous pouvez voir que nous avons un script attaché à cet index HTML, appelé OJS, qui n'existe pas ici Pour l'instant, vous pouvez simplement créer un fichier JS op point, et c'est ici que nous allons écrire le code JavaScript pour gérer ces requêtes de récupération Nous utiliserons cette API externe d' open weather pour afficher les données d'une ville en particulier. Mais avant de commencer, voyons d'abord ce que sont les API dans la leçon suivante, quel est format JSON avec lequel nous allons travailler et comment nous pouvons envoyer des requêtes à ces API. 43. Comprendre les API et JSON: Dans cette leçon, nous allons explorer le format de données JSON de l' API et configurer notre API météo pour le tableau de bord météo. Commençons par comprendre ce qu'est une API. API est l'abréviation d'interface de programmation d'applications . En termes simples, il s'agit d'un ensemble de règles et de protocoles permettant créer et d'interagir avec des applications logicielles. Plus précisément, les API Web permettent à différents systèmes logiciels communiquer entre eux via Internet. Nombre de ces API nécessitent une clé d'API pour l'authentification et pour le suivi de l'utilisation. Donc, imaginez que nous avons notre navigateur dans lequel nous allons augmenter la météo. Et de l'autre côté de la récompense, nous avons ce serveur API, auquel nous devons accéder via Internet. Si vous faites simplement une demande à ce serveur API et demandez les données météorologiques, il rejettera votre demande et vous ne recevrez aucune donnée de ce serveur. Et c'est parce que vous devez lui envoyer une clé d'API, qui vérifiera que vous pouvez accéder à cette API, et elle suivra également votre utilisation. Ainsi, si vous envoyez une clé d'API avec votre demande, vous recevrez cette fois une réponse de ce serveur d'API, qui vous fournira les données dont vous avez besoin. Ces clés d'API aident donc simplement les fournisseurs d'API à gérer l'accès et à appliquer les limites d'utilisation. Par exemple, cette API spécifique avec laquelle nous allons travailler vous donne 1003 requêtes par mois. Cela s'explique par le fait que la plupart des serveurs d'API ont des limites de débit, c' est-à-dire le nombre spécifique de demandes que vous pouvez envoyer 5 minutes ou plus d'une heure en fonction de leur configuration. Et par exemple, si vous dépassez le millier de demandes par minute, vous devez commencer à payer pour cette API, et c'est pourquoi ils utilisent ces clés d'API pour suivre leurs utilisateurs. demande que nous recevrons de ce serveur d'API sera au format JSON. Voici un exemple de réponse JSON provenant de cette API avec laquelle nous allons travailler. Comme vous pouvez le constater, c'est une façon presque lisible par l'homme d'afficher les données. Le JSON est également très similaire aux objets JavaScript. Comme vous pouvez le constater, nous n'avons que des paires clé-valeur. Par exemple, nous avons ce cordon, qui est la coordonnée de la ville, puis vous avez un objet avec deux propriétés, la longitude et la latitude. Voici les coordonnées de cette ville en particulier. Vous avez peut-être des propriétés comme la météo, et il s'agit d'un ensemble d'objets. Et chaque objet contient un identifiant, une description, l' icône, etc. Pour mieux comprendre cela, configurons notre API météo, et vous devez vous rendre sur openweathermap.org Ou vous pouvez cliquer sur le lien que je vais fournir dans la description. Et ici, vous devez vous inscrire et créer un compte. Comme vous pouvez le voir, je me suis déjà inscrit et j'ai un compte ici. Ensuite, si vous cliquez sur cette API dans leur menu, vous serez redirigé vers la documentation de l'API. Tout d'abord, vous remarquerez que sur le côté droit, vous pouvez voir que nous pouvons effectuer des milliers d'appels d'API par jour gratuitement. Et c'est exactement pourquoi ils ont besoin d'une clé API afin de pouvoir suivre votre utilisation. Et si vous dépassez cette limite, vous devez commencer à payer pour cela. Mais dans le but d'améliorer notre climat, nous voulons évidemment dépasser cette limite. Vous ne leur paierez donc rien et vous n'aurez même pas besoin de fournir de carte de crédit. Il vous suffit de vous inscrire et d' accéder à votre tableau de bord. Si vous faites défiler la page un peu vers le bas, vous pouvez voir les cas d'utilisation de cette API. Par exemple, vous pouvez l'utiliser pour afficher les données météorologiques actuelles ou pour afficher les prévisions horaires pour quatre jours, etc. Dans notre cas, nous devons afficher les données météorologiques actuelles. Nous passerons à la documentation de ce cas d'utilisation spécifique. Vous trouverez ici l'API et les points spécifiques auxquels nous devons accéder Comme vous pouvez le constater, cela commence par leur domaine, puis il y a la réduction des données, puis la version de leur API, qui est 2.5 pour cette version, puis le slash wet after the slash weather Nous fournissons certains attributs dynamiques Le premier est la latitude et le second la longitude. Mais comme il nous sera difficile d'obtenir la longitude et la longitude de chaque ville, nous pouvons faire défiler la page un peu plus bas et vous remarquerez qu'il existe en fait une autre requête que nous pouvons utiliser, qui est plus utile pour nous. Nous pouvons simplement fournir le nom de la ville et également cet identifiant, qui est la clé API pour accéder à ces données. La première chose à faire avant d'accéder à une API est de configurer la clé d'API. Si vous cliquez sur cette clé d'API, serez redirigé vers yourksbard ou vous pouvez simplement visiter openweathermap.org Je vais également le lier dans la description. Vous pouvez voir ici toutes vos clés d'API, et comme vous pouvez le voir pour le moment, nous n'en avons qu'une, qui est la clé par défaut dans notre cas et elle est également active ici. Vous pouvez avoir autant de clés d'API que vous le souhaitez. Par exemple, je peux en générer une autre spécifiquement pour notre application météo, que je nommerai application météo. Et si vous cliquez sur Générer, vous pouvez maintenant voir qu'une nouvelle clé d'API est générée ici. Vous pouvez donc utiliser votre clé par défaut ou créer des clés d'API spécifiques pour chacune de vos applications. Tout d'abord, copions simplement cette clé d'API et accédons à notre code de démarrage. Ici, nous devons stocker cette clé d' API dans une variable, et nommons-la clé d' API en majuscules. Et ici, nous allons stocker cette clé d'API. Nous nommons généralement les clés d'API et les autres constantes de ce type en majuscules en JavaScript C'est simplement considéré comme une bonne pratique. Nous allons donc enregistrer cela dans notre fichier. Maintenant que nous avons cette clé d'API avant d'écrire du code, vérifions simplement qu'elle fonctionne. Nous devons copier l'une de ces demandes, et vous pouvez ouvrir un nouveau haut de page et le coller dans votre navigateur. Nous devons maintenant remplacer cette clé d'API par notre clé réelle, qui se trouve ici. Je vais le copier et remplacer cette clé d'API par la mienne. Ensuite, pour le nom de ville, il vous suffit de fournir un nom de ville valide. Par exemple, nous pouvons écrire London ici et si j'appuie sur Entrée, vous verrez que nous recevons une réponse d'erreur avec un code d'état à quatre contre un, et le message indique que la clé API n'est pas valide. Et c'est une chose importante à noter à propos d' openweathermap.org Une fois que vous vous êtes inscrit à l'API open weather et que vous avez créé votre première clé d'API, celle-ci n'est pas encore activée et elle le sera dans les prochaines heures. Vous devez donc attendre un peu, malheureusement. Et cela est en fait indiqué dans leur propre documentation d'API. Il vous suffit donc d' attendre qu'il soit activé. Mais une fois activée, par exemple, ma clé par défaut est déjà activée. Si je la remplace simplement par mon ancienne clé et que j'appuie sur Entrée, vous verrez que cette API répond avec vous verrez que succès Nous obtenons maintenant toutes les données dont nous avons besoin pour que la ville nommée Londres affiche sa météo et toutes les informations pour notre application météo. Dans mon cas, cela n' a pris que 10 minutes. Dans votre cas, cela peut prendre jusqu'à une heure. Attendez simplement que votre clé d'API soit activée, et une fois que ce point de terminaison fonctionnera, vous pourrez passer à la leçon suivante où nous commencerons à créer notre application météo. 44. Modèle à un seul fil et boucle d'événements: Comprenez le modèle à fil unique et la boucle d'événements en JavaScript avant de nous lancer dans la création du tableau de bord météo JavaScript s'exécute en une seule frette, ce qui signifie qu'il ne peut exécuter qu'une seule tâche à la fois. Mais que se passe-t-il lorsque nous devons exécuter des tâches fastidieuses , comme faire une demande d'API ou définir un minuteur ? C'est là que la boucle d'événements devient très utile en JavaScript. Lorsque nous invoquons des fonctions en JavaScript, nous avons ce qu' on appelle Col SAC, qui permet à JavaScript de suivre l'exécution des fonctions. Il ne peut traiter qu'une seule fonction à la fois. Si vous connaissez Q, agit du Q du dernier entré, premier sorti, ce qui signifie que la dernière fonction sera la première fonction à être exécutée. Supposons que nous ayons invoqué trois fonctions en même temps, la première tâche, la tâche asynchrone et la deuxième Désormais, la première et la deuxième tâche sont synchrones, ce qui signifie qu'elles ne prennent pas trop de temps à être exécutées Mais la deuxième tâche est asynchrone. Dans ce cas, Event Loop le transmettra aux API Web. Les API Web nous permettent d'exécuter ce code asynchrone. Ce sont des éléments comme l'API Fetch, l'API dome, avec laquelle nous avons déjà interagi, et des minuteries telles que Supposons que dans ce cas précis, la tâche asynchrone utilisait le délai d'attente défini, qui est une opération asynchrone Dans ce cas, le Costac ne l'exécute pas immédiatement. Comme vous pouvez le constater, cela a déjà été transmis aux API Web. J'ai continué à exécuter la deuxième tâche et il a oublié la tâche asynchrone à ce stade Désormais, les API Web le transmettront aux files d'attente de tâches, qui sont des requêtes spécifiques aux opérations asynchrones Dans ce cas précis, nous exécutons un délai d'attente défini. Cela sera exécuté dans les files d'attente de tâches. Une fois que cette opération asynchrone est prête, la file de tâches en informe le CTC et ce n'est qu' alors que le CTC exécute la Comprenez-le d' une manière pratique. Ce sont les tâches qui sont les fonctions dont j'ai parlé dans le diagramme, et maintenant nous exécutons ces fonctions une par une. Nous exécutons d'abord la première tâche, puis la tâche asynchrone, puis la deuxième Si toutes ces opérations étaient synchrones, alors dans la console, nous verrions d'abord ce journal de console, qui indique que la première tâche est exécutée Ensuite, nous verrions celle-ci, qui s'exécute au bout de 2 secondes, puis nous verrons celle-ci, qui est la deuxième tâche en cours d'exécution. Comme l'une d'entre elles est asynchrone et qu'il s'agit de la deuxième tâche, Javascript placera ces première et deuxième tâches dans la pile cool et cette seconde sera transmise aux API Web, puis elle ira dans la file d'attente des tâches et libérera la pile cool pour d'autres codes puissent s'exécuter afin de ne pas bloquer le fred principal puisque JavaScript est un thread unique et qu'il s'agit de la deuxième tâche, Javascript placera ces première et deuxième tâches dans la pile cool et cette seconde sera transmise aux API Web, puis elle ira dans la file d'attente des tâches et libérera la pile cool pour que d'autres codes puissent s'exécuter afin de ne pas bloquer le fred principal puisque JavaScript est un thread unique, disons que cette tâche asynchrone peut durer 200 000 millisecondes Dans ce cas, nous ne voulons pas bloquer le fread et attendre que cette opération soit terminée C'est pourquoi nous le transmettons à la file d'attente des tâches , qui nous avertira une fois cette tâche terminée. Dans ce cas, si vous ouvrez le terminal, vous pouvez voir que la première tâche a été exécutée immédiatement, puis la deuxième tâche a été exécutée immédiatement et que ce n'est qu'alors que la deuxième fonction, qui est la tâche asynchrone, sera exécutée une fois les 2 secondes écoulées Même si ce n'est pas 2 secondes, disons que cela s'exécute immédiatement. Si nous supprimons ces 2 secondes, cela ne représente que 0 seconde. Vous pouvez voir que cette tâche est toujours exécutée après les deux premières C'est parce que Javascript donne la priorité aux opérations synchrones, la première et la seconde, et ce n'est qu'une fois les première et deuxième tâches synchrones terminées qu'il exécute les tâches asynchrones, même si elles ne prennent pas de temps à être traitées comme si elles prenaient zéro milliseconde . C'est parce que Javascript donne la priorité aux opérations synchrones, la première et la seconde, et ce n'est qu'une fois les première et deuxième tâches synchrones terminées qu'il exécute les tâches asynchrones, même si elles ne prennent pas de temps à être traitées comme si elles prenaient zéro milliseconde. Néanmoins, il s'agit d'une tâche asynchrone et c'est pourquoi elle est exécutée après les fonctions synchrones ici. 45. Promesses et rappels: prochaine leçon, nous allons enfin commencer à écrire notre application météo. Nous allons commencer par comprendre les rappels et les promesses en JavaScript, puis nous les appliquerons directement dans l'application Commençons d'abord par les promesses. Les promesses sont des objets JavaScript qui indiquent l'achèvement ou l'échec d'une opération asynchrone. Et nous devrons utiliser des promesses lorsque requêtes HDTP à cette API météo pour récupérer les données, et ces promesses peuvent avoir un état libre après Il peut être soit en attente soit rempli ou rejeté. Donc, si le statut est en attente, cela signifie que l'opération n'est pas encore terminée, elle est donc en cours. Si le statut est rempli, cela signifie que l' opération est complètement réussie et que la promesse est résolue Sinon, elle sera rejetée, ce qui signifie que l' opération a échoué. Par exemple, votre demande HDTP que vous avez envoyée à l'API peut échouer, et dans ce cas, vous aurez le statut de rejet Voyez-le en action. Créons une variable. Appelons cela M promise, et cela sera égal à new promise, qui est un constructeur de promesse en JavaScript Cette promesse accepte alors une fonction. Comme vous pouvez le constater, cela nous suggère également les arguments. Le premier est l'argument de résolution et le second est l'argument de rejet. Ensuite, cette fonction sera exécutée. Ici, vous pouvez écrire n'importe quelle opération. Par exemple, revenons au délai d' expiration défini que nous venons d' utiliser dans la leçon précédente Ce délai défini accepte une fonction, qui est une fonction de rappel. Cette fonction de rappel sera exécutée une fois le certain laps de temps écoulé et vous la fournirez dans le deuxième argument de ce délai d'expiration défini Il s'agit de l'argument timeout, qui est exprimé en millisecondes Par exemple, si je passe 1 000 ici, cela signifie 1 seconde. Et ici, dans le corps de la fonction de rappel, nous écrivons le code qui sera exécuté une fois ces 1 000 millisecondes C'est là que nous pouvons résoudre ou rejeter la fonction. Donc, à ce stade, lorsque les 1 000 millisecondes ne sont pas encore passées, cela signifie que l'état est en attente, puis nous pouvons soit le respecter, soit le rejeter Donc, si nous voulons y parvenir, nous devons appeler l' argument de résolution que nous avons obtenu d'ici, et cet argument de résolution est à nouveau une fonction, et nous pouvons lui transmettre n'importe quelle valeur comme si l'opération avait réussi. Ainsi, une fois ces 1 000 millisecondes passées, cette fonction de résolution sera appelée, ce qui signifiera que la promesse a été remplie Si vous souhaitez le rejeter, nous pouvons appeler la fonction de rejet, et nous pouvons indiquer ici n'importe quelle raison comme le rejet de la promesse. Mais pour l'instant, réalisons cela avec détermination et voyons ensuite comment nous pouvons utiliser cette promesse. Nous venons donc de définir cette promesse, mais nous ne l'exécutons pas encore. Et puisque nous avons dit que les promesses sont des objets Javascript, vous pouvez écrire le nom de la promesse, puis le point, et vous pouvez voir ici tous les attributs de cette promesse. Et comme vous pouvez le constater, nous avons des méthodes de cadrage sur cette promesse auxquelles nous pouvons accéder, et cela est commun à toutes les promesses. Il peut s'agir d'un capteur DN et enfin. Appelons la fonction DN. Cette fonction dix accepte une autre fonction et la valeur de celle-ci est le résultat que nous obtiendrons de cette promesse si elle était résolue. Pour l'instant, enregistrons simplement le résultat sur console pour voir ce que nous avons ici. Vous pouvez voir qu'une fois les 1 000 millisecondes passées, cette opération est dépassée, qui provient de cette fonction de résolution que nous avons ici, mais nous pouvons également la rejeter. Dans ce cas, le statut de cette opération sera Mais si vous rejetez une promesse, vous n'obtiendrez pas ce résultat ici. Et pour cela, nous avons l'autre méthode. Si vous vous en souvenez, nous pouvons également appeler méthode point catch pour cette promesse, et ici nous pouvons détecter l'erreur qui s'est produite dans la promesse. Nous obtenons une fonction qui nous donne l'erreur d'argument, et pour l'instant, enregistrons simplement cette erreur sur la console. Ici, vous pouvez voir que lorsque la promesse est rejetée, nous l'obtenons dans la fonction catch, et lorsqu'elle est remplie, nous l'obtenons dans la fonction DNV Il est courant de le structurer ainsi. Si vous appelez à la fois des blocs de dix et des blocs de cache, vous les appelez généralement des lignes séparées, comme celle-ci en JavaScript. Qu'en est-il de la méthode finale que nous avions également adoptée pour cette promesse ? Voyons ce que ça donne. Si nous appelons la fonction finally, vous pouvez voir si nous n' obtenons aucun argument dans le bloc final. Nous pouvons simplement exécuter une fonction ici , puis enregistrer la console enfin ici. Comme vous pouvez le constater, ce bloc final sera appelé lorsque cette promesse sera rejetée. Mais qu'en serait-il si c'était résolu comme ça et que nous ne le rejetons pas ? Dans ce cas, vous pouvez voir que nous obtenons le résultat ici dans la fonction DN. En gros, cette méthode finale est toujours exécutée, que la promesse ait été résolue ou rejetée, mais le DN et les blocs de cache sont exécutés en fonction de ce qui s'est passé dans votre promesse. Si le problème était résolu, vous entreriez dans le bloc DN et s'il était rejeté, nous entrerons dans le bloc de cache.