JavaScript moderne pour les débutants : partie 2

1. Introduction: [MUSIQUE] Bienvenue dans ce cours. Comme nous le savons tous, l'apprentissage de nouvelles compétences peut être difficile et JavaScript ne fait pas exception. JavaScript dispose d'un si large éventail de fonctionnalités et de choses pour lesquelles il peut être utilisé, et cela peut souvent laisser les débutants dans une situation difficile à se demander par où commencer, donc c'est pourquoi j'ai créé ce classe. Il s'agit de la deuxième partie de la classe qui repose sur les fondations que vous avez apprises dans la première partie. Si vous n'avez pas suivi la première partie, assurez-vous de passer par ce cours d'abord, sauf si vous avez déjà une expérience JavaScript et que vous souhaitiez couvrir les sujets de cette section. Si vous n'avez pas suivi un de mes cours auparavant, m'appelle Chris et je crée des sites Web depuis plus de 20 ans. J'enseigne également ces compétences depuis plus de sept ans, les deux cours vidéo ainsi meilleurs camps de démarrage de développement Web. Cette classe contient de nombreux sujets JavaScript, y compris des boucles et des instructions conditionnelles, un aspect profond des objets, des mathématiques, des dates et des minuteurs, ainsi qu'un dessin sur le canevas. Tous ces sujets que j'ai abordés de manière claire et structurée, tout en construisant des projets pratiques au fur et à mesure, y compris des exemples d'utilisation réels et aussi quelques mini-défis y compris des exemples d'utilisation réels et aussi quelques mini-défis avec la construction d'un jeu de pizzas pour combiner nombreuses parties de ce que vous avez appris. Ce projet sera assez important, mais nous allons le décomposer, afin que vous puissiez voir comment toutes les pièces s'adaptent ensemble. Plus tard, nous découvrirons certaines des parties les plus délicates telles que le JavaScript asynchrone, portée, le hissage et les fermetures. Avant de terminer avec deux autres projets finaux , nous aurons une petite application appelée Leaving so soon, qui est une fenêtre contextuelle d'intention de sortie, qui est utilisée pour attirer les visiteurs avec une offre lorsque ils essaient de quitter votre site. Si tous terminent la classe carrousel d'image JavaScript fidèlement fonctionnant. Il inclut un dossier de projet auquel nous ajouterons au fur et à mesure que nous progressons dans cette classe et il sera également développé comme référence utile à l'avenir. Merci de l'intérêt que vous portez à ce cours et je vous verrai dans la première leçon. 2. Dossier de projet Télécharger: Si vous avez déjà terminé la première partie de cette classe, vous pouvez continuer avec exactement les mêmes fichiers de démarrage que ceux utilisés dans la première partie. Cette partie 2 de la classe, nous commencerons à la section numéro 6, jusqu'à la fin. Je vais commencer par la première leçon qui concerne les boucles. Si vous avez ceci, vous êtes tout à fait bon pour la prochaine leçon. Si vous sautez dans la partie 2 sans prendre la partie 1, ce qui est tout à fait très bien aussi, mais vous devrez aller sur github.com et télécharger les fichiers de démarrage que nous allons utiliser tout au long de ce processus classe. Suivez le lien que vous pouvez voir à l'écran ici. Une fois que vous arrivez sur cette page, cliquez sur le bouton charbon vert, puis téléchargez-le sous forme de fichier zip. Ouvrez ce dossier de projet dans votre éditeur de texte préféré. Je vais utiliser Visual Studio Code, mais vous pouvez utiliser ce que vous préférez. C'est tout ce dont vous avez besoin pour commencer , et je vous verrai ensuite. Nous allons commencer par jeter un coup d'œil aux boucles for-loops. 3. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets, ce qui vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de éloigner de la classe . Vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 4. Pour Boucles: Bienvenue de retour. Cette section va porter sur les boucles. Nous allons lancer les choses avec une boucle for-loop. Lorsque nous avons commencé à travailler avec des tableaux plus tôt, nous avons examiné différentes façons de répéter certaines tâches à l'aide de ces boucles. Les types de boucle que nous avons examinés étaient cartographiés, et FoReach, tous deux étaient des méthodes matricielles. Les boucles signifient que nous pouvons répéter les tâches beaucoup plus facilement. Même s'il existe différents types de boucles, ils continuent généralement de répéter une tâche plusieurs fois. Souvent, la principale différence réside dans la façon dont nous demandons à la boucle d'arrêter ces cartes, et les boucles FoReach étaient des méthodes de tableau, mais les boucles ne sont pas exclusivement destinées aux tableaux. Il existe également différents types de boucles que nous pouvons utiliser pour pouvoir passer en boucle à peu près tout ce dont nous avons besoin. Cette vidéo va se concentrer sur une boucle for-loop. Voici à quoi ressemble une boucle for-basique. Il se présente un peu comme une fonction ou une instruction if. Remarquez à l'intérieur des crochets deux points-virgules. Ils sont utilisés pour transmettre les expressions libres qui définissent le fonctionnement de notre boucle. Un exemple très simple ici est simplement de l'utiliser pour augmenter le nombre et nous examinerons quelques meilleurs exemples dans un instant. Mais pour la première expression, elle contient la valeur initiale ou initiale de notre boucle. Si nous voulons simplement commencer par un nombre zéro ou augmenter à chaque fois, nous configurons une variable à zéro, comme ceci. Deuxièmement, nous avons une condition et ici nous verrons que le nombre est inférieur à 10. Cette condition détermine si la boucle doit continuer. Si c'est vrai, la boucle continue. Si la valeur est fausse, la boucle se terminera. Enfin, si nous ne faisons pas quelque chose sur chaque boucle, la deuxième condition sera toujours vraie. Ici, nous augmentons la valeur du nombre d'un sur chaque boucle. Nous pouvons donc vérifier l'état après chacun de ces changements. Pour parcourir cet exemple après l'exécution de chaque boucle, le nombre sera augmenté un jusqu'à ce qu'il atteigne le numéro 10, entraîne la valeur false de la deuxième instruction qui entraîne la valeur false de la deuxième instruction, ce qui entraîne la boucle puis terminez. Dans cet exemple particulier, nous consignerons 10 valeurs, qui seront comprises entre zéro et le numéro neuf. Si la variable est déjà déclarée en dehors de la boucle for-loop, vous pouvez ignorer et inclure simplement les deuxième et troisième instructions, et les choses s'exécuteront toujours de la même manière qu'auparavant. De plus, il convient de noter que vous verrez de nombreux exemples avec le nom de la variable, la lettre i, qui est abréviation de l' initialiseur ou de la valeur initiale. C'est généralement le cas si nous n' utilisons cette variable que dans le cadre de la boucle et que nous n'avons pas besoin de noms de variables descriptifs ailleurs. Notez que nous devons toujours garder les points-virgules en place afin de pouvoir clairement séparer ces trois valeurs en quelques exemples. Jetons un coup d'œil à nos fichiers de démarrage. Pour cette section, accédez à la section numéro 6, qui est des boucles et des conditions. La première leçon, qui est for-loops, saute dans la page d'index, qui est à peu près vide pour l'instant. Ensuite, nous copierons le chemin d'accès à cela, puis le collerons à l'intérieur du navigateur. Nous n'avons pas de contenu pour le moment, juste le titre des boucles for-loops, puis le script vide en bas pour que nous puissions travailler. Allons à l'intérieur de la section script et nous pouvons commencer à créer notre première boucle for-loop. En regardant précédemment, nous utilisons le mot-clé for, crochet démarre nos instructions libres, puis les accolades bouclées. Pour cet exemple, nous allons simuler quelqu'un qui mange une pizza avec 10 tranches différentes. Ensuite, nous déduirons une tranche de pizza après chacune de ces boucles. Tout d'abord, notre initialiseur ou notre variable, que nous appellerons des tranches. Nous allons définir cette valeur sur la valeur initiale de 10 et la prochaine étape, nous continuerons à exécuter la boucle tant que ces tranches sont égales ou supérieures à la valeur d' un point-virgule. Ensuite, nous déduirons la valeur des tranches de la valeur d'une à chaque fois. Maintenant, pour résumer, nous allons commencer par 10 tranches ou la valeur de 10. Ensuite, une fois la boucle terminée, cela déduira une tranche pour qu'elle soit alors égale à neuf, neuf est supérieure ou égale à un, de sorte que la boucle continuera donc à fonctionner. Ensuite, il fonctionnera une deuxième fois. Ensuite, cela déduira les tranches de pizza à huit, puis sept, puis six. Il continuera de fonctionner jusqu'à ce que la valeur soit supérieure ou égale à un. À l'intérieur des accolades, nous ajoutons le code que vous souhaitez exécuter. Prenez un exemple simple, nous pouvons créer un journal de console avec la valeur des tranches. Cela va être déduit de 10 jusqu'à un. Après cela, une deuxième console se connecte avec le texte de chaque tranche. Nous pouvons également ajouter des éléments tels que des instructions conditionnelles à l'intérieur d'ici. Cette instruction conditionnelle va vérifier si les tranches sont égales à la valeur d'une. Si c'est le cas, nous serons en place dans un journal de la console avec le texte d'aucune tranche restante. Sauvegardons cela et passons dans les outils de développement. cliquez avec le bouton droit de la souris et « Inspecter » dans la console. Nous voyons que la valeur de 10 sur la première boucle est ensuite déduite de la valeur d'une à chaque fois. Nous descendons jusqu'à la valeur d' un, puis il prend une note des tranches restantes. Quelque chose que vous pouvez voir, mais probablement pas autant n' est pas une seconde valeur manquante, c' est-à-dire cette condition. Nous devons cependant laisser le point-virgule en place et avant de tester cela, vous remarquerez peut-être déjà un problème. Si vous n'avez aucune condition. Nous n'avons aucun moyen d' arrêter une boucle. Cela va continuer à fonctionner à l'infini. C'est quelque chose dont nous devons faire attention lors de la création de boucles. Nous devons nous assurer que la condition des boucles finit par devenir fausse. Sinon, nous nous retrouverions dans une boucle infinie, ce qui entraînerait le blocage du navigateur. Ne faites pas cela et ne suivez pas cet exemple. Mais je vais vous montrer ce qui se passe dans le navigateur. Si nous sauvegardons cela, rafraîchissez-le. Nous voyons que la boucle s'exécute des milliers de fois, ce qui prend toutes les ressources du navigateur, ce qui provoque un crash éventuel. Pour éviter cet écrasement ou cette boucle infinie, nous devons utiliser manuellement le mot-clé break à l'intérieur de la boucle lorsque nous voulons qu'elle s'arrête. Par exemple, si nous passons à cette section inférieure, nous savons dans l'instruction if qu'il s' agit de la dernière boucle. Ce que nous pouvons faire, c'est que nous pouvons ajouter le mot-clé break. Cela sort ensuite de la boucle , puis arrête l'exécution du code. Nous pouvons tester cela en ouvrant encore une fois le navigateur. Ouvrez la page d'index, puis accédez outils de développement, à la console et à notre boucle, cela fonctionne désormais comme prévu. Une autre chose utile que nous pouvons faire avec boucles for-consiste à créer plusieurs éléments, tels que des éléments de liste. À l'aide d'une boucle, nous pouvons créer, disons, 10 éléments avec beaucoup moins de code que nous ne le ferions si nous l' écrivions 10 fois. Faisons cela juste à l'intérieur du script, créera une constante appelée ul, où nous allons créer une nouvelle liste non ordonnée. Nous le faisons avec Document.CreateElement. Transmission des éléments ul que vous souhaitez créer. Juste avant de commencer à créer les éléments de la liste, nous ajouterons notre liste non ordonnée au corps. Prenez le corps avec Document.Body.AppendChild, en passant notre variable ul. revenant simplement à ce que nous avons examiné précédemment, nous allons modifier notre exemple de pizza et le remplacer par le nom de variable i. Rappelez-vous que c'est une convention de dénomination courante pour une variable à l'intérieur de une boucle. Nous allons initialement définir cette valeur comme une valeur de 1. Nous allons le faire dans le sens inverse d'avant. Nous commencerons par la valeur initiale d'un, puis nous continuerons à exécuter la boucle pendant que je suis inférieur ou égal à la valeur de 10. Par conséquent, nous devons augmenter cela de la valeur d' un sur chaque boucle, ce qui entraînera l'exécution de la boucle 10 fois. Nous pouvons déplacer tous les contenus de l'intérieur ici, puis créer nos éléments de liste. Créons notre élément de liste, nous allons sélectionner le document.CreateElement passe dans l'élément de liste. Stockez-le à l'intérieur d'une constante appelée li. Cela nous donnera alors un élément de liste vide. Nous devons ensuite placer le contenu l'intérieur de la balise d'ouverture et de fermeture. Nous pouvons le faire avec Documents.CreateTextNode, et nous pouvons placer dans n'importe quel exemple de texte que nous voulons faire à l'intérieur d'ici. Plutôt qu'une chaîne normale, je vais insérer une variable à l'aide des backticks. Nous dirons l'élément de liste placé dans notre variable avec le symbole $ et les accolades. Nous savons d'en haut que nous avons une variable appelée i, qui est égale à la valeur d'un. Ensuite, si vous continuez d'augmenter la valeur d'un pour chaque boucle. Nous pouvons vérifier cela en plaçant ça à l'intérieur d'ici. Cela devrait commencer par la valeur de l'élément de liste un, l'élément de liste deux, etc. Tout cela à l'intérieur d'une constante, disons un texte. Ensuite, nous pouvons fusionner ces deux éléments ensemble en accédant au parent, qui est l' élément de liste qui utilise AppendChild. Placez ensuite notre texte à l'intérieur de l'élément de liste. Enfin, lorsque nous créons chacun de ces éléments de liste, nous voulons ensuite nous pousser vers notre liste non ordonnée. De la même manière que nous l'avons fait avec notre article de liste. Nous sélectionnons notre liste non ordonnée AppendChild, où nous transmettons l'élément de notre liste. Jetons un coup d'œil, rafraîchissons le navigateur. Cela doit juste être i pour correspondre à l'actualisation de la variable. Nous voyons maintenant la valeur de l'élément de liste un tout au long de la liste pour lister l'article 10. Comme vous pouvez l'imaginer, si nous avons créé ces 10 fois distinctes, cela entraînerait beaucoup plus de code. L'utilisation de cette boucle en fait un exemple beaucoup plus court. 5. Pour ...in & For...in: Nous allons maintenant couvrir deux autres types de boucles, appelées for-in et for-of. Ils ont l'air assez similaires et ils parcourent tous les deux quelque chose comme vous vous y attendiez, mais la principale différence est ce qu'ils peuvent parcourir. Ouvrons les fichiers de démarrage et voyons ce que nous avons. la barre latérale, passez Dans la barre latérale, passez à la leçon numéro 2 de cette section, qui est for-in et for-of, puis ouvrez-la dans le navigateur. Tout d'abord, nous voyons une section for-in qui contient un objet produit avec diverses propriétés imbriquées à l'intérieur. Comme vous pouvez vous y attendre, c'est ainsi qu'une boucle for-in fonctionne. Nous utilisons ce type de boucle pour parcourir les propriétés à l'intérieur d'un objet, telles que le nom et la taille. Maintenant, il y aura la section for-of, et elle est utilisée pour passer en boucle sur des objets itérables. Un objet itérable est essentiellement certains d'entre eux que nous effectuons une boucle, comme un tableau ou une liste de nœuds. Commençons par le haut avec notre boucle for-in, et nous allons l'utiliser pour passer en boucle sur nos objets produits. Nous pouvons le faire juste en dessous. Cela ressemble un peu à notre boucle for-loop de la vidéo précédente, nous avons configuré le mot-clé for, les crochets puis les accolades. Sauter sur le premier jeu de crochets, et c'est ainsi qu'une boucle for-in fonctionne. Nous avons configuré une variable, et nous appellerons cette propriété car nous parcourons toutes les propriétés de cet objet, qui se trouvent dans notre objet produit. C'est de là que vient le terme for-in, nous avons le mot-clé for, puis le mot-clé in entre crochets. Nous sommes en boucle sur cet objet produit complet , puis nous stockons la valeur de la propriété à l'intérieur de cette constante. Voyons à quoi cela ressemble avec un journal de console de la valeur de notre variable, propriété, l'actualisation, et nous voyons la valeur du SKU, le nom, la taille et la couleur. Cela nous donne la valeur de la clé, mais qu'en est-il de la valeur réelle de la propriété telle que la chemise cool, taille moyenne et le bleu ? Eh bien, nous pouvons également le faire en accédant à notre produit, puis en utilisant les crochets. Jetons un coup d'œil à ce que cela ressemble à l'intérieur d'un journal de console. Nous pouvons utiliser les coches arrière pour insérer une variable, et nous allons commencer par insérer la valeur de la propriété. Ce ne sont que les touches que nous verrons déjà à l'intérieur de la console, mais ajoutez ensuite un deux-points pour séparer cela, puis insérez notre deuxième variable. La deuxième variable sera chacun de ces produits. Nous allons saisir le produit, puis nous pourrons utiliser les crochets pour le réduire à une propriété particulière. Nous transmettons la valeur du SKU, du nom, de la couleur ou de la taille. Si nous l'enregistrons et l' actualisons, nous avons maintenant créé une nouvelle chaîne pour chacune de ces propriétés, qui inclut à la fois la clé et la valeur de la propriété. C'est ainsi qu'une boucle for-in fonctionne sur un objet en boucle. Jetons maintenant un coup d'œil à for-of. Je veux commenter cette section, puis descendre en bas sous nos autorisations. Encore une fois, cela commence par le mot-clé for, les crochets et les accolades, et il prend également en compte une variable. Disons la valeur const, qui sera définie sur chacune des valeurs à l'intérieur du tableau. Cette fois-ci, plutôt que d'utiliser le mot-clé in que nous utilisons, puis transmettez exactement ce que nous voulons parcourir. Dans notre cas, il s'agit du tableau d'autorisations juste en haut. C'est dans les autorisations, puis à l'intérieur des accolades, nous pouvons accéder à notre valeur. Sur la première boucle, la valeur est utilisateur, la seconde boucle est éditeur, puis admin, sauvegarde et actualisation, et il y a nos trois valeurs à l'intérieur de la console. Comme vous pouvez le voir à l'intérieur de ses commentaires en haut, choses comme une liste de nœuds peuvent également être bouclées. N'oubliez pas que lorsque nous utilisons quelque chose comme sélecteur de requêtes pour obtenir plusieurs éléments, une liste de nœuds est ce que nous récupérons. Pour essayer cela, nous avons également besoin de quelques éléments pour passer en boucle. Je vais sortir de ces scripts, créer une liste non ordonnée avec des exemples d' éléments de liste juste à l'intérieur. allons dupliquer deux fois de plus au lieu de tourner les numéros 2 et 3, puis nous pourrons passer en boucle sur nos trois éléments de liste, qui retourneront ensuite une liste de nœuds. Par conséquent, nous pouvons utiliser la boucle for-of. L'étape 1 consiste à accéder aux trois éléments de la liste. Je vais juste au-dessus de notre boucle for, créer un lien d'appel constant, les récupérer avec Document.QuerySelector, en fait, nous avons besoin de QuerySelectorAll puisque nous accédons plusieurs éléments et une fois que vous aurez récupéré notre liste articles. Maintenant, plutôt que d'accéder à nos autorisations, ce que nous allons faire est d'accéder à tous les liens, qui sont nos trois éléments de liste puis de changer le nom de la variable par le lien. La valeur du lien sur notre première boucle est le premier élément de liste, le deuxième élément de liste, puis le troisième. Nous pouvons faire tout ce que nous voulons avec ces liens. Pour cet exemple, je vais accéder à nos liens, puis utiliser AddEventListener. Écoutez un clic sur n'importe lequel d'entre eux. Cela va alors exécuter une fonction, nous allons transmettre les informations sur l'événement , créer une alerte. Pour accéder au contenu de chacun de ces éléments de liste, tels que 1, 2 et 3, nous pouvons le faire en accédant aux informations sur les événements, sélectionnez e. target, qui est les informations à ce sélectionnez e. target, qui est sujet élément de liste particulier sur lequel on a cliqué, puis affiche le code HTML interne de cet élément. Essayons ça. Maintenant, si nous actualisons, avez nos liens gratuits en haut, cliquons sur Numéro 2, il y a le code HTML interne. Le numéro 3 et le numéro 1 fonctionnent également correctement. Il s'agit d'une variance vraiment utile sur la boucle for-loop, que nous pouvons utiliser pour faire une boucle sur des éléments tels que les tableaux, liste de nœuds, ainsi que des objets. 6. Tout le monde est...: À mon avis, alors que les boucles semblent un peu plus simples que les quatre boucles que nous avons regardées auparavant. La configuration de base ressemble à de nombreuses autres choses en JavaScript, telles qu'une fonction de base et des instructions if et même la boucle for. Une boucle While continuera de fonctionner tant qu'une condition est définie sur true. Pour cet exemple, nous avons une variable numérique simple puis la boucle continuera d'être exécutée alors que le nombre est inférieur à 30. Cette vérification est effectuée avant que le code de la boucle ne soit exécuté. Par conséquent, si elle est fausse, la boucle s'arrêtera. Comme pour la boucle for, nous avons également besoin d'un moyen d'arrêter les choses afin qu'elles ne se transforment pas en boucle infinie. Nous le faisons à l'intérieur de la boucle en incrémentant la valeur du nombre d'un sur chaque boucle. Ce qui signifie qu'il fonctionnera 30 fois avant qu'il ne s'arrête. Passons à nos fichiers de démarrage et essayons cela. La prochaine leçon dont nous avons besoin est le numéro 3. Il s'agit de la section de boucle while. Ouvrez-le, et aussi à l'intérieur du navigateur. Comme vous pouvez le constater, nous avons un fichier de démarrage vide avec le script en bas. Ce que nous allons faire ici c'est de configurer quelques variables. Tout d'abord, une constante appelée StadiumCapacity, et définissez cette valeur égale à 100. Il s'agit de la capacité du stade et nous allons ensuite mettre en place une deuxième variable, qui sera pour le nombre de fans auxquels nous sommes actuellement saisis. Puisque cela peut être augmenté, nous devons utiliser le mot-clé et le définir comme égal à la valeur CurrentlyEnted, qui commencera à zéro. Ce que nous voulons faire, c'est continuer à exécuter une boucle alors que la valeur de CurrentlyEnted est inférieure à la StadiumCapacity. Une boucle While est idéale pour cela. Nous avons configuré notre mot-clé while, les crochets, puis les accolades bouclées juste après. Ce que nous allons faire, c'est de maintenir cette boucle exécution alors que la valeur de CurrentlyEnted, qui est zéro, est inférieure à la capacité StadiumCapacity. Fondamentalement, si zéro est inférieur à 100, le code à l'intérieur d' ici s'exécutera. Placer un journal de console avec un texte d'entrée, et nous devrions pouvoir accéder à la console et vérifier cela. Mais juste avant de faire cela, prenons du recul et regardons cette boucle. Si nous y réfléchissons, nous voulons jeter un coup d'œil à notre état où ils sont actuellement entrés est inférieur à la capacité du stade. Pour le moment, nous n'avons aucun moyen de modifier ces deux valeurs variables. Fondamentalement, ce sera toujours la valeur de vrai. Cela entraînera alors une boucle infinie et provoquera à nouveau un plantage à l'intérieur du navigateur. Pour n'exécuter cette boucle while qu' un certain nombre de fois, nous avons besoin d'un moyen d' augmenter la valeur de CurrentlyEnted sur chaque boucle. C'est assez simple. Nous accédons simplement à notre valeur, puis nous utilisons plus plus, ce qui augmentera la valeur d'une sur chaque boucle jusqu'à la valeur de 100. Une fois que cela atteint la valeur de 100, cette condition ne sera plus vraie, ce qui signifie que notre boucle s'arrêtera. Jetons un coup d'œil à l'intérieur du navigateur, rafraîchissons et montons dans la console. Bien et nous voyons que notre texte d'entrée a été répété 100 fois. La variance de cette boucle while est en cours de réalisation. Il s'agit d'une version commutée de cette boucle while. Avant d'entrer dans les diapositives, j'ai mentionné que le code à l'intérieur de cette boucle s' exécutera toujours une fois cette condition vérifiée. Fondamentalement, si cela se traduit par faux, le code à l'intérieur de cette boucle ne s' exécutera jamais même une seule fois. Nous pouvons retourner cela et nous assurer que le code s'exécute au moins une fois, puis effectuer la vérification par la suite. Cela est utile si nous voulons toujours nous assurer que le code s'exécute au moins une fois avant l'arrêt de la boucle. Pour ce faire, juste au-dessus notre section pendant, nous allons créer une section Faire. Nous dirons que oui, ouvrez les accolades bouclées, et comme nous voulons toujours que cela se déroule une fois, nous sautons tout droit dans les accolades bouclées, nous n'avons pas besoin d' ajouter de condition. Ensuite, nous pouvons récupérer notre code dans la boucle while. Découpez ça à sa place. Ajoutez-le dans la section Faire. Je vais retirer les accolades bouclées de la boucle While. Comme vous pouvez le constater, le code se trouve désormais à l'intérieur de la section Faire, ce qui signifie qu'il sera toujours exécuté au moins une fois avant même d' effectuer notre vérification. Notre contrôle est toujours vrai, cela continuera à fonctionner la deuxième fois, dans notre cas, jusqu'à 100. Allons vérifier ça. Nous pouvons enregistrer cela et actualiser le navigateur. Nous avons toujours obtenu exactement les mêmes résultats qu'avant. Nous pouvons tester cela en définissant la valeur CurrentlyEnted sur 100, qui définit ensuite cette valeur sur false. Si nous l'enregistrons et que nous actualisons maintenant, nous voyons la valeur entrée de notre journal de console unique car notre code s'exécute en premier, puis il effectuera la vérification à l'intérieur de la boucle while. agit simplement d'une alternative selon que nous voulons toujours que le code s'exécute en premier ou qu'il teste d'abord la condition avant d'exécuter un code à l'intérieur de notre boucle. 7. Si / Autres Déclarations & Nesting: Pour cette vidéo, accédez à la section des instructions if-else et ouvrez-le également dans le navigateur. Vous pouvez voir en haut que nous avons déjà un objet utilisateur configuré et aussi si une instruction juste en dessous. Nous avons donc utilisé des instructions if quelques fois déjà lors des exemples précédents. Il n'y a pas beaucoup plus à y ajouter que ce que nous avons déjà couvert. Ils exécutent simplement du code entre ces accolades. Si la condition à l'intérieur d' ici est définie pour être vraie. Dans cet exemple, nous avons un objet utilisateur en haut. Cela serait vrai puisque nous avons un objet présent, qui signifie que notre journal de console fonctionnera. Si l'utilisateur a été déconnecté, il peut être défini que notre variable est nulle, comme ceci, de sorte que cet utilisateur soit égal à null, qui entraînerait une fausse valeur et le code à l'intérieur de la case if ne s'exécuterait pas. Nous nous occupons donc de savoir si la condition est vraie. Mais qu'en est-il si nous voulons également gérer si la condition est fausse ? C'est là que d'autres déclarations entrent en jeu. Nous les placons immédiatement après l'instruction if et ce bloc de code exécutera dans tous les cas qui ne sont pas couverts par la section if. Nous avons ces exemples similaires configurés à l'intérieur des fichiers de démarrage et ici nous ne gérons la condition que si l' utilisateur est connecté. Vous vous demandez peut-être pourquoi ne pas simplement gérer la condition de déconnexion en dessous de cela. Ou nous pourrions faire quelque chose comme ça. Nous pourrions créer un journal de console ou n'importe quel code que vous souhaitez, où nous pouvons dire que l' utilisateur est déconnecté. Eh bien, essayons cela et voyons ce qui se passe si nous nous rafraîchissons et sautons dans la console. Ici, nous pouvons voir que le journal de la console a été exécuté deux fois. L'utilisateur est connecté et l' utilisateur est également déconnecté. Il est donc évident que pour quelque chose qui est sensible à la sécurité, comme un utilisateur connecté ou déconnecté, nous voulons qu'une seule de ces conditions s'exécute. Cela, nous pouvons mettre en place nos déclarations if, que nous avons ci-dessus, suivies de la déclaration d'autre. Supprimons le journal de la console. Je place la section autre et j'ajoute notre code à l'intérieur d'ici. Rafraîchissons et nous voyons que l'utilisateur est connecté car nous avons un objet utilisateur présent en haut. Si nous le modifions également pour qu'il s'agisse de l' opposé et que l'utilisateur est égal à une valeur fausse de null. Cela devrait alors être déconnecté de l' utilisateur. Si nous le voulions, nous pourrions également ajouter plusieurs déclarations if à et poussons simplement notre déclaration else vers le bas. Ensuite, entre les deux, nous pouvons ajouter une deuxième déclaration if, comme nous l'avons fait plus haut. Nous pouvons vérifier une deuxième condition, telle qu'un utilisateur ou un rôle, qui est actuellement définie sur admin. Nous pouvons vérifier s'il s'agit d'une valeur particulière et si elle se trouve à l'intérieur des accolades, nous ferons un journal de console, disons, Hey admin, testez ceci, actualisez. Maintenant, nous voyons que l'utilisateur est connecté et qu'il joue également le rôle d'administrateur. Cela fonctionne, mais cela pose également un problème, nous devons être très prudents avec ce type de configuration. Parce que cette instruction else, que nous aurons en bas en bas suit immédiatement la deuxième instruction if. Cela signifie que la section autre ne s' exécutera que si le rôle de l'utilisateur n' est pas défini sur admin, ce qui n'a aucun sens. Nous avions donc un utilisateur tel que null, donc avec l'utilisateur, nous ne sommes pas connectés. Actualisez. Cela va maintenant générer une erreur car nous essayons d'accéder au rôle de point utilisateur, qui n'est plus disponible car nous n'avons plus nos objets utilisateur. Pour ce genre d'utilisation de cet exemple pour le rendre un peu plus logique et plus pratique, nous voulons seulement vérifier si le rôle de l'utilisateur est égal à celui d'administrateur, s'est réellement connecté. Pour ce faire, nous pouvons imbriquer nos déclarations if en coupant la deuxième déclaration if. Nous pouvons coller ça à l'intérieur du premier. Cela nous ramène au premier exemple. Nous avons deux contrôles de premier niveau. Nous avons la déclaration if, l'utilisateur est connecté, suivi de la section autre juste en dessous. Ensuite, l'instruction if qui est imbriquée à l'intérieur ne sera détruite que si l' utilisateur s'est réellement connecté. Si l'utilisateur est connecté, ce journal de console s'exécutera. Ensuite, s'ils sont également connectés en tant que rôle d'administrateur, le deuxième journal de la console s' exécutera également . Essayons ça. Actualisez et l' erreur est maintenant effacée. Nous voyons que l'utilisateur est déconnecté car il est défini sur Null. Reprenons cela, le nom pour être égal à tout ce qui se trouve sur le rôle de retour à l'administrateur. Maintenant que cela est en place, nous avons maintenant un utilisateur. Le premier journal de la console doit donc être exécuté. Nous avons également un rôle d'utilisateur égal à administrateur. Nous devrions maintenant voir deux journaux de console à l'intérieur d'ici. C'est ainsi que nous pouvons utiliser des instructions if else de premier niveau et aussi comment imbriquer une instruction if à l'intérieur. Si vous le vouliez, vous pourriez également aller encore plus loin juste après la section imbriquée if, nous pourrions également placer dans une autre section pour que nous puissions créer un journal de console. Pour cette section, nous savons que l'utilisateur est réellement connecté, mais nous voudrons également vérifier s'il n'est pas administrateur. Donc, ici, cela fonctionnera s'ils sont l'administrateur. Sinon, nous allons simplement dire : Hey utilisateur, rafraîchir. Nous voyons toujours hey admin puisque le rôle est défini sur cela. Mais si nous changeons cela pour être abonné, l'instruction if imbriquée est désormais fausse, ce qui signifie que la section hey user va maintenant s'exécuter. Si vous le voulez. Vous pouvez également aller aussi profondément que nous le voulions en imbriquant plusieurs sections si elles sont également imbriquées. Mais nous devons faire attention à ne pas passer par-dessus bord et à rendre le code difficile à lire et aussi à comprendre pour les autres développeurs. En règle générale, nous pouvons généralement couvrir la plupart des cas d'utilisation sans avoir besoin d'aller plus loin. Donc, si vous constatez que vous êtes peut-être trois ou quatre niveaux de profondeur avec les instructions ou les vérifications, il y a généralement une meilleure façon de faire les choses. 8. Autre si: Dans le dossier de cette leçon, qui est la section else if, vous trouverez juste en dessous du script, nous avons le même exemple de la vidéo précédente. Nous traitons ici deux conditions de premier niveau que nous enregistrons. Tout d'abord, si l'utilisateur est connecté, puis dans section, saisissez ce qui se passe si l'utilisateur n'est pas connecté. Dans la section connectée, nous avons également une section imbriquée si autre. Ajoutez un message d'accueil différent si l'utilisateur est égal à admin. Nous avons deux options au niveau supérieur et deux options imbriquées. Mais qu'en est-il si nous voulions aussi une troisième option ? Pour cela, nous avons aussi si. Jetons un coup d'œil à cela, nous allons simplifier cet exemple en supprimant les instructions imbriquées. À l'intérieur d'ici, nous supprimerons l'imbriqué si autrement nous laisse un simple connecté ou déconnecté. Si vous vous souvenez de la vidéo précédente, nous avons jeté un coup d'œil à la façon de gérer brièvement une troisième condition en ajoutant une deuxième déclaration if, comme ceci. Mais le problème que cela nous pose, c'est que la section autre est maintenant liée à notre deuxième énoncé if. Essentiellement, ce qui signifie que notre première déclaration si est maintenant déconnectée. Si nous voulons toujours garder ces trois éléments connectés sans rapport les uns avec les autres, nous pouvons transformer ce second en un autre endroit. Juste avant la section if, nous pouvons ajouter une deuxième condition à l'intérieur d'ici. Tout d'abord, nous voulons vérifier si l'utilisateur est connecté, puis à l'aide de la double esperluette, nous pouvons également effectuer une seconde vérification. Nous pouvons vérifier si l'utilisateur .role est égal à l'abonné, et si c'est le cas, nous allons ensuite exécuter le code à l'intérieur d'ici. Maintenant, nous allons simplement placer dans un simple journal de console indiquant l'autre si la section a été exécutée, sauvegardez-la, puis sur le navigateur et nous verrons ce qui se passe à l'intérieur d'ici. Nous voyons le texte de l'utilisateur connecté. Vous vous demandez peut-être pourquoi nous voyons le texte du seul utilisateur connecté et non pas aussi de la section autre si s' exécutée car après tout, l'utilisateur est présent et l'utilisateur .role est égal à abonné. La raison est qu' une seule de ces sections sera exécutée. Si la condition est remplie, le code à l'intérieur s' exécutera et il n'ira pas plus loin dans le reste de ces sections. En fait, seul le premier match sera organisé. Si nous voulons qu'il soit plus spécifique avec la première section, nous pourrions également copier cet utilisateur.role déposer ceci dans la première section et nous pouvons également vérifier si cela est égal à admin. Étant donné que notre rôle d'utilisateur est égal à celui d'abonné, il doit désormais être faux. Parce que nulle part ailleurs si la section fonctionne maintenant. Sauvegardons cela et testons cela dans le navigateur. La section autre if va maintenant s'exécuter. Puisqu'il s'agit de notre première section , nous pouvons maintenant faire ce que nous voulons dans chacune de ces sections, nous pouvons afficher et masquer le contenu en fonction du rôle de l'utilisateur. Nous pouvons les rediriger vers une zone de compte. Nous pouvons désactiver les fonctionnalités auxquelles l'utilisateur n'est peut-être pas autorisé à accéder ou tout autre élément auquel vous pourriez penser. Nous pouvons également utiliser plusieurs autres sections si. Si nous voulions vérifier plus que ces trois conditions, nous pourrions également faire la même juste après la section autre if, placée dans une seconde. Il est probablement conditionné juste en haut. Cette fois, nous allons vérifier si l'utilisateur .role est égal à auteur. S'il est placé dans un journal de console, enregistrez-le et comme vous vous y attendez, nous devrions voir le même résultat qu'auparavant puisque nous avons le jeu d' abonnés, ce qui correspond à cette section. Mais si nous changeons maintenant cette offre pour être l'offre, la section if est désormais fausse et la première autre si la section est également fausse et notre nouveau journal de console avec le texte de l'auteur, s' exécuterait maintenant. à l'intérieur de la console. Enfin, si aucune de ces sections, si ou si les sections sont vraies, nous changeons donc pour être un utilisateur, nous devrions maintenant nous rabattre pour utiliser la section autre en bas. 9. L'instruction switch: L'énoncé Switch est un moyen de fournir autant de résultats que nécessaire en fonction d'une seule condition. Nous pouvons également fournir plusieurs résultats avec des déclarations if et des déclarations si autres comme nous l'avons regardé précédemment. Mais comme nous l'avons découvert, nous devons ajouter quelque chose à vérifier pour chacune de ces conditions, par exemple lorsque nous vérifions des éléments tels que le rôle de l'utilisateur pour chacune de ces conditions. Cependant, avec une instruction switch, nous testons simplement la même condition pour chacun d'eux. Juste ici avec notre variable de pizza préférée. L'instruction switch juste en dessous, encore une fois, ressemble dans sa configuration à des éléments comme les instructions vide if et aussi pour les boucles. Nous transmettons ensuite ce que nous voulons vérifier, comme notre variable de pizza préférée. Ensuite, à l'intérieur, nous avons mis en place les différentes étuis pour gérer ce qu'est la pizza préférée. Ici, nous aurons trois cas distincts pour gérer ce qu'il faut faire pour chaque valeur. Nous pouvons avoir autant de cas que nous le voulons. Regardons le premier. Nous vérifions si la pizza préférée est égale au pepperoni. Si c'est le cas, nous exécutons ensuite du code à l'intérieur, comme ce journal de console. Nous fournissons ensuite le mot-clé break pour sortir de l'instruction switch une fois que nous avons une correspondance ce qui empêchera tout le reste du code et toutes les autres vérifications ci-dessous de s'exécuter. Il s'agit du même mot clé que celui utilisé précédemment dans cette section pour éviter que le navigateur ne crée une boucle infinie. Cela continuera d'être exécuté jusqu'à ce qu'une correspondance soit trouvée, mais si elle est introuvable, nous pouvons également ajouter une clause par défaut. Cette opération sera toujours exécutée s' il n'y a pas d'autres matchs. au projet et donnons un coup de fouet. Cette fois, nous sommes dans la section des instructions de commutateur et dans le fichier de démarrage, nous n'aurons qu'un objet utilisateur simple avec la propriété name et le rôle. Nous pouvons configurer une instruction switch pour vérifier le rôle de l'utilisateur et décider s'il peut modifier quelque chose sur notre site. Cela, nous pouvons le démarrer dans une variable appelée CanEdit. Par conséquent, CanEdit sera initialement défini sur la valeur false, de sorte que l'utilisateur ne se verra attribuer aucune autorisation de modification par défaut. Ensuite, nous pouvons utiliser une instruction switch pour vérifier le rôle particulier de l'utilisateur. Si le rôle particulier de l'utilisateur est égal à un niveau supérieur tel que l' administrateur ou même un éditeur, nous pouvons alors définir CanEdit sur true. Comme nous l'avons vu dans les diapositives, configurez nos instructions switch, puis nous transmettrons la condition qui est user.role. Ouvrez les bretelles bouclées, puis nous pourrons ajouter nos étuis à l'intérieur d'ici. Le premier cas sera celui de l'utilisateur. Il s'agit simplement d'un utilisateur connecté régulièrement. Ajoutez le deux-points. Ensuite, nous ajoutons ce que nous voulons faire pour ce cas particulier. Eh bien, dans notre cas, nous voulons que CanEdit soit égal à faux car ils n'ont pas les autorisations d'administrateur ou d' éditeur. Si ce cas particulier est vrai, je ne veux pas utiliser le mot-clé break pour sortir du reste de cette instruction de commutateur. C'est la première section. Ensuite, nous passons au deuxième cas et celui-ci va être abonné. Cela refléterait simplement la même condition que ci-dessus. Nous pouvons définir CanEdit comme égal à false. Ajoutez les mots-clés de rupture. C'est notre deuxième affaire maintenant terminée. La prochaine, nous ajouterons un dossier pour l'éditeur. Et comme cela semble, l' éditeur est un cas où nous voulons permettre à l'utilisateur de pouvoir modifier. Pour cela, nous allons définir notre variable CanEdit sur true, puis sortir de l'instruction switch. Enfin, le dernier cas sera destiné à l'administrateur. Dans l'Admin, nous voulons fournir toutes les autorisations dont ils ont besoin pour modifier notre site. Tout comme ci-dessus, nous allons définir CanEdit pour qu'il soit également égal à vrai, puis nous sortirons de l'instruction switch. Comme nous l'aurions vu dans les diapositives, nous devons également ajouter un cas par défaut, qui sera exécuté si aucun des cas ci-dessus ne correspond. Exemple très simple, il suffit de le placer dans un journal de console et nous dirons que le rôle d'utilisateur est introuvable. Nous allons également définir CanEdit sur false. Maintenant, il nous suffit de faire un test. Lorsque nous avons commencé ici, nous avons le rôle d'utilisateur égal à celui de l'utilisateur. Cela devrait définir CanEdit comme étant égal à false. Essayons cela en descendant vers le bas, nous allons placer dans un journal de console, placer dans la valeur CanEdit. Nous verrons si cela change pour chacun de nos cas. Comme nous le savons, aucun CanEdit ne sera égal à faux puisque nous avons actuellement le rôle d'utilisateur pour être égal à l'utilisateur. Jetons un coup d'œil aux outils de développement dans la console. C'est faux comme prévu. Vérifions notre deuxième condition en basculant le rôle en abonné, actualisant et comme vous vous y attendez, c'est faux. Le troisième est l'éditeur, cela devrait maintenant être vrai. Enfin, nous pouvons tester l'administrateur. C'est également vrai. Juste pour détecter la condition par défaut en bas, nous devrions voir le journal de la console et ils peuvent être égaux à false si nous n'avons pas de correspondance pour l'une de ces quatre conditions. Transformons cela en quelque chose de complètement aléatoire. Nous allons simplement taper n'importe quel rôle aléatoire à l'intérieur d'ici. Rafraîchir C'est faux et le journal de la console est désormais exécuté comme prévu. Juste une chose à surveiller si nous avons plusieurs étuis assortis. Si j'ai deux cas ou plus qui correspondent tous les deux, le premier cas correspondant sera utilisé. Aussi comme raccourci si nous avons plusieurs cas, comme nous l'avons fait ici, qui exécutent le même code à l'intérieur. L'utilisateur définira CanEdit comme égal à false et aussi à l'abonné. Il s'agit d'une section dupliquée, la même pour les deux derniers cas. Ces deux ensembles peuvent modifier pour être égal à vrai. Nous pouvons raccourcir un peu ce code pour le rendre un peu plus simple. Pour les deux premiers, qui sont exactement les mêmes, nous pouvons supprimer le code du premier. Ces deux cas se succèdent immédiatement. Ensuite, ce code sera exécuté pour chacun de ces cas. est exactement la même chose pour ces deux-là en bas. Nous pouvons déplacer le CanEdit et aussi la pause. Ces deux-là sont essentiellement regroupés. Nous pouvons simplement tester cela et si nous actualisons, nous voyons toujours la clause par défaut s'exécuter en bas. Essayons l'éditeur. Cela devrait être vrai. L'administrateur est également vrai. L'utilisateur doit être faux. Enfin, l'abonné. C'est cela pour les instructions de commutateur. Juste une chose rapide avant de passer à autre chose. Si nous oublions de mettre un mot clé break dans l' un de ces cas, tous les cas suivants s'exécuteraient également jusqu'à ce qu'une pause soit finalement trouvée. Par exemple, si nous avions manqué une clause de rupture à l'intérieur de cette section, nous pouvons supprimer cette clause. Si nous avons une correspondance pour l'utilisateur ou l'abonné, CanEdit sera toujours égal à false, mais il exécutera ensuite le code juste en dessous, puis remplacera CanEdit pour qu' il soit égal à vrai. Essayons ça. Nous avons le rôle égal à celui de l'abonné. Rafraîchir Maintenant, l' abonné CanEdit est entré en vigueur, mais le programme a continué à passer à l'éditeur et aussi à la section admin et provoque un remplacement, de sorte que CanEdit est maintenant égal à vrai. 10. Opérateur conditionnel (ternaire): Comme alternative aux if-else que nous avons examinées, Javascript dispose également d'un opérateur conditionnel, souvent appelé opérateur ternaire, car il est composé de trois parties. Comme il fonctionne, comme si c'est le cas, la principale raison pour laquelle il est utilisé est d'offrir une alternative simple ligne. En regardant cet objet utilisateur, nous voudrions peut-être vérifier l'âge de l'utilisateur avant de l'autoriser à entrer. L'opérateur conditionnel peut vous aider dans ce domaine. C'est comme une question. Nous demandons ici si l'âge de l' utilisateur est supérieur ou égal à 18 ans en utilisant le point d'interrogation. Avant, j'ai dit que le ternaire est composé de trois parties. La question n'est que cette première partie. Les deuxième et troisième parties sont ce que nous voulons faire si la question est vraie ou fausse. Si c'est vrai, nous pouvons faire n'importe quoi, mais cet exemple simple n' a que le texte d'entrée. S'il est faux, ce qui est correct pour cet exemple, le code après le deux-points s'exécutera à la place. Passons maintenant aux fichiers de démarrage et nous pouvons jeter un coup d' œil à l' exemple qui se trouve à l'intérieur. Nous avons ici un exemple de la façon dont nous pouvons utiliser une déclaration if pour vérifier si un utilisateur est administrateur qui peut modifier quelque chose sur notre site. L'objet utilisateur a le rôle d'administrateur et nous définissons actuellement la fonctionnalité CanEdit sur false. L'instruction if vérifie si le rôle de l'utilisateur, qui est juste ici, est égal à admin. Dans notre cas, nous pouvons définir la variable CanEdit sur true, ce qui permet à l'utilisateur d' aller de l'avant et publier quelque chose comme un article de blog. Si ce n'est pas le cas, CanEdit sera égal à false, supprimant toutes les autorisations dont ils peuvent disposer. Ce que nous allons faire, c'est convertir cet exemple pour utiliser l'opérateur ternaire, qui va simplifier cet exemple sur une seule ligne. Comme nous l'avons vu dans ces diapositives, la première partie est de poser la question. La question que nous voulons poser est de savoir si l'utilisateur .role est égal à la chaîne d'admin. Utilisez un point d'interrogation, suivi de nos vrais et faux résultats. Si l'utilisateur est égal à admin, nous voulons que ce canEdit soit égal à vrai, comme nous le faisons dans la section true l'instruction if-else. Définissez CanEdit comme étant égal à vrai, puis séparé par deux points, nous ajoutons la fausse instruction dans laquelle nous disons que CanEdit est égal à faux. Parfois, en fonction des paramètres de votre éditeur de texte ou de vos plugins, vous pouvez également voir ces deux instructions encapsulées entre crochets. C'est tout à fait très bien. Ce que je veux faire maintenant, c'est de commenter ou de supprimer les instructions if-else originales, puis nous pouvons enregistrer cela et passer au navigateur, actualiser, et nous voyons que cet exemple est défini sur vrai. Cela est vrai car l' utilisateur .role est égal à admin. Mais si nous changeons cela pour qu'il s'agisse d'autre chose, essayons l'abonné, vous devriez mettre à jour cela pour qu'il s'agisse de la valeur false. Nous pouvons également raccourcir cet exemple encore plus loin en attribuant directement le résultat de cet opérateur ternaire à cette variable. Ce que nous entendons par là, c'est plutôt que d' attribuer CanEdit pour être égal à vrai ou faux Lorsque vous coupez l' opérateur conditionnel complet d'ici, nous pouvons ensuite supprimer l'affectation initiale de false, coller ceci dans. Maintenant, plutôt que de définir notre variable, ce que nous faisons est simplement de définir la valeur vraie true et la valeur fausse sur false. Maintenant, le résultat vrai ou faux sera directement attribué à notre variable CanEdit. Essayons encore une fois. Actuellement, nous avons ce jeu pour être faux, mais si nous le modifions en tant qu'administrateur, c'est désormais vrai. L' opérateur conditionnel et la version if-else sont tous deux parfaitement valides à utiliser. L'opérateur conditionnel, comme nous venons de le voir, est généralement plus court et placé sur une seule ligne. Certains affirment qu'une déclaration if-else est plus claire et plus lisible, mais en fin de compte, c'est votre choix que vous souhaitez utiliser et celui que vous préférez. 11. Type Coersion & Conversion: Dans les prochaines vidéos, nous allons couvrir certains types et aussi des choses vraies ou fausses, qui peuvent vous donner des résultats étranges ou inattendus. En étant conscient de cela, vous pouvez comprendre choses comme pourquoi et si instruction ne fonctionne pas correctement, et vous permettra également de gagner beaucoup de temps lors du débogage. Le premier est la coercition de type. Nous connaissons déjà des types tels que les objets, les chaînes et les booléens. coercition de type concerne la façon dont les valeurs des types de données sont converties en autres types de données. En regardant à l'intérieur du dossier leçons qui est coercition et la comparaison de type, allez dans le index.html où nous avons un exemple simple. Nous avons deux variables en haut avec des nombres , puis nous allons les ajouter ensemble et les stocker à l'intérieur du total. Une chose à remarquer entre ces deux nombres est que le premier est enroulé dans ces citations donc techniquement, il s'agit d'une chaîne. Le second est un nombre, comme on peut s'y attendre. Mais que pensez-vous qu' il se passe lorsque nous ajoutons ces deux éléments ensemble ? Si nous ajoutions des chaînes, nous pouvons savoir à quoi nous attendre, car cela peut être combiné pour faire une phrase ou un mot. Si nous additionnons également deux numéros, ces deux chiffres seront ajoutés ensemble pour obtenir un nouveau total. Mais ici, puisque nous ajoutons une chaîne et un chiffre, que pensez-vous qu'il se passera ? Eh bien, plutôt que de provoquer une erreur, JavaScript est conçu pour choisir un type de données à convertir automatiquement. C'est ce qu'on appelle la coercition. Mais dans cet exemple, il peut choisir de convertir pour qu'il s' deux chaînes ou des nombres. Eh bien, ne devinons pas. Sauvegardons cela et allons dans la console et voyons exactement ce qui va se passer. Passez dans l'onglet de la console et rafraîchissez-vous et nous voyons la valeur de 72. La valeur 72 signifie qu'elle est convertie en chaîne car nous avons la valeur de sept, suivie de la valeur de deux, plutôt que de la valeur de neuf, ce qui se produirait si elles étaient convertis pour les deux en nombres. Cette conversion s'est produite automatiquement pour nous et cela peut être appelé implicitement et cette conversion implicite est ce qu'est la coercition. À ne pas confondre, mais la conversion de type est similaire . Cela fonctionne de la même manière que la coercition en convertissant une valeur d'un type de données à un autre. Mais nous pouvons également le faire nous-mêmes manuellement. Si nous voulions que cela soit converti manuellement en nombre, nous disposons d'une fonction numérique disponible. La façon dont nous pouvons l'utiliser est de couper notre numéro un, qui est une chaîne. Nous pouvons accéder à une fonction numérique, puis placer à l'intérieur de ce que nous voulons convertir en nombre. Ici, nous convertissons une chaîne en nombre. Maintenant, si nous sauvegardons cela, nous devrions voir la valeur de neuf dans la console, ce qui signifie que les deux sont attirés sous forme de chiffres. Pour résumer, la coercition se produit implicitement ou automatiquement. La conversion de type peut également se faire manuellement, comme nous le voyons avec cette fonction numérique. Parfois, ces mots sont utilisés de manière interchangeable, mais c'est la ligne officielle de ces deux mots. Si vous le vouliez, nous pourrions également faire le contraire. Plutôt que de convertir celui-ci en nombre, nous pourrions convertir le second en chaîne. Nous le faisons avec la fonction chaîne. Transmettez le nombre que vous souhaitez convertir en chaîne et cela reviendrait ensuite à la valeur de la chaîne 72. Pour cette raison, il peut être bon de toujours convertir les données entrantes pour correspondent exactement au type de données que nous voulons qu'elles soient. Si, par exemple, nous obtenons des données provenant d'un tiers, comme un serveur ou une API, nous pouvons éliminer les bogues et erreurs en nous assurant que notre type de données est correct. Pour cette raison, vous avez peut-être entendu parler d' outils tels que TypeScript, qui nous oblige à déclarer le type de données que vous souhaitez utiliser à l'avance, ce qui peut donc éliminer toute erreur dans notre code. C'est ainsi que les choses fonctionnent avec l'opérateur plus, mais les autres opérateurs peuvent également nous donner résultats attendus après l'application de la coercition. Nous pouvons également voir cette coercition en action avec l' opérateur supérieur ou inférieur. Voyez que cela modifiera la connexion de la console avec la valeur ou les résultats du numéro un sont supérieurs au numéro deux. Voyons ce qui se passe. Nous obtenons la valeur de vrai. Cela peut sembler un peu étrange car ici, dans le journal de la console, nous comparons toujours une chaîne avec un nombre. Mais dans ce cas, JavaScript les compare comme s'il s' agissait de chiffres. C'est un comportement fou pour les personnes habituées à d'autres langages de programmation, qui est fortement tapé. Cela signifie que les données sont limitées à un certain type et ne sont pas converties. Bien que cette coercition se produise en coulisses, les exemples que nous verrons ont parfois un comportement assez sensé ou prévisible. Mais souvent, nous constatons des résultats étranges comme celui-ci. Nous pouvons également constater des résultats étranges lorsqu'il s'agit d' incrémenter également. Voyez ceci, au lieu d'avoir une constante pour notre chaîne, ce que nous allons faire, c'est changer cela pour être laissé. Par conséquent, nous pouvons mettre à jour cette valeur numéro un. Faisons cela juste en dessous. Nous accéderons à notre variable numéro un, puis utiliserons plus plus pour l'incrémenter de la valeur 1. Console consigne la valeur de notre variable et voyons ce qui se passe à l'intérieur de la console. Rafraîchissez et nous voyons la valeur de huit. Cela peut sembler étrange car nous savons que numéro un est initialement défini comme une chaîne. Techniquement, nous ne devrions pas être en mesure augmenter cela de la valeur d'un, comme nous le ferions avec un chiffre. Ce qui se passe dans les coulisses avec la coercition c'est que le numéro un est converti en nombre, donc nous pouvons utiliser l'incrémenteur. Je pense que vous verriez la valeur de huit dans la console. À titre d'autre exemple, imaginez qu'il s' agit également d'un tableau. Si nous encerclons cela à l'intérieur des crochets contenant notre ficelle à l'intérieur, que pensez-vous qu'il se passerait maintenant dans la console ? Nous continuons d'augmenter cette valeur. Disons cela et voyons ce qui se passe à l'intérieur d'ici. Actualisez. Encore une fois, cela n'a aucun sens. Nous avons toujours la valeur de huit, mais c'est le monde du JavaScript. Et si nous commentions ce plus, plus et que nous ajoutions directement une valeur à ce tableau. Disons que plus 2, enregistrez, rafraîchissez, et nous voyons la valeur de 72. Encore une fois, cela peut sembler un comportement fou, mais ce qui s'est passé en coulisses, comme vous l' avez peut-être deviné, c'est que cela a été converti en chaîne. Si vous vouliez prouver qu'il s' agissait d'une chaîne, ou si nous voulions vérifier deux fois, nous pourrions également utiliser typeof à l'intérieur du journal de la console. Je vais taper le jus avant notre numéro un, sauvegarder ceci et cela produira ensuite le type de données qui est une chaîne. Il y a aussi quelque chose d'étrange. C'est une chaîne comme nous venons de le voir, mais que pensez-vous qu'il se passerait si nous réintroduisons les incréments ? Eh bien, décommentons cela, sauvegardons et actualisons, et nous revenons maintenant à un chiffre. Et si nous supprimons également le typeof et que nous pouvons voir ce qui se passe lorsque nous additionnons les sept et les deux, puis que nous utilisons également l'incrément. Sauvons ça. Cela nous donne maintenant le résultat de la valeur numérique de 73. Ce qui signifie que ce qui se passe l'origine pour le numéro un est notre 7 et 2 sont ajoutés ensemble pour créer une chaîne de 72, comme nous l'avons vu plus tôt. s'agit toujours d'une chaîne, mais lorsqu' elle passe à la ligne suivante, comme nous l'avons vu plus tôt lorsque nous utilisons le plus, elle ajoute ensuite la valeur de 1, ce qui nous donne la valeur de 73 à l'intérieur de la console. En plus de cette folie, l'opérateur de l'égalité introduit également un tout nouveau monde de choses à surveiller. Par exemple, dans notre journal de console, nous pouvons vérifier si 1 est égal à vrai. C'est vrai. Mais qu'en est-il si nous convertissons ce un nombre différent tel que 11 ? Cela nous donne maintenant la valeur de faux. Pour résumer, la valeur d'un était égale à vrai, mais la valeur de 11 était égale à false. Essayons un numéro de plus tel que deux, rafraîchir et c'est aussi la valeur de false. Mais c'est une autre bizarrerie de JavaScript, mais juste avant de nous expliquer, je veux juste ajouter quelques commentaires en bas. Donc vrai est le numéro 1 et 0 est égal à faux. Pour mieux comprendre cela, nous devons comprendre que lorsque vous utilisez le double égal, comme ceci, il s'agit de l'égalité lâche, ce qui signifie que nous ne recherchons aucun type de données, peu probable, triple égal, ce que nous avons déjà vu auparavant. Tout ce que nous faisons, c'est vérifier si deux valeurs sont égales quel que soit le type de données. Puisque nous comparons un nombre ici avec un booléen à droite, nous ne le vérifions pas avec des types égaux. JavaScript se convertira en utilisant la coercition et, dans ce cas, il convertit le booléen en nombre. Comme nous l'avons écrit précédemment, le chiffre un est égal à vrai et JavaScript utilisera le nombre zéro pour être égal à faux. Nous pouvons le tester dans le journal de la console. Nous pouvons vérifier si la valeur d'un est égale à false, ce qui n'est pas vrai. Il devrait nous donner une valeur fausse à l'intérieur de la console. Cependant, si nous le modifions pour qu'il s'agisse de zéro, zéro est égal à faux, comme nous l'avons vu ci-dessous et cela devrait alors avoir pour résultat vrai. C'est beaucoup de bizarrerie à prendre en compte et ça ne s' arrête pas là non plus. JavaScript a tellement de choses que vous devez surveiller. Je ne m'attends pas à ce que vous vous souviez tous d' eux à ce stade. Mais sachant que ce comportement existe et vous donne un bon départ sachant où chercher si vous rencontrez des bogues à l'intérieur de votre code. 12. Truthy & Falsey: Dans de nombreux exemples de cette section et du codage JavaScript en général, nous vérifions si une valeur est vraie ou fausse. Si c'est vrai, nous exécutons du code, et s'il est faux, nous faisons autre chose. Mais il ne s'agit pas seulement d'une valeur booléenne de vrai et de faux, que nous pouvons utiliser, comme nous l'avons vu dans la dernière vidéo, d'autres valeurs peuvent également être jugées vraies et fausses. Par exemple, zéro s'évalue en faux, et le nombre veut être égal à vrai. Il existe également de nombreux autres exemples, tels qu'une chaîne de texte est vraie, et une chaîne vide est à l'opposé de false. C'est ce qu'on appelle la vérité ou le faux. La vérité est quand une valeur est évaluée comme vraie, telle que notre chaîne de textes présente, et fausse lorsqu'une valeur est évaluée à false, telle que notre chaîne vide ou notre nombre zéro. Allez dans notre éditeur, et nous pouvons jeter un coup d'œil à quelques exemples à l'intérieur de notre script vide. Les instructions If s'exécuteront non seulement pour une valeur booléenne de true, mais également pour toute autre valeur véridique. Disons cela en configurant d' abord une instruction if-else vide puis à l'intérieur d'ici, nous allons simplement y placer des journaux de console trop simples. Pour la première section, nous allons évaluer quelque chose pour être vrai, nous transmettrons le texte du vrai V. Dans la section L, nous ferons le contraire. Ajout du texte de Falsey. Bien sûr, cela ne fonctionnera pas pour le moment car nous n' avons aucune condition à l'intérieur de l'instruction if. Mais nous allons commencer par ce que nous savons déjà. Auparavant, nous avons examiné les valeurs de zéro et de 1, où la valeur de zéro est égale à false. Cela serait considéré comme fausse, mais le contraire est vrai avec la valeur d'un. De plus, nous pouvons tester la chaîne que vous avez mentionnée juste avant. Nous avons une chaîne avec du contenu à l'intérieur, comme le texte de hey. Cela permettra également d'évaluer la vérité puisque nous avons une certaine valeur à l'intérieur de la chaîne. Mais si nous devions supprimer cela et avoir une chaîne vide, cela évaluerait en JavaScript la valeur de Falsey. La coercition dont nous avons parlé se produit en coulisses, et des valeurs telles que nos nombres zéro et un ainsi cette valeur de chaîne sont converties pour avoir un équivalent booléen. Nous pouvons déterminer si des choses de ce genre si les instructions ne doivent pas être exécutées. Les valeurs faussement, comme on peut s'y attendre, sont généralement des valeurs vides telles que zéro, sont généralement des valeurs vides telles que zéro, que nous venons de regarder, ainsi que ces chaînes vides. Jetons un coup d'œil à d'autres exemples tels que non. C'est également fausse. Non défini, cela devrait également être fausse. Généralement, tout ce qui n'a pas de valeur actuelle, donc le mot faux. Comme on peut s'y attendre, cela serait également fausse. Enfin, notez le numéro, qui est NaN. C'est également fausse. Nous pouvons considérer à peu près tout le reste comme vrai, comme les chaînes que nous venons de regarder, les tableaux, nombres autres que zéro et, en fait, tout type d'objet tel qu'une fonction, tableau ou un l'objet réel sera véridique. Cela est également vrai que nous utilisions le constructeur ou un type littéral, comme ceci. Nous pourrions utiliser le constructeur. Nous avons examiné des choses comme un nouveau tableau et un nouvel objet dans le passé. Ce sera vrai. Essayons un constructeur de fonctions qui sera aussi vrai, et enfin l'objet. De la même manière si nous voulons utiliser un constructeur comme celui-ci et que nous l'utilisons littéralement comme nous l'avons fait plus couramment dans ces vidéos, comme la création d'un tableau avec des valeurs différentes à l'intérieur. Cela serait vrai, tout comme le constructeur, tout en plaçant un objet dans une police littérale. Cette coercition, combinée à la compréhension de la façon dont les valeurs sont converties pour être véridiques ou fausses, est une bonne chose à comprendre à l'intérieur de JavaScript, car elle peut vraiment vous aider à éviter les problèmes. l'avenir et aide également à résoudre les problèmes de débogage. 13. Chaîne facultative: Cette vidéo va se concentrer sur ce qu'on appelle le chaînage optionnel, introduit en JavaScript dans ES2020. Comme nous le savons déjà, nous devons avoir accès à certains éléments à l'intérieur d'un objet, tels que notre nom et aussi notre rôle d'administrateur. Comme nous le savons également, nous pouvons aller encore plus loin en accédant à des objets imbriqués à l'intérieur d'un objet. Que se passe-t-il lorsque les propriétés à l'intérieur de cette chaîne ne sont pas présentes ? Examinez quelques exemples de chaînage dans la section Événements, où nous accédons à l'objet événement. Nous avons ensuite approfondi les propriétés telles que la cible, le nœud parent, les enfants, puis dans la valeur du texte interne. Si, à un moment quelconque de cette chaîne, une propriété n'existe pas, nous obtiendrons une erreur. Ce n'est pas une mauvaise chose, car nous devrions avoir des erreurs si nous faisons quelque chose de mal. Mais qu'en est-il si la propriété n'est que parfois là et parfois pas ? Un exemple de cela est ce que nous avons déjà utilisé dans le script. Il aura l'utilisateur actuel défini sur un objet utilisateur connecté et nous disposerons toutes les informations dont nous avons besoin, telles que le nom et le rôle. Par conséquent, lorsque nous passons aux instructions if et vérifions si le rôle de l'utilisateur est égal à administrateur. Nous savons que cela devrait fonctionner sans erreur, mais avec les utilisateurs, bien que nous ne les ayons pas toujours pour être connectés. L'utilisateur actuel n'est pas toujours configuré pour être un objet comme celui-ci. Par exemple, si l' utilisateur n'est pas connecté, à la place de cet objet utilisateur nous pouvons voir la valeur null. Maintenant, si nous essayons d'exécuter l'instruction if, nous n'avons pas accès à cette propriété .role. Par conséquent, allons dans la console et voyons ce qui se passe. À l'intérieur de la console, nous voyons ce message d'erreur rouge qui nous indique qu'il y a un problème lors de la lecture de notre rôle. Cela se produit parce que l'utilisateur actuel n'est plus un objet contenant la propriété role, ce qui provoque une erreur. Mais nous avons toujours besoin d'un moyen de maintenir ce rôle actif dans l'énoncé if. Mais une fois que l'utilisateur s'est connecté. C'est ici que le chaînage optionnel entre en jeu. Ce que nous pouvons faire, c'est que nous pouvons insérer un point d'interrogation pour déclarer que la propriété n'est peut-être pas toujours présente. Nous ajoutons cela juste avant .role. Maintenant, si nous sauvegardons cela et actualisons au lieu de l' erreur dans la console, puisqu'elle est maintenant évaluée à false, la section else s'exécutera désormais à l'intérieur de la console. Ce qui se passe ici c'est que nous arrivons aux déclarations if. JavaScript lira ensuite l'utilisateur actuel, qui est la valeur null. Il sait donc ne pas aller plus loin avec le reste de notre chaîne. Il ignore maintenant l' erreur et renvoie plutôt une valeur indéfinie, que nous pouvons vérifier dans le journal de la console. Actuellement, nous savons que la section autre est en cours d'exécution car nous avons vu la valeur de false. Mais ce que nous pouvons faire, c'est que nous pouvons accéder à l'utilisateur actuel, un point d'interrogation car cela ne sera pas toujours présent lors du chaînage optionnel. Ensuite, nous pourrons ajouter la valeur du rôle. Si nous sauvegardons cela et que nous actualisons, nous pouvons maintenant confirmer que nous récupérons la valeur indéfinie. Cela est vraiment utile si nous savons à l'avance une certaine propriété d'objet peut être présente ou non toujours. Il est courant que des objets comme celui-ci se développent au fil du temps et nous ne savons pas toujours comment notre application pourrait se développer à l'avenir. Il se peut que nous ayons besoin d'ajouter des fonctionnalités supplémentaires ou de collecter plus d'informations. Ce chaînage optionnel permet d'éviter toute erreur. Par exemple, à l' avenir, nous devrons peut-être ajouter plus d'informations sur la source d'inscription de l' utilisateur. Nous pourrions ajouter un objet imbriqué à l'intérieur, comme ceci, nous reviendrons à l'objet utilisateur. Reprenons le nom et le rôle. Ensuite, un deuxième objet imbriqué à l'intérieur duquel je vais appeler les données d'inscription, il s'agira d'un objet imbriqué à l'intérieur. Nous allons le placer dans la date. Mais maintenant, une chaîne vide va bien. Cela n'a pas vraiment d'importance et confirme qu'il est égal à vrai. loin encore mesure que notre application s'est développée encore plus, nous devrons peut-être approfondir cet objet. Par exemple, nous pouvons recueillir des informations supplémentaires sur la source d'inscription de l'utilisateur à l'intérieur de cet objet. Nous pouvons également ajouter la source, qui est également un objet dans lequel nous avons vu l'URL de la source d'inscription. Encore une fois, ce n'est qu' un exemple pour que nous puissions ajouter n'importe quoi à l'intérieur de la chaîne sur le navigateur d' où vient l'utilisateur. Nous avons maintenant besoin de chaînes plus longues pour accéder à ces informations imbriquées. Si nous supprimons simplement ces instructions if else, et nous simplifierons cela avec un journal de console. Nous devons d'abord accéder aux objets utilisateur, qui était l'utilisateur actuel. L'objet à l'intérieur duquel était les données d'inscription, donc .signupdata, Par exemple, si nous voulions accéder au navigateur, nous aurions également besoin de sauter dans la source juste avant cela. L'objet source, puis le navigateur, actualisez et cela devrait maintenant être la valeur de Chrome. Mais rappelez-vous dans cet exemple tout cela a été ajouté à l' objet à un stade ultérieur. Certains utilisateurs d' inscription antérieurs ne verront pas les données d'inscription associées à leurs objets. Ce que nous pouvons faire, nous pouvons simuler cela en commentant cette section, ce qui provoquera une erreur, comme nous l'avons déjà vu auparavant. Encore une fois, le chaînage optionnel peut nous aider à résoudre ce problème en permettant à notre code d'échouer silencieusement plutôt que afficher une erreur à l'intérieur de la console. À l'intérieur de l'inscription, les données n' auraient plus accès à la source ou au navigateur. Nous pouvons ajouter le chaînage optionnel à l'intérieur ici, actualiser et maintenant nous voyons les résultats de non définis. Les erreurs globales sont bonnes pour nous informer lorsque nous avons fait quelque chose de mal. Mais dans des cas comme celui-ci, nous savons que nous avons une propriété qui peut être présente ou non, chaînage optionnel peut vraiment nous aider en échouant silencieusement et, par conséquent, nous permettant de gérer le erreurs nous-mêmes. 14. Création et modification de nouveaux objets: peu près tout ce que nous pouvons penser a certaines propriétés peut être un bon cas d'utilisation pour un objet en JavaScript. Par exemple, une personne peut être un objet et les propriétés peuvent être le nom, âge, la taille et toute autre information que nous voulons donner à une personne. Un ordinateur peut également être un objet possédant des propriétés telles que la marque, le modèle, le processeur, l'année de fabrication et la mémoire. Lorsque nous pensons à des objets comme celui-ci, les cas d'utilisation deviennent énormes. Comme pour les tableaux, il existe différentes façons construire un objet, et le style que nous avons examiné jusqu'à présent s'appelle littéral objet. Ceci est utilisé pour créer et définir un nouvel objet avec les accolades, qui inclut certaines propriétés, comme nous l'avons fait ici. les fichiers de démarrage. Passez dans le fichier de cette leçon, qui est le constructeur d'objets, et ouvrez-le dans le navigateur. Comme mentionné précédemment avec les diapositives, nous avons deux façons différentes de créer un objet. Nous avons l'approche littérale, comme nous l'avons utilisée précédemment, et nous avons également une approche appelée constructeur. Le constructeur n'est rien de nouveau. Nous l'avons déjà examiné avec des tableaux. En règle générale, nous avons créé des tableaux en utilisant une approche littérale, telle qu'un tableau de pizzas, et configuré nos propriétés à l'intérieur de ces crochets. En plus de cette approche littérale, nous pouvons également créer un tableau à l'aide du constructeur. Par exemple, si nous voulions un tableau d'ingrédients, nous pouvons le configurer à l'aide du nouveau mot-clé suivi d'un tableau. Il s'agit d'une approche littérale et c'est ainsi que nous pouvons créer un tableau vide avec le constructeur. Nous pouvons ensuite accéder à notre tableau vide et ajouter de nouvelles valeurs à l'aide méthodes telles que push pour ajouter une nouvelle valeur à ce tableau. De la même manière que nos tableaux ici, nous pouvons également faire de même pour d'autres objets. Ce que je vais faire, c'est commenter cette approche littérale et recréer à l'aide du constructeur d'objet. Tout d'abord, nous allons créer une nouvelle variable appelée user pour imiter les objets ci-dessus et la définir comme égale à un nouvel objet. Ce nouvel objet va être un wrapper d' objet vide, puis nous pourrons ensuite pousser nouvelles propriétés vers cet objet. Pour ce faire, nous accédons à notre variable. Ensuite, nous pouvons définir le nom de la propriété directement sur notre objet. Tout d'abord, ce sera la clé, comme nous l'avons fait ici. Ensuite, nous attribuons cela à une certaine valeur. Cela équivaut à une chaîne de Chris. Ensuite, le second concerne le nom de famille, également une chaîne. Le troisième était l'occupation. Ensuite, nous avons le booléen connecté de true pour user.logged.in. Il s'agit d'un booléen, donc nous n'avons pas besoin des devis. Enfin, nous pouvons également attribuer un tableau à la propriété de tous les aliments. Je vais juste copier ce tableau d'en haut. Nous pouvons tester que cela fonctionne maintenant en effectuant un journal de console pour la valeur de l'utilisateur, puis en naviguant dans les outils de développement dans la console. Il y a notre objet avec toutes nos propriétés imbriquées à l'intérieur. Nous pouvons également accéder à des propriétés individuelles à l'aide d'une notation par points. Cela fonctionne exactement comme nous l'avons fait avec l'approche littérale. Nous pouvons utiliser user.first. Cela affichera notre prénom à l'intérieur de la console. En plus de cette notation par points, comme nous l'avons déjà utilisée, nous pouvons également accéder à nos propriétés avec la notation entre crochets. Ce que nous devons faire, c'est d' entourer le nom de notre propriété ces crochets, de supprimer le point. Il doit également s'agir d'une chaîne. Les deux donnent exactement le même résultat. Si nous le voulions, nous pourrions également mettre à jour directement l'une de nos propriétés , donc user.first. Nous pouvons ensuite le réaffecter ou le mettre à jour pour qu'il s'agisse d'une nouvelle valeur. Ensuite, nous pouvons l'imprimer sur la console. Cela nous donnera notre valeur actualisée. En guise de note, si nous avons accidentellement plus d'une propriété en double, comme ici où nous avons le prénom deux fois dans notre code, depuis ES 2015, le dernier utilisé plutôt que de lancer une erreur. De plus, nous pouvons également supprimer n'importe laquelle de ces propriétés à l'aide de l'opérateur de suppression JavaScript. Ce que nous devons faire, c'est ajouter la suppression, qui pointe notre prénom, l'enregistrer et l'actualiser, et nous allons simplement imprimer l'objet utilisateur complet. Ouvrez-le, et cela supprimera maintenant le prénom de notre objet d'utilisation. Il s'agit de deux façons différentes de créer un objet en JavaScript. Personnellement, je préfère l'approche littérale que nous avions au sommet car elle me semble plus propre et simple à utiliser. Mais cela dépend entièrement de vos préférences personnelles. Dans les prochaines vidéos, nous expliquerons comment configurer une fonction semblable à un modèle pour créer plusieurs objets. 15. Fonction constructeur d'objet: Super. Nous sommes maintenant conscients de deux manières différentes de créer des objets à l'intérieur de JavaScript. Si vous sautez dans le fichier de cette leçon, qui est des fonctions de constructeur d'objets, nous voyons que nous avons juste un script vide à l'intérieur d'ici. Les deux manières différentes que nous avons créées sont de créer une nouvelle variable comme celle-ci, puis nous pouvons ajouter nos propriétés directement à l'intérieur des accolades. Sinon, nous pouvons également utiliser un nouvel objet, qui est l' approche constructeur, ce qui nous donnera également un objet vide dans nos propriétés. Ces deux approches fonctionnent bien, mais elles se limitent également à créer un seul objet. Il serait plus utile de disposer un modèle d'objet afin de pouvoir créer plusieurs objets basés sur cette base, chacun présentant les mêmes propriétés et méthodes. Nous pouvons également le faire avec la fonction constructeur. Ce que nous allons faire, c'est que nous supprimerons cela et créerons une nouvelle fonction constructeur. Il est également recommandé de nommer ces fonctions de constructeur avec une majuscule. Nous utilisons dans notre exemple utilisateur, il s'agit d'un U majuscule, puis créons le reste de notre fonction. Le but de cette fonction constructeur pour notre utilisateur est de créer plusieurs utilisateurs à partir de ce modèle. Au sein de notre fonction, nous allons également transmettre certaines valeurs dont nous aurons besoin à l'intérieur d'ici. Le premier, nous allons garder cela assez simple, nous disons simplement le prénom, le nom de famille et l'occupation. Nous reviendrons à cette fonction dans un instant. Mais avant de créer un nouvel objet, comme celui-ci, nous avons utilisé le nouveau mot-clé, puis la fonction objet. Mais maintenant, au lieu de créer un nouvel objet vide, nous voulons créer une nouvelle instance de notre utilisateur. Plutôt que d'un nouvel objet, nous parlerons de nouveau User Capital U, où nous allons transmettre les valeurs réelles que vous souhaitez utiliser pour notre fonction. Nous devons transmettre le prénom, le dernier et l'occupation, et ce seront les trois valeurs dont nous avons besoin pour notre utilisateur. Nous dirons Chris, le nom de famille, et enfin l'occupation. Nous pouvons également dupliquer cela autant de fois que je le souhaite, car comme nous l'avons mentionné, l'objectif de la création de cette fonction constructeur est d'agir comme modèle pour créer autant d'objets que nous le voulons. Nous créons notre deuxième, nous avons un nom différent, et également huit professions différentes. Avec ces deux nouveaux utilisateurs, nous pouvons également stocker cela à l'intérieur de constantes ou variables afin d'y accéder ultérieurement. Donc, dites const chris égal à notre, et le second est égal à Homère. Super. Ce que nous allons maintenant faire est consigner la valeur de l' un de ces nouveaux utilisateurs. Placer un journal de console, la valeur de Homer, puis sauter dans la console. Comme vous pouvez le constater, nous avons un objet utilisateur. Mais si nous ouvrons cela , nous n'avons pas de propriétés à l'intérieur d'ici. Tout ce que nous avons, c'est un objet utilisateur vide. Cela peut être attendu car notre fonction constructeur que nous avons créée précédemment est vide. Nous n'avons pas de code à l'intérieur des accolades. Nous recevons les valeurs à l'intérieur de la fonction , mais nous ne faisons rien avec celles-ci pour l'instant. Pour ce faire, nous devons définir quelque chose qui soit égal à ces trois valeurs. Nous devons définir quelque chose pour être égal à notre premier, certaines choses égales à notre dernière, et quelque chose qui soit égal à notre occupation. Mais que faisons-nous pour les transformer en propriétés de nos objets ? Eh bien, pour définir une propriété, nous devons utiliser ce mot-clé. Pour mieux comprendre ce mot clé, je veux vous ramener rapidement à un fichier antérieur dans ce dossier de projet. Si nous revenons au numéro trois, qui est des fonctions, puis au numéro cinq, qui est une fonction ou une méthode, sautez dans cette page d'index juste ici. À l'intérieur d'ici, vous vous souvenez peut-être que nous avons créé un objet appelé « check recipes ». Les recettes de contrôle avaient certaines propriétés telles que le nombre actuel de recettes, le maximum de recettes, ainsi qu'une méthode appelée recettes restantes, qui a déduit le nombre actuel de recettes de le maximum. N'oubliez pas qu'une méthode n'est qu'une fonction située sur cet objet. Dans cette méthode, nous avons utilisé ce mot-clé pour accéder à d'autres propriétés de cet objet. Nous accédons aux recettes maximales, qui se trouvent sur cet objet et aussi aux recettes actuelles. Ce mot-clé peut être une chose complexe à comprendre en JavaScript, mais dans ces circonstances, il pointera simplement vers l' objet qui appartient ici. Cela signifie que nous pouvons accéder à n'importe quelle autre propriété de cet objet. Dans cette optique, revenons à notre fichier actuel, nous pouvons maintenant ajouter toutes les propriétés exactement de la même manière en utilisant le mot clé, suivi du nom de la propriété. Pour le premier dira ceci .FirstName et aussi la même chose pour les autres aussi, ce .LastName, et enfin, ce .occupation. Cela va maintenant construire nos deux objets utilisateur avec les propriétés que nous passons à l'intérieur. Enregistrez ceci et lorsque notre journal de console est toujours en place, actualisez-le. Notre utilisateur Homer est maintenant construit correctement et nous pouvons également le dupliquer pour notre premier utilisateur. Cela nous donne maintenant deux objets uniques , tous deux basés sur le même modèle. Si nous devons ajouter des propriétés et des méthodes supplémentaires, nous avons également quelques options. Nous pouvons les ajouter directement à l' un de nos objets comme celui-ci. Tout comme nous l'avons regardé sur la vidéo précédente, nous pouvons accéder à notre variable comme Homer. Nous pouvons dire des vies et définir cela à la hauteur de notre valeur. Nous pouvons également ajouter des méthodes à nos objets. Nous pouvons accéder à notre objet, qui est homer, puis nous pouvons lui donner un nom de propriété qui sera nom complet et le définir comme égal à une fonction. La responsabilité de cette fonction va être de renvoyer une nouvelle chaîne, qui est le premier nom ajouté au deuxième nom, alors retournez notre chaîne, qui est Homer.FirstName, ajoutez un vide de l'espace entre les deux , puis ajoutez-le à la fin Homer.LastName. Essayons ça. Tout d'abord, nous allons essayer la propriété Lives. Ajoutez-le à la console, rafraîchissez-le et nous obtenons la valeur de Springfield. Ensuite, nous pourrons essayer notre méthode qui était le nom complet. Rafraîchissez le navigateur. Whoops, nous avons une valeur indéfinie, alors jetons un coup d'œil à ça. Nous avons Homer.Prénom, c'est très bien. Juste une erreur d'orthographe en haut de l'air , alors nous allons changer cela. Maintenant, nous voyons que c'est Homer Simpson , donc cela fonctionne parfaitement. Mais ils ne sont ajoutés qu' à nos objets uniques. Ceux-ci ne sont ajoutés que la grande variable Homère. Si nous avons essayé d'accéder à notre variable Chris et de l'essayer dans la console, nous voyons une erreur à l'intérieur d'ici. Cette approche n'est utile que si vous souhaitez modifier un objet spécifique. Si nous voulons les appliquer à tous les objets créés, nous devons les placer sur la fonction constructeur située en haut. Donc, tout d'abord, nous devons transmettre la propriété des vies à notre fonction, puis nous pouvons les ajouter à nos deux objets ci-dessous. Chris, valeur du Royaume-Uni et Homer, la valeur de Springfield. Nous devons également modifier notre corps fonctionnel. Nous allons dupliquer cela et nous dirons ceci. Les vies sont égales à la valeur des vies que vous transmettez. Nous devons également passer la méthode. La méthode sera toujours la même, elle utilise simplement le prénom et le nom de famille existants . Je vais simplement couper et coller ça dans notre fonction. Coupez ceci, collez-le dans notre fonction. Cette fois, nous allons supprimer Homer, remplacer Homer par le mot clé. Il en va de même à l'intérieur de notre corps fonctionnel. N'oubliez pas que, comme dans l'exemple précédent de la vidéo précédente, ce mot-clé pointera vers n'importe quelle autre propriété de cette fonction utilisateur. Enfin, nous pouvons également supprimer homer.lives. Nous n'avons plus besoin de cela, donc maintenant nous pouvons enregistrer et le rafraîchir. Maintenant, la méthode du nom complet fonctionne pour nos deux objets. 16. Prototypes d'objets: Si vous n'avez pas bien compris le rôle du prototype dans les premières vidéos, j'espère que maintenant le voir en action avec nos propres objets peut aider à faire cliquer certaines choses. Dans le projet de démarrage, nous commençons par la section prototype d'objet avec le même exemple que celui de la vidéo précédente. Nous avons une fonction constructeur pour créer des modèles ou des Blueprints. Cela signifie que nous pouvons créer plusieurs objets avec les mêmes propriétés et méthodes disponibles. Nous avons ensuite examiné comment ajouter des propriétés et des méthodes, tant pour un seul objet que la fonction afin qu'elles s'appliquent à tous les nouveaux objets créés. En plus d'ajouter à la fonction constructeur, nous pouvons également ajouter directement au prototype. Mais avant de faire cela, rafraîchissons d'abord ce que nous savons sur le prototype. En bas, nous réalisons un journal de console avec la valeur Homer, qui a créé un nouvel objet utilisateur à partir de notre constructeur. Si nous ouvrons cela dans le navigateur et sautons dans les outils de développement dans la console, et regardons ce que nous voyons à l'intérieur d'ici. Rafraîchissez et nous voyons notre utilisateur. Ouvrons ça. Il contient nos propriétés. Nous avons le prénom, le nom de famille et toutes les valeurs que vous voyez en bas. Ensuite, en bas, nous avons ce prototype, qui est un maillon vers la chaîne prototype. Ouvre ça. À l'intérieur, nous pouvons voir notre propre constructeur, qui est notre utilisateur. Parallèlement à cela, un deuxième prototype d'objets. Le premier protocole, qui est celui qui est en haut ici, indique nos propres ajouts de prototypes, que nous allons bientôt examiner. Ensuite, le deuxième que nous venons d'ouvrir, a maintenant beaucoup de choses à l'intérieur d'ici, que nous n'avons pas ajoutées nous-mêmes. Nous avons des choses comme ValueOf, ToString. Ce ne sont pas des choses que nous avons créées nous-mêmes. N'oubliez pas que les objets JavaScript héritent des propriétés et des méthodes des objets parents. Tout en haut de cette chaîne d' héritage se trouve l'objet. Consignons maintenant cela à la console pour référence. Juste avec Homer, je vais faire un deuxième journal de console avec la valeur de l'objet. Maintenant, sauvegardons cela et actualisons le navigateur, nous laissant le type d'objet principal côté de notre propre objet de maison. Cette première valeur d'objet est un objet vide, que vous pouvez voir si vous l'ouvrez. Il est vide en ce qui concerne l' absence de propriétés de valeurs à l'intérieur comme nous l'avons ici. Mais le but de cet objet de premier niveau, même s'il est vide, est de contenir les propriétés et méthodes minimales qui se transmettent à d'autres objets via la chaîne prototype. Nous pouvons le voir si nous ouvrons cela. Il contient toutes ces propriétés et méthodes auxquelles nous pouvons désormais accéder via nos propres objets créés. Si nous ouvrons maintenant notre propre objet de maison, passez au prototype. Ensuite, le deuxième prototype à l'intérieur ici, vous pouvez voir que cela a hérité des mêmes propriétés et méthodes de nos objets de premier niveau. Cela signifie maintenant qu' ils peuvent désormais être utilisés dans nos propres objets personnalisés. Comme nous l'avons vu précédemment, c'est pourquoi des méthodes telles que les tableaux personnalisés sont disponibles, par exemple pour chaque push et pop. Nous n'avons pas réellement créé ces méthodes nous-mêmes. Mais au lieu de cela, ils sont hérités de la chaîne prototype. Tous les rayons peuvent les utiliser. Nous ne devrions pas ajouter nos propres propriétés et méthodes à des objets que nous n'avons pas créés nous-mêmes, mais nous pouvons les ajouter à notre propre constructeur personnalisé, tel que cet utilisateur. Nous pouvons le faire en accédant à la propriété prototype de cet utilisateur. Juste en dessous de ça. Faisons de l'espace. Accédez à notre constructeur d'utilisateurs. Ensuite, le prototype. Nous pouvons définir une nouvelle propriété ici, donc n'importe quelle valeur. Il peut s'agir d'autres types de données tels que des chaînes, des nombres ou même des méthodes. Nous pouvons également retirer le premier objet, laissant notre deuxième objet Homer en place. Rafraîchissez, ouvrez ça, sautez dans le prototype. Maintenant, je vais ouvrir ce prototype d'objet. Nous voyons également la propriété personnalisée, que nous venons de définir. Nous voyons que le cool n'est pas placé sur l'objet d'origine à côté du prénom, par exemple. Mais si nous essayons d'y accéder, cool, alors regardez la chaîne de prototypes. Si ce n'était pas sur notre chaîne prototype, que vous voyez ici, elle examinerait encore plus loin la chaîne d'héritage. Nous pouvons tester cela. Allez dans le journal de la console. Maintenant, Homer.cool. N'oubliez pas que le .cool n'est pas disponible sur notre constructeur d'origine. Il va ensuite regarder vers le bas la chaîne des prototypes, se rafraîchir. Nous obtenons la valeur de vrai. Il en va de même pour les méthodes. Nous pouvons également ajouter différentes méthodes au prototype. Plutôt que d'avoir cette méthode disponible sur notre constructeur, ce que je vais faire est de copier ceci et de commenter cela. Collez cela en dehors de notre utilisateur. Cette fois-ci, plutôt que d'accéder à l'objet via cela, nous allons accéder à notre prototype utilisateur.comme nous l'avons fait auparavant. Cette fois, le nom complet sera égal à notre fonction. Essayons cela dans notre journal de console. Cette fois, le nom était FullName. Avec cette méthode, nous devons également y accéder avec les crochets. Cela devrait maintenant renvoyer notre Prénom, l' ajouter à notre nom de famille. Bien. Si vous voulez également vérifier que c'est sur le prototype à côté de cool. Nous pouvons supprimer FullName. Connectez-vous à la console, la valeur d'Homer. Ouvre ça, saute dans le prototype, et nos deux nouvelles éditions sont à l'intérieur d'ici. Pour commencer, le prototype peut sembler complexe, mais il s'agit simplement d'un moyen d'hériter propriétés et des méthodes d'un objet parent, même d'un parent créé comme notre utilisateur, ou de l'objet de niveau supérieur que JavaScript fournit. Pour résumer, le prototype est une propriété sur un objet. Il sera disponible pour être hérité par d'autres objets. Un exemple de cela était notre nom complet et nos ajouts sympas. Ces deux éléments ont été ajoutés à notre prototype, ce qui signifie qu'ils ont été mis à la disposition d'autres objets en héritage, tels que notre utilisateur Homère en bas. 17. Propriétés d'objets Inheriting: Nous avons parlé un peu jusqu'à présent de la façon dont nous disposons cet objet JavaScript parent principal, qui possède un prototype, et de la façon dont on en créerait de nouveaux, ils héritent automatiquement de certaines choses à travers la chaîne de prototypes. Mais que se passe-t-il si nous voulions également autoriser l'héritage de nos propres objets ? Dans un fichier de démarrage, nous avons un exemple d'utilisateur similaire de la vidéo précédente. Nous avons un objet utilisateur, et nous pouvons commencer à réaliser que cet objet utilisateur présente certaines limites pour notre utilisation particulière. Ici, nous créons de vraies personnes comme moi et juste en dessous d'un personnage fictif. Mais si nous y réfléchissons, gens réels et fictifs peuvent avoir besoin de propriétés différentes. Nous pouvons, par exemple, ajouter le nom de l'émission d'où provient le personnage fictif. Mais cela ne s'appliquerait pas à une personne réelle. Il est désormais difficile d' étendre cet objet beaucoup plus loin. Ce que nous pouvons faire, c'est utiliser cet objet utilisateur comme base, y compris uniquement les propriétés minimales qui s'appliquent à la fois à l'utilisateur réel et à l'utilisateur fictif. Ensuite, nous créons deux autres objets, qui hériteront tous deux de cet utilisateur d'origine. Nous avons toujours accès à toutes les choses comme les noms et les professions. Mais il aura également des propriétés spécifiques dont nous avons besoin pour chaque cas d'utilisation. Pour ce faire, nous avons une méthode objet appelée create. Juste avant d'ajouter cela à notre exemple actuel, examinons comment nous pouvons le faire avec un objet autonome normal. abord, ajoutons n'importe quel objet normal en bas. Supprimez notre journal de console pour l'instant, créez un nouvel objet appelé product1. Ouvrez les bretelles bouclées et nous ajouterons nos propriétés. Le titre, encore une fois, c' est assez générique, donc une chemise bleue incroyable. Également la description. Tout simplement une chemise bleue. En tant qu'objet autonome, un objet générique peut s' appliquer à plusieurs chemises bleues. Le titre ainsi que la description conviendront aux autres chemises bleues. Nous pourrions également modifier certains détails tels que la marque ou la taille d'autres produits. Nous pourrions ensuite utiliser cette méthode object.create que nous avons déjà mentionnée pour créer un deuxième produit basé sur cela, installer à l'intérieur d'une variable appelée product2 et le définir comme égal à object.create. À l'intérieur de object.create, nous transmettons notre produit1, ce qui signifie qu'il créera un nouveau produit appelé product2 basé sur notre produit original1. Consignons cela sur cette console, product2, et voyons ce qui se passe à l'intérieur d'ici. Rafraîchir Il suffit de mettre à jour ce lien dans le navigateur. Au départ, nous voyons un objet vide. Nous n'avons pas de propriétés ou méthodes associées à cela. Mais si nous allons de l'avant et ouvrons le prototype qui est joint, nous avons accès à notre titre ainsi qu'à notre description héritée de notre produit1. C'est ainsi que fonctionne la méthode create. Il crée un nouvel objet et utilise l'objet existant que nous transmettons en tant que prototype. Encore une fois, remarquez que nous avons également un deuxième prototype. Nous avons d'abord la nôtre, qui est la description, puis le titre. Plus loin dans la chaîne, nous avons toutes les propriétés et méthodes que nous avons vues précédemment, héritées du haut de la chaîne de l'objet. Comme nous l'avons déjà appris, même si notre propre objet est vide, nous pouvons toujours accéder à ces propriétés héritées de product1 par leur nom. product2, rappelez-vous que c'est complètement vide comme nous venons de le voir dans la console. Nous pouvons accéder aux valeurs héritées telles que title. Nous pouvons également ajouter nos propres propriétés et méthodes, comme vous vous y attendez. Juste en dessous de notre produit2, nous pouvons y accéder par le nom, puis définir nouvelles propriétés telles que la taille, par exemple petite. Connectez-vous à la console, qui met ensuite à jour notre objet. Nous pouvons maintenant supprimer tout cet exemple et utiliser ces connaissances que nous venons d'apprendre. Nous pouvons maintenant essayer d'appliquer le même exemple à notre utilisateur. Mais la principale différence ici est que nous avons une fonction constructeur plutôt qu'un objet réel. Si nous devions faire la même chose qu'auparavant, créons une variable appelée copy, qui est définie sur object.create. Ensuite, si nous essayons de faire une copie de notre utilisateur, voyons ce qui se passe à l'intérieur de la console. Enregistrez et rafraîchissez. La copie est une copie de la fonction, qui n'est pas ce que nous voulons. Ce que nous recherchons, c'est un moyen de créer des fonctions plus constructives qui héritent toutes des propriétés de cet utilisateur. Commençons par le personnage. Juste en dessous de notre utilisateur, créez notre nouveau constructeur d'objets appelé personnage. N'oubliez pas que le but de cette fonction est d'hériter de toutes les propriétés de base de nos objets utilisateur. Nous allons également ajouter des propriétés supplémentaires qui ne s'appliquent qu'à notre personnage. Cette information supplémentaire que nous allons transmettre est celle d'où provient le personnage. Ensuite, comme ci-dessus, nous accéderons à ce .show, définissant cette valeur égale à la valeur transmise à ce constructeur. Maintenant, ce que nous faisons est de créer un nouvel objet personnage avec la propriété show et d' hériter également de toutes ces propriétés. Mais cela, nous devons entrer dans notre personnage et accéder d'abord à notre fonction constructeur utilisateur, laquelle nous pouvons ensuite accéder à une fonction d'appel. Cette méthode d'appel est disponible sur le prototype d'une fonction et permet une fonction appartenant à un objet appelé à l'intérieur d'un autre objet. Cela signifie que nous pouvons maintenant appeler une fonction utilisateur depuis notre fonction de personnage. Cette méthode d'appel n'est pas exclusive à ce cas d'utilisation. Il peut être utilisé chaque fois que je souhaite accéder à une fonction ou à une méthode située sur un autre objet. Cette fonction utilisateur prend également en charge ces quatre paramètres. Nous pouvons les copier et les ajouter à notre personnage. Maintenant, rappelez-vous que Homer est un personnage, donc plutôt que de fonder cela sur le nouvel utilisateur, nous allons baser cela sur le nouveau personnage. Comme quatrième argument que je vais montrer, juste après Springfield, nous pouvons transmettre notre dernière valeur, à savoir les Simpson. Ces cinq valeurs correspondent désormais aux cinq valeurs de caractères transmises à notre constructeur. Essayons ça. Nous pouvons supprimer notre copie d'avant, et nous consignerons la valeur d'Homère. Cela montre maintenant qu'Homère est un objet personnage. Il possède la propriété show avec la valeur des Simpson. Nous savons que homer.show devrait maintenant fonctionner aussi. Mais qu'en est-il des autres propriétés héritées ? Nous pouvions voir avant l'objet Homère qu'il n'avait accès à la propriété show qu'au niveau supérieur. Nous n'avions rien d'autre tel que le FirstName et LastName, l'occupation ou les vies. Essayons ça et voyons ce qui se passe. Tout d'abord, essayez l'occupation. Rafraîchissez et nous récupérons la valeur indéfinie. Essayons encore une fois. homer.lives et cela est également indéfini. Les propriétés héritées ne semblent pas fonctionner ici. Cela est dû au fait que nous manquons certains détails lorsque appelons notre fonction utilisateur à l'intérieur de notre personnage. Tout d'abord, nous devons copier tous ces paramètres transmis et ajouter cela à notre méthode d'appel. Mais en plus de cela, nous devons également transmettre ce mot-clé. Nous avons mentionné précédemment que ce mot clé peut être une chose complexe à comprendre. Nous en aurons plus à ce sujet plus tard. Mais cela signifie essentiellement que lorsque nous exécutons notre fonction, nous pouvons accéder aux valeurs à l'aide de cette fonction. Tout comme nous étions au-dessus. faisant défiler vers le bas, nous essayons toujours de consigner Homer.lives. Rafraîchissons cela et nous avons maintenant la valeur de Springfield. Nous pouvons en essayer un autre, le FirstName. Tout cela fonctionne correctement. Comme récapitulatif, car cela peut être assez déroutant, nous créons un nouvel objet Homère basé sur notre personnage. Cette fonction de constructeur de caractères ne possède qu'une seule propriété, savoir l'affichage auquel appartient le personnage. Mais il hérite également de toutes les propriétés et méthodes de nos objets utilisateur, que nous transmettons ici. En fait, nous n'avons pas non plus besoin d' ajouter ces émissions car elles appartiennent à cette fonction particulière. Avec toute cette complexité, si nous voulons vérifier quel de nos constructeurs a créé un objet particulier, comme Homère, nous pouvons utiliser quelque chose appelé instanceof. Nous pouvons vérifier cela dans le journal de la console. Nous pouvons vérifier si l'objet Homer est une instance de personnage. devrait être la valeur de vrai puisque nous sommes la base de notre nouveau personnage. Mais si nous devions transmettre notre utilisateur, celui-ci sera faux. C'est ainsi que JavaScript fait les choses. Il possède dès le début des objets dont nous pouvons en hériter. En tant que nouveau venu, nous ne savons même pas que cela se passe en coulisses. Mais si nous devions creuser un peu plus profondément comme ça, nous pouvons commencer à comprendre que c'est ainsi que chaque nouvel objet, des objets faisant également référence à d'autres types tels que tableaux et des fonctions et ont un ensemble. de propriétés et de méthodes utiles que nous pouvons utiliser chaque fois que nous créons nos propres objets. Comme nous venons de le dire, nous pouvons également tirer parti de l'héritage de ce prototype par nos propres objets si nécessaire. 18. Copier les propriétés de l'objet: Dans les vidéos précédentes, nous avons approfondi objets avec des constructeurs d'objets, des copies et des prototypes. Mais parfois, nous voulons simplement copier les propriétés d'un objet vers un autre. Il existe plusieurs façons de le faire. Tout d'abord, nous avons le personnage de base avec des informations qui pourraient s'appliquer à tous les nouveaux personnages Simpson que nous créons. Des informations assez génériques, et ci-dessous nous avons également un objet homer avec quelques propriétés qui ne s'appliquent qu'à ce personnage. Pour Homer et pour tous les autres personnages que nous créons, nous devons également fusionner toutes les propriétés du personnage de base. Une façon simple de le faire consiste simplement à référencer ce personnage de base à l'intérieur de l'objet Homère. Nous avons ajouté ceci en tant que propriété, l'avons dans le caractère de base et le tester dans la console. Nous disposons déjà d'un journal de console pour la valeur de Homer. Si nous ouvrons cela, nous avons les quatre propriétés originales et nous voyons également notre caractère de base. Cela fonctionne parfaitement, mais cela crée un objet de personnage de base lequel nous devons nous ouvrir et plonger. Notre personnage de base est imbriqué d'un niveau plus profond que toutes nos autres propriétés. Mais il serait préférable que nous puissions saisir toutes ces propriétés de caractères de base et les mettre efficacement à côté de ce que nous avons déjà. L'une des façons de le faire consiste à utiliser des objets dispersés, que nous avons regardés plus tôt, savoir les trois points. Passer les trois points avant l'objet de notre personnage de base. Maintenant, nous ne voyons plus l'objet du personnage de base lequel nous devons plonger. Au lieu de cela, nous voyons toutes les propriétés des personnages de base à côté de nos propriétés homères. Nous pourrions également utiliser cette technique pour diffuser autant d' objets différents que nous le voulions. Par exemple, si nous avions un personnage d'Homer Simpson doté superpouvoirs pour un épisode particulier, nous pourrions faire quelque chose comme ça. Nous pourrions créer un nouvel objet appelé SuperHomer. SuperHomer aurait également besoin d'hériter du personnage de base et de toutes les informations existantes de Homer. Nous pouvons également supprimer cela. Nous pouvons utiliser la passe de spreads dans ces deux objets. Le personnage de base ainsi que les informations d' homer existantes. En plus de cela, nous pouvons également transmettre nos propres propriétés spécifiques à cet objet unique. Par exemple, nous pourrions définir les pouvoirs pour qu'ils soient égaux à vrai, et cela devrait maintenant afficher un gros objet dans le navigateur. Passons simplement à notre journal de console pour devenir SuperHomer. Rafraîchissez et maintenant nous avons neuf propriétés différentes sur cet objet. Nous avons la chute du personnage de base, du premier plan de l'objet Homère, et aussi des pouvoirs réglés sur vrai. Nous pourrions supprimer ou commenter cet objet, et nous allons maintenant examiner une autre façon de copier propriétés de l'objet vers un nouvel objet. Cela se fait avec une méthode objet appelée assignation. Accédez à notre objet principal, la méthode d'attribution. Cela va prendre en compte deux choses. Tout d'abord, l'objet cible vers lequel vous souhaitez copier. Nous le copierons sur notre objet Homer, et le second est l' objet que vous souhaitez copier. En utilisant notre exemple original pour déplacer toutes les propriétés de notre personnage de base vers Homère. Transmettez cette valeur comme deuxième valeur. Dans le journal de la console pour être plus homer. Sautez dans la console. Cela fusionne désormais toutes les propriétés du personnage de base dans notre objet Homer. Fonctionne efficacement comme l'opérateur de propagation que nous avons examiné auparavant. De plus, si nécessaire, nous pouvons stocker ce nouvel objet dans une variable telle que MergedHomer. Cela devrait également fonctionner exactement de la même manière. Cette technique assignée, ainsi que les précédentes, sont vraiment utiles et quelque chose que vous pouvez souvent utiliser en JavaScript. Il existe de nombreux cas d'utilisation, par exemple si nous avions un utilisateur et une commande, nous voudrions peut-être joindre un objet utilisateur à notre commande avant de l'enregistrer dans la base de données, afin que nous sachions qui a réellement passé la commande. Vous trouverez probablement également nombreux cas d'utilisation. 19. Objets de style CSS: Dans la section DOM, nous avons créé nos propres éléments HTML. Ensuite, nous avons examiné comment ajouter un style CSS à ces éléments à l'aide de JavaScript. Dans le fichier Style, nous avons un exemple de cela en bas, une section d'en-tête simple avec un titre sans hamburgers à la viande. Ensuite, en dessous de cela, dans notre script plusieurs propriétés de style sont appliquées. Cela fonctionne bien comme nous pouvons le voir à l'intérieur du navigateur, mais cela peut être une très longue façon de faire les choses. Il n'est pas non plus réutilisable sur d'autres éléments. Une solution consiste à créer un objet style contenant toutes les propriétés et valeurs CSS dont nous avons besoin. Allons en bas et nous commenterons tous ces styles existants et nous allons recréer à l'intérieur d'un objet style. Stockez-le à l'intérieur d'une variable appelée styles. Dites cela équivaut à un objet, et nous les reproduirons efficacement à l'intérieur d'ici. Tout d'abord, l'affichage est égal à la valeur de flex. Puisqu'il s'agit d'un objet, nous devons le séparer par une virgule et le suivant est JustifyContent. Puisqu'il s'agit de JavaScript, nous devons également faire ce cas camel, JustifyContent et chaque mot après le premier doit commencer par une majuscule. La valeur, cela peut être la même, peut s'agir d'un espace entre les deux. Ensuite, nous avons une valeur de remplissage. Encore une fois sous forme de chaîne, zéro en haut et en bas, et 10 pixels à gauche et à droite. Contexte. Qu' avons-nous ici ? Nous avons une valeur RVB. Nous allons copier ça. Enfin, la couleur. Prenons la valeur que nous avons déjà , collez-les dans. Passons dans le navigateur et rafraîchissons. Nous n'avons pas de style appliqué. Nous avons maintenant besoin d'un moyen d' appliquer réellement l'objet style à notre élément d'en-tête. Tout comme la dernière vidéo, nous pouvons utiliser object.assignation. Cela va copier toutes les propriétés de nos objets de style dans cet élément d'en-tête. En bas de l'objet de script. Assign. Nous voulons les appliquer à l'en-tête. Les propriétés de l'objet que vous souhaitez appliquer sont nos styles. Mais tout comme ça, cela ne fonctionne pas si nous actualisons le navigateur. La raison est comme nous l'avons fait à l'origine, au lieu de les appliquer à l'élément d'en-tête, nous devons les appliquer à header.style, donc à .style et rafraîchir et tout cela devrait maintenant prendre effet dans le navigateur. Pour le moment, vous pouvez être un peu confus quant à la raison pour laquelle une méthode objet telle qu' assignation fonctionne sur un élément tel qu'en-tête. Eh bien, c'est parce que nos éléments, comme beaucoup de choses en JavaScript sont également classés comme des objets. Nous pouvons le voir avec un journal de console. Nous pouvons utiliser l'opérateur typeof et la valeur de l'en-tête. Voyons ensuite ce qui se passe à l'intérieur de la console. Rafraîchissez et vous pouvez voir que l'en-tête, même s'il s'agit d'un élément, est un type d'objet. Lorsque nous créons de nouveaux éléments, nous créons réellement des objets éléments et c'est ainsi que nous pouvons accéder aux propriétés, aux méthodes et aux événements. Nous avons déjà utilisé des propriétés telles que l'accès aux attributs, à la liste des classes et au code HTML interne pour n'en nommer que quelques-unes. Les méthodes que nous avons utilisées incluent queryselector et AddEventListener. Ils sont tous disponibles sur cet objet élément. Mais pourquoi créer un objet style au lieu d'un CSS normal ? Eh bien, le CSS est probablement facile pour de nombreux cas d'utilisation, mais cette méthode a également ses propres utilisations. Le principal pour moi est le fait qu'il est contrôlé par JavaScript. Nous pouvons modifier les valeurs de manière dynamique. Si nous avions un jeu, par exemple, nous pourrions changer l' arrière-plan pour qu'il devienne rouge si la partie était terminée. Nous pouvons accélérer le décompte à rebours au fur et à mesure qu'il se rapproche de la fin et nombreux autres cas d'utilisation exceptionnels en mettant à jour l'une de ces valeurs dynamiquement. 20. Faire une boucle avec des objets: objets peuvent avoir de nombreuses valeurs comme nous savons et, comme pour les tableaux, boucle est un moyen pratique de répéter quelque chose pour chaque propriété. Il existe plusieurs façons différentes d' utiliser pour parcourir des objets, et tout d'abord, nous examinons la boucle for-in. Dans le fichier de cette leçon, nous avons une fonction constructeur en haut, que nous avons déjà vue pour créer un nouvel utilisateur. Notez que les ajouts de prototypes sont commentés et nous verrons pourquoi bientôt. boucle for-in devrait paraître assez familière. Nous avons déjà examiné cela dans la boucle de la section, mais je veux vous montrer quelque chose d'autre lié. En guise de rafraîchissement, c'est comme ça qu'il se trouve à l'intérieur de notre code. Cela commence par le mot-clé for, et pour cet exemple, nous allons passer en boucle sur notre objet Homer. Nous devons créer une variable pour chacune des propriétés à l'intérieur d'ici, donc le prénom, le nom de famille, l'occupation et les vies. C'est à l'intérieur d'une variable ou d'une constante appelée propriété à l'intérieur de notre objet homère. Maintenant, nous allons ouvrir les bretelles bouclées et à l'intérieur ici, nous pouvons faire tout ce que nous voulons avec cette propriété. Mais maintenant, nous allons créer un journal de la console, ouvrir les coches arrière pour pouvoir insérer notre variable de propriété, qui est notre nom de propriété, tel que le prénom, ajouter un deux-points, et ensuite nous pourrions accéder également à la valeur de la propriété. Encore une fois, nous allons insérer cette variable en tant que variable afin d'accéder à notre objet homer complet, et à l'intérieur des crochets, nous transmettrons la propriété dont et à l'intérieur des crochets, nous voulons saisir la valeur. Enregistrez cela, actualisez et nous voyons chacune de ces quatre propriétés à l'intérieur de la console. Nous voyons les noms de propriété réels tels que le prénom, puis nous l'utilisons pour sélectionner la valeur de la propriété à partir de l'objet Homer, tel que Homer. Nous pouvons ensuite utiliser ces valeurs pour construire des éléments afin de les ajouter maintenant au DOM. abord, une liste non ordonnée est requise, que nous pouvons utiliser comme wrapper pour toutes ces valeurs, alors sautez jusqu'à notre section corps en dehors du script, a une liste non ordonnée, et la première étape consiste à saisir une référence à nos éléments. Const ul est incroyablement similaire à Document.QuerySelector, passe dans notre liste non ordonnée. Cela nous donne maintenant deux choses. Nous avons une boucle, donc nous parcourons toutes les propriétés à l'intérieur de notre objet, et maintenant cela nous donne un élément auquel nous attacher cela. Comme il s'agit d'une liste non ordonnée, nous devons créer un nouvel élément de liste pour chacune de ces valeurs. Const li pour notre élément de liste, nous allons le créer avec Document.createElement (). Un élément est en li. N'oubliez pas que lorsque vous créez de nouveaux éléments, il s' agit généralement d'un processus en trois étapes. Nous créons les éléments, nous créons le contenu, tel que le nœud de texte, puis nous les fusionnons ensemble. La deuxième partie concerne le texte qui se trouve à l'intérieur de notre élément de liste. Nous le faisons avec Document.createTextNode (), répliquez ce que nous avons vu dans la console. Il suffit de copier le contenu de l'intérieur d'ici et de le coller à l'intérieur de notre méthode. Supprimez le journal de la console, fusionnez-les ensemble en accédant d'abord à nos éléments et en utilisant la méthode AppendChild. Nous allons passer notre texte. Cela a créé de nouveaux éléments autonomes ou un élément de liste autonome, puis, pour chaque boucle, nous devons fusionner cela ou l'insérer dans notre liste non ordonnée. Comme nous l'avons fait plus haut, nous allons récupérer notre liste non ordonnée et utiliser AppendChild. En lui transmettant l'élément de liste que nous venons créer. Enregistrez et rafraîchissez. Nous y allons et c'est un très bon moyen de structurer nos objets pour les afficher à l'intérieur du navigateur. Mais revenons à ce prototype, que vous avez déjà mentionné, qui est actuellement commenté. Si nous décommentons cela, sauvegardons cela et, à nouveau, actualisez le navigateur. Nous voyons également ces deux valeurs prototypes à l'intérieur d'ici. C'est quelque chose que nous devons surveiller et si nous ne voulons pas parcourir ces prototypes, ce qui est souvent le cas, ce qui est souvent le cas, nous pouvons les éliminer à l'aide d'une méthode d'objet appelée hasOwnProperty (), que nous pouvons utiliser à l'intérieur de la boucle. Passons à notre boucle for-in, et tout en haut, ajoutons une déclaration if. Nous passerons à Homer.HasownProperty (), en passant notre variable de propriété. Ce que nous faisons ici, c'est que nous accédons notre objet Homer complet , puis nous vérifions chaque propriété une par une. Nous vérifions si la propriété particulière appartient à cet objet Homer, ou si elle est héritée via le prototype. Si c'est le cas, nous voulons exécuter notre code ci-dessous. Si ce n'est pas le cas, il s'agit d'une valeur prototype et donc ignorée. Nous pouvons maintenant couper cela hors de sa place et l'ajouter dans nos déclarations if. Rafraîchissez, et c'est un moyen d' ignorer nos valeurs prototypes héritées. Une autre façon de boucler des objets consiste à les convertir en tableaux. Object dispose de certaines méthodes que vous pouvez utiliser pour ce faire, et selon que vous souhaitez accéder à la propriété de l'objet, la valeur des deux sous forme de paire. Commençons par une méthode appelée entrées tout en bas, placons dans un journal de console pour objects.entrées () et notre valeur objet Homer. Testez cela, sautez dans la console, et il revient toujours dans le tableau. Non seulement cela revient dans le tableau, chacune des propriétés est également un tableau. Il contient le nom de la propriété ainsi que la valeur comme vous pouvez le voir ici. Cette méthode n'inclut pas les valeurs prototypes comme pour for in. Si nous utilisions cela, nous pourrions ignorer les déclarations if que nous avons ici. Pour essayer cela, et garder le même exemple, augmentez l'exemple dans l'exemple, puis commentez cela. Collez ceci juste en dessous. Je dois mentionner que nous n'avons pas besoin de cette déclaration si car nous n'avons pas besoin d' éliminer aucun des prototypes hérités. Retirez l'emballage en laissant ces quatre lignes à l'intérieur. Cette fois-ci, plutôt que de boucler notre objet Homer, nous allons maintenant utiliser object.entry. Nous allons déplacer cela, et comme nous l'avons fait dans le journal de la console en remplaçant des objets, des entrées de données avec la valeur Homer. Enregistrez et rafraîchissez. Dans le navigateur, nous voyons les valeurs indéfinies. Cela n'est peut-être pas évident au début de la raison pour laquelle c'est le cas, mais c'est à cause du type de boucle que nous utilisons. Nous utilisons actuellement une boucle for in, qui est utilisée sur les objets. Mais maintenant, nous convertissons Homer en tableau. Cela signifie maintenant que nous devons apporter une petite modification et utiliser plutôt une boucle for, donc changer pour être de, et nous souvenir maintenant de cette propriété, au lieu de renvoyer une seule propriété comme avant, va maintenant pointer vers un tableau qui contient deux valeurs telles que notre prénom et notre homère. Ce que nous pouvons faire au lieu de cela , c'est la structure D en utilisant le tableau, ce qui nous donnera la clé et la valeur. Dans ce cas, la clé est égale au prénom et la valeur sera égale à Homer pour chacun de nos articles. Passe-moi ça. Tout d'abord, la clé, puis transmet également notre valeur. Enregistrez ça. Rechargez. Cela fonctionne de nouveau comme prévu. C'est une très bonne façon de boucler, qui n'implique pas le prototype. Si nous le voulons, nous pouvons également accéder aux clés, toutes les valeurs individuellement . La façon de le faire. Par exemple dans notre journal de console, si nous voulons simplement accéder aux clés telles que le prénom et le nom de famille, nous pouvons utiliser une méthode d'objet appelée keys, où nous transmettons notre objet homer, et il y a nos quatre clés sans les valeurs. Par contre, si nous voulions simplement accéder aux valeurs et non aux clés, nous pouvons utiliser object.values, et cela reviendra à l'intérieur de la console. Ceci est également couramment utilisé dans les instructions if comme celle-ci. Nous pourrions dire si object.keys (), transmettez notre objet et accédez à la propriété length est supérieure à zéro. Nous pouvons ensuite faire quelque chose à l'intérieur d'ici. Cela vérifie si un objet n'est pas vide avant d'exécuter un code, et cela dépend simplement si vous souhaitez accéder à la clé, la valeur ou aux deux. 21. Objets dynamiques: Cette vidéo va convertir la création d'objets plus dynamiques. Par là, je veux dire que la clé et la valeur peuvent être modifiées à l'aide de JavaScript. Lorsque nous créons de nouveaux objets, comme nous l'avons fait avec cet objet de maison, nous utilisons une valeur primitive simple telle que des chaînes, mais nos programmes ne seront pas toujours aussi rigides. se peut également que nous ayons besoin d'insérer des données susceptibles de changer, telles qu'une variable. De plus, même avec les noms de clés tels que FirstName et LastName et occupation. Tout cela peut également être dynamique. Je vais maintenant vous montrer quelques façons de le faire. abord, les méthodes les plus traditionnelles, puis une méthode introduite dans ES2015. Nous commençons par insérer des variables en tant que valeurs, ce qui est assez simple à faire. Créons d'abord une variable appelée FirstName et définissons cette variable sur Homer. Nous pouvons ensuite référencer cette variable dans la valeur de notre propriété lorsque nous créons notre nouvel utilisateur Homer. N'oubliez pas que puisque nous faisons maintenant référence à une variable plutôt qu'à une chaîne, nous devons supprimer les guillemets environnants. Enregistrez cela et rafraîchissez-le. Cela fonctionne comme avant, mais cette fois, nous pointons maintenant vers une variable. Nous savons déjà que nous pouvons ajouter de nouvelles propriétés comme celle-ci. Nous pouvons accéder à notre objet, accéder à la propriété likes et définir cette propriété comme une chaîne. Enregistrez et actualisez, et cela est également ajouté à notre objet. Actuellement, la valeur des J'aime est définie comme une chaîne. Nous voudrions peut-être également que cela soit dynamique. Essayons de définir cela comme une variable plutôt qu'une chaîne. Supprimez les devis. Je vais créer cela comme une variable juste au-dessus, const likes, et insérer notre chaîne dans les coches arrière afin que nous puissions insérer notre variable en passant tous notre Prénom. Dans ce cas, il dira homerlikes, suivi d'une valeur particulière. J'envoie FirstName, un texte de j'aime, et maintenant nos likes à l'intérieur d' ici pointeront vers notre variable, qui est maintenant affichée dans le navigateur. Il prend également en compte notre variable FirstName et la place dans la chaîne. Si nous avions plusieurs likes, nous voudrions peut-être aussi les numéroter. Nous pouvons commencer par créer une valeur initiale. Nous allons dire que le nombre soit égal à la valeur initiale d'un. Ajoutez ensuite cette valeur numérique à notre variable. Comme on peut s'y attendre, nous n' avons que le numéro 1 unique. Si nous devions dupliquer cela et changer cette valeur pour qu'elle soit une deuxième valeur telle que Donuts, nous pourrions incrémenter ce nombre d'un en utilisant plus plus. Cela sera augmenté pour chacune de nos valeurs. N'oubliez pas que tout cela est construit à l'aide notre fonction constructeur d'objets en haut. Nous pouvons également faire tout cela en utilisant l' approche littérale de l'objet. En bas, créons un littéral d'objet, et nous l'appellerons homer2, et définissons cela comme un objet littéral dans lequel nous définissons nos propriétés telles que FirstName ou nous pouvons également utiliser notre Variable FirstName également. Connectez-vous à la console. Comme vous pouvez le constater, notre variable peut également être insérée en utilisant cette approche. Mais cela peut commencer à paraître un peu déroutant car ici, nous pointons vers toutes les variables FirstName, mais aussi le nom de la propriété pointe toujours vers cette variable FirstName. Alors pourquoi considérons-nous cette sortie comme une chaîne plutôt que la valeur de Homer ? Eh bien, pour la clé, nous n'avons pas besoin de mettre ce nom entre guillemets. Il sera toujours affiché sous forme de chaîne. Alors, comment faire pour rendre cette propriété nommée dynamique si nous ne pouvons pas utiliser une variable comme celle-ci ? Eh bien, une option serait simplement de créer un objet vide sans aucune propriété à l'intérieur. Ensuite, nous pourrions ajouter des propriétés comme nous le faisons ci-dessus en utilisant les crochets ou en utilisant une fonctionnalité ES2015 appelée noms de propriétés calculées. Nous pourrions utiliser les crochets directement à l'intérieur de nos objets. Entourez donc notre propriété FirstName avec les crochets, ce qui indique maintenant que le code à l'intérieur de ces crochets ne doit pas être traité comme une chaîne. Au lieu de cela, il est évalué comme une expression JavaScript, ce qui signifie que si nous l'affichons maintenant dans le navigateur, nous voyons maintenant la valeur de Homer, qui est notre variable. Même ce contrôle total sur la clé des propriétés, ainsi que la valeur des propriétés à l'aide de JavaScript. Nous pourrions également extraire nos propriétés comme nous l'avons fait d'en haut. Nous pourrions y accéder sans le préfixe Homer , coller ça dans. La seule différence est que les égaux, nous devons changer cela par deux-points. Nous pouvons également ajouter notre deuxième à Donuts. Ajoutez une virgule, placez deux points. Essayons cela dans le navigateur. Ouvre ça. Ceci est donc maintenant inséré, mais au lieu des valeurs de un et deux, nous voyons les valeurs de deux et trois puisque nous l'avons déjà incrémenté juste au-dessus, nous pouvons commenter celle-ci. Cela nous ramène à notre exemple original. C'est ainsi que nous pouvons utiliser des noms de propriété calculés avec nos objets pour rendre la clé et la valeur plus dynamique à l'aide de JavaScript. 22. Types de référence et primitifs: Nous utilisons beaucoup de variables dans le codage et JavaScript pour stocker nos données. Mais si nous allons un peu plus loin, il y a quelques concepts importants à comprendre et c'est que les valeurs que nous conservons se divisent en deux groupes. Pour mieux comprendre cela, je souhaite d'abord actualiser ce que nous savons déjà sur les types de données. Nous avons des valeurs primitives, qui sont des valeurs simples, telles qu'une chaîne ou un nombre sans méthode. Nous avons également des types d'objets. Ces deux groupes sont directement liés à ce que nous allons examiner maintenant et il s'agit de stocker des types primitifs et de référence. Une variable de chaîne serait primitive, et un type d'objet, tel qu'une variable de tableau serait classé comme type de référence. Ces deux types ont un impact sur le comportement des valeurs lorsque nous les transmettons et les comparons. Jetons d'abord un coup d'œil à notre projet de départ et jetons un coup d'œil aux primitives. Dans le script du fichier de cette leçon, nous allons créer une nouvelle variable appelée Dog et la définir comme égale à une chaîne. Ensuite, créez une deuxième variable appelée NewDog, et nous la définirons comme égale à notre variable chien d'origine. Celui-ci est en fait une copie de notre première variable. Ensuite, nous allons réaffecter NewDog pour qu'il soit autre chose. N'oubliez pas que la façon de procéder consiste à sélectionner notre nom de variable et à le définir comme égal à n'importe quelle nouvelle valeur. La prochaine chose à faire est de faire un test rapide avec un journal de console, commençant par notre première variable chien, puis un deuxième journal de console pour notre nouveau chien. Voyons voir. Eh bien, ça a gelé à l'intérieur de la console. Nous voyons la valeur de Caniche, que vous attendez de notre premier journal de console, et du deuxième journal de console de NewDog. Même si la variable du caniche a été attribuée à l'origine à cette variable, elle a été mise à jour pour être le texte du Labrador. Rien d'inattendu ici, même si nous avons copié une variable à l'origine, la nouvelle variable reste une valeur distincte, complètement indépendante de l'originale. Fondamentalement, nous pouvons modifier le chien d'origine ou le nouveau chien et ils ne se toucheront pas mutuellement. C'est le comportement des primitifs. La variable pointe vers la valeur enregistrée réelle. Le stockage des types d'objets se comporte différemment. Prenons un exemple en utilisant un objet que nous pouvons copier comme nous l'avons fait ici. Tout d'abord, nous allons créer notre variable appelée ordinateur portable 1 et la définir comme un objet, qui est bien sûr un type d'objet. Les propriétés ou les marques, et les données qu'elles contiennent n'ont pas d'importance. Le modèle définit n'importe quelle valeur sous forme de chaîne, puis juste en dessous, nous en ferons une copie, comme nous l' avons fait avec notre NewDog. Celui-ci s'appellera ordinateur portable 2, ce qui est égal à l'ordinateur portable 1. De la même manière que nous l'avons fait tout en haut avec nos primitives, nous mettrons à jour ou réassignerons notre ordinateur portable 2, puis nous ajouterons une nouvelle propriété, telle que la taille. Cette fois pour les journaux de la console, le premier est l'ordinateur portable 1. Je vais également voir quelle est la valeur de l'ordinateur portable 2 . Testez ça. Actualisez. Nous verrons que ces deux valeurs sont exactement les mêmes. Cela peut sembler vraiment étrange car nous avons la propriété de taille sur l'ordinateur portable 1 et l'ordinateur portable 2 même si nous n'avons ajouté cela qu' à notre deuxième variable. signifie que cela semble être un lien entre ordinateur portable 1 et l'ordinateur portable 2. Lorsque nous avons créé nos variables stockées dans une primitive juste au-dessus avec une chaîne, la variable pointe vers la valeur unique réelle stockée en mémoire, et ce sont toutes des valeurs uniques. Toutefois, lorsque nous créons une variable contenant un type d'objet, l'objet est toujours stocké en mémoire. Mais ces variables, telles que l'ordinateur portable 2, contiennent une référence à l'emplacement de cet objet plutôt qu'à la valeur réelle, où le type de référence du nom. Ici, nous créons notre ordinateur portable original, puis chaque fois que nous créons une copie telle que l'ordinateur portable 2, tout pointe vers le même objet original. Comme toutes les copies pointent vers la même valeur, c'est pourquoi, lorsque vous modifiez l'une d'elles, comme ici, l'original sera également mis à jour. D'autres langues nous permettent de modifier ce comportement. Mais avec JavaScript, c'est corrigé. Juste comme un récapitulatif rapide et peut-être clarifier si vous n'êtes pas sûr. Lorsque nous créons une variable à stocker dans une primitive, telle qu'une chaîne, la variable pointe vers une valeur unique réelle stockée en mémoire, ce qui signifie que notre chien et notre NewDog sont complètement valeurs uniques et indépendantes. Toutefois, lorsque nous créons un nouveau type d'objet basé sur un objet d'origine, la version copiée contiendra une référence à l' emplacement de l'objet d'origine en mémoire, où le type de référence du nom. C'est quelque chose dont vous ne vous souciez probablement pas trop jusqu'à ce que nous rencontrions un problème où vous changez un objet et qu'ils changent tous de façon inattendue, et vous ne savez pas ce qui en est la cause. le problème. Dans cette optique, nous allons ensuite voir comment comparer deux objets. 23. Comparaison d'objets: Ce que nous avons appris dans la vidéo précédente, c'est qu'une valeur primitive est unique et stockée par une valeur et un type d'objet est stocké comme référence. Cela nous aidera maintenant à mieux comprendre le comportement que nous allons voir lors de la comparaison de deux objets, c'est qu'à l'intérieur de nos fichiers de démarrage, nous avons deux objets similaires avec les mêmes propriétés. Ils ont tous deux la marque et le modèle ainsi que les mêmes valeurs. Nous allons les utiliser pour comparer la qualité. D'après une supposition raisonnable, vous penseriez que si nous comparons ces deux éléments, ils seront considérés comme une vraie correspondance. Ce serait une hypothèse juste, car les deux ont la même marque et le même modèle. sautant dans la console, si nous faisons une comparaison avec les primitives, c'est assez simple. Si 1 est égal à 1, cela renvoie la valeur true. C'est simple car les primitives ont leur propre valeur unique stockée en mémoire. comparaison des valeurs fonctionne comme vous pouvez vous y attendre. objets sont cependant un peu moins évidents. Comme vous pouvez vous y attendre, comparer le même objet comme celui-ci se traduit par la vraie. Ordinateur portable 1, si nous comparons cela à lui-même, qui est l'ordinateur portable 1, c'est également vrai. Mais si nous changeons l'ordinateur portable 1 pour qu'il soit égal à l'ordinateur portable 2, même si ceux-ci ont tous les deux la même marque et le même modèle, nous récupérons une valeur de faux. Même si ces deux objets ont exactement le même contenu, ils ne sont pas considérés comme égaux. La raison est qu'il s' agit de types de référence. N'oubliez pas qu'une variable de type de référence pointe vers un emplacement en mémoire, non la valeur réelle. Ici, nous ne comparons pas réellement le contenu de ces deux objets. Au lieu de cela, nous comparons deux emplacements de mémoire différents. C'est pourquoi la comparaison est fausse. Je sais que cela peut sembler un peu déroutant, mais c'est exactement comme ça que JavaScript fonctionne. revenant à ce que nous avons regardé dans la vidéo précédente, que pensez-vous qu' il se passera si nous copions un objet ? Par exemple, si nous définissons la constante avec l' ordinateur portable 3 et que nous définissons cette valeur égale à l'ordinateur portable 1. Eh bien, allons tester ça. Nous pouvons vérifier si l'ordinateur portable numéro 1 est égal à l'ordinateur portable 3. N'oubliez pas que nous faisons ici une copie, ce qui donne une valeur vraie. Maintenant, celui-ci revient vrai parce que lorsque nous avons créé l'ordinateur portable 3, nous n'avons pas copié le contenu de l'ordinateur portable 1. Au lieu de cela, l'ordinateur portable 3 pointera maintenant vers notre ordinateur portable 1 d'origine en mémoire. Quelle que soit la façon dont toutes ces variables sont stockées en coulisses, il se peut que nous ayons besoin d'un moyen de comparer les propriétés de deux objets. Nous avons besoin d'un moyen de comparer l' ordinateur portable 1 avec l'ordinateur portable 2, ce qui va se révéler vrai. Une façon de procéder consiste à utiliser une méthode JSON appelée stringify. Nous examinerons plus en détail les données JSON. Stringify est un moyen de convertir un objet en chaîne et cela ressemble à ceci. En analysant JSON, une méthode appelée stringify, nous allons analyser la valeur de l'ordinateur portable 1. Si nous testons cela à l'intérieur de la console, nous pouvons voir que notre objet est en cours de conversion en chaîne. comparaison d'une version à chaîne de l'ordinateur portable 2 avec une version à chaîne de l'ordinateur portable 2 facilitera notre comparaison . Nous ferons de même. Nous allons vérifier si cela est égal à json.stringify. Cette fois, nous analyserons la valeur de l'ordinateur portable 2. Sautez dans la console. Cela est égal à vrai puisque nos deux valeurs de chaîne sont exactement les mêmes. L'un des problèmes liés à l'utilisation de cette méthode est que les propriétés doivent être exactement dans le même ordre pour que cela fonctionne. Si l'ordinateur portable 1 et la marque est notre deuxième propriété, cela se traduirait par faux. Pour résoudre ce problème, nous avons plusieurs façons de vérifier cela. La première, qui n' est vraiment efficace que pour comparer des objets simples comme celui-ci , est que nous pourrions créer une fonction appelée vérifier l'égalité, qui va vérifier manuellement nos deux objets. Lorsque nous appelons cela, nous analysons l'objet 1 et l'objet 2. Ensuite, nous retournerons la valeur de if objet 1. La marque est égale à l'objet 2. C'est notre première comparaison. Ensuite, nous voulons également vérifier si le modèle est également le même. L'esperluette double, vérifiez si object1.model est égal à object2.model. C'est un long chemin. C'est une façon manuelle de faire les choses, mais cela fonctionnerait. Nous pouvons vérifier cela en appelant notre fonction de vérification de l'égalité. Nos deux objets seront l'ordinateur portable 1 et l'ordinateur portable 2, sont les deux que vous voulez comparer. Pour voir quelle est la valeur renvoyée, nous pouvons l'analyser dans notre journal de la console, l'actualiser. L'objet 1 n'est pas défini, j'aurais juste besoin de m' assurer qu'ils ont un j, rafraîchir, et c'est la valeur de true. Maintenant, peu importe le chemin autour nos propriétés dans chacun des objets. Nous pouvons encore faire une comparaison simple ou manuelle de chacun d'entre eux. Une autre option consiste à utiliser des méthodes objet pour accéder aux clés et aux valeurs. Nous les avons déjà examinés dans la vidéo en boucle avec objet. N'oubliez pas que nous accédons à l'objet, un O. Nous pouvons ensuite remonter les clés telles que le modèle et marque ou l'ordinateur portable 1, comme ceci. Il y a un modèle et une marque. Nous pouvons également faire de même pour object.values. En utilisant cette approche, nous pouvons modifier notre fonction de vérification de l'égalité pour toutes les clés et valeurs et vérifier si nous avons une correspondance. Cela signifie également que l'ordre des propriétés n'est pas important comme c'était le cas avec la première méthode stringify. Comme vous pouvez le constater, les types d'objets peuvent être complexes. Si vous ne comprenez pas comment ils fonctionnent en JavaScript, il faut juste un peu d' expérience pour s'y habituer. Mais je ne m'attends pas à ce que vous vous souviez de tout cela pour la première fois. Mais le simple fait d'être conscient de telles choses vous aidera à l'avenir si vous rencontrez des problèmes liés aux objets. 24. Section Introduction: À venir, nous aurons un excellent projet pour vous permettre de travailler et cela vous donnera beaucoup de pratique avec ce que nous avons appris jusqu'à présent. Il s'agit de notre projet nommé Speedy Chef. L'idée est que nous allons cuisiner des pizzas qui passent par commande et essayer d'en obtenir autant que possible, donc avec le chef et nous pouvons commencer le jeu, ce qui va commencer le service pour le ensuite nous pouvons voir nos commandes arriver sur la droite. Lorsque nous voulons commencer à travailler sur une commande, nous cliquons simplement sur l'une d'elles, puis elle passe à la section « Travailler sur », qui nous indique quelles pizzas nous devons faire. Pour cet exemple, nous avons besoin d'un jambon et ananas et de deux poivrons. Actuellement, nous allons commencer par le jambon et l'ananas. Passez en revue les étapes de la méthode juste ici et la première consiste à rouler la pâte. Cliquez sur ce bouton. Nous devons ensuite ajouter notre sauce, notre poivre, notre fromage, ajouter 12 morceaux de jambon. Enfin, 12 morceaux d' ananas et tout cela est mis à jour dans notre section juste ici. Une fois que nous avons terminé, nous pourrons l'ajouter au four et si vous commettez une erreur, nous pouvons également l'ajouter au gaspillage. Cliquez dessus, puis en coulisses, il vérifie également que nous avons tous les bons ingrédients dont nous avons besoin pour notre pizza. Il y a du jambon et de l'ananas qui entrent dans le four. Nous pouvons passer au pepperoni, puis une fois que nous en aurons fini, nous pourrons compléter notre commande et passer à la suivante. Nous devons également rester au courant des choses, car ces ordres continueront d'arriver au fur et à mesure que le temps progresse. Il s'agit d'un projet relativement important par rapport à ce que nous avons construit jusqu'ici. Mais la plupart d'entre vous le saurez déjà. Il s'agit simplement de construire une petite fonctionnalité à la fois et tout ira parfaitement bien. En cours de route, je vais vous confier une série de tâches pour essayer les choses par vous-même, mais ne vous inquiétez pas, vous n' êtes pas seul. Je parcourrai également chaque étape pour que nous puissions comparer et nous souvenir, comme toujours, qu'il existe plusieurs façons d'aborder les choses. Si nous trouvons tous les deux des solutions différentes qui fonctionnent, c'est très bien. À l'intérieur des fichiers de démarrage, nous avons un démarreur de base avec notre page d'index, qui ajoute toute la mise en page initiale dont nous avons besoin. Nous avons également un peu de style dans nos feuilles de style, ce qui signifie simplement que nous pouvons sauter directement dans notre JavaScript et nous concentrer là-dessus. Même si cela ressemble au projet final, rien ne fonctionne encore et nous allons coder tout cela pendant le cours. En guise de démarrage, j'ai également inclus le fichier pizza.svg ainsi qu'un fichier JavaScript lié dans notre page d'index, qui contient trois tableaux. Ces trois rayons vont nous épargner beaucoup de dactylographies. abord, il y a un tableau de pizzas et à l'intérieur, nous avons divers objets de pizza portant le nom de la pizza, une méthode de fabrication de cette pizza ainsi que les étapes requises que nous utilisons dans le projet pour vérifier si le chef a a fait la bonne pizza et a également placé les ingrédients dans le bon ordre. Ensuite, juste en dessous, quelques exemples de commandes pour lancer le jeu et nous les générerons également dynamiquement. Enfin, une liste d'ingrédients dont nous avons besoin dans la cuisine. Super, donc tout cela est maintenant prêt à partir. Ouvrez ce dossier de projet dans le navigateur, puis passez la leçon suivante où nous allons travailler sur liste de ces commandes dans le navigateur. 25. Liste des commandes: Cette vidéo n'aura qu' un seul objectif principal il s'agit de parcourir toutes les commandes et de les afficher dans le navigateur. N'oubliez pas que juste au-dessus, fourni avec ce dossier, est le tableau le plus ancien que nous allons parcourir et afficher dans le navigateur. L'emplacement pour cela se sur le côté droit, dans la section latérale. Dans la page d'index, nous avons deux sections principales. Nous avons cet emballage principal et il contient tout le contenu, qui a le fond blanc. Ensuite, le côté avec l'idée des ordres. Pour l'instant, il n'y a qu' un titre de niveau 3. Mais ce que nous allons faire, c'est de parcourir toutes ces commandes et de les placer dans cette section. Pour ce faire, nous allons créer une fonction appelée CreateOrdersList. Cette fonction va parcourir le tableau des ordres ci-dessus. Pour chacun de ces éléments du tableau, nous allons construire une div, qui ressemble à cette section ici. Certaines parties de cette situation vont être dynamiques. Par exemple, nous aurons le numéro de commande. Cela va être dynamique avec le nom de la pizza et aussi la quantité de chaque ligne. Vous n'avez pas à vous soucier de ces commentaires. Ce ne sont qu' un guide visuel pour nous donner une idée de ce que nous allons faire. Nous commencerons en bas par la création de notre fonction. La fonction s'appelle CreateOrdersList , le mot-clé de fonction. La prochaine chose est de passer en boucle sur chacune de ces commandes. Nous savons comment faire cela. Nous pouvons utiliser une boucle telle que FoReach. Prenez notre tableau de commandes pour Each. N'oubliez pas que FoReach va exécuter une fonction pour chaque élément de notre tableau. Les lieux fonctionnent juste à l'intérieur. Nous allons donner à chacun de ces articles la valeur de la commande. Maintenant, nous devons construire nos éléments comme nous l'avons fait ci-dessus pour chacune de ces commandes. Nous allons commencer par créer ce wrapper principal, qui est la div. Nous ajouterons une classe appelée « wrapper » de commande. Nous allons travailler sur notre contenu à l'intérieur. Nous savons comment créer des éléments. Nous utilisons Document.CreateElements. Comme dans le nom de la balise des éléments, qui est une div à l'intérieur d' une variable ou d'une constante appelée orderwrapper. Ajoutez ensuite le nom de notre classe en sélectionnant le nom de variable OrderWrapper. La propriété appelée ClassName. Comme nous le voyons plus haut, ce sera Order_Wrapper. Nous allons donc simplement ajouter un commentaire. C'est l'emballage principal. Ensuite, nous ajouterons un commentaire. Il va s'agir d' ajouter le numéro de commande. Il s'agit de notre première section à l'intérieur de notre emballage de commande. Il s'agira d'un niveau 4 de notre rubrique. Stockez-le à l'intérieur d'une constante. Je me souviens que lors de la création d' éléments comme ceux-ci, nous devons créer l'élément réel puis le contenu à l'intérieur. Nous avons donc besoin de deux variables. Le premier est OrderNumber L, qui est des éléments d'étagère. Donc Document.CreateElements. Nous avons besoin d'un niveau pour nous diriger. Ensuite, le texte qui va entrer à l'intérieur, et c'est le numéro de commande. Le nom constant du numéro de commande et nous créons avec Document.CreateTextNode. Puisque cela va être dynamique car chaque commande a un numéro différent, que nous allons récupérer à partir de cet identifiant unique. Nous allons placer cela à l'intérieur des backticks pour que cela devienne dynamique. abord, le texte de l'ordre, qui est cette partie juste ici, suivi d'une valeur dynamique. La valeur dynamique peut être insérée à l'aide du symbole dollar et des accolades. abord, nous sélectionnons notre commande individuelle, qui est stockée dans cette variable, puis la propriété d'ID. Comme toujours, lors de la création d'un élément, nous disposons de deux informations autonomes et nous devons les fusionner ensemble. Pour ce faire, accédez au parent, qui est OrderNumberElement.AppendChild, où nous transmettrons notre contenu réel, c' est-à-dire le numéro de commande. Cela nous laisse maintenant notre div, qui est l'emballage. Ensuite, notre premier élément, qui est notre titre de niveau 4, mais nous devons encore ajouter ce titre à notre emballage. Prenez l'Order_Wrapper , puis nous utiliserons à nouveau APendChild, qui prendra en compte notre élément de numéro de commande. Nous avons donc la première section ici, puis la prochaine partie consiste à créer notre propre liste de commandes. Un commentaire rapide, pour que nous sachions ce que nous faisons ici d' une excellente pizza UL pour chaque commande, et de l'emballage donc document.CreateElements. Les éléments étaient une liste non ordonnée. Se place dans une constante appelée liste de pizzas. Cela nous donne maintenant une liste non ordonnée, qui est l' emballage principal de toutes les pizzas. Mais n'oubliez pas que nous pouvons avoir plusieurs articles de liste car chaque commande peut contenir plus d'une pizza. Comme nos commandes contiennent plusieurs pizzas à l'intérieur d'un tableau, nous devons à nouveau faire une boucle comme pour chacune d'elles. Pour ce faire, nous passons à nouveau dans notre ordre individuel. Nous allons sélectionner le tableau , appelé pizzas. Utilisez la boucle for each pour exécuter une fonction pour chaque élément ou chaque pizza à l'intérieur du tableau, stockez-la à l'intérieur d'une variable appelée Pizza. Ensuite, nous pourrons travailler à la construction de chacun de ces éléments. Chacun de ces éléments sera un élément de liste. Mais tout d'abord, nous devons créer ce contenu à l'intérieur. Nous avons la quantité telle qu'une, puis un tiret, puis un élément span suivi du nom de chacune de ces pizzas. Plongez dans notre fonction et pour chacun de ces éléments, nous créerons un élément span pour envelopper notre titre et le stocker dans une constante. Celui-ci est la quantité de commande L, donc Document.CreateElements. Les éléments seront la plage , puis ensuite la quantité de chacun de ces éléments, Document.CreateTextNode. Cette section doit être dynamique ou placée dans les backticks. Insérez une variable. Nous pouvons accéder à la quantité en sélectionnant d' abord notre pizza. Dans chacune de ces pizzas, si nous examinons le tableau, possède une propriété appelée quantity. Nous utiliserons également prochainement le nom de la propriété. Pour celui-ci, il s'agit de pizza.quantity, suivi d'un tiret juste après. En pensant à cela, il peut être un peu plus facile si nous ajoutons simplement cette quantité dans notre période. Plutôt que d'en avoir un à l'extérieur, nous allons peut-être placer cela à l'intérieur d'un élément, plutôt que de l'avoir à l'extérieur seul. ce faire, accédez aux éléments de quantité de commande . AppendChild qui se trouve dans la variable quantité, suivi de notre PizzaName. Pour notre PizzaName, cela doit également être enveloppé dans un élément span , puis le contenu à l'intérieur. Nous devons faire exactement la même chose que juste au-dessus, nous allons créer une constante appelée PizzaNamel document.createelement. Element est une période suivie du PizzaName, que nous devons créer avec le nœud de création de texte, prendre notre pizza individuelle. Ensuite, comme nous l'avons vu précédemment, nous avons la quantité suivie de la propriété name. Nous pouvons y accéder avec pizza.name. Fusionnez ces deux-là ensemble. Pizzanamel.AppendChild n'était pas dans le contenu texte, qui est PizzaName. Super, donc nous avons deux travées distinctes ici. Nous avons notre première période, qui consiste à envelopper notre numéro individuel ou la quantité de pizzas. Ensuite, une deuxième période qui contient notre PizzaName. Ces deux éléments doivent être fusionnés dans un élément de liste. Ensuite, l'élément de liste doit être ajouté à notre parent. Mettons-nous donc au travail. Comme nouveau commentaire juste pour que cela soit clair. Il s'agit de créer un élément de liste. Afficher la quantité et le nom de PizzaName. Premiers éléments stockés dans une constante appelée PizzaItem, Document.CreateElement. Il s'agissait d'un élément de liste. Nous avons l'élément de liste environnant, puis nous devons fusionner nos deux éléments par le haut. La quantité qui est cette variable, ainsi que le PizzaName. Prenons notre pizza Item. Puisque nous ajoutons plusieurs éléments enfants, nous pouvons simplement utiliser append et c'est maintenant notre premier élément, qui était l'élément de quantité de commande. Ensuite, le PizzaName Element. Nous avons presque fini maintenant, notre élément de liste sera créé sans deux éléments de contenu à l'intérieur et nous devons maintenant les ajouter à notre liste non ordonnée. Votre liste de commande est stockée dans la constante appelée PizzAlist. Ajoutez ceci juste en dessous de sa liste. AppendChild n'était pas dans notre pizza. Nous y sommes presque. Nous avons maintenant ajouté nos éléments de liste à notre liste non ordonnée. Mais maintenant, la liste non ordonnée doit également être ajoutée à notre emballage. L'emballage n'est que cette variable d'emballage de commande ici. Mais nous devons ajouter cela en dehors de notre boucle. Assurez-vous de localiser la fin de notre boucle. Ce que j'ai fait juste en dessous de cette ligne ici. Sélectionnez OrderWrapper.AppendChild, en passant dans notre liste de pizzas. C'est maintenant notre commande complète qui est rapidement resserrée. La prochaine étape, ou la dernière étape, consiste maintenant à ajouter ceci à notre page Web. Nous avons besoin des sections de ces deux-là. Cette section est le côté. Nous pouvons saisir cela avec l'idée des commandes. Juste en dessous de notre emballage de commande, utilisez Document.QuerySelector pour récupérer nos commandes.AppendChild n'était pas dans notre emballage de commande. Essayons cela, maintenant nous devons appeler cette fonction pour qu'elle fonctionne. Prenons la liste de trois commandes, appelez-nous en bas, rafraîchissons le navigateur. La bonne nouvelle, c'est que nous pouvons réellement voir les commandes à l'écran, mais cela ne ressemble pas à ce que nous attendons. Jetons un coup d'œil à l'intérieur de notre code et voyons ce que nous devons changer. Il nous manque actuellement la quantité avant le PizzaName, qui est cet élément de liste juste ici. Nous ajoutons le numéro de commande. Je pense que c'est juste la quantité commandée. Cela semble beaucoup mieux maintenant que nous avons le numéro de commande tout en haut, chacune d'entre elles est en ordre, suivie du nom et de la quantité de chacune des pizzas de la commande. Comme vous pouvez le constater, il s'agit d'une fonction assez longue, et idéalement, nous voulons la refactionner en pièces plus petites et plus ciblées, et c'est ce que nous ferons ensuite. 26. Liste des commandes Refactor: Au fur et à mesure que nous écrivons notre code et surtout à mesure que notre projet se développe Nous voulons refactionner régulièrement notre code dans la mesure du possible. Pour le moment, notre code fonctionne parfaitement. C'est ce sur quoi nous voulons nous concentrer au début, mais il est également important de regarder régulièrement les choses et de voir si nous pouvons améliorer les choses. Cette vidéo va nous impliquer refactoriser cette fonction unique dont vous disposez. Décomposez-le en plus petits lorsque c'est possible. Il est judicieux de disposer de fonctions plus petites qui se concentrent sur des tâches individuelles, ce facilite la lisibilité et le débogage. La façon dont vous abordez, c' est que c'est à vous de décider et souvent de vos préférences personnelles. Mais plus on se rapprochera d'une fonction pour le faire en une seule tâche, mieux c'est. La première étape que nous allons faire consiste à supprimer tout le processus de création de commandes de cette fonction et à le placer dans une fonction autonome. Nous retirerons tout le contenu utilisé pour créer notre commande, laissant notre fonction « CreateOrdersList » avec une tâche simple. Cette tâche consiste à parcourir tous les tableaux de commandes, puis à les ajouter à la section de côté. Pour ce faire, créez une nouvelle fonction juste au-dessus. Celui-ci va être appelé à « CreateSingleOrder ». Puisque cette fonction va être répétée pour chaque ordre à l'intérieur du tableau, nous allons également prendre l'ordre en tant que variable descendant et sauterons dans notre fonction. En commençant par « OrderWrapper » à l'intérieur de la boucle, déposez tout le contenu d' ici, jusqu' à l'endroit où nous ajoutons cela à notre « OrderWrapper ». Découpez ça et nous devrions juste rester avec notre boucle. Ensuite, la section où nous ajoutons ceci à côté. Maintenant, c'est découpé. Plongez dans notre « CreateSingleOrder » et collez-le dans. Maintenant, si nous sautons dans notre boucle où nous venons de couper ce code. Nous pouvons maintenant appeler cette «  fonction autonome » appelée « CreateSingleOrder ». « CreateSingleOrder » doit également prendre en compte l'ordre puisque nous le passons ici, qui est ensuite utilisé dans le reste de notre fonction. Maintenant, si vous pensez à cela, c'est simplement appeler aucune fonction. Il ne fait rien avec ça. Tout ce que nous devons faire est de renvoyer l'ordre à partir de cette fonction ci-dessus, stocker à l'intérieur d' une variable, puis de l' ajouter au DOM. Nous allons d'abord récupérer notre OrderWrapper, qui est la section de commande complète, et nous le retournerons de notre fonction. Cette valeur de retour peut ensuite être stockée à l'intérieur d'une variable appelée « SingleOrder ». La commande unique peut désormais être ajoutée à notre barre latérale. Essayons ceci, « Enregistrer » et « Rafraîchir », et tout fonctionne toujours comme avant mais cette fonction est encore assez longue. Nous pouvons également réduire la taille de ces deux personnes. Encore une fois, la façon dont vous répartissez cela dépend de vos préférences personnelles. Mais ce que je vais faire, c'est d'externaliser la création « PizzAlist » à une nouvelle fonction et cela pourrait également être utilisé à l'avenir. La section PizzAlist est cette boucle. Nous devons également saisir la liste de commandes unique, laquelle nous stockons cela à l'intérieur, donc copiez ceci et également la boucle. Ensuite, créez notre fonction et juste au-dessus de « CreateListOfPizzas ». Je voulais juste prendre les pizzas. Ensuite, « Coller » dans notre nouvelle section. Assurez-vous simplement que la section correcte est collée à l'intérieur, c' est-à-dire notre liste non ordonnée, suivie de nos quatre boucles de chaque boucle. Dans un moment où nous aurons l'occasion d'appeler cette fonction. N'oubliez pas que cela va prendre toutes nos pizzas, donc nous n'avons pas besoin de cette section de commande. Nous pouvons appeler directement nos pizzas et c'est variable. Maintenant, nous pouvons appeler cette fonction à partir de l'endroit où nous venons de couper ce code.Le nom de la fonction était « CreateListOfPizzas ». Cela doit être passé toutes les pizzas pour cette commande, que nous pouvons d'abord récupérer de notre commande et chaque commande a la propriété de pizzas. Comme nous l'avons fait ci-dessous, nous devons stocker cela à l'intérieur d' une variable et retourner quelque chose pour notre fonction. La chose dont nous devons revenir à la toute fin, c'est notre « Pizzalist ». La valeur renvoyée peut ensuite être stockée à l'intérieur d'une constante. Si nous appelons cela constant « PizzAlist ». Il s'associe également parfaitement à notre nom de variable que nous avons utilisé auparavant, qui est ensuite ajouté à notre « OrderWrapper ». Donnez-lui un « Sauvegarde » et essayez-le, « Rafraîchir » et toutes les commandes fonctionnent toujours comme prévu. Les fonctions de refactorisation comme celle-ci ne sont peut-être pas toujours faites pour vous et vous pouvez décider jusqu'où vous voulez aller. Rien ne change en ce qui concerne la façon dont le projet fonctionne. Nous ne voyons toujours que les commandes à l'écran, mais nous avons maintenant trois fonctions claires avec une tâche spécifique. Nous avons tout en haut, « CreateListOfPizzas », qui revient de cette fonction. Cette liste de pizzas est ensuite ajoutée au DOM lorsque nous créons notre commande unique et une « commande unique » est ensuite bouclée dans notre dernière fonction , puis ajoutée au DOM. 27. Fonction d'aide d'élément: Un autre refacteur que nous pouvons faire pour nous sauver beaucoup de code est de regarder ce que nous répétons actuellement dans nos fonctions et de voir s'il existe un moyen de l'externaliser dans une fonction réutilisable. Si nous examinons notre code à ce stade précoce, et que nous passerons à la fonction CreateListOfPizzas. Nous avons déjà certaines choses que nous répétons actuellement. Nous répétons la création de ces éléments en trois étapes. Fait partie de la quantité. Nous créons un élément de span. Nous créons le TextNode, puis nous fusionnons ces deux-là ensemble. Nous faisons de même pour notre PizzaName. Nous sommes en train de créer un élément. Nous créons un TextNode pour le contenu, les fusionnons ensemble, nous allons un peu plus loin pour créer SingleOrder. Nous faisons également une chose similaire ici, nous créons notre élément de texte, qui se trouve dans un wrapper de niveau 4. Nous créons le contenu, puis nous les ajoutons ensemble, et tout va bien. C'est quelque chose que nous devons faire pour créer nos éléments. Pour chaque fois que nous créons un nouvel élément dans l' une de ces fonctions, il s'agit d'un processus en trois parties qui prend trois lignes de code. Ce serait bien de créer une fonction d'assistance pour réduire la quantité de code, et ce sera la tâche de cette vidéo. Nous allons créer une fonction d'assistance qui va prendre le nom de l'élément. Il s'agit de la section Créer des éléments. Vous allez prendre en compte le contenu, qui est le TextNode, les fusionnera ensemble, ce qui est généralement notre troisième ligne, puis nous retournerons ce nouvel élément à l'appel de notre fonction. Mettons-nous au travail. Créez une nouvelle fonction qui va vous aider avec cette fonction appelée BuildElement. BuildElement doit également prendre en compte deux choses. Il doit prendre le nom des éléments tels que le h4 et aussi le contenu qui s'y trouve. transmettrons cela lorsque nous appelons cette fonction, et la première sera ElementName et la seconde est ElementContent. L'intérieur de la fonction va être assez familier d'après ce que nous avons déjà fait, et en fait, nous pouvons copier n'importe lequel de ces exemples. Résolution de création d'un seul ordre. Disposez des trois lignes de code où nous créons l'élément, nous créons le contenu et nous les fusionnons ensemble. Si vous le souhaitez, nous pouvons copier les trois lignes, les coller à l'intérieur. Ensuite, nous devons rendre cela un peu plus générique. En commençant par la première constante. C'est pour l'élément. Le second concerne le contenu, puis à l'intérieur de ces deux crochets, nous pouvons transmettre les données qui sont transmises à toutes les fonctions. Le premier concerne ElementName et le second, nous pouvons supprimer ce que nous avons actuellement , placé dans ElementContent. Modifiez les noms des variables. Celui-ci sera Element.AppendChild, transmettant le contenu à cet élément. La dernière chose que nous devons faire, nous sommes en train de créer un élément. Nous devons également le renvoyer de notre fonction, il est accessible dans notre code. Retourne les éléments complets une fois qu'ils ont été fusionnés, et cette fonction peut maintenant remplacer l'une de ces trois lignes de code qui crée un élément. Si nous saisissons le nom de notre fonction ainsi que les crochets avec le contenu, nous pouvons maintenant remplacer n'importe laquelle de ces sections juste au-dessus. Nous commencerons par CreateSingleOrder, pour tous les éléments du numéro de commande, le numéro de commande, puis la troisième ligne qui fusionne les deux ensemble. Je vais remplacer cela par notre fonction ElementName. Il s'agit d'un h4. Pour le contenu, nous pouvons le remplacer par exactement le même contenu que celui que nous avons utilisé juste au-dessus. Prends ça et colle ça à l'intérieur. Gardez notre nom cohérent puisque nous utilisons actuellement une constante appelée OrderNumberel, et nous y accédons juste ci-dessous, devons également stocker cela à l'intérieur d'une constante portant le même nom. ce qui se passe ici, c'est que nous construisons nos éléments à l'intérieur de notre nouvelle fonction. Nous le renvoyons ensuite de la fonction, qui est ensuite stockée à l'intérieur de cette constante, que nous pouvons ensuite utiliser dans le reste de notre code, juste en dessous. Si vous le souhaitez, nous pouvons supprimer les lignes de code existantes gratuites, puis passer à notre première fonction, CreateListOfPizzas. Nous avons les trois lignes juste ici. Je vais commenter cela afin que nous puissions l'utiliser comme référence. Nous devons passer notre fonction BuildElement, en transmettant nos deux valeurs. La première valeur est notre portée. Le second copiera notre littéral de gabarit . Maintenant, c'est dans. Aussi pour cela en bas, nous avons utilisé dans le nom constant d'origine de l'élément OrderQuantity. Nous pouvons le copier et le stocker dans la valeur de retour. Supprimez ces trois lignes si vous le souhaitez. Ensuite, le nom de la pizza. Ces trois lignes sortent. Nous allons créer notre constante, qui est le même nom que PizzaNameel. La fonction Order est également prise dans un élément span, et le contenu est pizza.name. Enlevez-les. Les deux sont les mêmes, il faut juste que nous changions. Celui-ci devrait être le PizzaNameel. Nous allons amener celui-ci. Bien. Maintenant, sauvegardons cela et revenons sur le navigateur et nous pouvons tester. Tout fonctionne toujours bien. sautant dans la console, nous ne voyons aucune erreur à l'intérieur d'ici. Notre barre latérale affiche les commandes générées sur la droite. Nous avons les numéros de commande, les noms des pizzas et aussi les quantités. Tout cela semble maintenant fonctionner correctement, et j'espère que vous pourrez voir les avantages de faire des choses comme celle-ci. Même si notre fonction a pris quelques lignes de code, chaque nouvel élément que nous créons réduira trois lignes de code en une seule. Nous pouvons également l'utiliser de nombreuses autres fois dans le futur pendant notre projet pour enregistrer encore plus de code. Il ne s'agit pas seulement de lisibilité et d'organisation. Une seule ligne comme celle-ci signifie moins de risques d'erreurs de frappe, ainsi qu'une augmentation de la vitesse à mesure que notre programme augmente. 28. Sélection De L'ordre En Cours: Nous avons quelques ordres sur la droite, et bientôt nous en créerons de nouveaux au hasard. Juste avant de passer à ce sujet, je veux vous montrer comment les choses vont fonctionner afin que vous puissiez imaginer ce que nous allons faire. Une fois le jeu commencé, nos commandes commenceront à apparaître sur la droite. Le chef qui est le joueur cliquera ensuite sur un ordre pour commencer à travailler, qui déplacera ensuite cet ordre dans la section Travail sur. C'est sur cette section que nous allons nous concentrer maintenant. Plus tard, nous irons encore plus loin en cliquant sur une pizza particulière dans la section « Travailler sur ». Ensuite, cela affichera la méthode et la définira également comme la pizza actuellement à l'intérieur de la cuisine. Maintenant, nous pouvons simplement nous concentrer sur le fait de cliquer sur une commande et de la déplacer dans la section Travail sur. Comme vous l'avez peut-être deviné, pour ce faire, nous allons créer une nouvelle fonction juste au-dessus de notre liste de création de commandes. Il s'agit d'une nouvelle fonction appelée SelectCurrentOrder. Pour appeler cette fonction, nous devons écouter un clic sur l'une de ces commandes. Pour ce faire, nous devons passer à notre fonction CreateSingleOrder. Si nous examinons cette section, nous devons ajouter un écouteur d' événements à chacune de ces commandes. Nous pouvons cliquer dessus, puis déplacer cet ordre dans la bonne section. Juste en dessous de l'endroit où nous ajoutons cette classe. Prenez l'emballage de commande, qui est la div entourant chacune de ces commandes. Ajoutez un écouteur d'événements. Cela va maintenant écouter un clic qui déclenchera notre nouvelle fonction appelée SelectCurrentOrder, nous donne le test en effectuant un journal de console à l'intérieur de notre nouvelle fonction. Transmettez les informations de l'événement afin que nous puissions obtenir les éléments corrects sur lesquels on clique. Ensuite, nous enregistrons cela avec e.target. Jetons un coup d'œil à cela dans la console. Ce que nous devons maintenant faire, c'est cliquer sur l'une de nos commandes. Vous voyez la Margherita. Nous voyons le jambon et l'ananas. Ce n'est pas exactement ce que nous voulons. Nous pouvons cliquer sur n'importe quel numéro de commande, n'importe lequel dans le contenu. Mais ce que nous voulons faire, c'est de rendre l'ensemble de la section de commande active pour qu'il ne s'agisse que d'une seule zone cliquable. Mieux comprendre cela, passons dans l' onglet Eléments et jetons un coup d'œil. Maintenant, nous allons passer dans la section de côté qui contient nos commandes et cliquer sur l'une de ces divs avec la classe d'emballage de commande. Ce que nous voulons, c'est pouvoir uniquement cliquer sur cette div avec la classe d'enveloppe de commande et ignorer tous les clics qui se trouvent sur les éléments imbriqués. Pour ce faire, vous pouvez maintenant écouter un clic sur l'un de ces éléments imbriqués, tels que les éléments de la liste ou l'en-tête de niveau quatre. Montez ensuite l'arborescence des éléments jusqu'à ce qu'il trouve la première div avec la classe d'emballage de commande. Pour ce faire, nous pouvons écouter exactement quel élément a été cliqué, comme la liste non ordonnée. Ensuite, nous pouvons continuer à remonter la chaîne pour vérifier si l'élément parent est cet emballage de commande. Il existe plusieurs façons de le faire. Nous pourrions stocker une référence à l'élément enfant sur lequel on a cliqué, comme notre liste non ordonnée. Ensuite, nous pouvons continuer à vérifier à l'intérieur de cette boucle si l'élément parent est cet emballage de commande. Ou un moyen simple consiste à utiliser une méthode d'élément appelée la plus proche. La méthode la plus proche prendra un élément tel que celui sur lequel nous cliquons. Ensuite, il va continuer à grimper vers la racine du document à travers tous les nœuds parents jusqu'à ce qu'il atteigne une correspondance de sélecteur. Le sélecteur peut être une classe, un ID, un nom d'élément. Tout comme nous pouvons le faire avec le sélecteur de requêtes. Jetons un coup d' œil à la façon de faire cela dans notre fonction. abord, nous allons commencer une référence à nos éléments sur lesquels on clique, c'est-à-dire e.target. Ensuite, nous trouverons les éléments parents les plus proches avec cette classe d'enveloppe de commande. Nous pouvons le faire en accédant à l'élément sur lequel on clique, appelez la méthode appelée la plus proche. Eh bien, nous passons à la requête que nous recherchons. Dans notre cas, nous voulons rechercher l'order_wrapper. Comme il s'agit d'une classe, nous ajoutons le point en tant que préfixe. C'est à l'intérieur d'une constante appelée OrderWrapper. Ensuite, nous pouvons vérifier cela en connectant cela à la console. Maintenant, si nous nous actualisons et que nous pouvons essayer de cliquer sur l'une de ces commandes. Assurez-vous que l' onglet Console est sélectionné. Si nous essayons de cliquer sur quoi que ce soit à l'extérieur, nous ne voyons rien dans la console qui est attendu par le titre de pizza. Cela revient vers l'emballage de commande des parents. Nous pouvons ouvrir cela et vérifier qu'il s'agit de la commande 1. Essayons une autre chose. Il s'agit de l'ordre 3 et de l'ordre 2. Bien maintenant, quelle que soit partie de la commande sur laquelle nous cliquons, elle monte toujours jusqu'à l'emballage de commande des parents, pour saisir le contenu complet de cette commande. En utilisant cette méthode, si aucune correspondance n'est trouvée, nous récupérerons une valeur nulle. Nous pouvons également vérifier cela avant d'ajouter notre commande dans la section Travailler sur. Juste en dessous de l'endroit où nous sélectionnons notre emballage de commande, ajoutez une déclaration if où nous passons dans notre emballage de commande, nous pouvons vérifier si ce n' est pas égal à null. Si nous avons réussi à cliquer sur un emballage de commande, nous devons maintenant récupérer cet emballage de commande et déplacer dans notre section Travail sur. étape 1 consiste à saisir une section de travail et à stocker à l'intérieur d'une constante appelée OrderDiv. Cela équivaut à document. QuerySelector, et le sélecteur de requêtes dont nous avons besoin comme idée de travailler. Ensuite, en utilisant l'ajout d'un enfant, nous pouvons ajouter notre emballage de commande. L'OrderDiv. AppendChild passe dans notre enveloppe de commande sur laquelle on a cliqué. C'est génial, essayons ça . Nous pouvons fermer la console et essayer n'importe laquelle de ces commandes. Essayons le numéro 3 et cela apparaît maintenant dans les sections puisque nous l'avons ajouté en tant qu'éléments enfants Ordre 2, Ordre 1, et tout cela fonctionne très bien. Cependant, nous voulons uniquement pouvoir travailler sur une seule commande à la fois. Nous avons besoin d'un moyen de vérifier s'il n'y a qu'une seule commande sélectionnée et passée dans cette div. Une façon de procéder consiste à accéder d' abord à la section Working on et nous pouvons vérifier quels éléments enfants sont imbriqués à l'intérieur. Voyez qu'il est préférable de saisir une référence à notre div place à l'intérieur d'un journal de console. Ensuite, nous pourrons enchaîner sur le bout. Les enfants. Sautez dans la console. Cliquez sur l'une de nos commandes pour l'ajouter à la section. Si nous regardons de près, la première chose que nous avons est une collection HTML avec un en-tête de niveau 3. Après cela, nous avons notre div avec la classe d'emballage de commande, que nous venons d'ajouter. Nous pouvons également le confirmer si nous accédons à notre page d'index qui fonctionne sur la section ne comporte qu' un seul titre de niveau 3. Dans cette optique, le nombre d' éléments enfants peut désormais être utilisé pour arrêter la fonction. Si le nombre d' éléments enfants est supérieur à un est-à-dire que nous avons notre en-tête de niveau 3 suivi de l'une de nos commandes, nous pouvons le refaire dans notre fonction de commande actuelle sélectionnée. Supprimez le journal de la console, remplacez-le par une instruction if. Nous pouvons vérifier si les enfants. la longueur est supérieure à un. Si c'est le cas, nous retournerons simplement modifier cette fonction. Nous pouvons également retirer les accolades courbes et les remplacer par notre déclaration de retour. Essayons ça. Enregistrez et rafraîchissez. Je clique sur le premier ordre, cela fonctionne bien. Maintenant, nous ne pouvons pas ajouter d'autres commandes. La dernière chose à faire, c'est que nous voulons passer de l'ordre dans la section Working on est également de supprimer l'écouteur d'événements. Nous n'avons plus besoin que cette section soit cliquable, nous pouvons donc la supprimer de notre emballage de commande. Nous pouvons le faire juste avant ajouter à notre section div. En accédant aux éléments stockés dans enveloppe de commande appelée RemoveEventListener. L'écouteur que nous voulons supprimer est celui événements de clic suivis de SelectCurrentOrder qui correspond à notre écouteur d'événements. possible, les écouteurs d'événements comme celui-ci doivent être supprimés lorsqu'ils ne sont plus nécessaires. Cela contribue à maintenir les performances , car le navigateur n' a plus besoin d'effectuer une tâche inutile, mais également d'éliminer les comportements inattendus. Ensuite, nous aborderons la sélection de la pizza laquelle nous allons travailler à sur laquelle nous allons travailler à l'intérieur de la cuisine. 29. Définissez La Pizza Actuelle: Regardez le flux de notre projet, nous avons déjà fait la première étape qui consistait à déplacer l' ordre sélectionné sur lequel nous cliquons vers la section Commande dans la section Travailler. Ensuite, nous devons pouvoir sélectionner la pizza sur laquelle travailler en cliquant dessus. Cette pizza sélectionnée doit ensuite apparaître dans la cuisine et afficher la méthode, toutes les étapes pour la créer. Si vous jetez un coup d'œil ici, j'ai créé quelques étapes que nous allons utiliser pour atteindre cet objectif en haut qui est de rendre les noms de pizzas cliquables puis de les déplacer dans la cuisine. Si vous le souhaitez, vous pouvez suivre ces cinq étapes et essayer de recréer cela vous-même ou si vous le préférez, vous pouvez suivre avec moi. Tout d'abord pour pouvoir cliquer sur ces pizzas, étape 1 comprend l' ajout d'une classe de nom de pizza à chacun de ces articles. Passons à la fonction de CreateListOfPizza , nous allons localiser cela. Et c'est là que nous créons chacune de nos pizzas à l'intérieur des éléments de span. Juste avant de procéder à des ajouts, nous ajouterons notre classe en sélectionnant la variable d'élément de nom de pizza. Sélectionnez la ClassList, la méthode appelée add, où, sous forme de chaîne, nous transmettrons le nom de pizza_name. C'est l'étape 1, prise en charge . Allons faire défiler vers le bas. étape 2 consiste à localiser la fonction SelectCurrentOrder. Puisque nous avons peut-être plusieurs pizzas, nous devons sélectionner tous les éléments de span. Et n'oubliez pas que si nous avons plusieurs éléments, nous devons utiliser un QuerySelectorAll. Nous pouvons saisir tous ces éléments en utilisant cette classe de noms de pizza que nous venons d'ajouter. Localisons donc cette fonction SelectCurrentOrder, puis en haut, nous utiliserons QuerySelectorAll pour saisir tous ces éléments de pizza, stocker dans une variable appelée pizzas Document.QuerySelectorAll. Nous pouvons les saisir avec le nouveau nom de classe que nous venons de créer, qui était pizza_name. N'oubliez pas que l'objectif est de pouvoir cliquer sur l'un de nos noms de pizza, comme notre jambon et notre ananas ou tous les pepperoni. Nous pouvons donc maintenant cliquer gratuitement sur n'importe lequel de ces noms. Alors, prenez notre variable, qui est des pizzas. Nous pouvons utiliser FoReach pour exécuter une fonction pour chacun de ces éléments. Chacune des pizzas individuelles stockera sur une variable de pizza, puis nous pourrons ajouter un EventListener à chacune de ces pizzas, donc Pizzas.AddEventListener. L'événement sera un clic, qui exécutera ensuite une fonction que nous n'avons pas encore créée appelée SetCurrentPizza. D'accord ? Créons donc cette fonction en bas, la fonction SetCurrentPizza. Puisque nous déclenchons cela à l'aide d'un événement de clic, nous pouvons également transmettre les informations de l' événement à notre variable et vérifier que cela fonctionne avec un journal de console. Ainsi, pour saisir les éléments sur lesquels vous avez cliqué, comme le jambon et l' ananas ou le pepperoni. Pour saisir le texte, nous pouvons le faire avec e.target dans une propriété appelée InnerText, vérifier si tout fonctionne correctement. Essayons cela, sautons dans la console et rafraîchissons. La première chose à faire est donc de cliquer sur l'une de nos commandes, ouops il y a une erreur sur EventListener. Jetons un coup d'œil à ce qui pourrait causer cela. Nous avons une variable inutilisée, donc cela a juste besoin d'un s, car cela contient plusieurs pizzas. Essayons ça maintenant. Nous pouvons cliquer sur notre commande. Cela fonctionne très bien. Maintenant, si nous cliquons sur le texte du jambon et de l'ananas, nous le voyons dans la console, Pepperoni. Bien, c'est exactement ce que nous voulons. Maintenant, si nous revenons à notre SetCurrentPizza, évidemment, l'objectif n'est pas de l'enregistrer sur la console, ce que nous voulons faire est d' enregistrer le nom de la pizza dans une variable, puis de l'ajouter simplement après notre texte de Current making. Si nous sautons dans la page d'index et que nous localisons cette section, nous pouvons voir juste après que nous avons une plage avec l'ID de current_pizza. Nous allons donc stocker ce texte dans une variable, puis le placer dans cette période. Faisons cela à l'intérieur de notre fonction avec un journal de console et stockons cela à l'intérieur d'une constante appelée PizzaName. Saisissez notre zone d'étendue avec Document.QuerySelector. Utilisez #, car il s'agissait de l'ID de current_pizza. Définissez l'InnerText pour cet élément égal à notre variable ci-dessus. Essayons ça. Nous n'avons plus besoin de la console. Déplacez l'une de ces commandes vers la section Travailler sur. Cliquez sur « Pepperoni » et voici notre texte « Jambon et ananas » ainsi que la « Margherita ». Ensuite, nous allons utiliser cet élément sélectionné pour afficher les étapes requises à l'intérieur de la section Méthode. 30. Méthodes de partage et de participation: Auparavant, nous avons défini le nom actuel de la pizza à l'intérieur de la cuisine lorsque vous avez cliqué dessus. Nous allons maintenant afficher la méthode de fabrication de cette pizza à l'intérieur de la section Méthodes. La méthode consiste en toutes les étapes nécessaires à la création de chaque pizza. Nous avons ceci en haut de notre fichier JavaScript. À l'intérieur de notre page d'index, nous pouvons accéder à tous les tableaux de pizzas, et il y a le nom de pizza que vous avez déjà utilisé, ainsi que la méthode. Si nous prenons cette méthode Margherita comme exemple, il y aura trois étapes. La première consiste à rouler la pâte, la seconde consiste à ajouter la sauce et la troisième est garnie de fromage. Nous allons valider que le chef a terminé les étapes ultérieurement en utilisant les étapes requises, mais pour l'instant, tout ce que nous voulons faire est de nous concentrer sur affichage de cette méthode à l'intérieur du navigateur. Comme vous pouvez le constater, cette méthode n'est une seule chaîne de texte, et ce que nous allons faire dans cette vidéo, c'est de diviser chacune de ces étapes pour les afficher dans le navigateur. Nous avons donc besoin de l'étape 1, de l'étape 2 et de l'étape 3 pour les afficher de manière formatée. Pour ce faire, nous pourrions passer à notre fonction pizza actuelle, mais pour garder les choses plus propres et plus abstraites, je vais créer une nouvelle fonction en bas. Plongez jusqu'au fond de notre projet. Il s'agit d'une nouvelle fonction appelée DisplayMethod. Cela va également devoir saisir nom de la pizza afin que nous sachions quelle méthode nous devons obtenir, alors transmettez-le dans notre fonction, et nous devons appeler cette fonction chaque fois que nous définissons la pizza actuelle, dire, cette fonction juste au-dessus lorsque nous cliquons sur la pizza, et cela est affiché à l'intérieur d'ici. Lorsque vous cliquez dessus, nous savons sur quelle pizza devra travailler. C'est logique d' appeler notre fonction de l'intérieur de là. Faisons ça. Nous appellerons notre fonction, qui est DisplayMethod, et n'oubliez pas que cela doit également prendre en compte le nom de pizza actuel, que vous avez stocké à l'intérieur de cette variable. Vers notre page d'index, il y a déjà une section appelée méthode, que vous pouvez voir ici. Ceci a l'ID de la méthode un niveau 3 en haut, puis nous avons deux sections. Nous avons le nom de la pizza suivi la méthode que nous allons bientôt insérer. Comme vous pouvez l'imaginer, c'est la section avec laquelle nous allons travailler. Nous pouvons commencer par la première section qui est le nom de la pizza. notre fonction, nous avons déjà le nom de la pizza afin que nous puissions utiliser documents.querySelector ('nom_pizza_') .innerHTML qui aurait vu que le contenu du texte intérieur sera égal à notre variable, qui est PizzaName. Avant d'aller plus loin, essayez-le dans le navigateur, j'ai besoin de rafraîchir et de passer une commande dans la section Travail sur. Cliquez sur « Pizza » et nous pouvons voir notre nom de pizza ici. Cela est également mis à jour lorsque nous cliquons sur différents. La prochaine étape de notre page d' index consiste à saisir notre méthode de pizza et à placer une méthode à l'intérieur d'ici. N'oubliez pas que notre objet pizza possède cette propriété de méthode à laquelle nous pouvons accéder, et pour le trouver, nous pouvons utiliser la méthode Erase find est find méthode que nous pouvons utiliser pour filtrer ce particulier porté par le nom de pizza que nous avons déjà, puis nous pouvons sélectionner la méthode pour chacune d'elles. Retour à notre fonction méthode bravo full pizzas array, qui est trouver, et trouver va exécuter une fonction pour chaque valeur à l'intérieur de notre tableau de pizzas, et vous pouvez placer une fonction irrégulière si vous le souhaitez, mais comme cela va être une simple déclaration, je l'ajouterai sur sa propre ligne avec une fonction flèche. Cette fonction va prendre en compte la pizza individuelle, puis accéder au nom de chaque pizza sur la boucle, et nous pouvons vérifier si cela est égal à notre nom de pizza, qui est transmis à cette fonction. Le nom de pizza cliqué actuel est égal à n'importe lequel de nos noms de pizza dans le tableau Nous stockerons cette pizza sélectionnée à l'intérieur d'une variable ou d'une constante appelée SelectedPizza. Ensuite, nous allons faire un journal de la console et vérifier que tout fonctionne bien, la constante de SelectedPizza, et nous allons le rafraîchir dans le navigateur. Je saute à la console. d'abord, cliquez sur « Oder », sélectionnez l'une des pizzas. C'est du jambon et de l'ananas, et nous pouvons voir que l' objet complet parmi les ananas a été retourné. Essayons encore une fois. Le pepperoni. Super, donc tout fonctionne et nous pouvons maintenant filtrer cela pour ne renvoyer que la méthode. Essayez encore une fois. Les étapes dont nous avons besoin à l'intérieur, et elles sont différentes pour chacune d'elles. Excellent, donc cela renvoie maintenant une chaîne de texte, et nous devons diviser cette chaîne et afficher chaque étape en tant qu'élément de liste. Pour cela, JavaScript dispose d'une méthode de chaîne intégrée appelée split, dont les chaînes héritent par le biais de la chaîne prototype. Cette méthode va prendre notre chaîne unique, que nous avons maintenant, divisera à un certain point que nous spécifions, puis retournera un nouveau tableau contenant toutes ces sous-chaînes. C'est comme ça que cela se présente dans notre code. C'est notre méthode, donc nous pouvons simplement supprimer ceci de la chaîne de journaux de la console à la fin, la méthode de partage JavaScript, et nous voulons passer dans quelle section de la chaîne nous voulons diviser cette part, et ensuite dans notre cas, un arrêt complet est idéal, et c'est parce que si nous regardons notre corde, chacune de ces étapes que nous avons finit par un arrêt complet. C'est parfait pour briser notre chaîne, et rappelez-vous que cela retournera un nouveau tableau, que nous pourrons stocker à l'intérieur d'une constante. Enfin, avant d' aller plus loin, nous allons faire un journal de console qui transmet notre constante, qui est MethodSteps. Essayons ça. Sélectionnez une commande, sélectionnez la pizza et cela renvoie maintenant un nouveau tableau avec toutes nos étapes en place. Nous pouvons également faire le contraire si nous le voulions, c'est-à-dire prendre un tableau de valeurs comme nous l' avons trouvé ici et les convertir en une seule chaîne. Nous pouvons le faire avec la méthode appelée join. N'oubliez pas que MethodSteps est un tableau. Nous pouvons faire l'inverse en passant la méthode de jointure. Join se compose d'une seule chaîne. Nous pouvons tester cela en cliquant sur une pizza. Faites revenir une chaîne unique vers et chaque valeur est séparée par une virgule. Si nous le voulions, nous pourrions changer ce séparateur pour qu'il s' agisse d'un autre personnage, tel qu'un tiret. Essayez-le. Maintenant, il y a un tiret entre chacune de ces valeurs. Cela est utile si vous devez joindre un tableau de valeurs en une seule chaîne. Nous savons maintenant que nous pouvons parcourir les tableaux et faire quelque chose avec chaque valeur, et dans le code HTML, nous avons défini le nom de la pizza avec cette section ici, et l'étape suivante consiste à saisir Votre deuxième plongée avec l'id de PizzaMethod. Je place nos valeurs de tableau. Prenez ceci avec Documents.QuerySelector ('#pizza_method') .HTML interne et ici je vais juste définir cela pour qu'il soit égal à une chaîne vide. Si une méthode a déjà été définie précédemment, nous pouvons l'effacer avant d'ajouter notre nouvelle méthode. Ensuite, nous énumérerons nos étapes en saisissant notre tableau, qui est MethodSteps. Puisque vous avez plusieurs valeurs, nous parcourrons chacune d'entre elles avec une boucle pour chaque boucle, qui exécute une fonction pour chaque valeur. Nous pouvons résoudre chacune de ces valeurs dans la variable appelée méthode. Construisez ensuite nos éléments. Installez cela à l'intérieur d'une constante appelée éléments. Nous avons documents.CreateElements ainsi les éléments que vous souhaitez créer. Je vais choisir un élément p, et ensuite le contenu du texte, Document.CreateTextNode, et le contenu que vous souhaitez transmettre est le texte de notre méthode. Placer dans la méthode à l'intérieur fusionne Elements.AppendChild passant dans notre texte. La dernière étape consiste à saisir à nouveau notre section Méthode de pizza. Nous allons donc copier ceci, coller cela dans, puis nous pourrons l'ajouter à l'aide l'AppendChild en passant nos éléments. Nous allons enregistrer cela et actualiser, sélectionner une nouvelle commande. Pepperoni. On y va. Il y a notre titre de pizza ainsi les étapes requises pour chacune des pizzas. Bien. Tout cela fonctionne maintenant et a l'air bien. Il n'y a qu'un petit facteur que nous pouvons faire. N'oubliez pas que nous avons créé un nouvel élément de texte juste ici, mais nous avons également une fonction d'assistance appelée BuildElements, qui prend en compte le nom de notre élément, le contenu et la valeur nouvellement construite. Revenons à notre boucle. Nous pouvons stocker cela à l'intérieur d' une constante appelée étapes. Cette valeur est égale à la valeur renvoyée de notre fonction BuildElement. Passer les éléments p. Ensuite, le contenu, qui est la méthode que nous allons déplacer ces trois lignes suivantes et passer dans nos étapes. Essayons cela, sélectionnez une nouvelle commande. Tout cela fonctionne exactement de la même manière, mais nous avons enregistré quelques lignes de code. C'est une autre bonne étape pour notre projet, et si vous êtes un débutant, je sais que cela peut se passer beaucoup ici, mais ce qui est important à retenir, c'est que nous avons déjà couvert la majorité des ce que nous faisons ici. C'est juste le cas de la décomposer en tâches plus petites, s' assurant que chaque étape fonctionne en cours de route. 31. Ajouter Des Pizzas Au Four: La dernière étape du déplacement de cette pizza est de la déplacer de la cuisine à notre four. Nous n'avons pas encore créé la pizza, mais nous examinerons bientôt comment procéder tout en vérifiant que nous avons utilisé les bons ingrédients. Mais pour l'instant, nous pouvons utiliser ce nom de pizzaName que nous avons et le déplacer jusqu'à la section du four. Maintenant, notre four va être un réseau pour stocker plusieurs pizzas, nous aurons également besoin d'autres variables. Créons ces deux fonctions bien en haut, et juste en dessous de nos ingrédients, créons notre four avec le mot-clé let, qui sera au départ un tableau vide. Après cela, nous devons définir le nombre maximum de pizzas qui s'adapteront à notre four, c'est-à-dire le fourCapacité. Je vais aller pour une valeur de six. Ensuite, nous devons suivre les pizzas que nous avons préparées pour une commande particulière. Si vous prenez l'Ordre 3 par exemple, il est écrit quatre pizzas, Ordre 2 a trois pizzas et nous devons garder une trace du nombre que nous avons fabriqué actuellement. laissez Pizzas Completedfor Order, qui sera initialement zéro. Maintenant que nous en disposons, nous pouvons créer notre première fonction qui sera utilisée pour pousser la pizza vers notre nouvelle gamme de fours. En bas, créez une fonction appelée AddToOven. Pour l'instant, ce four va prendre le PizzaName actuel. Nous pouvons le récupérer dans notre cuisine si nous allons sur notre page d'index. Jusqu'au coin cuisine, rappelez-vous que nous avons cette plage avec l'ID de current_pizza, et cela stocke notre nom de pizza. Saisissez cela avec Document.QuerySelector ID, qui est current_pizza. Ensuite, InnerText. Stockez-le à l'intérieur d'une constante appelée PizzaName. N'oubliez pas que nous n'avons pas toujours une pizza sélectionnée. Actuellement, nous avons la valeur du jambon et de l'ananas, mais si nous rafraîchissons , cet élément est souvent vide. Pour vérifier cela, nous allons placer une déclaration if. Nous pouvons vérifier si le PizzaName est présent. Si c'est le cas, nous ajouterons cela au four avec la méthode array appelée push, transmettrons le PizzaName puis un journal de console temporaire pour vérifier que tout fonctionne. Voyons la console, sautons dans le navigateur. Nous pouvons vérifier ce journal juste une seconde, mais nous devons d' abord appeler cette fonction. Nous appellerons cette fonction en ajoutant un écouteur de clic au bouton que nous avons déjà, qui se trouve à l'intérieur de notre section cuisine et juste en dessous de notre pizza actuelle. Disposez de ce bouton pour AddToOven. Il possède actuellement une classe, mais nous pouvons ajouter un ID. Sélectionnez cet AddToOven , puis saisissez ce four dans notre script. Documents.QuerySelector, la valeur ID de AddToOven, puis nous pouvons ajouter un écouteur d' événements. L'écouteur d'événements écoutera un clic sur ce bouton, qui exécutera une fonction appelée AddToOven. Nous allons essayer ça. Avec la console ouverte, cliquez sur l'une de nos commandes. Sélectionnez la pizza. Actuellement, nous prenons du jambon et de l'ananas, et déclenchez notre auditeur de clic avec four et nous voyons que le jambon et l'ananas sont poussés à la liste. Nous allons essayer le pepperoni. Cliquez dessus, et encore une fois, cela continue d'ajouter des pizzas à notre four. Super. Maintenant que nous savons que cela fonctionne, nous pouvons l'étendre un peu en ajoutant un PizzaName au four. Actuellement, nous ne voyons que l'intérieur de la baie, mais nous devons également le lister dans la section four. En plus d'énumérer le PizzaName, nous pouvons également définir l'heure qui a été mise dans le four. C'est parce que plus tard, nous ajouterons également un temps de cuisson. Pour cela, créez un nouvel objet et nous le faisons à l'intérieur de nos déclarations if. Juste au-dessus de l'endroit où il pousse vers le four, nous allons créer un objet appelé PizzaForOven. La première propriété est PizzaName qui est stockée dans la variable PizzaName, que vous possédez déjà, puis une propriété appelée TimeAdded. Pour l'instant, une simple valeur de place-holder est bonne, nous y reviendrons plus tard. Pour l'instant, la dernière étape consiste à mettre la constante de pizza au four dans notre méthode de poussée. Juste avant de tester cela, n'oubliez pas que nous avons ajouté une variable appelée PizzasCompletedForOrder. Nous pouvons augmenter cette valeur d'une valeur de 1. Il suffit de vérifier que tout fonctionne à l'intérieur de la console. Nous avons une pizza, ajoutez-la au four et il y a notre nouvel objet. Le four est maintenant en train d'obtenir les pizzas comme on peut le voir. Ensuite, une fonction pour parcourir cette baie et les afficher dans la section four. Juste après avoir poussé notre nouvelle pizza au four, nous allons appeler une nouvelle fonction appelée DisplayOvenItems. Nous l'appelons chaque fois que nous créons une nouvelle pizza et l'ajoutons au four, ce qui va mettre à jour l'interface utilisateur. Nous n'avons pas encore créé cela, alors ajoutons cela juste au-dessus. Pour commencer à l'intérieur de la page d'index, nous devons saisir notre section four et si nous regardons un peu notre code, nous avons l'emballage de four qui a le titre de niveau 3 , puis cette div vide avec l'ID du four, et c'est ici que nous ajoutons nos nouvelles pizzas. Nous pouvons saisir ce document.QuerySelector, l'ID du four, puis nous allons d'abord définir une chaîne vide. Cela nettoie notre four avant de le mettre à jour. Enveloppez notre réseau de fours, et comme ce n'est pas un tableau, nous pouvons utiliser FoReach. Nous exécutons une fonction pour chaque valeur à l'intérieur de là, chaque valeur sera une pizza particulière que nous envelopperons dans une div. const PizzaDiv est incroyablement similaire à Document.CreateElement, crée notre section div. Nous ajouterons une classe à cela pour notre style, donc Pizzadiv.className est égal à pizza_div. N'oubliez pas qu'à l'intérieur de nos fichiers de démarrage, nous avons également une image SVG pour notre pizza. Il sera utilisé pour afficher à l'intérieur du four chaque fois que nous ajoutons une nouvelle pizza au four. Ce que nous pouvons faire, c'est que nous allons traiter cela comme une image ou créer un nouvel élément d'image. Nous avons Document.CreateElement, les éléments d'image avec IMG. Ensuite, nous pouvons définir la propriété source pour qu'elle soit égale à notre SVG. Celui-ci s'appelle pizza.svg, et il se trouve également dans le même dossier mais nous pouvons y référencer par son nom. Nous avons un emballage avec un cours, nous avons une image, nous aurons également besoin du nom de la pizza. Pour ce faire, nous pouvons utiliser notre fonction appelée BuildElement pour créer ces photos et stocker la valeur de retour dans une constante appelée PizzaName. Notre fonction d'assistance, qui est BuildElement, il peut s'agir d'un élément p et puisque le PizzaName sera une variable, nous l'insérerons dans les coches arrière, avec tout le symbole et ensuite calibrez cela et n'oubliez pas que chacun de nos articles de four est stocké dans cette variable de pizza afin que nous puissions accéder à la pizza ou au nom. Ce sont tous les éléments dont nous avons besoin. Maintenant, il ne s'agit que de les ajouter à notre emballage PizzaDiv. Nous allons sélectionner cette PizzaDiv. Nous pouvons utiliser append pour ajouter plusieurs valeurs, ajouter une nouvelle image sur PizzaName. La dernière section est maintenant ajoutée à notre four. Comme ci-dessus, nous utiliserons QuerySelector pour saisir notre four, AppendChild, en le plaçant dans notre PizzaDiv. Cela se passe un peu là, mais rafraîchissons et testons tout cela fonctionne. Placer dans un nouvel ordre, sélectionner la pizza, ajouter le pepperoni au four. Voici notre image que nous avons créée ici, ainsi que notre nom de pizza ci-dessous, jambon et ananas. Super, et tout cela fonctionne maintenant. Comme mentionné précédemment, nous devons encore revenir pour créer réellement des pizzas, mais nous savons maintenant que cette étape est prête quand nous le faisons. 32. Commencer Et Terminer Le Jeu: Cette leçon, j'ai résolu quelques étapes pour essayer les choses vous-même. Ce que nous visons à couvrir, c'est la création de deux fonctions. Une fonction sera utilisée pour démarrer le jeu et l'autre pour y mettre fin. Ces fonctions vont être appelées à partir de nos boutons HTML, que nous pouvons voir dans notre index. Il s'agit de la section de contrôle du jeu où nous avons nos deux boutons. L'idée derrière ces deux boutons est de nettoyer l'interface utilisateur, ne montrer que les bonnes choses, telles que l'affichage du bouton de fin de jeu uniquement lorsque le jeu est en cours d'exécution. Nous utilisons le bouton Démarrer le jeu pour commencer les commandes qui arrivent et ainsi de suite. Ces fonctions seront également utiles ultérieurement lorsque nous ajouterons à notre projet des éléments tels que les statistiques et les minuteurs. Ce que nous devons faire, c'est d'abord créer nos deux fonctions appelées StartOfGame et EndofGame. Ensuite, nous pouvons les appeler en ajoutant un écouteur d'événements des deux boutons que nous venons de regarder. Nous allons créer une nouvelle variable, qui est lancée, qui sera booléenne. Ce booléen sera vrai lorsque nous commencerons le jeu et faux lorsque nous terminerons le jeu. Nous effectuerons une vérification conditionnelle à l'intérieur de StartOfGame pour revenir à cette fonction si cette variable de démarrage du jeu est vraie. Étape 5, rappelez-vous que toutes les commandes ont cette classe de order_wrapper. Je vais effacer toutes ces commandes dans notre fonction StartOfGame. Puisque nous n'avons pas encore commencé le jeu et CreateOrdersList est responsable de la création de ces commandes. Nous pouvons également déplacer cela à l'intérieur de notre fonction StartOfGame sur le CSS. Lorsque le jeu démarre, nous afficherons le bouton de fin et masquons le bouton d'arrêt, puis ferons l'inverse lorsque la partie est terminée. Sans oublier que notre bouton de fin de jeu doit également être supprimé ou masqué lorsque le jeu se charge initialement. Comme toujours, vous pouvez les essayer vous-même ou suivre si vous préférez. En bas, rappelez-vous que la première étape consiste à créer nos fonctions. La première fonction était StartOfGame. Ensuite, notre fonction EndFGame aussi. Ces deux fonctions doivent être appelées en cliquant sur les deux boutons de notre code HTML. Pour ce faire, nous allons saisir nos boutons de début et de fin, et en ajoutant un écouteur d'événements pour appeler ces fonctions. Ces boutons, à l'idée de bouton de début et de fin. Nous pouvons les saisir maintenant avec le sélecteur document.query. Voici le hash. Tout d'abord, le bouton Démarrer. Ajoutez un écouteur d'événement pour un événement de clic, qui va déclencher une fonction appelée StartOfGame. Dupliquez ceci. Le second concerne l'EndBTN, qui déclenche la fonction correspondante. Déplacez également notre écouteur d' événements par le haut pour les regrouper. En fait, il faut simplement ajouter un écouteur d' événements pour s'assurer que cela est terminé. Ensuite, avant d'aller plus loin, nous pouvons ajouter un journal de console à chacune de ces fonctions pour vérifier qu'elles fonctionnent correctement. Le premier est le début. Le deuxième pour la fin. Ensuite, sautez dans la console. Il suffit de séparer les minutes, donc nous allons juste rattacher. On y va. Retournez dans la console et nos deux boutons en haut. Start déclenche un journal de console et finit également les travaux. C'est l'étape 1 et l'étape 2 prise en charge. La prochaine consiste à créer un booléen lancé par GameStarted. Faisons cela en haut et dans le reste de nos variables. Laissez GameStarted, qui sera initialement faux. Nous pouvons mettre à jour cette variable à partir de nos deux fonctions. Supprimez les journaux de la console et lorsque nous démarrons le jeu, GameStarted sera égal à vrai. Ensuite, à l'intérieur de la fonction EndOfGame, GameStarted sera égal à false. Maintenant, quand, si ce jeu est démarré ou non, il sera vraiment utile et en particulier pour la fonction StartOfGame, nous allons effectuer des travaux de nettoyage tels que la suppression de tout autre jeu existant commandes. Nous ne voulons pas l' utiliser pour lancer accidentellement ce milieu de jeu. Nous pouvons revenir à cette fonction si c'est vrai. Si GameStarted est égal à vrai, nous retournerons tous à cette fonction avant d'exécuter d'autres codes. Après cela, nous pouvons passer à la suppression toutes les commandes du jeu précédent. Prenons nos commandes et stockons cela à l'intérieur d' une constante avec Document.getElementByClassName. Nous utilisons ici le nom de classe car rappelez-vous que nous avons cette classe de order_wrapper. Passez ça entre parenthèses. Ensuite, nous pourrons passer en boucle et supprimer toutes ces commandes. Si nous accédons à l' objet tableau principal avec un A majuscule, nous pouvons alors avoir accès à une méthode appelée de pour créer un tableau à partir de tous ces éléments. Lorsque vous utilisez GetElementsByClassName, une collection HTML sera renvoyée. Ensuite, nous pouvons l'utiliser pour créer un nouveau tableau à partir de ces commandes. La méthode from, passer les ordres. Maintenant, nous avons converti ce tableau en tableau. Nous pouvons utiliser des méthodes de tableau telles que FoReach pour exécuter une fonction pour chacune d'entre elles. En passant la fonction, chaque commande stockera dans la variable de commande. Accédez à cette commande individuelle, puis appelez la méthode JavaScript remove. Cela permet de supprimer ces commandes lorsque nous commençons une partie, mais nous devons également les créer en premier lieu. Actuellement, nous avons une fonction appelée CreateOdersList. Si on fait défiler vers le haut pour trouver ça. Pour obtenir cette fonction, il est responsable de la création de toutes nos commandes. Il serait logique d'appeler cela lorsque le jeu a commencé. Actuellement, si nous effectuons une recherche pour cela, nous pouvons voir que cela est simplement appelé de l'intérieur de notre programme. Au lieu d'appeler cela dès qu'il est chargé, nous allons couper cela à sa place, puis déplacer vers notre nouvelle fonction StartOfGame. Désormais, toutes les commandes ne doivent s' afficher que lorsque l'utilisateur clique sur ce bouton de démarrage. Gardons ça et essayons ça. Maintenant, puisque nous avons déplacé notre appel de fonction, nous ne voyons pas les ordres, comme start. Ils apparaissent maintenant dans la barre latérale. Les commandes s'affichent et nous savons que cet appel de fonction fonctionne correctement. Mais nous ne pouvons pas savoir si les commandes précédentes ont été effacées. Où nous avons utilisé order.remove. Cela n'a pas beaucoup d'importance pour le moment puisque tous les ordres de la même chose. Mais plus tard, nous générerons des ordres aléatoires qui seront différents. titre de mesure temporaire pour tester cela, commentez notre appel de fonction. Ensuite, nous pouvons ajouter des éléments temporaires dans notre code HTML et vérifier qu'il est supprimé. Dans la section de l'ordre des éléments P. N'oubliez pas que tous ces éléments ont la classe order_wrapper placée dans n'importe quel texte à l'intérieur. Maintenant, si nous sauvegardons cela, actualisez, nous pouvons voir toute la course. Cliquez sur Démarrer. Cet élément a maintenant été supprimé. Super, nous savons maintenant que cela fonctionne. Nous pouvons supprimer nos éléments temporaires et rétablir notre appel de fonction. Ensuite, l'étape suivante est les numéros 7 et 8. Il s'agit d'utiliser la propriété style pour afficher et masquer ces deux boutons. Au StartOfGame, en haut de la fonction, utilisez Document.QuerySelector. Saisissez d'abord notre bouton Démarrer. Accédez à la propriété style de l'affichage. Nous pouvons masquer cela en définissant cette valeur comme une valeur CSS nulle. Dupliquer, puis pour le bouton de fin, nous le rétablirons en définissant cette valeur sur Inline. Copiez les deux. Plongez dans la fonction EndFGame et collez-les dans. Nous pourrions alors inverser les valeurs de ces deux éléments. Le bouton d'arrêt s' affiche avec une valeur inline, puis le bouton de fin peut être supprimé sans aucun. Essayons ça. Rafraîchir Cliquez sur Démarrer, et cela supprime le bouton de fin. Cliquez sur Fin et le bouton Démarrer s' affiche. Vous remarquerez également que dès le chargement de la page, ces deux boutons s'affichent. Puisque le jeu n'a pas encore commencé, nous voulons uniquement afficher le bouton Démarrer. Nous allons déplacer cela en définissant la propriété style de l' affichage pour qu'elle soit égale à aucune. Pour cela, nous avons déjà le code comme deuxième valeur à l'intérieur d'ici. Copiez ceci et nous pourrons l' appeler en haut de notre code. N'importe où autour des variables, c'est très bien. Rafraîchir Le bouton de fin a été retiré. Nous démarrons et nous ne voyons que le bouton de fin. Maintenant, je suis dans le jeu. Nous ne voyons que le bouton d'arrêt. 33. Introduction Au Math Javascript: Dans cette section, nous allons poursuivre notre projet Speedy Chef, mais nous allons nous concentrer sur les mathématiques, la date et l'heure pratiques de fonctionnalités proposées par JavaScript. À partir de bientôt, nous allons voir comment utiliser mathématiques JavaScript pour générer des pizzas et des commandes aléatoires. Actuellement, avec ce tableau d' ordres que nous avons, nous ne générons que ces trois mêmes commandes chaque fois que le jeu commence, mais nous pouvons en générer de nouveaux avec plus de hasard. Ces commandes continueront d' arriver au fur et à mesure que le jeu est en cours d'exécution. Nous aurons différentes quantités de pizzas ainsi que différents types de pizzas pour chaque commande. Pour ce faire, nous avons besoin de deux nouvelles fonctions tout en bas. Le premier va s'appeler GeneratNewOrder. Cela sera responsable de la création d' une nouvelle commande avec un numéro de commande. Je vais analyser ça , générer un nouvel ordre. Ensuite, cette deuxième fonction va s'appeler GeneraNewPizza, et GeneraNewPizza créera des pizzas aléatoires, qui seront appelées à partir de notre fonction de commande. Testez cela à l'aide d'un journal de console, en analysant l'objet mathématique JavaScript. Juste avant de pouvoir voir cela, nous devons appeler notre fonction. Alors saisissez ceci, puis appelez cette fonction n'importe où ci-dessous. Rafraîchissez, ouvrez cela, et cela revient beaucoup à l'intérieur d'ici. Nous avons beaucoup de propriétés et de méthodes différentes, et je ne suis pas mathématicien, donc une partie de cela est au-delà de ma connaissance. Mais vous n'avez pas besoin d'être génial en maths pour pouvoir en utiliser une partie. Tout est là pour nous aider. Il existe certaines constantes que nous pouvons utiliser, telles que la valeur de Pi, que vous connaissez peut-être. Nous avons quelque chose appelé Random si nous faisons défiler vers le bas, ce qui est une méthode. C'est ce qui génère un nouveau nombre aléatoire compris entre zéro et un. Nous avons quelque chose appelé Ceil and Floor à arrondir ou à arrondir et nous allons les examiner dans quelques instants. Il existe une méthode pour arrondir au numéro le plus proche. Nous pouvons trouver le plus petit et le plus grand nombre avec min et max, ainsi que beaucoup d'autres. Revenons à la fonction et voyons comment nous pouvons les utiliser. Plongez dans GenerateNewOrder, et juste en dessous de notre journal de console, changeons cela par Math.Random, qui est l'une des méthodes que nous venons de voir dans le navigateur. Essayons ça. Comme mentionné précédemment, cela générera un nouveau nombre compris entre zéro et un. Par conséquent, zéro est inclus, mais la valeur d'un ne l'est pas. Nous allons seulement atteindre la valeur de 0,999 récurrents. Souvent, nous avons besoin que ce nombre soit différent, comme la valeur de 0 à 10, 1-50, 0-100, etc. Pour ce faire, nous ne pouvons analyser dans aucune plage de math.Random. Au lieu de cela, nous devons multiplier cela par le montant que nous voulons le multiplier. Si je multiplie cela par la valeur de 100, cela nous donnera une valeur comprise entre zéro et 99. Rappelez-vous que zéro et un est le math.Random original. Même le fait de multiplier ce 0 par 100 nous donnera toujours 0. Puisque 0,99 est la valeur la plus élevée, multiplier cette valeur par 100 nous donnera la valeur jusqu'à 99. Économisez. Nous laissant des numéros plus importants à l'intérieur de la console. Rangons-le à l'intérieur d'une constante. Je peux extraire ça de notre journal de console, const aléatoire. Ensuite, nous pourrons arrondir ce nombre aléatoire au nombre entier le plus proche. C'était un exemple. Plutôt que d'obtenir 53,4, nous pouvons arrondir cela à 54. Nous le faisons en accédant à l'objet mathématique JavaScript, une méthode que nous venons de voir à l'intérieur de la console appelée un ceil, où nous analysons nos constantes aléatoires. Maintenant, chaque fois que nous actualiserons cela, il arrondit cela au nombre entier le plus proche. Nous avons eu beaucoup de chance là-bas parce que nous avons la valeur de 100 dans la console. Cela est dû au fait que la constante aléatoire d' origine nous donnera un nombre tel que 99,9. Ensuite, cela arrondira ce montant à 100. Avec cet arrondi, tous les nombres commençant par zéro seront arrondis à un. Cela devrait nous donner un chiffre compris entre 1 et 100. Nous pouvons arrondir en changeant de plafond en plancher. Mais vous ne remarquerez pas beaucoup de différence à l'intérieur de la console. Mais cela sera arrondi plutôt que d'arrondir même un nombre entier compris entre 0 et 99. Également mentionné lorsque nous avons regardé l'objet mathématique, il y avait les méthodes min et max dans la console. Commençons par trouver la plus grande valeur numérique. Pour ce faire, nous allons créer une nouvelle constante appelée plus haut et égale à Math.max. Math.max va prendre en compte plusieurs valeurs. Nous allons aller pour 1, 77 et 34. Il suffit d'analyser tous les nombres aléatoires à l'intérieur d'ici, puis de le connecter à la console. Dans mon cas, 77 est la valeur la plus élevée à l'intérieur d'ici. Il est renvoyé dans la console. Comme on peut s'y attendre de la même manière, nous pouvons également stocker la valeur la plus basse. Nous avons Math.min. Connectez-vous à n'importe quel numéro à l'intérieur d'ici. Consignez celle-ci à la console et elle devrait renvoyer la valeur d'un. Ce n'est pas toujours pratique d'insérer nos nombres à l'intérieur de la fonction max ou min. Ces numéros sont souvent stockés à l'intérieur d'un tableau. Ensuite, nous devons accéder à ce tableau et déterminer quelle est la valeur la plus élevée et la plus basse. Eh bien, pour dire cela, créez une nouvelle constante appelée nombres et stockez-la dans un tableau. Les numéros enregistrés sont corrects. Comptez ces derniers . Tout d'abord, peut-être pour reproduire ce que nous avions plus haut avec notre plus haut, puis analyser nos nombres en math.max. Faisons cela et voyons ce qui se passe. Console consigne la valeur la plus élevée. Vous vous attendez peut-être à obtenir la valeur de 77. Eh bien, si nous sauvegardons cela et nous actualisons, nous voyons la valeur d'un nombre non présent dans la console. La raison pour laquelle nous comprenons cela est parce qu'à l'intérieur d' ici, nous analysons dans un tableau plutôt que les valeurs réelles contenues à l'intérieur. Pour extraire les valeurs de ce tableau et les comparer, nous devons utiliser la méthode de propagation JavaScript basée sur les trois points. Rafraîchissez, en nous laissant la valeur correcte. De plus, si vous le souhaitez, cela peut également être utilisé avec Math.min. Il fonctionne exactement de la même manière et c'est d'autres méthodes et propriétés disponibles sur cet objet mathématique, comme nous l'avons vu plus tôt dans la console, en fonction de vos besoins particuliers. Nous allons maintenant mettre cela en pratique en générant des pizzas aléatoires et des commandes. 34. Générer de nouvelles pizzas avec des mathématiques: Nous pouvons utiliser ce que nous savons maintenant sur JavaScript Math pour générer des pizzas et des commandes aléatoires. abord, effacons notre fonction de génération de nouvelle commande de la vidéo précédente et commençons à générer de nouvelles pizzas. Nous utilisons cette fonction pour générer une pizza aléatoire à partir de notre gamme de pizzas. Pour commencer, nous allons créer un nombre aléatoire compris entre un et trois, afin de générer la quantité de chaque pizza. N'oubliez pas de créer un nouveau numéro aléatoire, nous utilisons Math.Random. Cela générera un nombre aléatoire compris entre zéro et un. Mais nous voulons aussi que cela se situe entre un et trois. La première étape consiste à utiliser Math.ceil pour arrondir cette valeur , couper cela. Nous utilisons Math.ceil et à l'intérieur des crochets passent ce nombre aléatoire. Avec cette valeur comprise entre zéro et un, cela va toujours arrondir cela à la valeur d'un. Mais nous voulons la valeur de 1-3, qui signifie que nous devons multiplier cette valeur renvoyée par 3, stocker à l'intérieur de la constante appelée quantité. Ensuite, faites un journal de console pour vérifier que cela fonctionne. Dites ceci, et nous devons consoler consigner cette valeur en appelant à générer une nouvelle pizza. Modifications, actualisez 1, 3 et 2. Il semble que ce soit tous les chiffres dont nous avons besoin dans notre gamme. Il s'agit de notre quantité aléatoire, mais nous devrons également choisir une pizza aléatoire. Juste avant de le faire , en fin de compte, ce que nous voulons viser , c'est de créer un nouvel objet de pizza, Const Pizza. Cette pizza doit prendre en compte la quantité que vous avez déjà créée juste au-dessus et nous aurons également besoin d'un nom de pizza. Il s'agit d'une étape que nous devons maintenant créer. Commentez cela afin que nous n'obtenions aucune erreur. Nous prenons constamment pour stocker cela, pour tous au hasard des pizzas. Ceci va sélectionner une pizza aléatoire dans notre gamme de pizzas. N'oubliez pas que les tableaux commencent toujours à la valeur zéro et qu'ils doivent aller jusqu'à la fin de notre tableau. Nous allons maintenant prendre ça avec des pizzas. Longueur. À l'aide d'un exemple similaire ci-dessus, nous allons copier ceci sans point-virgule et le transmettre. Comme nous le savons, cela retournera une valeur de 1-3, mais nous avons besoin d'une valeur de zéro jusqu' à pizzas.length. Pour obtenir zéro, nous utilisons Math.Floor, qui nous donnera actuellement la valeur de 0-2. Mais plutôt que de multiplier cela par 3, nous allons multiplier cela par la valeur de pizzas.length. Cela signifie également que si nous ajoutons de nouvelles pizzas à l'avenir, cela sera également pris en charge. Maintenant, revenons à cette propriété de nom, nous pouvons définir cela comme égal à notre pizza aléatoire. Mais n'oubliez pas que notre pizza aléatoire en choisit une dans le tableau. Si nous examinons le tableau, il contient un objet portant le nom, la méthode et les étapes requises. Nous n'avons qu'à accéder à la propriété name, pouvoir accéder à RandomPizza.Name. Enfin, puisque le travail de générer de nouvelles pizzas est de générer de nouvelles pizzas. C'est ce que nous avons fait avec cet objet, afin que nous puissions revenir de notre fonction. Bien, essayons ça. Plutôt que de l'appeler directement en bas, placez cela dans un journal de console, générez une nouvelle pizza. Appelez cette fonction, rafraîchissez-vous comme premier objet. Nous avons une quantité aléatoire de trois et le nom de jambon et d'ananas. Encore une fois, un végétarien , deux végétariens et un poulet. Il s'agit en fait de la moitié du travail accompli pour générer notre nouvelle commande. Nous avons toutes les pizzas de retour. Mais plutôt que de se connecter à la console, cette valeur, nous devons appeler cela depuis génère un nouvel ordre. Plongez dans cette fonction et nous commencerons par créer une nouvelle variable de pizzas et la définir comme égale à un tableau vide. Ce tableau de pizzas vides sera utilisé pour créer un nombre aléatoire d' articles pour notre commande. Parce que rappelez-vous, même si elle génère de nouvelles pizzas, elle génère plusieurs valeurs, ce n'est qu'une seule ligne. Par là, si nous nous rafraîchissons, redémarre. Ce que je veux dire par là, si nous cliquons sur l'une de nos commandes, c'est par exemple que nous ne produisons qu'en une seule ligne, comme un jambon et un ananas ou deux poivrons. Pizzas va stocker une panoplie de tous ces articles. Dans ce jeu, je vais limiter le nombre de lignes à cinq, donc nous n'avons pas trop de commandes énormes. Nous savons déjà comment générer un nouveau nombre compris entre un et trois. Copions ceci, stockons cela à l'intérieur d'une constante appelée article de commande, plutôt que la valeur de trois, change à cinq, nous étant donné un nombre compris entre un et cinq, que vous pouvez modifier si vous préférez. Nous savons maintenant que nous avons un nombre aléatoire compris entre un et cinq. Ensuite, nous allons créer une boucle pour pousser chacune de nos commandes générées à partir de cette fonction dans notre tableau de pizzas. Nous allons répéter cette opération pour la valeur de l'article commandé. Passez dans une boucle for, je serai initialement réglé sur une. La boucle continuera à fonctionner là où i est inférieur ou égal à la valeur ci-dessus de l'article de commande, donc c'est 1-5. Ensuite, après chaque boucle, nous allons incrémenter i avec i plus plus. Pour notre tableau de pizzas vides, utilisez la méthode push pour ajouter une nouvelle valeur. La nouvelle valeur à pousser est cette valeur qui est renvoyée à partir de la génération d'une nouvelle pizza. Nous devrions maintenant avoir un tableau de pizzas, qui est défini sur un certain nombre de lignes entre un et cinq, puis les objets de pizza aléatoires à l'intérieur. Cela nous laisse maintenant notre gamme de pizzas pour la commande, mais nous devons maintenant construire nos objets de commande. Cela crée une nouvelle constante pour stocker cela, appelée nouvel ordre, qu'il s'agisse d'un objet. Chaque commande a besoin d'un identifiant unique. Nous pourrions aller de l'avant et générer un long nombre aléatoire ou une chaîne. Dans ce cas, un numéro de commande simple est correct. Ce que je vais faire est juste en dehors de cette fonction, crée une nouvelle variable appelée numéro de commande et la définir égale à la longueur des points de notre tableau de commandes. Si notre nombre actuel de commandes est de trois, cela renvoie la valeur de trois. Mais puisque nous créons une nouvelle commande à la fin de ce tableau, nous ajouterons plus un à la fin. Il devrait toujours y avoir une commande de plus que le nombre de commandes que nous avons. Par conséquent, ce sera unique. Nous pouvons transmettre cela comme ID, placer dans le tableau de pizzas d'en haut. Que voulons-nous réellement faire avec cette nouvelle commande ? Eh bien, en haut, rappelez-vous que nous avons notre tableau de commandes qui contient les trois exemples de commandes. Nous devons aller jusqu'au bout de ce tableau. C'est assez simple. Nous récupérerons nos commandes. Push place dans notre nouvelle commande, puis augmenterons notre numéro de commande pour la prochaine fois, alors ajoutez le numéro de commande plus plus. Cela doit toujours être unique. Prenons notre fonction de génération de nouvelle commande, et nous appellerons cela tout en bas et essayerons cela. Enregistrez et rafraîchissez. Cliquez sur « Démarrer ». Ensuite, nous avons nos trois commandes originales de notre tableau de commandes, puis une commande aléatoire en bas. Nous avons le prochain numéro d'index de l'ordre quatre. Nous avons un nombre aléatoire de pizzas et un nom aléatoire. Rafraîchissons et essayons encore une fois. Commandez quatre, celui-ci est un peu plus long et il y a quatre lignes distinctes. N'oubliez pas que nous pourrions avoir jusqu'à cinq lignes. C'est un bon progrès avec notre jeu et nous allons nous appuyer sur cela dans la prochaine leçon et générer de nouvelles commandes après un certain délai et revisiter JavaScript Math, où nous allons regarder dessiné avec Le Canvas. 35. setInterval: Nous savons que nos commandes fonctionnent et génèrent également de manière aléatoire dès le début du jeu. Mais nous voulons également qu'ils continuent de venir tout au long du match. Mais ce JavaScript nous fournit une méthode appelée SetInterval, et SetInterval exécute une fonction après un certain délai. Il est disponible sur l'objet fenêtre, nous pouvons donc simplement l' appeler seul. Appelez donc SetInterval, et SetInterval va prendre en compte deux choses. abord, nous transmettons une fonction que vous souhaitez exécuter, et nous pourrions transmettre une nouvelle fonction directement comme celle-ci, ou nous pourrions référencer une fonction existante par son nom. La fonction que nous voulons exécuter est GenerateNewOrder, alors transmettez-la sans crochets, et nous pouvons maintenant supprimer cela juste au-dessus. Séparez-le par une virgule. Nous passons un délai, et c'est le délai entre chaque appel de fonction. Il est également en millisecondes, donc 3 000 millisecondes équivaut à 3 secondes. Cette fonction sera appelée toutes les trois secondes. Nous vérifions que cela fonctionne, passons à notre fonction GenerateNewOrder et nous pouvons transmettre un journal de console, placer dans le tableau des commandes. Rafraîchissez le navigateur. Au bout de trois secondes, nous devrions voir un journal de console contenant quatre commandes. Trois secondes plus tard, nous voyons cinq commandes, six commandes, etc. Bien. Maintenant, nous savons que cela fonctionne. Auparavant, nous avons créé une fonction appelée CreateOrdersList. Jetons un coup d'œil à cela. Faites défiler vers le haut et nous voilà. C'est notre fonction ici. Cette fonction a pris le tableau de commandes. Nous avons ensuite passé en boucle chacune de nos commandes et l'avons placé dans notre section des commandes. ne nous reste plus qu'à appeler cette fonction chaque fois que nous générons une nouvelle commande. Au lieu de notre journal de console, que nous les avons précédemment placés, dans le répertoire de génération d'une nouvelle commande, supprimez le journal de la console et remplacez-le par CreateOrdersList. Disons cela et voyons où cela nous mène. Rafraîchissez le navigateur. Au bout de trois secondes, nous voyons passer nos commandes. Nous avons le numéro 1 jusqu'à quatre, puis les secondes plus tard, nous recevons un nouveau lot de commandes. Le problème ici, c'est que nous n'ajoutons pas seulement les nouvelles commandes qui ont été générées, mais nous ajoutons également les commandes existantes. Cela nous laisse maintenant deux problèmes que nous devons résoudre. La première est que les commandes arrivent avant même d' appuyer sur le bouton « Démarrer » en haut. La deuxième, comme nous venons de le voir, il suffit d' ajouter les nouvelles commandes plutôt que d' ajouter toutes les commandes existantes. Corrigez ce problème, nous pouvons effacer toutes les commandes avant d' ajouter nos nouvelles commandes à cette section. Cela peut être fait en accédant à la fonction CreateOrdersList et effacant la section Order avant d'ajouter les nouvelles. Revenons à CreateOrdersList. Nous voilà au sommet. Avant d'ajouter nos commandes dans cette section, nous allons effacer ce problème avec Documents.QuerySelector. Saisissez notre section Commandes, HTML interne et définissez-la sur une chaîne vide. Essayons ça. Rafraîchissez, donnez trois secondes. Il y a nos quatre premières commandes. Commande 5, ça a l'air bien. Commande 6, super. Ils sont tous en train d' arriver, mais plutôt que d'ajouter toutes les commandes existantes, nous l'ajoutons à la fin de celles qui existent déjà. La prochaine chose que nous voulons résoudre est ajouter ces commandes à la barre latérale uniquement après avoir cliqué sur le bouton « Démarrer ». Pour cela, plutôt que appeler directement notre SetInterval en bas, nous pouvons le supprimer, le quitter et l' envelopper dans une fonction appelée OrderSimer. Replacez ça à l'intérieur. N'oubliez pas que lorsque nous cliquons sur le bouton Démarrer, cela déclenche notre fonction appelée StartOfGame. Si nous trouvons cela juste ici, nous pouvons alors appeler notre fonction, qui était OrderStimer. Disons ceci et essayons ça. abord, rafraîchissez-vous et donnez trois secondes et nous ne devrions pas voir de commandes maintenant dans la barre latérale. Bien. Cela a stoppé la charge initiale. Cliquez sur le bouton « Démarrer ». Maintenant, notre ordre commence à passer. SetInterval est également utile pour créer un compte à rebours pour le jeu, sorte qu'il ne fonctionne que pendant un certain temps. Dès que vous cliquez sur « Démarrer », nous commencerons un compte à rebours à partir d'un certain nombre de secondes. Pour cela, nous avons besoin de certaines variables pour suivre cette situation. Sautez jusqu'au sommet où nous avons le reste de nos variables. Le premier sera une constante appelée GameLength. Définissez cette valeur sur n'importe quel nombre de secondes que vous souhaitez. Le mien sera 300, et le second utilisant le mot-clé let, puisque nous allons mettre à jour cela, sera égal au CountDownTime. Le compte à rebours va commencer à la longueur de jeu initiale. Ensuite, nous allons le réduire d'une seconde avec SetInterval. Au départ, nous allons définir cette valeur égale à GameLength, puis nous le réduirons au fur et à mesure que le jeu se déroule. Nous devons également l'afficher à l'écran. Nous pouvons le faire avec Document.QuerySelector. Nous devons trouver une section qui se trouve en haut à côté de nos boutons. Il s'agit de la section de contrôle du jeu où nous avons les boutons de début et de fin de jeu, et nous avons également une plage avec l'ID de GameLength. Transmettez-le, définissez l'InnerText. Puisque nous insérons la variable GameLength, nous avons besoin des backticks indiquant que la longueur du jeu est insérée dans la variable, qui est notre numéro GameLength, suivi du texte des secondes. Rechargez et voici notre texte en haut. Nous devons maintenant faire deux choses. La première consiste à créer une fonction permettant de déduire cette variable d'une seconde. Ensuite, nous pouvons appeler cette fonction une fois par seconde en utilisant SetInterval. abord en bas, créez notre nouvelle fonction appelée CountDowntimer, qui sera responsable de saisir notre variable, c'est-à-dire le compte à responsable de saisir notre variable, rebours Time et de la déduire d'une seconde. Chaque fois que nous faisons cela, nous devons également saisir les mêmes éléments haut et les mettre à jour avec cette nouvelle période. Tout comme nous l'avons fait en haut, nous utilisons Document.QuerySelector, le passons dans la même section, qui était GameLength, l'InnerText , ouvrez les backticks. Cette fois, nous dirons que le temps restant est égal à notre variable juste au-dessus. Cette fonction ne fait rien seule. Il est simplement responsable de sélectionner notre variable CountDownTime , puis de la déduire en une seconde. Pour également attribuer cela à la variable existante, nous devons également placer une valeur égale, puis cela ajoute cela au DOM. Cette fonction est responsable de la déduction en une seconde, mais nous devons toujours appeler cette fonction toutes les secondes. Pour ce faire, nous allons entrer dans notre fonction de démarrage du jeu. En bas, nous allons définir Interval une fois de plus, passer notre fonction, qui est le CountDowntimer, qui s'exécutera toutes les secondes. Essayons ça. Rafraîchissez-vous et nous verrons notre texte en haut. Vous pouvez commencer. Ensuite, notre minuteur commence à compter. Cependant, si nous recommençons cela une fois de plus, vous remarquerez un petit problème. Si nous regardons de près, le compte à rebours ne commence pas avant la première seconde. Nous allons cliquer. Nous devons attendre une seconde avant le compte à rebours. Cela se produit car SetInterval n' appelle pas la fonction immédiatement. Au lieu de cela, il attend d' abord le délai , puis appelle cela par la suite. C'est une solution assez simple. Tout ce que nous devons faire, c'est de saisir notre compte à rebours et appeler une fois juste avant le démarrage de notre minuteur. Maintenant, si nous nous actualisons, cliquez sur « Démarrer », notre minuteur commence immédiatement. C'est ainsi que nous pouvons utiliser SetInterval, qui est une méthode très utile pour apprendre, tout comme une autre fonction de synchronisation appelée SetTimeout. C'est ce que nous allons couvrir ensuite. 36. setTimeout: SetInterval que nous venons de regarder appelle à plusieurs reprises une fonction ou exécute code avec un délai entre chaque appel. Une autre méthode de synchronisation disponible s' appelle SetTimeout. SetTimeout pour exécuter une fonction ou un code une fois après un délai. Nous pouvons l'utiliser pour exécuter la fonction EndofGame une fois le minuteur activé. Il ressemble à SetInterval. Jetons un coup d'œil à cela tout en bas. Celui-ci est SetTimeout, qui, comme SetInterval, prend également en compte deux choses. abord, c'est le code que nous voulons exécuter et, dans notre cas, nous voulons exécuter la fonction EndFGame. Séparez-le par une virgule, le délai avant de réexécuter cette fonction en millisecondes. 2000 est donc un délai de deux secondes. Nous pouvons tester ce travail en sautant dans la fonction EndFGame et en vous connectant à la console. N'importe quel texte, essayez-le. Allons-y pour la fin. Ouvrez la console. Cela nous donne deux secondes et notre fonction est maintenant appelée. Mais nous voulons que cette fonction soit exécutée à la fin de la partie. Nous pouvons donc définir le délai pour qu'il soit identique à la durée du jeu. Nous l'avons stocké à l'intérieur d'une variable tout en haut, appelée durée du jeu, actuellement fixée à 300 secondes. C'est ainsi que cela fonctionne plutôt que de devoir attendre 300 secondes pour notre appel de fonction, je dépose cela à une petite valeur telle que trois. Tout en bas, nous pouvons maintenant définir ce délai comme étant notre délai. Comme nous le savons, la durée du jeu est trois secondes avec un délai de temps en millisecondes, qui signifie que nous devons convertir cela en multipliant cela par 1000. Bon, essayons encore une fois, rafraîchissez-vous, et après trois secondes, notre fonction a été appelée. Donc, un peu de nettoyage avant de passer à autre chose, nous supprimerons notre journal de console et la fonction de fin de jeu. Restaurez la durée du jeu à 300 secondes. Bien. Cela fonctionne maintenant bien, mais pour éviter que ce code exécute lorsque le jeu n'est pas démarré, nous pouvons l' intégrer dans une fonction. Créez donc une fonction appelée GameTimer, mettez-la à l'intérieur et cette fonction peut maintenant être appelée au début du jeu. Alors, accédez à notre fonction de début de jeu , appelez notre GameTimer. Toujours dans cette fonction, nous pouvons transmettre un message à l'utilisateur. Donc, ce que nous allons faire, c'est que si nous regardons ces messages, nous allons envoyer un message pour dire : « Chef, nos premières commandes arrivent dès le début du jeu. » Nous utilisons SetTimeout, puis effacons cela après un certain nombre de secondes. Le message n'est donc pas toujours présent. Pour commencer tout en bas, nous allons saisir la section avec le sélecteur de requêtes. Voyons ce qu'est le sélecteur de cette partie dans la zone de message et nous avons ce p avec l'ID du message. Il s'agit d'un ID, alors utilisez un hachage, sélectionnez le contenu InnerText. Mon message va être : « Chef, nos premières commandes arrivent. » Ensuite, juste après, nous allons exécuter une fonction au bout trois secondes pour supprimer ce message de l'écran. Une fois de plus, nous pouvons utiliser SetTimeout. Comme nous l'avons déjà appris, SetTimeout et SetInterval peuvent appeler une fonction par son nom ou transmettre directement une fonction. Nous pouvons copier cette ligne de code, la coller dans. En fait, juste avant de faire cela, nous allons retirer ces crochets. Ce paramètre doit être défini sur égal car InnerText est une propriété plutôt qu'une méthode. Il en va de même pour notre deuxième. Définissons celle-ci comme une chaîne vide , puis juste après nos crochets ou les accolades, nous pouvons ajouter le délai de 3000 millisecondes. Rafraîchissez, cliquez sur « Démarrer » et notre message est maintenant placé dans la zone des messages, et trois secondes plus tard, il a été supprimé. Bien. Il s'agit donc d'une introduction aux minuteurs JavaScript utilisant SetInterval et SetTimeout. Vous pouvez voir à quel point il peut être utile dans des projets comme celui-ci. Nous avons également d'autres minuteurs à ajouter très bientôt. Mais ensuite, nous examinerons comment effacer ces minuteurs lorsqu'ils ne sont plus nécessaires. 37. Minuterie de compensation: Nous avons maintenant couvert ces deux minuteurs qui étaient SetTimeout et SetInterval de ces méthodes. Vous avez également un compte clair partie 2 de ClearTimeOut et ClearInterval. Ces méthodes claires arrêteront les minuteurs lorsque nous n'en avons plus besoin, ce qui est utile lorsque le jeu est terminé. Nous pouvons arrêter des choses comme le compte à rebours, afin de pouvoir redémarrer en cas de besoin. Ne pas utiliser inutilement les ressources du navigateur. Pour pouvoir effacer une minuterie, nous devons d'abord stocker la minuterie d'origine dans une variable. Tout d'abord, nous aurons notre OrderStimer, qui contient notre SetInterval. Nous y faisons référence dans une variable appelée OrderTimerRef, qui est égale à une chaîne vide. Maintenant, pour cette fonction suivante, nous avons le CountDownTimer, et à l'intérieur, il ne contient pas de délai d'expiration directement. Mais si nous y jetons d'abord un coup d'œil, celui-ci est appelé en utilisant SetInterval. Nous allons placer disponible juste au-dessus de cela. Celui-ci est le CountDownTimerRef. Également une chaîne vide. dernier est le GameTimerRef. Remarquez ici comment nous avons déclaré ces variables laissées en dehors de chaque fonction. En effet, si nous les déclarons dans la fonction, nous ne pourrons plus y accéder plus tard dans d'autres parties de notre code. Nous devrons y accéder pour dégager les minuteurs. Nous aborderons cette question plus en détail dans une section ultérieure. Ce premier sera égal à notre SetInterval. La référence du minuteur de jeu est égale à notre SetTimeout. Sachez également que celui-ci du milieu, le CountDownTimerRef, ne contient pas directement notre délai d'attente. Ce que nous pouvons faire, c'est passer à notre fonction, qui est ce StartOfGame, et la configurer là. Donc, cette fonction StartOfGame. Définissez CountDownTimeRef comme égal à SetInterval. Ils sont maintenant stockés dans des variables. Juste avant d'éclaircir cela, nous devons d'abord prouver qu'ils sont en cours d'exécution. journal de la console peut nous aider avec cela dans notre fonction GenerateNewOrder. Fonction GenerateNewOrder, placer dans un journal de console. En fait, c'est très bien à l'intérieur d'ici, comme l'ordre. [inaudible] le navigateur et actualisez. Commencez le jeu. Notre minuteur commence à compter à rebours. Nous voyons que notre message a été supprimé au bout de trois secondes. Nos commandes continuent d'arriver, ainsi que notre journal de console ici également. Mais vous remarquerez que si nous cliquons sur « Fin », arrêtez notre jeu, notre minuteur compte à rebours, nos commandes continuent d'arriver. Pour résoudre ce problème, nous pouvons effacer tous ces minuteurs lorsque nous appelons la fonction EndFGame. Jetez un coup d'œil à cela, puis à l'intérieur, nous appelons la méthode ClearInterval, analysant dans notre OrderTimerRef. Le second est également un intervalle, pourquoi nous utilisons ClearInterval. Il s'agit du compte à rebours Ref. Pour le troisième, notre minuteur de jeu était un délai d'attente. Nous utilisons donc ClearTimeOut pour celui-ci. Essayez encore une fois. Actualisez. Commence notre jeu. Voyez le compte à rebours, nous voyons les ordres. Cliquez sur le bouton « Fin ». Tout a maintenant été arrêté. Si nous cliquons à nouveau sur le bouton « Démarrer », tout se poursuit là où nous nous sommes arrêtés. Nous voyons que le minuteur continue à partir de l'endroit où il a été mis en pause, et les commandes continuent également d'arriver là où elles se sont arrêtées. Mais c'est très bien, nous allons faire quelques travaux de nettoyage très bientôt pour résoudre ces problèmes. L'essentiel ici, c'est que nos minuteurs peuvent maintenant être arrêtés, alors qu'ils ne sont plus nécessaires. 38. Introduction À La Date Du Javascript: De nombreuses applications et sites Web nécessitent de connaître la date actuelle. Nous pouvons suivre la date d'inscription d'un utilisateur, l'heure entre deux événements et bien plus encore, mais ce code JavaScript contient des objets intégrés qui peuvent nous aider. Pour commencer, nous pouvons appeler la date en tant que fonction, comme ceci, avec les crochets. Stockez-le ensuite à l'intérieur d'une variable, cette date égale à notre fonction de date. Essayons ensuite avec un journal de console. Placez la variable de date et voyez ce qui se passe. Rafraîchir et entrer dans la console, qui retournera ensuite la date actuelle et l'heure sous forme de chaîne, tout comme la fonction constructeur, que nous avons examinée plus tôt lors de la création d'un comme la fonction constructeur, que nous avons examinée plus tôt lors de la création d' nouveau objets que j'ai placés dans le nouveau mot-clé. Avec la nouvelle date, nous pouvons également transmettre certaines valeurs pour créer une date différente. Passez entre parenthèses pour pouvoir passer dans l'année, le numéro d'index du mois en cours, le jour, les heures, les minutes, les secondes et les millisecondes. Nous plaçons n'importe quelle année que nous voulons, puis l'indice du mois, qui commence également à zéro. janvier est nul et le 11 décembre. Ensuite, la date. Enregistrez et actualisez-le à l'intérieur de la console. Cela reflète maintenant une date que nous venons de placer. Cela signifie que cette fonction constructeur nous donne la possibilité d'obtenir la date actuelle ou de définir n'importe quelle date que nous voulons, comme ceci. Il peut être difficile de travailler avec des valeurs de date comme celle-ci. Si nous voulons comparer deux dates différentes, ce que nous devrons peut-être faire est de prendre la chaîne actuelle comme nous l'avons dans la console, diviser notre chaîne, puis comparer chaque pièce. Comme vous pouvez l'imaginer, ce n' est pas une tâche facile. Un autre format de date consiste à utiliser une méthode appelée maintenant. Nous pouvons déplacer le contenu à partir de la date. Avec le nouveau mot-clé, appelez-le maintenant méthode. Essayons cela et voyons ce qui se passe dans la console. Cela nous donne un numéro étrange. Cela peut paraître un peu étrange, mais c'est un nombre en millisecondes depuis le 1er janvier 1970 UTC. Si nous continuons de nous rafraîchir, chaque fois que nous le faisons, ce nombre continuera d'augmenter. Bien que ce n'est toujours pas idéal, il peut s'agir d'un moyen plus simple de comparer les dates ou les heures. Par exemple, lorsqu'un utilisateur s' inscrit à notre site Web, nous pouvons utiliser Date.Now pour stocker l' heure actuelle en millisecondes. Ensuite, lors de futures visites, nous pourrons connaître l' heure actuelle et comparer la différence entre ces deux chiffres. Les millisecondes doivent également être converties en secondes, minutes et jours, selon ce que vous devez en faire. Nous allons examiner cela plus en détail dans une vidéo à venir. Le prototype disponible sur les dates est une gamme de méthodes que nous pouvons également utiliser pour définir la date. Jetons un coup d'œil à ces derniers dans la console. Nous pourrions déplacer la méthode maintenant. Accédez à l'objet prototype, actualisez-le et ouvrez-le. Comme nous venons de le voir, nous avons la fonction de constructeur de date et beaucoup plus de cas d'utilisation, comme obtenir les heures, obtenir la date complète, obtenir le jour. Nous avons également les fixateurs, afin que nous puissions définir la date actuelle, nous pouvons définir l'heure. Je ne vais pas passer en revue tous ces éléments car ils sont très spécifiques à différents cas d'utilisation, mais cela fonctionne comme n' importe quelle autre méthode. Utilisez-les car les méthodes se trouvent sur des objets. Nous devons à nouveau utiliser le nouveau mot-clé pour créer un nouvel objet date. Supprimons cela, placons entre crochets, ajoutons le nouveau mot-clé. L'une des méthodes que nous venons de voir dans la console était GetMonth. Nous avons cela sur notre variable de date. Voyons ce qui est retourné à l'intérieur de la console. Cela renvoie la date du mois en cours. Encore une fois, cela commence par zéro, donc janvier est zéro, et février est le numéro 1, etc. GetDay renvoie la date de la semaine en cours. Essayons ça. GetDay. C'est ce que vous avez déjà vu avec le prototype. Nous avons également accès à certaines méthodes qui définissent également la date. Nous aurons peut-être un événement que nous aurons déjà enregistré et que nous voudrions peut-être changer le mois ou l'année, ce que nous pourrions faire comme ça. Ici, nous avons la date actuelle de base. Enlevons simplement ça. Ensuite, nous allons changer le mois en cours par tout ce que vous voulez. Stockez-nous cela à l'intérieur d' une constante appelée date de mise à jour. Prenez notre variable de date actuelle, accédez à l'une de nos méthodes définies telles que SetMonth, placez un numéro d'index 11, qui sera en décembre. Ensuite, un deuxième journal de console juste dessous, encore une fois avec la date. Nous devrions pouvoir voir la version mise à jour avec notre deuxième journal. Rafraîchissez ça. Nous commençons par mars, puis nous fixons notre mois en décembre. Il s'agit d'une introduction basique à la date JavaScript. Ensuite, nous utiliserons cette date et cette heure à l'intérieur de notre projet, garderons une trace de la durée des pizzas au four. 39. Régler Le Temps De Cuisson: Ce que nous avons appris dans la vidéo précédente, la tâche consiste maintenant à définir le temps de cuisson de la pizza à l'aide de la date JavaScript. Nous allons déplacer les exemples de la vidéo précédente. Maintenant, dans la fonction Ajouter au four, nous avons créé une date d'espace réservé très tôt. Jetons un coup d'œil à cette fonction, au four. Ici, nous définissons l'heure ajoutée pour être une chaîne. Cela peut désormais être mis à jour pour utiliser dynamiquement la date actuelle. Comme nous l'avons vu, nous accédons à l'objet date et à la méthode appelée maintenant. N'oubliez pas que date.now sera en millisecondes, sorte que nous pouvons le retirer du four après qu' un certain nombre de millisecondes se soient écoulées. Mais avant de le faire, nous devons définir le temps de cuisson que nous voulons appliquer. Cette variable est parfaite, alors passez au reste des variables. Configurez une constante appelée temps de cuisson, qui est égale à 20 secondes. Maintenant, tout en bas de notre script, nous pouvons placer ici une nouvelle fonction qui va boucler toutes les pizzas à l'intérieur du four une fois par seconde. Nous retirerons ensuite toutes les pizzas qui étaient en cours de cuisson. Fonction, vérifiez le four. Pour vérifier le four une fois par seconde, nous pouvons utiliser un intervalle défini. Si vous le souhaitez, vous pouvez créer une fonction autonome distincte ou nous pouvons la placer directement dans la fonction. Cette fonction va passer en boucle sur tous les éléments à l'intérieur de notre réseau de fours. Ce réseau de four est stocké dans la variable du four, boucle en utilisant pour chacun d'eux. Encore une fois, pour chacun d'entre eux, prend une fonction qui a accès à chacune de nos pizzas individuelles au four. À la fin de nos crochets d' intervalle définis, nous pouvons placer un délai entre chacun de nos appels de fonction, qui sera à chaque seconde. Pour chaque article ou chaque pizza à l'intérieur de notre boucle, face à une déclaration if. Cette instruction if va vérifier le décalage horaire toutes les secondes. On peut dire si la date, mais maintenant, qui est l' heure actuelle en millisecondes , déduisez le temps de cuisson. N'oubliez pas que le temps de cuisson est exprimé en millisecondes. Convertissons cela, multiplions cela par 1000. Dans son calcul actuel nous donnera le temps d'il y a 20 secondes. Nous pouvons vérifier si cette valeur est supérieure à la propriété pizza.time ajoutée actuelle. Si c'est le cas, cela fait plus de 20 secondes et nous devrons le retirer du four. Accédez à notre four. La méthode shift, qui va supprimer le 1er élément de notre tableau. Nous devons également accéder au 1er article car rappelez-vous que le 1er article sera au four le plus longtemps. Ce sera toujours le prochain à supprimer. Après avoir retiré cet élément de la baie, nous devrons réinitialiser contenu du four avec la fonction, qui est l'affichage d'un élément, ce qui permettra de redessiner efficacement le four. Nous pouvons également suivre ici le nombre de pizzas que nous avons cuisinées, en augmentant une variable. La variable des pizzas complètes, et augmente avec plus plus. Nous n'avons pas encore créé cela, donc nous sautons au sommet avec le reste de nos variables. Laissez les pizzas complétées commencer à zéro, et cette section sera utile plus tard lorsque nous ajouterons le début de notre jeu. Enfin, nous avons créé cette fonction, mais nous ne l'avons pas encore appelée. Ce que nous devons faire, c'est appeler notre fonction de four à contrôle lorsque nous commençons le jeu. sautant à la fonction de début de jeu, place en bas. Essayons ça. Rafraîchissez la page. Début du jeu. Cliquez sur n'importe quelle commande, ajoutez-le au four, ajoutez-en quelques autres. Donnez 20 secondes, et notre pizza devrait alors commencer à être retirée. Le premier est parti, ou le deuxième juste après. Suivi de nos deux dernières pizzas. 40. Introduction À La Toile & Co-Ordinates: Nous pouvons toujours rester dans notre projet pour celui-ci et jeter un coup d'œil à quelques exemples en bas. Cette vidéo abordera certains éléments de base de la toile. Ensuite, dans le reste de cette section, nous dessinerons nos pizzas et montrerons les différentes garnitures au fur et à mesure que nous les ajouterons. abord, abordons une partie essentielle et c'est pour comprendre l'utilisation de coordonnées. Il existe un élément HTML appelé Canvas qui nous permet d'y dessiner en utilisant JavaScript. Nous définissons la largeur et la hauteur du canevas, puis nous pouvons parcourir cette grille de type pixel à l'aide de coordonnées. L'axe des X s'étend de gauche à droite, et l'axe Y va de haut en bas. En utilisant ces positions x et y, nous pouvons nous déplacer vers n'importe quel emplacement de la toile et x,0, y,0 est le coin supérieur gauche. Nous pouvons ensuite traverser ou descendre n'importe quel montant que nous voulons, comme nous le voyons dans cet exemple, où x est égal à 10 et y est la valeur de 3. Nous verrons bientôt comment la compréhension ces coordonnées est essentielle pour dessiner sur la toile. Revenons à notre projet et dans notre fichier HTML. Nous avons déjà configuré des éléments de canevas. Si nous jetons un coup d'œil à notre coin cuisine, ayez ces éléments de toile avec l'ID de la zone pizza. Il a une largeur de 250 et une hauteur de 250 pixels. Plongez dans notre script et passons au bas de notre script. Créez une constante appelée canevas pour le stocker à l'intérieur de. Comme tous les autres éléments, nous pouvons utiliser quelque chose comme document.queryselector. Comme nous venons de le voir, nous pouvons transmettre une pièce d'identité. Celui-ci est égal à pizza_area. Ensuite, nous pouvons appeler une méthode appelée GetContext. Prenez notre variable, appelez la méthode GetContext. Passage d'une chaîne de 2D. Dans ce contexte, il s'agit d'un objet contenant des propriétés et des méthodes que nous pouvons utiliser pour dessiner sur le canevas. Nous n'aurons besoin que des fonctionnalités 2D pour ces exemples. Installez-le à l'intérieur d'une variable ou d'une constante, généralement appelée CTX, mais cela peut être nommé tout ce que vous voulez. Lorsque vous utilisez le canevas, deux concepts importants à comprendre sont le contour et le remplissage. Le trait est comme un trait de crayon ou un contour et le remplissage, tout comme il le sonne, remplit une forme d'une couleur unie. Pour dessiner un rectangle, nous avons StrokeRect et également la méthode FillRect. Jetons un coup d'œil à StrokeRect pour commencer. Bien que les entités dessinées soient disponibles dans le contexte. Pour dessiner le contour d'un rectangle, nous allons utiliser StrokeRect, puis nous transmettons quatre valeurs. Les deux premiers, comme nous l'avons vu dans les diapositives, sont les emplacements x et y du coin supérieur gauche de notre rectangle. Si nous voulons que cela commence en haut à gauche, nous le définissons à 0,0. Ensuite, nous avons la largeur et la hauteur du rectangle que vous souhaitez dessiner. Il peut s'agir d'un rectangle ou de dessiner un carré si nous transmettons des valeurs égales. Jetons un coup d'œil à ça. Nous allons le dire et sauter dans le navigateur, le rafraîchir et nous verrons le contour de notre carré 200 pixels par 200 pixels. En plus de transmettre des valeurs codées en dur comme ceci. Nous pouvons également accéder à notre variable canevas par le haut. Transmettez-le et accédez à la propriété width. Nous avons déjà mis ces deux éléments à l'intérieur de nos éléments. Nous avons 250 pixels pour ces deux valeurs. Nous pouvons les insérer sous forme de variables. Essayez-le, rafraîchissez-le et comme il s'agit de 250 pixels, c'est maintenant un peu plus grand que ce que nous avions initialement. L'utilisation de ces variables est vraiment utile et nous pouvons également fournir des calculs en fonction de leur taille. Par exemple, si nous voulons que ce soit seulement la moitié de la largeur de la toile, nous pourrions le diviser par 2. Si vous voulez qu'il s'agisse d'un rectangle solide ou d'un carré solide, nous pouvons changer le trait en FillRect. Cela remplira la couleur noire par défaut. Le noir standard n'a généralement pas fière allure, et nous pouvons également changer cette couleur. allons dupliquer nos rectangles et nous ferons du premier un trait, et le second, nous allons simplement rendre cela un peu différent. Allons-y pour 100 par 100. Places, 20 pixels en haut à gauche du canevas. Nous avons maintenant un trait et un rectangle rempli. Nous pouvons fournir des couleurs différentes pour chacune d' elles, en commençant par le trait. Encore une fois, accédez au contexte. Puisque nous utilisons un trait et passons dans le StrokeStyle. Définissez cette valeur égale à une valeur de type CSS, telle que verte. Je vais voir que la couleur verte a pris effet. Juste au-dessus de notre rectangle rempli. Nous pouvons également accéder au contexte et fournir la propriété appelée FillStyle pour affecter ce deuxième carré. C'est égal à n'importe quelle autre couleur. Enregistrez cela et rafraîchissez-le. C'est ainsi que nous pouvons définir différentes couleurs pour chacune de nos formes. Cette API dispose également d'une méthode d'arc pour aider à dessiner des arcs et des cercles. Comme toujours, nous y accédons dans le contexte ctx.arc. Contrairement aux carrés que nous venons de dessiner tous les rectangles où l'emplacement de départ est basé en haut à gauche, avec un cercle, cela est basé sur le centre. Nous pouvons accéder à la largeur du canevas pour l'axe X. Divisez-le par 2 à des endroits situés au milieu de la toile et également la même pour la hauteur. C'est le point de départ de notre cercle, mais nous devons encore fournir des informations supplémentaires. Le prochain est le rayon de notre cercle. Si vous n'êtes pas familier avec les rayons, il s'agit essentiellement de la moitié de la largeur du cercle. La valeur du point central vers l'extérieur. Allons-y pour 100. Ensuite, les deux dernières valeurs au début et à l'angle de fin. Ces valeurs sont exprimées en radians plutôt qu'en degrés. Pour commencer, nous allons ajouter un angle de départ de zéro, puis l'angle de fin, une valeur de deux radians. Enregistrons cela et voyons ce qui se passe à l'intérieur du navigateur. Si nous le rechargeons, nous ne voyons aucun dessin sur la toile. C'est parce que nous devons dire si nous voulons qu'il s'agisse d'une ligne de trait ou d'un remplissage solide comme nous l'avons fait ci-dessus. Juste après, accédez au contexte. Tenez la méthode de remplissage, rafraîchissez-vous, en nous laissant une belle courbe ressemblant à un sourire. Ou nous pouvons simplement faire la ligne avec un trait avec ctx.stroke. Vous pouvez également voir que maintenant nous faisons la ligne de trait. Cela héritera également du style de trait vert. Pour faire un cercle complet en radians, nous devons multiplier cette valeur de 2 par math.pie qui est l' équivalent de 360 degrés. Il y a notre cercle vert et comme vous pouvez le constater maintenant, nous avons un cercle complet. Il est également placé au centre de la toile en raison de nos emplacements x et y. Juste avant de dessiner cela sur le canevas à l'aide d'un trait ou d'un remplissage, nous pouvons également définir des propriétés supplémentaires telles que la largeur de la ligne et la couleur. Commençons par la propriété largeur de ligne, que nous allons définir sur cinq pixels. Le StrokeStyle est également disponible dans le contexte. Il s'agit de la même valeur que celle que nous avons utilisée ci-dessus pour définir cette valeur en vert. Mais maintenant, nous allons remplacer cette couleur pour qu'elle soit différente. Avant, j'ai mentionné qu'il s'agit d'une propriété semblable à CSS En plus d'utiliser simplement les mots comme vert ou rose vif, nous pouvons également passer des choses comme la valeur x et définir cette couleur comme une couleur différente. Je vais aller pour F5cf89. Essayez-le, en nous laissant une ligne de 5 pixels d' une couleur différente. En plus de ces méthodes pour dessiner des formes prédéfinies, nous pouvons également dessiner des lignes à main levée comme un outil crayon si vous avez utilisé une application de dessin par le passé. Pour le démontrer, nous pouvons reproduire ce rectangle extérieur vert ou ce carré et dessiner cette main libre. Nous pouvons commenter le premier rectangle, qui est ces deux lignes ici. Dessinez cela nous-mêmes en utilisant des coordonnées. Ils sont tous disponibles dans le contexte. La première méthode va être MoveTo. MoveTo est essentiellement comme ramasser notre crayon, le déplacer vers une certaine partie du papier dont nous voulons commencer. Cela déplacera nos coordonnées sans tracer de ligne. Tout comme notre carré d'origine, cela commencera en haut à gauche de la toile. Pour dessiner, nous utilisons la méthode appelée LineTo, qui va tracer une ligne de crayon de notre emplacement de départ à emplacement que nous avons placé à l'intérieur d'ici. Tout comme ci-dessus, nous pouvons placer des valeurs codées en dur comme celle-ci ou accéder aux variables telles que canvas.width et canvas.height. Faites en sorte que cela soit une largeur totale de la toile à traverser , accédez au canvas.width. Puisque nous ne voulons pas descendre sur l'axe des X, nous pouvons laisser cette valeur à zéro. Rafraîchissons. Nous ne voyons pas encore la ligne à l'écran car nous devons appeler ctx.stroke pour dessiner cela sur le canevas. C'est notre première partie de notre place. La prochaine partie consiste à descendre et à dessiner cette ligne verticale à partir de notre position actuelle, accéder à ctx, à la LineTo. Nous voulons toujours rester sur le côté droit auquel nous pouvons accéder avec une largeur de 250 ou, encore une fois, en utilisant la propriété canvas.widthproperty. Passez-le, canvas.width. Ensuite, pour descendre au bas de la toile, on peut y accéder avec toile.height. Dupliquez ceci. Nous resterons à la même hauteur de 250. Mais maintenant, nous devons passer à gauche, c' est-à-dire la valeur X de zéro. Enregistrer, rafraîchir. Encore une fois à faire. Mais maintenant, nous devons nous déplacer vers le coin supérieur gauche, soit la position de 0,0. Bien. Ceci est maintenant au carré sur le canevas, nous pouvons également ajouter une méthode au tout début, maintenir le chemin de début, également disponible dans le contexte. Nous allons le placer au tout début juste avant de commencer à dessiner notre forme. Cela est utile car il efface tous les chemins existants d'en haut, de sorte que nous n'avons aucun conflit. Cela signifie également que la position de départ est mémorisée. Nous pouvons utiliser un chemin fermé pour revenir à cet endroit à n'importe quel moment. Pour voir cela, nous pouvons supprimer notre dernière ligne, rafraîchir. Plutôt que de dessiner cela manuellement, nous pouvons maintenant revenir à notre emplacement de départ avec ctx.closepath. Il devrait fonctionner exactement comme avant, revenant à l'emplacement d'origine. En plus de créer des carrés, des rectangles, des cercles et des dessins à main levée, nous pouvons également écrire du texte sur le canevas. abord, nous pouvons définir la police que nous voulons utiliser, ctx.font, et la définir comme étant égale à une chaîne. La chaîne peut prendre en compte la taille des polices ainsi que la famille de polices. La méthode pour dessiner notre texte est CTX.FillText. Comme vous l'avez probablement deviné, il existe également une méthode StrokeText correspondante. La première valeur est une chaîne de notre texte, je dis juste Canvas API. Ensuite, un emplacement x et y, qui est la ligne de base de notre texte, donc 20 et 200, Enregistrer et actualiser. Il y a notre texte et il est également rose car il héritera la propriété FillStyle précédente, qui aura d'en haut. Canvas peut également être utilisé pour beaucoup d'autres choses, ainsi que d'autres méthodes que nous pouvons explorer et nous pouvons même ajouter des images au canevas que nous pouvons éditer en accédant aux pixels. Dans les prochaines vidéos, nous allons utiliser une toile pour créer les pizzas et afficher également les garnitures que nous avons ajoutées dans la cuisine. 41. Configuration Des Ingrédients: En haut de la section script, nous avons un tableau d'ingrédients contenant quelques ingrédients dont nous avons besoin pour fabriquer des pizzas. Ces cordes correspondent toutes aux ingrédients nécessaires dans les étapes requises d'en haut. Donc, si nous allons à la baie de pizzas, nous voyons le tableau des étapes requises. Il contient les cordes qui correspondent à nos ingrédients. Si vous modifiez l'une de ces pizzas pour utiliser différents ingrédients, assurez-vous que la gamme d' ingrédients est également mise à jour pour correspondre. Ce sera très important bientôt. Ce que nous allons faire dans cette vidéo, c'est de parcourir tous ces ingrédients, puis de les afficher sous forme de boutons dans la cuisine. Une fois qu'une pizza a été sélectionnée, le chef peut suivre cette méthode et préparer la pizza à l'aide de ces boutons. En utilisant également la toile, chaque bouton attirera les ingrédients sur la pizza. Défilons maintenant vers le bas de notre projet et nettoyons les exemples de la vidéo précédente. Nous n'avons donc besoin de rien de tel que le texte. Nous n'avons pas besoin de la section à main levée. Nous n'avons pas besoin du cercle. Vous n'avez besoin d'aucun de ces carrés ou rectangles. Mais nous devons garder l' accès à notre canevas, ainsi qu'au contexte 2D. Après cela, créez une nouvelle fonction appelée ListIngredients, qui parcourt tous les tableaux d' ingrédients d'en haut, et l'affichera dans le navigateur. Pour accéder à notre gamme d'ingrédients. Puisqu'il s'agit d'un tableau, nous pouvons utiliser la méthode FoReach, qui exécute une fonction pour chacune de ces valeurs. Cette fonction va également prendre en compte un ingrédient correspondant à chaque valeur de tableau. Ensuite, nous devons créer un élément de bouton pour chacun de ces ingrédients. que nous puissions en créer un manuellement ou nous souvenir, nous avons également accès à notre fonction d'assistance appelée BuildElement. Cela prend deux choses. Le premier est le type d' éléments que nous voulons créer, un bouton. Le second est le contenu texte à afficher. Ce sont les ingrédients de notre gamme, stockez-les à l'intérieur d'une constante appelée IngredientElement. Ensuite, pour notre style, nous pouvons également ajouter une classe appelée ingrédient pour accéder à nos constantes et ajouter le nom de classe de l'ingrédient. La dernière étape consiste à ajouter ceci au DOM, Documents.QuerySelector. Le sélecteur de requêtes dont nous avons besoin. Jetons un coup d'œil à la page d'index. Nous avons besoin de cette plongée avec des ingrédients. À l'intérieur, nous allons placer tout le contenu de notre tableau. Transmettez-le sous la forme d'une chaîne. Nous utilisons AppendChild passant dans notre constante d'en haut. Nous pourrions donc appeler cette nouvelle fonction immédiatement. Mais il serait probablement logique d' ajouter cela à la fonction GameStart, jeter un coup d'œil au début du jeu. À l'intérieur d'ici, nous l' appellerons par le bas. Sauvez, puis essayons ça. Rafraîchir Cliquez sur le bouton Démarrer, et tous nos ingrédients sont maintenant placés dans la cuisine en bas. Pour l'étape suivante, nous devons pouvoir cliquer sur n'importe lequel de ces ingrédients, puis faire quelque chose. Ce truc va être une fonction permettant de suivre les étapes que nous avons franchies jusqu'au fond. Créez une nouvelle fonction appelée StepComplete. Ensuite, une deuxième fonction va dessiner les ingrédients sur la toile. Fonction, faites de la pizza. Cette fonction StepComplete doit être appelée lorsque l'utilisateur clique sur l'un de nos ingrédients juste en haut. Pour cela, juste avant de l'ajouter au DOM, nous pouvons ajouter un écouteur d'événements en accédant à notre IngredienteElements.Add Event Lisener. Cela fait maintenant un clic, ce qui déclenchera une fonction appelée StepComplete. Puisqu'il s'agit d'un événement de clic, il va également prendre en compte les informations d'événement que nous pouvons stocker dans la variable. Cette fonction StepComplete e peut désormais être utilisée pour désactiver le bouton une fois qu'il est cliqué dessus, et également suivre les étapes que nous avons prises. étape 1 va donc désactiver le bouton lorsque l'utilisateur clique dessus. On ne peut donc pas cliquer deux fois sur nous. Je vais le faire en accédant à nos éléments avec e.target. Nous pouvons définir un attribut. L'attribut est désactivé avec la valeur true. Ensuite, étape 2, nous devons accéder au contenu texte réel de notre bouton. Nous connaîtrons donc le nom de l' ingrédient. Par exemple, nous devons saisir le texte de la pâte à rouleaux, la sauce à pizza ou le fromage, etc. Stockez-le à l'intérieur d'une constante appelée nom d'étape, accédez à nos éléments avec e.target. Ensuite, le contenu du texte intérieur. Avant d'aller plus loin, vérifions si cela fonctionne. Placez-le dans un journal de console. Nous avons le nom de l'étape. Sur le navigateur et dans la console. Commencez le jeu. Cliquez sur l'un de nos boutons, comme le fromage, la sauce à pizza. Ces boutons sont également désactivés. Gardez une trace des étapes que nous avons prises, de tous les boutons sur lesquels nous avons cliqué. Nous devons stocker cela à l'intérieur d' une variable contenant un tableau. Sautez donc à nos variables. En bas, laissez les étapes terminées être égales à un tableau vide. Vers le bas. Nous pouvons maintenant supprimer le journal de la console, accéder à cette variable d'étapes terminées, accéder à la méthode push, puis envoyer une nouvelle valeur vers ce tableau, qui est notre nom d'étape. La dernière chose est d'appeler notre fonction « faire des pizzas pour dessiner un nouvel ingrédient sur la toile. Bien sûr, il ne fait rien pour l'instant, mais nous pouvons placer cela à l'intérieur de la fonction. Alors, faites de la pizza. Insérez l' ingrédient de pizza du nom de l'étape. Maintenant que nous transmettons un ingrédient, nous pouvons mettre cela à l'intérieur de notre fonction et vérifier si cela fonctionne avec un journal de console. Supprimons tout autre journal de console que nous avons. Nous avons donc l'emballage de commande, le four, le texte de commande. Puis rafraîchissez-vous, redémarrez et cliquez sur l'un de ces ingrédients. On y va. Voici nos nouveaux ingrédients de Make Pizza Console Log. Cela nous laisse maintenant prêts à dessiner certains ingrédients sur la toile. Par exemple, si la fonction Make Pizza reçoit de la sauce à pizza, elle va dessiner de la sauce rouge sur notre pizza. C'est ce que nous allons passer à la prochaine étape. 42. Ingrédients circulaires de dessin: Au bas de notre script, nous avons actuellement cette fonction MakePizza et on l'appelle chaque fois que j'ajoute de nouveaux ingrédients. Il a également dépassé ces ingrédients. Ce que j'aimerais faire maintenant, c'est créer une instruction switch pour gérer ingrédient sur lequel on a cliqué. Nous pouvons ensuite dessiner cet ingrédient sur notre pizza près de la toile. Comme nous avons différentes options d' ingrédients, comme nous venons de le mentionner, nous allons le remplacer par une déclaration de commutateur pour traiter chacun de nos cas. Passer l'ingrédient sur lequel on clique, puis nous créerons un dossier pour chacun d'eux. le premier cas, il s' agit d'une chaîne et si nous faisons défiler vers le haut, nous avons nos ingrédients ici et chacun des caisses correspondra à chacune de ces chaînes. En bas, le premier en majuscules était pour ROLL DOGH. Nous nous occuperons de ce qu'il faut faire dans un instant, mais pour l'instant, nous allons simplement en sortir et nous allons simplement copier chacun de nos ingrédients. Le deuxième cas, c' était la SAUCE PIZZA. Le troisième pour CHEESE, puis PEPPERONI. Le prochain était pour JAMBON et ANANAS. Je vais juste laisser cela comme un ensemble d'ingrédients pour l' instant et vous pouvez ajouter tout le reste si vous préférez, mais je vais passer à autre chose parce que ce sera très long sinon. Désormais, à l'intérieur de chacun de ces cas, nous pouvons configurer certaines fonctions de dessin de toile pour représenter les ingrédients particuliers. Pour la pâte, pour la sauce à pizza et aussi pour le fromage, celles-ci peuvent être raisonnablement simples, il suffit de dessiner quelques cercles. Nous commencerons par la pâte à rouler. Nous savons d'après les vidéos précédentes que pour dessiner un cercle sur la toile, nous utilisons ctx.arc, puis nous fournissons l'emplacement de départ qui sera au centre. canvas.width divisée par deux et également la même pour la hauteur. Il s'agit de la position de départ x et y. Le prochain sera le rayon. Allons-y pour 100 pixels. Comme précédemment, pour créer un cercle complet en radians, la position de départ est zéro, puis la position finale est deux multipliée par la valeur de Math.Pi. Rappelez-vous que d'après les vidéos précédentes lorsque nous avons utilisé ctx.arc, il n'a pas dessiné quelque chose sur le canevas. Ce que nous devons faire, c'est soit utiliser ctx.stroke ou ctx.fill pour dessiner cela, mais en fait, nous allons utiliser les deux. La raison en est que nous utiliserons la méthode de remplissage pour dessiner la base de pizza complète sur la toile. Nous allons également faire une méthode de contour supplémentaire, qui va également ajouter un cercle extérieur de 15 pixels à cette pâte. La raison en est que nous allons définir une couleur légèrement différente pour nous donner l'effet de la croûte extérieure. Tout d'abord, ce que nous allons faire, c'est que nous allons nous concentrer sur la croûte et nous allons le faire avec CTX.LineWidth, définir cette valeur sur une valeur de 15 pixels, puis nous allons définir la couleur avec StrokeStyle passant dans une chaîne. qui sera une valeur hexadécimale de f5cf89 et pour finalement dessiner cela, nous utilisons ctx.stroke. Cela devrait maintenant nous donner un aperçu basé sur notre arc. Essayons cela, rafraîchissons, redémarrons, redémarrons, sélectionnons l'une de nos pizzas, la pâte à rouler, et nous voyons maintenant le cercle extérieur de notre pizza. Comme mentionné précédemment, il s'agit de la croûte, il faut donc ajouter la méthode pour remplir également la partie interne du cercle, mais une couleur légèrement plus claire juste après le trait. Mettez la couleur de notre méthode de remplissage et celle-ci sera f5d69d, puis remplissez le cercle avec cette couleur. Essayons ça. Revenez et recommencez, sélectionnez l'une de nos pizzas. Rouler la pâte. Nous ne devrions pas avoir cette couleur noire, alors jetons un coup d'œil. Ce FillStyle a juste besoin du hachage juste avant. Commencez. Sélectionnez l'une de nos pizzas, roulez la pâte, et c'est maintenant beaucoup mieux. Maintenant, jusqu'à notre sauce à pizza, qui sera également un cercle mais légèrement plus petite que notre pâte. Nous n'avons aucun conflit d'en haut. Nous allons commencer cette section avec CTX.BeginPath. Cela nécessite également un cercle, afin que nous puissions copier la méthode ctx.arc par le haut, qui devra également être au centre de la toile. Nous devons changer la couleur. Cela va être rempli, donc nous allons utiliser FillStyle, et celui-ci sera ed4434, enfin, appelez ctx.fill. Ensuite, nous passons également au fromage, qui reste une fonction de jointure circulaire. Nous copierons toute la section sauce à pizza, collerons dans notre zone de fromage, réduirons le cercle afin que nous puissions toujours voir la sauce autour du bord, mais nous devons également changer le couleur. Celui-ci est f7bc4d. Gardons cela et essayons cela avant d'aller plus loin. Encore une fois, nous pouvons sélectionner n'importe quelle pizza, ananas, pâte à rouler. C'est très bien, comme nous l'avons vu. Ensuite, nous allons essayer la sauce à pizza et tout cela va bien et cela couvre la même section de remplissage que la zone de pâte ci-dessus, mais nous pouvons toujours voir le contour du trait d'en haut. Ensuite, nous aurons le fromage, qui est un cercle légèrement plus petit, sorte qu'il ne couvre pas complètement toute la base de tomate. Bien. Nous allons laisser celui-ci ici pour instant et dans la prochaine vidéo, nous allons jeter un coup d'œil aux prochains ingrédients, qui seront un peu plus complexes que ces cercles. Plutôt que de créer des cercles comme nous le faisons, nous allons impliquer plusieurs pièces à différents endroits. Nous vous verrons dans le prochain, où nous examinerons comment procéder. 43. Dessin de multiples pièces: En sortant de ma version de cette déclaration, j'ai encore le pepperoni, le jambon et les morceaux d' ananas à créer. Comme il s'agit de pièces distinctes, nous allons dessiner de nombreuses formes différentes sur notre toile en forme de pizza. Pour commencer, dans le pepperoni, juste en dessous du boîtier, puisque nous utilisons plusieurs pièces pour ces ingrédients, nous devons créer un éventail de lieux. Const, positions de pepperoni, qui va être un tableau. En fait, il s'agira d'un tableau de tableaux, car il s'agira d'un tableau de valeurs multiples. De plus, chacune de ces valeurs doit avoir un emplacement x et y pour chacune de ces pièces. Le premier, et bien sûr, tous doivent être conservés à l'intérieur des dimensions de la pizza. Mais ce sont tous des nombres aléatoires. Nous pouvons les ajouter et jouer avec eux si vous le souhaitez par la suite, ou vous pouvez les copier avec le mien. Le troisième sera 147 et 57. N'oubliez pas que chacun de ces sous-tableaux sera un nouveau morceau de pepperoni. La quatrième, vous pouvez ajouter autant ou moins que vous le souhaitez, 116, 134, 125, 190, 162, 165, 190, 85, 192, 142, 150, 115, 76, 95. Je veux commencer quelques autres pièces. Allons pour 80, 190, et le dernier, 61 et 135. Assurez-vous que c'est juste avant la clause de rupture et avant de faire autre chose, réfléchissons exactement à ce que nous devons faire ici. Un morceau de pepperoni n'est qu'un petit cercle. Nous savons comment dessiner cela à l'aide de l'arc. Mais la différence devra répéter cet arc pour chacun de ces endroits. C'est ici qu'une boucle peut entrer en jeu. Ce que nous allons faire, c'est que nous allons saisir nos constantes de positions de pepperoni. Ensuite, nous appellerons une boucle pour chaque boucle sur ce tableau. Transmettez une fonction qui prend le nom variable de la pièce. La pièce sera chacun de ces morceaux de pepperoni que nous allons dessiner. Pour ce faire, nous allons commencer par CTX.BeginPath sans aucun chemin existant pouvant être tracé. ctx.arc, dessinez chacun des cercles pour les morceaux de pepperoni. Ensuite, rappelez-vous que cela prend l'emplacement x et y pour le centre du cercle. Puisque ce qui doit être basé sur les emplacements ci-dessus, ce que nous allons faire, c'est d'accéder à notre pièce. La première position d'index de zéro, et pour l'emplacement y, ce sera la paix, puis le numéro d'index d'un. Passe-moi ça. Pièce, accédez au numéro d' index zéro, l'emplacement y est cette paix et le numéro d'index d' un, taille de 10. Créons un cercle comme zéro , puis Math.pi multiplié par 2. Donnons-lui une couleur avec CTX.FillStyle. Juste avant de dessiner ceci, qui est égal à une chaîne, je veux choisir la valeur hexadécimale de BD 3611. Enfin, nous allons dessiner ceci avec ctx.fill pour donner à cela notre couleur de fond solide. Essayons ça. Allez dans le navigateur. Nous devons commencer notre jeu et sélectionner l'une de nos commandes. De plus, la pizza, on roule la pâte, ajoute la source, le fromage. Nous savons que ça marche, après le pepperoni. Il y a tous nos cercles qui sont tous basés sur notre tableau, que nous avons créé à l'intérieur d'ici. Bien. Maintenant, jusqu' au jambon et vous pouvez aussi nous donner un coup de pouce si vous le voulez vous-même, vous vous sentez confiant de le faire. Cela va se baser sur une approche similaire à celle ci-dessus. abord, nous devons créer nos positions de jambon, qui est un tableau qui contient également des sous-tableaux, contiennent maintenant des emplacements x et y. Commençons par les créer et les stocker à l'intérieur d' une constante appelée HamPositions, notre tableau principal. Créez ensuite nos emplacements aléatoires. Le premier, le second de 108, 74, numéro 3, 147, 47, 130, 124. Encore une fois, vous pouvez les rendre complètement aléatoires et les modifier si vous souhaitez, 125, 160. Assurez-vous que tous ces éléments restent dans la zone Pizza Canvas, 159, 145 , 197, 82, 202 , 132, 158 et 90. Nous sommes presque là maintenant, continuons avec les deux derniers, nous allons faire 90, 140 et le dernier de 105 et 135. Tout comme ci-dessus, nous allons les parcourir avec une boucle FoReach. Nous sélectionnerons nos positions de jambon appelées boucle FoReach sur la matrice, qui prend en charge une fonction à chaque pièce. Mais cette fois-ci, plutôt que de créer des cercles à l'aide de la méthode arc, je vais utiliser la méthode FillRect pour les dessiner sous forme de rectangle. abord, nous allons définir une couleur avec CTX.FillStyle et la définir comme égale à une chaîne, qui est f58c8c. Ensuite, CTX.FillRect. Dessinez un rectangle solide sur la toile. Tout comme ci-dessus, cela va prendre les positions x et y, auxquelles nous pouvons accéder comme ceci avec nos positions de tableau x. C'est la pièce et le numéro d' index de zéro, qui correspond à chacune de ces premières valeurs de tableau. Ensuite, la deuxième valeur de tableau de la pièce, ce qui se trouve dans le numéro d' index d'un. N'oubliez pas qu'avec les rectangles, il s'agit de l'emplacement x et y du coin supérieur gauche du rectangle ou du carré Nous devrons également définir la taille, que nous voulons définir sur huit pixels large. , 32 pixels de hauteur. Essayons ça avant d' aller plus loin. C'est pour le jambon. Cliquez dessus et nous avons maintenant beaucoup de morceaux de jambon rose sur pizza. Vous pouvez jouer avec les positions si vous voulez que cela paraisse un peu mieux. Mais je vais passer au prochain, à savoir l'ananas. Pour gagner peu de temps, beaucoup de choses seront similaires à notre position de jambon, alors copions toute cette section, y compris la boucle for-loop. Collez cela juste en dessous de notre étui à ananas. Bien sûr, ce sera la position de l'ananas. Changez-le pour la boucle. Faites ensuite un tour de jeu avec ces valeurs si vous le souhaitez. Pour le FillStyle, nous changerons la couleur de ceux-ci pour qu'ils soient de couleur jaune d'ebe534, les rendront un peu différents en termes de taille, 12 et 18. Créez les cellules dans le démarrage du navigateur. Notre pizza. L'ananas fonctionne également. Comme je l'ai mentionné, il se peut que vous deviez changer position afin que nous n'ayons aucun chevauchement. Une dernière chose avant de terminer cette vidéo, c'est que nous allons également nous assurer que les morceaux d' ananas et de jambon sont placés sur la pizza sous différents angles. Actuellement, cela semble un peu ennuyeux car tout est dans la même direction. Mélangeons un peu cet angle pour chacune de ces pièces. Nous pouvons le faire avec rotation. Cela commence dans la section jambon. Juste avant de dessiner ça avec FillRect. Nous pouvons accéder à rotation, qui est également disponible dans le contexte. Cette valeur de rotation est exprimée en radians et non en degrés. Un moyen de le convertir à un certain degré est exactement comme ça. Nous pouvons transmettre notre valeur initiale. Si nous voulions que cela soit pivoté par une petite valeur telle que cinq degrés, nous pouvons le convertir en radians en multipliant cela par Math.pi divisé par 180. Il est donc beaucoup plus simple de travailler avec des degrés s'il est beaucoup plus facile de l' enrouler à l'intérieur de votre tête. Mais nous ne voulons pas conserver cette valeur codée en dur de cinq. Le but de l'ajout de cette rotation pour chacune de ces pièces est d'en faire une valeur légèrement différente pour chacune d'elles. Nous pouvons faire l'ajout en math.Random, qui placera dans une valeur légèrement différente pour chacune de nos positions et pour en faire un angle légèrement plus grand, car rappelez-vous math.Random est seulement entre 0 et 1. Nous pouvons multiplier cela par 2. s'agit également de copier cette méthode de rotation, et nous pouvons la réutiliser à l'intérieur de l'ananas. Juste avant d'utiliser FillRect, essayons cela, rafraîchissons et redémarrons. La sauce à pizza, le fromage, pepperoni, à côté du jambon. Si vous regardez de près, ces pièces sont légèrement déalignées. Aussi avec l'ananas, mais avec un ananas, comme vous pouvez le constater, nous avons un petit problème. C'est à ce moment que nous utilisons plusieurs ingrédients avec des valeurs de rotation. Cela se produit en raison de la rotation à la transformation. Lorsque nous effectuons une rotation, le Canvas tourne à partir de l'origine du canevas, qui est 0,0, tout en haut à gauche. Si nous ajoutons plusieurs rotations, chacune s'ajoute à la précédente, que nous avons définie. Nous en avons mis un pour le jambon, puis nous ajoutons à cela en ajoutant la rotation de l'ananas. Nous pouvons résoudre ce problème en réinitialisant l'origine de chaque nouvel ingrédient à l'aide d' un élément appelé set transform. Pour cela, dans notre fonction, je vais faire fonctionner la pizza. Juste avant les instructions du commutateur. Nous voulons appeler cette transformation ctx.set, qui va prendre six valeurs. Les six valeurs seront 1, 0, 0, 1, 0, 0. Ces six valeurs différentes peuvent être un peu déroutantes, d' autant plus qu'elles ne sont pas particulièrement regroupées ensemble. Nous pouvons voir la première valeur d' un et la quatrième est également une. Ces deux éléments concernent la mise à l'échelle, qui peut rendre un article plus grand ou plus petit. La première est la mise à l'échelle horizontale et la quatrième est une mise à l'échelle verticale. Nous ne voulons pas qu'aucune de ces valeurs soit augmentée ou diminuée, c'est pourquoi nous les conservons à une seule, qui correspond à la taille d'origine. La deuxième de la troisième valeur est liée à l'inclinaison. Nous ne voulons pas non plus biaiser aucune de nos pièces. Nous gardons ces valeurs comme zéro, ce qui signifie qu'il n'y a rien à définir. Ce qui nous intéresse, c'est ces deux derniers points. Nous avons défini ces deux dernières traductions horizontales et verticales pour revenir à zéro. Chaque fois que nous sélectionnons un nouvel ingrédient, la transformation de rotation, qui va regarder avant la remise à zéro, ce qui signifie que nous n'obtenons pas d'accumulation de ces valeurs de rotation. Essayons cela avec la transformation maintenant en place. Sélectionnez une commande. Maintenant, ce que nous recherchons, c'est que les morceaux de jambon et d'ananas reviennent dans les endroits d'origine. Tout cela fonctionne bien maintenant. Comme mentionné précédemment, vous pouvez créer d'autres étuis pour différents ingrédients si vous préférez ou si vous souhaitez une pratique supplémentaire. Le prochain, lorsque vous serez prêt, je vous verrai dans la vidéo à venir où nous viendrons cette toile une fois la pizza terminée. 44. Débarrasser La Toile: Lorsque nous avons fini de préparer la pizza, d'ajouter les garnitures, puis de l' ajouter au four, nous devons nettoyer la toile existante prête à réaliser la suivante. Comme vous l'avez peut-être deviné, nous créons une fonction qui va couvrir cela, et nous le ferons en bas de notre script. Créez une nouvelle fonction à l'intérieur d'ici pour couvrir cette fonction appelée ClearCanvas. La première tâche que je vais faire dans cette fonction si nous allons dans le Start ici et que nous sélectionnons l'une de nos commandes. N'oubliez pas que lorsque nous fabriquerons chacune de ces pizzas et que nous cliquons sur les ingrédients, le bouton est désactivé. Ce que nous allons faire, c'est que nous allons sélectionner tous ces boutons pour commencer. Nous allons passer en boucle sur ces boutons , puis nous supprimerons cet attribut désactivé. La première consiste à configurer une constante appelée étapes. Cela va passer en boucle tous nos boutons avec le nom de classe des ingrédients. Document.getElementsByClassName. Le nom de classe attaché à chacun de ces boutons est « ingrédients ». Un peu plus d'espace pour cela et si vous vous souvenez des premières vidéos lorsque nous utilisons GetElementsByClassName, plutôt que de revenir dans le tableau, cela reviendra dans la collection HTML. Nous avons des collections HTML. Nous ne pouvons utiliser aucune des méthodes de tableau telles que pour chacune d'elles. Ce que nous allons faire, c'est saisir nos étapes, puis nous convertirons cela en tableau, qui signifie que nous pourrons utiliser notre FoReach pour parcourir chacune d'entre elles. Nous allons le faire avec Array.From. Cela va créer un nouveau tableau à partir de nos étapes. Placez-le dans. Maintenant que nous avons un tableau, nous pouvons utiliser des méthodes de tableau comme FoReach, passer notre fonction. Nous aurons accès à chacun des éléments. À partir de ces éléments, ils peuvent supprimer l'attribut passant dans la chaîne de désactivé. Cela devrait maintenant passer en boucle sur tous nos ingrédients et supprimer l' attribut désactivé pour pouvoir être sélectionné sur la prochaine pizza. Ensuite, comme nous l'avons vu dans la vidéo précédente, nous avons parfois un problème où nous avons des valeurs de rotation pour le jambon et l'ananas. Ce que nous allons faire, c'est saisir ou définir Transform en haut de l'instruction switch, qui est juste ici. Les valeurs actuelles à l'intérieur d'ici réinitialiseront notre transformation si des rotations existantes ont lieu. La dernière étape consiste à effacer tout ce qui se trouve actuellement sur le Canvas et nous l'avons utilisé dans le passé avec CTX.ClearRect. Nous commençons en haut à gauche de notre Canvas, qui est zéro, zéro et pour effacer la taille réelle de la toile, nous pouvons accéder à nos variables avec canvas.width et également canvas.height. C'est ça. C'est notre fonction maintenant terminée. La dernière chose à faire est d' appeler cette fonction depuis AddToOven. Nous allons le sélectionner et regarder la fonction AddToOven. Juste sous DisplayOvenItems, collez-le dans nos instructions if. Bien qu'il y ait aussi une étape rapide que nous pouvons introduire, qui consiste à saisir notre variable qui est CompletedSteps. Réinitialisez ce tableau en tant que tableau vide. Essayons ça. Rafraîchissez le navigateur et il redémarre. Sélectionnez une commande. Actuellement sur du jambon et de l'ananas, on roule la pâte, on ajoute la sauce, fromage, le jambon et l'ananas. Ajoutez-le au four et maintenant notre toile est nettoyée et tous les ingrédients sont toujours disponibles pour la sélection de notre prochaine pizza. Je vais essayer un autre, le pepperoni, ajouter les ingrédients, l' ajouter au four, et tout cela fonctionne comme prévu. C'est maintenant le cas pour notre travail sur la toile et vous pouvez jouer avec des choses, vous pouvez étendre les choses et même ajouter des ingrédients supplémentaires si vous le souhaitez. Passons maintenant à la section suivante où nous allons terminer ce projet. 45. Pizzas dégustation: Cette nouvelle section va impliquer la fin de notre projet. L'une des choses à prendre en charge est de vérifier que le chef a terminé toutes les étapes requises avant d'ajouter la pizza au four. Donc, si la pizza est fausse, elle sera gaspillée. C'est ce que nous allons maintenant couvrir. Plus tard, nous afficherons également quelques statistiques à l'utilisateur, afin que nous puissions suivre ces pizzas gaspillées à l'intérieur d'une variable. Allons en haut de notre index.js. Faites défiler vers le bas jusqu'à nos variables. À l'aide du mot-clé let, créez une nouvelle variable appelée WastedPizzas, et nous garderons une trace du nombre de ces variables erronées. Ensuite, il revient au bas de notre script, et nous allons créer une nouvelle fonction pour gérer cela. Installez ça, appelez WastedPizza. Avant d'oublier, nous allons saisir notre variable WastedPizzas par le haut et nous allons augmenter cela et l'utiliser avec les statistiques plus tard. Ensuite, nous allons franchir toutes les étapes préparées pour la prochaine pizza. CompletedSteps, réinitialisez ce tableau comme étant vide. Enfin, nous appellerons ClearCanvas. Il s'agit de la fonction qui a été configurée dans la vidéo précédente, qui va réinitialiser le canevas et supprimer également l'attribut désactivé. Accédez à la page d'index. À l'intérieur de la cuisine principale, nous avons également un bouton auquel nous pouvons relier cela. Nous allons ajouter un EventListener à cet élément qui a appelé notre nouvelle fonction. Ci-dessous notre fonction Documents.QuerySelector. Ce bouton. Si nous venons de jeter un coup d'œil, il y avait l'identité du gaspillage. Ajoutez un EventListener, où nous écouterons l'événement clic, qui va appeler notre fonction ci-dessus. Essayons cela, sauvegardons et revenons à notre jeu et recommençons à zéro. Sélectionnez une commande. Nous allons faire cela mal, nous allons simplement cliquer dessus dans le mauvais ordre. Cliquez sur Déchets. Maintenant, une toile est en cours réinitialisation et nous voyons que nous n'avons pas cet article à l'intérieur du four. Cela nous prépare maintenant à la prochaine vidéo, où nous allons vérifier si le chef a pris les bonnes mesures pour préparer cette pizza. Si ce n'est pas le cas, cette fonction sera à nouveau appelée, mais cette fois automatiquement. 46. Vérifier les étapes: Cette fonction de pizza gaspillée que nous venons créer sera également utile une fois de plus, car nous allons maintenant vérifier que le chef a pris les bonnes mesures, ou ajouté les bons ingrédients sur la pizza avant de l'ajouter au four. S'ils se sont trompés, ce sera encore une pizza gaspillée. Pour dire ceci, si nous entrons dans notre jeu, sélectionnez l'une de nos pizzas. Actuellement, avant d'ajouter l'une des garnitures, nous pouvons cliquer sur le four et l'ajouter sans les bons ingrédients. Nous pouvons également continuer et en ajouter d'autres. Pour vérifier les ingrédients, nous pouvons créer une nouvelle fonction. Je vais le faire juste après l'avoir ajouté au four. Jetez un coup d'œil à notre fonction appelée ajouter au four, qui est un peu plus haut. Cela fait un moment que nous n'avons pas vu celui-ci. Il est ajouté au four. Juste après cela, nous allons créer notre nouvelle fonction, c' est-à-dire les étapes terminées. Ici, nous devons également prendre le nom de pizza, auquel nous comparons actuellement. Nous pouvons vérifier si les étapes sont correctes. Donc, en passant le nom de la pizza, que nous ajouterons lorsque nous appellerons cette fonction. Cette fonction renvoie une valeur booléenne vraie ou fausse selon que ces étapes sont correctes ou non. C'est vrai ou fausse valeur qui déterminera si nous pouvons ajouter la pizza au four et nous l' appellerons depuis notre fonction Ajouter au four. Passez à l'intérieur de l' instruction if où nous vérifions si nous avons un nom de pizza, créez une constante pour stocker la valeur renvoyée à partir de notre fonction que nous examinerons dans une minute. Nous appellerons cela peut ajouter au four. N'oubliez pas qu'il s'agit d'une valeur vraie ou fausse, et cela sera égal à notre fonction appelée étapes terminées. Rappelez-vous que cela doit également prendre en compte au nom de la pizza, que nous avons stocké ci-dessus dans cette variable. Juste en dessous, nous créons ensuite dans notre objet à pizza pour entrer dans le four. Maintenant, nous allons pousser ça vers le réseau de fours. Mais juste avant de faire cela, nous voulons nous assurer que cela se produise uniquement si la variable peut ajouter au four est vraie. Ce que nous allons faire, c'est que nous supprimerons toutes ces informations de notre objet jusqu'aux étapes terminées. Passez une instruction if pour vérifier si le four peut être ajouté est égal à vrai. Si c'est le cas, collez-le à nouveau. Notre pizza peut maintenant être ajoutée au four. Faisons un test rapide et vérifions que cela fonctionne. Nous allons entrer dans notre nouvelle fonction, et pour l'instant, nous retournerons simplement la valeur si elle est vraie. Nous devrions pouvoir ajouter n'importe laquelle des pizzas actuelles au four. Essayons ça. Cliquez sur le four, et ça marche. Mais maintenant, si nous arrêtons le jeu et revenons faux, j'espère que nous devrions maintenant bloquer toutes les pizzas d'être poussées au four. Je vais en sélectionner un, et cela empêche maintenant toutes les pizzas d' entrer dans cette section. Cela signifie que nous pouvons maintenant ajouter des conditions réelles à vérifier à l'intérieur d'ici. Pour ce faire, nous devons prendre les marches de toutes les pizzas. Pour commencer, nous devons réellement sélectionner nos objets de pizza. Ici, nous avions été passés au nom de la pizza et si nous jetons un coup d'œil à notre gamme de pizzas en haut. Nous allons utiliser ce nom pour trouver notre pizza particulière, puis retourner l'objet complet afin de pouvoir accéder à ces étapes requises. Allons-y et faisons-le maintenant. Nous pouvons déplacer les déclarations de retour, accéder à notre tableau complet de pizzas, puis utiliser la méthode de recherche JavaScript pour effectuer une recherche via ce nom de pizza. Pour ce faire, nous allons exécuter une fonction pour chacun des éléments de notre tableau et la stocker à l'intérieur d'une variable appelée pizza. Cette méthode de recherche va renvoyer une nouvelle valeur. Nous voulons vérifier si la pizza à laquelle nous accédons actuellement possède une propriété name égale à notre nom de pizza, puis elle stockera cette valeur renvoyée à l'intérieur d' une constante appelée objets de pizza. La prochaine chose à faire est de saisir les étapes de cet objet et de les stocker à nouveau à l'intérieur d'une variable ou d'une constante. Celle-ci s'appelle les étapes requises, et nous la définirons sur notre objet pizza ci-dessus. Filtrez cette option vers le bas pour enregistrer uniquement les étapes requises. Maintenant, si nous revenons à notre objet pizza tout en haut du script, il s'agit de la propriété steps requise laquelle nous venons d'accéder. Il s'agit d'un tableau de toutes les valeurs. Nous avons maintenant toutes ces valeurs nécessaires pour construire une pizza, et si vous vous en souvenez plus tôt, faites défiler vers le bas jusqu'à nos variables. Nous avons également une variable appelée étapes terminées, à laquelle un chef clique sur chacun des ingrédients. Nous devons maintenant comparer ces deux baies et vérifier que toutes les étapes incluses ont été prises en compte. De plus, si nous pensons à cela pour qu' une pizza soit prête à entrer au four, non seulement les étapes terminées devaient être correctes, mais elles doivent également être dans le même ordre. Par exemple, si j'ai la pâte, le fromage et la sauce dans cet ordre particulier, cela correspondrait techniquement à une margarita. Mais nous ne voulons pas que la source soit au-dessus du fromage ou que la pâte soit ajoutée en dernier. Nous pouvons vérifier cela à l'aide d'une méthode de tableau JavaScript appelée tous. Revenons à notre fonction, ce que je vais faire, c'est taper cette fonction et ensuite nous pourrons parler de ce qui se passe juste après. Nous pouvons accéder à nos étapes requises, c' est-à-dire le tableau de toutes les étapes nécessaires à la création d'une pizza, puis appeler cette méthode que nous venons de mentionner, qui était toutes. Cela va exécuter une fonction pour chacune de nos valeurs de tableau. En passant sous forme d'arguments, l'élément, l'index, puis renvoie une valeur, c' est-à-dire si l' élément est égal aux étapes terminées comme dans l'index. Enfin, nous allons simplement stocker cette valeur renvoyée à l'intérieur d'une constante appelée étapes de vérification. Juste pour expliquer ce qui se passait ici, nous allons parcourir toutes les étapes requises, puis nous stockerons cela à l'intérieur de la valeur de l'élément. Par exemple, lors de la première étape requise, qui est généralement la pâte à rôle, ce serait la valeur de cet élément. Le numéro d'index serait bien sûr zéro. Ensuite, nous vérifions à nouveau la toute première si cette valeur de pâte à rouler est égale à la première valeur des étapes terminées. Si cette pizza a été créée, ces deux valeurs doivent être égales à la pâte à rouler. Sur la deuxième boucle, cela équivaut généralement à la sauce. Ensuite, nous vérifions si la source est la deuxième valeur et ainsi de suite. Chaque méthode renvoie true si toutes correspondent une correspondance ou false si une ou plusieurs méthodes échouent. Il s'agit du test principal pour vérifier si la pizza est correcte avant d' entrer au four. Si nous le voulions, nous pourrions simplement l'utiliser comme notre seule et seule vérification, mais si nous l'utilisons, le chef ne sait pas exactement quels ingrédients ont causé le problème. Il ne saura pas s'il a utilisé trop d'ingrédients, pas assez d'ingrédients ou les mauvais. Pour cela, je vais configurer plusieurs conditions afin que nous puissions donner différents messages d'erreur. Cela transmettra certaines instructions if pour effectuer certaines vérifications. Mais le premier, nous allons vérifier si trop d'ingrédients ont été ajoutés. Nous voulons savoir si la longueur des étapes terminées est supérieure à la longueur des étapes requises. Si les étapes sont terminées, la longueur est supérieure aux étapes requises. Si c'est le cas pour l'instant, nous allons simplement placer dans un journal de console et nous en dirons trop. Copiez ceci, collez-le ci-dessous et modifiez-le par le symbole inférieur. Nous pouvons vérifier si un nombre insuffisant d' ingrédients n'a pas été utilisé. Si cela se produit, cela ne dira pas assez dans le journal de la console. Le troisième, nous allons vérifier si ces deux valeurs sont égales, alors assurez-vous simplement qu'elles sont correctement orthographiées. Nous vérifierons si les étapes terminées sont égales aux étapes requises. Nous vérifierons également si les ingrédients sont incorrects. Nous pouvons le faire avec notre variable CheckSteps et vérifier si la valeur est égale à false en ajoutant une exclamation. Fondamentalement, nous avons pris la bonne quantité de mesures, mais les ingrédients sont incorrects, mais cela enregistrera dans la console la valeur des mauvais ingrédients. Examinons cela dans la console. Ouvrez les outils de développement. Nous allons recommencer. Sélectionnez l'une de nos pizzas et prenons le pepperoni, qui est simple. Nous devons rouler la pâte avec de la sauce à pizza. Espérons que celui-ci ajoutera trop d'ingrédients, cliquera sur trop d'options. Essayez d'ajouter au four, j'en vois trop, rafraîchir. Allons-y encore une fois, Margarita. Nous ne cliquerons que sur l'un de ces ingrédients. Au four, il n'y a pas assez d'ingrédients, puis le troisième et dernier, nous vérifierons si nous avons inclus les mauvais ingrédients avec la bonne quantité d'étapes. Essayons ça. Nous savons que le pepperoni contient la pâte à rouleaux, qu'il contient la sauce, le fromage et le pepperoni Nous devons donc prendre quatre étapes mais nous assurer que ces derniers sont incorrects. Pepperoni, j'y ajouterai du jambon. Assurez-vous que nous sommes à quatre étapes. Cliquez sur le four et nous pouvons voir que nous avons utilisé les mauvais ingrédients. Bien. Nous avons nos messages et ceux-ci doivent également être affichés à l'utilisateur, et nous pouvons le faire si nous passons à notre index.html. Jetons un coup d'œil. Pour notre zone Message, nous avons cette div environnante et nos messages pour le chef, puis ce p avec l'identifiant du message. Nous pourrions écrire ces messages directement dans chacune de nos instructions IF et je les mettrai à l'écran, mais créons plutôt une fonction autonome pour les gérer car nous allons être en répétant ces multiples fois. Ajoutons notre fonction appelée ShowerRorMessage. Transmettez le message que nous voulons afficher. Si c'est tout, nous allons sélectionner notre zone Message que nous venons de voir à l'intérieur de la page d'index avec Document.QuerySelector. Transmettez l'identifiant du message, définissez le contenu InnerText égal à la variable de message. Maintenant, une fois que le chef a commis une erreur, nous voulons que cela disparaisse après un certain temps et nous pouvons le faire avec un SetTimeout. Transmettez ceci dans lequel prend une fonction , séparée par une virgule. La deuxième valeur sera le délai en millisecondes, disons donc deux secondes. Ouvrez le corps de la fonction. Tout ce que nous allons faire à l'intérieur d'ici est de copier cette zone de message, de le coller dans. Définissons cette chaîne comme une chaîne vide. Nous pouvons maintenant appeler cette fonction appelée ShowerRorMessage et placer les journaux de console juste au-dessus. Collez cela dans, ajoutez-y une chaîne. Vous avez également utilisé trop d' ingrédients. Copiez ceci. Le second, vous n'avez pas utilisé assez d'ingrédients, et le troisième vous avez utilisé les mauvais ingrédients. Essayons ça. Encore une fois, nous ferons le même test qu'avant. Sélectionnez une commande, donc nous en ferons trop peu. Vous n'avez pas utilisé assez d'ingrédients , alors nous en utilisons trop. C'est bien. Ensuite, le dernier quand nous utilisons les mauvais ingrédients, donc le pepperoni. Je vais ajouter quatre étapes : rouler la pâte, la sauce à pizza et les poivrons, et voilà. La dernière chose à faire est de s'assurer que ces pizzas ne s'ajoutent au four que si les ingrédients et les étapes sont corrects. Actuellement, comme nous l'avons vu plus tôt, cela contrôlait avec cette instruction IF, et cela ne s'ajoutera au four que si c'est vrai. Nous devons couper cette valeur vraie ou fausse, la renvoyer à partir de la fonction overblow appelée StepsCompleted. Actuellement, cette fonction est en cours d'exécution et nous effectuons toutes nos vérifications, mais nous ne renvoyons pas encore une valeur vraie ou fausse Nous devons donc l'ajouter en bas. Nous voudrons que cela revienne vrai uniquement si la capacité du four n' a pas encore été atteinte. Auparavant, nous avons configuré des variables appelées four et ovenCapacity que nous pouvons voir ici. J'ai le four qui est un tableau vide et aussi le four Capacité. Nous l'avons réglé pour ne contenir que six pizzas. Nous voulons également vérifier que nous n'avons pas trop de pizzas au four avant de retourner la valeur de true. Nous allons couper ça. Ajoutez une instruction IF dans laquelle nous allons vérifier si le four.length est inférieur la capacité du four qui est actuellement de six. Si c'est le cas, nous retournerons vrai, sinon nous retournerons faux. Nous y sommes presque maintenant, mais nous devrons également nous occuper de ce qui se passe si nous avons utilisé les mauvais ingrédients, car si nous gâchons une pizza, nous voulons également exécuter notre fonction WastedPizza, que nous créé précédemment. Nous pouvons le faire à l'intérieur de nos déclarations IF. Si nous avons utilisé trop d'ingrédients il s'agit d'une pizza incorrecte, exécutez notre fonction WastedPizza, puis revenez de cela. La prochaine étape consiste à vérifier si nous n'avons pas utilisé assez d'ingrédients. Cependant, nous ne voulons pas exécuter la fonction WastedPizza, car ils peuvent toujours avoir la chance d'ajouter les bons ingrédients par la suite. Tout ce que nous faisons, c'est revenir de tout ça. Pour le dernier où j'ai utilisé les mauvais ingrédients, nous voulons de nouveau exécuter la fonction WastedPizza, revenez de cela. Cela devrait maintenant nous laisser prêts à essayer cela lorsque nous avons créé la fonction WastedPizza en bas de la vidéo précédente. Jetons un coup d'œil à cela. Cela efface également le Canvas. Nous savons si cette fonction est en cours d' exécution et nous saurons également si la valeur de retour de true a été déclenchée car nous devrions voir une pizza dans le four, nous allons donc rafraîchir et essayer cela. Tout d'abord, choisissons le pepperoni. Je vais aller chercher les bons ingrédients : la pâte, la sauce, le fromage, le pepperoni et le four. C'est bien. Il est [inaudible] maintenant en cours de nettoyage, alors nous allons essayer un de plus, le jambon et l'ananas. Pour celui-là, nous allons le rendre inexact. Nous ajouterons le mauvais ingrédient, donc pas trop. Tout cela semble fonctionner parce que cette pizza n'est pas ajoutée au four mais la toile au fond est encore nettoyée et prête à ajouter une nouvelle pizza. 47. Achèvement des commandes: Lorsque nous aurons terminé toutes les pizzas sur une commande donnée, ce serait une bonne idée de terminer la commande afin que nous puissions passer à la suivante. C'est ce sur quoi nous allons nous concentrer dans cette vidéo. Juste avant cela, je veux résoudre un petit problème. Ce problème, si nous passons au navigateur et que nous commençons notre jeu. Cliquez sur l'une de ces commandes. Le problème est que nous pouvons cliquer sur ces ingrédients avant même d'avoir sélectionné l' une de nos pizzas. Non seulement cela laisse notre projet un peu étrange, cela signifie également que nous ne pouvons pas ajouter de pizza au four car nous vérifions ces ingrédients sélectionnés par rapport aux pizzas cliquées. Pour résoudre ce problème, il suffit de vérifier si la section pizza actuelle est la section pizza actuelle est réglée lorsque nous cliquons sur un ingrédient quelconque. Pour ce faire, jetez un coup d'œil à la fonction StepComplete, je vais donc effectuer une recherche. C'est celui dont nous avons besoin, juste ici. abord, avant de vérifier si une étape est terminée, nous pouvons faire une déclaration if tout en haut. Cela va vérifier si nous avons sélectionné une pizza. où nous pouvons le faire, si nous allons à notre Index.html dans le coin cuisine, ici, nous pouvons voir que nous avons cette période avec l' identifiant de la pizza actuelle. Lorsque nous sélectionnons une des pizzas ou que nous commandons, elle est ensuite placée dans cette section. Nous pouvons vérifier s'il y a contenu à l'intérieur de ces éléments. Pour ce faire, nous la sélectionnons avec Document.QuerySelector. Il s'agit d'une pièce d'identité, alors passez le hachage. L'ID était current_pizza. Nous pourrions vérifier s'il y a du texte intérieur ici ou s'il est égal à une chaîne vide. Si c'est vide, nous avons un problème, nous n'avons pas sélectionné de pizza. Ce que nous allons faire, c'est d'accéder à notre fonction appelée ShowerRorMessage, de la passer dans une chaîne d'abord, de sélectionner une pizza sur laquelle vous souhaitez travailler, puis nous en revenons, donc non le code ci-dessous est exécuté. Faisons un test. Nous pouvons accéder au navigateur, démarrer notre jeu et sélectionner l'une de nos commandes. Avant de sélectionner l' une de nos pizzas, nous allons essayer d'ajouter des ingrédients tels que la pâte à rouler, et nous voyons notre message d'erreur ici. L'étape n'est plus marquée comme terminée comme on peut le constater par le fait que ce bouton n'est pas désactivé. Maintenant, commençons à terminer notre commande. Pour cela, par exemple, il y a trois pizzas. Ensuite, nous voulons les faire trois, puis terminer notre commande. Pour cela, avant de laisser le joueur le terminer, il serait bon de vérifier d' abord qu' a créé suffisamment de pizzas pour terminer la commande. L'étape 1 consistera à stocker quelque part le nombre de pizzas sur chaque commande. Il existe plusieurs façons d'aborder cette question, mais je vais le stocker en tant qu'attribut lorsque nous créerons la commande. Jetez un coup d'œil à la fonction appelée CreateListOfPizzas , qui est ici. À l'intérieur de là où nous avons construit nos éléments particuliers, nous avons une portée avec la quantité actuelle de pizza. Par exemple, il peut s'agir de deux margheritas ou d'un pepperoni. Nous pouvons maintenant ajouter la quantité de chaque ligne de commande à une variable. Créons cette variable juste au-dessus, afin que nous puissions en garder une trace. tout le total des pizzas, et nous allons initialement définir cette valeur à zéro. Nous le réinitialiserons ensuite chaque fois que nous créerons notre liste de pizzas en définissant cette valeur sur zéro. Ensuite, juste en dessous, nous pouvons ajouter la quantité actuelle de pizza à la variable totale de pizzas existante. Juste pour clarifier ce que nous faisons ici, si nous avons une commande, par exemple, cette première a trois pizzas, celle-ci en a trois, et celle-ci en a quatre. Ce que nous faisons, c'est que nous bouclons toutes les pizzas, puis nous ajoutons cette quantité à notre variable. Ensuite, nous avons ce total pour l'ordre, auquel nous pourrons faire référence à l'avenir. Comme mentionné précédemment, nous allons utiliser cette quantité totale de pizzas et l'ajouter à notre commande en tant qu'attribut. Nous pouvons le faire lorsque nous créons la commande. Nous devons jeter un coup d'œil à la fonction CreateSingleOrder , qui se trouve juste en dessous. Juste en dessous de notre liste de pizzas, ce que nous allons faire, c'est que nous allons saisir l'emballage de commande, nous allons définir l'attribut que nous avons utilisé dans le passé. L'attribut, il va s' agir d'un attribut personnalisé, ce n'est pas l'un des attributs intégrés que nous possédons déjà. En général, lorsque vous ajoutez nos propres attributs personnalisés, nous avons le préfixe de données. Il s'agit de données, de pizzas totales, puis de la valeur, qui est notre variable ci-dessus nous avons créée appelée pizza totale. Ce que nous faisons ici, c'est chaque fois que nous créons une nouvelle commande, nous ajoutons un attribut de données appelé data-total-pizzas, avec le nombre total de pizzas sur la commande. Si nous sauvegardons cela, nous pouvons accéder aux outils de développement et vérifier que tout cela fonctionne. Rafraîchissez, puis commencez notre jeu. Maintenant, si nous sélectionnons l' une de nos commandes, jetez un coup d'œil à la classe d'enveloppe de commande, et vous pouvez voir que chacune possède ce nouvel attribut appelé data-total-pizzas, et la quantité de chacune de ces commandes. commandes. Cela signifie que nous avons maintenant le nombre total de commandes que nous devons créer. Auparavant, si nous examinons les variables, nous avons également créé une variable appelée pizzas complètes pour commande, que nous avons ici. Cela augmente chaque fois que nous ajoutons une nouvelle pizza au four, nous donne les deux valeurs qui devront maintenant être comparées. Pour ce faire, nous devons également créer un bouton pour terminer la commande, que le chef peut déclencher à l'intérieur de la cuisine. Ce bouton déclenchera une fonction, et nous pouvons la définir dans la fonction de sélection de commande actuelle. Jetez un coup d'œil à cela, sélectionnez la commande actuelle. Je vais créer un bouton à l'intérieur d'ici, car c'est ici que nous définissons l'ordre actuel sur lequel nous travaillons. En bas, juste en dessous de cette dernière ligne de code, mais toujours dans l'instruction if, et en dessous, et nous créerons une constante appelée CompleteButton. Dès le début, nous avons la fonction BuildElement, qui va créer un nouveau code HTML pour nous. Le premier bouton correspond au type d'élément que nous voulons créer, c' est-à-dire un bouton et la valeur qui correspond au texte complet. Ensuite, nous pouvons accéder à ce bouton, ajouter un nom de classe complete_btn. Ce bouton doit déclencher une fonction pour que nous puissions ajouter un écouteur d'événements, donc CompleteButton.AddEventListener. Eh bien, c'est maintenant un clic, ce qui va déclencher une fonction que nous allons créer dans un instant appelée CompleteOrder. Enfin, nous aurons notre OrderDiv, qui est cette section en cours de travail. Nous saisissons cela, puis nous pouvons ajouter AppendChild. Passez-le dans notre bouton Complete. Nous allons tester tout cela en ajoutant une simple alerte à l'intérieur de cette fonction. Créez la fonction appelée CompleteOrder. Maintenant, j'alerte avec le texte complet. Allons dans le navigateur et vérifions que cela fonctionne. Rafraîchissez et cliquez sur le bouton « Démarrer ». Sélectionnez l'une de nos commandes. Il y a notre nouveau bouton Complete qui déclenchera une alerte lorsque vous cliquez dessus. Bien. Maintenant que nous savons que cela fonctionne et qu'il a été déclenché, nous pouvons supprimer cette alerte, puis nous pouvons faire notre comparaison entre le nombre total de pizzas sur la commande et le nombre que nous avons créé actuellement. abord, nous allons récupérer notre commande actuelle, nous l'avons stockée à l'intérieur d'une constante appelée CurrenOrder. Je vais saisir ça avec Document.QuerySelector. Maintenant, comment pouvons-nous choisir la commande actuelle sur laquelle nous travaillons ? Eh bien, si vous vous rappelez plus tôt, lorsque nous avons cliqué sur le bouton « Démarrer », toutes les commandes à l'intérieur de la barre latérale, si nous sélectionnons une de cette classe de order_wrapper, puis, lorsque nous cliquons sur une, il est passé à la section «  Travailler sur ». La section Travailler sur possède également une pièce d'identité. Si nous faisons défiler vers le haut, c'est la section, juste ici. Nous pouvons récupérer l' emballage de commande qui se trouve à l'intérieur de cette section de travail. Nous pouvons le faire en le faisant passer dans un sélecteur CSS. Le travail sur la section, saisissant notre section juste ici. Ensuite, nous pouvons saisir notre section à l'intérieur, qui a cette classe d'emballage de commande. Nous pouvons le faire comme avec CSS, utiliser le symbole supérieur à, et avec cela étant une classe, nous utilisons le .order_wrapper. Sélectionnez cette commande stockée. N'oubliez pas que dans cette commande, nous avons ajouté le nombre total de pizzas pour cette commande, à l'intérieur d'un attribut personnalisé. Nous pouvons utiliser get attribut, transmettre dans le nom de l'attribut que nous avons donné, et c'était data-total-pizzas. Stockez-le à l'intérieur d'une constante appelée TotalPizzasonOrder. Ensuite, nous pouvons enfin faire notre vérification ci-dessous à l'intérieur d'une déclaration if. Nous avons le nombre total de pizzas que nous devrions avoir, et nous avons également stocké la variable précédemment appelée pizzas complète pour commande. Nous pouvons vérifier si les pizzas terminées pour commande sont inférieures la valeur ci-dessus appelée total de pizzas sur commande, si c'est le cas, nous avons une erreur, donc nous pouvons la transmettre dans notre fonction appelée ShowerRorMessage avec le texte « Vous n'avez pas fait assez de pizzas pour terminer cette commande ». Puis revenez de là. Essayons ça. Enregistrez ceci et Rafraîchissez. Ce que nous devons faire maintenant, c'est commencer notre jeu. Pour notre première commande, il y a trois pizzas, alors cliquez dessus. Maintenant, si nous essayons d'ajouter l' un à l'autre, et prenons le jambon et l'ananas. Nous allons créer le tout premier. Ajoutez-le au four. Nous n'en avons qu'un, cliquez sur « Terminer ». Maintenant, nous recevons le message d'erreur à l'intérieur d'ici. Tout cela semble maintenant fonctionner. Nous pouvons passer à la suppression de la commande une fois qu'elle est terminée. Juste en dessous de la déclaration if, nous voulons récupérer notre commande actuelle que nous avons stockée par le haut, et la supprimer de la section Working on avec la méthode remove. Cela supprimera réellement la commande de cette section, mais cela ne supprimera que la commande qui inclut le titre et les pizzas, nous devons tout de même prendre soin de retirer le bouton. La façon dont vous pouvez saisir ce bouton est de se souvenir que cette fonction de commande complète est déclenchée à partir de notre gestionnaire de clic sur le bouton, afin que nous puissions le transmettre dans le réel, mettre des informations avec l'événement. Nous pouvons y accéder avec e.target. Nous l'avons stocké à l'intérieur d'une variable appelée bouton Complete. Comme ci-dessus, nous pouvons accéder à cette variable et appeler la méthode appelée remove pour la supprimer du DOM. Nous allons également ajouter quelques statistiques à ce jeu ultérieurement, telles que le nombre de commandes terminées. Nous allons nous préparer à cela en créant une variable de en haut. Avec les autres, nous dirons que commandes terminées soient une valeur initiale de zéro. Revenez ensuite à notre fonction de commande complète où nous pouvons l'incrémenter de la valeur d'un, donc les commandes terminées, plus, plus. Maintenant, nous avons terminé cette commande, nous pouvons également réinitialiser cette variable appelée pizzas complétées pour commande. Nous pouvons réinitialiser cette valeur pour qu'elle soit égale à zéro, donc nous sommes prêts pour la prochaine commande. Sauvons enfin ça et passons à notre jeu, et nous pouvons essayer ça. Cliquez sur « Démarrer ». Ce que nous recherchons, c'est créer la quantité correcte de pizzas pour compléter cette commande. abord, le jambon et l'ananas vont compléter cela, donc nous en avons un, et nous avons également deux pepperonis à créer dessus. Nous allons en essayer un de plus. Nous devrions maintenant en avoir trois au four et trois qui sont également associés à cette commande. Cliquez sur « Terminer », et cela supprime désormais notre commande de la zone de travail. 48. Suppression des commandes: Lorsque vous testez ce jeu, vous avez peut-être remarqué un problème, lorsque nous cliquons sur le bouton « Démarrer », nous recevons les commandes, puis lorsque nous cliquons sur l'une des commandes pour le déplacer dans le en travaillant sur la section, lorsque les commandes sont régénérées, la même commande est toujours placée dans la liste. Nous voulons supprimer la commande 1 car nous y travaillons. Cela se produit pour chacun sur lequel nous cliquons. Pour résoudre ce problème, nous pourrions supprimer cette commande du tableau de commandes. Pour identifier la commande sur laquelle nous avons cliqué, nous pouvons ajouter un attribut de numéro de commande à chacune d'elles. De la même manière, lorsque nous allons dans la fonction CreateSingleOrder, rappelez-vous que nous avons ajouté tôt cet attribut personnalisé appelé data total pizzas. Cela nous a permis d'identifier nombre total de pizzas sur la commande, ce qui nous a permis de comparer cela à la quantité que nous avons créée. De la même manière, nous allons également ajouter nouveaux attributs personnalisés avec le numéro de commande, afin de pouvoir identifier celui sur lequel nous avons cliqué. Si nous examinons ci-dessus, nous avons déjà accès à ce numéro de commande. Il va être assez simple de le faire. Ce que nous allons faire, c'est dupliquer cette ligne pour créer un nouvel attribut. Copiez et collez celui-ci dans. Nous allons créer un nouvel attribut. Encore une fois, avec le préfixe de données personnalisé, il s'agit d'un numéro de commande de données. Passer ce numéro de commande. Ensuite, avant d'aller plus loin, sauvegardons cela et essayons cela dans le navigateur, ouvrant les outils de développement. C'est notre jeu. Maintenant, si nous sélectionnons l' une de nos commandes, il s'agit de votre OrderWrapper. Nous avons les données OrderNumber d'un, nous avons le numéro de commande 2, 3, 4, 5, etc. Maintenant que cela est en place, nous pouvons passer à notre code et supprimer cette commande du tableau de commandes. Un bon endroit pour le faire sera dans notre fonction appelée SelectCurrenOrder. Jetez un coup d'œil pour cela. Il s'agit d'une fonction qui est exécutée lorsque nous cliquons sur chaque commande. En utilisant cette constante de OrderWrapper, nous avons déjà accès au clic sur commande. À l'intérieur de l' instruction if ci-dessous, nous pouvons récupérer l' attribut de numéro de commande de l'OrderWrapper, puis nous efforcer de le supprimer. En bas, nous allons commencer par récupérer ce numéro de commande, installer à l'intérieur d'une constante appelée OrderNumber. Définissez cela comme égal à notre OrderWrapper. Dot Obtenez-Attribute. Numéro de commande des données client [inaudible]. Nous pouvons maintenant accéder à notre tableau de commandes. Nous pouvons utiliser la méthode de tableau JavaScript appelée Filter, qui peut prendre en charge une fonction, et pour rester courte, je vais juste placer dans une fonction de flèche. Dans chaque ordre, dans la variable d'ordre. Ensuite, nous voulons vérifier si le numéro de commande en question n'est pas égal à notre numéro de commande ci-dessus. Cela va filtrer toutes nos commandes et ne laisser passer que les commandes lesquelles on n'a pas cliqué. Cela nous donnera un nouveau tableau avec toutes les valeurs sauf celle-ci. Ce que nous pouvons faire, c'est de définir nos ordres comme égaux, ce qui remplacera le tableau d'origine. Revenons au navigateur et essayons cela . Commencez le jeu. Sélectionnez notre première commande. Maintenant, régénérons. Maintenant que nos commandes sont régénérées, nous ne voyons plus l'ordre 1 dans cette barre latérale. 49. Mise À Jour De L'interface Et Des Statistiques: Lors de la création de ce jeu, nous avons gardé une trace de certains chiffres, tels que les pizzas terminées, les pizzas gaspillées, ainsi que les commandes terminées. Ils vont maintenant être utilisés pour créer une section de statistiques à la fin de la partie. Cette zone apparaîtra à la place de la section Méthode. Nous allons donc masquer cette section et la remplacer lorsqu' elle n'est plus nécessaire à la fin du jeu. La section statistique se trouve déjà à l'intérieur de notre page d'index. Si nous entrons ici tout haut de la section principale, nous avons cette zone dans laquelle nous allons mettre à jour toutes ces trois zones avec nos variables. Cela reflétera également nos fonctions de début et de fin de jeu et se déplacera sur toutes les zones affichant et masquent des éléments dans certaines fonctions personnalisées. Actuellement, notre zone de statistiques n'est pas affichée car si nous entrons dans notre feuille de style, nous définissons ce type d'affichage comme aucun. Allons dans notre page d'index et si nous jetons un coup d'œil, cela démarrera la fonction de jeu juste ici. Cette zone est chargée de montrer et de masquer nos boutons de début et de fin une fois le jeu démarré ou terminé. Si nous faisons défiler vers le bas, il ajoute également ce message au début de la partie, qui est alors enlevé au bout de trois secondes. De plus, la fonction de fin de jeu rétablira ensuite le bouton Démarrer, puis masquer le bouton Fin. Pour refactionner ces deux fonctions, juste en dessous du jeu de démarrage, nous allons les déplacer dans une nouvelle fonction appelée interface utilisateur du jeu de démarrage. Puis faites défiler vers le haut. Nous allons découper nos deux zones qui affichent et masquent les boutons dans notre interface utilisateur. Ensuite, notre zone de message avec le délai d'attente défini pour cet arrêt. Lorsque cela est entré , nous pouvons appeler une fonction d'interface utilisateur du jeu de démarrage juste au-dessus à la place du code, qui sera coupé. même manière juste en dessous de la fin du jeu, créez une nouvelle fonction. Celui-ci est l'interface utilisateur de fin de jeu. Maintenant, ce que nous devons faire pour celle-ci, c'est copier une découpe de ces deux lignes en bas, et celles-ci dans la nouvelle fonction puis de l'appeler en place. Essayons cela, sur le navigateur et cliquez sur le « Jeu de démarrage ». Ceci est maintenant supprimé et nous voyons la fin de la partie. Maintenant, si nous cliquons sur « Fin », le bouton Démarrer s'affiche maintenant. Rien de différent, juste un refacteur pour garder notre code un peu plus organisé. Nous pouvons désormais utiliser ces deux nouvelles fonctions pour afficher et masquer la zone des statistiques. Nous commencerons par l'interface utilisateur du jeu de démarrage en bas du document .QuerySelector. Prenez la section de méthode originale que nous pouvons masquer en accédant au style.display et définissez cela comme égal à la chaîne de bloc, dupliquez cela, puis nous pouvons faire le contraire avec nos statistiques . Nous voulons que la zone des statistiques soit masquée, changerons cette valeur pour qu'elle soit nulle. Nous le faisons parce que nous voulons seulement que cette zone de statistiques apparaisse à la fin de la partie, mais nous allons le faire maintenant en inversant ces deux valeurs, au lieu de l'interface utilisateur de fin de jeu, la zone de méthode est va être masquée pour que nous puissions révéler la zone des statistiques en définissant cette valeur comme étant la valeur du bloc, sauvegardez-la et essayez-la. Allez au jeu, nous voyons la zone de méthode pour voir exactement ce que nous faisons avec chaque pizza et le jeu et nous voyons maintenant nos statistiques. Comme nous l'avons déjà vu, cette zone de statistiques n'est que le HTML Nous devons donc prendre soin d'ajouter nos valeurs variables à chacune de ces travées. Allez dans notre index.js à l'intérieur du document d'interface utilisateur de fin de jeu. QuerySelector. Le premier de nos domaines porte sur l' idée des commandes terminées, où nous pouvons définir le contenu du texte intérieur pour qu'il soit égal à notre variable portant le même nom. Copiez et collez encore deux fois. La section centrale a été complétée par des pizzas. Encore une fois avec le nom de variable correspondant. La troisième était des pizzas gaspillées et des pizzas gaspillées variables. Ces valeurs de variables gratuites doivent également être réinitialisées au début de chaque partie. Au début de l'interface utilisateur du jeu, il réinitialise toutes ces valeurs. La première était les commandes terminées à zéro, les pizzas complétées à zéro, et également les pizzas gaspillées 2. Essayons ça. Nous devrons créer de nouvelles commandes pour démarrer le jeu. Jambon et ananas au four et pepperoni. Gâchez également certaines de ces pizzas, donc nous avons quelques statistiques, terminez le jeu. Ne voyons aucune mise à jour dans les statistiques passons à notre code et vérifions cela. Où pouvons-nous mettre à jour cela ? Nous mettons à jour cela dans l'interface utilisateur de fin de jeu. Ces trois lignes. Nous pouvons voir ici que l'éditeur de texte a mis en évidence un problème avec les trois points. Nous avons des commandes complètes qui devraient être terminées, vérifiez la variable. Terminez tout cela. On dirait que c'est le bon résultat. Commande numéro 1, qui est le jambon et l'ananas, ajoutez-le au four, puis deux pepperonis , complétez la commande. Ensuite, nous allons essayer de gaspiller une commande, nous ajouterons du pepperoni et du jambon, ajouterons ça au four, ça va être gaspillé. Maintenant, cliquez sur « Fin », voir une commande terminée, ce qui est correct. En ce qui concerne les pizzas terminées rappelez-vous que cette variable n'est mise à jour que lorsque le four a terminé la cuisson. Une fois que la minuterie, qui est réglée sur 20 secondes, n'est qu'une fois ce temps de cuisson terminé il sera ajouté en tant que pizza terminée. Nous avons aussi gaspillé une pizza, donc c'est bien. Presque maintenant terminé avec cette vidéo, nous avons quelques choses à corriger également. Si nous cliquons sur le bouton « Démarrer », nous verrons exactement de quoi il s'agit. Nous jetons un coup d'œil dans la cuisine, nous en avons 11 à différents ingrédients et aussi la minuterie est allumée 271 secondes, mais si nous cliquons sur « Démarrer », nous continuerons à partir de là plutôt que redémarrage et les ingrédients sont également doublés. Résolvons ces deux problèmes dans notre interface utilisateur de début de jeu. Tout d'abord, nous réinitialiserons nos ingrédients en sélectionnant la zone HTML avec sélecteur de requêtes. Sélectionnez les ingrédients et réinitialisez cela en définissant le code HTML interne sur une chaîne vide. S'occupera également du compte à rebours en définissant la variable de temps de compte à rebours pour qu'elle soit égale à la durée du jeu. Essayez-le. C'est aussi le gibier, jambon et l'ananas, ajoutez-le au four. Maintenant, si nous terminons, nous démarrons la minuterie qui a été réinitialisée. Nous ne voyons qu'un seul ensemble d'ingrédients. Enfin, juste pour terminer la zone des statistiques, j'ai ajouté une animation de fondu à notre CSS. Si nous entrons dans notre feuille de style, jetons un coup d'œil à la décoloration. Création d'une animation simple à fondre dans la zone de départ à la fin du jeu. Il suffit de l'ajouter comme nom de classe à notre élément. Pour regarder l'interface utilisateur de fin de jeu, dupliquez n'importe lequel d'entre eux, saisissez tous les départs. Cette fois, nous allons définir le nom de la classe comme étant égal à la décoloration. Bien, passons un dernier test à l'intérieur du navigateur. Commencez le jeu, sélectionnez une commande, terminez la première, le pepperoni. Terminez deux de ces pizzas pour enfin accéder à nos statistiques , mettre fin au jeu. Bien. Avec cela en place, je vais maintenant dire que ce projet est terminé. Mais il s'agit probablement de quelques éléments qui peuvent être améliorés et de quelques petits problèmes qui peuvent également être résolus. Mais ce projet vise à apprendre JavaScript. Je pense que cela nous a donné beaucoup de choses à pratiquer et une bonne occasion de montrer comment toutes ces petites choses que vous avez appris pendant ce cours travaillent ensemble pour créer quelque chose de beaucoup plus grand. . 50. Introduction À La Portée: Une partie importante mais souvent déroutante de JavaScript est la portée. portée tout au plus basique est un moyen de placer des variables en groupes. Chaque groupe autorise un certain nombre d'accès. Cela signifie que nous pouvons garder un certain contrôle sur ce qui a accès à nos variables. Cela est logique car les variables contiennent tous nos éléments de données importantes. Pourquoi voudrions-nous qu'ils soient modifiés pour y accéder alors qu'ils n'en ont pas besoin ? Nous en voyons ici un exemple simple. Nous déclarons une variable appelée score. Nous avons ensuite une fonction pour mettre à jour la partition, consigner sur la console. Tout va bien ici. Mais qu'en est-il de cela, nous décidons d'ajouter un bonus de 10 points au score. Cette variable est créée à l'intérieur de la fonction, puis se connecte à la console. Encore une fois, aucun problème ici. La console affiche une valeur de 11. Les problèmes commencent lorsque nous essayons d'accéder à cette variable bonus en dehors de la fonction. Cela provoquerait une erreur avec un message sur la ligne de bonus n'est pas défini. Nous savons qu'il est défini parce que nous voyons qu' il n'est pas accessible en raison de sa portée. Cela revient à ces groupes dans lesquels les variables sont placées. Étant donné que la variable bonus est créée à l'intérieur de la fonction contrairement à la partition. L'accès à cette fonction est limité à toutes les fonctions. Mais comme nous le savons avec JavaScript, il n'y a jamais que cela. Il y a également quelques autres choses que nous devons comprendre. Pour la première fois depuis longtemps, nous pouvons sauter dans une nouvelle section, et c'est le numéro 9, puis sauter dans la première leçon, qui est l'introduction à la portée, qui a un index.html. Pour contrôler le niveau d'accès à une variable, cela dépend de plusieurs facteurs. Comme nous venons de le voir, l'emplacement dans notre programme où nous déclarons la variable ainsi que le type de variable que nous créons également . Nous pouvons créer des variables avec var, let et const et elles ont également un effet sur la portée. C'est le même exemple que celui que nous venons de regarder, où nous déclarons une partition en utilisant le mot-clé var en dehors de la fonction. Ensuite, à l'intérieur de la fonction, nous mettons à jour cette variable. Nous ajoutons un bonus, puis nous les enregistrons sur la console. Allons dans la console. Nous pouvons confirmer ce que nous venons de voir. Ouvrez-nous et nous attendons à la valeur de 11. Cela fonctionne parce que la variable de score est déclarée au niveau supérieur de notre programme et cela ne signifie pas qu'elle doit être physiquement placée au sommet, comme c'est le cas ici. Cela signifie simplement qu'il n'est pas imbriqué ou déclaré à l'intérieur de quelque chose d'autre, comme une fonction. Cela signifie qu'il est de portée mondiale et qu'il est accessible à l'échelle mondiale. Si nous essayons d'accéder à la variable bonus en dehors de la fonction de l'endroit où elle a été déclarée. Nous n'avons pas déclaré à l'intérieur d'ici. Voyons ce qui se passe en bas. journal de la console de placement, une variable de bonus, qui renvoie ensuite une erreur de bonus n'est pas défini. Cette variable bonus est limitée à l'accès uniquement à l'intérieur de cette fonction. Parce que cette fonction a également sa propre portée. Cela peut être utile pour les variables lorsque non, nous n'avons pas besoin d'utiliser ailleurs. Cela nous donne la sécurité de savoir que d'autres sections de notre code ne peuvent pas modifier ces valeurs. Cette portée de fonction signifie également que nous pourrions créer plusieurs variables portant le même nom, mais à l'intérieur d'une fonction différente et si nous en avons besoin, elles seraient complètement indépendantes. Nous pouvons également voir ce niveau d'accès à l'intérieur de la console du navigateur. Si nous supprimons d'abord ce journal de la console actualisez ce navigateur pour effacer ce navigateur. Ensuite, si nous saisissons le score de mot à l'intérieur d'ici et que nous saisissons, cela renvoie la valeur d'un. C'est exact car nous avons la valeur initiale d'un, puis notre fonction s'exécute et augmente cette valeur pour qu'elle soit la valeur d'un. Tout cela fonctionne car cette variable est globale. Mais ce que nous essayons d'accéder à notre bonus qui correspond à cette fonction. Essayons ça. Entrez et nous voyons le même message d'erreur que celui du journal de la console. En plus de ces fonctions, ces variables globales sont également disponibles dans d'autres instructions de blocs, telles que les instructions for loops et if. Essayons une déclaration if juste en dessous de notre appel de fonction. S'il s' agit d'un score, placez-le dans un journal de console avec la valeur de partition et cela devrait fonctionner comme prévu. Cela s'applique également aux autres instructions de blocage. Les instructions de bloc sont essentiellement des sections enroulées accolades, donc nous avons la fonction que nous avons ici. J'ai les instructions if, qui a aussi ces accolades bouclées, mais aussi des choses comme pour les boucles et les boucles de while aussi. Récapitulatif. JavaScript a le concept de portée qui nous permet de définir le niveau d'accès à une variable comme cet exemple, score est déclaré dans la section la plus externe de notre code, qui signifie qu'il est dans la portée globale. Des variables globales comme celle-ci sont accessibles n'importe où, y compris à l'intérieur des blocs de code enroulés accolades, c'est-à-dire les fonctions et les instructions if. L'inverse est vrai, cependant, lorsque nous déclarons une variable à l'intérieur d'une fonction, elle a une portée de fonction et ne sera pas disponible en dehors de ce bloc. Par conséquent, protégez la variable contre la mise à jour ou la suppression d'ailleurs. 51. Portée de nidification: Jusqu'à présent, nous voyons que la portée ne semble fonctionner que dans un sens, de l'extérieur vers l'intérieur. Les variables déclarées en haut, telles que cette variable de niveau global, sont disponibles dans d'autres fonctions ou blocs tels que cette fonction ici. Nous pouvons continuer en imbriquant d'autres déclarations à l'intérieur d'autres, et la portée continue de la même manière. L'accès est transmis du haut et du bas à chaque niveau, mais les nouvelles variables déclarées à l'intérieur des nouveaux blocs restent restreintes. Vous n'êtes effectivement pas renvoyé à des niveaux supérieurs. Lorsque nous voyons cela dans la vidéo précédente où nous essayons d'accéder à cette variable bonus en dehors de cette fonction et dans la portée globale. imbrication de portée est appelée étendue lexicale en JavaScript et dans de nombreux autres langages. Jetons un coup d'œil à ce que cela ressemble en action. Pour commencer, nous avons la même configuration que précédemment. Tout d'abord, modifions ce journal de la console, incluons le texte de la fonction interne. Nous le faisons donc, c'est un peu plus clair car nous allons maintenant étendre ce code, alors c'est toujours à l'intérieur de cette fonction nous pouvons imbriquer un bloc supplémentaire, comme une instruction if. Une déclaration if, où nous pouvons vérifier si le bonus est vrai, et si c'est le cas, sur la base d'un nouveau journal de console avec le texte des instructions in-if. Ensuite, nous pouvons ajouter à la fin la variable de bonus. Nous sommes maintenant à l'intérieur d'une instruction de bloc imbriquée. Nous essayons d'accéder à notre variable bonus à partir du niveau ci-dessus, alors que pensez-vous qu'il se passera ? Eh bien, essayons ça. Assurez-vous que vous étiez dans la section étendue d'imbrication et que celle-ci est ouverte dans le navigateur. Actualisez. Nous pouvons voir comme prévu, le code de la fonction interne s' exécutera parce qu'il n'y a rien pour arrêter cela. Ensuite, un niveau inférieur à l'intérieur de l'instruction if, non seulement le journal de la console s'exécute, mais nous avons également accès à cette variable bonus. Cela signifie que les blocs d' instructions imbriqués peuvent accéder à des variables depuis un niveau d'étendue externe ou supérieur. Mais qu'en est-il de l' inverse ? Mais nous pouvons essayer cela en ajoutant une nouvelle variable à l'intérieur de nos instructions les plus imbriquées, donc var bonus2, n'importe quel nombre convient à ce test et nous pouvons y accéder au niveau supérieur, qui est cette fonction interne, écrire ajouter la valeur de bonus2, enregistrer et rafraîchir, et maintenant nous pouvons voir que nous obtenons la valeur de undefined. qui signifie que nous pouvons clairement voir que cela ne fonctionne pas dans l' inverse. Nous ne sommes pas définis pour que JavaScript soit conscient de l'existence de cette variable, mais une valeur non définie lui est attribuée. En guise de note, si bonus2 était déclaré avec les mots-clés let ou const, il générerait une erreur plutôt que d'avoir une valeur indéfinie. Mais plus d'informations sur cette question bientôt. L'imbrication peut également se poursuivre aussi profondément que vous le souhaitez. Essayons d'ajouter une nouvelle instruction de bloc, telle qu'une boucle while. Encore une fois, il dispose également ses propres accolades pour enfermer le code et créer une nouvelle portée intérieure. abord, supprimons le bonus2 dont vous n'avez plus besoin. Nous pouvons le supprimer du journal, puis à l'intérieur de notre section la plus profondément imbriquée, nous pouvons aller plus loin. Crée une nouvelle variable appelée nombres sur laquelle vous allez faire une boucle et définissez cette variable comme un tableau de toutes les valeurs à l'intérieur d'ici. While loop, nous avons également besoin d'une valeur initiale que nous pouvons stocker dans i. Réglez cette valeur à zéro. Nous pouvons continuer à exécuter cette boucle alors que je suis inférieure à la longueur de notre tableau, auquel nous pouvons accéder avec des numéros, le terrain à l'intérieur de notre bloc de code ou notre section de portée. Placer un nouveau journal de console avec des numéros i, qui imprimeront chacun de ces numéros individuellement, donc ne restez pas coincé dans une boucle infinie. Nous pouvons augmenter la valeur de i à chaque fois. Essayons ça. Actualisez. Comme il va tomber les journaux de la console d'ici. Encore une fois, à partir de cette section la plus profondément imbriquée, nous accédons toujours à notre variable à partir d'un niveau supérieur, et nous pouvons aller encore plus loin et tester notre variable bonus et l' essayer à l'intérieur de notre section imbriquée. Collez ça dans, et il y a notre valeur de 10. En sortant également de l'exemple précédent, vous pouvez probablement dire ce qui va se passer si nous essayons de faire les choses dans l'autre sens. Si vous créez une nouvelle variable à l'intérieur de cette boucle While, alors sautez à l'intérieur d'ici. Mais le journal avec la nouvelle variable bonus3, qui est égale à n'importe quelle valeur, et ensuite nous pouvons essayer d'y accéder au niveau supérieur de notre fonction, alors ajoutez-le à l'intérieur de notre bonus de journal de console 3, rafraîchissez. Nous y voyons la valeur indéfinie. C'est ainsi que nous pouvons utiliser la portée dans les sections de blocs imbriquées. Nous avons également vu des exemples sur la façon dont portée n'est accessible que d'une seule façon. Les sections imbriquées, telles que notre boucle while, accèdent à n'importe quelle variable à partir d'une portée élevée, mais cela ne fonctionne pas dans l'inverse. 52. Bloc et fonction portée: Passez dans le fichier suivant qui est la portée du bloc et de la fonction. Nous ne sommes pas trop confus sur ce que nous allons maintenant regarder. J'ai gardé le même exemple de fonction que précédemment. Avec cet exemple ici, nous avons plusieurs variables imbriquées à l'intérieur de cette fonction à différents niveaux. Les fonctions se comportent différemment des autres blocs d'instructions. chaque fois que je mentionne des blocs, je fais référence au code entouré d'accolades, comme ces instructions if et aussi nos boucles. Avec une fonction comme celle-ci, nous ne pouvons pas accéder aux variables imbriquées à l'intérieur depuis l'extérieur. Si nous essayons de placer un journal de console juste après notre appel de fonction, accédez à notre bonus3. Vous voyez que le bonus3 n'est pas défini et le même pour d'autres niveaux tels que le bonus régulier. Nous avons également le même problème, mais peu importe que les variables situées au niveau supérieur d'une fonction soient imbriquées à l'intérieur d'autres blocs. Même si nous déclarons ces variables à l'aide let ou de const, ce sera également le même. [inaudible] var de laisser les mêmes résultats et aussi le même pour const. Retourne à var. C' est ainsi qu'une fonction se comporte. Il a sa propre portée et nous savons exactement où nous en sommes avec les variables déclarées à l'intérieur. Mais ce n'est pas simple avec les autres blocs. Si nous passons d'une fonction à un bloc, par exemple une instruction if, voyons ce qui se passe. Déplacez le mot-clé fonction et nous pouvons dire que si le score est égal à 0, rappelez-vous que le score est déclaré dans la portée globale. Nous avons toujours le console.log pour le bonus en bas. Maintenant, si nous essayons de nous rafraîchir, nous devons également supprimer notre appel de fonction. Cette variable bonus est désormais disponible. Mais qu'en est-il d'une variable profondément imbriquée telle que bonus3 ? Essayons ça. Rafraîchissez et celui-ci fonctionne également. Nous pouvons voir ici que les blocs se comportent différemment des fonctions concernant la portée. Cela se produit parce que les instructions de bloc n'ont pas leur propre portée. Eh bien, ce n'est pas strictement vrai parce que c'est vrai pour cet exemple que nous voyons ici. Mais en tant que développeur JavaScript, nous avons plusieurs choix en fonction de la façon dont nous déclarons nos variables. Les variables déclarées avec le mot-clé var, que nous avons délibérément utilisé jusqu'à présent, se comporteront toujours comme ceci. Mais l'utilisation de const ou let inside de ces blocs supprimera l'accès de l'extérieur et sculptera sur leur bloc actuel. Si nous voulions nous assurer que cette variable bonus n'était disponible qu' à l'intérieur de ce bloc et non à l'extérieur de ce que nous avons ici, nous devons nous assurer de déclarer cette variable l'aide de la const ou de la let mot clé. Essayons maintenant le bonus. Nous n'avons plus accès et aussi, la même chose pour const. Tout comme un récapitulatif lorsque nous avons déclaré des variables à l'intérieur des fonctions, nous n'avions pas le choix de restreindre l'accès à l'intérieur du bloc de fonctions ou assurer que c'est accessible de l'extérieur. Mais lorsque nous utilisons d'autres blocs, comme une instruction if ou une boucle, ces blocs nous permettent de choisir si nous voulons utiliser scope dans ou non. 53. C'est un grillage: Plus tôt dans le cours, j'ai brièvement mentionné un terme appelé hissage, et j'ai promis d'y revenir. C'est ce que nous allons maintenant couvrir. Nous avons déjà vu quelques exemples d'hébergement. Prenons d'abord quelques exemples pour voir ce qui se passe. Les fichiers de titre de cette section de levage contiennent quelques exemples et le premier peut être familier. C'était un exemple que nous avons utilisé précédemment dans la section des fonctions, et en haut, nous avons deux tableaux. Nous avons le pain et les brownies. Ensuite, nous avons une configuration de fonctions dans deux styles différents. Nous avons la déclaration de fonction ainsi que l'expression de la fonction. Les deux font la même chose que vous vérifiez si un ingrédient est présent dans le tableau sélectionné. Pourquoi est-ce que je vous montre à nouveau ce même exemple ? Eh bien, remarquez ici comment nous appelons la fonction dans la console de connexion haut avant la création de la fonction . Nous appelons ça « chèque ». Puisque notre code est lu de haut en bas, nous entrons dans l'appel de la fonction CheckAllergies avant même qu' il ne soit créé, que ce soit dans la déclaration ou dans la version de l'expression. Passons dans le navigateur et voyons ce qui se passe avec ce journal de la console. Voyons si nous récupérons une valeur renvoyée. Cela fonctionne avec la déclaration de fonction, mais qu'en est-il de l' inverse ? Nous commentons la déclaration et rétablissons l'expression, actualisation et cela renvoie une erreur indiquant que nous ne pouvons pas accéder à notre fonction avant l'initialisation. Ci-dessous, nous avons l'exemple 2, qui est une version vraiment simplifiée du problème. Nous créons un journal de console et nous nous connectons la valeur de la variable avant sa création. Nous l'avons déjà vu à l'intérieur de la console avant que cela fonctionne. Nous supprimons simplement cela avec l'actualisation d'erreur. Nous pouvons voir que cela fonctionne parfaitement bien. Cela fonctionne même si nous accédons à notre variable de nom avant qu' elle ne soit déclarée et cela devient encore plus bizarre si nous essayons de réattribuer une valeur de nom avant qu'elle ne soit déclarée. En haut, juste au-dessus de notre journal de console. Ce que nous allons faire, c'est de réaffecter ou de mettre à jour cette variable avec une nouvelle valeur avant même d'être créée. Cela fonctionne également. La nouvelle valeur mise à jour s'affiche dans la console. Bien que ces exemples soient variés, ils montrent tous une chose fondamentale. Nous pouvons souvent accéder aux variables avant même qu'elles ne soient déclarées. Cela nous amène à un terme appelé hissage. Juste avant de nous lancer dans ce domaine, je veux vous montrer autre chose, ce qui est une variance du dernier exemple. Que diriez-vous tout en bas si un journal de console transmettait la valeur du rôle ? Nous déclarons ensuite cette variable sans initialiser avec une valeur, puis nous lui donnerons une valeur à la fin. Essayons ça. Enregistrez et rafraîchissez. Vous pouvez voir cette version légèrement modifiée renverra la valeur indéfinie. En regardant ces deux exemples, cela peut sembler assez étrange car nous examinons comment accéder aux variables avant qu'elles ne soient déclarées et que les deux exemples sont assez similaires. hissage est souvent décrit comme le processus de JavaScript, en prenant nos variables et nos déclarations de fonctions et en les déplaçant vers le haut du programme ou vers le haut de leur portée, ce qui signifie qu'ils sont déclaré et prêt à y accéder à tout moment pendant notre code. Cela expliquerait beaucoup ce que nous venons de voir. Aucun code n'est physiquement déplacé ou déplacé vers le haut de notre programme. C'est le processus où nos variables et déclarations de fonctions sont placées en mémoire au moment de la compilation. Le code lisible par l'homme que vous écrivez, tel que JavaScript, peut être lu par un ordinateur. Il doit d'abord être converti ou compilé en coulisses en un ensemble d' instructions que les ordinateurs peuvent comprendre. C'est pendant cette phase de compilation notre code est lu ou passé pour la première fois. Nos variables et déclarations de fonctions sont ensuite stockées en mémoire. Pour clarifier, au cours cette phase de compilation, lorsque ce programme est passé pour la première fois, variables comme celle-ci sont d' abord stockées en mémoire, c'est pourquoi nous pouvons y accéder avant même que nous ayons l'impression d'avoir les a créés. n'y a pas de magie cachée dans les coulisses, pas de déplacement de notre code vers le haut du programme. C'est simplement notre code en cours de lecture et une référence à toutes les variables et fonctions stockées en mémoire. Cela explique quelques éléments tirés de nos exemples. d'abord, si nous examinons cet exemple de fonction en haut. Le premier exemple, la déclaration de fonction. Les déclarations de fonctions sont hissées. C'est pourquoi nous pouvons appeler cette fonction avant même qu'elle ne soit déclarée, ce que nous voyons avec notre journal de console. Cependant, les expressions de fonction ne sont pas hissées, et c'est pourquoi nous avons constaté une erreur dans la console. Par exemple 2, le tout premier. Puisque ce nom de variable de Chris est hissé, c'est pourquoi nous pouvons y accéder avant même qu'elle ne semble avoir été créée, bien que cela soit différent pour la deuxième version, qui revient en arrière indéfini. Pourquoi pensez-vous qu' il y a une différence entre ces deux variables ? Eh bien, il est important de comprendre ce qui est stocké exactement. Pour mieux comprendre cela, revenons rapidement aux bases des variables. Plus tôt, nous avons examiné certains de ces mots-clés liés à des variables et une déclaration est lorsque nous déclarons une variable que vous souhaitez utiliser, puis lui attribuer un nom. Une fois que nous lui transmettons une valeur réelle, on parle d'initialisation. Vous avez une déclaration et une initialisation. Revenez à cet exemple pour notre variable de rôle. Ici, nous avons déclaré une variable vide , puis nous l'avons initialisée avec la valeur dev. Au début de la phase de compilation, seule la déclaration de variable vide est hissée et stockée en mémoire. Cependant, bien que la ligne suivante où nous l'initialisons, cette valeur de dev a été ignorée à ce stade. À ce stade, on lui attribue la valeur indéfinie. C'est pourquoi nous voyons non défini dans la console. Cependant, avec les exemples précédents depuis que nous l'initialisons avec une valeur Chris, lors de la phase de compilation, sera affectée à la variable cette valeur sera affectée à la variable plutôt qu'indéfinie. Pour rendre les choses encore plus déroutantes, nous devons nous rappeler ici que nous utilisons le mot-clé var pour ces deux exemples. Son comportement est également différent avec le mot-clé let ou const. Si nous changeons notre rôle vers le bas pour être laissé, voyons ce qui se passe à l'intérieur d'ici. Nous nous connectons à la valeur du rôle, actualisons et maintenant, plutôt que la valeur indéfinie attribuée à cette variable, nous obtenons maintenant une erreur dans la console. Cette erreur indique que nous ne pouvons pas accéder à notre rôle avant l'initialisation. En effet, lorsque nous utilisons le mot-clé const ou let, il faut d'abord le déclarer avec une valeur avant de pouvoir y accéder. Si nous ne lui attribuons pas de valeur au préalable, elle recevra toujours une valeur indéfinie en coulisses, mais nous devons quand même la déclarer avant d'essayer d'y accéder dans notre code. Cela peut être un sujet difficile à comprendre surtout au début, car le hissage s'applique à ces trois mots-clés, il s'applique à let, var et const. Cependant, var fait les choses un peu différemment comme nous venons de le voir. Mais même si vous ne comprenez pas complètement ce qui se passait à ce stade, avoir une compréhension de base que les variables sont hissées peut vous épargner beaucoup de problèmes à l'avenir si vous exécutez dans une erreur similaire. 54. Zone morte temporelle: La zone morte temporelle est quelque chose qui semble plus difficile qu'elle ne l'est en réalité. La plupart des concepts qui l' entourent ont été abordés dans les vidéos précédentes. regardant le code dans la section script en bas, nous avons un journal de console et une variable. Nous savons qu'une variable créée comme celle-ci avec le mot-clé var trouvera accès avant d' être déclarée. Cela s'explique par le fait que la variable est hissée au sommet de sa portée. Nous pouvons le voir en accédant d'abord à cela et je le mettrai à l'intérieur de la console pour que tout fonctionne parfaitement. Mais comme nous l'avons également découvert, si nous utilisons les mots-clés let ou const les plus récents, le comportement est différent. Une autre façon d'examiner cela serait peut-être d' initialiser une variable avant de l'utiliser. Si nous supprimons la valeur et que nous l'initialisons à propos du haut, le nom est égal à Chris. Voyons ce qui se passe à l'intérieur d'ici. Nous avons toujours une erreur car nous essayons d'accéder à notre nom trop tôt avant même qu'il ne soit initialisé. Mais qu'en est-il si nous basculons autour des lignes 1 et 3 ? Eh bien, si nous en plaçons un tout en bas et que nous déplacons ensuite le mot-clé let vers le haut, cela renvoie plutôt la valeur indéfinie. Cela est également abordé dans la vidéo précédente. Si nous n'attribuons pas de valeur à une variable à l'aide du mot-clé let avant de l' utiliser, elle sera initialisée avec la valeur non définie. Const, let et var obtiennent tous une valeur indéfinie si nous ne définissons pas la valeur initiale avant d'essayer d'accéder à la variable. La différence est que var est accessible avant même qu'il ne soit déclaré, comme nous l'avons vu dans la vidéo précédente. En quoi tout cela est-il lié à la zone morte temporelle ? Eh bien, c'est simplement un nom donné à quelque chose que nous avons déjà vu lors de l'utilisation des mots-clés const et let. Il s'agit du nom pendant une période allant du moment où nous entrons dans une portée donnée, jusqu'au moment où une variable est initialisée ou accessible. Une variable peut exister, mais elle n'est pas encore initialisée. Si cela se produit, on dit qu'il se trouve dans la zone morte temporelle et nous ne pouvons pas y accéder ou l'utiliser comme nous le voulons. Si tout cela semble un peu déroutant, simplifions un exemple pour essayer de vous donner une meilleure compréhension. Ce que nous allons faire, c'est que nous supprimerons notre première ligne compte tenu du journal de la console et nous dirons que le nom est égal à une valeur. Si nous essayons cela, nous savons que cela ne fonctionnera pas comme nous l'avons vu dans les exemples précédents. En effet, depuis le début de la portée actuelle, nous entrons dans la zone morte temporelle. Ajoutons un commentaire, la zone morte temporelle commence. Tout cela se situe au niveau supérieur de notre script, donc c'est dans la même portée. Il n'est pas imbriqué dans une portée interne telle qu' une fonction ou une instruction if. Ensuite, lorsque notre variable est initialisée à la ligne 14, la zone morte temporelle actuelle se termine et la variable est désormais accessible. Sa zone de début et de fin s'applique également à n'importe quelle autre portée. Par exemple, si cela se trouvait dans un certain bloc, exemple une fonction ou une instruction if entourée d' accolades, il en va de même. Dans cet exemple, il peut sembler que l'ordre du code est le facteur déterminant, car la déclaration de variable se produit après avoir essayé d'y accéder dans le journal de la console. Cependant, ce n' est pas le cas. Comme mentionné précédemment, la zone morte temporelle est une période allant du moment où nous entrons dans une portée donnée, jusqu'au moment où une variable est initialisée. C'est l'heure qui est importante et non l'ordre du code puisque le mot temporel se rapporte réellement au temps. Nous pouvons le voir si nous enveloppons ce journal dans une fonction. Créez une fonction autour de la partie supérieure. Disons d'obtenir un nom. Avec cette console, connectez-vous à une fonction, puis appelez notre fonction. Cependant, nous pouvons nous attendre à ce que cela provoque une erreur, comme nous l'avons vu précédemment. En regardant l'ordre du code, le journal de la console se produit toujours avant de déclarer notre variable. Il est compréhensible que vous vous attendiez peut-être à une erreur. Cependant, ce n' est pas le cas car la fonction est effectivement appelée en dehors de la zone morte temporelle. La zone morte temporelle n' est pas l'ordre du code, c'est le temps nécessaire pour rendre cette variable accessible. Il y a des choses compliquées à saisir ici ainsi que dans les dernières vidéos. Je ne m'attends pas à ce que vous obteniez complètement tout au premier essai, mais je pense qu'il est important de savoir que ces choses existent, car un jour, vous risquez de rencontrer un problème à cause d' elles. et cela peut simplement vous inciter à réfléchir à ces concepts et façon dont ils pourraient affecter votre code. Comment nous simplifier la vie et minimiser les erreurs ? Eh bien, un moyen simple pourrait être de mettre const et de laisser les variables au début de leur portée requise, que ce soit en haut d'une instruction if, en haut d'une fonction, ou même en haut de notre scripts. De cette façon, ils seront toujours prêts à être utilisés en cas de besoin. 55. Fermetures: Lorsque nous créons des fonctions, elles n'ont pas toujours besoin d'être autonomes. Ils peuvent plutôt être imbriqués dans le projet de démarrage. Dans cette section de fermeture, vous pouvez voir à l'intérieur d'ici que nous avons une zone de script vide. Nous allons maintenant créer une fonction simple pour démontrer l' effet des fermetures. Accédez à la section Script et créez une fonction régulière à l'intérieur. Je vais nommer celui-ci à l'intérieur avec une variable. Nous dirons la valeur extérieure. J'ai mis ça sur une chaîne extérieure. Nous pouvons maintenant imbriquer une fonction supplémentaire à l'intérieur d'ici. Je vais simplement faire sauter notre variable pour créer une nouvelle fonction. Cette fois avec le nom de l'intérieur. Nous ferons ce que nous avons fait juste au-dessus nous allons créer une nouvelle variable. Celui-ci peut avoir une valeur égale à la chaîne interne. Ensuite, à l'intérieur de cette fonction interne, nous créerons deux journaux de console. La première concerne valeur de la valeur intérieure, qui est contenue dans cette même fonction. Nous allons dupliquer cela et placer notre valeur extérieure. Nous savons, d'après des vidéos précédentes, que lorsque nous travaillons avec scope et lorsque nous imbriquons la portée dans des fonctions ou des crochets comme celui-ci, nous pouvons toujours accéder aux variables créées dans des niveaux externes, comme celui-ci ici. Fondamentalement, une portée interne peut accéder à des variables à partir d'une portée externe. Pour que cette fonction interne fonctionne et place nos journaux de console dans le navigateur. Nous devons appeler cela à l'intérieur d'ici, que l'on appelle notre fonction interne qui vous rend ce que l'on appelle notre fonction interne qui vous rend imbriqué à l'intérieur de la fonction externe. Enfin, nous appellerons notre fonction externe principale, nous le ferons également à l'intérieur d'un journal de console. Assurez-vous de placer les supports. Ensuite, testez cela en sautant dans la console. Nous voyons l'intérieur, nous voyons l'extérieur, ce qui est nos deux journaux de console. Ensuite, la troisième en bas est la valeur de notre fonction qui n'est pas définie. Nous pouvons ignorer cette valeur non définie pour le moment car nous n'avons rien renvoyé de cette fonction. Mais nous savons maintenant que cela fonctionne puisque nous avons nos deux journaux de console, tandis que nous pouvons accéder aux deux variables depuis l'intérieur de cette fonction interne. Nous pouvons d'abord accéder à la valeur interne car elle est locale à cette fonction. Nous pouvons également accéder à la valeur extérieure raison de la chaîne de portée. La portée ou la portée lexicale, que vous avez mentionnée, permet à cette fonction interne d'accéder à nos deux variables. Qu'en est-il de cette fonction interne qui a été retirée de ce paramètre actuel. Je ne parle pas de déplacer physiquement la fonction interne ailleurs. Mais au lieu de cela, qu'en est-il si nous l'avons stocké dans une variable et que nous l' utilisions ailleurs ? Eh bien, pour pouvoir le faire, au lieu d'appeler la fonction interne tout en bas, nous la renvoyons plutôt, donc nous allons supprimer ceci, renvoyer la valeur de l'intérieur. L'important à comprendre ici, c'est que nous rendions la fonction interne réelle. Lorsque nous appelons cette fonction externe. Nous pouvons le voir à l'intérieur de la console. Nous nous connectons toujours à cela et exécutons également cela. Si nous l' actualisons, nous verrons maintenant cette fonction interne à l'intérieur de la console. Apportez avec moi ici sur celui-ci. Ce que nous faisons ici à ce stade, c'est que nous appelons cela un externe, qui renvoie la fonction interne. Cette fonction interne est fait un élément d'information autonome. Il n'a aucune référence à cette fonction externe ni à aucun contenu à l'intérieur. Prenons cette valeur intérieure, que l'on peut voir dans le journal de la console. Installez-le à l'intérieur d'une constante appelée Interact. Maintenant, au lieu de directement, je vais mettre la fonction extérieure. Nous pouvons nous placer dans notre actualisation constante et nous pouvons toujours voir que nous avons accès à cette fonction interne. Tout ce que nous faisons ici, c'est créer une variable qui stocke une référence à cette fonction renvoyée. Cette variable peut désormais être utilisée ailleurs. Maintenant, ce que nous avons, c'est une indépendance de référence de fonction de la fonction extérieure d'origine. Cela nous laisse maintenant une question clé. Cette fonction interne que nous avons stockée dans une constante accède à cette variable de l'extérieur. Eh bien, nous pouvons le découvrir en exécutant cette fonction plaçant les crochets juste après cette constante. Dites ceci, rappelez-vous que nous essayons toujours d'accéder à sa valeur extérieure. Rafraîchissez et nous voyons toujours nos deux journaux de console. Ce qui signifie que oui, nous pouvons toujours accéder à ces variables externes. Cela peut sembler assez étrange. Nous accédons à des variables qui ne semblent pas avoir de sens avec ce que nous avons déjà appris sur la portée. Tout cela concerne quelque chose qu'on appelle des fermetures. Une fonction, tout comme notre fonction interne ici, nous nous souviendrons également à quelles variables elle a accès. Dans notre cas, c'est cette valeur extérieure. C'est ce qu'on appelle une fermeture. La fermeture consiste à mettre une clôture autour de tout ce à quoi nous avons accès. Rappelez-vous toutes ces variables partout où cette fonction pourrait être appelée à l'avenir. Cela peut être utile maintenant, car au lieu de créer une valeur externe en tant que variable globale, nous pouvons plutôt restreindre cet accès à l'intérieur de cette fonction tout en autorisant tout type interne imbriqué. fonctions pour l'utiliser. Notez également que ce terme de fermeture ne peut se produire qu'à l'intérieur des fonctions. Ce n'est toujours pas clair. Jetons un coup d'œil à un autre exemple utilisant le score du joueur, qui doit être mis à jour. Nous allons simplement commenter tout cela et en bas. Créez une nouvelle variable. Défilons l'écran pour être égal à 0. Créez ensuite une nouvelle fonction appelée Update Score. Ensuite, ici, ce que nous allons faire, c'est réattribuer notre score avec la valeur du score actuel plus 10. Connectez-vous à la console. En bas, appelez notre fonction. Essayons ça. Cela devrait être une valeur de 10 puisque nous avons notre score initial de 0. Nous appelons ensuite notre fonction qui ajoute 10 à la partition originale, puis imprime la nouvelle valeur. De plus, si nous le mettons à jour plusieurs fois en appelant notre fonction plusieurs fois, ils devraient également fonctionner. Tout va bien, cela fonctionne comme nous le voulions, mais le score que nous avons en dehors d' une fonction est classé comme variable globale. Il peut également être mis à jour depuis d'autres zones. Au lieu de cela, il sera préférable d'avoir plus de contrôle sur cette variable et ne la mettre à jour qu'à l'intérieur des fonctions créées à cet effet. Vous pouvez penser que nous allons déplacer cette variable dans la fonction. Nous pouvons faire glisser ça vers le bas. Cette technique crée une étendue de fonction et sa variable n'est pas accessible de l'extérieur. Cela résout un de nos problèmes, mais cela en crée un autre. Voyons cela à l'intérieur du navigateur, rafraîchissez-le. Nous récupérons la valeur de 10 fois libres car la variable se réinitialise à zéro au début de chaque appel de fonction. De plus, s'il s'agissait d'un vrai jeu, nous pourrions également avoir accès à la variable de score en dehors de cette fonction. Peut-être faire quelque chose comme l'affichage à l'écran à l'utilisateur. Pour y parvenir, nous pouvons utiliser une fermeture pour imbriquer dans une fonction afin de mettre à jour la variable de score. Nous avons le wrapper externe du score de mise à jour. Ensuite, nous pouvons créer une nouvelle fonction imbriquée dans une fonction appelée augmentation avec notre variable de score à l'intérieur ainsi que le journal de console qui est la fonction interne, comme auparavant. Stockez également cette fonction dans une nouvelle variable. Le premier, nous dirons const, nouveau score est égal à cette valeur renvoyée. Nous pourrions toujours appeler cette fonction plusieurs fois si vous le vouliez. Mais cette fois, nous devons faire référence à cette nouvelle partition, donc elle change. Laissant également entre parenthèses juste après pour que nous exécutions réellement cette fonction. Essayez ensuite cela en rafraîchissant. Maintenant, cela a augmenté de 10 à chaque fois que nous appelons notre fonction. Cela résout maintenant les problèmes que nous avions auparavant avec la fonction de mise à jour originale du score. Avant de procéder à ces modifications, nous réinitialisons la variable de score à zéro. Cela signifie que, comme nous l'avons déjà vu, chaque fois que nous appelons cette fonction, le résultat était toujours de 10 et il ne l'ajoutait pas à chacun des appels. Les fermetures résoudront ce problème en mémorisant la variable de score en mémoire chaque fois qu'elle est appelée. Une variable de score a également portée plus étroite, de sorte que nous ne pouvons pas être mis à jour accidentellement ailleurs, comme nous le pouvions s'il s'agissait d'une variable globale. Pourtant, si nous n'avions toujours pas besoin d'accéder à cette variable de score depuis l'extérieur de cette fonction. Nous pouvons renvoyer une valeur et la stocker dans une nouvelle variable. signifie que nous pourrions toujours accéder à cette partition depuis l'intérieur de la fermeture et l'afficher à l'utilisateur final. 56. Un Peu De Fond: Cette nouvelle section contient de nombreux mots à la mode tels que : callbacks, asynchrone, synchrone, ainsi que quelques concepts qui peuvent être difficiles à comprendre sans connaître un peu nombreux mots à la mode tels que : callbacks, asynchrone, synchrone, ainsi que quelques concepts qui peuvent être difficiles à comprendre sans connaître un peu les raisons pour lesquelles nous les utilisons. Cette vidéo va essayer de les expliquer en termes simples et ce que chacun fait exactement. En commençant par le code synchrone. Chaque ligne de code ressemble un peu à une tâche, et chacune est terminée dans l'ordre. La ligne 1 sera lue, attendez que cela soit traité, puis passez à la ligne 2. Nous attendrons également que cela se termine avant de passer à la troisième ligne. Sur un petit programme comme celui-ci, cela n'a pas vraiment d'importance car les opérations sont rapides et faciles à traiter, et vous ne remarquerez aucun temps d'attente entre chacune d'elles. Mais dans les cas extrêmes, si une ligne n'a jamais terminé le traitement ou a pris beaucoup de temps, nous serons coincés. Sur le navigateur, nous pouvons voir quelques exemples simples de cela, alors sautez dans cette nouvelle section qui est le numéro 10, Async JavaScript. Dans une petite section d' arrière-plan nous avons deux exemples, mais nous allons maintenant nous concentrer sur l'exemple 1 qui n'est pas commenté et le HTML en haut. Nous avons le bouton et le titre de niveau 3. Ignorez l'image pour l'instant, c'est lié au deuxième exemple. Tout ce que nous faisons ici, c'est saisir ces deux premiers éléments. Nous interrogeons le sélecteur, nous sélectionnons notre bouton. Ajoutez un EventListener qui écoutera le clic et cette fonction déclenchera une alerte, puis, juste après, nous saisirons notre en-tête et définirons efficacement le contenu InnerText étant donné deux étapes de cette fonction. Les alertes peuvent être bonnes, par exemple, car elles bloquent l'exécution du code jusqu'à ce que nous le fermions. Maintenant, si nous ouvrons cela dans le navigateur, copiez le chemin d'accès, collez-le et actualisez, nous voyons notre bouton qui va maintenant écouter le clic. Je clique dessus, nous verrons alors la fenêtre contextuelle qui est la toute première ligne de notre fonction, puis si nous cliquons sur ce bouton, elle se ferme. La ligne suivante de la fonction est alors appelée, ce qui définira le texte intérieur de l'en-tête, de sorte que nous avons un ordre clair des choses en cours d'exécution. Nous avons l'alerte, puis une fois que cela est terminé, il passe à la définition du texte. Dans cet exemple, chaque ligne ne sera pas exécutée sur la précédente comme terminée. C'est ainsi que fonctionne le code synchrone. L'un des problèmes avec le code synchrone est qu' une seule ligne de code peut bloquer l'exécution du reste du programme, ce qui peut être évité en utilisant du code asynchrone. Le code est toujours lu dans l'ordre ligne par ligne, mais il n'est pas nécessaire d' effectuer une opération avant de passer à la ligne suivante. Effectivement, tout le code est exécuté puis déclenché un par un. Nous devons savoir ce qu'il faut faire lorsque chaque tâche est terminée, et c'est la partie clé ici, puis sur la procédure à suivre si le code récupère un succès ou s' il y a une erreur. En regardant notre deuxième exemple, il suffit de décommenter cette section. Ici, nous avons quelque chose qui s'appelle Fetch. Il s'agit de l'API Fetch, et n'oubliez pas que nous avons certaines API Web telles que Canvas. Cette API Fetch nous permet de récupérer des choses sur un réseau, qui pourrait être un autre site Web, une base de données, un serveur ou une API externe créée par quelqu'un d'autre et ce qui est important Voici que l' appel de récupération est asynchrone. Il s'exécutera et permettra ensuite au reste du code ci-dessous de s'exécuter également avant qu'il ne soit terminé ou qu'il récupère des données. L'idée principale ici est que nous obtenions des données d'ailleurs que de l'intérieur de notre propre application. Cet exemple montre comment sélectionner une image de Wikipédia, puis stocke la valeur renvoyée dans une variable. Commençons par consigner la valeur de retour de cette variable dans la console. Il suffit de décommenter ce premier exemple, puis de le placer dans un journal de console avec la valeur de la variable ImageSource du navigateur. Plongez dans la console et nous verrons quelque chose qui s'appelle une promesse. Nous recevons une promesse et le résultat est entre parenthèses, alors de quoi pensez-vous que cela pourrait être le cas ? Eh bien, nous allons bientôt examiner les Promesses plus en détail, mais cela remonte au point important que j'ai déjà mentionné. Lorsque vous utilisez du code asynchrone ou asynchrone pour faire court, nous devons gérer ce qui se passe si le code récupère un succès ou s' il y a eu une erreur, et une Promise peut gérer cela pour nous. Lorsque nous avons demandé cette image pour la première fois à Wikimédia, nous ne savons pas pour le moment si le site Wikimédia est en panne, fonctionne lentement ou s'il y a un problème de connexion entre nous et leur serveur. Ce journal de console ci-dessous a été immédiatement appelé après notre récupération, il a donc été exécuté avant même que l' image ne revienne. C'est pourquoi nous obtenons le résultat de l'attente car nous n'avons jamais eu d'image pour se connecter à la console. Par exemple, si cela est en attente et que nous n' avons pas d'image, que diriez-vous si nous essayons de retarder le journal de la console de trois secondes ? Eh bien, nous allons couper ça. Nous pouvons placer un délai d'attente qui déclenchera une fonction, et disons trois secondes. À l'intérieur de la fonction, placez un autre journal de console avant, actualisez et vous pouvez voir au bout de trois secondes, notre promesse est maintenant remplie. Nous avons une réponse, donc attendre trois secondes, cela nous donne le temps de récupérer les informations ou l' image dont nous avons besoin. Au lieu de cela, s'il s'agissait d'un code synchrone, le reste du code devra attendre sur cette image pour revenir pendant trois secondes, même si nous n'avions pas besoin de l'utiliser. Sinon, si nous ne l'avons jamais géré de cette façon, la ligne qui suit immédiatement notre appel de récupération peut essayer accéder à notre image que vous n'avez pas récupérée, ce qui provoque une erreur. Dans cette optique, nous examinerons promesses et autres moyens de gérer une réponse dans les prochaines vidéos. 57. Fonctions de rappel: Cette vidéo va vous présenter une fonction appelée fonction de rappel. Un rappel est juste le nom donné à une fonction qui est appelée après que quelque chose s'est produit. L'anomalie utilisée comme étape suivante à franchir une fois que quelque chose est terminé. D'après ce que nous avons déjà couvert, nous savons que le code asynchrone peut prendre un certain temps. Il peut s'agir d'obtenir des données d'une base de ou même de les enregistrer dans une base de données à titre d'exemple. Voyons comment cela peut affecter notre code. Le code de cet exemple commence par une liste vide et non ordonnée. Maintenant, notre script dispose d'un tableau d'utilisateurs vide. Une application typique avec des utilisateurs aurait probablement une fonction permettant d' appeler notre base de données et de mettre à jour le tableau de cet utilisateur avec le résultat. Nous avons une fonction pour simuler cela et ajouter deux nouveaux utilisateurs. Tout ce que nous faisons à l'intérieur de cette fonction, c'est d'accéder à notre tableau d'utilisateurs et de le placer sur des objets utilisateur. Ensuite, une fois que nous aurons récupéré nos utilisateurs de notre base de données, que nous assimilons ici, ce que nous voudrons probablement faire ensuite est de créer une nouvelle fonction qui récupère tous nos utilisateurs en boucle chacun, puis il les affiche dans le navigateur. Jetons un coup d' œil à la façon de procéder. Nous allons créer une fonction, disons ListUsers. Sous ListUsers va d'abord accéder à un tableau d'utilisateurs, nous allons passer en boucle avec FoReach, qui exécutera une fonction pour chacune de nos valeurs de tableau ou transmet le nom de variable de l'utilisateur. Ensuite, exécutez cela avant d'avoir cette liste vide non ordonnée, nous pouvons créer un nouvel élément de liste pour chacun de nos utilisateurs. Const elements est égal à Document.CreateElement, créez un nouvel élément de liste, puis ajoutez le contenu texte à l'intérieur, qui est le nom d'utilisateur. Documents.createTextNode où nous pouvons utiliser notre variable utilisateur et accéder à la propriété name. Comme toujours, nous devons créer notre processus en trois parties, qui consiste à créer les éléments, à créer le contenu, puis à la troisième partie, il faut les fusionner ensemble. Pour récupérer les éléments parents, nous appelons AppendChild, ajoutons le nom, puis ajoutons cet élément à notre liste non ordonnée. Commencez par saisir notre liste non ordonnée avec Document.QuerySelector, ajoutez-la dans notre liste non ordonnée puis AppendChild, qui est nos éléments. C'est pour notre fonction utilisateur de liste. Nous pouvons appeler cela ci-dessous et vérifier que tout fonctionne dans le navigateur même les noms de nos deux valeurs de tableau. Cela fonctionne très bien. Nous n'avons aucun problème avec les données fonctionnelles car nous savons qu'elles se trouvent dans ce même fichier. Mais de façon réaliste, ce que nous allons probablement faire est de récupérer nos utilisateurs d'une base de données, et cet appel de base de données serait asynchrone et peut prendre un certain temps. Si tout cela s'est bien passé, le délai sera faible, mais néanmoins un retard. Pour simuler ce délai, nous pourrions également ajouter un SetTimeout à nos deux fonctions. Je vais attraper nos utilisateurs, nous allons couper ça, passer un appel SetTimeout, puis une fonction. Je voudrais simplement ajouter un délai d'une seconde à cela. Ouvrez le corps de la fonction et collez-le dans notre tableau d'utilisateurs, et voyons maintenant ce qui se passe dans le navigateur. Rafraîchissez, et même après une seconde, nous ne voyons pas nos utilisateurs dans le navigateur. Maintenant, les utilisateurs ont été répertoriés depuis que nous sommes immédiatement Lupin des utilisateurs en bas parce que notre fonction est appelée immédiatement. Cela se produit effectivement avant le délai d'une seconde depuis notre délai d'attente, ce qui signifie que lorsque nous essayons d'accéder à nos utilisateurs, il n'a aucune valeur. C'est une chose courante à gérer Lorsque vous travaillez avec des données stockées en externe, nous demandons essentiellement les données dont nous avons besoin, mais nous devons également nous assurer que les données sont retournées et disponibles. avant de pouvoir y accéder en toute sécurité. Il doit être en ordre pour que les choses ne se cassent pas. Même si nous appelons les fonctions dans le bon ordre, nous avons donc créé nos utilisateurs puis nous listons nos utilisateurs, le délai est à l' origine du problème. Nous pouvons également le confirmer avec certains journaux de console. Tout d'abord, si nous les mettons dans un juste après l'endroit où nous créons nos utilisateurs, placez-le dans le premier et nous dirons qu'il s'agit de la fonction GetUsersFromDatabase, puis en placer un à l'intérieur de notre fonction d'utilisateur de liste avec le texte des utilisateurs de la liste. Si ce délai n'était pas de haut en bas, vous vous attendez à voir le premier journal de la console, suivi de celui-ci juste ici. Mais si nous sauvegardons et actualisons, le contraire se produit, nous voyons la liste des utilisateurs froid avant GetUsersFromDatabase, et nous savons que c'est la mauvaise façon de contourner ce que nous devons faire. Ce serait bien que cette fonction utilisateur de liste ne soit appelée qu' une fois que le code dans un délai d'attente a été considéré comme un succès, et que nous puissions le faire en introduisant une fonction de rappel. Pour ce faire, nous déplacerions la liste utilise l'appel de fonction, retirez-le, puis transmettriez la fonction de rappel dans GetUsersFromDatabase. Cette fonction de rappel sera ensuite prise en tant que paramètre à partir de la création de notre fonction. Comme tout autre paramètre, ce nom est à la hauteur. Il n'est pas nécessaire que ce soit un rappel, nous allons placer ça dedans juste pour qu' il soit clair ce que nous faisons. Maintenant, nous pouvons appeler cette fonction de rappel à la fin de SetTimeout. Juste après notre journal de console, nous appellerons cela en tant que fonction, puis nous pourrons revenir à la console et voir dans quel ordre ils apparaissent. Rafraîchissez et nous obtenons une erreur à l'intérieur d'ici. Nous disons que le rappel n'est pas une fonction. Callback. Cela ne doit pas avoir les appels de fonction car nous ne faisons que passer une référence à cette fonction. Maintenant, rafraîchissez-vous. Les choses semblent fonctionner dans le bon ordre. Nous récupérons nos utilisateurs de la base de données, puis nous listons maintenant les utilisateurs peuvent également les voir réintégrés dans le navigateur. Cette solution est un rappel asynchrone. N'oubliez pas qu'à partir de la dernière vidéo, cette synchrone fait référence au code qui s'exécute dans ordre et qu'une opération doit se terminer avant de passer à la suivante. En utilisant cet exemple que nous venons de faire, une fois que les utilisateurs sont revenus avec succès de la base de données, que nous simulons avec notre setTimeout, nous pouvons ensuite utiliser notre fonction charbon retour la liste des utilisateurs, et de cette façon si les choses sont conservées dans le bon ordre. Nous pouvons également transmettre des arguments supplémentaires à cette fonction. Disons que nous voulions uniquement obtenir les utilisateurs qui avaient le rôle d'administrateur, nous pouvons le transmettre à l'exception du paramètre. Maintenant, lorsque nous appelons notre fonction comme transmettant le rôle d'administrateur, c'est tout à fait correct. Nous pouvons transmettre autant d'arguments qu'un, deux à la fonction. Nous devons veiller à ce que le rappel soit toujours le dernier. Cette méthode de transmission de fonctions en tant que paramètres de fonction n' est pas nouvelle. Nous pouvons le voir si nous revenons à un fichier précédent. Ouvrons la barre latérale, passons à la précédente et dans le premier exemple où nous avons ajouté un écouteur d' événements. Nous écoutons d'abord cliquer, puis comme le dernier paramètre qui a déclenché une fonction. Ici, nous le transmettons dans une fonction de rappel que nous voulons exécuter une fois que quelque chose a été cliqué, et nous considérons également une méthode de tableau que nous avons examinée quelque chose comme pour chacune, que nous avons dans cet exemple actuel. Chaque élément à l'intérieur de notre tableau, nous exécutons ensuite une fonction à l'intérieur de laquelle est également un rappel, signifie que cette technique n' est rien de nouveau. Lorsque nous parlons de rappels, il s'agit généralement d'une façon traditionnelle plus ancienne de faire les choses. Nous examinerons ensuite des méthodes plus modernes. Mais les rappels sont vraiment importants à prendre en compte, car ils sont encore nombreux et sont toujours utilisés aujourd'hui. rappels sont eux aussi un peu haineux dans le monde JavaScript et non pas parce qu'ils ne fonctionnent pas. C'est plus parce que la façon dont les choses peuvent facilement devenir désordonnées. Cet exemple que nous venons d'utiliser n'est pas trop mauvais. Parce que tout ce que nous avons, c'est une seule fonction, qui rappelle ensuite une deuxième fonction. Mais le problème réside lorsque nous avons un rappel, qui appelle une autre fonction de rappel, qui appelle une autre fonction de rappel, etc. Même en regardant cet exemple, la fonction liste des utilisateurs peut également avoir besoin de son propre rappel. Ensuite, ce rappel peut aussi avoir besoin son propre rappel, puis nous sommes coincés dans une longue chaîne. Nous pouvons également comparer cette chose à notre propre vie. Nous avons un ordre de tâches que vous souhaitez accomplir dans un certain ordre. Disons que nous voulons conduire la voiture. Mais avant de pouvoir conduire la voiture, nous devons marcher jusqu'à la voiture, avant de marcher jusqu'à la voiture, nous devons trouver les clés, avant cela, nous devons nous habiller et ainsi de suite. Il s'agit d'une série de tâches qui reposent sur la précédente à accomplir en premier. Cela est comparable aux fonctions de rappel appelées une fois le code précédent réussi. Ce sont ces multiples rappels qui peuvent entraîner un gros gâchis. Pour en voir un exemple, nous avons créé quelques petites fonctions de démonstration. Nous allons tout commenter d'en haut. Maintenant, créez de nouvelles fonctions. Le premier est GetOutOfBed, placé dans le fichier console.log, dit hors lit, puis dupliquez-le trois fois de plus, ce qui nous donne quatre fonctions. La seconde consiste à trouver nos clés et juste console.log. Le suivant est à pied jusqu'à la voiture, et le dernier est de conduire la voiture. Je dirai oui, puisque notre tâche est terminée. En utilisant ce que nous savons de notre précédente démonstration de rappel, chacune de ces fonctions doit être transmise à la fonction suivante en tant que rappel. Appelez ensuite cela à l'intérieur de chaque fonction. Le premier sort du lit. Cela va prendre en compte un rappel, qui s'exécutera tout en bas, passe aussi dans le second, appelez notre fonction. Nous n'avons pas besoin d'ajouter cela à notre dernière fonction car elle n' appellera aucune autre fonction, car c'est notre résultat final. En fait, cela a déclenché cette chaîne d' appels de toutes ces fonctions, nous allons créer une autre fonction pour appeler toutes ces fonctions. Créez une nouvelle fonction appelée CompleteTasks. Nous pouvons appeler cette fonction, qui est CompleteTask transmet la première fonction qui transmet la première fonction que vous souhaitez rappeler. Notre premier dans notre commande est GetOutOfBed. Ce que nous allons faire maintenant peut paraître assez complexe, mais il s'agit essentiellement de la même configuration qu'avant. Nous obtiendrions les utilisateurs de la base de données Seulement cette fois, il y a plus d'une fonction dans la chaîne, que nous rappellerons, puis à l'intérieur de la fonction CompleteTask, nous pouvons ensuite imbriquer chacune de nos fonctions pour appeler à l'intérieur. Le premier est de sortir du lit. Passez une fonction. Passons à la console et voyons ce qui se passe. Si nous nous actualisons, nous voyons le texte hors du lit à l'intérieur de la console et si nous regardons vers le haut, il s'agit du journal de la console tout en haut. La prochaine fête sera essentielle pour comprendre tout cela. Ce que nous allons faire ici, c'est que nous créons notre première fonction appelée CompleteTask. Cela est ensuite appelé à notre première étape, qui est de sortir du lit, puis nous passons une fonction à l'intérieur. Cette fonction est acceptée comme rappel, puis cette fonction est appelée à la fin de cette fonction. Fondamentalement, une fois cette fonction terminée, elle appellera notre deuxième fonction, qui est imbriquée à l'intérieur. Cette prochaine section, que nous allons appeler, peut être notre prochaine étape, qui est findkeys. Laissez appeler cette fonction, findkeys doit également prendre en charge une fonction de rappel , alors transmettez-la. Cela devrait maintenant exécuter notre deuxième console.log. J'ai une erreur d'orthographe, donc on va juste changer ça, Findkeys. Maintenant, nous avons notre deuxième console.log, donc va s'exécuter dans cette section juste ici et ensuite il va exécuter cette fonction suivante est imbriquée à l'intérieur. Passer notre prochaine étape, qui est à pied jusqu'à la voiture. Walk to car prend également en charge une fonction de rappel. Nous sauvegarderons et actualiserons, enverrons des impressions du texte de marche. Il exécutera ensuite notre prochaine fonction, qui se trouve à l'intérieur. La dernière étape consiste à conduire la voiture. Il s'agit de la dernière étape, donc elle ne prend pas en charge une fonction de rappel. Nous pouvons simplement appeler cela une fonction régulière. Actualisez. Ce code est exécuté en même temps que toutes nos autres fonctions. Si vous le souhaitez, nous pourrions également transmettre des étapes supplémentaires ou du code supplémentaire à chacune de ces fonctions. Pour clarifier, tout ce que nous faisons ici est créer une fonction principale qui est exécutée, puis sa fonction appelle des fonctions supplémentaires à l'intérieur. Chacune de ces fonctions, nous attendrons que le code soit terminé à l'intérieur avant de rappeler la suivante. Si cela commence à paraître un peu désordonné, c'est probablement le cas, parce que c'est un gâchis, et c'est pourquoi autres façons de faire face à cela sont créées. Mais ce n'est pas parce qu' il existe de nouvelles méthodes cela ne signifie pas nécessairement que cela n'est toujours pas pertinent. rappels sont toujours un élément important de JavaScript, la fois actuellement et vous le verrez également dans le code hérité. Vous entendrez probablement ce genre de choses aussi appelé Callback ****, la Pyramide de Doom, rappels imbriqués. Il y a aussi beaucoup d'autres noms. Tous ces noms indiquent la même complexité des rappels imbriqués comme celui-ci. Dans les prochaines vidéos, vous découvrirez autres façons de gérer cela, notamment en utilisant les rappels de manière asynchrone avec des promesses. 58. Promises: Nous savons maintenant que la réalisation d'une demande asynchrone peut prendre un certain temps, peut-être quelques millisecondes, peut-être quelques secondes, minutes, voire même jamais terminée du tout. Souvent, lorsque nous parlons de cette chose, il s'agit de récupérer quelque chose d'ailleurs, comme un serveur, sorte de banque de données, une API ou un site Web externe. Une promesse est excellente pour gérer ce résultat. Promise est un objet et cet objet représente le résultat d'une tâche asynchrone. Le résultat peut être un échec, se peut que nous ne revenions pas du serveur ce que nous avons demandé, ou cela peut prendre un peu de temps. Les promesses s'accrochent à cette tâche et promettent de vous dire à l'avenir quand il connaîtra le résultat. Nous avons déjà vu des promesses et certains résultats. Il y a quelques vidéos, nous avons regardé un exemple simple de récupération d'une image de Wikimédia. Je vais utiliser l'API Fetch. Fetch est une opération asynchrone, et une promesse est renvoyée dans la console. Lorsque nous avons essayé d'accéder à la promesse trop tôt avant qu'elle n'ait fini de saisir l'image, les résultats étaient considérés comme en attente. Nous avons ensuite ajouté un petit délai avec un délai d'attente défini, qui a été modifié dans la promesse en cours de réalisation. Il s'agit de deux des trois États disponibles avec des promesses. En attente est l'état initial lorsque nous ne savons pas encore si la tâche sera terminée ou non, puis exécutée lorsque la tâche a été considérée comme un succès, exemple lorsque les données sont revenues et qu'elles sont maintenant prêtes à être utilisées. Nous avons également un état appelé rejeté lorsque la tâche a échoué. Nous ne disposons pas des données que nous avons demandées, et nous devons y remédier. Vous pouvez également entendre la parole réglée par des promesses. réglés lorsque nous connaissons le sort de la tâche, ce qui signifie qu'elle est accomplie ou rejetée. Nous n'avons pas besoin de savoir quoi que ce soit sur l'état en attente, car nous ne pouvons pas dire dans quelle direction il ira avec le résultat. Mais nous devons gérer un succès ou un échec. dans les fichiers de démarrage, qui est la section des promesses. Ici, nous avons un autre exemple d'utilisation de cette API Fetch. Il s'agit de récupérer des données à partir d'une API externe, et il ne s'agit que d'une URL externe. Cette URL va sélectionner une image de chien aléatoire. Nous pouvons le copier et le coller dans le navigateur. Nous pouvons voir que nous avons un résultat dans un format appelé JSON, qui signifie JavaScript Object Notation. Il s'agit d'une syntaxe permettant d'échanger des données sur le Web. Il ressemble à un objet JavaScript, mais il est en fait indépendant de la langue, ce qui signifie qu'il peut être créé et transmis par d'autres langues. Nous pouvons voir que nous avons un message contenant une URL pour une image de chien particulière, ainsi que le code de réussite. Nous pouvons copier cette image et coller ce lien, qui nous donne accès à l'image en question. J'ai installé l'extension du navigateur pour que cela soit un peu plus joli. Les vôtres peuvent paraître un peu plus difficiles à lire, mais les données doivent toujours être exactement les mêmes. Revenons à l'éditeur. Comme nous le savons, l' appel de récupération est asynchrone, sorte que nous pouvons gérer le résultat de la récupération de cette image avec la promesse. abord, nous pouvons gérer l'état accompli, ce qui est un succès, et nous le faisons en nous enchaînant à la fin de l'appel de récupération. Nous pouvons enlever le point-virgule, enchaîner à l'extrémité. Ensuite. C'est alors une méthode que nous pouvons enchaîner à une promesse. N'oubliez pas que lorsque nous utilisons l'API Fetch, cela renvoie une promesse comme réponse, qui signifie que nous avons accès à la méthode then. Passez une fonction. il s'agit d'un rappel asynchrone, nous n'exécuterons que le code à l'intérieur d'ici. Il souhaite savoir que la tâche a été exécutée avec succès. Bien sûr, nous voulons probablement accéder aux données que nous récupérons de l'appel de récupération. Cela peut être transmis à notre fonction, donc en transmettant tous les noms de variables tels que la réponse. Ensuite, nous pourrions enregistrer cela sur la console et vérifier si cela fonctionne. Je vais enregistrer dans le navigateur et ouvrir la console. Il y a une réponse. Cette promesse réussie renvoie un objet de réponse qui contient des détails sur ce que nous récupérons du serveur ou de l'API. Cet objet contient des éléments tels que le code d'état. Dans notre cas, c'est 200, ce qui signifie que tout va bien. Jusqu'au bas de l'URL, nous voyons l'URL réelle que nous avons demandée dans l'appel de récupération plutôt que l'URL de l'image que nous récupérons. La raison pour laquelle nous ne voyons pas cela est que toutes les données nous récupérons sont stockées dans cette section du corps. Si nous ouvrons cela , nous ne voyons toujours pas l'URL de l'image réelle. Nous voyons plutôt un flux lisible. Cela revient au format JSON mentionné précédemment. Pour lire ce format JSON stocké dans la section body, nous avons une méthode JSON que nous pouvons utiliser. Dans le journal de la console, nous pouvons ajouter à la fin la méthode JSON. Alors essayons celui-là. Enregistrez et rafraîchissez. Nous sommes de retour à une promesse dont l' état actuel est en attente, ce qui signifie que la tâche n'est pas encore terminée. En effet, la méthode JSON renvoie également une promesse que nous devons à nouveau gérer. Il existe plusieurs façons de le faire. abord, nous pouvons supprimer l'enveloppe de journal de la console et laisser Response.json. Puisque cette méthode JSON renvoie également une promesse, nous pouvons également enchaîner la méthode then. Transmettez-le, qui encore une fois, il exécute une fonction. De plus, cette fonction prend en charge les données de la réponse, donc transmet dans une variable de données. Nous pouvons ensuite enregistrer ces données sur la console. Essayons ceci, sauvegardons et rafraîchissons. Maintenant, nous avons réussi à transmettre notre contenu JSON, qui est stocké dans la section corps. Cela renvoie l'image réelle du chien, qui est stockée dans le message, ainsi que le succès en tant que code d'état. Il s'agit de la même réponse que celle que nous avons vue lorsque nous l'avons collée dans le navigateur plus tôt. Tout ici renvoie une promesse, l'appel de récupération renvoie une promesse, et le JSON renvoie une promesse. Mais une autre façon de le faire, que je préfère personnellement, mais c' est à vous de ne pas imbriquer les appels comme celui-ci. Dans la mesure du possible, je préfère les garder tous au plus haut niveau pour des raisons de lisibilité. Pour ce faire, nous devons découper la méthode imbriquée que nous venons d'ajouter. Nous le laisserons dans response.json à l'intérieur d'ici, et nous allons découper la deuxième et dernière série de crochets jusqu'à juste après response.json. Découpez ça. Maintenant, la fonction devrait simplement rester avec response.json. Assurez-vous que le point-virgule est retiré de la fin, et nous pouvons le coller à la fin, en nous donnant deux méthodes consécutives. Cependant, si nous passons au navigateur et que nous nous actualisons, nous voyons le message de non défini. C'est parce que nous essayons d'accéder aux données de notre méthode précédente. Mais d'abord, pour ce faire, nous devons le renvoyer. Tout cela fonctionne comme avant. Nous pouvons également enchaîner autant de ces méthodes que 1, 2, et chacune attendra la fin du résultat précédent avant d'exécuter le code à l'intérieur. Nous garderons le contrôle total notre tâche asynchrone et de l'ordre dans lequel le code est exécuté. Nous pouvons également filtrer cela comme n'importe quel autre objet. Nous pourrions accéder au message, qui est l'URL de l' image dont vous avez besoin. Nous pouvons cliquer dessus et l'ouvrir dans le navigateur. Nous pouvons également utiliser cette URL d'image et la transmettre à un élément d'image. abord, ajoutez un élément d' image vide juste au-dessus de notre script, puis dans la deuxième méthode, lorsque nous savons que nous avons accès à cette URL, nous pouvons supprimer ce journal de console, sélectionner notre image avec le sélecteur document.query, puis définissez l'attribut source comme étant égal à data.message. Enregistrons cela et actualisons le navigateur. Chaque fois que nous actualisons, nous récupérerons une image aléatoire différente de notre API. Il s'agit de l' état accompli géré. Mais qu'en est-il de s' il y a un problème et que nous retrouvons un état rejeté ? Cela se produira en cas d'erreur lors de la récupération des données ou de l'exécution de la tâche que nous avons demandée. Nous enchaînons à la fin une méthode de capture. Ici, nous enchaînons la méthode de l'événement , supprimons le point-virgule, puis nous enchaînons à la fin de la méthode catch que nous exécuterons en cas d'erreur, nous transmettons cette erreur à cette fonction de rappel. Beaucoup fonctionnent avec l'erreur basée sur un journal de console. Commençons par une chaîne d'erreur. Nous pouvons également ajouter à la fin le message d'erreur. Si nous le testons et l' actualisons, nous ne verrons rien à l'intérieur la console car l'image est renvoyée avec succès. Pour tester cela, nous devons entrer dans les outils de développement et accéder à l'onglet réseau. Je vais le sélectionner, et pour ce faire, nous pouvons désactiver notre réseau. Faisons en sorte que cela soit un peu plus grand. Chrome a ce menu déroulant que vous pouvez voir ici. Nous n' utilisons actuellement aucune limitation, mais nous pouvons également passer à une connexion lente ou même hors ligne. Si nous le faisons et que nous sautons dans la console et que nous nous actualisons, désactivation de ce réseau signifie que maintenant, nous n'obtenons pas l' image que nous voulons. La promesse devrait maintenant générer une erreur. Avec tout cela, la dernière chose que nous allons examiner est la méthode finale. La méthode finale s'exécutera peu importe si la promesse a été respectée ou si elle a été rejetée. Il peut également être enchaîné à la fin. Comme pour toutes les méthodes ci-dessus, nous devons également supprimer le point-virgule comme dans la méthode final, qui, à nouveau, exécute une fonction de rappel. Placer dans un journal de console avec le texte de, je vais toujours courir. Lorsque le réseau est toujours désactivé, nous pouvons actualiser et voir ce message. Rallumons le réseau, actualiserons, sautons dans la console, et nous voyons toujours ce journal de la console même lorsque la promesse a été couronnée de succès. La méthode finale est utile pour suivre un certain code que nous devons exécuter une fois la promesse réglée. Une alternative serait de placer ce code dans les sections de capture alors également. Mais cela entraînerait une duplication du code. C'est des promesses et comment cela peut être vraiment utile avec JavaScript asynchrone. Tout cela est possible car la méthode de récupération renvoie initialement une promesse de lancer toute cette chaîne. Mais qu'en est-il de choses qui ne renvoient pas une promesse ? Eh bien, ensuite, nous allons jeter un coup d'œil à la façon dont nous pouvons gérer cela. 59. Le constructeur de promesse: Dans l'exemple précédent, nous pourrions commencer à utiliser des promesses car l'API Fetch renvoie une promesse. Mais qu'en est-il des fonctions qui ne renvoient pas une promesse ? Pour lancer les choses, écrivons une simple fonction personnalisée, qui va s'exécuter et définir des données après un délai d'expiration. Je vais sauter dans le fichier constructeur de promesses, qui est actuellement vide dans le script pour créer une variable en haut appelée data. Définissez ce paramètre sur un objet vide. Créez une fonction appelée GetData. Ensuite, passer à l'intérieur dans notre setTimeout, qui va prendre en charge une fonction. En tant que fonction Ensuite , nous l'exécuterons après un délai de 2 000 millisecondes. Au bout de deux secondes, il suffit de définir la valeur de notre objet de données. Nous allons réaffecter cet objet pour qu'il s' agisse d'un nouvel objet dans lequel nous transmettrons une propriété name égale à une chaîne. Cela appellera GetData pour exécuter réellement notre fonction. Ensuite, à la fin, nous enregistrons la valeur des données, nous verrons ce que nous récupérons. Analyse de nos données. Nous pouvons également opter pour ce nom. Dans le navigateur, ouvrez le fichier et accédez à la console. La console affiche la valeur indéfinie. Cela n'est probablement pas surprenant car nous accédons à l'objet de données dans le journal de la console avant même de définir la propriété name, les données prennent deux secondes à être définies. Il s'agit d'une requête un peu simulée à une base de données, libre de gérer ce qui se passe entre la demande des données et leur retour. Aucune promesse n'est bonne pour cela, mais cette fonction ne renvoie pas de promesse par défaut. Pour cela, nous pouvons créer le nôtre en utilisant le constructeur de promesses. Les constructeurs sont quelque chose que nous avons déjà examiné avec le nouvel opérateur dans le passé. Nous avons examiné des choses comme un nouveau tableau. Nous avons examiné un nouvel objet et une nouvelle fonction. Tous ces éléments créent une nouvelle instance d'un objet. N'oubliez pas que les promesses sont également des objets. Nous pouvons également utiliser ce nouvel opérateur pour créer nous-mêmes une nouvelle promesse. Commentez d'abord notre exemple pour l'instant, qui est tout sauf la variable de données. Supprimez ceci. Ensuite, nous pourrons commencer à construire notre nouvelle promesse ci-dessous. Juste avec les exemples que nous avons vus précédemment, nous utiliserons le nouveau mot-clé pour créer une nouvelle promesse et ce constructeur prend en charge une nouvelle fonction qui va s'exécuter. Cette fonction prend deux paramètres optionnels, une fonction à exécuter si la promesse est résolue sur un, si la promesse a été rejetée. Ce sont les noms de notre choix, mais la résolution et le rejet sont assez descriptifs. Ce qui a été notre propre promesse personnalisée, nous avons défini exactement quand et où nous voulons que ces fonctions de résolution et de rejet s'exécutent. La première étape consiste à stocker notre promesse à l'intérieur d'une variable. Nous allons juste appeler cette promesse. Je peux appeler ça dans un instant. Mais j'appellerai simplement la détermination de résoudre cette promesse. Ensuite, nous pourrons utiliser cette variable de promesse qui est en dessous des méthodes froides, puis capturées et enfin puis capturées et enfin que nous avons examinées précédemment. Nous pouvons accéder à promett.alors, et cette méthode est exactement la même que celle que nous avons regardée dans la vidéo précédente, qui prend en charge une fonction qui va s'exécuter, le code a été un succès. Dans cette optique, nous allons placer dans un journal de console avec le texte du succès. Autorisez cela et assurez-vous qu'aucun point-virgule ne se trouve à la fin. Nous nous attacherons également à la fin de la promesse. La méthode de capture, qui prendra également en charge une fonction. Rappelez-vous que la méthode catch passera également l'erreur, que nous pouvons placer dans un journal de console. Passons maintenant à la console et voyons lequel d'entre eux a été enregistré. Nous voyons la valeur du succès, ce qui n'est pas surprenant parce que nous avons résolu cette promesse, ce signifie qu'il a été couronné de succès. Cette fonction de résultat peut également prendre en compte une valeur de traitement que vous souhaitez transmettre. Disons une série de succès. Ensuite, ce message de réussite sera également transmis dans la chaîne si cela a été couronné de succès. La section qui a réussi est la section de l'époque. Nous pouvons transmettre cela à notre fonction. Nous pouvons stocker cela dans une variable telle que la réponse, puis nous pouvons l' enregistrer sur la console. Rafraîchissez-vous, et voilà. Cela est pratique si vous devez transmettre des données ou des messages personnalisés à la section de résultats. Mais pour revenir à l'exemple précédent de récupération de certaines données que nous avions ci-dessus, ce serait un meilleur exemple que simplement d' envoyer un message. Ce que nous allons faire, c'est copier et coller cette section de délai d'attente depuis l'intérieur de la fonction. Ensuite, nous pouvons coller cela juste au-dessus la section des résultats et décommenter les trois lignes. Nous pouvons ensuite remonter la section des résultats pour être à l'intérieur du délai d'attente. Il définira également les données , puis résoudra cette promesse. Cela signifie que la promesse ne doit maintenant être résolue qu'une fois les données définies. Nous pouvons tester cela en vous connectant à la console. Passez dans la section alors, si cela a réussi avec une nouvelle console, consignez la valeur de nos données. Rafraîchir Donnez-lui deux secondes. Voyez le message de succès, et notre objet a été mis à jour avec notre chaîne. C'est ainsi que nous pouvons gérer un succès avec une promesse. Mais qu'en est-il du rejet ? Eh bien, puisque c'est notre promesse, nous pouvons faire ce que nous voulons. Dans cet exemple, qu'en est-il résolution réussie, c'est que le nom de Chris a été défini. Je rejette si l'objet de données est vide. Nous pouvons sauter dans notre délai d'attente juste en dessous de l'endroit où nous définissons nos données. Nous pouvons faire une déclaration si. Nous pouvons vérifier si Object.Keys a dans notre objet de données. Nous pouvons vérifier si la longueur est supérieure à zéro. Le nom étant la propriété clé ici, nous vérifions si la longueur de cet objet est supérieure à zéro. Si c'est le cas, cela signifie que cela a été défini là où nous pouvons passer la fonction de résolution. Un message de succès. Si ce n'est pas le cas, juste après que l' instruction if sera transmise en rejet, qui sera transmise dans notre fonction avec le message de refus. Essayons ça. Nous disposons d'un ensemble de propriétés de données, donc nous devrions nous attendre à la valeur du succès. Ça donne deux secondes. Cela a été un succès. Si nous voulons vérifier l'état rejeté, nous pouvons vérifier si Object.keys est égal à zéro, ce qui entraîne une promesse rejetée. Il se passe un peu ici, mais l'idée est assez simple. Si une fonction par défaut ne renvoie pas de promesse, nous pouvons créer la nôtre. Cela peut être résolu ou rejeté à n'importe quel moment que nous estimons qu'il faut, ce qui nous donne un contrôle total sur le comportement de notre fonction. 60. Gestion de multiples promesses: Une fois que nous comprenons le fonctionnement des promesses, gestion d'une tâche asyncTask devient beaucoup plus facile. Mais qu'en est-il si plusieurs AsyncTask s'exécutent en même temps, cela peut causer divers problèmes. Attendons-nous la première tâche à accomplir avant de passer à la suivante ? Par exemple, si 10 AsyncTask étaient exécutés en même temps, si nous attendions que chacun finisse avant de passer à la suivante, le retard de chacun pourrait vraiment s'additionner. Par exemple, que passe-t-il si la tâche numéro 10 reposait sur la valeur de la tâche numéro 3, mais que la tâche 10 s'est terminée en premier. Eh bien, pour résoudre certains de ces problèmes, nous avons accès à des méthodes de promesses utiles. Jusqu'à présent, nous avons abordé certaines méthodes, y compris, catch, et enfin, et ces méthodes à venir vont faire face à de multiples promesses, commençant par une méthode appelée ALL. La méthode ALL passe en boucle plusieurs promesses et renvoie seule promesse et une seule promesse à un tableau du résultat. Il est utile pour collecter plusieurs éléments de données et peut-être les agréger en un seul résultat. Jetons un coup d'œil à la façon dont cela fonctionne dans le démarreur. Conservez deux promesses distinctes stockées dans des variables. Promesse numéro 1. Il s'agit là encore d'un exemple simple que nous avons déjà vu où nous récupérons une image de notre API. Si cela a réussi, il exécute alors une fonction qui renvoie la valeur de la réponse. Parallèlement à cela, nous aurons la promesse numéro 2, qui utilise le constructeur de promesses vu dans la vidéo précédente. Cela sera résolu au bout de deux secondes. Je les ai délibérément gardés simples pour cet exemple. Mais imaginez que nous voulions savoir si ces deux projets ont été couronnés de succès. Plutôt que de devoir vérifier chacun individuellement, eh bien, pour cela, nous pouvons utiliser la promesse. En bas, la promesse d'accès, capital P. La méthode ALL. Nous allons transmettre un tableau contenant ces deux variables, alors promettez 1, promettez 2. Cette méthode promise.all prend en compte n'importe quelle valeur itérable telle qu'un tableau. Nous avons cherché à boucler beaucoup de tableaux pendant ce cours. De plus, cette méthode ALL renverra également une promesse, qui signifie que nous pouvons enchaîner la fin diverses méthodes telles que alors et attraper. Nous ferons exactement la même chose que nous l'avons fait précédemment. Nous allons alors enchaîner, ce qui prend en charge une fonction. Cette fonction peut également prendre en compte les résultats. Nous allons enregistrer cela sur la console. suite, s' il y a eu une erreur, nous pouvons également enchaîner .catch à la fin en tant que fonction ALL qui prend en compte l'erreur, placée dans le journal. Alors, allons y aller. Accédez au navigateur, assurez-vous que la page actuelle est ouverte. Actualisez. Après deux secondes, nous revenons, revenons et un tableau avec deux résultats. La première est notre image aléatoire, qui est stockée à l'intérieur de cet objet. Si nous ouvrons cela, nous pouvons voir que celui-ci a été un succès. Le second, après le délai d'attente, est indiqué comme non défini, car la promesse ne renvoie rien. Si nous le voulons, nous pourrions passer un troisième paramètre à SetTimeout. Allons-y et faisons ça. Séparer par une virgule. Par conséquent, nous transmettrons une chaîne simple, qui est un paramètre facultatif à transmettre à la fonction que nous appelons, qui est résolue. Maintenant, après une actualisation, nous devrions voir cette valeur à l'intérieur de la console. Nous pouvons également tester un échec et voir ce qui se passe si l'une de ces promesses est rejetée. Nous pouvons le faire au lieu de résoudre, nous pouvons passer, rejeter, et celui-là, puis j'attraperai la section, le journal de la console s'exécutera. Nous voyons cette valeur des résultats que nous transmettrons ici. Mais une chose que vous remarquerez, c'est que nous ne voyons pas l'image aléatoire. Même si nous transmettons ces deux promesses de promesses, nous ne voyons que le résultat d'un refus. En effet, lors de l'utilisation de la méthode ALL, elle ne se résoudra que si toutes les promesses qu'elle prend réussissent ou si une seule échoue. Nous avons réussi à obtenir un tableau contenant toutes les promesses comme nous l'avons déjà vu, soit contenant toutes les promesses comme nous l'avons déjà le premier qui est rejeté. Cependant, il peut y avoir des événements où ce n'est pas le comportement que nous voulons. Nous voudrions peut-être toujours que toutes les promesses soient rendues, qu'il y ait eu un échec ou non. Pour cela, nous pouvons tout remplacer par tous ceux qui sont réglés. Tous ceux qui sont réglés vont toujours prendre en compte un tableau contenant toutes les promesses. Mais maintenant, si nous sauvegardons cela et rafraîchissons, donnez deux secondes. Plutôt que de voir l'échec unique, nous voyons toutes nos promesses à l'intérieur du tableau. Le premier a été accompli. Nous verrons toute la valeur. Ensuite, nous verrons le second qui a été rejeté. Nous pourrions utiliser ces résultats de la manière que nous voulions, par exemple en boucle pour gérer ce qu' il faut faire en cas d' échec ou de succès. Par exemple, nous voudrions peut-être savoir ceux qui ont été rejetés afin de pouvoir les appeler à nouveau. Ou même peut-être ne montrer à un utilisateur une certaine section si la demande de l' utilisateur a réussi. Autre chose que nous avons, c'est deux méthodes appelées n'importe quelle et race. Ces deux éléments ne retourneront qu'une seule valeur. abord, jetons un coup d'œil à tout ce que nous pouvons utiliser à la place de tous ceux qui sont installés. Économisez et rafraîchissez et nous verrons ce que nous récupérons. Cette fois, nous ne voyons pas le rejet. Tout ce que nous voyons, c'est notre image réussie. Cela est dû au fait que toute méthode, comme cela semble, se résoudra dès que l'une des promesses qui lui a été transmise aura été respectée. Ce qui signifie essentiellement la première promesse, qui est un succès. Cela ne signifie pas toujours que ce sera le premier qui sera transmis dans le tableau. Cela signifie simplement le premier qui a été terminé. Cependant, la méthode de course, si nous regardons ceci, Enregistrer et actualiser, cela renvoie également la même image aléatoire, mais cela reviendra à nouveau la première promesse qui lui a été transmise, qui a été réglée. règlement peut même être accompli ou rejeté. Dans notre cas, il s'agit d'une image aléatoire car celle-ci revient plus vite car elle n'a pas de retard de deux secondes. Peu importe si la promesse qui lui a été transmise était un succès ou un échec, la première sera celle que vous voyez dans la console. Pour résumer, la méthode de la course renvoie la première promesse qu'elle rencontre qui résout ou rejette. La méthode n'importe quelle méthode renverra également une promesse, mais celle-ci doit être remplie. Ils sont tous deux très utiles si l'une de ces situations se présente. 61. Async / Attendre: Avec l'arrivée d'ES 2017, une nouvelle façon de gérer le code asynchrone est apparue. Souvent, nous avons déjà examiné ce qui est redondant, c'est encore quelque chose que nous devons savoir, en particulier pour ce que nous allons examiner maintenant, qui est appelé async/attend. Async/Await est en fait des promesses en coulisses, mais il a été créé pour être plus simple et plus facile à lire pour les développeurs. Cela semble plus simple parce que nous revenons à quelque chose de plus familier, qui est une fonction. Dans les fichiers de démarrage, nous aurons un exemple d'image où nous retournerons une promesse que nous avons déjà vue. Si vous utilisiez plutôt une fonction normale pour définir cette image, nous ferions quelque chose comme ça. Cela va probablement créer une fonction appelée set image, puis à l'intérieur, nous pourrions à nouveau utiliser notre appel de récupération. Collez cela dans et stockez-le à l'intérieur d'une réponse appelée constante. Ensuite, essayons de créer un journal de console pour la réponse, et comme vous le savez tous à partir des vidéos précédentes, nous essayons d' accéder à ce code asynchrone juste en dessous avant qu'il n'en ait potentiellement eu l' occasion pour revenir. Pour exécuter cela, appelez notre fonction Set Image, actualisez la console, nous revenons à l'état en attente. Nous pouvons voir la réponse, qui est notre URL, nous avons initialement appelée à l'intérieur d'ici, plutôt que notre image réelle, que nous récupérons. Ce que vous pensez peut-être que nous pourrions faire ensuite, c'est d'utiliser response.json. Essayons ça. Stockez-le à l'intérieur d'une constante appelée image, qui est égale à response.json. Nous pouvons passer cette réponse. Maintenant, regardez cette image, la console. Essayons encore une fois. Cette fois, nous obtenons une erreur, disant que response.json n' est pas une fonction, et cela se produit parce que les données de l'image ne sont pas encore disponibles. Nous avons des promesses que nous savons que nous devons nous enchaîner à la fin de tous les appels de récupération, puis aux méthodes, qui attendent ensuite la réponse réussie avant d'exécuter une fonction. Cependant, même si nous n' utilisons pas de promesses cette fois-ci, nous allons utiliser async/wait. Pour cela, nous avons deux étapes simples. Pour convertir notre fonction normale en fonction asynchrone, il suffit de passer le mot-clé asynchrone devant elle. Une fois que vous avez fait cela avec une marque, quelle ligne de code nous voulons attendre le retour des données avant de passer à la suivante. Maintenant, au cas où nous voudrions attendre le retour de l'image, et cela mettra efficacement en pause notre fonction et attendra que les données reviennent avant déplacer vers le reste du code. Gardons cela et voyons ce qui se passe. Si nous actualisons maintenant, l' erreur est maintenant disparue. La promesse reste des États indépendants, mais si nous ouvrons cela, nous pouvons accéder aux données dont nous avons besoin à l'intérieur de cet objet. Nous pouvons maintenant voir si nous copions cette image avec des citations, nous récupérons maintenant notre image de chien aléatoire et le message de succès. La raison pour laquelle nous devons nous plonger dans cette promesse est parce que nous essayons d'accéder à notre réponse .json sur la ligne juste en dessous. Nous avons toujours attendu que notre image revienne, mais nous nous sommes ensuite connectés à la console response.json. Mais rappelez-vous d'après les exemples précédents, la méthode json renverra également une promesse. Pour y remédier, tout ce que nous devons faire est d'attendre que notre méthode json soit enfin terminée avant de le connecter à la console. Maintenant, si nous sauvegardons cela, essayez à nouveau dans le navigateur, plutôt que de devoir sauter dans la promesse et dans l'objet. Maintenant, consultez directement les informations correctes dont nous avons besoin à l'intérieur de la console. Nous avons maintenant renvoyé l'URL dans cette propriété de message, que nous pouvons utiliser pour définir nos éléments d'image. Prenons ça. Nous pouvons supprimer le document d'accès au journal de la console document.queryselector. Ce n'était pas dans l'image où nous pouvons définir la source de l'image pour qu'elle soit égale à l'image.message. On y va. C'est ainsi que nous pouvons utiliser async/wait avec ce style de fonction normal. Mais il existe également différents types de fonctions disponibles que vous avez examinés, y compris les expressions de fonctions et les fonctions de flèche. Juste comme ça. Avec une expression de fonction. Dites laisser func comme nom de variable et dire cela égal à notre fonction, qui va simplement renvoyer une chaîne de hey. L'équivalent de la fonction flèche ressemblerait à ceci. Ici, nous avons notre expression de fonction , puis nous avons notre fonction flèche. Async/Await peut être utilisé dans l'un ou l'autre d'entre eux. La façon de marquer notre expression de fonction comme asynchrone est comme ci-dessus, passant le mot-clé asynchrone juste avant le mot-clé fonction, et également la même chose pour notre fonction flèche. Nous pouvons placer cela au tout début, puis nous pouvons utiliser le mot-clé wait n'importe où dans le corps de la fonction. Async/Await est une solution propre et puissante pour gérer les tâches asynchrones. Mais il faut faire attention à ne pas trop s'emporter. Dans cet exemple, nous définissons l'image sur la ligne suivante. Il est tout à fait logique d'attendre que les données reviennent avant de les utiliser. Mais imaginez si nous avions quelque chose comme ça. Si nous avons dupliqué cette réponse et que nous avons demandé nos deux images distinctes. Ce que nous faisons ici, c'est que nous demandons deux images indépendantes en même temps. Mais le problème que nous avons actuellement est que la deuxième image ne sera pas appelée tant que la première n'aura pas été renvoyée car nous utilisons le mot-clé await. Cela entraînera maintenant un délai inutile dans le code ci-dessous. Ici, nous essayons d'accéder à notre première image, mais nous devons toujours attendre que la deuxième image soit renvoyée avant même que cette ligne ne s'exécute. Nous utilisons une vague, mais nous devons attendre les données, ce que nous devons faire et après. Mais nous ne voulons toujours pas bloquer l'exécution du reste du code, si nous n'en avons pas besoin. gestion de plusieurs demandes comme celle-ci est quelque chose que nous examinerons ensuite plus en détail. En plus de regarder bientôt la gestion des erreurs. 62. Manipuler plusieurs attentes.: À la fin de la vidéo précédente, nous avons discuté des effets de plusieurs appels en attente. Ici, nous en avons trois, nous avons réponse, répond 2 et réponse 3, qui font tous le même appel de récupération. Nous savons, par exemple, que si la deuxième image devait attendre le retour des premières données d'image avant d'être exécutée, c'était tout à fait correct. Toutefois, si l'image 2 ne repose pas sur la première image, elle ne devrait pas bloquer inutilement ce code. Avec de multiples demandes de données asynchrones comme celle-ci, cela nous ramène à une vidéo précédente, où nous avons examiné comment gérer plusieurs promesses. Et si nous voulons savoir si l'on échoue ou s'ils échouent tous, comment pourrions-nous gérer cela ? Avec des promesses, nous pourrions utiliser des méthodes telles que tous et tous réglés. Mais avec le code asynchrone, ces promesses sont également sous le capot. Nous pouvons toujours utiliser ces méthodes comme toutes. Par exemple, tout en bas de notre fonction, nous pouvons accéder à la promesse à tous, qui prend en compte un tableau. Nous pouvons passer en réponse, réponse 2 et en réponse 3. Stockez-nous cela dans une variable ou une constante appelée résultat, puis enregistrez cela dans la console. Une erreur, qui nécessite donc une réponse. Cela renvoie toujours une promesse, mais rappelez-vous que la méthode all se résoudra en une seule promesse, si toutes les promesses qu'elle prend sont résolvées avec succès ou si une seule échoue. Dans cette optique, nous pouvons également utiliser le mot-clé wait pour nous assurer qu'ils sont tous résolus en premier avant de passer à la ligne suivante. Passez en attente, c' est avant ça. Nous attendons maintenant que ces trois promesses soient terminées. Cela signifie que nous pouvons maintenant supprimer le mot-clé d'attente avant chacun de ces appels indépendants gratuits. Essayons ça, rafraîchissons. Nous obtenons maintenant un tableau contenant les trois réponses distinctes. Nous pouvons entrer dans chacun d'entre eux. Mais l'un des problèmes que nous rencontrons encore est que si nous regardons l'URL, agit de l' URL de l'image que nous demandons dans une récupération, non de l'image JPEG réelle, qui revient de l'API. Si vous vous souvenez, pour accéder à cette image réelle dont nous avons besoin, est contenue à l'intérieur du corps, et pour lire le contenu du corps, nous devons à nouveau utiliser la méthode JSON. La méthode JSON lira le contenu de cet objet et le transforme en objet JavaScript que nous pouvons lire. Comme nous pouvons le constater, nous avons un tableau avec trois valeurs distinctes. Ce que nous pouvons faire, c'est que nous pourrions supprimer notre journal de console et passer en boucle sur ces trois valeurs avec la méthode FoReach, donc les résultats. Pour chaque fonction, stockez-le à l'intérieur de la valeur. Nous pouvons maintenant enregistrer cette valeur dans la console et appeler la méthode JSON pour chacune de ces valeurs. Cela nous redonne maintenant nos trois promesses distinctes. Mais si nous ouvrons cela, nous voyons un objet familier dans lequel nous devons plonger pour retrouver notre image réelle. Cela se produit parce que, comme nous l'avons vu précédemment, la méthode JSON renverra également une promesse. Pour attendre que ces données reviennent avant d'y accéder, nous pouvons utiliser le mot-clé await, et comme le mot-clé await ne peut être utilisé qu' à l'intérieur d'une fonction, nous pouvons le marquer comme asynchrone. Rechargez. Ce qui nous redonne ensuite nos trois images, dont nous avons besoin. Cette méthode signifie maintenant que nous pouvons faire quelque chose une fois que toutes les promesses ont été couronnées de succès ou si une seule a échoué. En parlant d'échec, le sujet de la prochaine vidéo se penche sur la façon dont nous pouvons gérer les erreurs en utilisant async wait. 63. Gestion des erreurs: Cette vidéo va vous montrer quelques façons de gérer les erreurs dans votre code asynchrone. Le code est génial lorsque tout se passe bien, mais lorsque les choses ne se passent pas, nous devons gérer ce qu'il faut faire. Certaines des méthodes de promesses que nous avons examinées nous permettent de gérer les erreurs. Par exemple, la méthode all échoue si une promesse échoue, nous avons donc certaines options, mais nous devons également gérer toutes les autres situations, soit un gestionnaire d'erreurs général, soit la gestion de chaque demande spécifique. Dans le projet de démarrage, dans le fichier de gestion des erreurs, nous avons un élément d'image vide en haut et une seule fonction. Rien de nouveau ici pour cette fonction, il suffit de saisir une URL d'image à l'aide de l'API Fetch. Nous attendons que les données reviennent, qui sont stockées en réponse. Nous extrayons ensuite ces données via la méthode JSON, puis nous renvoyons la propriété image qui contient l'URL. Juste avant, nous utilisons cette fonction, jetons un coup d'œil à un autre exemple simple. Juste en dessous, créons une nouvelle fonction avec n'importe quel nom, et tout ce qui va faire est de renvoyer n'importe quelle chaîne simple. Après cela, nous consignerons la valeur de retour de la console, nous appellerons notre fonction, nous ouvrirons dans le navigateur et il y a notre message de retour. Rien d'inattendu ici, mais si nous marquons cette fonction comme asynchrone, alors juste avant le mot de la fonction, marquez cela comme asynchrone, et cette fois nous recevons une promesse. Nous allons juste laisser cette fonction là, mais gardez cela à l'esprit un instant. Dès que nous marquons une fonction comme asynchrone, elle renverra une promesse. Nous savons que nous avons une fonction pour saisir l'URL de l'image, alors créons une deuxième fonction qui va réellement définir l'URL de l'image via cet élément d'image. Cela peut également être asynchrone, appelez ce SetImage. Ensuite, à l'intérieur, tout ce que nous allons faire est saisir nos éléments d'image avec le sélecteur document.query et de définir la source pour qu'elle soit égale à la valeur de retour de la fonction ci-dessus. Je commence par l'élément image, et je définit la source égale à notre fonction ci-dessus, qui est GetImageURL. Nous devons appeler cela. La fonction GetImageURL est asynchrone, nous devons donc attendre que cette promesse soit renvoyée avant de pouvoir l'utiliser réellement. Nous allons attendre la valeur renvoyée par cette fonction. Tout cela est activé puisque nous avons marqué sa fonction comme asynchrone. Appelons cela juste en dessous, SetImage. Auparavant, lorsque nous gérons des erreurs à l'aide de promesses, nous avons simplement enchaîné une section de capture à la promesse. Cette fonction SetImage est également asynchrone, qui renvoie également une promesse comme nous l'avons vu auparavant avec l'exemple simple, ce qui signifie que nous pourrions enchaîner à la fin, puis à tout le bloc de capture qui est Je vais courir ensuite. On peut enchaîner ça à la fin, en s'assurant qu'il n'y a pas de point-virgule, ajouter de la capture. Catch exécutera une fonction qui prend le message d'erreur et le place dans un journal de console le message de « noooo » ainsi qu' une seconde avec cette erreur. Voyons maintenant ce qui se passe si nous essayons d'appeler cette fonction. Est-ce que nous récupérons l'erreur que nous attraperions ou est-ce que nous définissons l'image ? Cet appel a été un succès, nous voyons donc l'image revenir. Pour tester le bloc de capture, nous devons éteindre le réseau comme nous l'avons fait précédemment, alors accédez à l'onglet Réseau. Ici, nous allons définir les préréglages pour qu'ils soient hors ligne, maintenant nous pouvons les actualiser, nous ne voyons pas l'image. Sautez dans la console. Notre premier journal de console et notre deuxième journal de console n' ont pas pu être récupérés. Nous voyons que cela fonctionne bien et nous mélangeons la syntaxe de l' asynchrone à des promesses. Si nous voulions simplement respecter la syntaxe de promesse ou déplacer la gestion des erreurs dans la fonction elle-même, nous pourrions utiliser ce qu' on appelle try and catch. Essayez d'attraper, comme cela semble, essaiera de faire quelque chose, et si cela fonctionne, est génial, sinon, nous attrapons l'erreur et la gérons c'est génial, sinon, nous attrapons l'erreur et la gérons de la manière que vous voulez. Supprimons la section catch de SetImage, puis, à l'intérieur de notre fonction SetImage, nous créons un bloc d'essai et en dessous d'un bloc de capture, qui va également prendre en compte le message d'erreur. C'est assez simple, tout ce que nous avons à faire est de déplacer notre code que vous souhaitez exécuter à l'intérieur du bloc try, alors découpez-le, collez-le dans la section d'essai, puis à l'intérieur de la prise nous pouvons placer dans les mêmes journaux de console, donc une chaîne et également un deuxième journal de console avec le message d'erreur qui est transmis à cette fonction. Gardons ça et essayons ça. Gardez à l'esprit que mon réseau est toujours désactivé Si nous réessayons, nous ne voyons pas l'image, vous verrez nos deux messages d'erreur à l'intérieur de la console. Essayons de le rallumer , renvoyer le réseau, l' image est maintenant renvoyée et aucun de ces journaux de console ne s'exécute à l'intérieur d'ici. Cette section « Essayer et attraper » s'exécute de manière synchrone, donc nous allons exécuter la toute première section qui est essayer. Si tout cela fonctionne, c'est tout à fait correct, mais s'il échoue, il passera ensuite au bloc de capture suivant et exécutera le code contenu à l'intérieur. En plus de cela, nous avons également une section 2. Cela fonctionne comme lorsque nous nous sommes finalement enchaînés à la fin d'une promesse. Enfin, elle sera toujours exécutée que la promesse ait été respectée ou rejetée. En bas, passez enfin, et nous ne ferons que le placer dans un simple journal de console. Essayons ceci, actualisez et nous voyons le journal de la console avec le texte de toujours run. Tout comme une petite note de côté, la prise ou le bloc final doivent être présents. Il doit avoir au moins un de ces éléments en place, ou tout comme cet exemple, nous pouvons utiliser les deux. C'est correct pour la capture d'erreur générale, mais qu'en est-il si nous voulions savoir quelle partie du code d' essai a échoué ? Pour le moment, c'est assez simple car nous n'avons qu'une seule ligne de code. Mais qu'en est-il si cette section d'essai faisait plus que cela ? Pour cela, nous pourrions enchaîner un bloc de capture directement sur la tâche asynchrone et pour voir un exemple, je vais juste copier cette fonction complète, commenter cela pour référence, puis la coller ci-dessous. Nous pouvons supprimer toute la gestion des erreurs que nous venons d'ajouter, qui inclut le catch, le final, ainsi que le try-block quittant notre simple fonction asynchrone. Avec cela, nous pouvons ensuite retirer le point-virgule, nous pourrons ensuite enchaîner la prise à l'extrémité, à l'intérieur de la prise, nous pourrions passer une fonction directement à l'intérieur, ou si nous voulions réutiliser cette fonction, nous pourrions créer un fonction séparée à l'intérieur de notre code. Créons une fonction juste au-dessus du nom d'erreur de poignée. Nous allons simplement saisir nos deux messages d'erreur, les coller. L'erreur prendra également en compte le message d'erreur, puis nous pouvons l'appeler à l'intérieur de catch. Cela nous donne une fonction réutilisable distincte, que nous pourrons ensuite enchaîner la fin de plusieurs promesses. Essayons ça. Nous devrions maintenant voir nos deux messages d'erreur. S'il y a un échec. Si ce n'est pas le cas, nous voyons l'image, cela fonctionne très bien. Essayons de désactiver le réseau une fois de plus, allez sur la console, voici nos messages d'erreur à l'intérieur. Bien sûr, un journal de console ne suffirait pas dans une application réelle, nous voudrions peut-être masquer l'image en cas d'erreur ou même ajouter une image de place en place. Mais la clé ici est de faire quelque chose plutôt que de simplement voir le site Web ou la panne de l' application. gestion des erreurs est une partie importante du JavaScript asynchrone, et nous voyons ici quelques modèles courants que vous pouvez utiliser dans vos projets, ce qui améliorera réellement les fonctionnalités et l'expérience utilisateur. 64. Quittant Tôt: Ce premier projet que nous trouvons dans la dernière section de cette classe s' appelle Leaving So Soon, et il contient du code de démarrage donc nous allons nous concentrer sur le JavaScript. Ce projet est ce qu' on appelle une fenêtre contextuelle d'intention de sortie. Une fenêtre contextuelle d'intention de sortie est essentiellement un moyen d' attirer l'attention de l'utilisateur s'il tente de quitter votre site. Nous avons du HTML simple, avons notre titre, puis nous avons cette section contextuelle à l'intérieur d'une div. Si nous passons au projet et que nous les actualisons, tout ce que nous voyons actuellement, c'est ce titre. L'idée est que nous avons un site Web simple comme celui-ci et que vous avez peut-être vu ce type de sites Web lorsque vous naviguez en ligne. Si vous essayez de déplacer la souris vers le haut, de fermer le navigateur, ou même de rechercher ou de naviguer loin du site, vous pouvez souvent voir apparaître une fenêtre contextuelle. Cette fenêtre contextuelle peut contenir des informations. Il peut contenir un code de bon d'achat, ou tout simplement n'importe quoi pour garder l'utilisateur sur votre site. Nous ne voyons pas cette section contextuelle car si nous regardons cette div, il y a l'ID de la fenêtre contextuelle de sortie. À l'intérieur de nos feuilles de style, si nous examinons cette section, le type d'affichage est actuellement défini sur Aucun. Si nous changeons cela pour être flexible et actualisé, l'arrière-plan disparaîtra à cause de l'animation CSS, que nous avons juste en bas. Notre fenêtre contextuelle apparaît maintenant avec tout le texte à l'intérieur. Le contenu à l'intérieur de ces sites Web ou à l'intérieur de cette fenêtre contextuelle n'est pas pertinent. L'idée est que nous voulons basculer ce paramètre d'affichage une fois que la souris d'un utilisateur quitte le haut du navigateur. Pour l'instant, revenons dans notre feuille de style, et je vais le cacher par défaut. Ensuite, nous travaillons à l'intérieur de notre script, qui est déjà lié en bas. Ouvrons ça. Si vous pensez à ce que nous voulons faire ici, il n'y a pas beaucoup de tâches que nous devons exécuter. Commençons par créer une fonction qui s' exécutera lorsque la souris aura quitté la zone de la fenêtre. Une fois que la fenêtre contextuelle s' affiche à l'intérieur du navigateur, nous avons également besoin d'un moyen de cliquer sur un X dans le coin et de le fermer jusqu'à. Créez une deuxième fonction appelée ClosePopup. Nous allons commencer par notre première fonction, qui est LeftWindow et pour cela, nous devons écouter un événement de souris. Nous allons sélectionner le document qui est notre page Web complète, puis nous écouterons quand la souris part avec l' événement de sortie de la souris. Prenons nos documents. Nous pouvons ajouter un écouteur d'événements. Événements. Nous voulons écouter la souris dehors, ce qui va alors déclencher notre fonction ci-dessus. N'oubliez pas qu'avec les événements, cela prend également en compte les informations d'événement auxquelles nous pouvons accéder à l'intérieur d'une variable. Commençons par ouvrir une session dans la console. Consignez les informations sur l'événement dans la console, actualisez et nous pouvons voir si nous déplaçons la souris en dehors de la zone des documents, cet événement de souris est maintenant déclenché. Cela fonctionnera également si vous optez pour l'autre côté, ainsi que les deux premiers. Sautez ici. Les coordonnées de la souris qui nous intéressent sont ClientX et ClientY. Il s'agit d'une valeur de pixel qui nous indiquera l'emplacement de la souris une fois cet événement déclenché. Tout comme lorsque nous avons regardé la toile très tôt, X est la direction gauche ou droite, et le Y est de haut en bas. Puisque nous essayons de faire attention à la souris, quittant le haut du navigateur pour fermer cette fenêtre, nous allons nous intéresser à la direction ClientY. Nous pouvons filtrer cela vers le bas, e.Clienty. Rechardons-nous. Maintenant, si nous allons en haut, nous pouvons voir dès que nous passons le haut de la zone du navigateur, nous commençons à obtenir un nombre négatif, ce qui signifie que le plus haut ici est la valeur zéro. Nous devons écouter peut-être une zone de 20 pixels, qui affichera toutes les fenêtres contextuelles dès que l'utilisateur déplace la souris vers la zone supérieure du navigateur. Nous pouvons supprimer le journal de la console. Placer dans une déclaration if. Nous pouvons dire que si e.Clienty est inférieur à n'importe quelle valeur de votre choix, je vais en opter pour 20. Comme nous l'avons vu à l'intérieur de ces feuilles de style, nous pouvons saisir nos éléments avec l'ID de la fenêtre contextuelle de sortie et basculer le type d'affichage. Saisissez cela avec le Document.QuerySelector. J'envoie l'ID de la fenêtre contextuelle de sortie. Définissez la propriété style de l'affichage comme étant égale à Flex. Essayons ça. Rafraîchissez et passez maintenant en haut, et celui-ci déclenchera notre fenêtre contextuelle. Vous pouvez penser que tout cela fonctionne bien et c'est tout ce que nous devons faire. Nous devons également prendre des mesures pour ne pas irriter l'utilisateur. Vous devez activer cette croix pour qu' elle active notre fonction ClosePopup. Mais je veux probablement exécuter ce code uniquement pour activer la fenêtre contextuelle après un certain temps, et nous voulons également nous assurer que ce code n'est déclenché qu' une fois lors de la visite de l'utilisateur. Pour nous assurer que ce processus n'est déclenché qu'une seule fois, nous allons procéder à l'inverse et nous supprimerons l'écouteur d'événements des documents. À partir des premières vidéos, nous savons que nous devons copier les mêmes informations depuis AddEventListener. Nous ne pouvons pas encore tester cela car nous devons également pouvoir fermer la fenêtre avant de pouvoir la réactiver. Nous allons maintenant le faire dans la zone ClosePopup, puis faire l'inverse en définissant le type d'affichage sur Aucun. Pour activer cette fonction, nous devons écouter un clic sur notre croix. À l'intérieur de la page d'index, la plage contient la zone transversale. Prenons cela à l'intérieur de notre script, sous le bas, Document.QuerySelector. Nous allons sélectionner notre portée. Stockez-le à l'intérieur d'une constante appelée CloseBTN. Saisissez les éléments, ajoutez un écouteur d'événements. Nous voulons écouter les événements de clic, qui exécuteront notre fonction ci-dessus. Essayons ça. Déplacez-vous vers le haut pour activer la fenêtre contextuelle. Cliquez sur la croix. Nous pouvons également voir si nous passons en haut du navigateur, notre fenêtre contextuelle n'est pas réactivée car nous avons supprimé l'écouteur d'événements. Tout va bien, ça marche plutôt bien. Mais un ajout rapide est de nous assurer que la fenêtre contextuelle n'est pas activée dès que l' utilisateur visite le site. S'il y a, par exemple, tapé quelque chose en haut puis déplacé tout de suite, vous ne voulez pas que la fenêtre contextuelle apparaisse immédiatement. Ce que nous allons faire, c'est que nous allons placer un SetTimeout pour activer cette fonction uniquement après un certain délai. Appelez un SetTimeout. Passez une fonction où nous pouvons déplacer notre souris hors événement, ce qui déclenche notre fonction. Je ne l'appellerai qu'après un délai de trois secondes. Essayez-le pour que nous puissions déplacer notre souris vers le haut pendant les trois premières secondes. Ensuite, après trois secondes, notre fonction est active. Projet assez simple, et nous pouvons faire beaucoup avec une petite quantité de code JavaScript. C'est quelque chose que vous pourriez trouver utile lors de la création de sites Web à l'avenir. comme notre prochain projet, qui sera un carrousel d'images, construirons complètement à partir de zéro. 65. Carousel- Réglage Des Images: Dans notre prochain projet, nous allons construire un carrousel d'images. Ce sera le résultat final, et il est entièrement construit avec JavaScript. Ce que nous aurons, c'est une grande image principale tout en haut. Nous pouvons parcourir les images du bas pour les remplacer à l'aide des flèches gauche et droite. De plus, nous pouvons passer à l'une de ces images en cliquant dessus et en les plaçant dans la section supérieure. Cela permettra de rassembler de nombreuses compétences que vous avez acquises et mieux voir comment les choses fonctionnent dans la pratique avec une application réelle. Recommençons cela dans les fichiers de démarrage. Si nous passons à la section suivante, qui est le carrousel d'image, nous avons un code de démarrage. Nous avons une page d'index très simple, nous allons injecter tout le contenu par JavaScript. Tout ce que nous avons, c'est une plongée vide avec l'identifiant du carrousel. Nous allons placer tout le contenu de l'image, puis nous allons créer un lien vers notre script. Le script se trouve dans le dossier du carrousel, qui contient nos images, nos feuilles de style et également le code JavaScript pour que cela fonctionne. Ce cours contient cinq images différentes que vous pouvez remplacer ainsi que quelques CSS de base. Nous avons juste un style de base. Par exemple, nous définissons le carrousel principal une certaine largeur et le plaçons également au centre avec la marge 0 auto. Nous avons des effets de survol. part cela, un style général ainsi que la petite et la grande classe que nous avons ici. Nous ajouterons ces classes plus petites que grandes à chacune de ces images pour qu'elles s'adaptent parfaitement à l'écran. Commençons. Nous sautons dans notre carousel.js vide. Nous allons commencer par saisir cette section div de carrousel et créer un tableau avec toutes les images. Allez dans le fichier carousel.js. Nous allons commencer par créer un tableau de nos images. Chacun d'entre eux sera une chaîne pointant vers l'URL située dans le dossier des images. Si vous avez utilisé vos propres images, n'oubliez pas de changer les noms à l'intérieur d' ici pour correspondre à ceux que vous avez placés à l'intérieur. Le premier, c'est dans le dossier carrousel, et le chemin d'accès au fichier est images/beach.jpg. Nous allons dupliquer cela pour nous donner cinq images différentes. Le second était celui des éléphants. Nous avons de l'herbe. Nous avons un lac, et le dernier est en ville. Ensuite, nous allons chercher une référence à notre carrousel. Nous allons stocker cela à l'intérieur d' une constante appelée wrapper est égale à document.query selector, plus dans l'ID du carrousel. La prochaine étape, nous allons créer une fonction qui va saisir toutes ces images, boucle et les placer sur l'écran. Créez donc une fonction ci-dessous appelée SetImages. La première étape de cette fonction consiste à saisir notre wrapper, et nous supprimerons tout contenu existant. C'est pour que nous puissions répéter le processus de configuration de nos images, mais parfois elles seront dans un ordre différent. Nous supprimerons toutes les images supplémentaires en saisissant notre wrapper et en définissant le code HTML interne comme une chaîne vide. Avant que j'oublie, nous appellerons notre fonction par le bas, puis elle saisira nos images et créera une boucle pour chaque boucle pour chaque boucle sur chacune de ces images, images.FoReach, plus la fonction interne. Nous allons créer une référence à chacun d'entre eux et nous l'appellerons source image, ImageRC. Ouvrez le corps de la fonction, puis à l'intérieur d' ici, nous allons créer un nouvel élément d'image, stocker dans une variable appelée éléments, documents.createElement. Écrivez un élément d'image. Ensuite, nous devons définir la source de l'élément image pour qu'elle soit égale à cette variable. Prenez notre élément, définissez l'attribut source comme étant égal à notre source d'image. Nous pouvons ensuite saisir notre emballage, que nous avons stocké dans cette constante, puis nous pouvons ajouter à ce nouvel élément, Wrapper.AppenChild, plus dans notre élément nouvellement construit. Passons au navigateur et voyons ce que nous avons. Nous avons nos cinq images différentes de cette boucle, mais si nous examinons la version finale, nous ne voulons pas simplement placer cinq images aléatoires à l'intérieur du conteneur. Ce que nous voulons faire, c'est agrandir la première image, puis créer une section séparée en bas avec les petites images restantes. Pour ce faire, nous allons créer un wrapper pour toutes les petites images en bas, puis il le séparera l'endroit où une petite image à l'intérieur, et la grande image en haut. abord, revenons notre fonction et créons un nouveau wrapper pour les quatre petites images en bas. Juste après où nous nettoyons notre tige et créons une nouvelle constante appelée SmallimageWrapper. Cela est égal à Document.CreateElement. Il peut s'agir de n'importe quel élément que vous voulez, comme une div ou une section, peu importe. Ensuite, saisissez notre section et nous lui donnerons un identifiant unique de SmallimageWrapper. Maintenant, ce que nous voulons faire, c'est passer en boucle les cinq images de la matrice. La toute première doit être placée dans l'enveloppe, puis les quatre images restantes doivent être placées à l'intérieur de notre petite enveloppe d'image. Pour ce faire, nous pouvons d'abord sélectionner notre enveloppe complète et vérifier s'il contient un contenu actuel. Si aucun élément d'image n'est déjà affecté à cette enveloppe, cela signifie qu'il s'agit d'une toute première image du tableau. Ce que nous pouvons faire à l'intérieur de notre boucle c'est que nous pouvons placer une instruction if, et nous pouvons vérifier si notre wrapper n'a pas de nœuds enfants. On peut le dire ! Wrapper.a des nœuds enfants. Le code à l'intérieur d'ici ne s'exécutera que si ce wrapper est vide et qu'il ne contient aucune image supplémentaire à l'intérieur. Ce sera toujours le cas si nous passons en boucle et sur la première image. Si c'est le cas, nous voulons définir la classe. Si nous examinons nos feuilles de style, nous voulons définir cette classe de grandes dimensions car elles ont une largeur de 100 %. Si ce n'est pas le cas, nous ajouterons la classe des petits, qui vous donne cette taille plus petite. C'est ajouter une classe, nous pouvons saisir nos elements.classlist.add, placer dans la classe des grands, et aussi la classe de carrousel. Cette classe de carrousel, si nous revenons à nouveau dans la feuille de style, transformera le curseur en pointeur lorsque l'utilisateur survole l'image. Celui-ci ne doit s'appliquer qu' au tout premier élément à l'intérieur de notre enveloppe, sinon il devrait s'appliquer aux quatre images restantes. Nous ajouterons une liste de classes de petites classes. Nous ajouterons tous les petits et aussi carrousel. Nous obtenons toujours l'effet de survol, mais cette fois-ci, puisque nous traitons des quatre images plus petites, nous ne voulons pas les ajouter à l'enveloppe principale. Nous voulons plutôt les ajouter à notre petite enveloppe d'image que nous venons de créer. Alors attrapons ceci, ouvrez l'enfant, en plaçant nos éléments. Gardons ça et essayons ça. On y va. Il y a notre grande image et les quatre petites images de ces div séparées. récapituler, ce que nous avons fait ici, c'est que nous avons créé une grande enveloppe pour l' ensemble de notre section. Nous avons créé une fonction appelée Set images. Dès que cela s'exécute, il effacera tout contenu existant de l'enveloppe, ce qui signifie que lorsque nous parcourons nos images en boucle, si cette enveloppe est vide, cela signifie qu'il s'agit d'un tout premier élément de le tableau, donc nous lui donnons la grande classe. Si ce n'est pas le cas, ce sont les quatre images restantes où nous ajoutons le cluster de petits et que nous le plaçons également dans une div séparée. C'est une bonne première étape pour notre projet. Dans les prochaines vidéos, nous examinerons diverses autres fonctions telles que la réorganisation de ces images, façon d'échanger les images et aussi comment les placer dans les flèches pour aller à gauche et à droite. 66. Carousel- Création Des Flèches: Nous en sommes maintenant au stade de notre projet où les cinq images sont affichées à l'écran. Nous avons une grande image de fonction en haut, puis quatre miniatures plus petites ci-dessous. Nous avons quelques améliorations à apporter, nous voulons pouvoir cliquer sur n'importe laquelle de ces images plus petites et placées dans la section en vedette en haut de la page. Nous voulons également pouvoir les faire pivoter en ajoutant une petite flèche vers la gauche et la droite. Commençons par ajouter les flèches une fois les images chargées. Pour ce faire, nous pouvons les placer dans une fonction autonome et appeler cela. Permettez-moi d'appeler nos images. Au bas de cette fonction, nous appellerons notre fonction, que nous allons appeler SetArrows. C'est la fonction que nous allons créer ensuite. Juste en dessous, nous définissons notre fonction qui était SetArrows. SetArrows n'a pas besoin de prendre en compte quoi que ce soit comme paramètre. Ce que nous devons faire ici, Ce que nous devons faire c'est que nous pouvons créer des icônes à l'aide entités HTML et les stocker en tant que code HTML interne d'un élément span. Ce dont nous avons besoin, ce sont deux constantes, la première est la flèche gauche juste égale à Document.CreateElement comme dans une plage. La raison pour laquelle nous utilisons la plage est que, par défaut, il s'agit d'un élément en ligne Nous pouvons donc les placer en ligne avec nos quatre images. La flèche gauche, accédons à ces constantes et définissons le code HTML interne comme égal à notre entité HTML et le code de la flèche gauche est le ‹ Les deux flèches, vous devez cliquer dessus et réorganisez toutes nos images. Nous allons sélectionner nos constantes et ajouter un écouteur d'événement est maintenant un clic libre, ce qui va déclencher une fonction. Nous n'avons pas encore créé cette fonction, mais elle s'appellera ReOrder et pour ne pas lancer d'erreurs, nous allons créer cette fonction ci-dessus. Cela n'a pas besoin d'avoir de contenu, nous y reviendrons. Juste en dessous de notre écouteur d'événements , nous ferons à peu près la même chose, mais cette fois, pour la flèche droite, nous allons créer les éléments de span avec le document. CreateElement, définissez le code HTML interne, RightArrow.innerHTML. Le code d'entité HTML de la flèche droite est ›, qui n'est qu'un seul vers le haut de la flèche gauche. Ajoutez un écouteur d'événements. Celui-ci est également à l'écoute d'un événement de clic, qui déclenchera la même fonction. Ce sont nos deux flèches créées avec le contenu et l'écouteur d'événements. Mais ce que nous devons maintenant faire, c'est d'ajouter ces deux éléments à une certaine section. Si nous revenons à notre première fonction qui était SetImages, nous avons ce SmallimageWrapper. Il s'agit d'une section div qui contient plus de quatre petites miniatures Nous allons donc les ajouter à cette section. La façon dont nous pouvons le faire au début et à la fin consiste à utiliser une méthode JavaScript appelée AppendChild, qui ajoutera cela à la fin de la div placée à droite. Ensuite, pour la flèche gauche, nous pouvons utiliser la méthode prepend, qui ajoutera cela au tout début de notre div. Nous allons le faire au bas de notre fonction SetArrows. Prenons d'abord la section, donc à l'intérieur d'une constante appelée SmallimageWrapper, le Document.QuerySelector, elle a l'ID de SmallimageWrapper. Prenez cette section. Comme je viens de le mentionner, nous allons placer la flèche droite dans ce contenu avec AppendChild, comme nous l'avons regardé précédemment. Cela ajoutera cela à la toute fin de notre section div après nos images. Placez-le dans notre flèche droite, puis ajoutons notre flèche gauche au début, nous utiliserons la méthode prepend et insérerons notre flèche gauche. Essayons ça. Maintenant, après actualisation, nous ne voyons toujours pas nos flèches à l'écran. Jetons un coup d'œil dans la console et voyons si cela nous donne des indices. À l'intérieur, nous pouvons voir que nous ne pouvons pas lire propriétés de null, en lisant AppendChild, donc lorsque nous essayons d'ajouter un nouvel élément à notre enveloppe d'image unique, nous semblons rencontrer un problème. La raison pour laquelle cela se produit est parce que nous avons un SmallimageWrapper que nous créons en haut. Lorsque nous définissons nos images, nous avons l' enveloppe principale qui contient notre carrousel complet, puis nous avons notre SmallimageWrapper, que nous essayons de sélectionner par cet ID dans la boucle. Mais chacune de nos images, nous créons de nouveaux éléments d'image stockés dans cette variable, nous ajoutons la classe grande ou la petite classe, et s'il s'agit d'une petite image, nous les ajoutons ensuite quatre petites images de ce petit papier d'image. Mais actuellement, nous n' ajoutons pas réellement de SmallimageWrapper au DOM, tout ce que nous faisons est de le créer et d'ajouter nos quatre éléments, mais nous ne le plaçons pas dans le DOM. Au moins, nous sommes en mesure de sélectionner vers le bas. La seule fois que quelque chose est ajouté au DOM, c'est quand nous ajoutons cet élément à notre wrapper. L'ajout de l'élément directement à notre emballage est tout à fait correct s' il s'agit de la grande image car elle va aller directement à l'intérieur du carrousel principal. Cependant, lorsque nous avons affaire à une petite image, nous voulons attribuer ces SmallimageWrapper à cette section. La façon dont nous pouvons le faire est de sélectionner notre élément et de le définir comme égal à notre SmallimageWrapper. Ce SmallimageWrapper contiendra l'ensemble de nos quatre petites images , puis nous ajouterons cela à notre wrapper principal. Maintenant, si nous sauvegardons cela et nous rafraîchissons, nous pouvons maintenant l'ouvrir, nous voyons nos deux flèches sauter dans les éléments et si nous entrons dans le corps, nous voyons notre emballage principal avec ID de carrousel. Nous pouvons ouvrir cela. Nous voyons notre première image avec la classe des grands. Juste pour clarifier, celle-ci est assignée car dès que nous commençons à parcourir toutes nos images, nous vérifions si cette section est vide, si elle est plus grande avec la classe des grands et ajoutez-le à notre emballage. Sinon, les quatre images restantes réduiront la classe et ajouteront ensuite à notre SmallimageWrapper, qui sera ensuite transmis à nos éléments, puis nous pourrons les ajouter au DOM, que nous pouvons voir si nous Regardez cette plongée juste ici. Nous pouvons ouvrir cela. Nous avons notre élément span que nous venons d'ajouter avec prepend, nous avons nos quatre images, puis la dernière période que nous avons ajoutée avec AppendChild. 67. Carrousel d'image - Re-Ordering des images: Auparavant, nous avons configuré nos flèches gauche et droite et les avons également liées à une fonction appelée ré-ordre. Nous l'avons fait en créant nos flèches à l'intérieur de cette fonction, utilisant notre événement for a click, en utilisant notre événement for a click, qui a déclenché notre fonction. Ce que nous allons faire maintenant, c' est créer un nouveau tableau. Ce nouveau tableau va être construit en réorganisant l'ordre de toutes ces images. Nous allons le faire à l'intérieur de notre fonction en saisissant d' abord les informations de l'événement à partir du clic, et la raison pour laquelle nous le faisons est que nous devons déterminer lequel de ces boutons a été cliqué. Nous devons savoir s'il s'agit du bouton gauche ou du bouton droit. Nous pouvons le faire en ajoutant un ID à chacun d'entre eux, de sorte que le LeftArrow.ID est simplement égal à gauche. Ensuite, descendez dans la droiteArrow.ID à droite. Nous pouvons maintenant accéder à cet ID par les informations des éléments de l'événement. Nous savons par le passé, en faisant un journal de console, si nous consignons la valeur de e.target, nous obtenons les éléments réels à l'intérieur de la console. Cliquez sur l'un de ces boutons pour obtenir le bouton droit, puis sur le bouton gauche. Nous pouvons également filtrer cet objet vers le bas, saisir uniquement l'ID. Cela nous donne maintenant un pointeur unique sur le bouton qui a été enfoncé. Nous pouvons maintenant supprimer cela d'un journal de console, stocker à l'intérieur d'une constante appelée direction. Maintenant, ce que nous allons faire, c'est que nous allons parcourir notre tableau d'images tout en haut. Nous veillerons à couvrir ces cinq images. Nous déterminerons ensuite si le bouton gauche ou le bouton droit a été cliqué, puis nous l'utiliserons pour réorganiser nos images. Ces nouvelles images seront stockées à l'intérieur d'un nouveau tableau appelé NewarRay, qui aura la valeur initiale d'un tableau vide, puis nous pourrons parcourir toutes nos images en boucle. Faites cela avec une boucle FoReach, passez notre fonction. Ensuite, à l'intérieur de cette fonction, il va prendre en compte deux choses. abord, comme toujours, nous transmettrons un nom de variable, qui sera chaque image de cette boucle particulière, puis nous pourrons également accéder au numéro d'index. Pour la première boucle, il s'agit du premier élément, qui est notre plage avec un indice de 0. Ensuite, cela sera incrémenté d' un sur chaque boucle. Pour réorganiser ces images, nous devons d'abord vérifier si la direction commence par la gauche. Sinon, nous ajouterons une autre section qui s' exécutera si la direction est égale à droite. Réfléchissons à ce que nous voulons faire si la direction est laissée. Si vous cliquez sur ce bouton gauche, nous devons parcourir le tableau d'origine que nous faisons et pour le tout premier élément à l'intérieur d'ici, nous voulons le pousser jusqu'à la fin de notre nouveau tableau, puis pour les quatre images restantes en bas, nous voulons les déplacer d'une position vers le bas. Nous pouvons le faire à l'intérieur du bouton gauche. Nous allons vérifier si le numéro d'index auquel vous aurez accès ici est égal à 0, est-à-dire qu'il s'agit de l'image principale en haut de la page. Si c'est le cas, nous voulons le pousser jusqu' au bout de notre nouvelle baie. Nous pouvons le faire en accédant à cette variable. Nous pouvons positionner cela à la toute fin en accédant à notre propriété images.length. Pour cet exemple, il devrait s'agir notre nouveau tableau dans l'index Position 5. Nous allons définir cette image pour être la première. Saisissez notre première image de la matrice originale ou la poussez jusqu'à la fin de notre nouvelle image. Nous l'appellerons également NewarRay.Shift au cas où il y aurait quelque chose au début de ce tableau. C'est la toute première image prise en charge, mais qu'en est-il des quatre autres ? Eh bien, pour les quatre images restantes, il suffit de saisir le numéro d'index actuel et de le déplacer d'un. Nous pouvons le faire à l'intérieur d' une autre section juste après , en plaçant autrement. Ce sera le cas pour les quatre autres images. Tout ce que nous voulons faire est de saisir notre nouveau tableau, sélectionner l'indice actuel, d' adopter la valeur d'un et de le définir comme égal à notre image actuelle. Par exemple, si notre image actuelle est l'index numéro 3, elle sera déplacée vers le numéro 2, ce qui sera identique pour les quatre images restantes. Avant d'aller plus loin, essayons ça. Actuellement, notre fonction est appelée et elle réordonne le tableau, nous devrons également remplacer le tableau d'images d'origine par notre nouveau. Nous pouvons le faire en bas de notre fonction, définir notre tableau d'images pour qu'il soit égal au nouveau tableau. De plus, une fois que nous avons réinitialisé notre tableau d'images, nous devons appeler la fonction set images, qui est en fait en boucle sur ce tableau et les affiche à l'écran. Nous allons le faire en bas. Appelez cette fonction, et essayons cela. Actualisez. Si nous cliquons sur la « Flèche droite », nous obtenons une erreur car nous n'avons pas encore traité cette affaire. Essayons à gauche. Nous avons les éléphants, qui ont maintenant atteint la première position d'index. Cliquez à nouveau sur « Gauche ». Cela est passé à la fin. Tout cela semble bien fonctionner. Pour résumer, nous saisissons la toute première image puis la poussons à la fin de notre nouvelle matrice. Actuellement, c'est la plage, ça va jusqu'au bout, et les quatre autres images seront déplacées vers la gauche par un numéro d'index. Ensuite, nous allons nous occuper de la section L, c' est-à-dire si le bouton droit a été cliqué. Ce que nous allons faire ici est essentiellement le contraire de cette ligne juste ici. Nous devons, plutôt que de supprimer un numéro d'index pour le déplacer vers la gauche, nous devons en ajouter un pour déplacer chacun vers la droite. Nous allons coller cela dans, le tout à un numéro d'index de 1. Cette fois-ci, plutôt que de vérifier si nous accédons à la première image, nous devons vérifier si nous accédons à la dernière image. S'il s'agit de la dernière image , elle doit être supprimée de la fin du tableau et placée au tout début. Nous pouvons le faire à l'intérieur d'une section si. Si l'index plus un est égal à des images ou à une longueur. La raison pour laquelle nous l'avons fait, car rappelez-vous que numéros d' index commencent à 0, mais lorsque nous accédons à la longueur du tableau, il s'agit du nombre réel. Actuellement, il s'agit de 5, mais l'indice ne va que jusqu'à 4, ce qui signifie qu'il faut plus 1. Vérifiez si cette valeur est également égale à 5. Donc, si cela est égal à 5, il s'agit de notre toute dernière valeur dans le tableau. Nous devons définir cela au tout début. Le tout début de notre nouveau tableau sera l'index numéro 0, que nous pouvons définir pour être l'image actuelle. Tout comme nous l'avons fait lorsque nous avons retiré le tout premier élément du tableau, cette fois, nous devons supprimer le tout dernier, NewarRay.pop. Sauvons ça et essayons celui-ci. À droite, nous devrions voir les maisons se déplacer vers le haut et la plage vers la gauche. Bien. Maintenant, le lac, l'herbe, les éléphants. Cela fonctionne désormais parfaitement dans les deux sens. 68. Carousel- Images de swapping: Notre prochaine et dernière tâche pour ce projet consiste à permettre à l'utilisateur de cliquer sur l'une de ces petites vignettes, puis elle sera échangée avec l' image principale en haut. La petite image sera placée dans la grande section et la grande image sera ensuite descendue jusqu'à la zone des vignettes. Pour celle-ci, nous créons nos petites images de n'importe quelle fonction d'images de jeu, sautez dans la section autre, où nous ajoutons la classe des petits. Ce que nous allons faire ici, c'est que nous ajouterons un écouteur d'événements à chacun d'eux. Juste après avoir ajouté la classe. Avant de l'ajouter à notre wrapper, nous sélectionnerons nos éléments, ajouterons un écouteur d'événements, où nous écouterons le clic, ce qui va déclencher une fonction qui créera juste une moment appelé SwapImages. Vers le bas. Notre fonction permet d'échanger des images. À l'intérieur, nous avons ajouté l'écouteur d'événements, qui va déclencher cette fonction, chaque fois que nous cliquons sur l' une des petites images, mais juste par mesure de précaution supplémentaire, nous ajouterons une déclaration if pour revenir à cette fonction si vous avez cliqué sur la grande image. Ce que nous allons faire, c' est qu'il s'agit d'un événement, cliquez sur « Événement », nous analyserons les informations sur l' événement, nous accéderons aux éléments avec e.target. Ensuite, nous pouvons vérifier si la ClassList contient, à l'aide d'une méthode contains, la classe de grande taille. Si c'est le cas, nous reviendrons de cette fonction. C'est juste à titre de précaution. Ensuite, ce que nous allons faire, c'est que nous allons saisir à l'aide des informations événements.target, l'image réelle sur laquelle on a cliqué. Il suffit de saisir l'attribut source, découvrir laquelle de ces images doit être placée dans la zone en vedette. Nous pouvons le faire, l' installer à l'intérieur d' une constante appelée source d'image, définir cette valeur égale à e.target. Nous utilisons GetAttribute, où nous allons saisir la source. Nous avons maintenant cette source d'image, qui est le chemin d'accès au fichier. Nous pouvons l'utiliser pour saisir le numéro d' index de notre tableau. Nous allons récupérer notre tableau d'images. Nous utiliserons ensuite la méthode appelée IndexOf, puis nous analyserons dans notre source. Ainsi, les images, IndexOf, comme dans notre nom de variable, qui est source d'image. Cela va renvoyer un numéro d'index que vous pouvez stocker à l'intérieur d' une constante appelée SelectedImageIndex. Ce que nous avons maintenant, c'est le numéro d'index de la vignette cliquée. Nous devons maintenant échanger cela avec l'image qui se trouve à la position d'index 0. Mais avant de procéder à cet échange, nous devons d'abord stocker quelle image est actuellement en position d'index 0. Nous allons stocker cela à l'intérieur d'une constante appelée FirstImage. Définissez ces deux images au numéro d'index 0. Ensuite, nous pouvons réaffecter la première image d' origine, sorte que les images 0 seront désormais égales aux images et analyseront cet index d'image sélectionné. Cela remplace la première image la vignette cliquée sur la vignette, par la vignette cliquée sur la vignette, puis nous devons faire l'inverse en sélectionnant, encore une fois, nos images dans le SelectedImageIndex. Échangez cela avec notre première image. C'est la raison pour laquelle nous commençons FirstImage, car sur la ligne suivante, nous réaffectons la première image. Par conséquent, il nous donne la mauvaise valeur en bas. À la fin, nous appellerons notre fonction SetImages, pour réactualiser le navigateur avec le nouvel ordre de la baie. Essayons ça pour l'herbe. La plage tombe au fond, nous allons essayer celle-ci. Bien. Cela vient compléter notre projet de carrousel d'images. J'espère que ça vous a plu et appris nouvelles astuces en cours de route. 69. Suivez-moi sur Skillshare: Je félicite énormément d'avoir atteint la fin de ce cours. J'espère que vous l'avez vraiment apprécié et que vous en avez tiré quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, me suivre pour toutes les mises à jour et d' être informé des nouveaux cours dès qu'ils seront disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.