Modernes JavaScript für Anfänger: Teil 1

1. Bienvenue dans le cours !: Hé. Bienvenue dans ce cours. Comme nous le savons tous, l'apprentissage nouvelles compétences peut s'avérer difficile, et JavaScript ne fait pas exception. JavaScript dispose d'un si large éventail de fonctionnalités et de choses qui peuvent être utiles, ce qui peut souvent laisser les débutants dans une situation difficile à se demander par où commencer. C'est pourquoi j'ai créé ce cours. En le travaillant dès le début, je vais vous montrer ce qu'est JavaScript, ce qu'il peut faire et pourquoi nous l'utilisons même. Ce cours couvre tout ce que vous devez savoir pour devenir un développeur JavaScript compétent. Si vous n'avez pas suivi un de mes cours auparavant, m'appelle Chris, et je crée sites Web depuis plus de 20 ans, et j'enseigne ces compétences depuis plus de sept ans, les deux cours vidéo aux côtés bootcamps de développement Web de premier plan. s'agit de la partie 1 de 2, et cela vous donnera une excellente base en JavaScript de toutes les bases, y compris les tableaux, les fonctions, les objets, les événements et le DOM, API Web et tous les détails dont vous avez besoin. à savoir entre les deux. Tous ces sujets sont 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, ainsi que quelques mini-défis. À la fin, nous avons également mis en place toutes ces compétences en construisant un lecteur vidéo de travail, comprenant des contrôles entièrement personnalisés, mais aussi un jeu de dépôt de forme amusant, l'aide de l'API glisser-déposer. 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. 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 reprendre un autre cours. 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 et 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 vous éloigner de la classe. Vous pouvez même prendre du recul une fois que vous avez terminé le cours, 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. Plus d'informations sur le projet de classe 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. 3. Voyons ce que Javascript peut faire !: Comprendre le côté théorique de JavaScript est vraiment important, et nous y arriverons très bientôt, mais rien de tel que de voir exactement ce qu'il peut faire juste devant vous. Pour voir ce que JavaScript peut faire, nous allons ouvrir une page Web. Ici, je suis sur le réseau de développeurs Mozilla. C'est developer.mozilla.org. Cela fonctionnera également sur n'importe quelle autre page Web, vous pouvez donc en choisir une autre si vous le souhaitez. Je ne vais pas vous montrer comment JavaScript peut être utilisé pour contrôler ou modifier n'importe quel site Web. Maintenant, juste un petit mot avant d' aller plus loin dans cette vidéo. Il peut y avoir une ou deux choses qui semblent complexes ou peu familières, donc si vous n'êtes pas habitué au codage ou au JavaScript, certaines choses peuvent sembler un peu intimidantes, mais soyez simplement conscient, c'est juste pour vous donne quelques guides sur ce que JavaScript peut faire. Nous ne nous attendons pas à ce que vous vous souviez de tout cela, et nous couvrirons tout ce que nous avons vécu au fur et à mesure que vous avancez dans le cours. Pensez à cela comme un petit dégustateur pour vous enthousiasmer par ce que JavaScript peut faire sur une page Web. Pour voir ce que JavaScript peut faire, je vais ouvrir outils de développement à l'intérieur de Google Chrome, qui fait un clic droit, puis je vais passer à Inspecter. Faisons simplement un peu plus grand pour qu'il soit plus visible. Si vous utilisez un autre navigateur, tel que Safari ou Firefox ou Edge, la plupart des outils de développement sont très similaires Vous devriez donc vous en sortir si vous souhaitez utiliser un autre navigateur. Mais si vous voulez exactement les mêmes choses, je suivrais Google Chrome. La première chose que nous voyons ici est cet onglet Elements, qui a accès à toute la structure HTML qui compose cette page Web. Nous pouvons soit survoler n'importe laquelle de ces lignes de code, et il mettra en surbrillance à gauche la section sur laquelle nous travaillons actuellement, ou nous pourrions également cliquer sur cette flèche, qui est l'inspecteur, et sélectionnez l'une de ces sections ou éléments sur la page. Par exemple, passons à ce titre de niveau 1 et cliquons dessus. Cela mettra instantanément en surbrillance ce titre de niveau 1 à l'intérieur du code, et quand il est sélectionné, vous remarquerez sur la droite que vous avez cela équivaut à 0$, puis nous verrons cette fenêtre contextuelle juste en dessous de laquelle dit utiliser $0 à l'intérieur de la console pour faire référence à ces éléments. Nous pouvons utiliser $0 dans cet onglet Console pour sélectionner l'un de nos éléments ou sections, puis appliquer du JavaScript également. Confirmons simplement que nous avons sélectionné les bons éléments avec 0$, puis nous récupérons notre titre de niveau 1. Nous avons sélectionné cet élément, mais que pouvons-nous en faire ? Eh bien, la liste est énorme, et nous allons seulement gratter la surface ici, et nous en couvrirons beaucoup plus pendant ce cours. Si nous sélectionnons à nouveau 0$ pour pointer vers notre en-tête de niveau 1, puis un point, nous pouvons voir ci-dessous que nous avons accès à de nombreuses options différentes que nous pouvons utiliser sur cet élément. Un texte commun, que nous utiliserons beaucoup dans ce cours, est ce que l'on appelle le texte intérieur. Le texte intérieur permet de simplement modifier le contenu entre la balise d'ouverture et la balise de fermeture. Il disposera de ce texte de ressources pour les développeurs. Si nous le voulons, nous pouvons définir cette valeur égale à n'importe quelle nouvelle chaîne de texte. Ouvrez les devis. Nous pouvons utiliser des guillemets simples ou doubles, même un seul va bien, puis nous pouvons définir ce texte comme n'importe quoi d'autre que vous voulez. Allons-y, j'ai changé, puis nous récupérons immédiatement le texte récemment retourné dans la console, et nous pouvons également voir que la page Web a également été mise à jour. Avant d'aller plus loin, ne vous inquiétez pas de ces changements. ne s'agit pas de mettre à jour le site Web réel. Ce n'est qu'à l'intérieur de notre propre navigateur. Tout ce que nous devons faire, c'est simplement rafraîchir le navigateur et celui-ci sera rétabli dans la version d'origine. De plus, nous le faisons, nous réinitialisons maintenant notre $0, et cela retournera désormais indéfini. Nous examinerons l'indéfini plus en détail tout au long de ce cours. Mais pour l'instant, nous pouvons le considérer comme tout simplement qu' aucun élément n'a été attribué à ce 0$. Comme auparavant, nous devons revenir dans l'onglet Eléments pour sélectionner l'une de ces sections ou éléments avec lesquels vous souhaitez travailler. Allons chercher l'un de ces liens en haut. Encore une fois, utilisez la flèche, et nous pouvons survoler n'importe lequel de ces boutons. Cliquez sur ce bouton. Nous avons ce bouton avec le bouton ID of Feedback, qui devrait maintenant être attribué à 0$. allons le sélectionner, et nous voyons que notre bouton est maintenant renvoyé. Encore une fois, 0$ puis le point nous donnera accès à une gamme de fonctionnalités que nous pouvons appliquer à cet élément. L'une d'elles est la propriété style, et à partir de là, nous pouvons également ajouter une propriété de style supplémentaire que nous souhaitons appliquer à ce bouton particulier. Tout comme avec le CSS normal, si vous avez utilisé CSS par le passé, toutes les mêmes propriétés de style sont disponibles à l'intérieur de la console. Un exemple peut être la couleur du texte, que nous pouvons définir sur n'importe quelle valeur qui est une couleur CSS valide. Appuyez sur « Entrée ». Néanmoins, mettez immédiatement à jour à l'intérieur du navigateur. Appuyez sur le bouton et nous pouvons également ajouter une deuxième propriété. Allons chercher la famille de polices. Encore une fois, nous pouvons modifier cela à l'intérieur des guillemets pour qu'il s'agisse d'une famille de polices cursive différente. Comme prévu, le navigateur sera automatiquement mis à jour. Une chose à noter lorsque vous travaillez avec des styles est nous voyons ici que la propriété de couleur est définie sur rose vif, et cela fonctionne comme une feuille de style classique. Cependant, lorsque nous avons deux mots tels que police et famille, en CSS normal, nous garderions tout cela en minuscules et séparons cela par un trait d'union, donc nous l'écrirons comme ceci en deux mots avec le tableau de bord à l'intérieur. Mais au lieu de cela, lorsque vous utilisez JavaScript, si nous avons deux mots ou plus, nous devons changer cela en ce qu'on appelle CamelCase, et chaque mot après le premier commence par une majuscule. C'est à peu près la seule chose dont vous devez vous souvenir à ce stade. Nous avons accès à toutes les mêmes propriétés CSS, mais nous devons les taper comme CamelCase lorsque vous utilisez JavaScript. Une autre chose que nous allons maintenant examiner est celle des événements. Encore une fois, nous avons une section dédiée aux événements plus tard dans le cours. Mais pour l'instant, je veux juste vous exciter un peu de ce que JavaScript peut faire lorsque vous interagissez avec l'utilisateur. Pour en voir un exemple, nous pouvons demander au navigateur d'écouter un événement de souris exemple lorsqu'une souris survole cet élément particulier. Nous pouvons le faire à nouveau en sélectionnant notre bouton avec 0$, puis nous pouvons utiliser un événement appelé onmouseover. Cela permet de détecter lorsque la souris survole cet élément particulier. Ensuite, nous allons déclencher ce qu'on appelle une fonction. Une fonction ressemble à une tâche qui va s' exécuter lorsque la souris survole ce bouton particulier. Ne vous inquiétez pas si cela ne semble pas familier, nous avons beaucoup plus de détails sur les fonctions à venir. Mais pour l'instant, tout ce que nous allons faire est de sélectionner cet élément particulier. Encore une fois, accédez à la propriété style, et cette fois-ci, faisons en sorte que l'arrière-plan soit égal à n'importe quelle couleur, telle que l'orange. Appuyez sur « Entrée », et cet événement mouseover sera désormais activé. Si nous plaçons maintenant la souris sur ces éléments particuliers, l'arrière-plan est maintenant modifié pour devenir orange. C'est un moyen de tester rapidement les choses dans le navigateur. Mais quand il s'agit d'écrire vrai code JavaScript dans notre éditeur de texte, 0$ ne fonctionnera pas, 0$ ne fonctionne que dans les outils de développement du navigateur. Au lieu de cela, nous avons besoin d'un moyen d'accéder à ces éléments depuis la page de l'extérieur. Par exemple, revenez à la page de l'élément, et ce que nous allons faire est sélectionner une autre section. Allons pour le principal, qui a l'ID du contenu. Bien sûr, nous pourrions accéder à 0$ puisque nous sommes dans les outils de développement, mais nous devons nous habituer à accéder à ces éléments à partir d'un éditeur de texte. Pour ce faire, nous commençons par le niveau le plus élevé, et c'est en accédant aux documents. Nous constatons tout de suite que la page complète sera mise en surbrillance. Cela est dû au fait que le document est cette page Web réelle. Ensuite, une fois que nous avons sélectionné la page complète comme celle-ci, nous avons besoin d'un moyen de filtrer cette page jusqu' à l'élément particulier que nous voulons. JavaScript nous fournit certaines méthodes que nous pouvons utiliser pour filtrer cette page. Comme nous pouvons le voir ici avec cet auto-complet, nous pouvons sélectionner un élément par l'ID, par le nom de la classe et également par le nom de l'élément , mais plus que ceux-ci ultérieurement. Je vais opter pour GetElementByID, puis à l'intérieur des crochets, nous pouvons passer l'ID de l'élément que nous voulons sélectionner. En regardant l'onglet Eléments, nous voyons que cette section principale a l'ID égal au contenu sous forme de chaîne. Passez ceci, et notez également ici qu'il s'agit aussi de CamelCase. Tout comme la famille de polices ci-dessus, chaque mot après le premier commence par une majuscule. Appuyez sur « Entrée ». Cela renvoie ensuite notre principal avec l'ID du contenu. Nous sommes exactement dans la même position que lorsque nous utilisons 0$. Si nous appuyons, nous obtenons la même ligne de code. Nous pouvons ensuite utiliser dot pour accéder aux mêmes fonctionnalités que celles que nous avons utilisées auparavant. Par exemple, définissez le style, puis appliquons l'opacité CSS égale à 0,3. Cela n'est pas appliqué, nous pouvons toujours faire tout autre chose que nous avions auparavant, comme le fond. C'est égal à n'importe quoi. Allons-y pour le rouge. On y va. Le fond de la section principale a maintenant été transformé en rouge. Rafraîchissons et rétablissons cela à son état d'origine. JavaScript ne se limite pas à modifier uniquement les éléments de notre page. Nous pouvons également l'utiliser pour faire beaucoup plus. Nous avons accès aux fonctionnalités de date, nous pouvons accéder à des minuteurs et à certaines fonctionnalités mathématiques. Par exemple, additionnons deux chiffres. Nous dirons que 5 plus 11 est 16, 7 plats à emporter 2 c'est 5. Nous avons également beaucoup d'autres fonctionnalités mathématiques, sorte que nous pouvons sélectionner l'objet mathématique puis pointer, puis faire défiler. Nous pouvons voir que nous avons beaucoup d'options différentes, mais une option populaire est math.Random. Ajoutez les crochets juste après et appuyez sur « Entrée », ce qui générera un nombre aléatoire compris entre zéro et un. Si nous continuons à essayer cela, nous obtenons une valeur différente à chaque fois. Ce n'est qu'un petit aperçu de ce que JavaScript peut faire et de la façon dont nous pouvons l'utiliser pour interagir avec une page Web. Il y a beaucoup d'autres choses à apprendre, et nous en découvrirons davantage fur et à mesure que nous progresserons dans ce cours. 4. Télécharger les fichiers de démarrage: Tout au long de ce cours, nous allons écrire beaucoup de code JavaScript. Pour nous aider en cours de route, je vous ai fourni un dossier appelé les fichiers de démarrage JavaScript modernes. Si vous allez sur github.com/chrisdixon161, puis dans le référentiel qui est modern-javascript-starter-files. À partir de là, vous pouvez télécharger cet ensemble complet de fichiers, qui sont les fichiers de démarrage dont vous aurez besoin pour chaque leçon de ce cours. Par exemple, lorsque vous allez dans la première section, nous trouverons une liste de toutes les leçons de cette section. Chacun de ces dossiers contient le minimum minimal dont vous aurez besoin pour commencer par chacune de ces leçons. Le but de ces dossiers est de nous donner un point de départ, sorte que nous puissions simplement nous renseigner directement sur JavaScript sans, par exemple, avoir besoin d'écrire tout le code HTML requis. Un autre avantage de tous ces fichiers est qu'il nous donne également une référence pour toutes les leçons que nous avons faites dans le passé. Au fur et à mesure que nous cochons chacune de ces leçons, nous avons une référence que vous pouvez consulter en arrière si jamais vous êtes coincé dans le futur. C'est tout ce que nous devons faire. Il suffit d'aller l'avant et de télécharger le dossier. Vous pouvez le faire sur les points d'entrée du dossier principal. Cliquez sur le bouton « Code » juste ici et vous pouvez télécharger le fichier ZIP complet que nous allons ouvrir dans notre code Visual Studio. Une fois ce fichier téléchargé, vous devez disposer d'un fichier ZIP que vous pouvez extraire, généralement en double-cliquant sur le dossier puis en le faisant glisser dans votre éditeur de texte. J'utilise Visual Studio Code et vous devriez voir toutes les sections disponibles sur la gauche. C'est ça, ce sont nos fichiers de démarrage complets. Nous pouvons maintenant tout apprendre sur JavaScript. 5. Où ajouter Javascript: Bienvenue au début de cette section. Nous allons maintenant jeter un coup d'œil à JavaScript et nous allons passer du navigateur à nos propres fichiers JavaScript. la section précédente, nous avons téléchargé les fichiers de démarrage fournis avec ce cours. Si vous ne les avez pas téléchargées, revenez à cette vidéo et téléchargez-les depuis GitHub. Une fois cela fait, vous devrez décompresser le package et le faire glisser dans Visual Studio Code pour l'ouvrir. Sur la droite, j'ai ouvert Google Chrome en tant que navigateur. Ce que nous allons faire maintenant, c'est de commencer dès le début et de regarder exactement où nous pouvons ajouter JavaScript dans nos fichiers. Auparavant, nous avons saisi du code directement dans la console du navigateur, mais de façon réaliste, il est presque toujours écrit dans nos propres fichiers. Par où commence-t-on ? Eh bien, à l'intérieur de Visual Studio Code dans nos fichiers de démarrage, rendez-vous dans notre première section, qui est la base de JavaScript et vous remarquerez que les nombres lointains commencent à 02. C'est parce que pour cette leçon particulière, nous allons commencer dès le début et mettre en place les choses nous-mêmes, et ensuite, pour toutes les autres leçons, elles auront un peu de chaufferie disponible pour que nous puissions y accéder. Nous pouvons simplement passer directement à l'écriture de notre code JavaScript. Pour celui-ci avec les bases JavaScript sélectionnées, cliquez sur cette icône ici, qui consiste à créer un nouveau dossier, puis cela peut être 01. Je vais appeler ça où ajouter JavaScript. Encore une fois, assurez-vous que cela se trouve dans le dossier de base JavaScript, puis , avec ce premier dossier sélectionné, cliquez sur cette icône ici, qui est un nouveau fichier, et cela s'ouvrira à l'intérieur d'ici. Nous appellerons cela le point d'index HTML. Appuyez sur Entrée. Il devrait être à l'intérieur de notre nouveau dossier. , ajoutez une structure HTML de base pour l'ouvrir l'intérieur, ajoutez une structure HTML de base pour l'ouvrir dans le navigateur et Visual Studio Code est livré avec un plug-in ou reconstruit sous le nom d'Emmet. Cela nous donnera un peu de code et quelques raccourcis simples. L'un des plus utiles est le deux-points HTML cinq. Appuyez sur Entrée. Cela nous donnera tout le code de démarrage HTML de base dont nous avons besoin. Encore une fois, tout cela sera disponible dans tous les autres dossiers, donc c'est uniquement pour cette leçon. Le titre, où ajouter JavaScript. Ensuite, nous avons besoin des éléments qui fonctionnent réellement tels qu'un en-tête de page. Placer quelque chose comme h1 et du texte à l'intérieur d'ici. Avoir ces éléments en place ici signifie que nous pouvons utiliser JavaScript pour accéder à ces éléments, comme nous l'avons vu plus tôt dans la console. Tout ce dont vous avez besoin pour l'ouvrir dans le navigateur est d'enregistrer ce fichier avec Command ou Control S. Ensuite, si nous cliquons avec le bouton droit sur ce nom de fichier juste ici, passez à Copier le chemin, puis nous pouvons coller ce fichier à l'intérieur du navigateur. Sinon, si vous le souhaitez, vous pouvez entrer dans le dossier principal juste ici. Vous pouvez ensuite accéder au dossier actuel et double-cliquer sur cette page d'index. Cela s'ouvrira ensuite dans votre navigateur par défaut. Pour pouvoir accéder à ces éléments à l'aide de JavaScript, une des façons dont nous pouvons le faire consiste à ajouter AID. Je vais nous donner une carte d'identité de titre. N'oubliez pas que chaque ID particulier doit être unique à cette page HTML. Assurez-vous que nous n'avons qu'un seul identifiant de titre dans ce fichier HTML. Cela permet à notre JavaScript de sélectionner facilement et facilement à notre JavaScript de les éléments que vous souhaitez. Ensuite, en dessous et juste au-dessus de notre balise de corps de fermeture, nous pouvons insérer nos balises de script. Nous avons également une étiquette d'ouverture et une balise de fermeture. C'est l'endroit où nous pouvons placer notre code JavaScript. Juste au-dessus du corps se trouve un emplacement où nous pouvons ajouter JavaScript et est également au-dessus des emplacements que nous allons voir bientôt. Plus tôt, lorsque nous étions à l'intérieur de la console, n'oubliez pas que nous avons cherché à sélectionner chaque élément particulier avec le symbole dollar zéro. Rappelez-vous également que nous avons dit que c'est unique à la console. Nous avons besoin d'une autre façon de sélectionner nos éléments à l'intérieur de l'éditeur de texte. Eh bien, ici, nous allons faire exactement la même chose que celle que nous avons regardée dans la console. Nous allons d'abord sélectionner le document. Le document est ce document HTML complet lequel nous travaillons actuellement. Il va sélectionner cette option, puis nous devons filtrer ces documents en fonction de l'élément particulier que nous voulons sélectionner. Rappelez-vous que nous avons examiné une méthode appelée get elements by ID. Encore une fois, c'est CamelCase. Chaque mot après le premier commence par une majuscule entre crochets, et les citations transmettent ensuite un identifiant unique que vous souhaitez sélectionner. Dans notre cas, nous allons prendre le titre. Déplacez ça ici. Nous avons envisagé de modifier le contenu interne ou le texte intérieur de cet élément avec .innertext. Il s'agit d'une propriété dans laquelle nous pouvons ajouter une nouvelle chaîne de texte entre les guillemets simples ou doubles. Il suffit de changer cela en JavaScript pour l' instant et d'enregistrer ce fichier. Ensuite, si nous passons au navigateur et que nous le rechargeons, cela a maintenant sélectionné notre en-tête de niveau 1 et modifié le code HTML interne. Fermons simplement la barre latérale pour avoir un peu plus d'espace. Toutes les mêmes propriétés que celles que nous avons examinées dans la vidéo de la console s'appliquent toujours, telles que l'ajout de styles différents. Encore une fois, nous pouvons accéder aux mêmes éléments avec get element by ID, et nous pouvons également modifier les styles de cet élément particulier. Modifions la couleur du texte pour qu'elle soit égale à orange. Rafraîchissez et tout cela s'appliquera. Une autre façon d'ajouter JavaScript consiste à ajouter ce code en ligne. L'ajout de cet élément en ligne signifie que nous l'ajoutons directement à l'intérieur de nos éléments et que nous ajoutons cela à l'intérieur de la balise d'ouverture des éléments. Nous ajouterons ceci comme nous ajouterions du CSS en ligne. Dans une vidéo précédente, nous avons examiné très brièvement les événements, où nous avons regardé l'événement sur la souris. Examinons ici l'événement on-click, qui sera déclenché lorsque l'utilisateur clique sur cet élément particulier. Tout ce que nous allons faire à l'intérieur de ce gestionnaire d' événements sur clic , c'est de déclencher une alerte. Une alerte est une fenêtre contextuelle dans le navigateur. Ajoutons simplement cela avec le texte cliqué. Enregistrez-le et actualisez le navigateur. Déplacez la souris sur les éléments et cliquez sur. Je vais maintenant voir une alerte de page. C'est probablement quelque chose que vous avez vu en naviguant sur le Web par le passé. Tout ce que nous devons faire pour supprimer cela, c'est de cliquer sur le bouton OK et celui-ci sera alors fermé. Enlevons simplement ça. Sachez également qu'il est généralement découragé de garder notre JavaScript en ligne comme cela, car il mélange notre code HTML et notre JavaScript et rend les choses moins lisibles et organisées. Si possible, gardez tout cela séparé, comme nous l'avons fait ici, et nous examinerons également comment l'ajouter dans un fichier séparé en un instant. Il est contenu dans une balise de script et nous pouvons ajouter autant de balises de script que vous le souhaitez. Il peut également être situé n'importe où sur cette page, y compris à l'intérieur de la section de tête. Cela fonctionne exactement de la même manière si nous saisissons toute cette section de script, puis Commande ou Control X pour couper cela à sa place. Placez-le à l'intérieur de la section de tête avec la commande ou le contrôle V pour le coller dans le navigateur. À l'intérieur, nous pouvons voir que le titre de la page d'origine est rétabli. Depuis que nous avons déplacé la balise de script vers la section principale, aucun de ces JavaScript ne semble s'appliquer. Jetons donc un coup d'œil à l'intérieur de la console et voyons si nous pouvons détecter des erreurs. Cliquez avec le bouton droit de la souris et inspectez Cliquez sur l'onglet Console en haut. Nous voyons que nous ne pouvons pas définir la propriété innertext de null. Lorsque nous obtenons une erreur, c'est souvent une bonne idée de se diriger vers la console et cela nous donne souvent un pointeur sur le problème. Le problème actuel est dû au fait que la page HTML est chargée de haut en bas. Le script à l'intérieur de la section de tête est donc chargé avant même de savoir que cet élément de titre existe, qui provoque alors une erreur. Si nous devons ajouter un script à l'intérieur de la section principale comme celui-ci, cela peut souvent causer des problèmes si nous devons accéder à l'un de nos éléments DOM. C'est pourquoi nous voyons souvent JavaScript à la fin de la section du corps. Il permet de charger rapidement les éléments et n'empêche pas le chargement du code HTML sur la page. Vous verrez cependant certaines bibliothèques JavaScript tierces qui ont besoin de charger le script dans la section de tête pour que la bibliothèque fonctionne correctement. De plus, ces bibliothèques tierces, ainsi que notre propre code, sont généralement séparées dans leur propre fichier de script. fait de déplacer tout ce JavaScript dans son propre fichier rendra ces documents HTML beaucoup plus lisibles et faciles à gérer. Pour ce faire, ouvrez d'abord la barre latérale puis à l'intérieur du dossier où ajouter JavaScript, cliquez sur l'icône du nouveau fichier, puis nous pourrons donner le nom de notre choix. Je vais passer au scénario 1. Ensuite, il doit avoir l'extension dot js. Appuyez sur Entrée. De retour sur notre page d'index, nous pouvons copier le contenu entre les balises de script. Prenez ces deux lignes de code, mettez-les en place. Collez-les dans notre nouveau fichier de script. Ce fichier de script n'a pas besoin des balises de script environnantes car nous savons déjà qu'il s'agit d'un fichier JavaScript de l'extension dot js. Mais ce que nous devons faire, c'est relier ces deux fichiers ensemble. À l'heure actuelle, il s'agit de deux fichiers distincts indépendants l'un de l'autre. Dans le fichier d'index, nous devons pointer vers ce nouveau fichier de script. Nous pouvons le faire à l'intérieur des balises de script plutôt que d'avoir le code situé à l'intérieur comme nous l'avons fait auparavant. Ce que nous pouvons faire, c'est d'ajouter les attributs source. L'attribut source correspond essentiellement l'emplacement de ce fichier par rapport à l'endroit où nous nous trouvons actuellement. Cela fonctionne exactement de la même manière que l'ajout d'une feuille de style. Puisque ce fichier est à côté de l'autre, nous pouvons le pointer avec la source du script 1 point js. Si cela se trouve à l'intérieur d' un dossier JavaScript, par exemple, nous devons aller dans le dossier JavaScript, puis transférer une barre oblique dans notre script. Nous n'avons pas cela, donc c'est simplement un script one dot js. Assurez-vous que nos deux fichiers sont enregistrés, puis sur le navigateur, actualisez. nous constatons le même problème dans le navigateur. Nous ne pouvons pas définir la propriété innertext de null. Cela est logique car nous continuons de charger la balise de script à l'intérieur de la section de tête. Nous essayons d'appliquer cela à un élément avant même qu'il ne soit chargé. Nous pourrions écrire du code personnalisé pour attendre le chargement du code HTML en premier ou nous pouvons regarder des techniques plus modernes dans la vidéo à venir. 6. Async et Defer: À l'intérieur de nos fichiers de démarrage, nous allons fermer ce fichier à partir de la dernière vidéo pour qu'il n'y ait pas de confusion. Ensuite, allez à la leçon 2, qui est asynchrone et reportez-vous. Double-cliquez sur la page d'index pour l'ouvrir. Puisque nous sommes maintenant dans un nouveau fichier, nous devons le copier ou copier le chemin , puis le coller à l'intérieur du navigateur. Nous voyons tout de suite que nous avons toujours la même erreur que la vidéo précédente. C'est parce que c'est à peu près le même fichier ou le même code de fin que celui que nous avions dans la dernière vidéo. Nous avons notre script, puis nous avons également notre en-tête de niveau 1 et le même contenu dans le fichier de script. Vous devrez le faire pour chaque vidéo que nous allons voir. Nous devons ouvrir la page d'index et assurer qu'il s'agit du bon titre de la page. Dans la dernière vidéo, nous avons découvert un problème lors du chargement trop tôt de nos fichiers JavaScript. Cela peut causer deux problèmes. abord, il se peut que nous ayons besoin d'accéder à l'élément HTML avant même d'être créé, comme nous le voyons ici, et deuxièmement, peut que nous ayons beaucoup de se peut que nous ayons beaucoup de code JavaScript dans ce fichier. Cela pourrait vraiment ralentir le chargement du reste de notre page. Si le script 1 était un fichier vraiment énorme, l'utilisateur ne verrait aucun code HTML chargé sur la page tant que ce script n'aurait pas terminé son exécution. Nous allons maintenant examiner deux façons que nous pouvons utiliser pour réparer tout cet async et différer. L'asynchrone et le report sont tous deux des attributs que nous pouvons ajouter à l'intérieur des éléments de script. abord, jetons un coup d'œil à l'asynchrone et fermons la barre latérale pour un peu plus d'espace. Assurez-vous que ce fichier est enregistré et actualisez le navigateur. suite, nous voyons que l'erreur a disparu. Le JavaScript a été appliqué à notre élément et nous ne voyons aucune erreur à l'intérieur de la console. Essayons de différer. Placez ceci et actualisez le navigateur et nous avons exactement le même résultat. Tout fonctionne parfaitement bien. Avec ces deux fonctions, quelle est la différence exactement ? Eh bien, nous avons d'abord asynchrone, et asynchrone est l'abréviation d'asynchrone. C'est un terme auquel nous reviendrons plus tard. Mais pour ce cas d'utilisation particulier, async va télécharger ce script même temps que le reste de notre contenu HTML. Mais pour comprendre ce que fait réellement asynchrone, nous devons regarder un peu plus loin. Imaginez maintenant, plutôt que d'avoir notre script dans notre page d'index à l'intérieur de l' éditeur de texte comme nous le faisons ici, imaginez qu'il s'agissait d'un site Web en direct. S'il s'agissait d'un site Web en direct, nos scripts et notre page d'index seront stockés sur un serveur Web. Lorsque l'utilisateur visite notre page pour la première fois, le contenu de ces fichiers devra être téléchargé. Lorsque nous marquons ce script comme un script asynchrone, ce code JavaScript sera téléchargé même temps que notre contenu HTML. Cela signifie que plutôt que de bloquer notre code HTML, le code HTML est toujours téléchargé puis rendu dans le navigateur, ce qui ne devrait pas entraîner de ralentissement important de notre contenu. Ensuite, il exécutera le contenu de notre script dès que le téléchargement est terminé. Cela présente ses avantages. C'est vraiment utile car cela ne bloque pas le chargement de notre contenu, mais il y a un inconvénient. Vous voyez cela, je vais créer un lien vers trois scripts distincts. Copions-le et collons encore deux fois. Il peut s'agir du script 2 et du script 3, et bien sûr, nous devons créer deux nouveaux fichiers dans notre dossier Asynchroniser et différer. Le deuxième, scripts2.js. Également le script 3 dans notre script 1. Pour plus de clarté, nous pouvons modifier ce fichier en numéro 1, puis enregistrer ce fichier et copier cette ligne de code dans notre script 2. Collez ceci à l'intérieur ici et nous pouvons changer cela en numéro 2. Enregistrez-le sur la même chose pour le numéro 3. Maintenant, avec nos trois scripts liés ici, en théorie, que devrions-nous nous attendre à ce qu'il se passe ? Eh bien, nous nous attendrions probablement à ce que ce soit le numéro 3 à l'intérieur d'ici, car nous avons chargé le script numéro 1, qui changera le contenu en numéro 1. Ensuite, le script 2 que nous changerons par le numéro 2, puis le numéro 3 remplacera cela pour être numéro 3. Eh bien, voyons ça. Nous pouvons enregistrer ce fichier et aussi le navigateur, actualiser. Nous voyons le numéro 3 comme prévu. Essayons de nous rafraîchir encore quelques fois. Si nous continuons à nous rafraîchir plusieurs fois, nous verrons éventuellement un autre numéro. Nous finissons par voir cette valeur de 2 car nous demandons ces trois scripts dans l'ordre. Mais même si nous demandons ces trois scripts dans l'ordre, cela ne signifie pas que vous reviendrez toujours du serveur dans cet ordre particulier. Mais vous pensez peut-être, pourquoi devrais-je m'en préoccuper ? De la même manière que script1.js s'appuyait sur le contenu du HTML pour être présent, un script peut parfois s'appuyer sur un autre script. Par exemple, notre troisième fichier JavaScript peut s'appuyer sur un code des deux premiers fichiers à être disponibles en premier, et s'il est téléchargé avant les deux précédents, cela provoquera une erreur. Certaines bibliothèques JavaScript de frameworks auront également plusieurs scripts que nous devons télécharger, et ceux-ci devront être téléchargés dans l'ordre. Par exemple, dans les versions antérieures du framework Bootstrap, nous avions toujours l'habitude de toujours compter sur le framework jQuery. Pour le premier script, nous devrions télécharger la bibliothèque jQuery. Ensuite, ce n'est qu'une fois le chargement terminé que nous téléchargions la bibliothèque Bootstrap, qui utilisait ensuite les fonctionnalités jQuery. Lorsque nous avons besoin que nos fichiers de script s' exécutent dans un ordre particulier, asynchrone n'est peut-être pas toujours la meilleure option à utiliser. Par contre, différer exécutera les scripts dans l'ordre dans lequel ils apparaissent et il le fera une fois que tous les scripts de la page et le contenu de la page ont été chargés. Changeons cela pour être différé dans nos trois scripts. Si nous continuons à nous rafraîchir autant de fois que nous le voulons, nous ne devrions jamais voir que la dernière valeur de trois. Si vous débutez en JavaScript, je ne m'attends pas à ce que vous vous en souviez tous, et vous n'en avez peut-être pas besoin si souvent. Mais vous aurez également cette vidéo ainsi le code du projet ici si vous en avez besoin comme référence à l'avenir. Souvenez-vous également plus souvent nous avons également la possibilité de placer ce script juste à la fin de la section du corps, afin qu'il ne bloque pas le chargement du reste du code HTML. Comme récapitulatif avant de passer à autre chose, nous avons les mots-clés asynchrones et différés que vous pouvez ajouter en tant qu'attributs à nos scripts. Lors de l'utilisation de l'asynchrone, les scripts seront téléchargés en même temps que le reste du contenu HTML et le navigateur tentera rendre la page lors du téléchargement. L'un des avantages est qu'il n' empêche pas le rendu du reste du contenu, et dès que le fichier a terminé le téléchargement, il exécutera le script à l'intérieur. Nous devons également nous rappeler que si nous utilisons plusieurs scripts asynchrones, rien ne garantit qu'ils seront exécutés dans l'ordre que nous attendons d'eux. L'asynchrone reste une bonne option si nous avons plusieurs scripts qui ne dépendent pas les uns des autres pour charger dans un ordre particulier. Par contre, différer va charger plusieurs scripts, et nous savons que l'ordre va être préservé. Si nos scripts s' exécutent dès que le contenu de la page tel que le HTML et ces scripts ont terminé le téléchargement, cela signifie que nous devrions préférer utiliser scripts différés lorsque nous avons plusieurs scripts qui devraient être exécutés dans l'ordre. C'est le point clé que l'asynchrone peut être utilisé lorsque plusieurs scripts n' ont pas besoin d'être exécutés dans un ordre particulier. Nous devrions utiliser defer lorsque nous avons besoin ces scripts pour s'exécuter dans un ordre particulier. Encore une fois, vous n'aurez peut-être pas besoin d'utiliser ces deux mots-clés très souvent, mais il est également très important de connaître toutes ces parties de JavaScript au cas où vous les rencontriez à l'avenir. Ensuite, nous allons nous éloigner du chargement de JavaScript et jeter un coup d'œil à la façon dont nous pouvons travailler avec des chaînes. 7. Travailler avec des chaînes: Passons maintenant à la leçon 3 de cette section qui est Working With Strings. Nous devrions savoir quoi faire maintenant. Nous pouvons ouvrir la page Index. Ensuite, si nous ouvrons cela à l'intérieur du navigateur, copiez le chemin d'accès à celui-ci, puis remplacez le chemin actuel dans le navigateur. Jusqu'à présent, lorsque nous avons défini le texte intérieur, et nous allons jeter un coup d'œil à cet exemple ici, qui est exactement comme ceux que nous avons examinés par le passé. Nous sélectionnons ce titre, juste au-dessus, définissez l'InnerText pour qu'il soit égal à autre chose qui n'existait pas à l'origine. Ici, nous avons commencé à travailler avec des chaînes, puis nous l'avons remplacé par autre chose, que nous voyons dans le navigateur. Jusqu'à présent, nous avons ajouté ces éléments entre les guillemets simples et en JavaScript, c'est ce qu'on appelle une chaîne. Une chaîne est essentiellement un texte, il peut s'agir d'un caractère unique comme une lettre comme un A, il peut s'agir d'un seul mot, d'une phrase ou même d'un paragraphe. Nous pouvons également placer cela à l'intérieur des guillemets simples ou doubles , peu importe, les deux fonctionneront parfaitement bien pour un exemple comme celui-ci. Cependant, il y aura un problème si l'un des mots à l'intérieur contient le même caractère, par exemple une guillemets simple ou double. Si nous revenons à des guillemets simples, comme ça, et que nous pouvons changer cela pour qu'il soit peut-être, allons-y. Il y a également une apostrophe qui est le même symbole que les guillemets environnants Nous pouvons immédiatement voir que l'éditeur de texte a mis en évidence cela et a changé la couleur pour nous faire savoir qu'il y a un problème. Ce qui se passe effectivement ici, c'est que nous faisons correspondre une chaîne des deux premières citations. Nous pouvons voir que c'est la couleur d'origine, puis nous voyons une erreur. Nous pouvons le voir si nous sauvegardons ce fichier et actualisez le navigateur, nous pouvons voir dans la console que nous aurons un identifiant inattendu, car il s'attend à ce que toute notre chaîne soit contenue entre les deux ces citations. Il y a plusieurs façons de faire face à cette situation. Tout d'abord, nous pourrions modifier les citations extérieures pour qu'elles soient opposées et les faire doubler. Ajoutez donc le double à la fin et aussi au début. Maintenant, cette chaîne sera contenue entre les guillemets doubles et l'apostrophe sera complètement valide. Enregistrez et actualisez, et nous verrons maintenant l'apostrophe à l'intérieur la chaîne et nous ne verrons aucune erreur à l'intérieur de la console. Sinon, nous pouvons utiliser ce qu'on appelle l'évasion. Si nous les remettons en guillemets simples, ce qui a causé une erreur, nous pouvons utiliser une barre oblique inverse juste en avant et cela échappera ensuite au caractère que vous souhaitez afficher. Cela indiquera au navigateur de le rendre dans le cadre de la chaîne. Essayons ça. Cela fonctionne exactement de la même manière. échapper comme ça fonctionne également pour d'autres personnages tels que les guillemets doubles. Si nous y échappons ainsi, nous ne devrions pas voir de problème. Disons ceci, et c'est tout à fait très bien. Mais que se passe-t-il si nous voulions réellement afficher cette barre oblique inverse dans le cadre de la chaîne ? Pour cela, nous devons ajouter une double barre oblique inverse pour y échapper. Le premier est rendu dans le texte, mais la seconde barre oblique inverse est utilisée pour échapper à cette double guillemets. Si nous avons beaucoup de texte plutôt que quelques mots comme nous l'avons ici, nous voulons parfois le diviser en plusieurs lignes. Pour en voir un exemple, nous pouvons sortir de notre script et générer exemple de texte à l'intérieur de notre code Visual Studio. Pour ce faire, tapez le mot Lorem, L-O-R-E-M, appuyez sur « Entrée », puis cela nous donnera un exemple de texte à utiliser. Copions tout cela, en fait, nous coupons cela hors de place et nous allons coller cela entre nos citations. Maintenant, si nous sauvegardons cela et récupérons cela dans le navigateur, puisque nous avons beaucoup de texte ici, puisque nous avons beaucoup de texte ici, le navigateur l'enroulera automatiquement sur nouvelles lignes en fonction de la largeur du navigateur. Cependant, en tant que développeur, si nous voulions contrôler exactement quand cela s'est cassé sur une nouvelle ligne comme ce mot juste ici, nous voudrions peut-être que cela commence sur une nouvelle ligne. Pour ce faire, nous pouvons utiliser une barre oblique inverse suivie de la lettre n autant de fois que nous le voulons à l'intérieur d'ici. Trouvons le mot que nous recherchions qui est celui-ci juste ici et nous pouvons utiliser la barre oblique inverse suivie n. Enregistrez-le et actualisez le navigateur. Cela va ensuite diviser cette ligne sur une nouvelle ligne, et vous pouvez l'utiliser à l'intérieur de cette chaîne autant de fois que vous le souhaitez. faut faire attention, c'est que nous ne pouvons pas avoir de chaîne sur plusieurs lignes. Ce que je veux dire par là, c'est plutôt que utiliser cette barre oblique inverse et n, si on devait simplement appuyer sur « Entrée » et placer sur une nouvelle ligne. Nous pouvons le faire autant de fois que nous le souhaiterions , comme cela ici. Nous pouvons voir que l'éditeur de texte nous avertit d'un problème. Pour une chaîne de textes comme celle-ci, nous ne pouvons pas diviser cela sur plusieurs lignes et nous pouvons voir dans le navigateur si nous actualisons cela, nous voyons un jeton non valide ou inattendu. Nous disposons de deux façons différentes d' aborder cette question pour y remédier. L'un des moyens les plus longs de le faire consiste à convertir chacune de nos lignes de texte en sa propre chaîne. Nous pouvons le faire comme ça et vous pouvez voir que c'est un chemin assez long. Ensuite, nous devrions également utiliser le symbole plus entre chaque ligne pour le joindre à la suivante. Pour plus de simplicité, nous allons simplement faire de cela des lignes libres, rafraîchir et tout cela fonctionne comme avant. Ou il existe une façon plus moderne d' utiliser ce qu'on appelle une chaîne de modèle. Cela remplace les citations par des rétro-ticks. Il suffit de l'annuler et de le rétablir à l'erreur d'origine. Ce que nous pouvons faire plutôt que d'avoir des guillemets simples au début et à la fin, nous pourrions les remplacer par ce qu'on appelle un backtick. Le backtick est situé sur votre clavier et c'est un symbole juste ici. Dans mon clavier particulier, il est situé à côté de la touche Maj gauche. Immédiatement, l'éditeur de texte supprimera les erreurs et nous pouvons les enregistrer, et tout cela devrait fonctionner parfaitement bien dans le navigateur. Vous pouvez voir que vous préservez également les sauts de ligne, donc juste après Lorem ipsum, nous avons un saut, nous avons ensuite notre deuxième ligne qui est celle-ci juste ici, et ensuite chaque ligne est conservée juste en dessous. Ces littéraux de modèles ont été introduits en JavaScript dans ES6 ou ES2015, et nous permettent d'écrire des chaînes multilignes ainsi que d'autres avantages tels que l'insertion de variables, que nous prendrons un Regardez-le plus tard. Après ce cours, nous examinerons également plus en profondeur les chaînes et découvrirons certaines des propriétés et méthodes disponibles que nous pouvons utiliser. 8. Stocker des données avec des variables: C'est fini pour cette vidéo, se dirige vers le dossier suivant. Nous allons examiner le numéro 4 qui stocke des données avec des variables. Alors ouvrons ce fichier et copions également le chemin d'accès du navigateur, collez-le dans. Nous verrons le titre des variables placées tout en haut. Oups. Dans ce cours, nous avons défini ou modifié des valeurs, telles que la mise à jour de ce titre ici. En JavaScript, dans la plupart des autres langues, nous avons régulièrement besoin de stocker nos données. JavaScript nous fournit trois façons principales de le faire. Commençons par examiner la méthode traditionnelle de stockage des données en JavaScript, qui est la variable. Nous pouvons créer une variable en utilisant le mot-clé var, comme celui-ci, suivi d'un nom pour cette variable. Appelons donc mon nouveau texte. Il s'agit d'un moyen de référencer cette variable à l'avenir. L'ajout d'un nom comme celui-ci s'appelle une déclaration puisque nous déclarons une nouvelle variable. Vous pouvez considérer une variable comme un conteneur de stockage et ce nom que nous lui donnons, c' est un peu comme l'étiquette sur le devant, ce qui nous permet de la trouver facilement à l'avenir. Il est également logique d'être descriptif lorsque vous nommez des variables. Il doit refléter les données qu'il contient. De plus, ce nom ne peut pas contenir d'espaces comme celui-ci. Il doit également commencer par une lettre, un trait de soulignement ou un symbole $. Si nous ajoutons quelque chose qui n'est pas autorisé, comme une barre oblique, un éditeur de texte moderne comme celui-ci reprend cela et nous avertira de cette erreur. Nous pouvons ensuite utiliser ce symbole égal pour ajouter une valeur que vous souhaitez stocker à l'intérieur de cette variable, telle que notre chaîne de texte. Puisqu'il s'agit d'une chaîne, nous l'ajoutons dans les citations, disons un nouveau texte de variable. Ce que nous avons fait ici, c'est que nous avons utilisé cette valeur égale pour attribuer cette valeur à droite pour ce nom de variable sur la gauche. L'ajout d'une valeur à notre variable comme celle-ci est appelé initialisation. Vous n'avez pas besoin de vous souvenir de ces mots-clés, mais je veux simplement vous faire savoir qu'ils existent. Il s'agit donc d'initialiser une variable et avant que nous venions d'avoir la déclaration de variable. Ensuite, pour utiliser ce texte, il suffit de passer le nom de la variable, comme ceci, vous pourriez dire enregistrer et actualiser. Il y a notre nouveau texte que nous avons stocké à l'intérieur de la variable. Et si nous voulions également modifier cette valeur stockée dans cette variable. Nous pouvons facilement le faire aussi. Étant donné que notre variable est déjà créée. Ce que nous devons faire cette fois-ci, c'est d'accéder au nom de la variable sans le mot-clé var. Le programme sait déjà qu'il s'agit d'une variable puisque nous avons déclaré ce qui précède, le mot-clé var n'est donc pas requis. Encore une fois, en utilisant les valeurs égales, nous pouvons mettre à jour cela avec une nouvelle valeur. Disons un texte mis à jour. Enregistrez-le et récupérez-le dans le navigateur. Notre texte mis à jour s'affiche maintenant. L'ordre ici est donc important, car le code est lu de haut en bas. Donc, la première ligne, nous créons notre ligne variable jusqu'à ce que nous la mettions à jour. Ensuite, le titre est remplacé par notre nouveau texte mis à jour. Si nous devions faire quelque chose comme ça et déplacer la mise à jour au-dessus de l'endroit où nous avons déclaré notre variable. Voyons ce qui se passe lorsque nous sauvegardons et actualisons. Nous ne voyons plus la version mise à jour dans le navigateur. C'est souvent la raison pour laquelle nous verrons des déclarations de variables au-dessus du script. Cela ne causera donc aucun problème si nous commençons à le mettre à jour plus tard dans notre fichier. Les variables peuvent également contenir d'autres types de données, pas seulement des chaînes, et nous découvrirons d'autres types de données très bientôt. Mais pour l'instant, il y a deux autres types de variables côté de ce mot-clé var, que nous allons examiner. Ces deux éléments ont été introduits avec ES2015. Le premier d'entre eux est le mot-clé let. En surface, laissez-les travailler comme var. Il peut contenir une valeur et nous pouvons également mettre à jour cette valeur si nécessaire. Donc, si nous changeons var pour être laissé, enregistrez et actualisez. Nous voyons maintenant le texte mis à jour, comme nous l'avons fait avec le mot-clé var. Il existe toujours une différence entre le mot-clé let et var. Tout cela se résume à quelque chose appelé scope. Scope concerne la façon dont nous pouvons accéder à ces variables et vous ajoutez des restrictions quant à la façon dont nous pouvons accéder aux valeurs stockées à l'intérieur. trouverez plus d'informations sur portée plus tard dans le cours, où vous en apprendrez plus en détail. Mais nous devons d' abord en apprendre un peu plus sur JavaScript avant que cela ne devienne vraiment clair. Ensuite, nous avons le mot clé const, qui est court d'une constante. Vous pouvez penser que cela contient une valeur constante qui ne changera pas. Si nous sauvegardons cela et actualisez le navigateur, nous voyons que cela générera une erreur à l'intérieur de la console. Nous voyons le message d'affectation à une variable constante. Nous obtenons ceci parce que tout comme var et let, cela peut également stocker une valeur, mais c'est plutôt une valeur en lecture seule. Le contenu à l'intérieur n'est pas destiné à être mis à jour, ce que nous faisons ici. Donc, si nous supprimions cette ligne comme celle-ci et que nous actualisions le navigateur, cela élimine maintenant l'erreur et nous voyons toujours notre contenu variable. Le message d'erreur de la console auparavant était donc attribué à une variable constante. Juste avant d'essayer de le mettre à jour, nous avons vu que le message était affecté à une variable constante. C'est le mot-clé d'affectation ici, qui est la clé. L'affectation est juste un mot fantaisiste que nous arrivons à une variable sur lui transmet une valeur comme celle-ci. Nous aurons cette époque parce que nous essayons de le réattribuer avec cette valeur juste en dessous et que cette const soit maintenant introduite dans le langage JavaScript est vraiment une bonne chose car cela signifie que nous peuvent stocker nos valeurs, que nous savons que nous n'avons jamais l'intention de changer. Cela peut stopper toute erreur ou tout bogue dans notre code. Si quelqu'un modifie accidentellement une valeur plus tard dans le code. Mais il y a quelque chose qui peut être déroutant pour les débutants et entoure la création d'un objet appelé objet à l'aide de const. Si nous supprimons ces deux lignes de code, nous pouvons créer une nouvelle constante appelée Personne. Nous aurons plus de détails sur les objets très prochainement. Mais pour l'instant, vous pouvez considérer un objet comme un ensemble de données. Ainsi, une personne peut posséder plusieurs éléments de données tels qu'un âge, un nom, une taille. Ils peuvent tous être rangés à l'intérieur de ces accolades bouclées. Tous ces éléments de données sont stockés dans plusieurs propriétés appelées paires de valeurs clés. La clé est donc le nom des données, par exemple le nom d'une personne. La valeur est le nom réel. Séparés par une virgule, nous pouvons ajouter une deuxième clé appelée « J'aime », puis la valeur d'un aliment préféré. Nous pouvons continuer à utiliser autant de valeurs à l'intérieur que nous le souhaiterions. Nous pouvons ensuite accéder à l'une de ces propriétés en accédant d'abord nom de la constante, puis en utilisant le point pour sélectionner l'une de nos propriétés telles que le nom ou les J'aime. Essayons ceci, rafraîchissons, nous voyons le nom de Chris et ensuite la personne sur les goûts est un moyen d'accéder à la deuxième propriété de pizza. Donc, bien que cet objet soit une constante, il n'est pas strictement immuable, ce qui signifie qu'il ne changera jamais. Nous pouvons réellement mettre à jour la propriété comme ceci. Nous pouvons accéder à la personne constante et accéder à la clé appelée « J'aime ». Je l'ai réglé sur n'importe quoi comme les bananes. Sauvegardons cela et nous avons toujours la personne à point aime se rendre sur le navigateur, rafraîchir. Nous pouvons maintenant voir que nous avons mis à jour nos constantes avec une valeur de bananes. Nous pourrions également ajouter des propriétés supplémentaires. Donc, une fois qui n'existe pas déjà, on peut dire que la personne poit les cheveux et la définir sur une couleur, puis l'afficher dans le navigateur. Nous pouvons donc voir ici que nous pouvons mettre à jour les propriétés à l'intérieur d'un objet. Mais qu'en est-il si nous essayions de changer complètement la personne pour qu'elle soit un type de données différent, comme une chaîne de caractères. Changeons simplement cela pour devenir un nom comme Chris. Rafraîchissez ça. Nous voyons maintenant le même message d'erreur que celui que nous avions auparavant, qui est l'affectation à une constante. Ainsi, comme vous pouvez le constater, une constante tenant un objet comme celui-ci peut encore avoir ses valeurs mutées à l'intérieur. Nous ne pouvons tout simplement pas réattribuer sa valeur d'origine à un nombre ou à une chaîne. Pour cette raison, il est souvent conseillé d'éviter la confusion en n' utilisant const que pour des valeurs simples telles qu'une chaîne ou un nombre. Nous savons donc avec certitude que cette valeur ne changera jamais. Donc, pour résumer tout ce que nous avons appris dans cette vidéo, nous avons trois mots clés différents appelés var, let et const, qui nous permettent tous de déclarer une nouvelle variable qui ressemble une conteneur de stockage pour nos données. Lorsque vous utilisez les mots-clés var et let, nous pouvons éventuellement attribuer une valeur à ces noms. Les valeurs à l'intérieur peuvent également être mises à jour ou réaffectées avec une nouvelle valeur. Il y a également quelques considérations de portée et d'hébergement que nous aborderons plus tard dans le cours lorsque nous aurons un peu plus de compréhension. Lorsque vous utilisez le mot-clé const, cela créera également une nouvelle variable ou un nouveau conteneur de stockage, mais la valeur ne peut pas être réaffectée. En tant que débutant, cela peut également être déroutant lorsque vous utilisez const et un objet, car les propriétés de l'objet peuvent être mises à jour, ou nous pouvons également en ajouter de nouvelles. Nous avons également mentionné quelques mots-clés dans cette vidéo. Vous n'êtes pas obligé de vous souvenir de tous ces éléments pour le moment. Tout d'abord, nous avons eu une déclaration. C'est à ce moment que nous créons ou déclarons une nouvelle variable sans lui transmettre de valeur. Par exemple, on pourrait dire nom var. Nous initialisons ensuite cette variable lorsque nous lui transmettons une valeur telle que Chris. Affectations. C'est à ce moment que nous passons ou attribuons une valeur à une variable, comme dans cet exemple en bas, où nous affectons la valeur 37 à la variable d'âge. Ces variables vont donc être quelque chose que nous utilisons beaucoup. Vous aurez donc beaucoup de pratique avec ces cours. Ensuite, nous allons nous en tenir aux variables et examiner comment les mélanger avec des chaînes. 9. Mélanger des chaînes avec des variables: Nous comprenons maintenant ce qu'est une chaîne en JavaScript et nous savons également comment les stocker dans des conteneurs appelés variables. Mais que se passe-t-il si nous voulions combiner ces deux éléments ajoutant une variable dans une chaîne ? Cela est tout à fait possible en utilisant JavaScript et il existe différentes façons de le faire. Passons maintenant à nos fichiers, qui est numéro 5, mélangeant des chaînes avec des variables. Je vais ouvrir ça dans le navigateur. À l'intérieur de cette page d'index, nous avons notre niveau 1 en haut avec l'ID du titre. Nous avons ensuite deux constantes ci-dessous, nous avons ce nom et aussi une constante de likes. Enfin, nous sélectionnons notre titre et mettons à jour le texte intérieur. Et si nous voulions mettre à jour ce titre et mélanger ces deux variables ? Pour ce faire, nous voudrions peut-être que la chaîne de texte indique mon nom. Ensuite, supposons que nous voulions également insérer cette variable de nom. Si nous l'enregistrons et l' actualisons, nous voyons que mon nom est nom, nous voyons donc le texte du nom plutôt que le contenu interne de cette variable. Cela se produit parce que tout cela se trouve dans les citations, tout cela est considéré comme faisant partie de la même chaîne de texte, non pas comme une variable. Nous devons sortir de cette chaîne et ajouter ou ajouter le nom de la variable à la chaîne. Nous le faisons comme nous l'avons vu dans une vidéo précédente avec le symbole plus. Ce que nous devons faire est de supprimer le nom de la variable de la fin, d'utiliser le symbole plus, puis en dehors de la chaîne, nous pouvons ajouter ce nom de variable. Nous pourrions également laisser un espace à la fin de la chaîne, donc nous avons un espace entre la chaîne et la variable, puis passer au navigateur et actualiser. Nous pouvons voir que notre nom est maintenant mis à jour avec la valeur de la variable. Nous pouvons également ajouter la deuxième variable à cette chaîne , comme nous l'avons fait ici. Mais ensuite, utilisez le symbole plus, ouvrez la chaîne dans un espace, et nous dirons et j'aime bien, j'ai ensuite un espace à la toute fin, puis le symbole plus pour ajouter la variable des likes. Jetons un coup d'œil à ça. Je m'appelle Chris et j'aime la pizza. Tout fonctionne parfaitement bien, nos variables sont mélangées dans une chaîne. Il existe également un autre moyen de le faire, qui a été introduit dans ES 2015. Il s'agit d'utiliser les chaînes de modèle. Les chaînes de modèles sont comme celles que nous avons utilisées dans une vidéo précédente lorsque nous avons combiné le texte sur plusieurs lignes. Ce que je dois faire, c'est remplacer ces citations par les backticks. Supprimons toutes ces citations et nous pouvons également supprimer les symboles plus, ne laissant que le texte à l'intérieur. Ensuite, ce que nous devons faire, c'est de placer tout cela à l'intérieur des backticks. La deuxième étape consiste à marquer quelle partie de la chaîne est variable. Nous savons plus tôt que si nous sauvegardons cela et actualiserons, nous ne voyons pas le contenu de ces deux variables, mais ce que nous devons faire est de placer devant cela un symbole $ , puis le nom de la variable à l'intérieur du bouclé. accolades, la même chose pour nos goûts, symbole $, et enveloppez-le à l'intérieur des accolades bouclées. Cela doit maintenant être lu comme le contenu de nos deux variables. Ces chaînes de modèle entre les guillemets peuvent également être stockées dans leur propre variable. Si nous devions couper cela à sa place, créer une nouvelle variable, disons que la chaîne est égale à cette valeur que nous venons de couper. Nous pourrions ensuite transmettre le nom de variable de la chaîne. Tout cela fonctionne comme avant, mais cette fois, tout combiné en une seule variable de chaîne. 10. Types de données : numéros: Dans n'importe quel langage de programmation, nous avons ce qu'on appelle des types de données. Les types de données, tels qu'ils semblent, font référence au type de données que nous traitons. Jusqu'à présent, nous nous sommes principalement concentrés sur le type de données de chaîne. Mais il y en a aussi d'autres, JavaScript est un langage lâchement typé ou dynamique, qui signifie essentiellement que nos variables ce qui signifie essentiellement que nos variables ne se soucient pas du type de données qu'elles contiennent, elles peuvent contenir une chaîne ou comme nous le ferons regardez au cours de cette vidéo, quelque chose d'autre, comme un nombre, et nous pouvons également modifier le type de données d'une variable lorsque nous réaffectons une nouvelle valeur. Ce n'est pas le cas d'autres langages de programmation tels que Java, où nous devons spécifier le type de données que notre variable contiendra en premier. Dans cette leçon actuelle, nous avons les types de données, les nombres, la vidéo, qui est le numéro 6. Assurez-vous également de l'ouvrir dans le navigateur. Lorsque vous traitez avec un langage tel que Java, il se peut que nous devions déclarer une variable comme celle-ci. Nous pouvons donner à notre variable un nom appelé nombre et le définir à une chaîne de cinq. Lorsque nous écrivons du code comme celui-ci, c'est du code Java, c'est ce qu'on appelle un langage fortement typé, car ce type de données doit être déclaré à l'avance. Cependant, bien que nous utilisons en JavaScript, ce qui ne se soucie pas du type de données que cette variable contient. Contrairement à Java, nous ne déclarons quel type de données nous allons contenir, nous disons simplement quel type de variable il s'agira. Nous disons que le nombre est égal à 5, et il s'agit bien sûr d'une chaîne car elle est entourée des citations. Mais qu'en est-il si nous devions faire cela ? Disons que sur la ligne suivante, nous réattribuons ensuite cette valeur de nombre pour qu'elle soit égale à un nombre réel tel que cinq. C'est ainsi que nous définissons un nombre en JavaScript. Nous n'abordons aucune des citations. Maintenant, nous pouvons utiliser ce numéro à l'intérieur d'ici. Nous pouvons maintenant placer le numéro à l'écran. Disons cela et voyons ce qui se passe. Rafraîchissez, et maintenant la valeur est cinq. Cette variable numérique a changé même si nous l'utilisons dans un type de données complètement différent. Ce type de données peut être un nombre entier comme celui-ci, et nous pouvons l'écrire avec ou sans décimales. Nous pouvons produire cela. Si vous venez d'un langage de programmation différent où il peut y avoir plusieurs types de nombres tels que double float ou entier, ce n'est pas le cas ici. Les numéros JavaScript sont toujours stockés sous forme format à virgule flottante double précision. Si vous souhaitez en savoir plus sur les détails techniques sous-jacents, vous pouvez trouver le lien ici sur la page. Lorsque vous travaillez avec des nombres, JavaScript peut également calculer la valeur et la stocker dans une variable. Par exemple, si nous devions attribuer à ce nombre la valeur 5 plus 10, vous devez maintenant afficher la valeur 15. Nous procéderons d'abord au calcul , puis nous l'affecterons à la variable. Mais que pensez-vous qu'il se passera si nous devions ajouter un nombre et une chaîne ? Eh bien, nous allons le découvrir. Nous dirons que le nombre 1 est égal à une chaîne, puis laissez le numéro 2, cela peut attribuer la valeur de 15. Maintenant, au lieu de sortir la valeur de nombre, nous allons afficher la valeur de Numéro 1, l' ajouter à la variable Number 2, sur le navigateur. Nous voyons nos deux variables, nous avons la chaîne de 5, puis le nombre de 15. S'agit-il d'un nombre ou d'une chaîne ? Eh bien, quand je découvre un nombre et une chaîne, en JavaScript, le résultat est une chaîne. Même si nous avons un numéro ici, il s' agit d'une chaîne complète. Nous pouvons le prouver en utilisant l'opérateur typeof, en les mettant hors de place, et nous utilisons typeof. Ensuite, à l'intérieur des supports, collez-les à l'intérieur. Nous verrons quels types de données sont renvoyées à l'intérieur de ces crochets. Nous pouvons l'utiliser avec n'importe quel autre type de données 2 et cela nous indiquera quel type de données nous traitons. Enregistrez et actualisez et nous voyons qu'il s' agit d'un type de chaîne de données. Cependant, si nous devions simplement sortir le numéro 2, le résultat reste un nombre. Ce type de données est vraiment utile si nous ne savons pas avec quel type de données nous travaillons. Gardez également à l'esprit même si nous avons un nombre stocké à l'intérieur de guillemets comme celui-ci, qui a un numéro 5, il sera également classé comme une chaîne 2. Tout ce qui est entre guillemets est une chaîne, tout nombre qui n'est pas entre guillemets, est classé comme un nombre. Le type de données de chaîne et le nombre sont considérés comme ce qu'on appelle un type primitif JavaScript. primitives sont des types de données qui ne sont pas classés en tant qu'objet. Ils ne disposent pas non plus de méthodes qui sont des actions pouvant être effectuées sur un objet. Mais ne vous inquiétez pas des objets et des méthodes pour l'instant, nous aurons beaucoup plus de détails ce sujet tout au long de ce cours. La principale chose à comprendre pour instant est que les primitives sont les types de données les plus simples en comparaison, incluent des éléments comme la chaîne et les nombres. Tout comme un récapitulatif de ce que nous avons regardé dans cette vidéo, nous avons des types de données qui au type de données avec lequel nous travaillions. Actuellement, nous avons examiné le type de données de chaîne et le nombre. Nous avons également mentionné fortement le type, qui est un type de données que nous devons déclarer à l'avance lors de la création d'une variable. Dans d'autres langages tels que Java, nous devrions déclarer qu'une variable est un certain type de données tel qu' une chaîne ou un nombre lorsque nous la créons. En revanche, JavaScript est tapé de manière lâche, sorte que les variables ne se soucient pas du type de données qu'elles contiennent, et nous pouvons également réaffecter ces données avec un autre type de données. Par exemple, nous pourrions créer une variable qui est une chaîne, puis la modifier ou la réattribuer ultérieurement avec un type de données de nombre. Primitives, c'est ce que nous venons de regarder auparavant, qui est un type de données qui n'est pas classé comme un objet. primitives sont généralement un type de données plus simple, et nous découvrirons l'autre type d' objet dans certaines vidéos ultérieures. Il s'agit d'une introduction de base aux nombres JavaScript, ils constituent un élément essentiel et fondamental de JavaScript. 11. Types de données : booléen, nul et indéfini: Dans la vidéo précédente, nous avons abordé types de dates JavaScript quelque peu primitifs qui incluent le nombre et la chaîne. Nous allons maintenant examiner certains types de données plus primitifs disponibles en JavaScript. Il va s'agir d'une valeur booléenne en valeur nulle et non définie. Assurez-vous de vous rendre dans le dossier des leçons en cours , qui est numéro 7, et aux types de données Boolean, Null et Undefined. Je l'ai déjà ouvert et ouvert aussi dans le navigateur. Lorsque vous jouez avec des codes comme celui-ci, nous avons quelque chose à tester appelé journal de la console. Entre les balises de script, il suffit de taper console.log , puis d'ouvrir les crochets, comme ceci. Nous avons brièvement travaillé sur la console plus tôt et ce journal nous permettra d' afficher une certaine valeur sur la console à l'intérieur du navigateur. Par exemple, nous pouvons dire que c'est 10 de plus que cinq et si nous l'enregistrons , puis cliquez avec le bouton droit de la souris et vérifiez pour ouvrir les outils de développement, cliquez sur l'onglet Console, actualisez. Cela renvoie la valeur true. Le journal de la console affiche n'importe quelle valeur à l'intérieur de cette image de console, d' excellents tests et de recherche rapide du résultat ou de la valeur. Nous avons également un nouvel opérateur qui est le moins que, sauf cela. Ce serait le contraire, ce qui est faux. Ces valeurs vraies et fausses sont le type de dates Boolean. Avec Boolean, un vrai et un faux sont les deux seuls résultats, donc c'est vraiment utile pour vérifier des choses comme celle-ci. Par exemple, dans le projet Speedy Chef que vous avez proposé, nous allons avoir une variable appelée GameStarted. Avant le début du jeu, ce booléen sera défini faux, puis lorsque nous commencerons le jeu, nous avons réaffecté cette variable pour qu'elle soit vraie. Cela nous permet, à n'importe quel moment du jeu, de vérifier si le jeu est démarré et certaines fonctionnalités sont disponibles. Par exemple, nous aurions quelque chose comme ça, nous pourrions configurer une variable. Je vais nous donner des noms tels que GameStarted, c'est égal, initiez à être faux, puis à l'intérieur de notre journal de console, tout d' abord, nous pouvons vérifier le type de données de cette variable en utilisant le type de propriété. Rafraîchissez et nous verrons Boolean juste à l'intérieur d'ici. Comment pouvons-nous utiliser cela dans une situation réelle ? Eh bien, les valeurs booléennes sont souvent utilisées avec une instruction if. Une instruction if ressemble à ceci, nous aurons le mot-clé if, ouvrirons les crochets comme ceci, puis ouvrirons quelques accolades. Maintenant, vous verrez ce modèle beaucoup suivi à l'intérieur de JavaScript. Nous avons certains mots-clés, nous avons quelques crochets arrondis, puis nous aurons accolades où nous voulons exécuter notre code, donc vous verrez cela beaucoup fur et à mesure que nous progressons dans le cours. Mais en particulier pour cela, si déclarations que nous allons faire, nous allons vérifier si quelque chose est vrai ou faux. Dans notre cas, nous voulons vérifier si GameStarted est égal à vrai ou faux. Ce que nous faisons, nous transmettons cela à l'intérieur d'ici et si cela se traduit par vrai, le code à l'intérieur d'ici sera alors exécuté. Dans mon cas, je vais juste mettre un simple journal de console avec le texte de GameStarted. Maintenant, si nous sauvegardons cela, puis actualisez le navigateur, nous ne voyons rien à l'intérieur la console car ce n'est pas vrai. Cependant, retournons cela pour être vrai, actualiserons et notre journal de console est maintenant exécuté. Bien sûr, nous allons bientôt couvrir les instructions if plus en détail mais c'est ainsi qu'elles peuvent fonctionner avec une simple valeur booléenne. Mais si nous avons aussi une deuxième variable, bien, PlayerName. Dites laisser PlayerName est égal à Chris, puis nous changeons notre instruction if pour vérifier le nom de ce joueur. Nous avons un jeu PlayerName, nous allons nous connecter à la console. Le message de nom d'utilisateur est défini. Reprenons simplement du recul et réfléchissons à ce que nous faisons ici. Nous nous enregistrons. Tout d'abord, dernière fois, nous vérifierons si le GameStarted est égal à vrai. Il s'agissait d'une simple valeur booléenne, mais pour ce PlayerName, elle est égale à une chaîne. Pensez-vous que cela se traduira par vrai ou faux ? Eh bien, sauvegardons cela et vérifions cela dans le navigateur et nous voyons que cela fonctionne à l'intérieur de la console. Eh bien, la raison pour laquelle nous voyons cela à l'intérieur de la console est que généralement une instruction if ou un booléen aura la valeur true si une valeur existe. Ici, nous avons une valeur de Chris, donc cela existe définitivement. Voyons ce qui se passe si nous supprimons ce nom et que nous le laissons sous forme de chaîne vide, enregistrez et actualisez. Maintenant, cela doit être faux. Une chose à noter ici qu' une valeur vide telle que notre chaîne vide, comme celle-ci, ne doit pas être confondue avec ne pas avoir de valeur du tout. Une variable sans valeur est un autre type de données primitif appelé non défini. Si nous n'avons aucune valeur attribuée à cette variable et si nous devions supprimer cette chaîne de la même manière que celle-ci, nous ferons un journal de console pour PlayerName et nous supprimerons également ces instructions if, nous n'avons donc pas pu exécuter ce journal de console la première fois, sauvegarder et passer dans le navigateur, nous voyons cette valeur indéfinie. Comme mentionné précédemment, il s'agit un autre type primitif tel que la chaîne, le nombre et le booléen. Ce non défini s'affiche car nous avons une variable à laquelle aucune valeur ne lui est attribuée. C'était comme avant quand nous avons regardé 0$ dans le navigateur. Si nous saisissons initialement 0$, alors qu'aucun élément n'est sélectionné sur la page, nous récupérons la valeur indéfinie. Le type de données final que nous allons examiner dans cette vidéo est également primitif et c'est la valeur nulle. Null indique également qu'il manque quelque chose. Si nous définissons notre variable de PlayerName sur null, puis que nous actualisons le navigateur, comme prévu, nous récupérons cette valeur null. Nous avons examiné brièvement les objets dans une vidéo précédente, et null est lié à ces objets. Il indique que cet objet est vide et souvent, lorsque vous travaillez avec des bases de données ou des services principaux, un exemple courant en est la demande de données utilisateur. Si l'utilisateur est connecté, nous récupérons un objet contenant toutes les informations de ces utilisateurs. Toutefois, s'ils ne sont pas connectés, nous verrons souvent null car l'objet utilisateur sera vide. Nous avons examiné trois types de données différents dans cette vidéo, nous avons examiné Boolean pour commencer par une simple valeur vraie ou fausse. Ce type de données primitif est vraiment utile et souvent associé à une instruction if. Nous n'avons pas défini, encore une fois un type de données primitif qui indique qu'il manque quelque chose. Dans notre exemple, nous avons examiné une variable à laquelle une valeur nulle lui est attribuée. Enfin, nous avons également découvert null, qui est encore une fois un type de données primitif et plus spécifique qu' indéfini, et il fait référence à un objet qui n'a aucune valeur. Vous pouvez voir en bas que non défini est un résultat plus générique et null est plus spécifique à un objet. 12. Commentaires, points-virgules et ASI: Si vous avez déjà travaillé en JavaScript ou si vous recherchez des exemples de code en ligne, vous remarquerez peut-être que des points-virgules sont parfois utilisés et parfois non. Les programmes JavaScript sont composés de plusieurs instructions qui sont lues de haut en bas du fichier. L'instruction est essentiellement une instruction, telle que la création d'une déclaration variable du code à exécuter à l'intérieur d'une instruction if. Bien que des points-virgules dans les programmes JavaScript soient requis, si nous choisissons de ne pas les écrire manuellement, l'analyseur JavaScript les ajoutera automatiquement dans les photos, là où elles sont nécessaires, les points-virgules sont ajoutés à la fin de chaque instruction, et le processus est appelé insertion automatique de points-virgules. Cela ne signifie pas que nous pouvons simplement oublier de les utiliser complètement. Il y a des cas où nous devons encore les ajouter manuellement. Par exemple, ajoutons des variables et examinons les résultats. Vous remarquerez que je suis dans vidéo numéro 80, qui est des commentaires, points-virgules et de l'ASI, et que cela est également ouvert dans le navigateur. Accédez à la section Script. Ce que nous allons faire, c'est créer deux constantes. Les constantes n'ont pas vraiment d'importance pour le moment. Je vais juste ajouter un nom, puis une seconde constante, que l'on peut apprendre en JavaScript. Il s'agit d'une valeur booléenne de true. Ensuite, dans le journal de la console, nous avons déjà sorti des variables uniques par le passé. Mais nous pouvons également ajouter une virgule et générer la valeur de ces deux variables. Enregistrez le fichier et dirigez-vous vers la console. Rafraîchissez et nous voyons nos deux valeurs variables. Rien d'inattendu ici, nous obtenons probablement ce que nous attendions, c' est-à-dire nos deux variables. Nous allons les connecter à la console. Mais qu'en est-il si nous ajoutions ces variables sur la même ligne ? Essayons ça. Placez-les sur la même ligne et assurez-vous que tous les points-virgules sont supprimés de la fin de chaque instruction. Tout d'abord, nous pouvons constater que l'éditeur de texte a mis en évidence un problème ici dès que vous le faites. Si nous devions enregistrer cela et actualiser le navigateur, une erreur de syntaxe s'affiche à l'intérieur de la console. Nous avons un jeton inattendu de const, car l'analyseur JavaScript ne s'attend pas à ce stade ici, puis à voir une nouvelle déclaration const. Si vous avez plusieurs instructions sur la même ligne comme celle-ci, nous devons déclarer qu'il s'agit deux instructions distinctes, en les séparant par un point-virgule. Placez le point-virgule entre les deux. Maintenant, l'éditeur de texte ne met en évidence aucun problème. Nous pouvons tester cela. Enregistrez et rafraîchissez. Tout cela fonctionne maintenant très bien. Vous pouvez également constater que mon éditeur de texte les a automatiquement placés sur des lignes distinctes, car il s'agit de deux instructions distinctes. Avec le point-virgule, certains autres gotchas sont lorsque nous commençons une nouvelle ligne avec des crochets, ou souvent appelés parenthèses. Prenons un exemple juste après ces deux constantes. Créez une nouvelle variable, appelons le score. On dirait des nombres aléatoires tels que 97,34, une constante de dégâts, et encore une fois, un nombre aléatoire, 10,42. Tout comme une note de côté, je l'ai créé en tant que let. Puisqu'un score peut généralement être mis à jour, nous pouvons générer le résultat du score avec les dégâts enlevés. Maintenant, si nous l'enregistrons et l'actualisons, c'est la valeur correcte à l'intérieur de la console. Nous savons qu'il peut effectuer un calcul à l'intérieur de ces crochets, comme nous l'avons vu dans le journal de la console. Mais qu'en est-il si nous retirions ce journal de console et que nous faisions autre chose avec ce calcul ? Par exemple, au lieu d'obtenir 86,92, que se passe-t-il si nous voulions plutôt arrondir cela pour dire 86 ou 87 ? ce faire, JavaScript a une méthode intégrée que nous pouvons utiliser appelée ToPrecision. Nous pouvons modifier cela à la fin avec le point, minuscule à, et il s'agit de camel, donc la précision commence par un P. Pour l'utiliser dans l' analyse de la valeur de longueur deux pour qu'elle soit longue à deux chiffres. Voyons maintenant l'effet de ce qui se passerait si nous oubliions de mettre des points-virgules. Visual Studio Code les insère automatiquement dans les éléments suivants lorsque cela est nécessaire. Mais si nous devions les laisser de côté comme ça et appuyer sur « Enregistrer », je verrais instantanément ce qui se passerait lorsque le moteur JavaScript lirait ce code. Nous pouvons voir que cette ligne a été insérée directement après l'instruction juste ici, car nous n'avons aucun point-virgule à séparer. Sauvegardons cela et rafraîchissons. Nous voyons une erreur, nous ne pouvons pas accéder aux dommages avant l'initialisation, et c'est parce que cette ligne commence par ces crochets. Maintenant, cela peut ne pas signifier grand-chose si vous êtes complètement nouveau en JavaScript. Mais si vous avez déjà fait un peu de JavaScript par le passé, c'est ainsi que nous déclarons un certain type de fonction. Plutôt que d'interpréter cette section de code et cette section de code comme deux lignes, elle lit en fait de gauche à droite et continue comme une seule ligne de code complète. Pour résoudre ce problème, comme vous pouvez vous y attendre, nous devons les séparer par un point-virgule. Ensuite, si nous actualisons, cela va maintenant se débarrasser de l'erreur, et tout est clair dans la console. Nous pouvons également voir directement les résultats de ce calcul en découpant cette ligne de code. Créez un journal de console et collez-le à l'intérieur. Enregistrez cela et actualisez le navigateur et notre valeur a maintenant été arrondie à deux décimales. Il existe également des fonctions mathématiques que nous examinerons plus tard, qui peuvent arrondir ces valeurs et les arrondir également. Pour résumer, l'utilisation points-virgules en JavaScript est facultative. C'est à vous de décider si vous souhaitez les utiliser ou si vous comptez sur eux pour être insérés automatiquement. Mais sachez qu'il y a des cas où nous commençons une nouvelle ligne de code avec les crochets où nous devons nous assurer de les insérer manuellement, sorte que cela ne provoque aucune erreur. Pour compléter cette vidéo, nous allons jeter un coup d'œil à l'utilisation des commentaires. Les commentaires sont simplement un moyen pour nous de prendre des notes à l'intérieur de notre code, qui ne sera pas lu comme un code JavaScript. Nous pouvons également l'utiliser pour commenter notre code. Cela signifie qu'une ligne de code particulière est toujours présente dans notre programme, mais elle n'est pas lue lors de l'exécution du script. Pour insérer un commentaire ou une note, nous commençons par JavaScript avec les deux barres obliques. Ensuite, nous pourrions taper une note telle que, doit avoir un point-virgule dans les instructions ci-dessus. Si nous l'enregistrons et que nous actualisons le navigateur, nous ne voyons aucune référence au commentaire à l'intérieur d'ici. Mais que se passe-t-il si nous avions un commentaire plus long qui s'étendait sur plusieurs lignes ? Par exemple, si vous aviez un commentaire juste ici et que vous avez dit contrôler la longueur du nombre à l'aide de ToPrecision. Eh bien, comme la plupart du temps, l'éditeur de texte nous donnera un indice sur l'endroit où nous faisons quelque chose de bien ou de mal. Immédiatement ces changements de couleur et nous avons ce soulignement rouge ci-dessous. Nous pouvons voir que ce n'est pas la façon dont on s'attend à ce qu'il soit écrit. Pour cela, nous pouvons même commencer chaque nouvelle ligne de code avec des barres obliques doubles, ou plutôt convertir cela en commentaire multiligne, qui est une barre oblique, puis une étoile. Nous pouvons ensuite supprimer le commentaire de la deuxième ligne puis passer à la fin de notre commentaire ici, et nous pouvons terminer cela par l'opposé qui est une étoile et une barre oblique. Comme mentionné précédemment, nous pouvons également commenter des lignes de code. Si vous souhaitez laisser un code en place pour référence, ou si nous voulons le rétablir plus tard, ou quand il est dû, c'est exactement la même chose. Par exemple, si nous voulions supprimer cette constante de Chris, nous ajoutons simplement les deux barres obliques avant, cette ligne de code deviendra grise et n'est plus disponible à l'intérieur de notre programme. 13. Opérateurs : projet et comparaison: Les opérateurs sont quelque chose que nous utilisons tout le temps en JavaScript. En fait, nous avons déjà utilisé certains d'entre eux pendant ce cours. Vous remarquerez pour cette vidéo que je suis déjà dans le bon fichier, qui est la leçon numéro 9, Opérateurs : affectation et comparaison. Ouvrez-le également à l'intérieur du navigateur. faisant défiler jusqu'à notre section de script, nous avons déjà configuré des variables simples. Vous remarquerez que la chose courante entre ces quatre variables est qu'elles utilisent toutes l'opérateur égal. Il s'agit de l'opérateur d'affectation car nous attribuons la valeur à droite au nom de la variable sur la gauche. Mais il existe également d'autres opérateurs d'affectation, que vous pouvez voir ici à partir de ce commentaire. Nous avons regardé cela comme égal. Passons maintenant à ce symbole plus égal. Supposons que nous voulions ajouter la valeur du numéro 1 et la valeur du numéro 2, puis stocker la valeur nouvellement renvoyée. Eh bien, nous pourrions le faire comme ça. Nous appellerons ça le nouveau numéro. Définissez cette valeur égale à la valeur du numéro 1 plus le numéro 2. Si je fais défiler un peu plus loin, nous avons ce GetElementByID, qui est déjà configuré, qui est juste ce niveau 1 en haut. Ce que nous allons faire ici, c'est que je vais mettre la valeur d'un nouveau numéro. Ajoutez-le ici, donnez-lui un « Enregistrer », et maintenant nous pouvons « Actualiser » le navigateur. Nous voyons cette nouvelle valeur renvoyée de 20, soit les 15 et les cinq ajoutées ensemble. n'y a pas de surprise avec celui-ci. Mais JavaScript nous fournit également des moyens plus courts de le faire, plutôt que d'ajouter le numéro 1 sur les variables numéro 2 ensemble, puis de l'attribuer à une variable. Nous pouvons plutôt le faire comme ça. Nous pouvons supprimer notre commentaire sur cette ligne avec les deux barres obliques. De plus, si vous utilisez Visual Studio Code sur un Mac, vous pouvez utiliser la commande et la barre oblique. Cela va automatiquement changer cette option. Si vous utilisez Windows, il s'agit d'un contrôle avec barre oblique. Cela fera exactement la même chose. Au lieu de cela, une option courte. Si vous souhaitez modifier la variable numéro 1 ou la mettre à jour, nous pouvons utiliser l'opérateur plus égal , puis passer le numéro 2. Ce que cela va faire, il ajoutera ces deux nombres ensemble et attribuera une nouvelle valeur à la variable située à gauche. Ces deux lignes seront toujours accompagnées du même résultat de 20. La différence étant que la première est stockée dans une nouvelle variable, et la dernière est en train de mettre à jour cette variable existante. Nous pouvons vérifier cela en le mettant à jour pour qu'il soit numéro un. « Enregistrer » et « Rafraîchir ». Nous voyons toujours la même valeur de 20. Également en haut de nos variables, nous avons ce prénom et le nom de famille. Si nous voulions afficher le nom complet à l'écran, nous pouvons trouver quelque chose comme celui-ci. Tout d'abord, nous pourrions définir le prénom, puis utiliser commande ou le contrôle C pour copier , puis la commande ou le contrôle V à coller. Nous pouvons ensuite afficher la valeur du nom de famille. « Enregistrer », et sur le navigateur, nous ne voyons que la valeur de notre nom de famille. Cette approche ne fonctionne pas car le nom de famille est dernier code connu et, par conséquent, il remplace le prénom. Au lieu de cela, nous pouvons utiliser l' opérateur plus equals pour ajouter cela à nos éléments plutôt que de remplacer l'opérateur existant. Si nous « sauvegardons » ceci et « Rafraîchir », nous voyons la valeur de nos deux variables. Nous pourrions également ajouter un espace vide entre chacun de ces mots en utilisant certaines des techniques que nous avons utilisées dans le passé, passer une chaîne vide avec un espace. Ensuite, l'opérateur plus de l'ajouter juste avant notre nom de famille. « Enregistrer » ce fichier. Nous avons maintenant un espace entre nos deux noms de variables. Il s'agit d'ajouter des valeurs, puis de réaffecter la nouvelle valeur. Mais nous pouvons également faire le contraire avec la soustraction. Nous pouvons voir que c'est juste ici. Cela fonctionne exactement de la même manière, mais nous utilisons le symbole négatif plutôt que le plus. Nous pouvons l'utiliser avec notre exemple de chiffres ci-dessous en faisant le contraire avec une soustraction. Supprimons cette seconde, GetElementByID. Remplacez le prénom par la valeur du numéro 1. « Enregistrer » et « Rafraîchir », et nous avons maintenant la nouvelle valeur de 10. Pour résumer, ce que nous avons fait ici, c'est que nous avons pris le numéro 1, qui est 15. Nous avons ensuite retiré la valeur de cinq pour nous donner 10, et la nouvelle valeur de 10 a été réaffectée au numéro 1. Nous avons également multiplié exactement la même chose. Nous pouvons changer cela, « Rafraîchir », et nous avons la valeur de 75. Nous pouvons également utiliser divide, qui est la barre oblique. Il s'agit de 15 divisés par 5, ce qui réattribuera le numéro 1 pour qu'il soit égal à 3. Ce qui est intéressant, c'est le dernier que nous pouvons voir ici, qui est le symbole du pourcentage. Ce symbole de pourcentage est le reste des affectations après la division. Ce que cela fait ici, nous avons notre numéro 1 et notre numéro 2, qui est le résultat de 15 divisés par 5. Cinq passe trois fois en 15 et donc il n'y a pas de reste. Si nous devions enregistrer cela, il devrait y avoir une valeur restante de zéro. Mais qu'en est-il si nous changeons l'un de ces chiffres ? Disons quatre. Quatre vont en 15 trois fois avec le reste des trois. Un autre type d'opérateur dont nous disposons est la comparaison. Actuellement, nous savons que lorsque nous définissons variables comme ces liaisons, lorsque nous utilisons une valeur égale, nous attribuons la valeur à droite à la valeur sur la gauche. Ici, le numéro 1 était à l'origine 15, et maintenant si nous définissons ce chiffre égal au numéro 2, il devrait maintenant être la valeur de quatre. Mais parfois, cela peut paraître un peu étrange pour les débutants. Parce que si nous devions lire ceci en tant que débutant, peut dire que nous vérifions si le numéro 1 est égal au numéro 2. Comme nous le savons, ce n'est pas le cas. Cela affectera le numéro 2 comme égal au numéro 1. Mais si nous voulions comparer si ces deux valeurs sont identiques, nous le faisons avec le double égal. Nous allons installer cela à l'intérieur de notre valeur, disons les résultats. Ensuite, affichez ceci dans le navigateur, « Enregistrer » et « Actualiser ». Nous voyons que la valeur est booléenne de false. Nous savons que c'est faux car le chiffre 1 est égal à 15 et le chiffre 2 est égal à 4. Nous pouvons également faire exactement le contraire, qui consiste à ajouter un point d'exclamation à l'intérieur d'ici. Cela permet de vérifier si les valeurs ne sont pas égales. Vous le trouverez souvent avec JavaScript, si nous utilisons le point d'exclamation, cela fera le contraire du cas original. « Enregistrer » ceci, « Rafraîchir ». Bien sûr, le contraire est vrai. Toutefois, il faut veiller à ce que nous comparions deux types de données différents. Par exemple, si les deux étaient cinq, mais que l'un de ces cinq était entouré à l'intérieur des citations pour en transformer une chaîne. Pour cet exemple, peu importe si nous utilisons les guillemets simples ou doubles. Il revient aux égaux. Voyons quel est le résultat dans le navigateur. Si nous « rafraîchissons » cela, nous voyons que c'est une valeur vraie. Même si nous avons une chaîne de cinq et un nombre de cinq, le double égal ne vérifiera que les valeurs et non les types de données. chiffres 1 et 2 sont considérés comme égaux même si l'un est une chaîne et l'autre est un nombre. Cependant, si nous voulions également vérifier la valeur sur le type de données, il existe un moyen de le faire en utilisant le triple égal. Le triple égal signifie une égalité stricte. « Enregistrer » ceci, « Rafraîchir ». Maintenant qu'ils ont des types de données différents, cette valeur renvoie désormais une fausse valeur. Si nous utilisons l'égalité stricte comme celle-ci, nous pouvons toujours utiliser le point d'exclamation comme avant pour renvoyer exactement le contraire. Changez cela par un point d'exclamation. Maintenant, si nous « actualisons » le navigateur, c'est la valeur opposée de true. comparaison comme celle-ci est souvent combinée avec des instructions if, que nous couvrirons à nouveau plus tard. Mais certains autres opérateurs de comparaison incluent les symboles inférieur et supérieur à, qui sont les flèches gauche et droite. Nous les avons brièvement examinés dans une vidéo précédente. Tout ce que nous devons faire, c'est que nous pouvons modifier nos deux valeurs pour qu'elles soient différentes. Vérifions d'abord si le numéro 1 est supérieur au chiffre 2. Nous savons que c'est vrai, nous nous attendons donc à voir cela à l'intérieur du navigateur. Le contraire est le symbole inférieur, qui, bien sûr, renverra la valeur de false. Enfin, la dernière chose que nous voulons regarder dans cette vidéo, c'est que nous pouvons également combiner ces symboles inférieurs et supérieurs à ceux des symboles égaux. Nous pouvons vérifier si le numéro 1 est inférieur ou égal au numéro 2. Celui-ci sera faux. Mais nous ne pouvons pas modifier ces variables pour qu'elles soient identiques. Ils sont tous deux égaux. Cela devrait être une valeur vraie. Nous avons également accès à la version supérieure ou égale à la version. tels opérateurs sont utiles pour des jeux tels que les jeux, où nous pouvons vérifier si la santé d'un joueur est nulle ou inférieure, ce qui mettra fin à la partie. Ensuite, nous allons nous en tenir au sujet des opérateurs, mais cette fois, nous examinerons la logique et l'arithmétique. 14. Opérateurs : logique et arithmétique: Bienvenue de retour. Outre les affectations et les opérateurs de comparaison, il existe également des opérateurs logiques et arithmétiques dont nous pouvons profiter en JavaScript. Comme toujours, nous nous sommes dirigés vers le dossier de cette leçon qui est numéro 10, et nous l'ouvrons également dans le navigateur. Tout comme la vidéo précédente, nous avons quelques commentaires, qui contiennent une liste de tous les opérateurs disponibles. Le premier ensemble est celui des opérateurs arithmétiques. Nous reviendrons sur les logiques juste après. Dans le cas des opérateurs arithmétiques, beaucoup d'entre eux sont simplement du bon sens, comme l'addition et la soustraction. Beaucoup d'entre eux sont également très similaires à la vidéo précédente avec tout simplement pas combiné avec l'opérateur égal. Par exemple, il s'agit d'une question que nous avons examinée précédemment. Ce plus est égal, puis additionnera ces deux nombres, puis réattribuera la nouvelle valeur au numéro 1. Nous savons qu'il s'agit de 15 et de cinq. Ces résultats du numéro 1 seraient alors égaux à 20. Cependant, si nous devions supprimer cela, égal et n'a que le symbole plus seul, comme vous pouvez vous y attendre, cela ajoutera simplement ces deux valeurs ensemble, qui signifie que nous pourrions directement les extraire dans le ou nous pourrions également stocker cela à l'intérieur d' une variable pour l'utiliser n'importe où dans notre code. Juste en dessous [inaudible] de cette ligne de code où nous saisissons le titre de cette page. Ensuite, nous pouvons définir le texte intérieur pour qu'il soit égal à notre résultat. Essayons cela dans le navigateur. Rechargez ça. Nous obtiendrons la valeur de 20 car nous avons ajouté ensemble le numéro 1 et le numéro 2. Cela ne fonctionne pas seulement pour l' ajouter pour obtenir des variables comme celle-ci. Par exemple, effectuons un journal de console. Nous pouvons ajouter des numéros simples comme celui-ci, donc 5 plus 3. Ouvrez la console et voilà notre valeur ici. Nous pouvons également l'utiliser pour ajouter des chaînes ensemble. Ci-dessus, nous avons une constante de prénom et de nom de famille. Nous pouvons utiliser cet opérateur pour ajouter le prénom au nom de famille. Comme nous l'avons déjà vu, nous pouvons également ajouter autant de chaînes que nous le voulons. Cela ajoutera également un espace entre le prénom sur le nom de famille. « Enregistrer » et « Rafraîchir ». Le nom complet est maintenant affiché, il suffit de supprimer ce journal de console et nous allons couper quelques autres opérateurs juste au-dessus. Comme vous pouvez vous y attendre. Nous pouvons remplacer cela par soustraire, cela nous donnera les résultats de 10. Nous avons l'étoile qui est le symbole multiplicateur. Ce chiffre sera maintenant 15 multiplié par 5, qui nous donne les résultats de 75. Nous avons également le reste de l'opérateur, qui est ce symbole de pourcentage juste ici. N'oubliez pas que dans les vidéos précédentes, cela fera une division et produira les numéros restants par la suite. Celle-ci cinq passe trois fois en 15, laissant un joli nombre rond et zéro reste. Mais si nous devions le remplacer par quatre, ce serait 4, 8, 12, puis nous aurions un reste de trois pour en faire 15. Ils sont très similaires aux opérateurs d'affectation que nous avons recherchés précédemment. Parce que, comme vous pouvez le voir ici à la fin, il y a deux autres opérateurs qui sont très différents de la vidéo précédente. Il s'agit de l'incrément et du décrément. Le premier, qui est le double plus c'est un incrément et cela augmentera la valeur initiale de 1 ou le décrément, qui est la double soustraction. Cela diminuera la valeur de 1 à chaque fois. Pour voir cela comme exemple, nous devons modifier cela pour que nous puissions mettre à jour ces résultats et les modifier pour qu'ils soient multipliés afin que le résultat soit 60. Ainsi, 60 est maintenant stocké à l'intérieur de ce résultat. Si nous passons à la ligne suivante, nous sélectionnons ce résultat et ajoutons ensuite le double plus, c' est-à-dire les incréments. Rafraîchir Ce montant est maintenant augmenté pour atteindre 61. Nous pourrions également le refaire en copiant et en collant, et ce serait maintenant 62, donc il augmente de 1 pour chaque tentative. Cet opérateur est utile dans de nombreuses situations. Par exemple, dans l'un de nos projets à venir, nous l'utiliserons plusieurs fois, exemple, chaque fois qu'une nouvelle commande est passée, par exemple, chaque fois qu'une nouvelle commande est passée, nous augmentons le numéro de commande de 1 pour chaque commande. De plus, nous avons la variable pizzas complétée, qui augmentera de 1 à chaque fois le chef achève l'une des pièces. Nous pouvons installer tous ces numéros et les afficher à la fin du jeu. L'inverse est d'utiliser deux symboles de soustraction, ce qui va décrémenter le nombre, ce qui signifie qu'il le diminuera la valeur de 1 à chaque fois. Rappelez-vous que le résultat initial était de 60, puis nous le réduirons de 2. Rafraîchissez, et cela laisse 58 points les plus bas. En dessous, nous avons également les opérateurs logiques, et comme vous pouvez le constater, il n'y en a que trois à l'écran. Ces opérateurs logiques sont souvent combinés avec des instructions if que nous traiterons ultérieurement. Mais ils sont également utiles à eux seuls. Si nous voulions vérifier si plusieurs conditions étaient vraies, nous pourrions utiliser l'opérateur AND logique, qui est cette double esperluette. Par exemple, si nous voulions savoir si le chiffre 1 était égal à 15, et également si le chiffre 2 était égal à 4 avant d'exécuter un code quelconque. Nous pourrions le faire en supprimons cet exemple. Je vais simplement déplacer ça plus bas aussi. Nous allons recréer nos résultats. Nous pouvons maintenant utiliser les opérateurs logiques pour effectuer une vérification. Nous voulons vérifier si notre variable numéro 1 sera égale à 15. Le triple est égal, il s'agit d'un type et d'une valeur égaux. Maintenant, cela va stocker une valeur vraie ou fausse dans le résultat. Comme je l'ai déjà mentionné, et si nous voulions également vérifier si le numéro 2 était égal à 4. Eh bien, la façon dont nous pourrions le faire est qu'avec cet opérateur AND nous pouvons également effectuer une deuxième vérification. Cette fois, nous vérifions si le numéro 2 est égal à 4. Disons cela et rafraîchissons le navigateur. C'est vrai. Ces deux vérifications, celle-ci et celle-ci sont toutes les deux vraies. C'est pourquoi nous obtenons le résultat de vrai. Cela changerait n'importe lequel d'entre eux pour qu'il s' agisse d'une valeur différente telle que le numéro 2. Puisque l'un d'entre eux est maintenant différent, cela se traduirait alors par faux. C'est génial, mais cela repose bien sûr sur ces deux conditions pour être vrai. Mais que se passe-t-il si je voulais savoir si un seul d'entre eux était vrai ? Par exemple, si le chiffre 1 était égal à 15 ou si le chiffre 2 était égal à 4, nous pourrions obtenir une valeur true si l' un de ces éléments est le résultat de vrai. Pour cela, nous avons l'opérateur OR, qui est ces doubles tuyaux. Changeons l'esperluette double pour les tubes doubles. Nous savons maintenant qu'une seule de ces valeurs est vraie. Nous devrions maintenant voir vrai dans le navigateur. en va de même si nous rechangeons cela avant. Nous savons maintenant que ces deux choses vont être égales à vraies. Cela serait également vrai, car rappelez-vous que nous n'avons besoin que d'une ou de plusieurs de ces conditions pour obtenir les résultats du vrai retour. Enfin, nous avons le point d'exclamation, qui est l'opérateur NOT. Cela fait essentiellement le contraire et renverra une valeur vraie en faux ou vice versa. Rappelez-vous qu'actuellement, dans le navigateur, nous voyons la valeur de true. Si vous vouliez vérifier le contraire, il suffit d'ajouter ce point d'exclamation avant le résultat et de le dire, cela nous donnera le résultat opposé, ce qui est faux. Vérifier le contraire comme ça peut sembler un peu étrange, mais il a beaucoup d'utilisations à l'intérieur de JavaScript. Par exemple, dans l'un de nos projets à venir, nous avons une variable appelée jeu démarré. Il s'agit d'un booléen vrai ou faux. Nous pouvons ensuite vérifier si le jeu a démarré ou si le jeu n'a pas commencé en utilisant le point d'exclamation avant d'exécuter un code particulier. Il est également utile pour de nombreuses situations telles que la vérification de l'absence d'utilisateur, et bien d'autres encore. Mais référence à tous ces opérateurs couverts dans cette vidéo ainsi qu'à la précédente. Il y a des diapositives disponibles avec ce cours. Jetez-les si vous avez besoin d'une référence. 15. Introduction aux tableaux et aux types d'objets: Pour cette vidéo, accédez à la leçon numéro 11, qui est l'introduction aux tableaux et aux types d'objets. Ouvrez-le également dans le navigateur. En JavaScript, il existe deux groupes dans lesquels nous pouvons placer nos types. Il s'agit à la fois de type primitif et d'objet. Les types de données précédents que nous avons examinés tels qu'une chaîne, un nombre, booléen définissent la valeur nulle, tous appartiennent à un groupe appelé types primitifs. Il y a aussi un grand int et un symbole, que nous n'avons pas encore couverts. Nous allons maintenant découvrir les types d'objets. Le premier est un tableau. Les valeurs primitives précédentes que nous avons examinées stockent une seule valeur telle qu'une chaîne, texte ou un chiffre. Mais un tableau peut contenir plusieurs valeurs. Si vous pensez à une liste de courses, à une liste de tâches ou généralement à n'importe quelle liste comportant plusieurs valeurs, un tableau est idéal pour ce type de données. Jetons un coup d'œil à notre premier tableau dans le dossier du projet. Dirigez-vous vers la section Script. Nous créons un tableau avec ces crochets. Les tableaux peuvent contenir n'importe quel type de données tel qu'une chaîne, tout comme ceci, séparés par des virgules, nous ajoutons plusieurs valeurs à l'intérieur d'ici. Nous pouvons placer en chiffres. Nous pouvons placer dans des objets que nous allons voir ensuite, ou vous pouvez également imbriquer dans un tableau. Pour ce faire, il suffit de créer un nouveau jeu de crochets comme celui-ci. Ensuite, nous continuons à ajouter nos informations à l'intérieur. Si nous voulions placer deux cordes, nous le ferions exactement comme ça. Ou si nous voulions utiliser un tableau pour une liste, disons, une liste d'ingrédients de pizza, nous le ferions simplement en ajoutant plusieurs chaînes séparées par une virgule. Disons de la pâte, du fromage, de la sauce et aussi du pepperoni. Maintenant, comment accéder à l'une de ces valeurs ? Eh bien, comme nous l'avons fait avec n'importe quelle autre valeur, nous pouvons également stocker cela à l'intérieur d'une variable. Nous dirons que la pizza soit égale à ce nouveau tableau. Ensuite, en bas, nous avons nos documents. Nous sélectionnons un nouveau titre puis soudainement dans un texte égal à cette chaîne. Nous pouvons plutôt remplacer cette chaîne par la valeur de notre tableau de pizzas. Rafraîchissez le navigateur, puis nous verrons une liste de tous nos ingrédients. La lecture des valeurs individuelles de ce tableau de pizzas est également simple. Les valeurs du tableau sont numérotées à partir de la position 0, et c'est ce qu'on appelle la position d'index. Le premier de la pâte est la position d'index 0. Il s'agit de 1, 2 et 3. Nous pouvons l'utiliser à l'intérieur des crochets pour accéder à l'un de ces ingrédients. Position 0, qui est la pâte. Nous pouvons y accéder individuellement ainsi qu'à n'importe quelle autre valeur. Les tableaux ont également quelque chose qui s'appelle une propriété. Au fur et à mesure que nous approfondissons ces types d'objets, vous découvrirez que les types d'objets tels qu'un tableau auront plusieurs propriétés ou méthodes disponibles. Ils nous permettent d'effectuer certaines actions ou d'accéder également à certaines informations. Tout d'abord, jetons un coup d'œil à une propriété appelée length. Plutôt que d'y accéder, prenez simplement la valeur ici. Nous pouvons enchaîner sur la fin de la longueur, rafraîchir. Nous voyons qu'il y a quatre valeurs contenues à l'intérieur d'ici. Nous pourrions le faire quand même, ce que vous vouliez. Par exemple, si nous voulions placer cette variable à l'intérieur d'une chaîne, nous pourrions ouvrir les backticks. Nous disons que cette pizza a utilisé une chaîne de gabarit. On peut passer une variable avec le symbole $, puis les accolades. Passez dans la pizza. Longueur. Puis les ingrédients. Disons que cette pizza contient quatre ingrédients. Va au navigateur, et on y va. baies disposent également de méthodes intégrées que nous pouvons utiliser pour effectuer certaines tâches courantes, telles que le transfert d'un nouvel élément vers ce tableau. Nous pouvons supprimer des valeurs et vérifier si le tableau contient également une certaine valeur. Par exemple, vérifions si notre pizza contient la valeur du pepperoni. Pour ce faire, nous accédons d'abord à notre baie par le nom. Nous utilisons ensuite des points inclus ; à l'intérieur des crochets, nous pouvons transmettre une valeur que vous souhaitez vérifier. Dans notre cas, nous voulons vérifier s'il contient du pepperoni. Cela renvoie ensuite une valeur vraie ou fausse si elle est contenue. Nous pouvons également stocker cela à l'intérieur d'une variable. Appelons ça Haspepperoni. Ensuite, nous pouvons remplacer ce texte intérieur. Supprimons cette chaîne de modèle et la remplacons par notre variable. Accordez-lui un arrêt. Si vous voyez un saut comme nous l'avions fait là, il s'agit simplement de l'éditeur de texte qui enregistre et reformate le document. Assurez-vous qu'il est enregistré et transféré dans le navigateur. Cela est vrai car la valeur du pepperoni est contenue dans ce tableau. Nous pouvons modifier cela pour qu'il s'agisse d'une orthographe incorrecte et il s'agira d'une fausse valeur. Ou si nous avions la bonne orthographe, nous pourrions également utiliser le point d'exclamation juste en face de cela, comme nous l'avons regardé dans la vidéo précédente. Cela renvoie ensuite la valeur opposée, qui est également fausse. Il existe également de nombreuses autres méthodes disponibles. Il y a également une section dédiée à la baie qui sera disponible pour y accéder plus en détail. 16. Introduction aux objets: Un autre type d'objet avec un tableau. Eh bien, c'est un objet réel, les tableaux que nous venons d'examiner contiennent plusieurs valeurs. Je vais référencer une seule valeur à l'intérieur du tableau en accédant au numéro d'index, qui est la position commençant à zéro. Nous avons brièvement examiné des objets plus tôt, et il s'agit également d'un ensemble de valeurs. Toutefois, une valeur d'objet est référencée par une clé. [inaudible] démarre les fichiers et dans l'introduction aux objets. Nous voulons commencer par créer un objet. Disons que l'utilisateur, et disons que cela équivaut à nos accolades bouclées. N'oubliez pas que nous pouvons ajouter une série de propriétés qui constituent une paire clé et valeur. Nous disposons d'une clé et, par exemple, notre utilisateur peut avoir un prénom. Je vais définir cette valeur égale à une chaîne, donc nous avons la clé et nous aurons la valeur et c'est cette clé que nous utilisons pour accéder à une de ces valeurs à l'intérieur d'ici, séparées par des virgules. Ajoutons un peu plus de détails, le deuxième nom. Nous y mettons autant que nous le souhaiterions, comme l'occupation, développeur web. Pour cet exemple, nous allons ajouter une valeur booléenne de connexion, définissez cette valeur sur true. Enfin, nous pouvons également ajouter quelques champs à l'intérieur d'ici, et cela peut également contenir des tableaux imbriqués, tout comme un tableau normal, nous ouvrirons les crochets et nous pouvons ajouter à l'intérieur d'ici autant de valeurs que nous le ferions. J'aime bien. Si nous sauvegardons cela, et vous remarquerez ici que nous avons le titre de niveau 1. Nous accédons à ce titre, je vais définir que c'est égal à notre objet utilisateur, alors remplacez cette chaîne de texte par la variable utilisateur. Enregistrez ce fichier et actualisez-le dans le navigateur. Dès que nous le faisons, nous voyons la valeur de l'objet Object. C'est ce qui se produit lorsque nous essayons d'afficher l'objet complet dans le navigateur plutôt qu'une propriété individuelle. Il convertit tout cet objet en chaîne. Un objet, objet, est la valeur par défaut affichée dans le navigateur. Avec les tableaux, nous utilisons les crochets pour accéder au numéro d'index des valeurs, mais pour les objets, nous utilisons plutôt les crochets pour accéder à chacune de ces clés. Au lieu d'afficher l'utilisateur complet, ouvrez les crochets, puis à l'intérieur, nous accédons au nom de la propriété à l'intérieur de la chaîne, comme ceci. Cela va faire référence au prénom de notre utilisateur, et si nous le sauvegardons et l' actualisons, il est maintenant remplacé par la valeur. Nous pouvons changer cela pour qu'il s' agisse d'autre chose comme l'occupation, et cela fonctionne également parfaitement bien. Une autre façon de le faire pour atteindre exactement la même chose est d'utiliser également la notation par points. C'est ce qu'on appelle la notation entre crochets car nous utilisons les crochets, mais la notation par points permet également d'accéder à l'une de ces propriétés. On peut dire que l'utilisateur point d'abord, cela fonctionne parfaitement bien aussi. Au cours du développement, si nous voulions également accéder à l'objet complet et voir toutes les propriétés disponibles à l'intérieur, nous pouvons utiliser un journal de console, transmettre notre objet utilisateur et plutôt que d'afficher objet objet comme nous l'avons vu dans le navigateur, si nous devions accéder au navigateur et ouvrir les outils de développement à l'intérieur de la console, nous verrons la valeur complète de cet objet. Une fois que nous cliquons sur cette flèche ici, nous pouvons également développer tous les autres types d'objets à l'intérieur, comme ce tableau, et voir tout le contenu imbriqué à l'intérieur. Ces journaux de console peuvent être utiles pour le débogage et généralement pour vérifier quelles valeurs sont contenues pour n'importe quel type de données. En plus de ce journal de console, si nous voulions voir la structure à l'intérieur d'un format de table, nous pouvons le modifier pour qu'il s'agisse d'une table de points console. Maintenant, nous pouvons enregistrer et actualiser, et cela affichera ensuite notre objet manière similaire à une table, ce qui peut être un peu plus facile à comprendre toutes les données que vous avez à l'intérieur d'un objet. Ces journaux de console peuvent être utiles pour le débogage et généralement pour vérifier quelles valeurs sont contenues pour n'importe quel type de données. Si nous avions plusieurs objets, nous pouvons également les placer à l'intérieur des tableaux. Cela sera utile pour stocker de nombreux utilisateurs ou produits. Au lieu d'avoir cet objet ici, nous pourrions le transformer en tableau et cela nous permettrait de stocker plusieurs objets. Notre premier, et comme il s'agit d'un tableau, nous séparons chaque valeur par une virgule, puis chacun de ces objets nous pouvons ajouter autant de propriétés que nous le souhaiterions. En respectant la même chose que nous pourrions ajouter au prénom, puis séparés par une virgule, le nom de famille. Il suffit de copier les détails de celui-ci, placer dans notre deuxième objet. Je vais changer les noms et, bien sûr, nous avons maintenant plusieurs utilisateurs. Nous pourrions également modifier cela pour être des utilisateurs. S'il s'agissait d'une application réelle et que nous devions appeler une base de données pour obtenir une liste de tous nos utilisateurs, nos données peuvent revenir comme ceci, mais maintenant nous aurons plusieurs objets à l'intérieur de ce tableau. Pouvez-vous trouver comment accéder à ces deux prénoms ? Ou n'oubliez pas que puisque les tableaux sont indexés, nous pouvons accéder à chaque objet en la position à l'intérieur du tableau. Le premier est la position d'index 0, et le second est l'index numéro un. Ce que nous devons faire, c'est que nous pouvons supprimer cela. C'est maintenant ce qu'on appelle les utilisateurs. Ouvrez les crochets et nous pouvons accéder à notre premier utilisateur avec la position zéro. Souvenez-vous d'avant quand nous accédions l'objet complet, comme ceci. Il affichera l'objet objet dans le navigateur. Ce que nous devons faire, c'est d'accéder à l'une de ces propriétés individuelles par le nom de la clé. Nous avons les deux clés de la première et de la dernière. Allons pour le premier, sauvegardons ça et rafraîchissons. Cela nous a donné une erreur car l'utilisateur n'est pas défini. Jetons un coup d'œil au problème. J'ai choisi cette console ici. Nous essayons de déconnecter l'utilisateur, mais cela a été modifié en utilisateurs, puis rechargez le navigateur et nous accédons maintenant à notre prénom. Allons chercher le deuxième objet, alors positionnez un. C'est ainsi que nous accédons aux valeurs contenues lorsque plusieurs objets sont stockés dans un tableau. Avec les utilisateurs, il existe également de nombreux autres cas d'utilisation pour ce type de configuration. Par exemple, si vous aviez une boutique de commerce électronique contenant toute la collection de produits et le panier peut également être un tableau vide, chaque fois que l'utilisateur ajoute un nouveau produit, l'objet est ensuite poussé vers cette tableau. Comme vous pouvez le constater, il existe de nombreux cas d'utilisation pour cela et beaucoup d'autres choses à découvrir avec des objets et des tableaux. Nous allons approfondir ces questions dans les prochaines sections. 17. Introduction aux fonctions: Jetons maintenant un coup d'œil aux fonctions JavaScript. Une fonction ressemble à une tâche ou à un ensemble de tâches regroupées. Par exemple, dans notre prochain projet d'arbre rapide, nous aurons de nombreuses fonctions qui remplissent une certaine tâche. Par exemple, générer une nouvelle pizza, nous en aurons une pour créer une nouvelle commande et une autre pour vérifier si l'événement est complet. Ces fonctions peuvent être exécutées immédiatement ou plus souvent lorsque nous les appelons ultérieurement. Tout comme les tableaux et les objets que nous avons examinés dans les deux vidéos précédentes, nous aurons une section des fonctions plus détaillées qui sera disponible dans le cours. Mais pour l'instant, avoir une connaissance fonctionnelle de base nous aidera vraiment à réaliser certaines étapes. Tout comme ces tableaux et objets que nous venons de regarder, une fonction appartient également au même type d'objet Groupe 2. Pour cette leçon, rendez-vous dans le dernier dossier de nos bases JavaScript. Il s'agit du numéro 13, introduction aux fonctions. Ouvrez-nous et aussi dans le navigateur. Ce que nous allons faire, c'est d'abord que nous avons deux tableaux ici que nous pouvons ignorer et nous pouvons aller juste en dessous de ceux-ci. Nous y reviendrons dans un instant. Bien que nous examinerions le fonctionnement d'une fonction et que nous commencions par utiliser le mot-clé fonction. Le mot-clé de fonction est ensuite suivi d'un nom que nous voulons donner à cette fonction. Tout comme une variable ci-dessus, nous attribuons ensuite un nom et, pour cet exemple, passons au nombre aléatoire. Il s'agit d'un nom que nous appelons une fonction chaque fois que nous voulons exécuter le code à l'intérieur. Immédiatement après ce nom, nous passons entre crochets, appelés parenthèses. À l'intérieur de ces crochets, nous pouvons transmettre des informations supplémentaires à la fonction, mais plus à ce sujet dans un instant. La dernière partie de ce type de fonction est les accolades bouclées et c'est le corps de la fonction. Ces accolades à l'intérieur d'ici contiennent tout le code que vous souhaitez exécuter lorsque nous appelons cette fonction par son nom. Ces accolades peuvent également être considérées comme un ensemble de portes contenant tout le code de fonction à l'intérieur. C'est ce qu'on appelle une déclaration de fonction. À l'intérieur, nous pouvons placer dans n'importe quel code que vous souhaitez exécuter. Placons maintenant une simple alerte de navigateur. Enregistrez-le et revenez dans le navigateur. Si nous nous actualisons, cette alerte ne s'affiche à l'intérieur d'ici. En fait, il exécute ce code. Comme nous l'avons mentionné, nous devons appeler la fonction par son nom, suivi de ces crochets juste ici. Juste en dessous, appelez notre numéro aléatoire, ajoutez les crochets ou ces parenthèses. Cela devrait maintenant appeler notre code de fonction , puis afficher l'alerte dans le navigateur. Un autre bon exemple de fonction serait une calculatrice permettant de convertir l'âge d'un chien en âge humain. Recommençons. Nous reviendrons à notre mot clé de fonction d'origine. Cette fois, nous appellerons ce ChienToHuman, ajouterons les crochets ou les parenthèses. Ensuite, le corps de fonction. Juste au-dessus, créez une nouvelle variable, qui sera notre DoGage. Définissons cette valeur sur toutes les valeurs, telles que trois. Nous pouvons ensuite accéder à cette variable à l'intérieur de notre fonction , puis faire une multiplication pour la convertir en années humaines. Pour accéder à cette variable il suffit d'y accéder par , il suffit d'y accéder par son nom. Le DoGage. Ensuite, multipliez cette valeur par 7 pour nous donner les années humaines. Nous pouvons également stocker cela à l'intérieur d'une constante. Allons-y pour HumanEquiv. Pour l'instant, en regardant cette fonction, il suffit de saisir la variable d'âge de notre chien, multipliant cette fonction par 7. Mais nous devons également indiquer à une fonction de renvoyer cette nouvelle valeur. La façon de procéder consiste à utiliser le mot-clé retour. Nous pouvons renvoyer notre variable HumanEquiv, comme auparavant. Nous appelons ensuite cette fonction, qui était le DogToHuman. Si nous sauvegardons cela dans le navigateur, actualisez, nous ne voyons rien de différent à l'intérieur du navigateur. Nous ne voyons rien de différent car dans la première fonction que nous avons examinée, elle contenait une alerte. Il s'agissait d'un signal visuel indiquant que la fonction était en cours d'exécution. Mais celui-ci, nous n'avons pas d'alerte, nous n'avons pas de journal de console, nous n'aurions pas défini un en-tête de niveau 1 avec le texte. Tout ce que nous faisons, c'est restituer une valeur. Pour utiliser réellement cette valeur, si nous le voulions, nous pourrions l'envelopper dans un journal de console et la voir renvoyée à l'intérieur de la console. Ou plus souvent, nous pourrions stocker cela à l'intérieur d'un résultat constant appelé. Ce résultat contiendra ensuite cette valeur de retour, qui est le DoGage multiplié par 7. Si nous le voulions, nous pourrions créer un simple journal de console avec la valeur du résultat. Mais allons encore plus loin et convertissons cela en chaîne. Si nous utilisons les coches arrière, nous pouvons également utiliser cette variable de résultat. Nous dirons que mon chien est vieilli. N'oubliez pas de passer une variable, nous utilisons un symbole $, les accolades. Insérez ensuite le nom de la variable, puis continuez la chaîne pour dire dans les années humaines. Cela devrait dire que mon chien est âgé, et dans notre cas, cela aurait 21 ans en années humaines. Accédez au navigateur et ouvrez la console. Rafraîchissez la page et voilà. Il y a notre nouvelle chaîne avec la variable contenue à l'intérieur. Pour résumer, nous avons créé une fonction. Cette fonction va accéder à notre variable DoGage de trois. Multipliez-le par 7, puis nous le stockons à l'intérieur d'une variable, puis renvoyons ces résultats de la fonction. Nous appelons ensuite cette fonction ci-dessous et stockons cette valeur renvoyée dans nos résultats. Les résultats peuvent ensuite être utilisés n'importe où à l'intérieur de notre code, par exemple ici lorsque nous les insérons à l'intérieur d'une chaîne. Sachez également que ce mot-clé de retour ne doit être utilisé qu'une seule fois à l'intérieur d'une fonction, car il indique que la fonction doit cesser de fonctionner. Il existe cependant quelques exceptions, par exemple lorsque vous utilisez cette option dans une instruction if else, que nous en apprendrons plus tard. Mais le retour est généralement la fin de la fonction et tout code que vous placez après lui sera ignoré. Nous pourrions voir cela si nous ajoutons une alerte. Ensuite, exécutez ceci dans le navigateur, actualisez la page et nous voyons notre journal de console. Mais nous ne voyons aucune alerte sur la page car cela tombe après notre déclaration de retour. Cela met fin efficacement à notre fonction. Enlevons ça. Au début de cette vidéo, nous avons mentionné que ces crochets juste après le nom de la fonction, nous pouvons également transmettre des informations supplémentaires à cette fonction. Dans le crochet, nous définissons un ou plusieurs paramètres que vous pouvez considérer comme des variables. Au lieu de notre DoGage juste au-dessus, nous pouvons faire une virgule. Nous pouvons transmettre une variable ou un paramètre appelé DoGage directement dans notre fonction. Nous pouvons également transmettre plusieurs valeurs séparées par une virgule. Ensuite, nous pourrions y accéder à l'intérieur de notre fonction, comme avant. Mais cette doGage avait une valeur de trois. Comment transmettre réellement cette valeur à ce paramètre ? Eh bien, nous le faisons quand nous appelons une fonction juste ici. Prenons un autre exemple cette fois de cinq ans. Sa valeur réelle que vous transmettez à partir d'une fonction d'appel est appelée argument. Vous n'avez pas besoin de vous en souvenir pour le moment, mais il s'agit d'un argument et il s'agit d'un paramètre. Essayons ça. Enregistrez cette opération au navigateur. Nous voyons maintenant la valeur différente de 35 à l'intérieur de notre journal. Au fur et à mesure que nous avons parcouru cette vidéo, quelques mots clés ont été impliqués. Vous n'avez pas besoin de vous souvenir de tous ces éléments à ce stade. Les gens confondent souvent les paramètres et arguments et les utilisent également de manière interchangeable. Ce n'est pas un problème énorme. Mais pour clarifier, un paramètre est la variable ou l'espace réservé à l'intérieur de notre déclaration de fonction. Nous pouvons ensuite y accéder à l'intérieur de notre corps fonctionnel, qui se trouve à l'intérieur des accolades bouclées. Nous avons ensuite des arguments, qui sont les valeurs réelles que nous transmettons lorsque nous appelons cette fonction, comme notre numéro dans cet exemple. Allons un peu plus loin en utilisant nos deux tableaux tout en haut. Nettoyons cela et déplacons tout ce code de fonction. Nous allons maintenant créer une fonction qui va vérifier la présence d'allergies à l'intérieur de ces recettes. La fonction prendra en compte la recette, comme le pain et les brownies. Ensuite, nous pouvons également introduire un ingrédient particulier auquel une personne est allergique. La fonction va ensuite parcourir toutes ces valeurs et vérifier si elle est contenue dans la recette. Comme avant, créez notre fonction. Donnez-lui un nom de CheckAllergies, des parenthèses, puis des accolades bouclées. Pour que cette fonction fonctionne correctement, elle doit prendre en compte deux choses. Tout d'abord, la recette à vérifier. Nous appellerons cela le périmètre de la recette et le séparerons par une virgule. Il faut également passer un certain ingrédient, vérifier s'il est contenu à l'intérieur. Ouvrez le corps de la fonction. La première étape consiste à accéder à notre recette, soit le pain, soit la gamme de brownies. Puisqu'il s'agit d'un tableau, nous pouvons ensuite utiliser la méthode des inclusions. Nous avons rapidement jeté un coup d'œil à la méthode inclues plus tôt et cela vérifiera si une certaine valeur est contenue à l'intérieur de ce tableau, puis retournera une valeur vraie ou fausse. Nous voulons vérifier si cet ingrédient est contenu, qui est transmis en paramètre. Bien que nous ayons ces variables, nous avons la recette et les ingrédients, c'est exactement la même chose que si nous devions accéder à notre réseau de pain juste au-dessus. Appelez ensuite la méthode inclues, comme ceci. Ensuite, nous pourrions vérifier si la farine est contenue à l'intérieur. Si c'est le cas, ce qui est le cas ici, cela retournerait alors la valeur true. S'il n'a pas été trouvé à l'intérieur du tableau, nous récupérerons la valeur false. Ces deux lignes de code font exactement la même chose. La différence est que nous pouvons transmettre à différentes valeurs à notre fonction. Ensuite, stockez-le à l'intérieur d' une constante appelée HasIngrédients. Ils ne devraient jamais être vrais ou faux, et nous pourrons alors revenir de notre fonction. Pour voir cette valeur de retour, nous pouvons créer un journal de console. Ensuite, à l'intérieur de la fonction de l'appelant, appelée CheckAllergies, ajoutez les crochets ou les parenthèses. Ensuite, nous devons transmettre deux arguments. Tout d'abord, la recette, qui est soit le pain, soit les brownies. Allons chercher du pain. Ensuite, transmettez notre ingrédient que vous voulez vérifier s'il est contenu dans cette recette. Allons chercher de la farine. Nous savons que cela est contenu dans le pain, donc cela devrait renvoyer une valeur de vrai. Enregistrons cela et actualisons le navigateur. Nous voyons maintenant notre valeur à l'intérieur de la console. Essayons une fausse valeur. On va chercher des œufs. C'est faux. Mais nous savons que les œufs sont contenus dans les brownies. Essayons celui-ci et cela devrait être une fois de plus une valeur de vrai. résumer, si tout cela est un peu important en ce moment, nous créons une fonction appelée CheckAllergies, laquelle nous allons vérifier si un ingrédient est contenu dans une recette. Nous accédons ensuite à cette recette, soit le pain, soit les brownies. Nous vérifions si cet ingrédient est inclus. Si c'est le cas, cela renverra une valeur vraie. Si ce n'est pas le cas, il renvoie false, qui s'affichera ensuite à l'intérieur des journaux. J'espère que vous devriez commencer à voir la puissance des fonctions. Mais il y a beaucoup d'autres fonctions que nous découvrirons bientôt. L'un des principaux avantages des fonctions est qu'elles sont réutilisables. Si nous avons des codes dans nos programmes que nous avons répétés plusieurs fois, nous pourrions saisir tout notre code et passer une fonction autonome , puis appeler la fonction à la place de ce code. La fonction peut également recevoir différentes valeurs sous forme d'arguments, que nous venons de découvrir ici. Vous pouvez également considérer une fonction comme un bloc de construction pour tous les programmes. Chacun d'eux se voit attribuer une tâche particulière, afin que nous puissions rendre notre code plus organisé. Les fonctions peuvent également être sous de nombreuses formes. Cet exemple est une forme plus traditionnelle d' une fonction JavaScript et d'autres types sont également disponibles, tels que la fonction flèche, que nous couvrirons plus tard. En guise de guide général, si possible, il est avantageux d'essayer de garder toutes les fonctions aussi petites que possible et de se concentrer uniquement sur une seule tâche. Il est ainsi beaucoup plus facile de savoir ce qu'une fonction fait rend plus réutilisable. Cela aide également au débogage car s'il y a un problème, nous pouvons concentrer ce problème sur une fonction particulière, est beaucoup plus facile à trouver. 18. Le constructeur de tableau: À l'intérieur de ce dossier JavaScript, nous passons maintenant à la Section 2, qui est cette section de tableau juste ici, puis à la leçon numéro 1, qui est le constructeur du tableau. Sélectionnons ceci et ouvrons cela à l'intérieur du navigateur. Nous avons appris dans la dernière vidéo que les tableaux appartiennent au groupe de types d'objets et qu'il s'agit d'un type d'objet spécial, qui ressemble à une liste, et nous pouvons accéder à n'importe laquelle de ces valeurs par la position d'index. Dans ce script, nous avons déjà créé des tableaux comme celui-ci. Comme vous pouvez le voir dans le commentaire, il s'agit d'un littéral de tableau. Nous déclarons que nous voulons un tableau en utilisant ces crochets, puis nous pouvons définir toutes les valeurs initiales que nous voulons placer à l'intérieur, nous pouvons également confirmer que ce tableau de pizzas est un type d'objet en effectuant un journal de console. À l'intérieur du journal de la console, nous pouvons utiliser la propriété typeof, nous avons examinée plus tôt, nous pouvons vérifier le type de pizza, puis à l'intérieur de la console, nous voyons qu'il s'agit d'un type d'objet. Il existe également un autre moyen de créer un tableau, à savoir l'utilisation du constructeur de tableau. Le constructeur de tableau peut être utilisé pour créer un tableau vide que vous souhaitez ajouter ultérieurement, un tableau avec des espaces vides, ou nous pouvons également y ajouter des valeurs initiales. Pour ce faire, supprimons d'abord notre journal de console, placons simplement dans un commentaire, c'est le constructeur du tableau. La façon dont nous pouvons utiliser le constructeur de tableau consiste à utiliser le nouveau mot-clé, suivi d'un tableau, qui a une majuscule A. Nous pouvons y accéder et travailler avec cela ultérieurement. Nous pouvons également stocker ce nouveau tableau à l'intérieur de la constante, puis faire un journal de console, en transmettant la valeur de notre nouveau tableau, qui est des ingrédients, puis voyons ce que cela retourne à l'intérieur du console. Ce que nous avons ici, ce sont ces crochets et nous n'avons aucune valeur à l'intérieur, nous pouvons également voir que la propriété length a une valeur de zéro. Sinon, si nous voulions initialiser cela avec certaines valeurs, nous pourrions également passer les valeurs à l' intérieur de ces crochets. Passons à la pâte, une deuxième valeur de fromage, puis à l'intérieur de la console, nous voyons maintenant ces deux valeurs à l'intérieur du tableau, et la longueur est maintenant de deux. Cette méthode est exactement la même que la méthode littérale ci-dessus, et le résultat est exactement le même. Si nous le voulions, nous pourrions également remplacer ces deux valeurs et configurer la longueur initiale du tableau. Ici, nous pourrions les supprimer et nous pourrions déclarer que nous voulons un nouveau tableau avec cinq espaces vides. On peut aussi les voir à l'intérieur de la console, on voit les temps vides 5. Il s'agit simplement d'un tableau vide, qui va être initialisé avec cinq emplacements vides. Pour moi personnellement, je préfère la première approche, qui est la version littérale. Pour moi, c'est juste un peu plus propre et descriptif, mais c'est à vous de choisir celui que vous voulez utiliser. Il convient également de noter ici que même si nous avons configuré un tableau avec cinq emplacements vides, s'agit que de la valeur de départ, il ne s'agit que de la valeur de départ, nous pouvons également l'ajouter à l'aide d'une méthode push. La façon de procéder consiste à accéder d' abord à notre tableau d'ingrédients, puis nous pourrons enchaîner une méthode push, qui va pousser une nouvelle valeur à la fin de ce tableau. Allons chercher des poivrons, économisez. Nous voyons maintenant que six valeurs sont stockées à l'intérieur du tableau. Les premières valeurs sont cinq emplacements vides, suivis de la nouvelle valeur, que nous venons pousser jusqu'à la fin de ce tableau. Nous ne voulons pas toujours garder cette fente vide. Que se passe-t-il si nous voulions remplacer l'un de ces emplacements vides par une nouvelle valeur ? Pour ce faire, nous pouvons utiliser une méthode appelée épissure. Supposons que nous voulions remplacer les troisièmes emplacements vides par une nouvelle valeur, ce que nous pouvons faire est d'appeler la méthode épissure et d'ajouter jusqu'à trois valeurs appelées paramètres. La première est la position à laquelle vous voulez vous rendre. N'oubliez pas que puisque les tableaux commencent à la position d'index 0, le chiffre 2 accède au troisième emplacement, séparé par une virgule. La deuxième valeur que nous voulons déclarer nombre d'articles que nous voulons supprimer, et dans notre cas, elle n'en est qu'une. Cela supprimera un élément au numéro d'index 2, qui est notre troisième élément. Disons cela et rafraîchissons le navigateur. Nous voyons maintenant que nous avons supprimé une seule valeur, qui nous laisse quatre emplacements vides. Mais si nous ne voulions pas simplement supprimer cette valeur, si nous voulions réellement la remplacer par une nouvelle valeur, nous ajoutons un troisième paramètre, disons des oignons. Rafraîchissez ça, et voilà. Nous avons nos deux premières fentes, qui sont toujours vides ; nous avons notre troisième emplacement qui a été remplacé par la valeur des oignons ; puis les emplacements numéro 4 et 5 restent vides. Dans cette vidéo, nous avons examiné le push et la méthode d'épissure. Ces deux éléments sont très utiles lorsque vous travaillez avec des tableaux, et nous en couvrirons beaucoup plus au cours de cette section. Pour plus de clarté pour le reste de ce cours, je vais créer des tableaux en utilisant cette approche littérale juste au-dessus. Mais il est également très important de comprendre qu'il existe différentes approches, surtout si vous les rencontrez dans code d'autres personnes ou dans d'autres guides. 19. Introduction aux propriétés, aux méthodes et le prototype: J'ai déjà mentionné divers mots tels que le type d'objet, les propriétés et les méthodes. Il est utile d'avoir au moins une compréhension de base quant à la provenance de tous ces éléments. Passez à nos fichiers de démarrage qui est leçon numéro 2 de cette section qui est les propriétés, méthodes et le prototype. À l'intérieur de notre script, vous verrez trois tableaux distincts. J'ai la margherita, la végétarienne et la gamme de pizzas pepperoni. Jusqu'à présent, nous avons brièvement examiné quelques exemples de ce que nous pouvons faire avec les tableaux. Voici comment nous pouvons accéder aux propriétés et aux méthodes. Les propriétés ou la seule propriété que nous ayons réellement examinée jusqu'à présent, c'est la longueur. Propriétés, nous avons examiné des éléments tels que la longueur qui va accéder au tableau, puis la chaîne à la fin à propos de la longueur. Cela nous donnera la longueur du tableau, donc ici nous aurons trois éléments différents. Nous avons également examiné les méthodes. Les méthodes que nous avons examinées jusqu'ici sont la méthode push et l'épissure. Encore une fois, ils sont également enchaînés à la fin d'un tableau, donc ce sera margherita.push ou margherita.splice, puis nous transmettons certaines valeurs entre ces crochets. Nous avons examiné les méthodes et nous avons examiné les propriétés, mais quelle est exactement la différence et d'où viennent ces deux méthodes ? Tout d'abord, nous allons jeter un coup d'œil à provenance réelle de ces derniers. Si nous y réfléchissons, nous avons déjà trois tableaux à l'intérieur de notre script, mais nous pourrions en avoir des centaines, voire des milliers sur un programme plus grand. Chacune de ces baies a également accès à toutes nos méthodes ainsi toutes les autres méthodes disponibles. Cette baie peut utiliser la poussée. Ce tableau peut également utiliser Push, tout comme celui-ci. Et si chaque tableau que nous avons créé comportait également le poids de ces méthodes, il y a beaucoup de code ou d' informations supplémentaires à attacher à chaque tableau. Il serait logique de pouvoir créer plusieurs tableaux comme nous venons de le faire ici. Nous aurons tous ces éléments supplémentaires tels que les méthodes dans un seul emplacement central, pour accéder chaque fois que nous en avons besoin, plutôt que de les attacher à chacune de ces baies. Eh bien, c'est en fait ce qui se passe avec les types d'objets en JavaScript. JavaScript a un concept appelé prototypes, et c'est un moyen pour chaque objet d' hériter des entités d'un autre objet. Jetons un coup d'œil à quelque chose dans la console en effectuant un journal de console, puis transmettons la valeur du tableau. Ce tableau avec un A majuscule est comme le constructeur de tableaux que nous avons regardé dans la vidéo précédente. C'est comme un modèle pour tous les autres tableaux que nous créons comme ce pepperoni juste ici. Cela héritera de toutes les méthodes qui y vivent. Les voyez-vous ? Nous pouvons nous connecter à la console, au prototype et nous rendre à la console pour voir la valeur de ce prototype, actualiser et l'ouvrir. Beaucoup de choses peuvent sembler inconnues à ce stade, mais deux choses à souligner ici, c'est que nous pouvons voir poussée et nous pouvons également voir l'épissure. N'oubliez pas que ce sont deux choses que vous avez déjà vues lorsque nous avons examiné les méthodes précédentes. C'est ainsi que nos nouvelles baies ont accès à toutes ces informations, son prototype que nous venons de regarder la console, est une propriété qui pointe vers un autre objet, dans notre cas, l'objet parent, et donc hériter de toutes ses méthodes. Nous pouvons également le voir avec des choses comme un objet. Objet avec O majuscule si nous sauvegardons et actualisons, ouvrez-le, cette fois nous nous dirigeons vers le constructeur et cela contient une liste de toutes les méthodes disponibles pour cet objet. Nous les examinerons plus tard dans la section objet. Pour récapituler lorsque nous créons un nouvel objet ou un nouveau tableau, ce que nous avons fait ici, ces nouveaux tableaux recevront automatiquement la propriété prototype ajoutée, ce qui nous permettra d' accéder aux méthodes à partir de un autre objet. Dans notre cas, ils sont tous hérités du constructeur de tableau parent et c'est pourquoi nous ne pouvions pas utiliser certaines méthodes sur chacune de ces nouvelles baies, telles que le push et l'épissure, ainsi que celles héritées méthodes disponibles, nous pouvons également créer nos propres souhaits de clients. Maintenant, si nous consignons l'une de nos propres copies de ce constructeur, dans notre cas, pepperoni, sur la console et actualisez. Ouvre ça. En bas, nous voyons ce proto, et si nous l'ouvrons, cela n'est pas lié à toutes les méthodes disponibles pour ce tableau. C'est ainsi que cette copie de ce tableau nous donne accès à des éléments tels que la poussée et épissure, que nous venons de regarder. Si nous fermons cette section proto, nous avons vu à côté que nous avons cette propriété de longueur. Cette longueur n'est pas incluse à l'intérieur du prototype. Voici la différence entre une méthode et une propriété. Étant donné que toutes les méthodes peuvent être utilisées sur n'importe laquelle de nos baies, elles peuvent être partagées via ce prototype. Cette propriété length, cependant, est spécifique à ce tableau unique car chaque tableau peut avoir une longueur différente. Il est logique de ne pas partager cela sur le prototype et de simplement disposition sur chaque baie individuelle. Nous allons approfondir cette question plus tard, mais au moins pour l'instant, vous avez une idée de l'origine de ces méthodes et nous en découvrirons beaucoup plus dans les prochaines vidéos. 20. Modifier les tableaux: Bien que les méthodes matricielles ne soient pas strictement regroupées dans une catégorie quelconque, certaines d'entre elles partagent certaines caractéristiques. Par exemple, une méthode de tableau que nous allons exécuter implique quelque chose appelé itération. Nous examinerons cela dans une prochaine vidéo, mais vous pouvez considérer cela comme une répétition du processus, pour chaque élément de la baie, comme une boucle, si vous les avez déjà utilisés. De plus, certaines méthodes prennent notre tableau d'origine et le modifient, et d'autres laissent notre tableau d'origine intact et renverront un nouveau tableau de valeurs basé sur l'original. Ce que nous allons maintenant examiner, c'est modifier les tableaux. Nous avons déjà examiné certaines méthodes de tableau, qui modifient les tableaux existants, tels que push et pop. Nous avons utilisé les méthodes push comme nouvel élément jusqu'à la fin d'un tableau. Il existe également la méthode pop qui supprime le dernier élément du tableau. Non seulement nous devons nous préoccuper de la modification du tableau d'origine, la valeur renvoyée peut également être importante. Accédez au dossier du projet, accédez à cette leçon qui modifie les tableaux, et ouvrez-la également dans le navigateur. Dans le script, trois lignes de code sont déjà configurées. L'un est utilisé un tableau de pizzas avec trois valeurs. Nous la sélectionnons ensuite, poussons une nouvelle valeur à la fin du pepperoni, puis nous la consignerons sur la console. Si nous passons au navigateur dans la console. Nous voyons ici que la nouvelle valeur de tableau de pepperoni a été poussée jusqu'à la fin. Eh bien, qu'en est-il de la valeur de retour que nous récupérons après avoir exécuté cette méthode ? Voyez ceci, nous pouvons stocker cela à l'intérieur d'une variable. Disons, const, appelez cela renvoyé, et définissez cette valeur égale à la valeur renvoyée après l'exécution de cette méthode. Ensuite, si nous saisissons ceci et que nous le plaçons dans le journal de la console, actualisez, nous obtenons maintenant la valeur de quatre. La valeur renvoyée après l'utilisation de la méthode push correspond à un certain nombre d' éléments à l'intérieur du tableau fois que ce nouvel élément a été poussé. Dans notre cas, nous avons maintenant quatre valeurs. Nous obtenons cette valeur de quatre personnes renvoyées. Comme vous pouvez le constater, non seulement les méthodes de tableau sont utiles en soi, mais la valeur souvent renvoyée que nous récupérons peut également être utile. Ensuite, nous avons également la méthode pop pour supprimer la dernière valeur du tableau. Commentons cette ligne juste ici. Nous sélectionnerons notre pizza une fois de plus, accéderons à la méthode pop, puis nous ferons un journal de console pour la pizza originale. Comme on peut s'y attendre lorsque nous utilisons la méthode pop, cela supprimera la valeur du fromage, ne laissant que la pâte et la sauce. Encore une fois, quelle serait la valeur renvoyée après avoir exécuté la méthode pop ? Eh bien, voyons ça. Encore une fois, nous stockerons cette valeur de retour , puis la consignerons sur la console. Jetons un coup d'œil, rafraîchissons, et nous obtiendrons la valeur du fromage. Plutôt que la longueur du tableau que nous avons déjà vu, après avoir utilisé pop, nous récupérons la valeur qui a été supprimée de la fin de ce tableau. Ces deux méthodes que nous venons de regarder, la poussée et la pop, affecteront la fin du tableau. Effectuez l'inverse et affectez le début du tableau. Nous avons également deux autres méthodes. Je ne vais pas taper cela car ceux-ci fonctionnent exactement de la même manière, mais unshift ajoute une nouvelle valeur au début du tableau, et shift supprime la première valeur. Les valeurs de retour reflètent également la poussée et la pop. Lorsque nous ajoutons une nouvelle valeur à l'aide de unshift, nous récupérerons le terrain du nouveau tableau. Lorsque nous supprimons un article avec des décalages, il renvoie la valeur qui a été supprimée, qui serait de la pâte. Ensuite, nous avons la méthode d'épissure, et c'est quelque chose que nous avons déjà examiné pour supprimer et remplacer des éléments à n'importe quelle position du tableau. Ces précédents que nous avons examinés, nous allons travailler avec le début ou la fin d'un tableau. Splice sélectionne n'importe quel article que vous souhaitez. Il peut prendre plusieurs paramètres et c'est vraiment flexible. Cet exemple présente trois paramètres. abord, nous avons le numéro 1, et c'est le numéro d'index du tableau pour commencer, qui est pour nous la sauce. Ensuite, le nombre d'éléments à supprimer. Dans notre cas, on ne retirera que cette valeur unique de sauce. Le troisième paramètre, insérez une nouvelle valeur à cette position, qui entraîne le nouveau tableau que nous voyons en bas. Jetons un coup d'œil à d'autres exemples dans Visual Studio Code. Nous pouvons commenter cette ligne ici. En bas, sélectionnez notre pizza. Ensuite, nous examinerons plus en profondeur l'épissure. Si nous ajoutons simplement le premier paramètre qui est la position de départ d'un, puis nous enregistrerons la pizza une fois que cette méthode aura pris effet. Voyons ce qui se passe dans le navigateur. Rafraîchissez et nous ne voyons que la valeur de la pâte. Cela est dû au fait que nous avons commencé avec la position 1, puis nous supprimons tous les éléments qui suivent jusqu'à la fin du tableau. Un nombre positif comme celui-ci commencera au début d'un tableau. Nous pouvons également utiliser des valeurs négatives pour commencer à la fin du tableau. Jetons un coup d'œil à un point négatif. Cela supprimera la dernière série de fromages, même notre pâte et notre source. Si nous changeons cela par deux négatifs, cela supprimera les deux derniers articles, nous laissant uniquement la pâte. Comme nous le savons, nous pouvons ajouter un deuxième paramètre, nous allons tout simplement recommencer sur le numéro 1. Nous pouvons ajouter un deuxième paramètre pour ne supprimer qu' un certain nombre de valeurs. Supposons que nous voulions remplacer la sauce ordinaire ici par une sauce barbecue, comme nous l'avons vu dans le toboggan. Ce que nous devons faire, c'est de supprimer cet élément et le seul élément que j'ai placé dans un, puis de le remplacer par une valeur facultative. Dans les citations, nous pouvons remplacer cela par une sauce barbecue. Économisez. Actualisez. Maintenant, notre deuxième valeur, notre position d'indice 1, a été remplacée par notre sauce barbecue. Si vous vouliez également insérer une autre valeur à la même position, il suffit ajouter à la fin, séparée par une virgule. Allons chercher des poivrons. Ils devraient les ajouter juste après notre sauce barbecue. Comme vous pouvez le constater, cette méthode d'épissure est très flexible pour ajouter et supprimer des valeurs à n'importe quelle position d'index à l'intérieur d'un tableau. Ensuite, nous avons trié les valeurs du tableau par ordre alphanumérique. Fondamentalement, par ordre alphabétique. Ceux-ci seront également dans l'ordre croissant, ainsi que la méthode inverse qui, au fur et à mesure qu'elle sonne, inverse l'ordre des valeurs du tableau. Nous devons également faire attention lorsque vous utilisez le tri avec des nombres. Nous allons voir pourquoi dans une seconde. Tout d'abord, ce que nous allons faire, c'est de commenter cela et d'accéder à notre pizza. Ensuite, il suffit d'appeler la méthode de tri par elle-même. Enregistrez la pizza et voyons ce qui se passe. Nous avons de la pâte, de la sauce et du fromage. Voyons ce qui se passe dans le navigateur. Actualisez. Ils sont maintenant par ordre alphabétique. Tout cela fonctionne comme prévu. Cependant, c'est très bien car nous utilisons une chaîne de texte pour chaque valeur de tableau. Mais s'il s'agissait d'un tableau de chiffres, cela causerait un problème. La raison en est que même si notre tableau contient des nombres, toutes les valeurs seront converties en chaînes, puis classées alphanumériquement, de sorte que la série. Revenons à l'éditeur. Au lieu de ces chaînes, nous allons descendre et, au lieu de cela, cela crée un tableau de nombres. Il peut s'agir de toutes les valeurs à l'intérieur d'ici. Je vais aller pour 12, 1 000, puis trois. Maintenant, nous devons accéder à la baie de numéros et le consigner à la console. Comme avant, nous appelons la méthode de la sauce. Mais voyons ce qui se passe maintenant, sont tous des chiffres. Disons ceci, et maintenant, nous avons la valeur de 1 000, 12 et trois. Ce que nous devrions récupérer, c'est trois, 12 et 1 000. Tout cela est complètement faux. Mais cela se produit parce que tous ces nombres sont convertis en chaînes, puis triés en tant que valeurs de chaîne. Tout comme si tous ces nombres étaient des mots, le tri commence dès le premier caractère. Ici, nous voyons la valeur d' un et aussi la valeur d'un, c'est pourquoi ces deux nombres commencent au début parce qu'un est inférieur à trois. Trois sont placés à la toute fin. Mais alors, pourquoi 1 000 sont inférieurs à 12 ? Eh bien, c'est parce que, encore une fois , comme pour le texte, si le premier caractère est exactement le même, tout comme ces deux caractères, il comparera ensuite le second caractère. Avec 1 000, il s'agit de la valeur zéro et il s'agit de la valeur de deux, qui signifie que deux étaient une valeur plus élevée sur ce point après le 1 000. De toute évidence, ce n'est pas un bon moyen de trier des tableaux de nombres. Pour cela, la méthode de tri peut également prendre en compte une fonction de comparaison. N'oubliez pas que, depuis le début, nous avons examiné le fonctionnement d'une fonction. Une fonction ressemble à ceci, nous avons le mot-clé fonction. Ensuite, nous donnons un nom à cette fonction. Nous utilisons les crochets ou les parenthèses, puis les accolades pour exécuter du code à l'intérieur. option, cela peut également prendre en compte certaines valeurs, et je vais, pour l'instant, transmettre les valeurs de a et b. Ne vous inquiétez pas pour l'instant, nous examinerons ce que c'est dans une seconde. Ce que nous pouvons faire, c'est que nous pouvons couper cette fonction et placer à l'intérieur de la méthode de tri. Placez-le dans. Si nous le voulions, nous pourrions également supprimer ce nom de fonction car il sera automatiquement appelé à partir de cette méthode de tri. Ensuite, à l'intérieur de ce corps fonctionnel, ce que nous allons faire est de retourner un plat à emporter b. Maintenant, cela peut paraître un peu déroutant mais ce qui se passe ici, c'est que nous allons appeler cette fonction pour chaque valeur à l'intérieur de ce tableau de nombres, nous transmettons a et b, et il peut s'agir de n'importe quel nom de notre choix. Peu importe que cela s'appelle a et b, il peut s'agir du numéro un, numéro deux, ça peut être tout ce que vous voulez. Mais le facteur clé ici est que nous allons comparer deux chiffres à la fois. Lorsque cela commence, la fonction de tri remplace a et b par les deux premières valeurs de 12 et 1 000. Ce sera exactement la même chose que le retour 12, en emporter 1 000. Ensuite, la deuxième fois, ce sera 1000 sur trois, et cela continuera jusqu'à la fin du tableau. Pour le premier qui est de 12 ans, enlevez 1 000. Cela va évidemment entraîner un nombre négatif. Cela sera repoussé au début de la baie. Il va ensuite passer en revue et répéter cette opération pour chaque paire de numéros, en les triant dans le bon ordre par comparaison. Maintenant, si nous supprimons cette ligne, nous consolons toujours la nouvelle valeur de la baie, enregistrez et actualisez. Ils sont maintenant dans le bon ordre. Comme vous pouvez le constater, c'est vraiment utile si nous avons un tableau de nombres. Nous ne voulons pas nous fier à la conversion alphabétique, que nous avons vue dans l'exemple précédent. Enfin, nous allons jeter un coup d'œil à l'envers. inverse, par comparaison, est assez simple par rapport à cela. Tout ce que nous devons faire, c'est de commenter cet exemple, d'accéder à nos numéros, puis d'appeler la méthode du tableau inverse. Enregistrez ça. Maintenant, au lieu d'avoir la valeur de 12, 1 000 et trois, nous avons maintenant la valeur de trois, 1 000 et 12, ce qui correspond à l'ordre inverse. 21. Retourner de nouvelles valeurs: Dans la vidéo précédente, les méthodes que nous avons examinées avaient toutes quelque chose en commun et c'était nous avons modifié le tableau existant même si elles en retournaient de quelque manière que ce soit, comme une valeur vraie ou fausse, la baie d'origine a également été modifiée. Cette vidéo va continuer avec d'autres méthodes de tableau, mais la différence est que cette fois, le tableau d'origine restera intact et quelque chose de nouveau sera créé ou renvoyé. Un exemple de cela est quelque chose que nous avons déjà utilisé, c' est-à-dire la méthode des inclusions. Includes renvoie une valeur true ou false si une valeur particulière est incluse dans le tableau Par conséquent, elle ne modifie pas le tableau d'origine. Nous avons également la méthode join, qui prend nos valeurs de tableau et les joint ensemble sous forme de chaîne. Dans notre projet, dans le fichier Returning New Values, jusqu'au script, nous avons cet exemple ici. Il s'agit d'un exemple d'inclusions. Nous vérifions si cette gamme de pizzas comprend de la pâte. Si c'est le cas, la valeur true sera renvoyée ; sinon, elle sera fausse. Nous produisons ensuite deux valeurs. Le premier est le tableau de pizzas. Par conséquent, nous pouvons vérifier si cela a été modifié, puis IsIncluded, qui est la valeur de retour. Enregistrez-le et ouvrez-le dans le navigateur. Rafraîchissez, et nous pouvons voir que le tableau d'origine n'est toujours pas modifié, puis nous obtenons la valeur true. Comme on peut s'y attendre, si nous devions changer cela pour qu'il s'agisse d'autre chose, ce serait alors la valeur de faux. Nous pouvons voir que cette méthode d'inclusions laissera le tableau d'origine intact, tout comme la méthode de jointure. Join quittera également le tableau d'origine tel quel et renvoie une nouvelle chaîne contenant toutes les valeurs du tableau séparées par une virgule. Commentons cette ligne juste ici, définissons une seconde constante appelée chaîne, et cela va être égal à pizza.join, qui va saisir toutes les valeurs à l'intérieur de notre tableau et les joindre ensemble en tant que chaîne unique. Modifiez cette valeur par chaîne, rafraîchissement, et notre nouvelle chaîne est séparée par des virgules. Si nous ne voulions pas utiliser de virgules, si nous voulions qu'un caractère différent sépare ces valeurs, si nous voulions qu'un caractère différent sépare ces valeurs, il suffit de transmettre un nouveau caractère sous forme de chaîne à l'intérieur de cette méthode de jointure. Par exemple, si nous voulions un tiret, nous pourrions utiliser ceci et comme avec n'importe quelle autre chaîne, nous pourrions également ajouter des espaces à l'intérieur pour ajouter de l'espace autour de chacun de ces mots. Ensuite, nous allons travailler avec la position d'index de la matrice. Étant donné que les valeurs des tableaux sont stockées numériquement, nous devons souvent accéder à une valeur dans un certain numéro d'index, mais si nous ne connaissons pas le numéro d' index exact pour commencer, nous pouvons utiliser une méthode appelée IndexOf pour Trouve ça pour nous. Dans ce premier exemple, nous transmettons l'index de la valeur de chaîne de la source, puis nous récupérons le numéro d'index, et comme les tableaux commencent à la position 0, sauce est la position 1. Le deuxième exemple montre LastIndexOf, et il peut sembler que c'est pour sélectionner la toute dernière valeur du tableau. Cependant, il s'agit de trouver la dernière occurrence d'une valeur. Ce tableau a la valeur de la pâte à l'intérieur deux fois, donc il recherche la dernière occurrence de ce mot, qui est la position d'index 3. Revenons à notre éditeur, jetons un coup d'œil à quelques exemples. Nous pouvons supprimer cette chaîne et cette fois-ci, nous allons rechercher le numéro d'index d'un élément particulier. Par exemple, si nous cherchions la sauce si c'était un tableau très long, nous voulions trouver exactement dans quelle position il se trouvait. Pour cela, nous pouvons définir notre constante égale à Pizza.IndexOf, puis trouver le numéro d'index par le nom de sauce, serait ensuite stocké à l'intérieur de cette constante, transmettez-le dans notre journal de console et enregistrez, rafraîchissez. Comme nous le savons, il s'agit du numéro d'indice 1. Nous pouvons opter pour le fromage, et cela sera également mis à jour, puis une fois que nous aurons le numéro d'index de n'importe quelle valeur de tableau, nous pourrons faire tout ce que nous voulons avec lui, exemple le sélectionner, nous pouvons l'enlever et même le remplacer. Ensuite, nous avons LastIndexOf. Assurez-vous que le I et le O sont des lettres majuscules. N'oubliez pas que, comme indiqué dans les diapositives, cela ne trouve pas la dernière valeur d'index de notre tableau, mais plutôt la dernière occurrence d'une valeur particulière. Par là, cela signifierait que si le mot fromage était placé deux fois, alors ajoutons également du fromage au début de notre tableau. Nous avons maintenant deux occurrences de la même valeur. LastIndexOf retournera la dernière occurrence de ce mot, donc plutôt que la position 0, il renvoie l'index numéro 3. Jetons un coup d'œil à ça. Rafraîchissez, et il y a notre valeur de trois. Si elle était déplacée juste avant notre sauce, la dernière occurrence serait maintenant l'indice numéro 2. De plus, pour celui-ci, le LastIndexOf et aussi l'IndexOf, s'il ne trouve pas de valeurs correspondantes, il retournera une valeur négative 1, donc si nous changeons cette valeur par une valeur qui n'est pas dans le la valeur renvoyée serait négative 1. Les deux dernières méthodes que nous allons examiner vont être tranchées et concates. Slice est un moyen de découper une valeur du tableau, et cet exemple montre comment passer des valeurs de 1 et 2. La première valeur de 1 est la position de départ, et pour cet exemple, il s'agit de notre sauce. La deuxième valeur de 2 est la position de fin facultative, sorte qu'elle tranche toutes les valeurs jusqu' à cette position, mais non incluse, sorte que seule la valeur de la sauce sera tranchée. Si la valeur n était le numéro 3 au lieu de 2, elle découperait à la fois la sauce et le fromage. Le deuxième exemple est concat, et cela associe les valeurs de deux tableaux ou plus. Nous avons la gamme de pizzas et également quelques extras en option. Si nous voulions les combiner en un seul tableau, nous appellerons l'un de ces tableaux tels que la pizza, nous ajouterons la méthode concat, puis nous transmettrons le tableau extras pour joindre toutes les valeurs en un seul tableau. Jetons un coup d'œil à ces derniers dans notre dossier de projet. Nous pouvons supprimer LastIndexOf et jeter un coup d'œil au fonctionnement de la tranche. Nous accéderons à notre pizza.slice et à l'intérieur d'ici, si nous n'ajoutons qu'une seule valeur comme celle-ci, il s'agirait de la position de départ ; donc, toutes les valeurs hors du tableau de la position 1 jusqu'à la fin de la baie. Nous pouvons stocker cela à l'intérieur d'une variable, puis l'enregistrer dans la console, initier la tranche. Toutes les valeurs de l'index numéro 1 jusqu'à la fin du tableau. Nous avons de la pâte, du fromage et de la sauce. Rafraîchissez-vous, et voilà. Comme pour toutes les méthodes de cette vidéo, nous constatons toujours que la matrice d'origine est toujours intacte. Au lieu de cela, nous pouvons renvoyer un nouveau tableau avec ces valeurs de tranche. De plus, comme nous l'avons vu à l'intérieur de ces diapositives, nous pouvons passer dans une position de fin optionnelle. Cela commencera notre indice numéro 1 et mettra fin notre position au numéro 3, mais n'oubliez cette troisième et dernière valeur ne sera pas incluse, donc cela ne devrait renvoyer que la pâte et le fromage, et c'est ce que nous voyons dans la console. Dans ces dernières vidéos, nous avons examiné la méthode de la tranche et également une méthode similaire, qui était l'épissure. En surface, ces deux méthodes ont l' air assez similaires, mais la différence est que l'épissure supprime ou ajoute au tableau d'origine, et la méthode d'épissure garde le tableau d'origine intact et renvoie plutôt une nouvelle valeur avec les valeurs sélectionnées. Le cas d'utilisation de ces deux éléments dépend du fait que nous voulons conserver la baie d'origine ou si nous voulons la modifier. Enfin, nous allons examiner la méthode du concat. Pour ce faire, comme nous l'avons vu à l'intérieur des diapositives, nous avons besoin d'un deuxième tableau pour fusionner. Cela créerait un deuxième tableau appelé extras, qui contiendra des garnitures supplémentaires. Ajoutons quelques poivrons et quelques oignons. Nous pouvons ensuite commenter la valeur d'avant. Créez notre NewPizza, et la NewPizza sera égale à ces deux tableaux fusionnés. Pour ce faire, nous allons d'abord accéder à l'un de nos tableaux, comme la pizza, puis nous appelons la méthode qui était concat, puis nous fusionnerons les extras. Enregistrez et revenez dans le navigateur. Oups, il faut juste enregistrer la nouvelle pizza. Rafraîchir, puis dans la console, et comme pour toutes les méthodes de cette vidéo, la baie d'origine reste intacte. Nous allons enregistrer la pizza juste ici. Nous avons un nouveau tableau NewPizza, qui est une combinaison du tableau de pizzas et aussi des extras. 22. Méthodes d'itération: Le dernier groupe de méthodes que je vais vous montrer dans cette vidéo est des méthodes qui vont passer en boucle sur chacun de ces éléments de tableau et ensuite exécuter une fonction pour chacun d'eux. Dans les fichiers de démarrage, accédez aux méthodes d'itération, qui se trouvent dans la section 2 et le numéro 5, ces méthodes d'itération qui exécutent une fonction pour chacune d'elles sont vraiment utiles lorsque nous avons beaucoup d'éléments de tableau et je veux répéter un processus pour chacun d'eux. À l'intérieur de la page d'index des fichiers de démarrage, vous pouvez voir en haut, nous avons trois rôles d'utilisateur dans les commentaires. Si vous utilisez quelque chose comme WordPress dans le passé, cela vous paraîtra très familier. Il s'agit d'une configuration courante. Vous pouvez voir ici que nous avons tous les rôles et un tableau, ce qui sera vraiment courant si nous avions plusieurs utilisateurs sur notre site et que nous voulions donner aux utilisateurs différents niveaux d'accès. Par exemple, si nous avions un objet d'utilisation portant le nom et toutes les autres informations d'utilisation. Nous pourrions également ajouter un tableau comme celui-ci. Nous pourrions placer à l'intérieur tous les rôles et autorisations dont dispose cet utilisateur. Ensuite, nous pourrions vérifier cela avant qu'ils ne fassent des actions sur notre site. Par exemple, s'ils sont sur le point de publier un article de blog, se peut que nous voulions parcourir tous les rôles à l'intérieur de la baie et vérifier qu'ils disposent des autorisations correctes avant de le faire. Tout comme avec WordPress à propos du top, nous avons l'administrateur, qui est l'accès grandeur nature, et il dispose de toutes les autorisations, fait à peu près n'importe quoi sur un seul site. Nous avons l'auteur et l'auteur ne peut pas publier des articles tels que leurs propres articles de blog. Ils peuvent également les modifier. Ils sont effectivement en charge de leur propre contenu. Eh bien, cela aura un abonné qui est généralement le paramètre par défaut d'un site WordPress. Ils ne peuvent pas gérer notre côté, ils ne peuvent modifier aucun contenu. Tout ce qu'ils peuvent faire, c'est gérer leur propre profil. Ce que nous allons faire ici, c'est simuler un site d'articles de blog où un utilisateur peut créer ses propres articles de blog. Dès que l'utilisateur s'est connecté et qu'il a créé un article de blog, lorsqu'il clique sur le bouton Publier, nous voulons d'abord parcourir les rôles de l'utilisateur et vérifier qu' a les bons autorisations. Dans notre cas, nous voulons vérifier s'il s'agit d'un administrateur ou d'un auteur. Si c'est le cas, ils peuvent alors aller de l'avant et publier. Si ce n'est pas le cas, ils auront besoin d'une autorisation avant d'être mis en ligne sur notre site, et pour ce faire, nous créerons une fonction. Parce que rappelez-vous que ces méthodes d'itération exécuteront une fonction pour chaque valeur à l'intérieur de notre tableau. Cette fonction appellera ce CanPublish et cela va renvoyer une valeur vraie ou fausse. Pour cela, vérifiez également les rôles que nous devons transmettre à la fonction , puis vérifier si le rôle est égal à l'administrateur ou égal à l'auteur. Nous pouvons utiliser role, le triple est égal pour vérifier si la ligne qui est transmise est d'abord égale à l'administrateur. Tous les utilisateurs ont besoin de [inaudible], qui est l'opérateur ou que nous avons déjà examiné. Nous pouvons également vérifier si le rôle est égal à celui de l'auteur. Si c'est le cas, nous allons renvoyer cette valeur, qui sera soit vraie, soit fausse, et pour voir cette valeur de retour, nous allons créer un journal de console, il suffit de souffler et ce journal de console va appeler cette fonction. passer peut Publier et nous commencerons par passer l'administrateur. Cette chaîne d'administration va être convertie en ce rôle et nous vérifions que ce rôle est égal à l'administrateur ou à l'auteur. Va à la console. Rafraîchissez cette page, et c'est bien sûr vrai. Essayons également l'auteur, qui est la deuxième condition juste ici et cela devrait également être vrai. Enfin, l'abonné et celui-ci est faux. Notre fonction fonctionne correctement. Mais pour le moment, c'est très manuel. Nous devons passer manuellement chacune de nos cordes et vérifier à l'intérieur d'ici, chacune à la fois. C'est très bien lorsque nous n'avons que trois rôles distincts. Mais imaginez que si vous deviez répéter cela par exemple, 50 rôles différents sur notre site, cela deviendra un processus long et fastidieux. Eh bien, pour y remédier, nous revenons à l'ensemble du but de cette vidéo, qui est de regarder les méthodes d'itération. Cela permettra d'économiser beaucoup de travail manuel en bouclant chacun de ces rôles et en vérifiant s'il contient une valeur particulière. La première méthode d'itération que je vais examiner est certaines et tout comme d'autres méthodes, nous allons commencer par accéder au tableau par le nom de la variable, puis nous appellerons la méthode some par la suite et cela va vérifiez si certaines des valeurs du tableau sont nombreuses, mais beaucoup pour quoi ? Eh bien, en utilisant ce même exemple, nous pouvons déplacer cette fonction dans la méthode some. Prenez tout ce code ici, mettez-le et placez-le juste à l'intérieur des crochets. Nous ne pouvons pas supprimer ces noms de fonctions car nous n'en avons pas besoin, le rôle est manuellement. Il sera plutôt appelé une fois pour chaque valeur à l'intérieur de ce tableau, ce qui est souvent appelé fonction de rappel. Cette fonction sera désormais appelée trois fois. La première fois que le rôle prend la chaîne d'administration, il serait alors auteur, puis la troisième fois serait l'abonné et pour chacun de ces rôles, il exécuterait ensuite le code à l'intérieur de la fonction. Tout comme pour toute cette fonction renvoie toujours une valeur vraie ou fausse et nous pouvons capturer cette valeur de retour à l'intérieur d'une variable. Dans le journal de la console, nous appelons toujours CanPublish. Mais cette fois-ci, ce n'est pas une fonction, nous pouvons donc supprimer les parenthèses et vous n'avez qu'à enregistrer la valeur de cette constante. Maintenant nous donne une sauvegarde, une actualisation et cette valeur est désormais égale à true. C'est vrai parce qu'au moins un des rôles à l'intérieur d'ici est un match. Si aucun de ces éléments ne correspondait à l'administrateur ou à l'auteur, je viens de changer cela, nous pouvons opter pour un l'auteur, je viens de changer cela, modérateur et disons invité, sauvegarder cela et actualiser, et c'est maintenant la valeur de false. En regardant cette diapositive, c'est la même méthode que celle que nous voyons en haut. Pour résumer, il retournera true si une ou plusieurs des valeurs du tableau sont destinées à la fonction de rappel. Mais qu'en est-il plutôt si nous voulions obtenir une valeur réelle uniquement si tous les éléments du tableau correspondent ? Eh bien, pour ce cas d'utilisation de la façon dont chaque méthode, et nous pouvons voir un exemple ci-dessous. Il s'agit d'un tableau des résultats des tests de cette année. Ensuite, nous exécutons une fonction de rappel pour chaque valeur du tableau. Pour deux fois que le retour est vrai, tous les éléments de la baie doivent être supérieurs à 95. Si un seul est inférieur à 95, il échouera et renverra une valeur fausse. Nous utilisons ces méthodes si nous le voulons si nous renvoyons des valeurs similaires ou toutes les valeurs. Au lieu d'avoir simplement un tableau autonome comme celui-ci, il est plus courant de l'attacher à un objet utilisateur. Imaginez que nous ayons un site avec plusieurs utilisateurs, étaient tous stockés dans une baie. Ensuite, chacun de nos utilisateurs a son propre objet utilisateur. Ouvrez les accolades bouclées pour un objet. abord, nous n'aurons qu' un identifiant d'utilisateur , séparé par une virgule. La deuxième propriété du rôle d'administrateur. Ce que je vais faire, c'est d'ajouter une virgule à la fin de cela, puis de copier. Nous allons coller ça dans deux autres fois. Utilisateur 2, cette fois un rôle différent d'auteur. Utilisateur 3, celui-ci peut également être l'auteur deux, puis enfin, le numéro quatre peut être l'abonné. L'utilisation d'une méthode d'itération signifie que nous pouvons traverser chacun de ces objets utilisateur et filtrer en fonction d'un rôle particulier. Imaginons que nous voulions saisir cet utilisateur particulier, qui est le rôle d'abonné. Puisqu'il s'agit d'un tableau pour cela, se peut que nous ayons besoin de trouver le numéro d'index avant de pouvoir récupérer ces informations. Pour cela, nous avons quelque chose appelé trouver l'index. Cet exemple contient également un tableau d'objets utilisateur. Nous l'appelons ensuite méthode find index, et elle exécutera une fonction pour chacune de ces valeurs. Chacune de ces valeurs est stockée dans le périmètre utilisateur des fonctions. Dans les instructions de retour, nous accédons à l'utilisateur, sélectionnons le rôle et vérifions s'il est égal à admin. Il renvoie ensuite la position d'index du tableau de la première correspondance. Pour cet exemple, il s'agit de la première valeur qui est la position zéro. Essayons celui-ci nous-mêmes. Revenons à notre page d'index, je vais juste éclaircir les choses. Même ce tableau d'utilisateurs. Ensuite, en bas, nous allons accéder à nos utilisateurs, puis nous appellerons la méthode que nous venons examiner appelée find index. Comme toutes les autres méthodes, cela va également prendre en charge une fonction et nous devons également passer à l'utilisateur. Tout comme avant que cette fonction soit appelée une fois pour chaque élément à l'intérieur de ce tableau. La première fois qu'il le traversera sera l' utilisateur 1, l'utilisateur 2, etc. Ensuite, ce que je veux faire, c'est accéder à l'utilisateur , je vais simplement déplacer ça. Nous voulons ensuite accéder au rôle individuel. Si nous voulions trouver ce rôle d'abonné, nous pourrions vérifier s'il est égal à la chaîne d'abonné. Ensuite, le retour est une valeur qui va être vraie ou fausse. Stockez ensuite cette valeur renvoyée à l'intérieur d'une variable. Examinons cela en effectuant un journal de console. Moyens de consigner cette variable d'index, actualiser le navigateur et de récupérer le numéro d'index trois. Il s'agit des numéros d'index 0, 1, 2 et 3. Nous savons maintenant que tout cela fonctionne correctement. Comme nous pouvons le constater, cela renvoie la position de l'index. Mais qu'en est-il si nous voulions la valeur réelle telle que cet objet complet ? Pour cela, nous avons à notre disposition une méthode appelée trouver. Find sélectionne le premier match à l'intérieur de notre tableau. Par exemple, si nous avions plusieurs abonnés, la méthode find serait utile pour trouver le premier, auquel elle est confrontée. Cet exemple contient également un tableau d'objets utilisateur. Nous appelons ensuite la méthode find et elle exécutera une fonction pour chacune des valeurs. Ici, nous vérifions si le rôle est égal à l'auteur , puis find retournera le premier objet, qui correspond à une correspondance. Dans notre cas, c'est l'utilisateur numéro deux. Dans ce cas, il suffit de changer cela pour qu'il soit trouvé. Cette fois, nous allons vérifier si le rôle de l'utilisateur est égal à celui de l'auteur. Nous avons deux rôles d'auteur à l'intérieur du tableau, et cette méthode de recherche choisira le tout premier. Nous allons le renommer pour être l'auteur et le consigner sur la console. Enregistrez et rafraîchissez, ouvrez-le. Ceci a sélectionné l'utilisateur numéro deux, qui est le premier de nos deux rôles d'auteur. C'est vraiment utile pour trouver la première correspondance à l'intérieur de notre tableau. Mais qu'en est-il si nous voulions sélectionner ces deux utilisateurs qui correspondaient ? Pour cela, nous avons également une méthode appelée filtre. En utilisant le même exemple que précédemment, tout ce que nous avons fait ici est de modifier la méthode find pour qu'elle soit filtrée, et cela renvoie toutes les correspondances au lieu de la première. Ce qui signifie que nous récupérons un nouveau tableau contenant l'utilisateur 2 et 3. Tout ce que nous faisons, c'est changer la recherche pour être filtre, et au lieu de cela, nous retrouvons et au lieu de cela, nous retrouvons plusieurs auteurs, donc nous ajouterons un s à chacun d'entre eux. Enregistrez et actualisez. Nous voyons maintenant un tableau contenant deux objets distincts. Si nous ouvrons cela, à l'intérieur, nous pouvons voir que nous avons l'utilisateur numéro deux et le numéro trois. Ce sont des méthodes vraiment utiles pour sélectionner des valeurs à l'intérieur d'un tableau. De plus, certaines choses à prendre en compte sont depuis ES 2015, nous avons également un autre type de syntaxe de fonction que nous pouvons utiliser, et c'est ce qu'on appelle une fonction de flèche. Les fonctions de flèche présentent des différences de comportement par rapport à cette fonction traditionnelle, que nous examinerons plus en détail dans une section ultérieure. Mais pour l'instant, nous pouvons également les utiliser pour raccourcir notre code de fonction. La façon de le faire consiste à supprimer ce mot-clé de fonction, puis juste après ces crochets nous les plaçons dans une flèche. Une flèche se compose des valeurs égales et du crochet à angle droit pour créer ces effets de fonction de flèche. En l'état actuel, ce code est entièrement valide. C'est bon à utiliser. Si nous devions enregistrer cela et actualiser, nous voyons toujours les mêmes résultats, mais nous pouvons également raccourcir cette fonction encore plus loin. Nous pouvons placer tout ce code sur une seule ligne en retirant ces crochets bouclés. Nous allons déplacer les deux et placer tout cela sur une seule ligne. Apportez ça comme ça. Ensuite, nous écrivons une fonction flèche comme celle-ci sur sa propre ligne. Nous pouvons également supprimer le mot-clé retour vers, car il sera automatiquement renvoyé pour nous. Encore une fois, tout cela est parfaitement valable et si nous actualisons le navigateur, nous obtenons toujours les mêmes deux résultats. Enfin, si nous n'avons qu' un seul paramètre au-delà de cette fonction, nous pouvons même supprimer les crochets environnants comme celui-ci. Mais vous savez que si nous avons plusieurs paramètres, nous devions passer une seconde valeur à l'intérieur, nous devrions tout de même ajouter les crochets environnants. Une syntaxe est souvent utilisée pour conserver ce genre de choses, qui sont plus simples et ajouter tout notre code sur une seule ligne. C'est à vous de choisir le type que vous préférez utiliser dans votre propre code. Mais il est utile de savoir que ces deux styles existent, car vous verrez de nombreux exemples en ligne. Ces dernières vidéos, je vous ai montré certaines des méthodes de tableau les plus populaires, et il y en a encore quelques autres, mais elles fonctionnent généralement de la même manière. Il existe également d'autres méthodes d'itération. À venir, nous allons y jeter un coup d'œil plus en détail. 23. Réducteurs: Nous allons maintenant aborder une technique visant à réduire un tableau à une seule valeur. Je vais le faire en utilisant la méthode réduite. La méthode réduite, comme les précédentes que nous avons examinées, prend en charge une fonction et exécutera cette fonction pour chaque valeur de tableau. C'est plus simple. Nous pourrions ajouter un tableau de nombres, puis renvoyer le total de ces chiffres ajoutés ensemble. Bien sûr, nous pouvons devenir beaucoup plus complexes si nous en avons besoin également. Jetons un coup d'œil à quelques exemples de ces fichiers de données. Rendez-vous dans celui qui est le réducteur. Vous pouvez voir qu'à l'intérieur d'un script, nous avons un tableau de nombres simple contenant cinq valeurs différentes. Si tout ce que nous voulons faire est d'ajouter toutes ces valeurs et de renvoyer le total, la méthode réduite est parfaite pour cela. Comme pour d'autres méthodes, juste en dessous, nous pouvons appeler la méthode réduite sur le nom du tableau. Ce qui, dans notre cas, c'est des chiffres. Appelez réduisez, ajoutez les crochets, puis nous allons exécuter une fonction pour chaque valeur à l'intérieur de ce tableau. Cette fonction pourrait être transmise directement entre crochets, comme nous l'avons fait précédemment, ou tout comme pour toutes les méthodes, nous pourrions également les garder séparées si nous le voulions. Cela a également un avantage supplémentaire il est plus réutilisable si nous voulons l'utiliser ailleurs. il en soit, c'est très bien. Mais pour cet exemple, nous voulons vous montrer l'approche alternative, qui consiste à créer la fonction séparément. Créez notre fonction juste en dessous. Puisque cela va ajouter tous les nombres et renvoyer le total, nous allons lui donner un nom de total, ajouter les parenthèses, puis les accolades. Pour cela, il va prendre en compte deux paramètres à l'intérieur des crochets de la fonction. Il s'agit du total séparé par une virgule. Le prochain sera la valeur actuelle. Ensuite, à l'intérieur des crochets ou à l'intérieur des accolades, nous allons renvoyer le total, ajouté à la valeur actuelle. Je vais expliquer ce que tout cela fait plus en détail dans un instant. Mais pour l'instant, comme cette fonction est séparée de la méthode réduite, nous devons également l'appeler à l'intérieur des crochets. Encore une fois, pour clarifier, c'est exactement la même chose. Placons ça directement à l'intérieur d'ici. Revenons à cette fonction, et cela est appelé une fois pour chacune des valeurs du tableau. Pour cet exemple, il sera exécuté cinq fois. C'est ici que ces deux paramètres entreront en jeu. Pour chaque boucle, le nombre actuel sur la droite est assez explicite. Il s'agit de la valeur actuelle du tableau, telle que 72 et 33. Mais d'abord, nous avons une rangée totale sur la gauche. Il s'agit du total de la boucle précédente, souvent appelée accumulateur, car elle accumule les résultats précédents. Juste pour clarifier ce qui se passe ici, nous allons jeter un coup d'œil. Nous ajouterons un commentaire rapide ici. La première fois que cette fonction sera exécutée, il s'agit de la boucle numéro 1, et le total , qui est ici, sera égal à zéro, car nous n'avons pas encore ajouté de valeurs. La deuxième valeur de la valeur actuelle sera 72, car il s'agit la toute première valeur à l'intérieur du tableau. Ensuite, passez à la boucle numéro 2. Tout d'abord, encore une fois, nous avons le total, c' est-à-dire ces deux valeurs additionnées. Ces deux valeurs ajoutées ensemble seront égales à 72. La valeur actuelle de celle-ci est le numéro 33. Encore une fois, exactement la même chose pour la boucle 3. Cette fois, nous allons ajouter ces deux valeurs ensemble, ce qui nous donnera le résultat d'un 105. Cette fois-ci, la valeur actuelle est 108. Vous pouvez voir ici un modèle pour chaque boucle que nous allons ajouter les deux valeurs. Cette fois sur la boucle numéro 4. Ces deux points additionnés, pour la boucle numéro 4, seront 213. La valeur actuelle de la boucle numéro 4 est 222. Enfin, la boucle numéro 5. Ces deux valeurs ajoutées ensemble pour la boucle 5 seront égales à 435, la valeur actuelle étant le numéro 6. Bien sûr, ne me croyez pas sur parole. Nous allons nous connecter à la console et vérifier quelles sont les valeurs. N'oubliez pas que nous retournons cette valeur finale de la fonction. Nous pouvons stocker cela à l'intérieur d'une variable. Dites que le résultat const est égal à cette valeur de retour, puis à un journal de console. Pour que vous sachiez également que Visual Studio Code exécutera un journal de console, ou un raccourci vers cela, si nous tapons simplement le mot journal et que nous appuyons sur « Entrée », transmettez le résultat. Nous pouvons vérifier cela à l'intérieur du navigateur. Inspectez, dans la console, et nous voyons la valeur de 441, soit les deux dernières valeurs ajoutées ensemble. Ceci est ajouté pour obtenir les cinq nombres, puis renvoyer la valeur finale à l'intérieur de cette fonction. Nous pouvons également faire tout ce que nous voulons avec ces deux valeurs, comme la soustraction. Changeons cela pour qu'il soit négatif. Faites un test, et nous obtenons la valeur de retour de 297 négatifs. Cela fera exactement la même chose, nous allons passer cinq fois, mais cette fois, nous déduirons la valeur actuelle du total, c'est pourquoi nous obtenons cette valeur négative. Je vais juste rétablir ça pour être plus. Cela additionne les valeurs de notre tableau de gauche à droite, comme nous venons de le voir avec cet exemple. Nous avons également une méthode similaire qui fonctionnera de droite à gauche. C'est très simple. Tout ce que nous devons faire, c'est changer la réduction pour être réducRight. Accordez-y une sauvegarde et une actualisation, et nous obtenons la même valeur de 441, car nous ajoutons les mêmes chiffres, mais cette fois, c'est juste dans un ordre différent. Pour vérifier deux fois, cela va de droite à gauche. Nous sommes tout à fait sûrs même si nous avons la même valeur ici. Nous pouvons également ajouter un numéro d'index facultatif. Ajoutez-le en tant que troisième paramètre à notre réducteur. Ensuite, juste avant de le renvoyer, nous pouvons créer un journal de console. Consignez la valeur de l'index. Nous devrions voir le numéro d'index passer du nombre le plus élevé au plus bas. Il s'agit du dernier chiffre qui est le numéro d'index 3, jusqu'à zéro. Ces deux fonctions, le ReduceRight et la réduction, sont utiles pour de nombreuses raisons. Nous voudrions peut-être suivre le score ou les points d'un utilisateur de cette façon, puis totaliser toutes ces valeurs ensemble à la fin. Ces informations peuvent ensuite être utilisées d'autres façons, peut-être pour trouver le score moyen. Pour ce faire, vous pouvez connaître le nombre moyen à l'intérieur de ce tableau. Juste en dessous de notre méthode ReduceRight ici, je vais créer une nouvelle constante. Tout cela appelle la moyenne, et définissez cela comme égal à un calcul. Le calcul que nous voulons faire consiste à saisir tous les résultats, c' est-à-dire la valeur de tous ces résultats additionnés. Il s'agit de l'étape 1, puis nous devons diviser cela par le nombre d'éléments à l'intérieur du tableau. Encore une fois, nous pouvons le faire assez simplement. Nous devons accéder à notre tableau de numéros complets, puis à la propriété, qui est de longueur, que nous avons examinée par le passé. Nous pouvons ensuite consigner la moyenne de la console, accéder au navigateur et actualiser. Nous pouvons maintenant voir que la moyenne est de 88.2. 24. Carte et forEach: Je veux maintenant vous montrer deux autres méthodes de tableau. Comme vous pouvez le voir dans le titre, il s'agit de Map et FoReach. Ces deux méthodes sont également méthodes d'itération comme nous l'avons vu précédemment. Ils vont passer en boucle sur chaque élément de tableau , puis exécutera une fonction de rappel. Beaucoup de méthodes de tableau que nous avons du code jusqu'à présent, et beaucoup plus spécifiques, telles que le tri d'un tableau, nous pouvons filtrer, nous pouvons vérifier si une valeur existe, mais ces deux méthodes, qui sont MAP& FoReach, sont beaucoup plus généraux. L'utilisation à cet effet se limite uniquement au code que nous écrivons à l'intérieur de la fonction. Ouvrez le fichier Map and FoReach. Ensuite, à l'intérieur de ce script, il y aura deux tableaux. Nous aurons un tableau de chiffres simple et nous aurons une série de billets de blog, que nous examinerons dans un instant. Mais maintenant, nous allons commencer par accéder aux numéros et, comme toujours, nous appelons la méthode avec point ou par le nom de FoReach. Nous pourrions écrire une fonction comme nous l'avons déjà regardée à l'intérieur d'ici. En utilisant la syntaxe de fonction plus traditionnelle ou aussi pour la pratique, je vais convertir cela en fonction de flèche. Une fonction de flèche, que nous avons déjà examinée, commence par les crochets comme ceci. Nous écrivons ensuite une flèche avec le symbole égal et le symbole supérieur à. Ensuite, nous avons quelques options différentes. Si nous le voulions, nous pourrions ajouter plusieurs lignes de code à l'intérieur des accolades. Nous pourrions écrire notre code à l'intérieur, puis utiliser le mot-clé retour pour renvoyer une valeur partir de cette fonction ou, comme nous l'avons vu précédemment, nous pourrions émettre le mot-clé retour et placez cela sur une seule ligne. Si nous les plaçons sur une seule ligne, nous pouvons également retirer ces accolades, ce qui renverra directement le code. Faisons un journal de console, en tant que valeur de retour. N'oubliez pas que puisque nous sommes en boucle sur chaque valeur du tableau de nombres, cela va également prendre le nombre en tant que paramètre. Maintenant, nous aurons la liberté de faire tout ce que nous voulons avec ce paramètre, comme un simple journal de console. Nous pouvons maintenant mettre le nombre, multiplier par deux. Découvrez cela dans l'actualisation de la console pour voir 144, 66. ne s'agit que de tous ces nombres multipliés par deux. Le numéro d'index est également disponible si nous voulons l'insérer en tant que paramètre. Souvenez-vous d'une virgule et de l'index, puis nous pouvons utiliser cet index n'importe où dans notre fonction. Enlevons ça. Je veux ajouter la chaîne de modèle avec les backticks, afin que nous puissions insérer une variable. Nous aurons le texte du nombre disponible, qui est un symbole $, et les accolades, passent dans l'index, puis un deux-points, donc ce que nous allons dire ici est le numéro un, puis un deux-points. Ensuite, insérez également notre numéro. Si nous le voulons, nous pouvons faire quelque chose similaire aux tentatives précédentes, multipliées par deux. Sauvegardons cela et revenons dans le navigateur. On y va. Nous pouvons accéder au nombre zéro, numéro un, numéro deux et voir chacune des valeurs individuelles. Encore une fois, si nous le voulions, nous pouvons également manipuler cela. Si nous voulons que cela commence à l'indice numéro un, nous pourrions ajouter la valeur d'un. Cette fois-ci, plutôt que de commencer par le numéro zéro, cela commencera au numéro un. Comme mentionné précédemment, nous pouvons écrire n'importe quel code à l'intérieur de cette fonction et prendre notre tableau de post d'en haut. Jetons un coup d'œil à un exemple avec un tableau d'objets. Ce que nous allons faire cette fois-ci c'est de parcourir tous nos messages, puis d'exécuter une fonction pour chacun de ces objets. Nous sélectionnerons le titre du billet de blog , puis il transformera le texte en majuscules. Pour la pratique, nous allons recommencer, accéder à nos publications, appeler chacun, ouvrir les crochets et ensuite insérer une fonction avec n'importe quelle syntaxe que vous souhaitez. Cette vidéo, je vais m'en tenir à la fonction flèche, ce qui est exactement comme ça. Insérez ensuite à nouveau un journal de console. Cette fois, nous parcourons tous les messages en boucle. Cette fonction prend en compte un paramètre pour chaque publication. De plus, si vous vous souvenez, si nous n'avons qu' un seul paramètre comme celui-ci, nous pouvons également supprimer les crochets environnants, rendre un peu plus court. parfois, si vous enregistrez exactement comme ceci, l'éditeur de texte les réinsère, mais c'est tout à fait correct. Ce que nous allons faire maintenant, c'est accéder à ces publications individuelles dans notre journal de console. Comme il s'agit d'un objet, nous devons accéder à l'une des clés, comme le titre ou le corps. Je vais chercher le titre. Ensuite, je vais également insérer une méthode appelée ToupperCase. Jusqu'à présent, dans cette section, nous avons utilisé de nombreuses méthodes que nous appellerons sur un tableau, mais TupperCase est également une méthode. Mais celui-ci est utilisé sur une chaîne de texte. Essayons ça. Accédez au navigateur et actualisez. Il y a nos trois titres, donc nous appelons la fonction trois fois Pour chacun, nous sélectionnons le titre et transformons le texte en majuscules. C'est la méthode FoReach, mais qu'en est-il de Map ? Passons à notre éditeur et tout ce que nous avons à faire est de changer FoReach, cartographier, d'enregistrer et d'actualiser, et nous récupérons exactement les mêmes valeurs dans la console. Entre Map et FoReach, ils se ressemblent beaucoup. Quelle est la différence exactement ? Il y a plusieurs raisons pour lesquelles ils sont différents et l'une est la valeur renvoyée. Pour ce faire, nous devons stocker cette valeur renvoyée à l'intérieur d'une constante ou d'une variable. Nous dirons de nouvelles publications et définirons cette valeur égale à notre valeur de retour , reviendra à FoReach. Ensuite, au lieu du journal de la console, il suffit renvoyer la valeur de cette transformation. N'oubliez pas que nous avons peut-être une seule ligne avec une fonction de flèche comme celle-ci. Cette valeur sera automatiquement renvoyée pour nous. Pour voir cet endroit dans un journal de console avec la valeur de retour stockée dans les nouvelles publications, enregistrez dans les outils de développement et nous voyons cette nouvelle valeur non définie. Nous retrouvons indéfinis parce que rien ne nous est retourné. Pour chacun, nous allons exécuter une fonction pour chacune de ces valeurs de tableau, puis modifierons directement ce tableau d'origine sans rien renvoyer. La carte, en revanche, si nous modifions cela, sauvegardons et actualisons, nous récupérons maintenant un nouveau tableau sans les valeurs de transformation. Il s'agit de la principale différence entre Map et FoReach. Pour chaque, nous allons modifier la baie d'origine. Lorsque vous utilisez Map, le tableau d'origine reste intact et renvoie un nouveau tableau contenant les valeurs modifiées Il s'agit donc d'une différence clé. Une autre différence clé entre ces deux méthodes est que lorsqu'il s'agit d'une carte, nous pouvons également enchaîner plusieurs méthodes. Pour voir cela plus clairement, je vais placer cela sur plusieurs lignes et la section Carte sur sa propre ligne, supprimer le point-virgule, puis nous pourrons enchaîner à la fin une méthode de filtre. respectant le même style, vous ajouterez une fonction de flèche qui prend la nouvelle valeur, configure notre flèche, puis nous pourrons filtrer n'importe quel article de blog où la valeur ou le titre particulier se trouve égal à être » Comment être un ninja partie deux. Cela doit également être majuscule, car nous l'avons déjà transformé avec la carte juste au-dessus. Maintenant, comme nous le savons déjà, ce titre est inclus, ce qui va filtrer notre seul article. Si nous passons à la console, nous pouvons le voir si nous les actualisons. Maintenant, nous aurons un nouveau tableau qui nous revient avec cette seule valeur filtrée. Sinon, si nous ne voulions pas simplement un nouveau tableau avec cette valeur unique, nous voudrions simplement vérifier si ce titre est inclus dans nos publications ou si nous pourrions le faire, en changeant le filtre avec la méthode some. Cela renvoie une valeur vraie ou fausse, comme nous le savons déjà, son titre est déjà inclus. Maintenant, si nous actualisons cela, nous récupérons la valeur de vrai. Si nous le modifions pour qu'il s'agisse d'un élément qui n'est pas inclus, la valeur false sera renvoyée. C'est vraiment utile pour récupérer les données exactes dont nous avons besoin. Nous pouvons également saisir la position d'index de ces éléments de tableau. Nous pouvons le faire en rechangeant cela par l'un des titres reconnus ou la deuxième partie. Ensuite, au lieu de continuer à apporter des modifications pour trouver l'index que nous avons utilisé précédemment, enregistrez. Ce sera l'indice numéro deux et nous y allons. Vous pouvez voir avec ces exemples que même si toutes ces méthodes peuvent paraître complexes au début, beaucoup d'entre elles sont structurées exactement de la même manière, mais renvoient simplement des valeurs différentes. De retour à cette carte et à cette FoReach, aucun de ces chaînements ou ajout d'une nouvelle méthode à la fin n'est disponible lors de l'utilisation de FoReach. Nous pouvons le voir si nous le modifions, si nous les actualisons et que nous voyons une erreur à l'intérieur de la console. Cette formation n'est pas possible lors de l'utilisation FoReach, car comme nous l'avons déjà vu dans l'un de nos tests, avant que chaque méthode ne retourne une valeur indéfinie plutôt qu'une nouvelle valeur. Juste pour un récapitulatif, nous utilisons FoReach si nous voulons modifier la baie existante et que nous n'avons pas besoin d'une nouvelle baie renvoyée. Nous utilisons Map si nous voulons laisser le tableau d'origine intact et renvoyer un nouveau tableau contenant les valeurs. Il est également bon pour la chaîne. 25. Déstructurer des tableaux: Oui, 2015 a introduit la destruction, qui est un moyen simple d'extraire des tableaux ou des valeurs d'objets et de les stocker dans des variables. Pour démarrer un projet, c'est-à-dire la destruction d'un tableau contient un tableau d'articles de blog, comme nous l'avions fait dans la dernière vidéo. Si nous voulions stocker chaque valeur de tableau dans une nouvelle variable, nous pouvons le faire en ajoutant une valeur destructrice. Nous pouvons le faire sur le côté gauche de ce qui est égal. Au lieu de stocker tout cela dans une seule variable post, nous pouvons ajouter les crochets comme ceci, puis créer une nouvelle valeur de variable pour chacun de ces éléments de tableau. Le premier que nous pouvons appeler post1, post2, puis post3. Ces valeurs de tableau distinctes doivent maintenant être stockées dans ces trois variables. Essayons ça. journal de votre console avec la valeur post1. Rafraîchissez, et il y a notre article de blog unique. Essayons le numéro 3. On y va. Nous pouvons voir que chacune de ces trois valeurs est désormais unique, qu'elle est destructive et peut également avoir lieu séparément. Nous pourrions également définir exactement le même résultat comme celui-ci. Nous pourrions créer une nouvelle variable , puis stocker nos valeurs à l'intérieur de ces crochets. Comme avant, nous pouvons stocker post1, post2 et post 3, et les définir égaux à tous les messages. Encore une fois, avec l'un de nos messages uniques déjà sélectionnés, nous pouvons vérifier cela. Post3 et post2, donc c'est la même chose que nous venons écrire de deux manières différentes. faire dans ce style signifie également que nous avons accès à ces trois variables détruites, nous conservons également la référence originale à ce tableau complet, si nous voulions également nous amuser plus tard. Vous pouvez considérer cette destructrice comme un raccourci. C'est exactement la même chose que ça. Nous pourrions les configurer individuellement en créant post1 et en le définissant comme égal à notre tableau de messages, en sélectionnant la valeur d'index d'origine. Redoublons encore deux fois. Post2 sera égal à notre première position d'index, puis post3 est égal au numéro d'index 2. Maintenant, avec post2 déjà sélectionné, passez à la console. Cela fonctionne toujours comme avant, mais nous aurons une façon plus longue de faire les choses. Enlevons ça. Une autre chose que nous pouvons faire est d' utiliser la syntaxe de repos JavaScript. La syntaxe reste permet d'accéder à une ou plusieurs valeurs, puis à saisir toutes les autres valeurs jusqu'à la fin du tableau. Par exemple, si nous voulions simplement configurer une variable, encore une fois, nous avons besoin des crochets. Si nous voulions simplement accéder à notre premier message et le conserver avec un nom de variable distinct comme celui-ci. Ensuite, nous pouvons saisir toutes les autres valeurs restantes, nous pouvons le faire en séparant cela par une virgule à l'aide des trois points, puis en stockant le reste des valeurs dans une variable distincte, définissez cela comme égal à tous les tableaux de messages. Confirmons cela à l'intérieur de notre journal de console. post1 est celui là. On y va. C'est notre premier article de blog juste ici. Ensuite, à l'intérieur de cette autre variable, nous devrions avoir le contenu des valeurs restantes, qui sont les articles de blogue 2 et 3. Modifications apportées à notre variable des autres, rafraîchir. Il s'agit d'un nouveau tableau avec nos deux valeurs restantes. Cette destruction est vraiment utile pour créer des raccourcis, pour stocker différentes variables. destruction peut également être utilisée avec des objets, et nous aborderons cela plus tard dans le cours. Une chose à vérifier est que lors de l'utilisation du repos, nous ajoutons également cette valeur comme dernière valeur de variable. Nous ne pouvions pas, par exemple, placer cela au tout début, car comme son nom l'indique, cela saisira toutes les autres valeurs restantes. Si nous le faisons, puis que nous sauvegardons et actualisons, une erreur s'affiche à l'intérieur de la console. Cela se produit car, comme son nom l'indique, il est utilisé pour saisir le reste des valeurs restantes. Par conséquent, cela n'a aucun sens d'avoir cela au début. destruction peut également être utilisée sur des objets, et nous y examinerons de près le repos pendant le reste du parcours. 26. Valeurs uniques avec jeu: Rendez-vous dans le dossier de cette leçon, qui est Valeurs uniques avec ensemble. À l'intérieur de la section Script, nous avons un tableau de catégories comportant plusieurs valeurs à l'intérieur. Si vous regardez de près, nous pouvons constater que cette valeur des sacs a été dupliquée au début et à la fin. Comme vous pouvez le voir ici, les tableaux accepteront toutes les valeurs que vous y ajouterez, même s'il s'agit de doublons. Mais si nous voulions éviter cela et simplement avoir des valeurs uniques stockées à l'intérieur, nous pourrions plutôt utiliser ce qu'on appelle set. Même si l'ensemble ressemble un peu à un tableau, c'est plutôt ce qu'on appelle une collection. Tout comme les tableaux, vous pouvez stocker les types primitifs et les types d'objets. Nous avons deux options : nous pourrions soit créer un nouvel ensemble à partir de zéro, soit si nous voulions convertir ce tableau en ensemble. Il suffit de créer une nouvelle variable et celle-ci s'appellera des catégories uniques. Définissez cette valeur comme un nouvel ensemble. Nous avons vu ce nouveau mot clé dans le passé lors de la création nouveaux tableaux, ce qui va créer un nouveau jeu vide. Nous pouvons passer dans nos catégories, qui est le tableau juste au-dessus. Ci-dessous, un journal de console est créé. Déconnectez la valeur des catégories uniques et le navigateur verra également ce qui est affiché à l'intérieur de la console. Maintenant, j'ai un ensemble de six entrées et après une inspection plus étroite, nous pouvons voir que la valeur des sacs n'est incluse qu'une seule fois. Il a supprimé tous les doublons puisque notre tableau d'origine avait la valeur de ces sacs en deux fois et sept valeurs différentes. Ce que nous avons fait ici, c'est que nous avons créé un nouvel ensemble qui est cloné le tableau des catégories et dépouillé de toutes les valeurs dupliquées. Set contient également des méthodes intégrées que nous pouvons utiliser pour modifier cette collection. Ajoutez ensuite une nouvelle valeur. Nous avons la méthode d'ajout que nous pouvons utiliser directement sur notre variable. Accédez aux catégories uniques, ajoutez uniquement la méthode et à l'intérieur, nous pouvons ajouter une nouvelle valeur, allons-y pour les jeans. Enregistrez et rafraîchissez. Maintenant, notre ensemble a sept valeurs avec le jean poussé jusqu'au bout de cette collection. Les catégories dupliquées ne seront pas acceptées même si vous utilisez cette méthode. Si nous optons pour des chapeaux, que vous avez déjà, rafraîchissez-le, et nous revenons maintenant à six valeurs différentes parce que les chapeaux ont été dupliqués. Si nous voulons également supprimer une seule valeur, nous avons accès à la méthode delete. Nous modifions cette situation et nous pouvons ensuite supprimer n'importe laquelle de nos valeurs existantes. Passons en revue les chapeaux, rafraîchissons. Cela est maintenant réduit, notre ensemble étant fixé à cinq valeurs, les chapeaux étant maintenant supprimés. Cela supprime une seule valeur, mais si nous voulions supprimer toutes les valeurs de notre collection, nous avons accès à la méthode claire. Puisque nous supprimons toutes les valeurs, nous n'avons pas besoin de passer quoi que ce soit à l'intérieur. Rafraîchissez et cela effacera tout le contenu de notre ensemble. Nous pouvons également vérifier si une valeur particulière est incluse dans un ensemble à l'aide de la méthode has. Puisque cela renvoie vrai ou faux, il doit également être stocké à l'intérieur d'une variable. Changeons cela pour être fait, nous pouvons vérifier si cela a une valeur de chaussures. Si nous devions simplement sauvegarder cela et actualiser, nous récupérons tout de même l'ensemble complet. Mais au lieu de cela, si nous accédons à la valeur de retour, installez-la à l'intérieur d'une constante, disons HasShoes, c'est égal à la valeur de retour puis nous pouvons enregistrer cela sur la console. C'est vrai, changeons cela pour qu'il s'agisse d'autre chose. Comme on s'y attendait, c'est désormais faux. Tout comme lorsque nous utilisons des tableaux, nous avons accès à une propriété foncière. Découvrez le nombre de valeurs contenues dans le tableau. Lorsque vous utilisez des sets, nous avons accès à quelque chose de très similaire, mais cette fois, il s'agit de taille. Lorsque vous déplacez cette ligne et restaurez les catégories uniques, accédez à .size, enregistrez et actualisez, et la valeur renvoyée est six. L'ensemble est vraiment utile si nous ne voulons pas avoir de valeurs dupliquées à l'intérieur d'un tableau. Si nous le voulions, nous pourrions également le faire avec un tableau et également enchaîner la méthode de filtre pour supprimer les doublons. Mais bien sûr, il est beaucoup plus simple d' utiliser cet ensemble que d'écrire tout le code supplémentaire qui devrait être requis si nous devions le stocker à l'intérieur d'un tableau. 27. Tableaux à deux dimensions: Comme nous le savons, les tableaux réguliers stockent les valeurs dans l'ordre de gauche à droite, commençant par la position d'index 0. Mais nous pouvons également utiliser des tableaux manière bidimensionnelle pour créer une structure semblable à une grille, comme vous pouvez le voir ici dans la diapositive. Ça semble complexe, non ? Eh bien, ce n'est pas aussi complexe que cela puisse paraître. Ou bien, nous avons vraiment besoin de créer un nouveau tableau pour chacune de ces lignes. La première ligne est un tableau, la deuxième ligne est un tableau, etc. Ensuite, nous plaçons tous ces éléments à l'intérieur d'un tableau externe, ce qui ressemble à un wrapper qui crée un tableau de tableaux. L'accès à ces valeurs est également assez simple. Nous avons juste besoin de deux numéros d'index. Tout d'abord, nous sélectionnons la ligne, puis nous sélectionnons la valeur de cette ligne particulière. En utilisant ces deux numéros, nous pouvons sélectionner n'importe lequel de ces articles dont nous avons besoin. En regardant cet exemple juste ici à droite, nous pouvons voir que c'est à la position 0, puis à 1. Il commence par 0 qui accède la première ligne ou au premier tableau puis de gauche à droite, position d' index 1 correspond à la deuxième valeur. En utilisant encore le deuxième exemple, nous faisons exactement la même chose, mais cette fois, nous descendrons à notre quatrième ligne, qui est le numéro d'index 3, puis à notre dernier élément de cette ligne, qui est le numéro d'index 4. Malheureusement, JavaScript ne dispose pas d'un moyen intégré de créer des tableaux bidimensionnels. C'est la raison pour laquelle nous devons les créer en tant que tableaux imbriqués. Essayons cela dans notre éditeur, dirigez-vous vers ce fichier qui est les tableaux bidimensionnels ou je peux le faire descendre dans le script. Ouvrez-le et créons notre premier tableau appelé grille. Celui-ci va être notre emballage. Nous pouvons les placer sur deux lignes distinctes pour que cela soit plus clair. Ensuite, à l'intérieur, nous allons ajouter trois rangées. La première ligne, comme nous venons de le voir, n' est qu'un tableau simple. Ajoutons quelques nombres, 11, 12, 13 et comme pour toutes les valeurs de tableau, nous les séparons par une virgule. ligne 2 est un nouveau tableau avec 21, 22, 23 et enfin notre troisième ligne sera 31, 32 et 33. Consignons cela sur la console et voyons ce que nous récupérons. Placez dans une variable de grille, actualisez et nous pouvons voir que nous avons un tableau externe, qui contient ensuite trois tableaux distincts et chacun contient trois valeurs. Nous pouvons le voir plus clairement si nous étendons notre première rangée, notre deuxième rangée et notre troisième rangée. Nous pourrions également le formater dans un tableau avec la console.table. Cela le rend un peu plus clair. Voyons ce qui se passe. Nous pouvons voir que nous avons le numéro d'index, nous sélectionnons d' abord la ligne, puis nous sélectionnons la position d'index de chaque ligne. Celui-ci serait l'index 0 1, et comme nous le voyons dans les diapositives, nous pouvons y accéder avec deux crochets. Pour cela, nous allons revenir au journal de la console. Je vais mettre la grille, ouvrir le premier jeu de crochets, qui est la rangée. Pour celle-ci, passons à notre troisième rangée, qui est le numéro d'index 2 puis juste après nos deuxièmes crochets, passons à la ligne du milieu qui est 32. Il s'agit du numéro d'index 1. Enregistrez et rafraîchissez. ensuite, notre valeur de 32, qui est juste ici. La création d'un tableau bidimensionnel n'est pas vraiment plus difficile que la création d'un tableau unique. Il suffit plutôt de réfléchir à la position des coordonnées qui accèdent à chacune des valeurs de notre grille. 28. L'objet global et les fonctions intégrées: À l'intérieur de ces fichiers de démarrage, nous avons maintenant cette section de nouvelles fonctions, qui est le numéro 3, puis nous dirigeons vers la première leçon, qui est l'objet global. Ouvrez la page Index. Assurez-vous qu'il est également ouvert à l'intérieur du navigateur. Entre la section script, nous avons un exemple similaire à ce que nous avons regardé par le passé. Nous avons deux tableaux différents, nous avons nos ingrédients pour le pain et les brownies, puis cette fonction juste en dessous. Cette fonction prendra en compte la recette ainsi que les ingrédients, et cela vérifiera si cet ingrédient particulier est inclus dans cette recette. Il renvoie ensuite une valeur vraie ou fausse, selon que l'ingrédient est inclus. Comme mentionné précédemment, il s'agit d'une déclaration de fonction dans un journal de console. Juste en dessous, nous pouvons alors appeler cette fonction par son nom, qui est CheckAllergies, analyser la recette, comme le pain, puis vérifier un ingrédient, tel que le sel, enregistrer et rafraîchir. Nous obtenons maintenant la valeur true puisque cet ingrédient est inclus dans ce tableau. Nous savons que nous pouvons appeler cette fonction par son nom car, bien, nous l'avons créée juste au-dessus dans le même fichier. Eh bien, qu'en est-il si nous appelons cette fonction à partir d'un autre emplacement, disons un autre fichier JavaScript ? Vous pensez que ça marcherait ? Eh bien, jetons un coup d'œil. Nous allons maintenant créer un nouveau fichier JavaScript dans ce dossier de leçon 1. Cliquez donc dessus, puis créez un nouveau fichier, puis cela va s'appeler le script avec l' extension the.js pour déclarer qu'il s'agit d'un fichier JavaScript. Assurez-vous qu'il se trouve toujours à l'intérieur de ce dossier à côté de notre page Index, puis fermez la barre latérale vers le bas pour nous donner plus d'espace. À l'intérieur de notre nouveau fichier script.js, nous allons, encore une fois, créer un journal de console. Nous ferons exactement la même chose. Nous appellerons notre fonction, qui était CheckAllergies, puis analyserons deux arguments. Cette fois-ci, on va chercher les brownies, et on peut vérifier si les brownies contiennent du sucre. Comme indiqué précédemment, nous devons également lier ce script à notre page Index, car il s'agit d'un fichier externe. Par conséquent, nous créons notre script à l'intérieur de la page Index, sorte qu'il est automatiquement reconnu. Mais comme nous avons maintenant un nouveau fichier de script, nous pouvons créer une nouvelle balise de script, puis nous devons le placer dans la source, qui est l'emplacement de notre nouveau fichier. Puisque ce nouveau fichier se trouve à côté de notre page Index, il suffit d'ajouter son nom, qui était script.js. Tellement efficacement, c'est la même chose que juste au-dessus. Tout ce que nous faisons ici, c'est extraire le code d'un fichier externe, plutôt que de l'ajouter entre ces balises de script. Maintenant, notre journal de console est toujours en place juste ici, puis nous avons également un journal de console appelé à partir de ce fichier séparé. Passons dans le navigateur et voyons lequel fonctionnera. Rafraîchir Nous voyons maintenant nos deux journaux de console. Nous voyons à droite que l'un d'entre eux provient de la page Index et que l'un d'eux provient de notre script.js, donc les deux fonctionnent et ils proviennent tous deux de deux emplacements de fichiers distincts. Eh bien, cela nous amène maintenant à la question, si nous allons dans notre fichier de script. Ici, nous réalisons un journal de console, et nous accédons à une fonction CheckAllergies, qui n'existe pas dans ce fichier. Pourquoi cela fonctionne-t-il ? Eh bien, lorsque nous créons une fonction, comme nous l'avons fait ici, elle devient partie intégrante de ce qu'on appelle l'objet global. Nous avons beaucoup parlé d'objets et de types d'objets, mais l'objet global est le plus important. L'objet global est l'objet principal à partir duquel propriétés et fonctions disponibles dans le monde entier les propriétés et fonctions disponibles dans le monde entier sont toutes accessibles. Cela peut sembler complexe, mais vous pouvez le considérer comme l'objet principal créé, puis nous pouvons accéder à des parties de celui-ci depuis n'importe où dans notre code. JavaScript fonctionne dans le navigateur et nous pouvons accéder à cet objet global à l'aide de la fenêtre. Vous avez peut-être également entendu parler de quelque chose appelé Node.js, qui est un moyen d'exécuter JavaScript sur le serveur. Comme Node.js est en cours d'exécution sur le serveur plutôt que dans le navigateur, il n'a pas accès à cette fenêtre du navigateur. Au lieu de cela, nous accédons à l'objet global à l'aide du mot-clé global. Mais vous n'avez pas à vous inquiéter si vous n'avez pas entendu parler de Node.js. Vous voyez donc cette fenêtre. Revenons à la console dans le navigateur. Ce que nous allons faire, c'est de taper la fenêtre de mot, cliquer sur « Entrée », puis de voir toutes ces informations, qui nous sont retournées ci-dessous. Comme Window est un objet global, il contient toutes ces propriétés, que nous pouvons voir ici. Certaines sont des fonctions que nous pouvons utiliser. Il existe également des propriétés sur les objets à l'intérieur. Il s'agit d'une liste de choses auxquelles nous avons accès dans le monde entier. Certains d'entre eux que nous avons déjà vus. Par exemple, je vais appuyer sur « Commande » et « F » pour trouver une chose particulière à l'intérieur d'ici. Si vous utilisez Windows, il est plus que probable qu'il s'agisse de Control et de F2. Tout d'abord, si nous recherchons la console, nous pouvons voir cela surligné à l'intérieur d'ici. Nous pouvons ouvrir cela. Il s'agit d'un objet console que nous avons déjà examiné. Si nous ouvrons cela et que nous jetons un coup d'œil juste en dessous, nous pouvons voir que nous avons accès à la fonction journal ainsi qu'à la fonction table, que nous avons utilisée par le passé. C'est pourquoi nous y avons accès dans nos multiples fichiers, car ils dans nos multiples fichiers, sont placés sur l'objet global. Si nous le voulions, nous pouvons également faire référence à l'objet window lorsque vous appelez ces propriétés. Par exemple, nous pourrions écrire le journal window.console, et cela fonctionne exactement de la même manière , donc window.console log. Enregistrez cela et rafraîchissez-le. Nos journaux de console fonctionneront toujours exactement de la même manière. Supprimons cela et, une fois de plus, nous allons entrer notre objet fenêtre à l'intérieur de la console. Si j'étends cela, nous pouvons également voir notre fonction personnalisée ici, à savoir CheckAllergies. C'est ici parce que dès que nous avons créé notre fonction CheckAllergies à l'intérieur de notre code, elle a ensuite été ajoutée à cet objet global, et c'est pourquoi nous pouvons y accéder à l'intérieur d'un autre fichier. De plus, toutes les variables que nous créons à l'aide du mot-clé var sont également placées sur l'objet global, mais aucune variable que nous créons avec les mots-clés const ou let. Mais plus à ce sujet plus tard. Bien sûr, il s'agit d'une fonction que nous avons créée nous-mêmes, mais JavaScript possède également nombreuses fonctions que nous n'avons pas besoin de créer. Ils sont automatiquement intégrés dans la langue. Ces fonctions peuvent être appelées fonctions intégrées ou globales, car elles peuvent être appelées n'importe où dans notre programme à partir de cet objet global. Un exemple de cela, si nous passons à la recherche, est une fonction appelée ParseInt. Nous pouvons voir cela inclus ici, et nous pouvons voir par ce f, que c'est une fonction. Nous pouvons l'utiliser si nous passons au code. Juste avant de faire cela, nous supprimerons ce fichier script.js, supprimerons le lien de script et nous pourrons également supprimer ce fichier d'ici. Revenons maintenant à notre page d'index, nous allons jeter un coup d'œil à cette fonction ParseInt. La façon dont cette fonction fonctionne est qu'elle prendra une chaîne, puis elle convertira cela en entier, est-à-dire un nombre entier, donc pour voir cela, allez dans notre journal de console, et nous pouvons appeler ParseInt. Il s'agit également d'un cas de chameau, donc il y a un majuscule I. Ouvrez les supports de fonction. Ensuite, sous forme de chaîne, nous ajouterons le nombre de 10. Enregistrez ceci, et revenez dans le navigateur, actualisez et nous voyons maintenant le nombre de 10. Plutôt que de me croire sur parole qu'il s' agit d'un nombre, plutôt que d'une chaîne, ce que nous pouvons faire, c'est que nous pouvons découper cela avec Command ou Control-X, installer ceci à l'intérieur d'une variable appelée Int, collez ça dans. Ensuite, cette fois-ci, nous ferons un journal de console pour le type de notre Int pour voir quel type de données nous détenons. Rafraîchissez, et nous pouvons maintenant voir qu'il a été converti d'une chaîne en nombre. Puisque ParseInt convertit une chaîne en entier, c' est-à-dire un nombre entier, il n'inclura aucun nombre après une décimale. Donc, si c'était, disons, 10.09 et que je retire le typeof, cela sera alors converti en arrondi ou en nombre entier. Nous pouvons également inverser cela et faire le contraire avec une fonction de chaîne, donc cette fois nous appellerons cela un nombre, et au lieu d'avoir une chaîne comme celle-ci, nous allons placer un nombre, et nous allons convertit le nombre cette fois en chaîne à l'aide de la fonction chaîne. Nous allons, encore une fois, consigner notre variable de nombre. Nous verrons la valeur à l'intérieur de la console ou cinq. Mais encore une fois, nous pouvons effectuer une vérification de type pour vérifier que cela a été converti en chaîne. On y va. Comme vous pouvez le constater, JavaScript est vraiment flexible. Nous pouvons soit créer nos propres fonctions , soit accéder à certains supports intégrés fournis avec la langue. Nous pouvons ensuite accéder à ces supports intégrés sur l'objet global. Comme nous l'avons vu, lorsque nous avons accédé à l'objet Window auparavant, il y a aussi beaucoup d'autres fonctions disponibles. Je ne vais pas tous les parcourir car il y en a beaucoup et il y en a aussi d'assez spécialistes. Mais nous utiliserons beaucoup plus de ces fonctions, propriétés et objets disponibles dans le monde entier au fur et à mesure que nous parcourrons les autres sections à venir. 29. Expressions de fonctions: présent, nous avons créé des fonctions à l'aide d'une syntaxe appelée déclaration de fonction. Il existe également une façon légèrement modifiée d'écrire des fonctions, sont appelées expressions de fonction. Passez dans les fichiers de démarrage de cette leçon, qui se trouve à l'intérieur de la section des fonctions, puis dans la leçon au numéro 2. Vous pouvez voir à l'intérieur d'ici, si nous passons à la section script, nous avons un exemple de déclaration de fonction. C'est le type de fonction que nous avons examiné précédemment, et cela ressemble à ceci. Nous utilisons le mot-clé de fonction, nous créons un nom de fonction, nous transmettons tous les paramètres optionnels à l'intérieur d'ici, puis nous écrirons notre code à l'intérieur du corps de la fonction. L'alternative, qui est une expression de fonction que nous allons maintenant examiner, est également assez similaire. La première différence réside dans la façon dont nous nommons la fonction. Pour transformer cette expression en expression de fonction, nous pouvons d'abord supprimer le nom de la fonction. Je vais écrire ceci juste ci-dessous pour que nous puissions voir une comparaison. Nous utiliserons également le mot-clé fonction, mais cette fois, nous sauterons directement entre parenthèses ou entre parenthèses. Nous allons comparer cela à celui ci-dessus, nous transmettrons la recette ainsi que les ingrédients. Ensuite, immédiatement après avoir ajouté notre corps de fonction à l'intérieur des accolades, copions simplement ces deux lignes de code car elles seront exactement les mêmes que cet exemple. Alors, comme nous n'avons pas de nom comme nous l'avons vu juste au-dessus, ce que nous devons faire est de l'attribuer à une variable, créer une constante ou une variable, puis nous pouvons lui donner un nom tel que CheckAllergies et définir cette valeur égale. à notre fonction. Partez maintenant. Notre nom de fonction comme celui-ci est à nouveau facultatif, mais il s'agit désormais d'une fonction anonyme raison de l'absence de nom. Ce que nous voulons faire maintenant pour éviter toute confusion c'est commenter cette fonction originale. Nous pouvons également vérifier s'il fonctionne en effectuant un journal de console. Comme précédemment, nous transmettons le nom de la fonction, mais cette fois, il s'agit du nom de la variable. Nous pouvons toujours utiliser les crochets juste après pour passer des arguments optionnels. La recette, nous pouvons opter pour n'importe quoi comme du pain, passer une vérification des ingrédients comme de la levure, puis passer au navigateur, ouvrir les outils de développement et aller dans la console. Nous voyons que la valeur de true, les changements sont incorrects. Maintenant, cette fonction fonctionne très bien. stockage de ce nom de fonction à l'intérieur de la variable est une différence évidente entre la déclaration de fonction ci-dessus et cette expression de fonction. Une autre différence est ce que l'on appelle le hissage. hissage est quelque chose que nous aborderons plus tard plus en détail. Mais pour l'instant, vous pouvez penser à cela car nous pouvons appeler une fonction avant de la créer réellement. Il se comporte comme si notre fonction était déclarée tout en haut du fichier et qu'elle est toujours disponible à l'utilisation. Ce que nous allons faire, c'est maintenant découper ce journal de la console et le déplacer vers le haut du fichier, ou juste n'importe où au-dessus de la fonction est très bien. Ce que nous faisons ici, c'est que nous appelons notre fonction avant de la créer réellement. Les programmes JavaScript sont lus de haut en bas. Nous appelons peut-être une fonction, avant même de savoir qu' elle existe. Pensez-vous que cela fonctionnera ? Disons ceci et essayons ça à l' intérieur de la console. Actualisez. Nous voyons maintenant une erreur à l'intérieur d'ici. Nous ne pouvons pas accéder à CheckAllergies avant son initialisation. Cela signifie que pour une expression de fonction qui est le nouveau type que nous avons créé ici, nous devons les appeler une fois qu'elles ont été créées dans le programme. Soufflez efficacement. Mais qu'en est-il de cette déclaration de fonction originale ? Eh bien, essayons ça. Si nous ne commentons pas l'original, commentez l'expression. Il s'agit maintenant du même nom de fonction, donc nous l'appelons maintenant avant sa création. Nous pouvons voir ce qui se passe dans le navigateur. Rafraîchissez, nous ne voyons aucun problème. Notre fonction fonctionnera désormais parfaitement bien. Il s'agit d'une autre différence entre les deux styles de fonction. Cette déclaration de fonction peut être appelée n'importe où dans notre programme avant même que nous ne l'ayons réellement créée. La raison est que la déclaration de fonction originale est disponible n'importe où, c' est parce qu'elle est sur la portée globale. Tout comme nous l'avons vu dans la vidéo précédente, nous pouvons y accéder via la fenêtre. Vous voyez ça ? Ce que nous allons faire, c'est que nous voulons que ces deux fonctions soient désormais actives. Il n'y a pas de confusion. Nous allons changer cela pour être CheckAllergies 2. Nous pouvons commenter un journal de console. Cela ne s'exécute pas dans le navigateur. Ces deux fonctions seront maintenant actives. Allons à la console. Ce que nous allons faire à l'intérieur d'ici, nous actualiserons la propreté, puis nous accéderons aux objets de la fenêtre. N'oubliez pas que cela permet d'accéder à toute la fenêtre disponible. Mais si nous le voulons, nous pouvons également utiliser la notation par points. Réduisez cela à une propriété particulière également. Nous allons opter pour notre première fonction qui est CheckAllergies. Cliquez sur « Entrée », et nous voyons ici une référence à notre fonction CheckAllergies. Cependant, si nous le refaisons, accédez à la fenêtre, puis cette fois-ci, nous optons pour CheckAllergies. Numéro 2, appuyez sur « Entrée » et nous récupérons maintenant un résultat de non défini. Cela permet de sauvegarder ce que nous avons examiné précédemment dans les exemples, la fonction originale, qui est vérifiée, est désormais disponible sur l'objet global, ce qui signifie que nous pouvons y accéder dans n'importe quelle partie de notre code. Cependant, CheckAllergies 2, qui était la deuxième, qui est l'expression de la fonction. Cela n'est pas disponible sur le plan mondial. C'est pourquoi nous devons l'appeler après avoir créé la fonction. Il peut s'agir d'une considération importante car nous ne voulons pas toujours produire une portée mondiale, à moins d'en avoir besoin. Un exemple de cela peut être une fonction de rappel. Un rappel est une fonction plus deux, une autre fonction, comme nous l'avons vu plus tôt avec nos méthodes de tableau. Jetons un coup d'œil à un autre exemple. Je vais commenter ces deux fonctions ici. Ensuite, je vais créer une nouvelle fonction. Cette fonction va simplement être appelée à Toupper. Cela va convertir toute chaîne transmise en majuscules. Nous devons passer une chaîne, et j'appellerai cette valeur. Ensuite, cela va renvoyer la nouvelle chaîne. Ce que nous devons faire ici, c'est d'accéder à la valeur. Ensuite, nous pouvons appeler une méthode de chaîne appelée ToupperCase. Cela transformera une chaîne minuscule en majuscules. Cela sera renvoyé à partir de cette fonction. Ensuite, pour vérifier si cela fonctionne, nous allons faire un journal de console, appeler notre fonction, puis nous pouvons passer n'importe quelle chaîne à l'intérieur d'ici que nous voulons convertir. Essayons ça avec la ficelle de farine. Rafraîchissez le navigateur et celui-ci est en cours de transformation en majuscules. Rien de ce que nous n'avons jamais vu auparavant. Nous venons de créer une fonction pour transformer le texte. Nous pouvons également voir à l'intérieur de l'objet fenêtre que nous pouvons accéder à notre fonction à l'intérieur d'ici. Puisque cela a accès à notre fonction, nous savons, comme nous le voyons ici, que ce style de fonction est disponible sur l'objet global. Ce style peut convenir parfaitement si nous voulions l'utiliser dans plusieurs parties de notre application. Nous les référerons à quelque chose comme les méthodes de tableau que nous avons mentionnées précédemment. Nous n'avons pas toujours besoin de rendre cette fonction disponible dans le monde entier. Par exemple, si nous appelons l'un des tableaux que nous avons en haut, tels que des pains, et que nous pouvons appeler la carte pour parcourir chacune de ces valeurs. Ensuite, sur chacune de ces valeurs, nous pouvons appeler la fonction Tupper. Pour voir cela, nous allons le transmettre dans notre journal de console. Enregistrez ceci, et maintenant si nous actualisons le navigateur, nous constatons que chacune de ces valeurs a été transformée en majuscules. Pour un exemple comme celui-ci, nous n'avons pas besoin que cette fonction soit globale et nous voulons simplement la transmettre à une méthode telle que la carte. Cela pourrait maintenant être un bon cas d'utilisation pour transformer cette fonction en expression de fonction. Pour résumer, une déclaration de fonction est construite à l'aide du mot-clé de fonction, d'un nom de fonction avec des paramètres facultatifs et de tout le code à l'intérieur des accolades. L'expression de fonction que nous venons de regarder est stockée dans une variable. Nous pouvons également avoir un nom de fonction facultatif. C'est la différence entre ces deux types de fonctions. Si tout cela est nouveau pour vous, ne vous inquiétez pas. Vous n'avez pas besoin de vous souvenir de tous ces noms différents pour l'instant. Je veux simplement vous faire savoir qu'il existe différents styles de fonctions disponibles, car vous devrez peut-être les utiliser un jour, ou vous pouvez également les voir dans d'autres exemples. 30. Expressions de fonctions immédiatement invoquées: Le titre de la vidéo précédente s' appelait expressions de fonction. Nous allons maintenant examiner quelque chose appelé expressions de fonction immédiatement invoquées. Cela peut sembler complexe, mais ce n'est pas vraiment dommage, il prend simplement notre expression de fonction originale de la vidéo précédente, et nous pouvons exécuter ou invoquer cette fonction immédiatement. Examinons comment cela fonctionne à l'intérieur de ces fichiers de données. Si nous jetons un coup d'œil à l'intérieur de cette section de script, disposez d'une fonction simple qui crée une alerte de navigateur. Je sais qu'il s'agit d'une déclaration de fonction puisqu'elle apparaît seule et qu'elle n'est pas stockée à l'intérieur d'une variable. Mais ce que nous pouvons faire, c'est que nous pouvons supprimer le nom. Encore une fois, c'est facultatif et nous allons l'examiner très prochainement. Supprimez le nom de la fonction. Maintenant que cette fonction n'a pas de noms qui l'appellent réellement, nous pouvons maintenant supprimer l'appel de fonction en bas. Ce manque de nom signifie qu'il s'agit d'une fonction anonyme. Comment appeler une fonction sans nom ? C'est ici que nos expressions de fonction immédiatement invoquées entrent en jeu. Nous devons d'abord commencer par envelopper toute notre fonction à l'intérieur des supports. Si nous découpons cela, ouvrez les crochets, puis collez cela dans, cela contient toute notre fonction entre ces crochets et ensuite il exécute le code. Nous mettons ensuite un nouvel ensemble de crochets juste après, comme nous le ferions avec un appel de fonction régulier. Maintenant, si nous sauvegardons cela et actualisons le navigateur, nous voyons maintenant notre alerte à l'intérieur d'ici. Cela signifie que notre fonction est en cours d'exécution. Nous pouvons voir le code contenu à l'intérieur. Cela signifie simplement que nous avons créé une fonction et exécuté le code de fonction dès que la page est chargée. Si nous n'avions pas entouré ce code de fonction avec ces crochets originaux juste ici, cela provoquerait une erreur car JavaScript penserait qu'il s'agissait d'une fonction normale qui nécessiterait un nom. Mais l'utilisation de ces supports environnants peut également poser problème. Si nous avons un code ci-dessus, par exemple, une variable, cela peut causer un problème. Créez n'importe quelle variable juste au-dessus, je veux opter pour la langue, et définir cela comme égal à JavaScript. Remarquez ici que je n'ajoute pas de point-virgule à la fin, et si nous enregistrons ce fichier, l'éditeur de texte a automatiquement formaté ces photos. Nous pouvons tout de suite constater que ce n'est pas ainsi que notre code était prévu. Allons sur le navigateur et voyons quel effet cela a si nous actualisons. Nous y allons, nous aurons une erreur. JavaScript n'est pas une fonction. Maintenant, si nous revenons à l'éditeur de texte et que nous examinons notre code de plus près, cette erreur est compréhensible. où nous avons exposé, le code est assez similaire à l'expression de la fonction qui a été regardée dans la vidéo précédente, pense-t-on. Nous avons un nom de fonction JavaScript. Ensuite, immédiatement après, nous avons le contenu à l'intérieur de ces supports, comme ceci. Rappelez-vous plus tôt que nous avons examiné comment points-virgules n'ont pas toujours besoin d'être utilisés. Eh bien, c'est l'un de ces cas utilisés lorsque nous devons les ajouter. Si nous ajoutons maintenant un point-virgule après le nom de notre variable, cela va maintenant séparer ce point de notre fonction. Nous testons cela dans le navigateur, actualisons et, encore une fois, notre fonction fonctionne correctement. Vous pouvez également voir certains développeurs ajouter un point-virgule au début de l'expression de la fonction. Cela permet d'éviter tout problème si la ligne ci-dessus ne se termine pas par un point-virgule. Il est également particulièrement utile si nous importons le contenu d'un autre fichier. Nous ne savons pas toujours si ce code va se terminer par un point-virgule ou s'il va provoquer une erreur. C'est ainsi que nous les utilisons. Mais pourquoi devons-nous utiliser une expression de fonction immédiatement invoquée ? Eh bien, à part l'évidence que nous devrons peut-être exécuter du code immédiatement sans appeler la fonction. Comme il s'agit d'une expression de fonction, elle ne pollue pas non plus l'objet global. Comme nous l'avons vu dans la vidéo précédente, lorsque nous créons une expression de fonction, elle n'est pas toujours disponible dans aucune partie de notre fichier. Nous devons d'abord créer la fonction avant de pouvoir l'utiliser réellement. C'est également un autre bon moyen de conserver les variables de l'objet global, si nous n'avons l'intention de les utiliser à l'intérieur d'une fonction particulière. Par exemple, si cette variable devait seulement être utilisée dans cette fonction, nous n'avons pas besoin de l'ajouter à l'objet global, comme nous le faisons actuellement. Nous pouvons le voir si nous modifions notre alerte et que nous enregistrons la valeur de la langue. Ensuite, en dehors de sa fonction, nous pouvons également enregistrer cela sur la console. Enregistrez et rafraîchissez. Nous voyons nos alertes et, dans la console, nous voyons notre journal de console. Cette variable est accessible depuis l'intérieur et l'extérieur de la fonction. Mais comme mentionné précédemment, si nous ne voulions pas que cette variable soit disponible à l'échelle mondiale, nous pourrions plutôt déplacer cette variable vers notre fonction. Cela signifie que cette valeur n'est désormais accessible que depuis l'intérieur de cette fonction. au navigateur, actualisez, nous voyons que l'alerte va s'exécuter et cela a accès à notre variable de langue. Cependant, bien que dans la console lorsque nous essayons de consigner la valeur de la langue, cela n'est plus accessible depuis l'extérieur de la fonction. Cela signifie que toutes les variables que vous créez à l'intérieur de la fonction sont également isolées. Cela est vraiment utile si nous voulons limiter l'accès d'un élément de données uniquement à partir d'une fonction particulière. Mais même si cette variable n'est disponible qu' à l'intérieur de notre fonction, nous pouvons toujours renvoyer une valeur. Au lieu de l'alerte, nous pouvons retourner la langue et installer la valeur renvoyée de dysfonctionnement à l'intérieur d'une variable. Connectez-vous à la console, enregistrez-le et actualisez-le dans la console. Nous récupérons maintenant la valeur renvoyée de notre variable. 31. Anonyme ou nommé ?: Dans les dernières vidéos, nous avons parlé un peu des expressions de fonctions. Lorsque nous les avons créés, nous avons laissé de côté le nom de la fonction et par conséquent, nous qualifions ces fonctions d'anonymes. Mais n'est fourni aucun nom de fonction la meilleure approche pour créer des fonctions. Eh bien, créer une fonction sans nom est certainement plus courte, implique d'écrire moins de code. Nous pouvons également exécuter ces fonctions quand nous le voulons. Pourquoi ajoutons-nous même un nom ? Jetons un coup d'œil dans les fichiers de démarrage qui sont inférieurs au numéro 4 pour les noms anonymes ou dans la section des fonctions. Si nous faisons défiler vers le bas jusqu'à la section Script, nous avons deux tableaux différents. Nous avons également un exemple de fonction nommée qui est une déclaration de fonction régulière que nous avons examinée. Cela implique la création d'une fonction, puis nous l'appelons quand nous le voulons par ce nom. Ensuite, faites sauter un exemple anonyme, et cet exemple est appelé anonyme. Puisque nous ne transmettons pas directement la fonction et le nom. Au lieu de cela, nous avons créé sans nom comme celui-ci, puis nous le stockons à l'intérieur d'une variable. Nous avons aussi quelques exemples , nous y reviendrons plus tard. Mais ce que nous allons faire, c'est ouvrir ce fichier à l'intérieur de la console, cliquer avec le bouton droit, Inspecter, puis dans l'onglet Console. Lorsque nous avons accès à une fonction, les fonctions possèdent une propriété appelée nom, et il s'agit d'une propriété en lecture seule. Nous pouvons utiliser cela en accédant tout d'abord au nom de la fonction qui est le nombre d'ingrédients. Ensuite, nous pourrons accéder au nom. Appuyez sur Entrée c'est assez simple et sans surprise, nous demandons le nom et nous récupérons le nom de la fonction. Mais qu'en est-il plutôt, si nous supprimons tout cela et que nous appelons notre deuxième fonction qui a été vérifiée les pannes. Comme nous le savons, il ne s'agit pas directement d'un nom de fonction car nous ne l'avons pas transmis à l'intérieur d'ici. Mais tout ce que nous faisons ici, c'est stocker cela à l'intérieur d'une variable. Que pensez-vous que nous reviendrons ? Essayons ça, apportons ça. Ensuite, elle est également appelée propriété name. Nous pouvons également voir dans cet exemple, nous récupérons le nom de chèque Allergies. Cela peut aller à l'encontre de ce que vous attendez car il n'a pas de nom de fonction. La raison pour laquelle cela se produit est dû à un nom de fonction déduit. Puisque la fonction est stockée à l'intérieur de cette variable, JavaScript a essentiellement deviné qu' il s'agit d'un nom que vous souhaitez utiliser pour notre fonction. Lorsque nous commençons à comprendre les fonctions et la façon dont nous pouvons y faire référence peut prendre de nombreuses formes. Ce nom inféré n'est pas toujours fiable dans certaines situations. Il y a certains moments ou cas conjonctureux où le nom n'est pas déduit. Vous pouvez également ajouter un nom spécifique à la fonction pour déboguer des zones situées à l'intérieur de la console de la série. Mais créons une erreur à l'intérieur de cette fonction. Créez une erreur ici avec des inclusions, puis sautez ceci, créez un journal de console qui a enregistré la valeur des allergies de vérification. Ensuite, nous devons également transmettre la recette et les ingrédients. Tout comme dans les exemples précédents, cela va se référer à nos deux tableaux en haut. Nous pouvons donc accéder à n'importe lequel de ces éléments. Si nous le disons maintenant et que nous voyons ce qui se passe dans la console, nous pouvons voir directement si les outils de développement Chrome ont détecté une erreur et prennent des notes directement dans l'onglet Sources. Il y a beaucoup d'informations et nous pouvons l'ouvrir pour l'élargir. Il indique de nombreuses parties différentes de notre code. Mais l'une des choses à surveiller est ce qu' on appelle cette pile d'appels. Cette pile d'appels est un moyen pour le navigateur qui exécute le JavaScript de garder une trace des fonctions qui avaient été appelées et qu'elles le commandent. Il montre ici que la fonction de vérification des allergies permet de savoir exactement où se trouve le problème. Mais lorsque nous y réfléchissons légèrement différemment, vérifier les allergies que nous avons ici visait à stocker la valeur de rendement de ce milliard. Check Allergies n'a jamais été destiné à être un nom de fonction. Il ne visait qu'à être disponible qui contient une valeur vraie ou fausse. Cela peut commencer à confondre les choses surtout dans un projet de plus grande envergure. Ce que nous pouvons faire à la place, nous pouvons créer cette constante pour devenir un nom plus descriptif. Nous dirons qu'il y a de mauvais ingrédients. Ensuite, il s'agira toujours de la valeur vraie ou fausse et, au lieu de cela, nous pouvons transmettre un nom de fonction comme d'habitude. Cela répartit nos deux sections. Nous avons maintenant une référence de fonction qui indiquera toujours tout ce code ici. Ensuite, nous avons une valeur vraie ou fausse qui était initialement destinée à être notre variable. Nous avons maintenant modifié le nom de cette variable. Nous devons également le copier et modifier le nom à l'intérieur de notre journal de la console. Si nous l'enregistrons, puis que nous les actualisons, nous avons de nouveau directement accédé à l'onglet Sources car nous avons toujours cette erreur. Mais maintenant, si nous examinons la pile d'appels, cochez Allergies pointe maintenant vers le nom de la fonction plutôt que la variable. ne s'agit pas d'une règle difficile et rapide. Nous n'avons pas besoin d'ajouter un nom de fonction comme celui-ci. Si vous pouvez le faire si vous souhaitez une séparation claire entre la référence de la fonction et notre nom de variable. Défilons maintenant notre deuxième exemple à l'intérieur des commentaires. Si nous décommentons toute cette section, c'est le même exemple que celui utilisé dans la vidéo précédente pour examiner les méthodes de tableau. Nous avons tous les blogposts, qui sont des objets recontenus. Ensuite, nous appelons cela deux méthodes distinctes. Nous avons la fonction de carte, qui va parcourir toutes les publications, transformer le titre en majuscules, puis renvoyer la nouvelle valeur, puis renvoyer la nouvelle valeur, enchaîner sur la fonction d'index définie de fin, qui est va renvoyer un numéro d'index si une correspondance pour ce titre majuscule est trouvée. Il se passe pas mal à l'intérieur ici. Cette section contient deux fonctions anonymes. S'il y avait une erreur à l'intérieur d' ici, le débogage peut commencer, devenir un peu difficile, surtout si cette section était encore plus longue. Juste avant de vérifier cela, je vais commenter le journal de la console ci-dessus et supprimer également l'erreur. Ceci, nous avons maintenant notre journal de console unique, qui est obtenir index, rafraîchir. Tout comme pour tous, on a directement accédé à l'onglet Sources car nous avons un problème. Nous pouvons voir dans la pile d'appels que le nom de la fonction est anonyme. C'est là que se situe le problème. Étant donné que ces deux noms de fonctions sont anonymes, nous ne savons pas exactement laquelle de ces fonctions causerait le problème. Bien sûr, si nous regardons autour de toutes les autres sections, nous pouvons obtenir des indices supplémentaires sur l'endroit où l'erreur réside dans les pointeurs et pas toujours évidentes. Il serait bon de voir immédiatement quelle fonction est à l'origine du problème. Le problème réside ici dans la première fonction à l'intérieur de la carte. Le problème est que les majuscules doivent être un U. Si vous pointez exactement vers cette fonction à l'intérieur des outils de développement. Nous pouvons ajouter un nom à cette fonction. Tout d'abord, nous appelons cela transformer en haut. Ensuite, un nom descriptif pour cette fonction anonyme. Allons chercher Index à partir du titre. Maintenant, si nous revenons aux outils de développement, nous voyons une erreur. Mais maintenant, nous pouvons tout de suite voir que nous avons une idée de fonction qui cause le problème. Nous pouvons réduire cela à cette section ici. C'est comme l'étiquette ARN de notre fonction pour aider à l'identifier. Corrigeons ce problème, change la majuscule U. Si vous ne voyez aucune erreur à l'intérieur de la console et que nous voyons plutôt cette valeur renvoyée de deux, qui est le numéro d'index correspondant à cette section Juste ici. Comme pour beaucoup de choses, le choix des fonctions de dénomination les laisse anonymes est entièrement votre choix. Souvent, ce n'est pas un problème de laisser le nom de côté et de réduire légèrement la quantité de code que nous écrivons. Mais si vous préférez être plus descriptif et que vous souhaitez des pointeurs supplémentaires une fois encore plus approfondis, vous pouvez les ajouter à vos fonctions pour être plus descriptifs. 32. Une fonction ou une méthode ?: JavaScript a beaucoup de terminologie qui peut prendre un certain temps pour s'habituer, comme les expressions de fonction et les déclarations de fonctions, que nous avons examinées dans cette section. Quelque chose d'autre que nous utilisons beaucoup, c'est les mots de fonction et aussi de méthode. Ils peuvent sembler les mêmes et ils le sont à peu près, mais il y a une différence majeure. Au-dessus des fichiers de démarrage, qui sont une fonction ou une méthode. Plongez dans la section Script. Tout cela est familier dans les sections précédentes, nous avons nos deux tableaux. Nous avons maintenant notre fonction de vérifier si un ingrédient est inclus dans l'un de ces ingrédients. Eh bien, créons également une nouvelle fonction et celle-ci va simplement vérifier le nombre d'ingrédients d'une recette particulière. Nous devrons également passer une recette. Ensuite, à l'intérieur, tout ce que nous allons faire est de renvoyer une valeur qui correspond à la longueur de la recette. Nous avons déjà examiné cette propriété de longueur, cela nous indiquera combien d'éléments sont stockés à l'intérieur d'un tableau. Nous pouvons tester ce coup avec un journal de console, passant le nombre d'ingrédients, puis n'importe lequel de nos tableaux. Enregistrez cela et ouvrez une préconsole. Nous pouvons maintenant constater que le tableau de pain comporte quatre valeurs différentes. Mais supposons que nous créions encore plus de fonctions liées à un même tableau. Vous aurez peut-être beaucoup plus de fonctions pour effectuer de nombreuses vérifications différentes sur nos recettes. Si toutes ces fonctions étaient liées, il serait bon de regrouper toutes ces fonctions ensemble. Comment pensez-vous que nous regroupons de nombreuses valeurs connexes ? Eh bien, pour cela, nous utilisons un objet. Nous avons regardé des objets jusqu'à présent. Un objet que nous avons regardé a été quelque chose comme ça, nous avons eu un utilisateur, déplace ce qui équivaut à nos accolades bouclées. Mais je passe les propriétés qui sont une combinaison de clés et valeurs et chacune est séparée par une virgule. Les objets ne sont pas uniquement utilisés pour stocker des valeurs primitives simples comme nos chaînes ici. Ils peuvent également stocker sur des types d'objets. Nous pouvons placer au-dessus des objets, nous pouvons les placer dans des tableaux et aussi dans nos fonctions. Puisque toutes ces recettes sont liées à nos recettes, nous allons nommer cet objet, « checkrecipes ». Puisque nous avons actuellement deux fonctions, nous allons y placer deux propriétés. Le premier sera le contrôle des allergies, et le second sera le nombre d'ingrédients. Nous devons également transmettre une valeur à ces deux propriétés. De cela, nous pouvons également couper et coller nos fonctions, vérifier les allergies comme juste après la première ligne. Comme pour toutes les autres propriétés, nous devons ensuite les séparer par une virgule. Il en va de même pour notre deuxième fonction, qui est le nombre d'ingrédients. Mettez-le par endroits juste après notre nom. Une autre chose que nous pouvons faire, c'est de les transformer en anonymes. Puisque nous avons un nom de propriété « checkallergies » et « nombred'ingrédients », nous disposons d'un moyen d'accéder à ces fonctions, sorte que nous puissions supprimer les noms de fonctions sur ces deux fonctions. Maintenant que ces deux fonctions sont placées sur un objet, elles sont désormais considérées comme des méthodes et maintenant n'importe laquelle de ces méthodes peut désormais être appelée à partir du nom de l'objet, qui est « checkrecipes ». En fait, cela devrait être juste un R. majuscule. Donc maintenant, si nous passons à notre base de journaux de console dans le nom de l'objet, qui est « CheckRecipes ». En utilisant la notation par points, nous pouvons ensuite appeler n'importe laquelle de ces propriétés Il suffit donc de vérifier les allergies ou le nombre d'ingrédients et nous pouvons également le voir avec la saisie automatique à l'intérieur de l'éditeur. Prenons un certain nombre d' ingrédients et, comme ci-dessus, nous devons également passer dans cette recette, donc les crochets ou les parenthèses. Allons chercher du pain, puis faites défiler vers le haut, nous supprimerons également ce journal de la console. n'y a aucun problème, c'est juste là. Enregistrez cela et rechargez le navigateur, et nous avons toujours renvoyé la valeur avant. Mais cette fois-ci, elle a été appelée comme méthode à partir de l'objet plutôt que comme la fonction autonome d'origine. C'est en fait que toutes les méthodes fonctionnent dans nos types d'objets. Si nous regardons juste au-dessus, nous avons créé nos deux tableaux ici, et comme nous le savons déjà, les tableaux sont un type d'objet spécial. Puisque ces deux objets sont des objets, c'est pourquoi nous aurons également accès à ces méthodes de tableau. Si nous entrons dans la console et tapez brownies puis points, comme pour tout autre objet, nous pouvons utiliser cette notation par points pour accéder à l'une des propriétés ou aux méthodes disponibles sur cet objet. C'est là que tous ces éléments viennent des coulisses, c'est exactement le même, notre tableau est un objet comme celui-ci. Ensuite, nous accédons à des propriétés ou méthodes individuelles que nous voyons à l'intérieur du navigateur. Revenons à cet objet, même si deux fonctions ou méthodes distinctes ont été transmises à l'intérieur d'ici, il peut également être mélangé à n'importe quel type de données. Nous pouvons également mélanger des primitives telles que le nombre maximum de recettes, et nous pouvons les stocker comme une simple valeur primitive, et cette technique est un excellent moyen de regrouper de nombreuses informations connexes et fonctionnalité. Tout comme avec les méthodes, nous pouvons également accéder au maximum de recettes avec cette notation par points. Puisque celle-ci n'est pas liée à une fonction, nous n'avons pas besoin des crochets, nous l'appellerons simplement par le nom de la propriété. Rafraîchissez et nous voyons maintenant la valeur de 1 000. Nous savons maintenant qu'une fonction placée en tant que propriété sur un objet est considérée comme une méthode en JavaScript. Cependant, nous avons parfois besoin de ces méthodes pour faire référence à d'autres propriétés sur les mêmes objets. Par exemple, nous pouvons également posséder une propriété appelée « CurrentRecipes » et c'est le nombre total de recettes actuellement présentes sur notre site. Ensuite, nous pouvons également vouloir une méthode qui accède à ces deux propriétés et vérifie que nous n'avons pas dépassé le nombre maximum de recettes avant qu'une nouvelle recette puisse être téléchargée. Pour ce faire, ajoutez n'importe quelle propriété, au bas de cet objet indiquera « Recettes Left » et, comme cela semble, nous calculerons le nombre de recettes qu'il nous reste encore sur notre site. C'est relativement simple, il suffit de retourner la valeur de nos recettes maximales. À emporter les recettes de la colonne. Maintenant, nous pouvons essayer cela dans le navigateur. Consignons cela, mais cette fois, nous consignerons la valeur de retour des recettes restantes. Enregistrez et rafraîchissez. Nous avons directement accédé à l'onglet Sources car cela déclenchera alors une erreur. Nous voyons que le maximum de recettes n'est pas défini et dans la pile d'appels, nous pouvons voir que cela a été causé par « Recettes Left ». La raison pour laquelle cela se produit, ce n'est peut-être pas immédiatement évident, mais c'est parce que pour accéder à d'autres propriétés de notre objet, telles que ces deux-là, nous devons également utiliser ce mot-clé donc devant chacun de nos noms de propriété. Maintenant, à l'intérieur du navigateur, si nous nous dirigeons vers la console, tout fonctionne maintenant très bien. Il est évident que vous voudrez peut-être savoir quelle est la valeur de cela. Eh bien, passons à notre objet et examinons cette fonction à partir d'un journal de console et nous pouvons en extraire la valeur , sauvegarder et actualiser. Nous pouvons voir ces points vers notre objet actuel et il contient toutes les propriétés disponibles que nous venons de créer ici. Ce mot-clé peut être une chose très complexe à comprendre, mais dans ce contexte actuel, ce mot-clé pointera vers l'une des propriétés disponibles sur cet objet actuel. Il y aura plus d'informations à ce sujet au fur et à mesure que nous avancerons dans le cours. Ensuite, nous allons examiner la fonction flèche, nous avons brièvement examinée précédemment, et comment elle agit différemment de l'intérieur de cet objet. 33. Fonctions de flèche: Dans ES2015, nous avons reçu une nouvelle méthode facultative de création d'expressions de fonction. Ces fonctions sont appelées fonctions de flèche. Il s'agissait d'un moyen plus court d'écrire des expressions de fonction. Mais ce n'est pas seulement cette syntaxe plus courte qui est différente, elle se comporte également différemment des fonctions normales. En haut des fichiers de démarrage, accédez au fichier de fonctions de flèche et en haut ici, nous avons une expression de fonction régulière. Il s'agit d'une fonction anonyme. Ensuite, nous stockons cela à l'intérieur d'une variable. Ce que nous allons maintenant faire, c'est transformer cela en fonction de flèche. Nous les avons examinés brièvement plus tôt et la façon dont nous devons le faire est de supprimer d'abord la touche de fonction. Ensuite, après les crochets, nous ajoutons notre flèche, et elle se compose du symbole égal et supérieur à. Appelez-le et lancez l'alerte lorsqu'elle est appelée par son nom de variable, suivie des crochets de fonction, enregistrez et actualisez. Maintenant, la fonction va maintenant fonctionner correctement. Au début de cette vidéo, nous avons commencé par dire que fonctions des flèches étaient une syntaxe plus courte, mais cela ne semble pas très différent pour le moment. Cette fonction est toujours classée comme fonction de flèche, mais nous pouvons également la rendre encore plus courte. Si nous n'avons qu'une seule ligne de code imbriquée à l'intérieur, nous pouvons supprimer ces accolades et nous pouvons l'amener sur la même ligne. Rafraîchissez le navigateur et cela fonctionne toujours exactement de la même manière qu'auparavant. Si vous n'avez qu'une seule ligne comme celle-ci, nous n'avons pas non plus besoin d'ajouter le mot-clé retour car cela se fait automatiquement. Si nous avions plusieurs lignes de code, nous devrions renvoyer quelque chose de la fonction et envelopper les multiples lignes à l'intérieur des accolades. Les fonctions de flèche peuvent également prendre en compte paramètres comme une fonction normale. Nous pouvons en transmettre autant que nous voulons les séparer par une virgule. Si nous n'avions qu'un seul paramètre comme celui-ci, nous pouvons également supprimer les crochets environnants. Voici à quoi ressemble une fonction de flèche. Refactorons l'une de nos méthodes de la vidéo précédente. Nous pouvons supprimer ces deux lignes de code, puis, ci-dessous, il y aura le même exemple que celui que nous avons vu dans la vidéo précédente. Je vais commenter tout ce code pour le rendre actif. N'oubliez pas qu'auparavant, nous avons créé nos objets de contrôle et qu'ils contenaient diverses propriétés, tout comme nos primitives ici. De plus, puisque nous avons déplacé les fonctions autonomes pour qu'elles fassent partie de cet objet, elles sont désormais appelées méthodes. Ce que nous allons faire à l'intérieur de cet objet c'est transformer cette méthode RecipesLeft et j'utiliserai une fonction flèche. Comme avant, nous pouvons déplacer le mot-clé fonction car il ne s'agit que d'une seule ligne de code. Nous pouvons également retirer les accolades, amener sur la même ligne et nous rappeler que les lignes simples sont automatiquement renvoyées. Nous avons également besoin de la flèche. Essayons de vous connecter à la console et de voir ce qui se passe. Nous avons toujours le journal de la console de Recettes Left. Rafraîchissez le navigateur et nous obtenons un jeton inattendu, c' est-à-dire le point-virgule. C'est juste celui-ci ici. Si nous supprimons cela et que nous actualisons, nous voyons la valeur non d'un nombre. De toute évidence, cette méthode ne fonctionne pas comme avant. Cela est dû à la façon dont les fonctions de flèche gèrent ce mot-clé. Plus précisément, les fonctions de flèche n'ont pas leur propre ceci, et c'est pourquoi nous ne voyons pas le numéro à l'intérieur de la console. Voyez ceci que nous pouvons également placer dans un journal de console à l'intérieur de cette méthode. Déplacez-les sur une ligne distincte, consignez la valeur de celle-ci. Ensuite, comme nous sommes maintenant sur plusieurs lignes, nous devons également les envelopper dans les accolades, veillant à ce que cette virgule soit également supprimée. Essayons ça. Rafraîchissez et maintenant nous voyons cela pointer vers l'objet fenêtre, contrairement à la dernière vidéo, où la valeur de celle-ci faisait référence à l'objet parent qui était CheckRecipes. Les fonctions de flèche n'ont pas leur propre ceci. Cela signifie que cela fait référence à l'objet global Il est donc souvent conseillé de ne pas utiliser fonction de flèche lors de la création de méthodes comme celle-ci car elle ne peut pas accéder aux propriétés de cet objet. Bien que comme lorsque nous utilisons les fonctions de flèche dans une vidéo précédente, cela peut être utile pour combiner des choses bizarres comme des méthodes de tableau en raison de la syntaxe plus courte. Si nous prenons un exemple de cela, tout en bas. Si nous accédons aux brownies ou à la carte, puis avec la syntaxe de la fonction normale, cela ressemblerait à ceci. Nous passons dans une fonction. Cette fonction prendrait ensuite chaque ingrédient et ensuite à l'intérieur, nous pourrions retourner tout ce que vous voulez. Allons chercher nos ingrédients, qui ont été transformés en majuscules. C'est une façon d'écrire cela avec une fonction régulière et, en fait, c'est toujours ma façon de faire les choses préférée. Cependant, bien que les équivalents de la fonction flèche se déroulent comme ceci, brownies.map, et au lieu de taper le mot-clé de fonction, nous pouvons passer une fonction flèche, qui est les crochets, la syntaxe de flèche. Nous n'avons pas besoin du mot-clé retour car tout cela se trouve sur sa propre ligne. Nous pouvons ensuite simplement copier ceci, coller cela dans, et les deux sont équivalents. Nous ne voyons pas pourquoi la version plus courte est souvent utilisée avec des méthodes de tableau, mais aussi des fonctions de flèche droite par défaut pour certaines personnes. Parfois, parce que c'est juste une nouvelle syntaxe. Cela peut être très bien si c'est la syntaxe que vous préférez et qu'elle présente certains avantages, comme nous venons de le voir avec la forme plus courte. Mais n'oubliez pas que ce n' est pas parce que les fonctions de flèche sont une nouvelle façon de faire les choses les fonctions de flèche sont une nouvelle façon de faire les choses que nous devons toujours les utiliser exclusivement. Vous remarquerez qu'ils sont également anonymes. Ce qui signifie qu'ils n'ont pas d'identificateur unique au-dessus d'eux. Peut-être disponible que nous leur avons assigné. Cela peut également rendre le débogage un peu plus compliqué. Rappelez-vous également que nous avons la différence entre la façon dont il gère ce mot-clé et la déclaration de fonction régulière. 34. Valeurs de paramètre par défaut et utilisation de Rest: Cette vidéo va se concentrer sur les paramètres de fonction et quelques astuces utiles lors de leur utilisation, qui ont été mises à disposition avec l'introduction d'ES 2015. N'oubliez pas qu'un paramètre est un espace réservé pour la valeur que nous allons transmettre à une fonction, et vous pouvez considérer cela comme une variable. abord, nous voulons jeter un coup d'œil valeurs des paramètres par défaut, aux valeurs des paramètres par défaut, et pour voir cela, cela créera une nouvelle fonction qui prendra en compte un montant monétaire, un symbole monétaire, puis retournera une nouvelle chaîne pour afficher le prix à l'utilisateur. le dossier de cette leçon, qui est des valeurs de paramètres par défaut, et en utilisant Rest, nous avons une balise de script vide en bas, où nous pouvons créer notre fonction, que je vais appeler format money. Cela va prendre fin, du montant que nous devons formater et aussi la monnaie dans le corps de la fonction. Cela va simplement renvoyer une nouvelle chaîne. Puisque nous devons accéder à ces deux variables, nous pouvons les placer à l'intérieur des backticks et utiliser le symbole $ et les accolades pour insérer une variable. Tout d'abord, la devise et le montant. La chaîne qui sera renvoyée ressemblera à ceci. Tout le nom de la fonction juste en dessous du nom, puis il transmet le montant et aussi la devise. Prenons 100 et le symbole monétaire sous forme de chaîne et stockons cela à l'intérieur d' une variable. Comme ça sur la console. Enregistrez cela et nous nous attendrions à ce que la valeur de 100 soit rétablie avec le symbole $ juste en avant. Nous pourrions également aller plus loin en changeant le prix en deux décimales. Nous pouvons le faire à l'aide d'une méthode JavaScript Number appelée ToFixed. Juste après le montant, nous pouvons passer dedans àFixe , puis définir cette valeur à deux décimales. On y va. Et si nous avions un site qui ne possédait qu' une seule monnaie ? Eh bien, pour cela, plutôt que de transmettre la deuxième valeur à chaque fois, nous pourrions plutôt passer un paramètre par défaut afin que nous puissions définir cette valeur égale à notre chaîne par défaut. Maintenant, nous pourrions soit licencier cela, soit nous voulons plutôt passer outre cela. Nous pourrions modifier cette valeur pour qu'elle soit différente, ce qui remplacerait la valeur par défaut de la même manière. De plus, si nous supprimons cela, il reviendrait à notre symbole $ par défaut. Cela fonctionne également exactement de la même manière si vous souhaitez stocker notre valeur par défaut à l'intérieur d'une variable. Créez une constante en haut appelée symbole monétaire et définissez cette constante égale à notre valeur par défaut. Les variables fonctionnent également à l'intérieur d' ici, nous pourrions définir cela comme égal à notre nom de variable de symbole monétaire. Enregistrez ça. Actualisez. Nous voyons maintenant la valeur par défaut de notre symbole $, même si nous ne l'avons pas transmis comme argument. Ce type d'approche serait donc très utile si vous vouliez conserver une valeur centrale unique que nous voulions utiliser dans différents domaines de notre site. Ensuite, nous allons examiner comment utiliser l'opérateur Rest. L'opérateur Rest nous permet de gérer facilement une fonction qui aura de nombreux paramètres différents. Ici, nous n'en avons que deux, donc ce n'est pas trop difficile à gérer. Mais imaginez si nous avions beaucoup plus de paramètres que nous voulions inclure, avec cela nous pouvons écrire une nouvelle fonction, alors commentons tout ce code existant et ensuite nous créerons une nouvelle fonction en bas, qui sera responsable du calcul d'un âge moyen, sorte que le mot-clé de fonction, le nom de l'âge moyen et le dessous l'appellent par le nom de la fonction. Nous pourrions également passer de nombreux nombres différents, ce qui correspond à l'âge de tous nos différents utilisateurs. Passer beaucoup d'arguments différents. Tous ces arguments étant transmis à la fonction, il n'est pas logique de créer un nouveau nom de paramètre pour chacune de ces valeurs. Au lieu de cela, il sera utile si nous pouvions simplement transmettre une seule valeur et pour gérer cela, nous avons l'opérateur reste. Ce que nous pouvons faire, c'est utiliser les trois points. Nom du paramètre personnel et c'est essentiellement comme une variable avec les trois points placés avant que nous puissions accéder à nos âges à l'intérieur de la fonction. Essayons cela à l'intérieur d'un journal de console, actualiserons et nous avons maintenant six valeurs stockées dans un tableau. Cela est très utile si nous ne voulons pas créer de nouveau nom de variable pour chacune des valeurs. Ou si nous ne savions pas exactement combien de valeurs allaient être transmises à cette fonction. revenant à l'objectif de notre fonction, qui est l'âge moyen, nous pouvons maintenant utiliser ce tableau d'âges pour calculer cela à l'aide d'une méthode que vous avez examinée par le passé appelée réduite. Supprimez donc ce journal de console, accédez à notre âge variable, puis appelez la méthode réduite. Rappelez-vous que dans la vidéo précédente que nous avons regardée, cela prend deux choses différentes. Nous voulons créer cette fonction sous forme de flèche. Cela prendra en compte le total ainsi que la valeur actuelle de notre flèche, qui va additionner ces deux valeurs afin que le courant indique total. Ensuite, nous pouvons résoudre ce problème à l'intérieur d'une variable. Cela va passer en boucle chacune des valeurs à l'intérieur des âges, qui sont ici. Il va sélectionner la valeur actuelle, puis ajouter au total précédent. Assurez-vous que toutes ces valeurs sont combinées en un seul chiffre. Maintenant, ce que nous devons faire, c'est de prendre ce total et diviser par le nombre d'entrées à l'intérieur du tableau, qui reviendra de la fonction. Le total de tous les nombres ajoutés ensemble divisé par la longueur du tableau. Comment obtenir la longueur de la matrice ? Eh bien, nous le faisons avec la propriété length, qui dans notre cas est la valeur de six. Étant donné que cette fonction renvoie une valeur, nous pouvons également la stocker à l'intérieur d'une variable. Appelons cela la moyenne. Définissez cette valeur égale à la valeur renvoyée, puis affichez-la dans les journaux. Enregistrez cela, actualisez et la moyenne de tous nos numéros est de 43. C'est ainsi que fonctionne le paramètre Rest en sélectionnant toutes les valeurs qui lui sont transmises. Mais si nous ne voulions pas capturer toutes ces valeurs, par exemple si nous voulions une variable distincte pour la toute première valeur, nous pourrions insérer le premier paramètre comme celui-ci , puis la valeur des âges. à toutes les valeurs restantes de 45 à la fin du tableau. Vous pouvez aller encore plus loin et stocker plusieurs éléments, tels que la deuxième valeur, mais rappelez-vous toujours que le paramètre reste doit être le dernier, car il recueille toutes les autres valeurs restantes. Ces trois points peuvent également sembler familiers lorsque nous avons examiné la structure dans les tableaux. Cet exemple est ce que nous avons examiné plus tôt et il s'agit d'un exemple d'utilisation de spread. Le repos et l'étalement sont très similaires et les deux ont trois points. Spread signifie que nous pouvons prendre quelque chose sur lequel nous pouvons faire une boucle, comme ce tableau de messages, et nous pouvons extraire des valeurs et les répartir dans quelque chose d'autre. Par exemple, ils peuvent se répandre dans un nouvel objet ou un nouveau tableau pour les copier sur les valeurs, ce qui le rend utile pour des éléments tels que la duplication de tableaux ou simplement saisir des valeurs et les copier. Ensuite, nous avons le paramètre Rest que nous venons d'examiner, ce qui facilite le regroupement de toutes les valeurs d'argument dans une seule valeur de tableau. Ensuite, les paramètres par défaut seront affichés ci-dessous et cette valeur par défaut est créée en définissant une valeur telle qu'un nombre ou une chaîne. Souvenez-vous de tout cela, il s'agit simplement de la valeur par défaut et si nous fournissons une valeur lorsque nous appelons une fonction, sera utilisée à la place. 35. Qu'est-ce que le DOM ?: Juste avant d'entrer dans un code, il est vraiment important de savoir quelque chose que nous allons examiner dans cette section appelée le DOM. Le DOM signifie Document Object Model et il s'agit d'une interface de programmation pour nos pages HTML. Cela peut sembler complexe, mais ce n'est pas trop déroutant une fois que je connais les bases. En prenant une version très basique et script buck d'un document Web, c'est l'élément de base dont nous disposons. Tous les documents doivent avoir ce wrapper HTML, puis nous avons la section tête et corps d'un niveau à l'intérieur. Pour visualiser à quoi cela ressemblerait dans l'arborescence DOM, cet exemple ressemblerait à ceci. Sur la droite, le document se trouve en haut de l'arborescence. Il s'agit de notre document Web ou de notre page Web. Ensuite, nous avons le wrapper HTML racine. En dessous, nous avons la tête et sections du corps qui sont toutes les deux à côté de l'autre. C'est en fait ce que nous voyons quand nous les voyons dans notre éditeur de texte. Notre DOM est composé de tous ces objets qui reflètent notre page HTML. Un peu plus loin, ajoutez un élément titre à la section de tête que nous faisons toujours et aussi un élément h1 au corps. Tous ces éléments imbriqués sont structurés exactement de la même manière que notre page Web que nous voyons à l'intérieur de notre éditeur de texte. Tous ces objets du DOM sont des nœuds de clusters. Le h1, par exemple, est un nœud d'élément, une enveloppe de l'en-tête et également le titre. Nous avons un nœud de texte, qui correspond au contenu textuel de chaque élément. Fondamentalement, le texte qui se situe entre les balises d'ouverture et de fermeture. Les éléments peuvent également comporter des attributs, tels qu'un graphe h, une classe et un ID. Ce sont également des nœuds. Ces nœuds sont appelés nœuds attributaires, comme nous le voyons ici en bas. Nous avons des nœuds d'éléments, des nœuds de texte et nous avons également des nœuds attributaires. Nous avons trouvé ce fichier sans rien savoir sur le DOM. Tout cela se passe en arrière-plan. Pourquoi devrions-nous même nous en préoccuper ? Eh bien, le DOM permet à JavaScript ou à d'autres langues de se connecter à notre code HTML. Il nous donne accès à l'arborescence des documents afin que nous puissions y apporter des modifications si nous le voulons. Cela signifie que nous pouvons utiliser JavaScript pour créer de nouveaux éléments HTML. Nous pouvons les supprimer, modifier le style, ajouter ou supprimer des attributs et faire tout ce que nous voulons avec nos éléments HTML. Bien que nous écrivions en code JavaScript, il utilise le DOM pour accéder à ces éléments HTML. Ils travaillent ensemble pour nous permettre de le faire. Nous avons déjà brièvement envisagé de travailler avec le DOM dans nos vidéos précédentes lorsque nous avons examiné quelques exemples tels que la modification du texte à l'intérieur du navigateur. Nous aurons beaucoup plus à couvrir dans cette section. Jetons un coup d'œil à un code dans la vidéo suivante. 36. Sélectionner des éléments: Bienvenue dans cette nouvelle section. Pour cette section, accédez à la section numéro 4 , qui est les événements et le DOM. Il s'agit de la première vidéo qui est numéro 1, Sélection d'éléments. Je vais récupérer le chemin d'accès à ce fichier et l' ouvrir à l'intérieur du navigateur. Nous pouvons voir à l'intérieur du navigateur que nous avons déjà du code HTML qui affiche un tableau, ce qui nous donnera une référence pour les différentes manières que nous pouvons utiliser pour sélectionner l'un de nos éléments HTML. De toute évidence, lorsque nous devons manipuler de ces HTML à l'aide de JavaScript, nous pouvons utiliser plusieurs façons de les sélectionner. Tout d'abord, comme nous l'avons vu dans le passé, nous pouvons sélectionner un élément par l'ID particulier. Il s'agissait d'un attribut Id, et nous pouvons le sélectionner par un nom particulier. Nous pouvons sélectionner par une balise qui est le nom de l'élément tel que Id, élément p ou image, nous pouvons sélectionner par nom de classe et également sélectionner avec un sélecteur CSS. Il y a deux façons différentes que nous pouvons utiliser pour cela. Nous pouvons sélectionner le tout premier sélecteur correspondant ou nous pouvons retourner tous les matchs disponibles. Sur la droite, nous avons un ensemble de méthodes qui vont nous permettre de sélectionner n'importe lequel de nos éléments avec ces méthodes. Nous avons utilisé GetElementByID brièvement dans le passé. Nous pouvons sélectionner nos éléments par nom de balise et également par nom de classe. Notez que le s est mis en surbrillance dans ces deux méthodes car il renvoie plusieurs éléments. Nous avons QuerySelector qui va sélectionner la toute première correspondance, et QuerySelectorAll qui retournera toutes les correspondances. Ces deux méthodes, comme ça, fonctionnent exactement de la même manière qu'avec notre CSS. Par exemple, nous pourrions le sélectionner par un nom d'élément, nous pourrions utiliser une classe .select ou également un # si nous voulons sélectionner un élément par un ID particulier avec ce groupe de méthodes que nous allons nous pourrions utiliser une classe .select ou également un # si nous voulons sélectionner un élément par un ID particulier avec ce groupe de méthodes que nous allons concentrez-vous sur cette vidéo et dans la prochaine section. N'oubliez pas qu'une méthode est comme une fonction, mais qu'elle vit sur un objet. Le document est également un objectif. Passons à notre index.html, faites défiler vers le bas jusqu'à la section Script. Nous allons créer un fichier console.log et je mettrai le contenu du document. C'est un objet. Nous allons ouvrir les outils de développement dans la console et les actualiser. Il suffit de rendre ça un peu plus grand. Si nous ouvrons cela, puis à l'intérieur de la console, nous pouvons voir tout le contenu que vous avez à l'intérieur de notre page d'index. Comme indiqué dans la dernière vidéo, le document est le niveau supérieur de l'arborescence DOM. Il couvre tout ce qui se trouve dans cette page HTML. Ces documents sont un objet et ont également de nombreuses propriétés et méthodes disponibles. Nous pouvons le voir si nous saisissons le document et que nous utilisons le point pour obtenir l'auto complète. Cela remonte au début lorsque nous avons examiné types d'objets tels que les tableaux et nous avons remarqué qu'ils avaient beaucoup de propriétés et de méthodes intégrées auxquelles nous pouvions accéder. Nous pouvons vérifier si ce document contient des images. Dans notre cas, nous n'avons pas de collection HTML vide, donc cela renvoie une collection HTML vide. Nous pourrions également vérifier différentes choses telles que l'URL. Appuyez sur Entrée. Cela revient au chemin d'accès au fichier de ce document particulier. Nous pouvons voir que le mien est sur le bureau et à l'intérieur des fichiers de démarrage JavaScript modernes, ainsi que l'URL. Saisissons la tête et cela renvoie la section de tête qui est toutes les données à l'intérieur de cette section de tête. Il en va de même pour notre corps et pour les éléments corporels avec tout le contenu à l'intérieur. La raison pour laquelle nous pouvons accéder à ce document et à l'ensemble du contenu est qu'il est disponible globalement sur l'objet Window. Nous pourrions également y accéder via l'objet fenêtre. Jusqu'à notre type de journal de console dans la fenêtre, actualisation et à l'intérieur de la console, si nous ouvrons cela, cet objet de fenêtre a la propriété document ici où nous pouvons accéder à toutes les mêmes propriétés. des méthodes que nous venons d'examiner. Eh bien, ce qui nous intéresse actuellement , c'est les méthodes disponibles pour sélectionner les éléments requis c'est-à-dire ceux qui se trouvent à droite. abord, pour ce faire, nous allons créer un nouvel élément que vous souhaitez sélectionner. Nous pouvons placer cela n'importe où dans notre code. Je vais ajouter un élément p juste au-dessus la section, puis le saisir par l'ID du texte. Ensuite, à l'intérieur de la section de script juste en dessous, nous pouvons saisir cela en sélectionnant d'abord les documents, puis nous pouvons accéder à la méthode disponible sur le document qui est GetElementByID. Nous savons comment faire, nous transmettons sous forme chaîne l'ID qui est du texte, stockons cela à l'intérieur d'une variable, appelons ce texte. Nous pouvons maintenant enregistrer cela sur la console. Actualisez. Nous y allons et c'est maintenant sélectionné notre élément p que nous venons de créer. C'est assez simple. C'est exactement ainsi que nous sélectionnons un élément en particulier. Mais que se passe-t-il si nous avions deux éléments p ? Eh bien, pour pouvoir saisir ces deux éléments p, nous avons deux options. Sur la deuxième ligne, nous avons accès au nom de la balise. Comme vous pouvez le constater avec le s, il est capable de contenir plusieurs éléments. Ce sera très bien à utiliser. De même pour la dernière ligne, nous pourrions également utiliser QuerySelectorAll où nous pouvions sélectionner plusieurs correspondances par l'élément p, et bien sûr, si nous avions une classe attachée à ces deux éléments, nous pourrions également utiliser GetElementsByClassName. Mais nous n'avons pas de classe attachée à ceux-ci pour le moment, nous allons donc utiliser le nom de l'étiquette. Allons en bas et au lieu de GetElementByID, et juste pour être GetElementsByTagName, et tout comme nous le ferions avec CSS, nous pouvons les sélectionner par le nom de balise p. Enregistrer et rafraîchir. Nous revenons maintenant à une collection HTML contenant deux éléments différents. Une collection HTML est une collection générique d' éléments semblable à un tableau et c'est ainsi nos éléments de retour p sont stockés. Comme pour les tableaux, nous pouvons également accéder à des valeurs spécifiques en fonction de la position de l'index. Si nous devions ajouter les crochets puis sélectionner l'index numéro 1, cela sélectionnerait notre deuxième élément p, qui est ici. Nous pourrions changer cet indice pour qu'il s'agisse d'un indice zéro, et cela choisirait notre tout premier. Notez toutefois qu'il s'agit d'une collection HTMLCollection plutôt que d'un tableau, nous n'avons accès à aucune des méthodes de tableau. Ensuite, nous pouvons sélectionner des éléments par nom de classe et, pour cela, nous devons également ajouter une classe à nos éléments. Passons à notre deuxième élément, nous pouvons ajouter une classe. Je veux aller pour le texte petit. Vous voulez suivre un tableau que vous avez déjà. Celui-ci devrait être assez simple. Si je veux sélectionner un élément par le nom de classe, nous avons GetElementsByClassName. Le changement est terminé, en transmettant le nom de la classe qui était de petite taille. Supprimez le numéro d'index et actualisez. Tout comme avant, nous sommes également revenus à HtmlCollection car cela pouvait également contenir plusieurs éléments qui ont tous la même classe. La dernière chose que nous allons examiner fonctionne de la même manière. Tous ces éléments utilisent un sélecteur CSS pour sélectionner le tout premier élément qui sera rencontré ou une collection de toutes les correspondances. Commençons par notre premier match qui est QuerySelector. Encore une fois, il est également disponible directement sur les documents. Ce que nous pouvions faire, tout comme CSS, nous pourrions utiliser le nom de la classe avec le point. Cela retournera les éléments p que nous venons de sélectionner. Nous pourrions également saisir un identifiant ou aussi le nom de la balise comme celui-ci. N'oubliez pas que QuerySelector sélectionne la toute première occurrence ou la toute première correspondance. Rafraîchissez-vous et il y a notre tout premier élément juste là. Mais si nous voulions récupérer tous ces correspondances disponibles, nous avons besoin de modifications pour être QuerySelectorAll. Enregistrez et rafraîchissez. Nous sommes en train de récupérer une liste de nœuds contenant maintenant deux éléments p. Contrairement à l'endroit où nous devions revenir à la collection HTML, cette fois, nous récupérons une liste de nœuds et il y a quelques différences entre une liste de nœuds et une collection HTML. Je vais y jeter un coup d'œil dans une vidéo ultérieure. Rappelez-vous également qu'ici seul, lorsque vous écrivez notre JavaScript à l'intérieur d'ici, le JavaScript ne connaît rien de notre modèle HTML. Il accède au document, puis à tous les éléments dont nous avons besoin via l'interface DOM. récapituler, nous pouvons sélectionner un élément de plusieurs façons, comme cet élément p, auquel nous pouvons accéder par l'ID, le la balise qui est le nom de p de l'élément, ou même le nom de classe qui est du texte vert et les deux derniers sont sélectionnés dans un élément de la même manière que dans une feuille de style. La différence est si nous voulons saisir la première correspondance avec QuerySelector ou toutes les correspondances à l'aide de QuerySelectorAll. Nous savons maintenant comment sélectionner n'importe quel élément HTML que vous souhaitez. Nous allons maintenant passer à la prochaine vidéo où nous allons découvrir comment apporter des modifications à tous les éléments existants. 37. Modifier des valeurs et des attributs: Nous savons comment sélectionner un élément. Comment pouvons-nous réellement les changer ? Eh bien, c'est ce que nous allons jeter un coup d' œil dans cette vidéo. Nous allons vous montrer comment modifier les valeurs des éléments et comment ajouter et comment ajouter et supprimer des attributs à l'aide de JavaScript. Pour cette leçon, cela modifie les valeurs et les attributs, alors ouvrez-le, ainsi que dans le navigateur. Pour commencer, nous avons cette rubrique en haut, le titre sur les liens, ainsi que l'image placée juste en dessous. Ce que nous allons faire pour cela, c'est d'abord regarder comment modifier le contenu du texte, et nous l'avons déjà examiné au début du cours, donc ils ne devraient pas susciter de surprises. Ce que nous allons faire, c'est de changer le titre hamburgers charnés pour ne pas être des hamburgers à la viande, et nous pourrions le faire en bas. Tout d'abord, le mot que vous voulez changer ou remplacer sera charnu. Par conséquent, nous allons le découper, puis le placer à l'intérieur d'un élément de span, nous pourrions ajouter un ID ou tout autre moyen de saisir ces éléments que vous souhaitez. Pour cet exemple, je vais choisir la classe appelée changer de titre, puis nous pourrons modifier le contenu du texte à l'intérieur de la plage. Pour ce faire, nous allons devoir utiliser JavaScript. Créez une section de script en bas, et nous pouvons sélectionner uniquement cette section, installer à l'intérieur d'une constante appelée el. Il s'agit généralement d'éléments, et ce que nous devons faire est de saisir l'élément par le nom de classe à l'aide du QuerySelector. Comme c'est une classe facile, nous utilisons le point et le nom de la classe a été changé de titre. Comme nous le savons, c'est notre façon de saisir cet élément. Pour commencer à modifier ces éléments, comme pour la plupart des choses en JavaScript, tout commence par un objet parent d' où nous allons hériter de certaines choses. Si nous effectuons un fichier console.log, juste en dessous et consignez la valeur de nos éléments. Sauvegardons cela et ouvrons cela à l'intérieur de la console. Rafraîchissez, nous pouvons maintenant voir que nous avons accès à la plage que vous venez de sélectionner. Mais même si nous savons qu'il s'agit d'un élément de span, si nous faisons le typeof et qu' il l'a rafraîchi encore une fois, nous pouvons voir qu'il s'agit en fait d'un objet. Il renvoie un objet qui est un objet élément, et comme tout autre objet que nous avons recherché précédemment, cela signifie que nous pouvons également accéder à certaines méthodes et propriétés disponibles sur cet objet. Il y a plusieurs façons de choisir, mais cette vidéo va en découvrir quelques-unes les plus courantes. Pour commencer, nous pouvons obtenir le contenu textuel d' un élément à l'aide d'une méthode appelée InnerText. Si nous effectuons un console.log pour la valeur de nos Elements.InnerText. Assurez-vous que c'est CamelCase avec la majuscule T. Maintenant dans la console, c'est la valeur de la viande. Il s'agit du contenu InnerText entre les balises span, et c'est ce texte que nous voyons ici. InnerText saisit non seulement le contenu x actuel, mais nous pouvons également le remplacer, et la façon d'y accéder est d'accéder à nos éléments en utilisant el. Définissez le texte intérieur, et nous pouvons attribuer qu'il s'agit d'une nouvelle valeur telle qu' aucune viande, fermée sur la console et recharger la page. Nos changements entrent maintenant en vigueur. Mais qu'en est-il si nous voulions également ajouter un balisage à ce texte ? Par exemple, si nous voulions ajouter les éléments de repère autour de ce texte, nous pourrions ajouter les balises d'ouverture et de fermeture. Maintenant, si nous sauvegardons cela et nous actualisons, il n'est probablement pas surprenant que nous voyions ces sorties comme une chaîne de caractères. Plutôt que de présenter cela sous forme de chaîne, la façon dont nous pouvons les formater correctement consiste à : au lieu d'insérer InnertText, nous pouvons modifier cela en HTML interne et maintenant les éléments de repère prendront effet plutôt que de le publier sous forme de chaîne. Cependant, une chose à surveiller lorsque vous insérez du code HTML comme celui-ci, il y a toujours une faible chance qu'un utilisateur puisse entrer du code dangereux sur votre site. Il est vraiment important de ne pas définir le code HTML interne pour tout contenu que l'utilisateur peut fournir, par exemple sur un formulaire ou une entrée de texte. Bonjour HTML a certaines défenses contre cela. Pour être sûr, il est recommandé d'éviter le HTML interne si vous insériez simplement un texte brut comme nous l'étions auparavant. Nous allons le rétablir dans un texte et, avec le TextContent réel, nous pouvons également obtenir des attributs tels que l'ID, tels que la classe, le href et la source. Nous pourrions également en définir de nouveaux. Pour voir cela sauter dans la console, puis nous pouvons sélectionner nos éléments , qui sont en minuscules. Nous savons que pour ces éléments, nous avons la classe de changement de titre, et si nous voulions le sélectionner à l'aide de JavaScript, nous pouvons utiliser GetAttributes. À l'intérieur des supports. Nous pouvons transmettre une chaîne avec le nom des attributs que vous souhaitez sélectionner. Si nous choisissons la classe, nous pouvons voir cela renvoyé juste en dessous, et si nous recherchons un fan, tel que l'ID, nous n'avons pas d'ID sur cet élément. Cela renverrait donc la valeur null. Nous pourrions également l'utiliser dans notre éditeur de code, et nous pourrions stocker les valeurs à l'intérieur des variables. Nous pourrions également définir une nouvelle pièce d'identité si nous le voulions. Recadrez les éléments, puis nous pouvons définir directement l'ID de cette propriété et définir cette nouvelle chaîne comme nouvelle chaîne, disons ceci, et ouvrir la console. Rafraîchissez, et maintenant si nous allons dans l'onglet Eléments, dans la section corps, l'en-tête, ouvrez le titre du site et que nous pouvons voir à côté d'une classe, nous avons également ce nouvel ID. Si nous avions déjà un ID en place pour ces éléments particuliers, cela remplacerait la valeur d'origine. Nous disposons également de différentes méthodes qui fonctionneront également avec des attributs. Nous avons GetAttributes, nous avons SetAttributes et également RemoveAttribute. À l'intérieur de la console, jetons-y un coup d'œil. Je passe à la console, nous pouvons également utiliser la méthode GetAttribute que nous avons examinée précédemment et nous pouvons transmettre l'ID pour obtenir la nouvelle valeur que nous venons d'ajouter. Il s'agit de la valeur de retour de new, et nous pouvons également stocker cela à l'intérieur des variables de notre code, ainsi que d'obtenir ces valeurs comme je viens de le mentionner, nous pouvons également définir de nouveaux attributs. Ouvrez l'éditeur, ajoutons une nouvelle classe qui va changer la couleur de notre titre. Si nous faisons défiler jusqu'au CSS, nous pouvons voir ici que nous avons déjà en place une classe verte, qui va définir cette couleur de texte juste ici. Nous pouvons ajouter la classe verte à nos éléments. Faisons cela juste en dessous de notre carte d'identité. Nous le faisons avec El.SetAttributes. Mais nous devons lui transmettre deux valeurs distinctes. Le premier est le nom des attributs. Nous allons ajouter une classe, séparée par une virgule. La deuxième valeur est le ClassName qui est vert. Maintenant, si nous sauvegardons cela et nous dirigeons vers le navigateur, actualisez la classe verte qui s'est maintenant appliquée. De plus, si vous allez dans les éléments puis dans notre section, il s'agit du corps, de l'en-tête et du titre. L'élément span a maintenant cette classe de vert. Si vous regardez de près, nous pouvons voir qu'il s'agit la seule classe qui existe maintenant. Même si tôt nous avons ajouté cette classe de titre change-title, cela se produit parce que lorsque nous utilisons des attributs set, non seulement nous ajoutons une nouvelle classe, mais nous remplaçons également celle existante. Si nous voulions inclure cette classe en tant que classe supplémentaire plutôt que de remplacer, il existe une autre façon de le faire et nous allons jeter un coup d'œil dans un instant. Mais tout d'abord, examinons comment supprimer un attribut avec la méthode remove attribut. Tout ce que nous avons à faire à l'intérieur, c'est de transmettre le nom de l'attribut que nous voulons supprimer. Allons chercher la pièce d'identité. Rafraîchissez le navigateur et cet ID a maintenant été supprimé de notre plage. Travailler avec des attributs dynamiques comme celui-ci est vraiment utile pour mettre à jour des éléments comme notre image. Nous pourrions sélectionner cet élément d'image juste ici et si nous le voulions, nous pourrions modifier dynamiquement la source de l'image. Tout d'abord, si nous supprimons la source de l'image, puis nous pouvons ajouter dynamiquement dans notre script. Sélectionnez l'image, installez-la à l'intérieur d'une variable. Nous utiliserons le QuerySelector, transmettrons les éléments d'image puis sur l'élément image, nous pouvons utiliser la méthode set attribut. Cela va définir la source de l'image. Tout comme ci-dessus, nous lui transmettons deux valeurs. Le premier est le nom d'attribut de source, puis séparé par une virgule, nous transmettrons la valeur qui est notre nom d'image burger.jpeg. Nous pouvons dupliquer cela et placer dans l'ancien texte qui est image de burger sur le navigateur et maintenant notre image est de nouveau en place, mais cette fois, nous avons commencé à utiliser JavaScript. Personnellement, j'ai utilisé des choses comme celle-ci dans le passé pour créer des jeux qui apparaîtront ensuite avec des images aléatoires et aussi pour ajouter ou supprimer des classes pour changer l'apparence de certaines choses, telles que à la fin d'une partie, nous voudrions peut-être ajouter une nouvelle classe pour afficher ou masquer certains éléments, tels qu'une section de partition. Nous pourrions également définir le texte vert pour la victoire ou utiliser du texte rouge pour une défaite. Revenons au problème des cours multiples que nous avions auparavant. abord, ce que nous allons faire, c'est d'ajouter plusieurs classes à notre titre. Nous allons le faire à l'intérieur de la section span, il suffit de changer de titre dans la classe bleu et rouge. Ensuite, nous pouvons également commenter cette ligne ici, afin qu'elle ne remplace pas ces trois classes. Ces trois classes peuvent désormais être récupérées de plusieurs manières. Tout d'abord, nous avons quelque chose appelé ClassName. Si nous allons dans la console, nous pouvons le voir en accédant à nos éléments, puis en sélectionnant ClassName. Il s'agit d'une entrée, vous verrez la valeur de retour du vert, il suffit donc de l'actualiser. Nous allons essayer encore une fois. Nous récupérons maintenant les trois classes de changement de titre, bleu et rouge. Si vous examinez de plus près la valeur renvoyée ici, elle est contenue dans les citations. Nous savons que le ClassName va renvoyer une chaîne. En plus d'une chaîne aura également quelque chose appelé ClassList. La ClassList reviendra si nous ouvrons cette collection de valeurs semblable à un tableau. Nous avons les index numéro 0, 1 et 2. Nous pouvons également les sélectionner individuellement à l'intérieur de ces crochets. Si nous voulions sélectionner le bleu qui est le numéro 1, nous pouvons sélectionner le numéro 2 qui est rouge et 0 pour changer le titre. C'est ainsi que nous pouvons récupérer notre ClassList, mais que dire du problème que nous avions auparavant consistait à ajouter plusieurs classes. Eh bien, la façon dont nous pouvons le faire est également d'accéder à la ClassList qui nous donnera accès à une méthode add et à une méthode remove. Pour ce faire juste en dessous de nos commentaires, donc plutôt que de définir l'attribut comme celui-ci qui ne remplacera que la valeur existante nous pouvons accéder à nos éléments, utilisez une ClassList qui nous donne ensuite accès à une méthode appelée add. Nous pouvons ajouter plusieurs classes séparées par une virgule. Enregistrez cela et rafraîchissez-le. La classe verte a maintenant été appliquée. Une fois de plus, si nous vérifions notre ClassList, nous pouvons voir que la valeur du vert et du cyan a été ajoutée à la fin de ces classes. La méthode de suppression fonctionne de la même manière. Nous accédons à la ClassList ou supprimons. Cette fois sous forme de chaîne, nous pouvons passer dans n'importe laquelle de nos classes que nous voulons supprimer. Allons pour le bleu, Enregistrer et rafraîchir. Maintenant, si nous accédons à nouveau à notre élément ou ClassList, la valeur bleue a maintenant été supprimée de cet élément. Si nous voulions aller plus loin et plutôt que d'ajouter des valeurs individuelles comme celle-ci, nous pourrions également définir une variable contenant nos ClassNames. Supprimons la valeur du vert et du cyan, puis juste au-dessus, créons et du cyan, puis juste au-dessus, une constante appelée classes et les configurons en tant que tableau. Tout d'abord, vert. Nous garderons cela comme avant en ajoutant du cyan, puis nous pourrons utiliser l'opérateur de propagation, qui est les trois points, pour extraire toutes les valeurs du tableau de classes et placer directement à l'intérieur de la méthode add. Enregistrez, actualisez et accédez à notre ClassList. Cela fonctionne toujours comme avant. Le récapitulatif, nous pouvons sélectionner n'importe quel élément et définir la valeur du texte intérieur avec la méthode du texte interne. Nous disposons également d'un code HTML interne pour ajouter le contenu HTML à l'intérieur d'un élément. Nous avons également la propriété id qui peut être utilisée pour mettre à jour ou définir un nouvel ID. De plus, nous avons le contrôle total de nos attributs. Nous pouvons obtenir n'importe quel attribut existant tel qu'une classe ou la source. Nous pouvons en définir de nouveaux et nous pouvons également supprimer tous les attributs. Enfin, nous avons examiné les classes et les différentes manières que nous pouvons utiliser pour les ajouter, mettre à jour et aussi pour les supprimer. Nous avons le ClassName que nous pouvons utiliser pour récupérer les valeurs de nos classes sous forme de chaîne. Nous pouvons également l'utiliser pour ajouter une nouvelle classe. Nous avons également ClassList qui est une collection semblable à un tableau de tous nos ClassNames. Cela expose également certaines méthodes que nous pouvons utiliser pour ajouter et supprimer certaines classes. Enfin, nous avons également examiné une autre façon d' inclure des classes qui consistait à créer un tableau. Ensuite, nous pouvons utiliser ces classes en utilisant l'opérateur spread. Ensuite, nous examinerons également comment modifier directement les propriétés CSS à l'aide de JavaScript. 38. Modifier des éléments CSS: Nous avons expliqué comment modifier le contenu d'un élément tel que le texte intérieur, ainsi que comment ajouter, modifier et supprimer des attributs. Nous pouvons également modifier le style de n'importe lequel de ces éléments. Dans le projet de démarrage qui est Changing An Elements CSS, nous allons l'ouvrir dans le navigateur , puis sauter dans la console. Une entrée est le même exemple simple que celui que nous avons vu dans la dernière vidéo. Nous avons le titre et aussi l'image avec certainement le contenu textuel de l'en-tête, la classe verte, et certainement l'image dynamiquement. Pour travailler avec les styles, nous pouvons également accéder à nos éléments qui sont cette variable el. Dans Console, nous pouvons accéder à el.style. Vous utilisez cette propriété de style pour lire les valeurs car elle devient un peu déroutante. Nous savons que cette couleur verte appliquée à partir d'ici en ajoutant la classe, et cette classe verte est certainement la couleur du texte. Nous pouvons nous attendre à ce que cela revienne si nous sélectionnons la propriété couleur, appuyez sur « Entrée » et que nous récupérons une chaîne vide. La raison en est que si nous sélectionnons la propriété de couleur comme celle-ci, elle renvoie uniquement tous les styles que nous ajoutons en ligne dans notre code HTML. Si je clique sur « inline », je veux dire que si nous passons à nos éléments, je vais définir les styles en ligne comme ceci. Par exemple, nous pouvons définir la couleur rouge. Maintenant, si nous actualisons cela, nous ferons de même en définissant la couleur. Celui-ci renvoie notre valeur rouge. Cela ne lira que les styles en ligne et ignorera toutes les autres sources telles que n'importe quel style placé dans la section de tête ou dans une feuille de style externe. Si vous souhaitez connaître la valeur réelle de n'importe où, il existe une méthode disponible sur l'objet fenêtre globale appelée GetComputedStyle. Nous allons d'abord sélectionner l'objet window , puis GetComputedStyle. Nous voulons connaître le style d'un élément particulier, afin de pouvoir passer cette variable si nous cliquons sur « Entrée ». Cela nous ramènera un objet renvoyé avec tous les styles disponibles qui s'appliquent à ces éléments, ou si nous le voulions, nous pourrions simplement récupérer une seule valeur telle que la couleur. Ce n'est pas quelque chose que j'utilise personnellement beaucoup, mais il est disponible si nécessaire. Revenons à notre propriété de style que nous avons utilisée avant laquelle est celle-ci juste ici, nous pouvons également l'utiliser pour définir n'importe quel style. Par exemple, nous allons convertir certains des styles que vous avez déjà dans la section principale du script. Juste en dessous de SetAttribute, sélectionnez la propriété el.style de l'élément, et nous pouvons définir la couleur pour qu'elle soit égale à une nouvelle valeur. Ce sera une chaîne, et je vais placer dans une valeur RVB de 40, 141, 40. Fermez ça. Nous n'avons pas de conflits, nous commenterons également cette classe verte, nous actualiserons. Cela change pour être vert et juste pour confirmer, nous pouvons voir ici que la classe verte n'est pas appliquée. Nous pouvons également commenter cela simplement pour nous assurer que cela provient de la propriété style que nous venons d'ajouter. Allons un peu plus loin. Si nous revenons à nos styles tout en haut, nous avons cette section d'en-tête avec quatre propriétés CSS différentes. Nous avons défini le type d'affichage ainsi que quelques propriétés flexibles à côté du motif. Nous pouvons également commenter cette section et la remplacer par JavaScript. Pour ce faire, nous devons d'abord stocker une référence à nos éléments d'en-tête, comme nous l'avons fait avec cette section juste ici. Ajoutons cela en bas et stockons cela à l'intérieur d'une constante appelée en-tête, et nous pouvons le sélectionner comme nous le voulons. Je vais utiliser le QuerySelector comme nom d'élément de l'en-tête, puis la première propriété que nous devons sélectionner est le type d'affichage de flex. Nous remplacons simplement ces quatre valeurs en utilisant la propriété star en bas. Accédez à l'en-tête, au style. Définissez le type d'affichage pour qu'il soit égal à une chaîne de flex. Rafraîchissez le navigateur. Nous pouvons voir que le Flex Box a pris effet mais nous avons encore quelques problèmes d'alignement, et cela peut être corrigé en ajoutant le reste des propriétés CSS. Le second est header.style, et cette fois, nous devons définir justify-content. Si nous examinons comment nous avons fait cela dans notre CSS, nous utilisons les minuscules, et cela a été séparé par une virgule. Cependant, bien que l'un des gros Gotcha avec JavaScript lors de la définition du CSS, nous devons également convertir cela en CamelCase. Nous ne pouvons pas utiliser de contenu justificatif. Nous constatons tout de suite que l'éditeur de texte a mis en évidence un problème, et nous devons le convertir en CamelCase. Cela signifie que le contenu commence par un C, et que nous pouvons ensuite définir ce paramètre sur notre chaîne qui est espacée. Chemin suivant ; aligner les éléments qui, tout comme justify-content, doivent également être convertis pour être CamelCase. Cela a également été défini pour être central, alors configurez-le et la valeur pour cela est centrée. Enfin, vous avez le rembourrage. La valeur de remplissage si nous regardons, c'était zéro et quelques pixels. Transmettez-le sous forme de chaîne et récupérez-le dans le navigateur. Actualisez. Nous pouvons voir notre remplissage autour l'extérieur du texte, et l'alignement a également été corrigé avec ces propriétés flexibles. Cette façon de définir le CSS a beaucoup de bons cas d'utilisation. Comme mentionné dans la dernière vidéo, il peut être utile pour afficher et masquer du contenu pour modifier la mise en page, ainsi que pour modifier le thème de notre site Web. Par exemple, nous pouvons avoir un bas qui ajoute des propriétés CSS, un basculement entre le mode clair et le mode sombre. Nous pourrions ajouter des animations CSS. Si l'utilisateur clique sur certains d'entre eux, nous pourrions basculer différents jeux de couleurs et beaucoup plus de possibilités. Il est également intéressant de savoir que l'ajout de styles comme celui-ci avec JavaScript la même priorité en cascade qu'un style en ligne. Cette technique remplacera toutes les feuilles de style externes existantes ainsi que tous les styles que vous avez dans la section Head. Pour voir cela, nous pouvons décommenter la section verte. Nous pouvons ensuite réappliquer cela avec notre JavaScript en supprimant le commentaire SetAttribute. Aussi si nous changeons la couleur pour qu'elle soit rouge, j'aurai donc dans la couleur RVB, placer dans la valeur rouge. Maintenant, ce que nous aurons, c'est une classe de vert appliquée à l'aide de SetAttributes qui est en fait rouge, puis nous définissons cette couleur verte juste dessous. Enregistrez et rafraîchissez. Nous voyons toujours le texte vert en haut, et cela se produit parce qu'il a été créé à l'aide d'une propriété de style JavaScript qui un poids élevé lors de l'ajout d'une classe. Nous pouvons également le confirmer si nous déplacons la propriété étoile pour qu'elle soit juste avec ce paramètre de classe. Assurez-vous que cela n'a rien à voir avec la commande. Enregistrez et actualisez, et nous pouvons toujours voir que cette couleur verte s'est appliquée. Si vous vous demandez comment ajouter plusieurs propriétés CSS à la fois, nous pouvons également le définir à l'aide d'un objet. Nous allons examiner cela plus en détail dans la section Object, mais pour l'instant, c'est ainsi que nous pouvons récupérer et définir le style CSS à l'aide de JavaScript. Nous définissons nos propriétés de style comme nous le ferions dans une feuille de style classique, mais n'oubliez pas qu'une propriété comporte plusieurs mots tels que couleur d' arrière-plan et le contenu justificatif nous devons également convertir cette propriété en CamelCase. 39. Créer de nouveaux éléments: En plus de toutes les modifications que nous avons apportées aux éléments existants, nous pouvons également créer les nôtres. En fait, nous pouvons même créer des sections ou une page Web complète avec du contenu HTML dans JavaScript. Comme vous pouvez l'imaginer, cela ouvre de nombreuses portes. Un moyen de contenu peut être plus dynamique et changer même après le chargement de la page. Cela ouvre tellement de possibilités et certains exemples peuvent consister à afficher le contenu à l'utilisateur uniquement s'il est connecté. Nous pourrions obtenir tous les utilisateurs des commandes précédentes et créer une liste HTML basée sur ces informations. L'utilisateur peut également ajouter un nouvel élément à faire et la liste est infinie. Il ne se limite qu'à notre imagination ou à notre utilisation. Revenez à l'éditeur et accédez au fichier de création de nouveaux éléments. En bas, nous avons quelques commentaires à l'intérieur du script pour nous guider à travers cette vidéo. Ouvrez cela dans le navigateur et avant de créer un nouvel élément, je veux vous montrer quelque chose appelé écriture de document. Comme cela semble, cela écrit directement dans le document qui est notre page Web dans le script, accédez au document et à une méthode appelée write. Comme il s'agit d'une méthode, nous ouvrons les crochets comme celui-ci, puis nous pouvons passer une chaîne que vous souhaitez afficher à l'intérieur du document. Je vais enregistrer et recharger le navigateur. En bas, nous pouvons voir ce texte a été placé en bas, que ce texte a été placé en bas, tout en insérant une chaîne simple de textes comme celui-ci. Nous pouvons également injecter du code HTML. Nous pouvons l'entourer à l'intérieur de certaines balises d'éléments, telles que H1, enregistrer et passer dans le navigateur, et le titre de niveau un plus grand est maintenant entré en vigueur. Cette méthode est plus utile, comme tester plutôt que d'ajouter du contenu ou de la page. L'une des raisons en est que si la page a terminé le chargement, elle remplacera tout le contenu existant. Nous pouvons le voir mieux si nous retardons l'écriture du document pour attendre sur la page avant de terminer le chargement. Pour ce faire, nous avons une méthode disponible appelée SetTimeout. Ne vous inquiétez pas si vous ne l'avez pas vu auparavant, c'est un moyen d'exécuter une fonction après un certain délai. Nous en discuterons plus avant dans le cours 2. Ce que nous allons faire, c'est commenter l'écriture du document, puis créer une fonction SetTimeout, qui à l'intérieur va prendre une fonction. Nous pouvons écrire la fonction à l'intérieur de laquelle va s' exécuter dans n'importe quel style que nous voulons. Nous pouvons utiliser la syntaxe traditionnelle de la fonction ou passer une fonction de flèche. C'était les crochets comme ça. Excellente flèche, et comme nous n'utilisons qu'une seule ligne, nous n'avons pas besoin d'ajouter les accolades ou une déclaration de retour. Au lieu de cela, nous pouvons placer dans un document écrit comme ci-dessus. Ensuite, à l'intérieur d'ici, nous pouvons passer une chaîne ou du contenu HTML. Où est passé mon contenu ? Ensuite, juste après l'écriture du document, puis une virgule, puis c'est le deuxième argument de notre fonction setTimeout. La première est la fonction réelle que nous voulons exécuter, puis la séparer par cette virgule, où nous aurons le délai en millisecondes. Si nous le plaçons comme 3 000, cette fonction s'exécutera au bout de trois secondes. Essayons cela si nous sauvegardons et actualisons maintenant. Nous ne voyons actuellement aucun document en bas, mais au bout de trois secondes, notre fonction s'exécutera et remplacera tout le contenu existant. Le fait que cela puisse se produire signifie que ce n'est pas souvent un bon moyen d'ajouter du contenu à notre page Web. Pour cela, nous aurons des méthodes plus dédiées. Souvent, lorsque nous créons des éléments, cela se produit en plusieurs parties. Si nous devions créer un élément de texte, par exemple, nous devons le faire en plusieurs parties. abord, nous allons créer un élément P et le stocker dans une variable, puis créer le nœud de contenu texte. Ensuite, nous devons fusionner ces deux-là ensemble. Dans ce fichier de démarrage HTML, nous aurons une nouvelle section HTML juste au-dessus. Nous avons l'emballage de section. À l'intérieur, nous avons un titre de niveau trois. Nous avons cette div avec la classe des contenus, puis imbriqués à l'intérieur nous avons deux autres div imbriqués. Le premier contient une image et la seconde contient un élément P, ainsi qu'un bouton d'achat. Pour nous entraîner à créer nos éléments, nous allons recréer cette section complète, mais cette fois en utilisant JavaScript. titre indicatif, nous utiliserons les commentaires en bas et nous pourrons supprimer ces exemples d'écriture de documents précédents. Après ces commentaires, nous allons commencer par créer l'en-tête de section, qui est H3 en haut. Maintenant, nous allons continuer à parcourir le reste du contenu. La façon dont nous pouvons créer un nouvel élément consiste à accéder aux documents. Ensuite, en utilisant une méthode appelée créer des éléments. Car ses éléments sont assez simples, il suffit de passer une chaîne avec le nom de la balise éléments. Par exemple, nous devons créer un titre de niveau 3, sorte que nous le faisons et que nous puissions le stocker à l'intérieur d'une variable. Le mien va s'appeler l'en-tête de section et le définir comme égal à notre nouvel élément. Puisque nous avons maintenant une référence de variable, nous pouvons le voir si nous passons à la console. Accédez ensuite à cela par le nom de la variable. Passer cet en-tête de section, qui renvoie un en-tête vide de niveau 3. Comme mentionné précédemment, lorsque nous créons de nouveaux éléments, il s' agit souvent de deux parties. Nous aurons cet élément vide, puis nous devons également créer le contenu texte à l'intérieur. Rappelez-vous, plus tôt, lorsque nous avons regardé le DOM, dit que tous les objets à l'intérieur de cet arbre agissent comme des nœuds. Cet exemple montre un nœud d'élément sous la forme de notre H1, puis un nœud de texte avec le texte de hey, nous avons la première partie qui est le nœud d'élément, qui est notre H3. Nous devons maintenant insérer du contenu texte. Pour ce faire, nous avons une méthode disponible appelée CreateTextNode. Cette méthode est également disponible sur l'objet document. Nous accédons au document point CreateTextNode. À l'intérieur, nous passons une chaîne de texte que vous souhaitez insérer. Étant donné que nous répliquons cette section, nous pouvons copier le contenu depuis l'intérieur. Placez-le dans. Stockez-le à l'intérieur d'une variable, disons le texte du titre. Rafraîchissez la console et nous devrions également le voir si nous saisissons le texte du titre. Nous avons notre chaîne de texte juste ici. Cela signifie maintenant que nous avons deux nœuds distincts. Nous avons notre nœud d'élément ainsi que notre nœud de texte. Mais nous avons besoin d'un moyen de les fusionner ensemble. ce faire, vous devez d'abord accéder au nœud parent, qui est l'en-tête de section, saisissez cette variable, puis comme il s'agit d'un élément, nous pouvons accéder à une méthode appelée AppendChild. AppendChild va ensuite prendre en compte l'enfant qui souhaite fusionner, c' est-à-dire le texte de notre en-tête. Placez-le dans, enregistrez-le, puis revenez à la console, actualisez-le. Essayons l'en-tête de la section. Maintenant, plutôt que de simplement renvoyer un en-tête vide de niveau 3, il contient également notre chaîne imbriquée à l'intérieur. Cela complète maintenant notre cap et le reste sera très similaire. Nous allons passer à l'image et, comme avant, nous utilisons le document point CreateElements. Cette fois, le nom de type est IMG. Stockez-le à l'intérieur d'une constante appelée ImageElement. Comme on peut s'y attendre, une image est légèrement différente car nous n'avons pas besoin d'insérer les nœuds de texte à l'intérieur. Au lieu de cela, nous devons définir les attributs. Nous devons définir à la fois la source et le texte alternatif. Juste en dessous, accédez à nos éléments d'image. Nous pouvons appeler une méthode appelée SetAttributes, qui prend deux choses en compte. La première est une chaîne du nom de l'attribut, qui est source, puis le contenu sur lequel ils vont déposer le chemin burger.jpg. Dupliquez ceci et le second est l'ancien texte avec la chaîne, disons l'image burger. Nous pouvons également tester cela dans le navigateur accédant à nos éléments d'image. Rafraîchissez, accédez aux éléments de l'image, et cela ressemble exactement à ce dont nous avons besoin pour nos éléments d'image. Continuons. Le texte d'information, il s'agit d'un élément P. Cette section juste ici et pendant que nous sommes ici, copions le texte Lorem ipsum. Ensuite, nous créerons le bouton, puis travaillerons à l'extérieur sur nos conteneurs. Nous devrions savoir quoi faire ici. Nous accédons aux documents, créons un élément. L'élément est l'élément P, puis nous pouvons le stocker à l'intérieur d' une constante appelée InfoSectionElement. L'élément de section info va également intégrer un nœud de texte comme le titre ci-dessus. Commencez cela à l'intérieur d'une constante et maintenez cela cohérent. Nous dirons qu'InfoSectionText est égal à Documents.CreateTextNode. Je vois maintenant une chaîne que nous venons de copier auparavant, qui est le texte Lorem ipsum. Nous pouvons tout de suite constater que nous avons une erreur comme celle-ci parce que nous devons nous assurer que tout cela est dans la même ligne. Nous ne pouvons insérer du texte multiligne que s'il devait remplacer ces guillemets simples par les rétro-ticks. Comme auparavant, nous avons nos deux éléments indépendants, puis nous devons appeler AppendChild sur le parent pour fusionner ces deux éléments ensemble. InfoSectionElements.AppendChild. J'ai dit que je vais envoyer un texte, qui est InfoSectionText. Essayons ça. Nous allons copier notre conteneur parent, le coller et le rafraîchir sur TextContent est maintenant imbriqué à l'intérieur. Ensuite, nous avons ce bouton. Le bouton suivra un schéma très similaire à cette information, donc nous allons copier toute cette section, la coller dans, mais bien sûr, nous devons changer l'élément p pour qu'il s'agisse d'un bouton. Le texte va être, acheter en ligne. Nous devons toujours ajouter l'élément enfant dans le bouton, mais nous devons modifier ces noms de variables. Nous allons dire le ButtonElement, puis le ButtonText. En bas, nous sélectionnerons nos éléments de bouton, qui sont les parents, puis ajouterons le bouton Texte. Essayons ça. Rafraîchissez, rafraîchissez-le et collez-le dans, et il y a un bouton. C'est très bien, et si nous revenons en arrière, maintenant dans notre section HTML, nous avons créé tous les éléments de texte. Nous avons le H3, nous avons nos éléments d'image, nous avons notre P et aussi le bouton. La dernière chose que nous devons faire est de créer nos emballages. Nous avons une div ici, nous en avons une ici, un emballage pour ces deux sections, puis enfin l'emballage de la section extérieure. Comme pour tous les autres éléments, nous allons utiliser CreateElements. Je vais copier cette première ligne, placer sous les emballages. Celui-ci est l'enveloppe de section, qui est l'élément principal entourant tout ce contenu. Il s'agissait d'un élément de section. Ensuite, je vais reproduire ça trois fois. Le reste de ces éléments va tous div. Mais ils ont besoin de noms uniques, donc la première section sera ContentWrapper. C'est le contenu juste ici. Nos deux derniers sont ceux qui entourent l'image, puis celui qui entoure le texte et le bouton. Nous appellerons donc le numéro 3, ImageDivWrapper. Ensuite, le dernier était autour du texte et du bouton, donc nous appellerons cela le TextDivWrapper, qui nous amène ensuite à cette section qui réunit tout cela. Ce que nous devons faire maintenant, c'est fusionner tous les éléments que vous avez créés au-dessus de tous les enveloppes. Pour ce faire, il faut également utiliser la méthode AppendChild. Nous commencerons de l'intérieur et nous allons nous en sortir. Tout d'abord, nous allons travailler avec la section info et insérer les éléments p ainsi que le bouton. En bas, ce que nous allons faire, c'est de sélectionner notre TextDivWrapper all AppendChild. Ensuite, nous devons le faire deux fois. Le premier que nous devons passer dans les éléments de la section info. L'élément de la section Info est le texte que nous avons créé ici. Ensuite, nous devons également le faire une deuxième fois, mais celui-ci sera pour notre bouton. Le bouton est un nom de variable de ButtonElement. Nous pouvons dupliquer cela, insérer nos éléments de bouton. Avant d'aller plus loin, nous pouvons voir cela à l'intérieur de la console si nous grandissons notre TextDivWrapper. Collez ça dans. Comme prévu, cela contient un élément div, puis ouvrez-le, nous avons notre élément p et aussi le bouton. À côté de l'ImageDivWrapper. Celui-ci est juste devenu un élément imbriqué à l'intérieur. Il s'agit de notre élément d'image. C'est assez simple. Faites de l'espace. Appelez la méthode AppendChild, puis nous pouvons insérer nos éléments d'image. Maintenant, revenez à notre code HTML. Nous avons créé cette section ici et celle-ci ici. Nous devons augmenter encore un niveau et accéder à notre wrapper de contenu, puis insérer ces deux DivWrappers. Sélectionnez notre enveloppe de contenu, allez dans AppendChild, puis nous devons insérer à la fois notre TextDivWrapper et l'image sur. Commençons par le texte, puis dupliquons cela. Encore une fois, dans l'enveloppe de contenu, nous allons le placer dans notre ImageDivWrapper. Encore une fois, avant d'aller plus loin, nous allons prendre notre ContentWrapper et nous assurer que ces deux div sont imbriqués à l'intérieur. Coller. Ouvre ça. Il y a nos deux plongées à l'intérieur. Le premier est le texte et le second est l'élément image. Bien. Nous y sommes presque, maintenant si nous remontons, voyons ce que nous devons faire ensuite. Nous avons le titre de niveau 1 et cette div de contenu complet imbriquée à l'intérieur de notre section. Nous devons saisir une section et faire deux autres méthodes AppendChild. Cette section était l'enveloppe de section appelée AppendChild, et le premier enfant que nous devons insérer est l'en-tête de section. L'en-tête de section se souvenir était notre en-tête de niveau 3, puis nous devons dupliquer cela, et le deuxième élément est notre enveloppe de contenu. Cela ne devrait pas être tout notre contenu maintenant en place, et la dernière chose à faire pour terminer cette section est d'ajouter nos trois classes. Nous avons la classe de contenu, nous avons la section image, ainsi que la section info. Ils sont tous ajoutés à nos divs. Allons donc vers le bas, et juste en dessous de l'ajout de classes, le premier est l'enveloppe de contenu. Nous pouvons ajouter la classe avec des attributs définis. Définir l'attribut prend en compte deux choses. Le premier est le nom de l'attribut, qui est classe, puis le nom de classe du contenu. Dupliquez cela deux fois de plus, et la seconde était pour notre ImageDivWrapper, cette image. Jetons un coup d'œil. Le nom de classe notre image était celui-ci juste ici. Retournez en bas. Image_Section. La troisième et dernière concerne notre enveloppe de div texte. Ce TextDivWrapper est la section info. Prenons ça et collons ça dans notre ficelle. Bien. Passons à ce dernier test dans le navigateur et nous devons tester l'enveloppe de section, qui est le wrapper principal entourant tout le contenu. Nous chargeons, ajoutons ça. Ouvrez-le et ce que je vais faire, c'est de faire défiler jusqu'à notre code HTML et de m'assurer que c'est exactement le même. Pour commencer, nous avons l'enveloppe de section, qui contient deux éléments, l'en-tête de niveau 3, qui est là, la div, la classe de contenu, puis tout le contenu supplémentaire est imbriqué à l'intérieur. Ouvre ça. Il contient deux divs. La première contient la classe d'informations et la seconde est la section image. Nous avons la section Infos, puis l'image. Nous devons donc nous assurer que nôtre est l'inverse. ne nous reste plus qu'à changer la position de ces deux éléments pour nous assurer que notre image est juste au-dessus de notre texte. Économisez, et nous essaierons encore une fois. Ouvrez l'enveloppe de section dans le contentdiv. Bien. Nous sommes maintenant de retour sur la bonne voie. Nous avons la section image en haut. À l'intérieur, il y a les éléments d'image. La section info en bas contient nos éléments p ainsi que notre bouton. Bien. Tout cela est maintenant en place, et la dernière chose à faire dans la vidéo suivante, c'est d'examiner certaines façons que nous pouvons utiliser pour ajouter cela à notre page principale. 40. Ajouter des éléments à la page: Cette vidéo se poursuit à partir de la dernière vidéo, qui ajoute des éléments à la page. Auparavant, nous avons répliqué cette section ici, en utilisant JavaScript en créant tous les éléments un par un. Nous avons ensuite ajouté ces éléments aux différents conteneurs, et lorsque nous nous sommes arrêtés avec cette référence de section complète, votre liste de références était l'enveloppe de section. Il est stocké à l'intérieur d'une variable, et nous pouvons le voir si nous le saisissons à l'intérieur la console. Ouvre ça. Nous l'avons déjà ajouté à la page que nous voyons, mais cela se trouve à l'intérieur de notre code HTML. Ce que nous allons faire, pour ne pas être confus, c'est de commenter cette section, actualiser et maintenant nous allons l'insérer dynamiquement à l'aide de JavaScript. Réfléchissons à ce que nous voulons réellement faire ici, nous avons cette section du corps en haut, et la section que vous avez créée est un enfant direct de ce corps, comme l'en-tête et les éléments de l'image. Ce que nous devons faire, c'est d'abord commencer par sélectionner le corps, dérouler dans notre script et nous pouvons y accéder avec document.body. Deux méthodes courantes que vous pouvez utiliser sont l'ajout et la préparation. Prepend ajoutera le nouveau contenu au début et ajoute le contenu jusqu'à la fin. Commençons par jeter un coup d'œil à Prepend. C'est une méthode, donc nous ouvrons les parenthèses, maintenant nous voulons ajouter notre enveloppe de section. Disons ceci et rafraîchissons le navigateur, et cela est ajouté au tout début de la section du corps. Nous pouvons également modifier cela pour qu'il soit ajouté et cette nouvelle section sera directement ajoutée à la fin du corps. autre chose que nous pouvons faire avec l'ajout, plutôt que d'ajouter un seul élément comme celui-ci, consiste à ajouter plusieurs éléments à notre page, et nous pouvons également ajouter différents types de contenu. Par exemple, nous pouvons ajouter une chaîne de texte semblable à JavaScript, appelée DomString. Disons n'importe quel texte à l'intérieur, puis séparez-le par une virgule, nous pouvons ajouter plusieurs éléments d'information, tels que plusieurs éléments de texte ou plusieurs éléments, donc disons également que nous voulions ajouter un élément, Voyons notre bouton, également notre ImageElement. Nous pouvons en ajouter autant que nous le souhaiterions. Maintenant, enregistrez et actualisez cela. Nous pouvons voir notre texte, nous pouvons voir notre bouton, notre image et le DOMString final à la toute fin. même, nous avons également une méthode appelée AppendChild. Essayons ça. Maintenant, si nous sauvegardons, puis actualisons cela, nous verrons une erreur immédiatement à l'intérieur de la console. Nous voyons cette erreur car il existe des différences entre la façon dont append et AppendChild gère l' insertion d'éléments ou de nœuds. AppendChild ne peut être utilisé que sur un seul nœud ou un seul élément de texte. Si j'en ai plusieurs à ajouter, la méthode append est la voie à suivre. De plus, comme vous le voyez ici, AppendChild ne peut pas être utilisé avec DOMStrings, donc nous ne pouvons pas l'utiliser pour insérer nœuds de texte comme nous l'avons fait auparavant. De plus, seule la méthode AppendChild nous renvoie une valeur de retour, et cette valeur de retour est un nœud nouvellement ajouté. Dans cette optique, revenons à notre région où nous étions auparavant. La raison pour laquelle nous avons cette zone est pour deux raisons, c'est parce que nous essayons d'ajouter des DOMStrings, ainsi que le nombre d' éléments que nous essayons d'ajouter. Si nous réduisons cela à un seul élément, passons au ButtonElement, nous ne devrions pas voir de problème. La méthode suivante pour couvrir est insérée avant. Insérer avant nous donne un peu plus de flexibilité dans l'endroit où nous voulons placer notre nouveau nœud, remplir et prenons notre en-tête par exemple. Pour cela, imaginez que nous voulions placer un nouveau contenu, qui est un nouvel élément entre le titre et la navigation, donc sur cette ligne juste ici, donc sur cette ligne juste ici, les méthodes que nous avons abordées jusqu'à présent ne placent que des éléments à au début ou à la fin. Au fur et à mesure que la méthode insert before retentit, elle peut être utilisée pour insérer notre nouvel élément avant cette navigation, supprimons d'abord cela, puis revenons à notre script. Nous devons d'abord sélectionner le parent. Dans notre cas, le parent est l'en-tête, donc Document.QuerySelector, déposez l'en-tête et installez-le à l'intérieur d'une variable, et aussi puisque nous voulons insérer cet élément avant la navigation, nous avons également besoin d'une référence à cela également, il se trouve donc à l'intérieur d'une variable appelée nav. Définissez cette valeur sur Document.QuerySelector, et cette fois, nous sélectionnerons notre navigation. Nous avons maintenant accès à deux éléments, tout d' abord, l'en-tête est l'élément parent, et le nav est l'élément dans lequel nous voulons insérer un nouveau nœud juste avant, et pour cela, nous sélectionnons le parent qui est l'en-tête, le nom de la méthode, qui est inséré avant, puis à l'intérieur des crochets, nous devons y passer deux choses. abord, c'est l'élément que vous souhaitez insérer, et nous allons réutiliser n'importe lequel de ces éléments d'en haut. Passons aux éléments du bouton, et comme le suggère le nom de la méthode d'insertion avant, nous devons ensuite ajouter le nom de l'élément dans lequel nous voulons insérer ce bouton auparavant, et dans notre cas, c'est la navigation élément. Essayons cela, actualisez le navigateur. Maintenant, notre bouton a été inséré avant cette navigation. Cela fonctionne en sélectionnant un parent qui est l'en-tête, puis en ajoutant un élément à l'intérieur. Une autre méthode qui fonctionne également sur le parent est ReplaceChild. Comme cela semble, il remplacera l' un des éléments à l'intérieur du parent par un nouveau que nous spécifions. Maintenant, commentons cela, et nous pouvons également utiliser l'en-tête comme parent une fois de plus. Le nom de la méthode, qui est ReplaceChild. ReplaceChild prend également deux valeurs, la première est les nouveaux éléments que nous voulons ajouter. Encore une fois, prenons le bouton à titre d'exemple. Ensuite, la deuxième valeur est l'ancien élément que nous voulons remplacer. Je vais utiliser la navigation pour cet exemple, rafraîchir. La navigation a maintenant été supprimée et remplacée par ce nouveau ButtonElement. Il s'agit de différentes façons d'ajouter de nouveaux nœuds ou éléments à une page Web à l'aide de JavaScript, et pour contourner cela, je vais supprimer les sections ici. Commentez cet exemple, et nous allons ajouter le SectionWrapper à la page, qui était une nouvelle section que nous avons créée dans la dernière vidéo. Bien. C'est maintenant sur la page, et dans la vidéo à venir, nous allons découvrir comment cloner des éléments et comment les supprimer. 41. Cloner et supprimer des éléments: Commençons cette vidéo en regardant éléments de clonage, que nous avons déjà. Les fichiers de démarrage lors du clonage et de la suppression éléments auront la même configuration que la vidéo précédente. Vers le bas et juste en dessous de ce commentaire ici, la première chose que nous devons faire pour cloner un élément est d'en sélectionner un. Vous pouvez choisir n'importe quel élément de votre choix. Mais pour plus de simplicité, je vais utiliser l'un des éléments de bouton que vous possédez déjà . Nous allons le sélectionner. Maintenant, sur ce nœud d'élément de bouton, nous pouvons appeler une méthode appelée nœud clone, ajouter les crochets et l'installer à l'intérieur d'une variable appelée bouton clone. Maintenant, si nous sauvegardons cela et accédons au navigateur dans les outils de développement en cliquant avec le bouton droit de la souris et inspectez-le dans la console. Maintenant, en utilisant ce nom de variable, saisissez-le dans le navigateur, c'est incertain. Nous revenons maintenant pour visiter cet élément de bouton. Si nous regardons de près entre ce bouton, nous ne voyons aucun contenu tel que le texte à l'intérieur. Vous pouvez regarder le bouton, vous pouvez voir ici que nous avons créé le nœud de texte acheter en ligne , puis nous l'avons ajouté à notre bouton. Par défaut, nous utilisons des nœuds de clone, ils clonent uniquement les nœuds d'éléments et non aucun contenu imbriqué à l'intérieur. Si nous voulons que le contenu soit à l'intérieur, nous devons transmettre une valeur booléenne de true. Cela copiera ensuite tout le contenu de l'intérieur. Nous pouvons le voir, si nous tapons encore une fois notre bouton clone, appuyez sur Entrée. Nous avons maintenant le contenu du texte de l'intérieur. Une chose à surveiller lors du clonage est cloner un élément possédant un ID unique, avec des identifiants, nous voulons toujours qu'ils soient uniques. Nous ne voulons pas avoir deux éléments de la même valeur. De plus, nous n'avons créé ici que cet élément de bouton. Nous n'avons pas encore ajouté cela au DOM. Voyons maintenant comment supprimer des éléments à l'aide d'une méthode appelée supprimer les commentaires enfants, je vais simplement cloner. La méthode de suppression est assez simple. Tout ce que nous avons à faire est de sélectionner notre nœud, de faire défiler vers le haut. Pour cet exemple, je vais supprimer l'en-tête de section, l'en-tête de section est un en-tête de niveau 3 qui a été créé ici, installé à l'intérieur de cette variable. Sélectionnez cette option. La première méthode que nous allons jeter un coup d'œil est de supprimer, prendre ceci, et c'est le titre juste ici. Si nous actualisons cela, le titre a maintenant été supprimé. En plus de cette méthode de suppression, nous pouvons également le faire sur le parent. Mais si nous faisons défiler jusqu'à notre code HTML, si nous regardons notre titre de niveau 3, ici, nous pouvons voir que le parent est cette section. Ensuite, en faisant défiler jusqu'à notre JavaScript où nous créons cela, nous avons une référence à cette section appelée enveloppe de section. Voici les parents. Allons commenter cela. Prenez l'enveloppe de section, nous l'appellerons la méthode remove child. Ensuite, nous plaçons à l'intérieur d'une référence, l'élément enfant que vous souhaitez supprimer. L'élément enfant imbriqué à l'intérieur est l'en-tête de cette section. Maintenant, si nous sauvegardons cela et actualisons le navigateur, nous pouvons voir que l'en-tête de la section a toujours été supprimé. Mais cette fois-ci, c'est juste fait d'une manière légèrement différente. Vous devriez maintenant commencer à comprendre comment nous pouvons utiliser JavaScript pour interagir avec le DOM. Un grand nombre de ces processus suivent un schéma similaire. Normalement, nous devons sélectionner un élément, nous pouvons les stocker dans une variable. Ensuite, nous appelons une méthode pour effectuer une certaine action. Nous pouvons faire des choses comme supprimer des éléments. Nous pouvons ajouter un élément à chaque fois. Nous pouvons créer et modifier des éléments pour construire notre code HTML exactement comme nous le voulons. À venir, vous aurez la chance de mettre tout cela en pratique avec un mini défi. 42. Mini défi: Bienvenue dans ce mini défi. Ce que j'aimerais que vous fassiez maintenant, c'est essayer quelques choses par vous-même ce que vous avez appris jusqu'à présent. Entrez dans le dossier de cette leçon, qui est le Mini Challenge, puis ouvrez-le dans le navigateur. Vous verrez dans le navigateur que nous avons une nouvelle section en bas. La tâche que j'aimerais que vous fassiez est recréer cette section en utilisant JavaScript, comme nous l'avons déjà fait dans les vidéos précédentes. Pour ce défi, j'ai également revu tous les styles existants dans sa propre feuille de style dédiée. Dans la page d'index, si nous faisons défiler vers le bas, nous pouvons voir une nouvelle section qui est celle-ci juste ici. Celui-ci a la classe des recettes, et c'est une section que j'aimerais que vous recréiez en utilisant JavaScript. Une fois que vous avez terminé, vous pouvez soit supprimer cette section du code HTML, soit commenter pour référence ultérieure. Puisque j'ai déjà ajouté le style de ce projet, il suffit d'ajouter ces classes chacun de ces éléments. Cette vidéo n'a pas de conseils, c'est juste une chance pour vous mettre en pratique tout ce que vous avez appris, comme créer de nouveaux éléments, créer des rappeurs, les ajouter ensemble, ajouter des noms de classe, et si vous les gardez organisés en différentes sections comme nous l'avons fait ci-dessous. Si vous n'avez rencontré aucun problème, comme vous pouvez le constater, j'ai également gardé en place le code précédent de la dernière section, afin que nous puissions l'utiliser comme référence si nécessaire. Essayez-le. Bonne chance et rappelez-vous qu'il n'y a pas de bonne ou de mauvaise façon de le faire. L'objectif est simplement de vous entraîner par vous-même et de reproduire cette section que nous avons déjà. 43. Boucler avec des éléments DOM: Bienvenue de retour. J'espère que le dernier mini-défi s'est bien passé pour vous et pour vous de créer une nouvelle section en utilisant JavaScript. Même lorsque vous créez une petite quantité d'éléments, les choses peuvent devenir assez répétitives. Imaginez créer une liste avec même cinq ou 10 éléments, créer tous les éléments d'élément de liste, ajouter le contenu, puis ajouter ces éléments aux parents sera beaucoup de lignes de code. Ou si nous voulions ajouter les mêmes noms de classes et beaucoup d'éléments différents, encore une fois, c'est beaucoup de travail et de répétition. Pour cela, nous pouvons utiliser une boucle, bien que nous ayons beaucoup plus d'informations sur les boucles dans une section ultérieure. Nous avons déjà examiné quelques exemples de bouclage dans la section tableau. Nous avons utilisé les méthodes de tableau qui correspondaient à chacune d'elles, et elles exécuteront une fonction pour chaque élément du tableau. C'était un moyen de réduire nos répétitions et cela peut également s'appliquer à tout ce qui est tel que nos éléments DOM. Dans cette vidéo, nous allons passer dans le fichier approprié et l'ouvrir dans le navigateur, puis faire défiler jusqu' à notre page d'index jusqu'à la section d'en-tête, et ici nous avons une liste non ordonnée. Puisque cela comporte plusieurs éléments d'élément de liste, je vais l'utiliser et les créer avec une boucle. Les boucles peuvent être utilisées pour créer ces éléments. Nous pouvons récupérer tous ces éléments, apporter des modifications, ajouter des classes et également supprimer du contenu. Revenons à notre section tout en bas. Juste en dessous de la section bouclage, nous pouvons commencer par saisir tous les éléments de notre liste. Rien de ce que nous n'avons jamais vu auparavant. Nous allons récupérer le document, puis nous pourrons les saisir avec le sélecteur de requête tous. N'oubliez pas que nous utilisons le sélecteur de requêtes, car nous avons plusieurs éléments de liste, glissez par nom de balise et stockons cela à l'intérieur d'une variable appelée éléments de liste. Vérifiez que cela fonctionne. Dans le navigateur, nous pouvons ouvrir la console et accéder à cette variable. Saisissez des éléments de liste et nous pouvons voir que nous sommes retournés est une liste de nœuds contenant nos deux éléments de liste. Nos deux éléments de liste ont déjà la classe d'un autre élément. Si vous aviez plusieurs éléments de liste, ajout dans ce cluster, chacun lorsque nous les créons sera un processus répétitif. Si nous devions les ajouter manuellement, ce que nous devrions faire est d'accéder à nos éléments de liste. Puisque nous avons plusieurs éléments, nous devons les sélectionner par numéro d'index. Nous pouvons ensuite accéder à la propriété class list , la méthode add. Ensuite, nous pouvons avoir un écran qui est un nouveau nom de classe. Maintenant, enregistrez-le et actualisez et accédez à nouveau aux éléments de la liste. Cela ajouterait ensuite la classe inline à notre premier élément. Comme mentionné précédemment, faire cela pour de nombreux éléments de liste différents rendrait les choses vraiment répétitives Nous allons donc jeter un coup d'œil à la façon dont nous pouvons vous aider en ajoutant une boucle. JavaScript dispose de nombreux types de boucles disponibles. Pour une boucle relativement simple que nous pouvons utiliser ce cas est une boucle appelée. Commentons cette ligne et juste en dessous, nous commençons par le mot-clé for. Ensuite, à l'intérieur d'ici, nous allons taper élément const de liste. Ce que nous faisons ici, c'est que nous sélectionnons nos éléments de liste qui contiennent plusieurs éléments, puis nous allons créer une nouvelle constante appelée élément. Nous pouvons accéder à cette variable d'élément sur chaque boucle. Pour la première boucle, la variable item sera notre premier élément. Pour la deuxième boucle, l'élément serait équivalent à notre deuxième élément, et ainsi de suite. Ouvrez les accolades et à l'intérieur d'ici, nous pouvons ajouter le code que vous souhaitez répéter pour chacun de nos éléments. En utilisant le même exemple que ci-dessus, plutôt que de l'ajouter à notre premier article comme celui-ci, nous pouvons accéder à notre variable d'article , puis faire exactement la même chose juste après. Copiez cette section et collez-la dans. la première boucle, cela ajoutera la classe en ligne au premier élément, puis répétera pour le deuxième élément, ceci et encore dans la console. Cet élément n'est pas défini et il doit simplement s'agir d'un élément de liste. Cela devrait faire disparaître les erreurs. Une fois de plus, nous pouvons accéder à nos éléments de liste. Nous pouvons voir que ces deux éléments ont maintenant la classe « Inline ». Nous n'avons pas enregistré beaucoup de code pour n'avoir que deux éléments, mais vous pouvez voir à quel point cela serait utile si nous avions peut-être cinq, 10 ou même plus d'éléments à appliquer. Un autre type de boucle, au lieu d'utiliser cette boucle générale for of consiste à accéder à l'une des méthodes intégrées de JavaScript. Rappelez-vous plus tôt lorsque nous avons mentionné que sélecteur de requêtes renvoie tous une liste de nœuds. Avec cette liste de nœuds, nous avons également accès à certaines méthodes. Nous pouvons les voir si nous passons au prototype et que nous l'ouvrons, nous avons accès à diverses autres méthodes, comme pour chacune d'elles. Ce sera la boucle que nous allons maintenant examiner. Pour ce faire, commentons notre forme de boucle. Juste en dessous, nous pouvons accéder à nos éléments de liste. La méthode intégrée que nous venons de mentionner était pour chacun. À l'intérieur d'ici, nous transmettons ensuite une fonction que vous souhaitez exécuter pour chacune de nos valeurs. Chacune de nos valeurs sera stockée à l'intérieur d'une variable appelée item. Ensuite, ouvrez les bretelles bouclées, nous ferons exactement la même chose que ci-dessus. Frottez notre élément, puis ajoutez ce nom de classe, enregistrez-le et actualisez le navigateur, accédez aux éléments de la liste. Le nom de notre classe inline est toujours appliqué à ces deux éléments. C'est ainsi que nous pouvons modifier, mais qu'en est-il de créer de nouveaux éléments tels qu' un élément de liste complète ? Eh bien, allons y aller. Tout d'abord, avant de faire cela, pour éviter toute confusion, si nous faisons défiler jusqu'à nos éléments de liste dans la section d'en-tête, commentez ces deux éléments. Nous pourrons ensuite les recréer à l'aide de JavaScript. En bas, commentez cet exemple. Ensuite, juste en dessous, nous pouvons commencer par un élément de liste régulier comme d'habitude. Pour ce faire, accédez au document. Ensuite, nous créons notre élément de liste à l' aide de la méthode create element. En passant dans la chaîne de LI. Puisque nous devons également modifier cela, nous pouvons ensuite le stocker à l'intérieur d' une constante appelée éléments de liste. Ensuite, nous devons créer notre nœud de texte pour notre premier élément. Encore une fois, stockez-le à l'intérieur d'une constante et nous dirons le texte de la liste. Cela correspond aux documents, puis nous utilisons la méthode appelée créer un nœud de texte. Le texte de notre premier article de liste était nos hamburgers. Ensuite, nous pouvons les fusionner en accédant d'abord aux parents, c' est-à-dire des éléments de liste. Ensuite, nous pouvons ajouter notre texte à l'aide de la méthode enfant mise à jour. Comme nous le voyons déjà, nous devons également ajouter une classe à chacun de ces éléments de liste. Saisissez les éléments de la liste. Puis ClassList.Add et le nom de nav-item. Il s'agit de la première liste complète créée. Il ne nous reste plus qu'à l'ajouter à la liste non ordonnée. Prenons cela avec Documents.QuerySelector. Vous devez sélectionner la liste non ordonnée. Ensuite, utilisez AppendChild pour ajouter notre élément de liste. Maintenant, enregistrez et rafraîchissez le navigateur, et rétabli est notre tout premier lien de nos hamburgers. Comme vous pouvez vous y attendre, nous devons répliquer toutes ces lignes de code pour chacun de nos éléments de liste. Nous n'avons que deux liens, mais cela répète encore beaucoup de code. Nous allons profiter d' une boucle pour nous aider dans ce domaine. Mais d'abord, nous avons vraiment besoin de quelque chose à parcourir. Pour cela, créons une constante appelée liens. Les liens seront un tableau contenant les valeurs de texte de chacun de nos éléments de liste. Le premier sera nos hamburgers séparés par une virgule. Le deuxième lien était celui de l'histoire. Utilisons la boucle for of pour parcourir tous ces liens. Nous dirons le lien const des liens et inclut toutes ces cinq lignes de codes ci-dessous. Déplacez-les à l'intérieur de notre forme de boucle. Si nous l'enregistrons initialement et que nous passons au navigateur, ce même code sera répété pour chacune des valeurs du tableau. Nous devons également modifier le contenu du texte du deuxième lien. ce faire, plutôt que d'avoir un texte codé en dur à l'intérieur du nœud de texte, ce que nous allons faire est de le supprimer et de le remplacer par la valeur du lien. La valeur du lien sera nos hamburgers sur la première boucle, puis le texte de l'histoire sur la deuxième boucle. Remplacez-le dans le navigateur et actualisez-le. Nos deux liens sont maintenant en place. Comme avant, lorsque nous n'avons que deux liens, nous n'avons pas enregistré beaucoup de code. Mais les avantages seraient beaucoup plus importants si nous avions plus de deux éléments de liste à créer. Par ailleurs, les baies ont également accès à chacune d'elles pour chaque méthode. Nous pourrions également utiliser cela si nous le voulions. Il suffit de supprimer cette section ici, récupérer notre tableau qui est stocké dans la variable links. Ensuite, nous pouvons utiliser chaque méthode. N'oubliez pas que pour chacun d'eux, nous allons exécuter une fonction pour chaque valeur du tableau, puis stocker cette valeur à l'intérieur d'une variable. Rappelez-vous que les bretelles bouclées vont à l'intérieur d'ici. Nous devons modifier notre code existant, déplacer ces deux accolades de l'extérieur. Prenez ces cinq lignes de code. Déplacez-les à l'intérieur de notre boucle. Rafraîchir, il obtiendra exactement le même résultat. Les boucles sont un excellent moyen d'effectuer des tâches répétitives dans la programmation. Nous examinerons également d'autres types de boucles plus tard dans le cours. 44. Introduction aux événements: Les vidéos à venir seront axées sur les événements. Il s'agit là d'une partie très utile de JavaScript. Les événements sont comme des événements qui se produisent dans le navigateur, comme un clic de bouton, une souris qui passe au-dessus d'une image, un bouton clavier a été enfoncé. Lorsque l'un de ces événements se produit, il nous envoie un signal pour que nous fassions quelque chose. Souvent, c'est maintenant que ces événements se produisent , puis exécutent du code tel qu'une fonction. Par exemple, vous aurez probablement rempli un formulaire sur une page Web, comme un formulaire de contact, puis cliquez sur Envoyer. Eh bien, lorsque ce formulaire est envoyé, il trouve également un événement de soumission. Nous pourrions attacher un événement de clic à un élément tel qu' un bouton et cela pourrait exécuter une fonction chaque fois que ce bouton est cliqué. De plus, si vous avez déjà visité une page Web et que vous avez essayé de partir, déplaçant la souris sur le bouton Fermer le navigateur en haut, je souhaite voir une promotion d'une fenêtre contextuelle à l'écran. Eh bien, ce sont tous les événements JavaScript qui se produisent en arrière-plan. Nous pourrions attacher un événement de survol à une image qui peut révéler davantage de l'image lorsque le pointeur se déplace au-dessus de celle-ci. Comme vous pouvez l'imaginer, les possibilités sont immenses. N'oubliez pas que JavaScript interagit avec notre code HTML via le DOM. Encore une fois, nous mélangeons ici un JavaScript avec nos éléments HTML. Dans cette optique, nous devons utiliser l'interface des événements DOM. La plupart des éléments HTML peuvent accepter qu'un écouteur d'événements soit attaché et il existe plusieurs façons de le faire. Nous en découvrirons quelques-uns dans la vidéo à venir. 45. Écoute des événements: Bienvenue de retour. Nous avons maintenant une compréhension de base des événements. Nous allons maintenant examiner comment nous pouvons les écouter, puis réagir à ces événements. Nous sautons dans ce fichier qui écoute les événements, et nous l'ouvrons dans le navigateur. Puisque nous poursuivons notre projet No Meat Burgers, ce fichier commence à devenir un peu plus volumineux que ce que nous voulons . Nous allons donc créer quelques nouveaux fichiers JavaScript, qui vont aidez-nous à organiser tout ce JavaScript. Tout d'abord, puisque nous avons créé de nombreux éléments à l'intérieur de notre section Script, nous allons créer un nouveau fichier dans ce dossier de leçons. Celui-ci va s'appeler elements.js. Pour cela, il ne nous reste plus qu'à saisir tout le contenu de nos scripts. Tous les éléments que nous avons créés dans les vidéos précédentes, sortent cela, laissant une section de script vide, collez dans notre nouveau fichier et enregistrez-le. Ensuite, nous allons créer un nouveau fichier qui va suivre la prochaine section, qui est le events.js. Avoir plusieurs fichiers comme celui-ci est tout à fait correct. Tout ce que nous devons faire est de nous assurer qu'ils sont liés à l'intérieur de notre page d'index, donc nous conservons le script, mais nous devons ajouter la source pour pointer vers ces deux fichiers. Le premier est le elements.js, dupliquez cela, et le second était pour nos événements. Nous pouvons vérifier que cela fonctionne également en enregistrant et en actualisant le navigateur, et nous voyons toujours tous les éléments que nous avons créés dans ce fichier. Nous allons maintenant passer à la façon dont nous pouvons travailler avec événements jusqu'à ce qu'il soit maintenant pour un événement. Nous avons d'abord besoin d'un moyen de l'attacher à l'un de nos éléments, et il existe différentes façons de le faire. Si nous passons à la documentation de Mozilla. la documentation de Mozilla, dans une section intitulée GlobalEventHandlers, vous n'avez donc pas besoin de quitter cette page si vous ne le souhaitez pas, mais cela va nous donner une liste de nombreux événements courants gestionnaires que nous pouvons utiliser, et nous pouvons les placer sur nos éléments HTML. Par exemple, nous pouvons écouter de nombreux événements tels que onfocus, onblur, onclick, ce qui est vraiment courant. Nous pouvons écouter un élément à droguer et bien d'autres choses qui nous permettent de le couvrir pour de nombreux événements différents. Nous pouvons attendre que la page finisse le chargement avant de commencer une fonction, nous pouvons écouter qu'une souris passe au-dessus d'un élément, laisse un élément, ainsi que des choses comme en lecture et en pause qui sont liées à la lecture audio et vidéo. Comme vous pouvez le constater, ces gestionnaires d'événements ont le préfixe on. Ce que nous allons faire, c'est passer à notre projet et commencer par écouter un clic avec le gestionnaire d'événements onclick. Dans la page Index, nous allons chercher notre image, l'image du burger juste à l'intérieur, puis à l'intérieur en tant qu'attribut, nous pouvons ajouter onclick. Onclick va ensuite exécuter n'importe quel morceau de code JavaScript, sorte que nous puissions exécuter une fonction ou exécuter quelque chose de très simple comme une alerte avec le texte des clics. Enregistrez ceci, et maintenant cela est attaché à nos éléments d'image. Rafraîchissez la page, puis faites défiler vers le bas jusqu'à l'image correcte juste à côté du titre végétalien ultime. Cliquez dessus, puis c'est notre alerte en haut. Si nous essayons de cliquer sur différentes images, cela ne fonctionne pas car cela s'applique qu'à un seul élément. Si nous allons un peu plus loin, nous pouvons également accéder à notre fichier events.js et ajouter une fonction qui s' exécutera lorsque cet élément aura été cliqué. Comme avant, nous créons une fonction, et nous dirons « ChangeImage ». Maintenant et je vais vérifier que cela fonctionne avec une alerte. Nous dirons « Cliqué ». Enregistrez ce fichier et revenez sur notre page d'index plutôt que exécuter cette alerte à l'intérieur d'ici. Nous pouvons supprimer cela et transmettre le nom de notre fonction qui était « ChangeImage ». Sauvegardons cela dans le navigateur. Nous pouvons essayer toutes ces images, puis la dernière figure notre fonction à l'intérieur du fichier séparé. Cette méthode d'ajout d'un gestionnaire d'événements en tant qu'attribut est appelée gestionnaire d'événements en ligne. Cela fonctionne très bien, mais cela peut être considéré comme une mauvaise pratique. C'est parce qu'il mélange notre code HTML et notre code JavaScript. Ce que nous pouvons faire, c'est de supprimer cela et de laisser notre code HTML intact, puis nous pourrons écouter cela dans notre fichier d'événements. Ce que je vais faire, c'est créer une référence à cet élément, où Document.QuerySelector, puis nous pouvons sélectionner n'importe lequel de nos éléments. Pour cela, je vais saisir notre image d'en-tête, qui est en haut. Puisque nous avons plusieurs images, nous avons également besoin d'un identifiant unique Nous allons donc placer un ID de HeaderImage, puis nous pourrons le sélectionner à l'intérieur de nos événements. s'agit d'un identifiant, nous devons également placer dans le silence plus dans notre HeaderImage, puis le stocker à l'intérieur d'une variable. Nous saisissons nos images ici, nous avons une fonction à exécuter, donc nous avons maintenant besoin d'un moyen de les relier ensemble. Eh bien, la façon dont nous pouvons le faire est d'accéder à notre élément, qui est HeaderImage, puis nous pouvons accéder directement onclick et le définir comme égal à nos deux fonctions. Il s'agit de ChangeImage. Faisons une grève, rechargeons le navigateur, cliquons sur notre image principale, et cela exécute notre fonction. Nous ne voulons pas simplement faire une alerte, mais dans ce cas, nous voulons pouvoir faire quelque chose sur l'image. Nous pouvons utiliser n'importe quelle technique apprise jusqu'ici, comme l'ajout de classes ou même CSS. Au lieu de l'alerte, nous allons saisir notre HeaderImage, définir le style, puis définir la propriété width qui est égale à une chaîne de 50 %. Nous allons essayer encore une fois. Cette même technique fonctionne exactement de la même manière avec tous les différents gestionnaires d' événements que nous venons de regarder auparavant. Par exemple, si nous voulions exécuter cette fonction particulière lorsque la souris passe au-dessus de cette image, il suffit de changer onclicked pour qu'il s'agisse d'une valeur différente, telle que onmouseover, actualise, et dès que cette souris passe au-dessus de l'image, ce code s'exécute maintenant. Cette configuration est un peu meilleure car tout notre JavaScript est maintenant contenu dans son propre fichier séparé dehors du code HTML. Mais l'un des inconvénients de cette approche est que nous voulions déclencher plusieurs fonctions. Supposons que nous copions rapidement cette fonction et que nous en avons collé une nouvelle appelée hi, nous pouvons ajouter une alerte rapide à l'intérieur d'ici. Ensuite, si nous dupliquons également cette ligne de code ici, nous allons également exécuter notre deuxième fonction qui est bonjour. Faisons un sauvetage et voyons ce qui se passe. Rafraîchissez, déplacez le survol de la souris, nous voyons notre alerte, mais la taille de l'image ne change pas. Lorsque nous configurons plusieurs fonctions répondant au même événement, elle remplacera la précédente, ce qui elle remplacera la précédente, signifie que seule la dernière fonction sera exécutée. Nous voyons cela en action car tout ce que nous voyons dans le navigateur était notre alerte. Une autre façon d'y parvenir consiste à utiliser une méthode appelée ajouter un écouteur d'événement. Cette approche remplacera ces deux lignes de code ici. Nous devons toujours accéder à nos éléments, qui est l'image d'en-tête, mais cette fois, nous la transmettons dans une méthode appelée AddEventListener. À l'intérieur d'ici, la première chose que nous transmettons est le nom de l'événement que vous voulez écouter. Passons à un événement de clic. Tous ces événements sont exactement les mêmes qu'avant, mais nous n'utilisons tout simplement pas le préfixe on. Séparés par des virgules, nous pouvons même écrire dans une fonction comme celle-ci, ou plutôt passer une référence à l'une des fonctions que nous possédons déjà. Optons pour une ChangeImage, et nous pourrions essayer celle-ci dans le navigateur. Cliquez sur l'image, et celle-ci fonctionne maintenant. L'un des avantages de l'utilisation de cette méthode AddEventListener est qu'elle autorise également plusieurs fonctions. Si nous devions dupliquer cette ligne, contrairement au moment où nous avons ajouté le gestionnaire d'événements onclick avant ou onmouseover, nous pouvons passer une deuxième fonction et ces deux fonctions s'exécuteront désormais dans le navigateur, ainsi, il y a notre alerte, et l'image sera réduite à 50 %. C'est vraiment utile si nous avons plusieurs fonctions que nous voulons exécuter, mais je vais simplement supprimer cet exemple hi et laisser une image de changement soignée. AddEventListener présente également d'autres avantages. Une autre est que nous pouvons également supprimer le code d'écoute d' événements lorsqu'il n'est plus nécessaire. Il dispose également d'un paramètre, ce qui signifie que nous pouvons également ajuster le déclenchement de l'événement. Mais ces deux éléments seront abordés plus en détail au cours de cette section. Nous avons également beaucoup d'événements différents dans notre programme, les outils de développement peuvent vraiment nous aider dans ce domaine. Si nous cliquons avec le bouton droit de la souris et « Inspecter » dans Chrome, nous pouvons utiliser l'inspecteur pour pointer vers l'un de ces éléments que nous voulons vérifier. Dans notre cas, si nous cliquons sur cet en-tête et que nous descendons ensuite dans l'onglet Event Listeners, nous pouvons voir que nous avons un écouteur de clic là-dessus, et si nous ouvrons cela, nous pouvons voir, attaché à celui-ci est un Cliquez sur Listener, qui exécute ensuite notre fonction ChangeImage. C'est vraiment utile pour déterminer quels auditeurs d'événements sont attachés à l'un de nos éléments. Pour résumer, nous avons abordé trois façons d'attacher un écouteur d'événements à un élément. Tout d'abord, nous avons ajouté des attributs HTML en ligne. Bien que ce soit probablement quelque chose que vous devriez éviter de garder notre code HTML propre et séparé de notre JavaScript. Nous avons ensuite appelé l'écouteur d'événements directement sur les éléments, ce qui a conservé tout notre code JavaScript dans un seul fichier. L'une des limitations était que nous ne pouvions exécuter qu'une seule fonction, un seul morceau de code de cet exemple, et finalement, nous avons examiné la méthode AddEventListener, qui non seulement a résolu ce problème, mais il dispose également d'autres fonctionnalités disponibles, que nous découvrirons dans les prochaines vidéos. 46. Écoute d'événements multiples et de données d'événements: Les exemples précédents que nous avons examinés ont ajouté un écouteur d'événements à un seul élément. Mais il se peut que nous souhaitions ajouter le même écouteur d'événements à plusieurs éléments. Jetons un coup d'œil au fichier de cette leçon, qui est à l'écoute de plusieurs événements et données d'événements. Vous pouvez jeter un coup d'œil à la façon de procéder. L'exemple que nous allons utiliser pour cela se trouve au bas de notre page d'index. Vous remarquerez qu'avec ces deux sections de recettes en bas, j'ai ajouté une étoile en haut de chacun de ces articles. Nous pouvons les voir si nous descendons au bas de notre code HTML. Dans chacun de ces articles, nous avons un élément de span tout en haut. C'est en haut de ces deux articles. Ce que nous voudrions peut-être faire est d' ajouter un écouteur d'événements à chacune de ces étoiles, ce qui les ajoutera ensuite à une liste de favoris. Nous pourrions également avoir de nombreuses autres recettes répertoriées et nous voudrions peut-être ajouter le même écouteur d'événements à chacune d'elles. La sélection de chacune de ces recettes individuellement et l'ajout d'un auditeur d'événements nécessiterait beaucoup de travail. Au lieu de cela, nous pouvons utiliser une boucle pour y remédier. Dans la barre latérale, passons au fichier events.js. La première chose que nous devons faire à l'intérieur du fichier d'événements est de sélectionner tous ces éléments de span avec lesquels nous voulons travailler. Dans la page Index, nous pouvons voir que ces éléments de span ont une classe « add ». Nous allons sélectionner ces deux options avec QuerySelectorAll. Faisons ça. Nous allons stocker cela à l'intérieur d'une constante appelée AddButtons. Définissez cette valeur sur Document.QuerySelectorAll. Ensuite, nous pouvons transmettre notre requête sous forme de chaîne. Il s'agit d'une classe, alors utilisez le point sur le nom de classe de add. Rappelez-vous que lorsque nous avons utilisé QuerySelectorAll, c' est qu'il retournera une collection HTML que nous pouvons parcourir en boucle en utilisant FoReach. Tout d'abord, sélectionnez tous nos boutons avec AddButtons. La méthode qui est FoReach, FoReach prend n'importe quelle fonction à exécuter pour chacun des éléments, qui se trouve dans notre collection. Par conséquent, chaque élément a également besoin d'un nom de variable. Nous appellerons ce bouton pour rester simple. Ensuite, comme nous l'avons vu plus haut avec notre seul élément, nous pouvons également utiliser AddEventListener. Nous pouvons accéder à notre bouton.AddEventListener. Ensuite, à l'intérieur, nous allons écouter un événement de clic séparé par une virgule. Nous voulons ensuite exécuter une fonction. Nous n'avons pas encore créé de fonction, mais nous allons le faire dans une seconde. Je vais appeler ça AddToFavorites. C'est ainsi que nous ajoutons notre écouteur d'événements à chacun des boutons de notre boucle. Ensuite, nous pourrons créer cette fonction. C'était AddToFavorites. Pour l'instant, nous allons simplement ajouter une alerte de test pour nous assurer que tout fonctionne. Je vais ajouter. Dites ceci, et sur le navigateur, en bas, cliquez sur notre étoile. C'est notre alerte, cliquez sur d' autres éléments pour vous assurer que cela ne fonctionne pas. Ensuite, nous pourrons essayer notre deuxième étoile. Cela s'ajoute maintenant à nos deux étoiles. C'est ainsi que nous ajoutons un écouteur d'événements à plusieurs éléments, mais nous voudrions souvent également savoir quel élément a été cliqué si nous ajoutions simplement du cliqué si nous ajoutions simplement CSS ou quelque chose de très générique. Peu importe sur lequel nous cliquons. Mais pour notre cas d'utilisation particulier, nous voudrions peut-être savoir exactement sur quelle recette a été cliquée. Ensuite, nous pourrions rediriger cette page de recettes et assurer que la page correcte est ajoutée à nos favoris. La façon d'y parvenir, avec beaucoup d'autres choses, consiste à accéder aux données de l'événement. Pour accéder aux données de nos événements à l'intérieur de la fonction, nous les transmettons en paramètre. Je vais nommer cette variable e, mais son nom appartient entièrement à nous, mais il est courant de la voir appelée événement ou e pour faire court. Il contient l'objet événement. Cet objet d'événement contient une énorme quantité de données auxquelles nous pouvons accéder. Vous verrez ça. Placez dans un journal de console avec la valeur e et supprimez notre [inaudible] pour cet exemple, puis actualisez le navigateur et ouvrez les outils de développement dans la console et cliquez sur l'une de ces étoiles. Cela nous permettra ensuite d'accéder à toutes les informations sur les événements. Puisque nous avons utilisé une souris, il s'agit d'un événement pointeur et cela nous donnera beaucoup d'informations différentes sous la forme d'un objet. Nous pouvons le constater avec les accolades bouclées et nous avons beaucoup de paires de valeurs clés. Par exemple, nous pouvons voir l'emplacement du clic, c' est-à-dire l'axe X et Y. Nous pouvons voir quelque chose appelé bulles, que nous allons jeter un coup d'œil très prochainement et beaucoup plus d'informations concernant cet événement. L'une des informations les plus couramment utilisées à l'intérieur de cet événement est la section cible. Si nous ouvrons cela, cela nous donne accès à nos éléments sur lesquels nous avons cliqué. Dans notre cas, l'accès à e.target à l'intérieur de JavaScript permettrait d'accéder à nos éléments de span et toutes les informations contenues à l'intérieur. Mais notre cas d'utilisation est un peu plus complexe. Si nous examinons la structure de notre code dans notre page d'index, ce que nous voulons faire est de saisir le contenu de notre titre de niveau quatre pour l'ajouter à notre liste de favoris. Mais si nous cliquons sur cet élément de span juste ici, comment accéder aux informations à partir de deux lignes juste en dessous ? Eh bien, la réponse se trouve également dans cette section cible. Tout est alphabétique. Si vous faites défiler jusqu'à la section p, la première chose que nous devons faire est de passer un niveau à notre article. Cet article est le wrapper parent de toutes ces informations. Nous pouvons accéder à tous ces contenus à l'intérieur du nœud parent. Nous pouvons voir l'article ici. Ouvre ça. Il contient, si nous faisons défiler vers le bas, une liste d'enfants sous la forme d'une collection HTML. À l'intérieur des enfants, nous pouvons voir que nous avons les éléments de span avec la classe d'ajout en haut. Ensuite, notre image, notre titre de niveau 4 , puis la div vers le bas. Nous pouvons accéder à toutes les informations de cet objet exactement comme vous le feriez avec n'importe quel autre objet. Passons à nos événements. Ce que nous devons faire, c'est accéder à la cible, qui est la première section, puis au nœud parent. Après le nœud parent, les enfants sont arrivés. Ensuite, puisque la section pour enfants est une collection HTML, nous y accédons par le numéro d'index. Tout comme pour un tableau, nous passons entre crochets et le numéro d'index de deux, qui est un en-tête de niveau 4. Sauvegardons ceci et vérifions qu'il contient notre en-tête de niveau 4. Rafraîchir Maintenant, si nous lançons de ces événements avec les étoiles, il va nous donner notre H4 Spicy Bean Burger. Notre deuxième, rafraîchissez-vous. Nous allons essayer l'Ultimate Vegan. Bien. Nous avons maintenant les éléments que vous voulez. Nous pouvons maintenant approfondir cela et sélectionner le nom avec notre texte intérieur. Donc, les enfants. Texte intérieur. Essayez encore une fois. Cliquez sur les étoiles et vous verrez ensuite le texte de chacune de nos recettes. C'est un long chemin pour obtenir le nom de la recette que vous voulez, mais parfois pour obtenir les informations correctes, il suffit de continuer à fouiller dans l'objet pour obtenir les informations dont nous avons besoin. Je ne vais pas créer de liste de favoris pour ce projet, mais c'est ainsi que nous pourrions y arriver. Vous pouvez saisir le nom de chacun de ces hamburgers , puis le pousser vers un tableau ou même une base de données. L'un des éléments d'information que nous voyons également à l'intérieur de l'objet de l'événement était quelque chose appelé bulles. C'est ce que nous allons examiner dans les prochaines vidéos lorsque nous découvrirons tout sur la propagation des événements. 47. Propagation d'évènement: Cette vidéo va regarder quelque chose d'important qui se produit en coulisses lorsque vous traitez des événements. Mieux encore, nous allons ajouter un autre écouteur d'événements dans notre projet de démarrage. Ouvrez le projet de démarrage, qui est la propagation des événements, puis vous verrez dans le navigateur que nous avons le même projet que celui de la vidéo précédente. En regardant la section recette en bas, nous avons nos deux recettes, et nous voudrions peut-être étendre la fonctionnalité des recettes. Par exemple, nous pourrions cliquer sur l'un d'eux , puis développer la recette. Nous pourrions ouvrir cela dans une fenêtre contextuelle ou même rediriger la page complète des recettes. Nous allons passer à notre events.js à l'intérieur de ce dossier, puis simuler cela en sélectionnant d'abord nos recettes. Nos deux recettes, si vous vous en souvenez, sont stockées dans les sections Article. Nous allons commencer par saisir ces deux articles et les stocker à l'intérieur d'une constante. Mettons ça en place. Notre constante et nous dirons titres de recette et définirons cela comme un document, puis désélectionnez plusieurs éléments, nous utilisons la requête sélectionner tous les passages dans notre article. Maintenant, comme cela renvoie plusieurs éléments, nous devons parcourir nos titres de recettes en boucle, et nous pouvons le faire avec une boucle pour chaque boucle. Pour chacun, nous allons prendre en charge une fonction qui sera exécutée pour chacun de nos éléments. Dans notre cas, nous avons deux éléments distincts. Nous les stockons à l'intérieur d'une variable appelée title. Maintenant, nous examinons ces deux articles, ce que nous voulons faire est d'ajouter un écouteur d'événements à ces deux articles. Nous avons examiné comment procéder précédemment, nous sélectionnons d'abord chaque élément individuel, puis nous pouvons utiliser ajouter un écouteur d'événement. Cela permet d'écouter un événement de clic , puis d'exécuter une fonction appelée Redirect. Bien sûr, nous n'avons pas encore créé cette fonction de redirection qui créons cela juste au-dessus. Maintenant, tout ce que vous allez faire est de créer une alerte. Faites-nous savoir que cela fonctionne. On dira que la recette a cliqué. De plus, nous pouvons transmettre les données de l'événement. Revenez dans le navigateur et rechargez la page. Cliquez sur l'un de ces articles et cela appellera notre fonction une fois terminé, nous pourrons essayer cela avec le deuxième article. Tout cela fonctionne comme prévu. Mais qu'en est-il si on essayait de cliquer sur l'étoile ? Tout d'abord, nous voyons le titre Ultimate Vegan, et nous l'avons mis en place dans les vidéos précédentes. Mais qu'en est-il si nous cliquons sur « OK » ? Eh bien, nous verrons ensuite notre deuxième couche, laquelle on clique sur la recette. Nous ne nous y attendons peut-être pas parce que nous avons cliqué sur l'Étoile et non sur l'article réel. Eh bien, la raison en est due aux différentes phases qui se sont produites pendant l'événement. Dans les navigateurs modernes, les gestionnaires d'événements feront par défaut ce qu'on appelle bouillonner. Si vous pensez à une bulle dans l'eau, une bulle flottera toujours jusqu' au sommet et c'est ce qui se passe avec nos événements. Nous pouvons le voir mieux si nous allons dans notre index.html et que nous trouvons l'un de nos articles. Lorsque nous déclenchons un événement dans le navigateur, par exemple en cliquant sur un élément, la phase de bouillonnement entraînera non seulement le réglage de cet événement de clic, mais déclenchera également tout élément intérieur des autres parents. des éléments aussi. C'est pourquoi, lorsque nous cliquons sur ce bouton Ajouter juste ici, il s'adressera également aux éléments parents qui sont l'article et déclenchera également tous les événements associés à cet article. Non seulement cet article parent continuera également à bouillonner jusqu'aux autres parents, comme une div, cette section et il continuera aller jusqu'au haut du corps, au HTML, au document et ensuite enfin, l'objet fenêtre. Il déclenchera également tous les événements attachés à ces éléments. Ces événements bouillonnants peuvent être utiles. Par exemple, plutôt que d'ajouter un écouteur d'événements à de nombreux éléments enfants différents, nous pourrions simplement ajouter un seul écouteur d'événement aux éléments d'un parent et nous pouvons tester en ajoutant un événement simple au corps. Allons à la section du corps d'ouverture. Nous allons ajouter un gestionnaire d'événements en ligne appelé On-Click et le définir comme une alerte, qui va générer la chaîne de corps. Maintenant, actualisez le navigateur, cliquez sur n'importe quel élément ira pour notre article, donc nous verrons la recette cliquée et ensuite notre élément corporel a également été tiré en haut. Pour supprimer cet exemple, nous n'avons pas besoin de cela dans notre projet, mais cela nous donne une bonne indication de ce qui se passe dans le navigateur. Il y a également le contraire disponible et c'est ce qu'on appelle la phase de capture. Cela commence tout en haut, qui est l'objet fenêtre, qui est l'objet fenêtre, puis traverse nos éléments jusqu' au bas en exécutant n'importe quel événement attaché à l'un des éléments du chemin. Il s'agit de bouillonner et de capturer qui sont tous deux liés à des événements de feu s'ils sont en route vers le haut ou le bas, et il y a aussi un troisième terme, appelé Cible. La cible est les éléments réels qui déclenchent des événements, tels que l'événement article que nous venons de créer. Sachant que d'autres événements imbriqués sont également déclenchés sur le chemin vers le haut, tout en descendant, cela nous laisse différentes manières de gérer cela. Nous voudrions peut-être quand même que tous les événements se déclenchent, mais peut-être faire le contraire de ce que nous avons actuellement. Actuellement, nous voulons cliquer sur notre bouton Ajouter, cela se déclenchera en premier lorsque vous cliquez dessus, suivi de l'élément extérieur de l'article. Nous voyons cela selon l'ordre de l'alerte à l'intérieur du navigateur. Mais nous voudrions peut-être également les déclencher dans l'ordre inverse, ou peut-être que nous ne voulons pas qu'aucun des événements soit déclenché du tout, seulement les événements des éléments sur lesquels nous avons cliqué, et c'est un moyen de couvrir ces deux événements. situations. Tout d'abord, nous examinerons comment inverser l'ordre dans lequel ces événements sont déclenchés et comment le faire, si nous vérifions simplement à l'intérieur du navigateur, lorsque nous cliquons sur l'étoile, nous voyons le titre qui est végétalien ultime, suivi de l'événement de l'article sur lequel on a cliqué sur la recette. Cela fonctionne de l'intérieur vers l'extérieur et nous allons inverser cela en passant à la phase de capture. Pour ce faire, c'est d'aller à l'intérieur de nos événements, puis à l'intérieur de notre écouteur d'événements ajouter, d'ajouter une troisième valeur séparée par une virgule et nous allons définir la valeur vraie. True permet d'activer la phase de capture plutôt que le bouillonnement par défaut. Si nous le voulions, nous pourrions également le configurer en tant qu'objet options, où nous définissons la capture comme étant vraie. Ces deux approches sont exactement les mêmes et faciles à utiliser. vigilance de passer de la phase de bullage à la phase de capture signifie que maintenant si nous cliquons sur notre bouton, qui est la section Ajouter juste ici, plutôt que de travailler de l'intérieur vers l'extérieur, l'événement de l'article extérieur sera lancé en premier, suivi de cet art. Nous pouvons essayer cela si nous actualisons le navigateur, cliquez sur l'étoile. Nous voyons d'abord la recette cliquée qui a été associée à l'article, suivie de nos éléments de span juste après. Le terme général de cette phase de bouillonnement et de capture est appelé propagation des événements et nous pouvons également arrêter complètement cette propagation. Cela signifierait uniquement l'élément exact qui déclenche l'exécution plutôt que dans l'arborescence. Par exemple, lorsque nous avons cliqué sur le début, si nous voulions uniquement exécuter la fonction Ajouter aux favoris plutôt que celle que nous venons de créer auparavant, nous pouvons accéder à cette fonction et accéder à notre événement information, qui nous donne accès à une fonction appelée Stop Propagation. Nous pouvons également supprimer l'objet options ci-dessous, ce qui définit la phase de capture. Rafraîchissez le navigateur et maintenant si nous essayons cela en cliquant sur l'étoile, nous pouvons voir que le titre de Vegan ultime est lancé. Cliquez sur « OK », aucun autre événement n'est déclenché. Cela peut être assez complexe si c'est la première fois que vous êtes initié à cette chose. Mais la façon la plus simple de se souvenir est que si vous avez plusieurs événements, nous avons une option dans laquelle nous voulons déclencher l'un de ces événements sur les éléments parents ou enfants, ou comme nous venons de le faire. découvert que nous pouvons également inverser l'ordre et arrêter toute propagation et complètement. La raison pour laquelle nous avons à la fois les étapes de capture et de bouillonnement est historique. Il y a longtemps, lorsque les navigateurs étaient moins standardisés, certains navigateurs utilisaient la phase de capture et d'autres utilisaient des bulles, ce qui a conduit à la norme actuelle où ces deux navigateurs sont désormais implémentés dans les navigateurs modernes. 48. Organiser des événements une fois: Bienvenue de retour. Nous allons maintenant examiner comment nous ne pouvons organiser un événement qu'une seule fois. Nous allons entrer dans le fichier actuel qui est Exécuter des événements une fois, et nous l'ouvrirons dans le navigateur. Il y a également un fichier events.js joint avec l'exemple similaire à ce que nous avons regardé dans les vidéos précédentes. Nous savons qu'à partir des boutons étoiles en haut, nous allons parcourir toutes ces boucles, la boucle FoReach de l'EventListener qui va maintenant répertorier pour un clic, puis exécuter notre fonction AddToFavorite. Tout ce qu'il fait, c'est de créer une simple alerte avec le texte, soit le burger végétalien ultime soit le burger aux haricots épicés. Un peu plus tôt, lorsque nous avons examiné différentes façons d'écouter les événements. J'ai mentionné qu'il y a un peu plus à AddEventListener que pour quoi nous l'utilisons actuellement. Nous venons de regarder l'une des fonctionnalités précédemment, qui consistait à ajouter un objet options et à définir la phase de capture sur true. Parallèlement à cela, une autre option est de restreindre l'événement, le seul qui soit jamais appelé une fois. C'est assez simple, tout ce que nous devons faire, c'est de changer cela pour qu'il soit une fois et que cela soit vrai. Voyons quel effet cela a à l'intérieur du navigateur. Maintenant, si nous rechargeons et cliquons sur l'une des étoiles, nous voyons le titre de vegan ultime. Tout cela fonctionne très bien, mais qu' est-il si vous essayez de cliquer dessus une deuxième fois ? La deuxième fois, nous ne voyons pas le texte de l'ultime vegan, mais nous voyons le texte de la recette cliqué. Cela est logique car nous avons configuré l'écouteur d'événements pour le titre pour qu'il ne s'exécute qu'une seule fois. Par conséquent, il se réfère à l'article qui l'entoure puisque l'événement étoiles n'est plus actif. C'est un excellent moyen d'ajouter un écouteur d'événements à usage unique pour être appelé une seule fois. 49. Empêcher le comportement par défaut et l'option passive: Lorsque nous déclenchons un événement, il présente également un comportement par défaut qui se produit dans le navigateur. C'est logique parce que nous voulons que l'événement fasse réellement quelque chose. Un exemple simple est une case à cocher. Allons dans les fichiers de démarrage corrects, qui sont Empêcher le comportement par défaut et l' option passive et ouvrons le fichier index.html. Allons en bas après la dernière section, et juste au-dessus de nos scripts, nous allons créer une entrée avec le type de case à cocher et l'ID de la case à cocher. Enregistrons cela et ouvrons dans le même dossier le fichier events.js. Nous pouvons commencer à saisir cet élément. N'importe où à l'intérieur d'ici, c'est bien et nous allons saisir une référence à cette case à cocher, stocker à l'intérieur d'une constante. Nous écrivons document.queryselector, puis nous allons le transmettre dans l'ID en utilisant le hachage. L'ID que nous avons donné à l'entrée était la case à cocher, puis nous pouvons accéder à notre case à cocher en utilisant une méthode AddEventListener, puis nous allons écouter un clic sur cet élément. Cela doit également déclencher une fonction que nous appellerons HandleClick, puis configurer cette fonction juste au-dessus. La fonction HandleClick et sa fonction doivent également accéder aux données de l'événement, alors transmettez-le en paramètre et pour l'instant, nous allons créer un simple journal de console avec e.target. Comme il s'agit d'une case à cocher, nous pouvons également accéder à la propriété cochée. Cela devrait renvoyer une valeur vraie ou fausse si l'entrée est cochée ou non. Allez dans le navigateur, rafraîchissez-vous, et nous allons également le rendre un peu plus grand. Sautez dans la console. Nous pouvons tout simplement bien voir cela en bas, alors cliquez dessus et nous voyons que c'est vérifié parce que c'est vrai. Nous pouvons décocher cela et cela sera le résultat de faux. Nous pouvons basculer la liste et cette action de basculement est le comportement par défaut, mais si nous ne voulions pas ce comportement par défaut, nous pourrions empêcher la valeur par défaut et gérer exactement ce que nous voulons arriver nous-mêmes. Nous revenons à notre script qui est les événements et faisons défiler jusqu'à la fonction AddToFavorites. Auparavant, nous avons accédé aux données de l'événement et utilisé une méthode appelée StopPropagation. même, nous pouvons également utiliser une autre méthode appelée PreventDefault. Comme vous pouvez vous y attendre, il est également disponible sur l'objet événement. Nous pouvons utiliser cela à l'intérieur de notre fonction HandleClick. Dans l'accès supérieur à nos événements, nous appellerons la méthode qui est PreventDefault qui, à son tour, arrêtera le comportement par défaut dans le navigateur, ce qui activera également la valeur de la case à cocher. On va y aller. Si nous nous actualisons, cochez la case d'envoi en bas ; c'est vrai. Si nous continuons à cliquer, ce n'est que le résultat de vrai. Nous ne voyons pas de fausse valeur, et nous ne voyons jamais que cette case à cocher contient une coche. vivons maintenant libres de faire ce que nous voulons avec cet événement au sein de notre fonction. De plus, dans la méthode AddEventListener, nous pouvons également ajouter une troisième valeur qui est un objet options où nous pouvons définir l'option passive sur true. La définition de cette valeur égale à true empêchera toujours l'appel PreventDefault. Je l'enregistre et je vois ce qui se passe dans le navigateur. Rafraîchissez et si nous cliquons sur notre case à cocher, nous pouvons voir que nous ne sommes pas en mesure de prévenir Default dans EventListener. Cela est dû au fait que si nous définissons passif sur true, cela empêchera le PreventDefault d'être appelé. Nous pouvons le voir, nous rétablirons notre comportement initial de basculement entre vrai et faux et nous verrons également la coche à l'intérieur de la case à cocher. Vous vous demandez peut-être pourquoi nous empêchons la valeur par défaut à l'intérieur de la fonction, mais nous le remplacons dans EventListener. Eh bien, une des raisons pourrait être nous voudrions empêcher d'autres développeurs de faire quelque chose à l'avenir lorsque nous comptons sur le comportement par défaut. L'utilisation de l'option passive peut également améliorer les performances. Un exemple de cela est sur les appareils mobiles où, comme parfois les développeurs, empêchent le comportement de défilement par défaut pour implémenter une méthode de défilement personnalisée. Mais si nous ne faisons pas quelque chose de personnalisé comme celui-ci , il est mauvais de le faire savoir au navigateur en ajoutant l'option passive. Par conséquent, le navigateur n'a pas à comprendre par lui-même les choses qui peuvent prendre du temps et gêner les performances. Revenons à notre page Index et nous pouvons supprimer cette entrée ici, et nous allons maintenant jeter un coup d'œil à un exemple plus couramment utilisé pour empêcher le comportement par défaut utilisé avec des formulaires. Un exemple de ceci est un formulaire d'inscription, alors créez une nouvelle section avec la classe d'inscription. À l'intérieur, un titre de niveau 3 avec le titre « S'inscrire » ou nous pouvons nous reposer via notre boîte de réception. Juste en dessous, nous pouvons commencer à construire notre formulaire, puis à l'intérieur des éléments du formulaire, nous créerons une nouvelle div pour chacune de ces sections. Tout d'abord, l'étiquette va correspondre au nom de l'utilisateur, donc on dira pour le nom qui passe l'étiquette du nom avec les deux-points. Les intrants, c'est le type de taxe. Pour correspondre à notre étiquette, nous transmettrons également l'ID du nom. Cette deuxième div ne sera que pour l'e-mail, donc nous copierons et collerons et modifierons chacun d'entre eux pour qu'il s'agisse de l'e-mail correspondant. La troisième et la dernière div seront pour la soumission, alors créez une entrée avec le type de soumission et aussi l'ID de soumission. Puisque nous avons également supprimé notre case à cocher précédemment, nous pouvons également revenir aux événements et supprimer notre fonction et EventListener. Disons que ce test final est tout à fait beau dans le navigateur. Il y a notre titre, le nom et les entrées d'e-mail ainsi que notre soumission. Lorsque nous soumettons le formulaire, le comportement par défaut consiste à envoyer le formulaire à un serveur Web principal, puis à effectuer redirection vers une page de succès. De toute évidence, nous n'avons pas page supplémentaire vers laquelle rediriger, nous allons donc rediriger vers la même page, ce qui entraînera un rechargement de la page. Le rechargement de la page perd toutes les données de formulaire imbriquées à l'intérieur. Si nous ajoutons quelque chose à l'intérieur ici n'importe quel exemple est correct, appuyez sur « Soumettre », nous pouvons en voir un exemple. Nous voyons que la page a été rechargée et nous perdons également les données de formulaire de ces champs. Eh bien, il y a peut-être des cas où nous voulons d'abord capturer ces cas où nous voulons d'abord capturer données et les utiliser avant qu'elles ne disparaissent. Par exemple, il serait possible de valider les données du formulaire avant qu'elles ne soient envoyées au serveur. Comme nous venons de regarder avant si nous voulons capturer ces données avant le rechargement, nous devons empêcher le comportement par défaut du formulaire. Pour ce faire, revenez à nos événements et nous allons commencer par capturer le formulaire et les éléments d'entrée. Dites que la forme const sera égale à Document.QuerySelector où nous sélectionnons l'élément de formulaire. Si nous copions et collons cela deux fois de plus, le second concerne le nom d'utilisateur et nous lui donnons également un identifiant égal au nom. Le troisième concerne l'UserEmail. Ensuite, nous allons récupérer notre formulaire et nous ajouterons un EventListener, qui va maintenant à ce sujet pour le formulaire soumis. La raison pour laquelle nous pouvons le faire et écouter l'événement Submit est que dans notre page Index, nous avons ajouté le type de soumission. Séparez-le par une virgule, nous déclencherons une fonction appelée HandleFormSubmit, puis nous allons le configurer juste au-dessus. Comme vous pouvez vous y attendre, car nous devons empêcher le comportement par défaut, nous accéderons à notre objet d'événement, puis créerons un journal de console qui saisit notre nom d'utilisateur. Tout ce que nous avons fait ici est de saisir notre élément UserName, mais si nous voulons obtenir la valeur saisie par l'utilisateur, nous devons accéder à la valeur. En ce qui concerne les résultats, rafraîchissez. À l'intérieur de la console, placez n'importe quel nom à l'intérieur d'ici. À n'importe quel e-mail, nommez et soumettez. Vous verrez très vite que le nom d'utilisateur de Chris a été placé à l'intérieur de la console, puis très rapidement toutes les données disparaîtront. Comme vous pouvez vous y attendre, la façon d'empêcher cela consiste à accéder à notre objet événement et tout comme avant que nous puissions empêcher le comportement par défaut. Nous le dirons et essayerons encore une fois, ajouterons le nom, l'e-mail est correct, puis cliquez sur « Soumettre ». Maintenant, nos données sont toujours en place. Nous avons notre journal de console, et également à l'intérieur de l'entrée, nous avons le nom et les entrées d'e-mail. Bien. Nous avons maintenant accès à toutes ces informations avant qu'elles ne disparaissent. Nous pouvons maintenant valider le nom et l'e-mail, et le vérifier dans le bon format avant de l'envoyer au serveur. Je vais simplement effectuer une vérification de validation très simple pour cet exemple pour voir si l'utilisateur a saisi un nom à l'aide d'une instruction if. Nous n'avons pas encore couvert les déclarations si, mais elles sont simplement un moyen de vérifier si quelque chose est vrai. La façon dont nous pouvons le faire à l'intérieur de notre fonction consiste à accéder au mot-clé if , puis à placer une condition à l'intérieur des crochets. Nous voulons vérifier si la valeur UserName.Value, qui est la chaîne de texte, est égale à une chaîne vide. Si c'est le cas, nous ouvrirons des accolades bouclées comme le corps de la fonction et placerons dans quelque chose que vous voulez exécuter. Placons simplement une alerte indiquant S'il vous plaît entrer votre nom, puis revenir de cette déclaration. Maintenant, sauvegardons cela et rechargeons le navigateur, appuyez sur « Soumettre ». Notre alerte a été lancée en haut, essayons cela avec des données placées à l'intérieur. On y va. Le nom d'utilisateur a maintenant une valeur plutôt qu'une chaîne vide. Nous ne voyons plus cette alerte s'exécuter dans le navigateur, ce qui nous permet de faire ce que nous voulons avec les données avant de les envoyer au serveur. N'oubliez pas que puisque la page ne se recharge plus, nous devons également gérer nous-mêmes ces entrées de formulaire vides . C'est également assez simple, nous pouvons le faire à l'intérieur de notre fonction juste en dessous de l'instruction if. Ce que nous devons faire, c'est de saisir notre nom d'utilisateur, d' accéder à la valeur et de définir cette valeur égale à une chaîne vide. Il en va de même pour l'e-mail, également sur une chaîne vide. Ensuite, nous pourrions aller de l'avant et l'envoyer à notre serveur de la manière que vous vouliez. Essayons ça. Nous pouvons vérifier les entrées du formulaire, nous allons effacer. Rafraîchissez, ajoutez nos données, appuyez sur « Soumettre » et tout a fonctionné avec succès. Il supprime également notre nom et les données de messagerie. Il est courant de voir cela lorsque vous utilisez des frameworks ou des bibliothèques. Si vous avez déjà utilisé quelque chose comme React ou Vue.js dans le passé, vous l'avez peut-être utilisé par le passé lorsque travaillez avec des entrées de formulaire. Ensuite, nous allons terminer notre regard événements en supprimant tous les événements alors qu'ils ne sont plus nécessaires. 50. Supprimer les écouteurs d'événements: Jusqu'à présent, j'ai eu beaucoup de pratique à créer des événements, et nous avons également examiné comment ajouter l'option de celui-ci si vous êtes un auditeur de ne lancer qu'un seul événement une seule fois. Dès que cela se produit, l'écouteur d'événements est ensuite supprimé des éléments. Mais nous pouvons également supprimer manuellement les écouteurs d'événements nous pouvons également les supprimer s'ils ne sont plus nécessaires ou utilisés, et cette suppression n'est pas essentielle dans les projets de petite taille, mais une fois que nous arrivons à un projet à plus grande échelle, nettoyez tout les anciens auditeurs d'événements inutilisés peuvent vraiment améliorer l'efficacité. Cela signifie également que nous pouvons utiliser le même élément pour faire différentes choses en ajoutant et en supprimant ces écouteurs d'événements. Allez dans le fichier Chrome, qui supprime les écouteurs d'événements, et si vous ouvrez cela dans le navigateur, vous remarquerez que nous nous sommes éloignés de la configuration du projet de burger. Nous avons un exemple simple, donc avoir un élément span, puis à l'intérieur des éléments P auront un score de démarrage de zéro. L'objectif ici est de cliquer sur ce bouton d'ajout pour augmenter le score, puis nous utiliserons le bouton Annuler pour supprimer l'écouteur d'événement. Cela renvoie également à notre events.js dans le même dossier, et si nous sautons dans ce dossier, nous avons une référence à nos trois éléments. Nous avons le bouton Ajouter, nous avons le bouton Annuler, puis la sortie, qui est notre numéro. Ce que nous allons commencer à faire ici c'est de créer un écouteur d'événements, que nous allons supprimer à l'avenir. Cet écouteur d'événements sera attaché à notre bouton Ajouter, alors ajoutons cela comme nous le faisons normalement. Cela fait maintenant un clic, puis déclenche une fonction appelée augmentation. Tout cela devrait être familier. Nous allons maintenant créer notre fonction augmentée juste au-dessus. Que voulons-nous que cette fonction fasse ? Eh bien, nous devons sélectionner cette sortie qui est la valeur actuelle de zéro. Il s'agit d'un élément p. Nous voulons sélectionner la valeur actuelle, puis l'augmenter d'une valeur. Tout d'abord, la façon de procéder consiste à sélectionner notre sortie. Nous pouvons modifier le contenu du texte interne et le réinitialiser pour qu'il s'agisse d'une nouvelle valeur. Actuellement, nous voulons ajouter la valeur d'un à chaque fois que nous cliquons sur ce bouton, mais une chose dont nous devons nous souvenir est ici que nous avons le texte intérieur. Eh bien, nous ajoutons ici un nombre, donc ce que nous devons d'abord faire est de convertir notre texte intérieur en nombre. Vous pouvez le faire pour accéder à la fonction numérique, puis ce que nous allons faire, c'est saisir la sortie actuelle .InnerText. Cela transformera ensuite cela en nombre, puis nous en ajouterons un. Essayons de sauvegarder le fichier et de le rafraîchir. Cliquez sur Ajouter, et chaque fois que je clique dessus, cela augmente de la valeur d'un. Ensuite, nous devons également écouter un clic sur ce bouton d'annulation. Il s'agit à peu près d'une répétition du processus ci-dessus. Nous allons saisir une référence à notre bouton d'annulation. Nous ajouterons l'écouteur d'événements. Passons maintenant à l'événement clic, puis appelons une fonction appelée StopListener. Cette charge va créer cette fonction. Pour l'instant, il suffit de placer dans un journal d'annulation alors sachez que celui-ci est en cours d'exécution. Essayons cela, actualiserons le navigateur et dans les outils de développement, sautons dans l'annulation. bouton Annuler va maintenant prendre nos journaux. Pour obtenir ce bouton d'annulation, supprimez réellement l'écouteur d'événements de notre bouton Ajouter. Ce que nous devons faire, c'est accéder à une méthode appelée remove event listener. C'est assez simple à faire plutôt que notre journal d'annulation ; nous pouvons supprimer cela. Nous pouvons accéder au bouton Ajouter et appeler supprimer l'écouteur d'événements. Dites ceci, et nous allons essayer, actualiser le navigateur, cliquer sur le bouton Ajouter, ce qui augmente la valeur. Cliquez sur le bouton Annuler, voyez une erreur à l'intérieur de l'annulation, disons que deux arguments sont requis, et quand même, si nous avons essayé de cliquer sur le bouton Ajouter, l'écouteur d'événement n'est pas encore annulé. En effet, nous devons également transmettre les mêmes paramètres que ceux que nous avons utilisés lors de l'ajout de l'écouteur d'événements Nous devons donc supprimer le clic et également l' actualisation de l'appel de fonction, et nous allons essayer d'ajouter, ce qui est très bien. Nous supprimerons l'écouteur d'événements qui annulerait. Maintenant, nous ne voyons aucune erreur, et si nous essayons de cliquer sur le bouton Ajouter, aucune autre mise à jour n'aura lieu. Comme nous venons de le voir, nous devons nous assurer que les paramètres sont exactement les mêmes. Actuellement, nous avons l'événement clic, qui sera maintenant quatre, et cela est appelé dans la même fonction. Mais si nous essayions de supprimer un autre écouteur d'événements, par exemple en changeant cela pour vous lors du survol de la souris, nous pourrions le dire et l'essayer une fois de plus. Le bouton Ajouter fonctionne. Mais si nous annulons l'écouteur d'événements, le bouton Ajouter fonctionnera toujours car nous avons un type d'événement différent. Remodifions-le pour cliquer. De plus, si nous avions l'objet options, comme nous l'avons vu précédemment, par exemple, nous pourrions définir la phase de capture comme vraie. Maintenant, si nous rechargeons, nous essaierons une fois de plus, nous essaierons d'annuler. Le bouton Ajouter fonctionne toujours. En effet, nous n'avons pas exactement les mêmes paramètres à l'intérieur de notre écouteur d'événements de suppression, il est donc considéré comme un événement différent. Si nous voulions que cela fonctionne, comme vous vous y attendiez, nous devons également le copier. ajouter le troisième paramètre, testez-le. Nous allons essayer d'annuler, et maintenant nous ne pouvons plus ajouter de numéros à ce sujet. C'est ce que nous devons faire pour supprimer un écouteur d'événements à n'importe quel stade de notre programme. Comme nous l'avons vu, nous devons également nous assurer que tous les paramètres sont exactement les mêmes. Sinon, il s'agirait d'un événement différent. 51. Collection HTML ou NodeList ?: Dans cette section, nous avons collecté divers éléments DOM à l'aide de différentes méthodes. Nous avons sélectionné des éléments DOM par nom de classe, par ID et en utilisant également le sélecteur de requêtes. Lorsque nous avons sélectionné plusieurs éléments en même temps, nous avons également récupéré une collection HTML ou une NodeList. Comme promis plus tôt, nous allons maintenant examiner la différence entre les deux. manière générale, peu importe lequel nous possédons. Les deux contiennent plusieurs valeurs dans un format semblable à un tableau, que nous pouvons utiliser comme nous le souhaiterions, par exemple en les parcourant. Mais si les différences vous intéressent, nous allons maintenant les couvrir dans cette vidéo. Passez dans le fichier de cette leçon et à l'intérieur d'ici, nous avons une liste non ordonnée, nous faisons quatre éléments de liste différents. Si vous regardez de près, vous verrez que les trois premiers éléments de liste ont la classe d'élément de liste, et le dernier contient la classe active. Cela va bientôt devenir important, à l'intérieur du fichier script.js. À l'intérieur du script, nous examinerons comment saisir le contenu de tous ces éléments de liste, interroger tous les sélecteurs et obtenir des éléments par nom de classe. Nous allons d'abord créer une constante appelée statique, et nous verrons pourquoi, dans un instant. Définissez cette valeur sur document.queryselectorall, nous allons récupérer tous nos éléments de liste et ces classes. Tout comme nous le voyons dans le HTML, nous allons les saisir avec la classe d'élément de liste. Après cela, créez une seconde constante appelée live. Cela équivaut au document. Je vais récupérer les mêmes éléments de liste, mais cette fois en utilisant GetElementsByClassName. Prenez les éléments de la liste et nous n'avons pas besoin du point car nous savons déjà que nous saisissons le nom de la classe. Tout comme un rafraîchissement rapide, si vous ne vous en souvenez pas dès le début, lorsque nous utilisons le sélecteur de requêtes, une liste de nœuds sera renvoyée. Assurez-vous qu'il s'agit d'un sélecteur de requêtes car nous saisissons plusieurs éléments. Cela renvoie une liste de nœuds et lorsque nous utilisons GetElementsByClassName, une collection HTML sera renvoyée. Nous pouvons le tester si nous effectuons un journal de console pour la valeur statique. Dupliquez ceci et le second sera en direct. Rafraîchissez lorsque la console est ouverte. Voici notre NodeList ainsi que notre collection HTML. Ces deux éléments présentent certaines similitudes et le premier est qu'ils ont tous deux une ligne de propriété. Nous pouvons le voir, nous accédons à .length sur ces deux journaux de console. Rafraîchissez et nous pouvons voir que ces deux comportent trois éléments distincts. Une autre similitude est que si nous supprimons la longueur, nous pouvons également utiliser les crochets pour accéder à n'importe quelle propriété par le numéro d'index. Cela fonctionne pour l'statique et aussi en direct. Cela renvoie la valeur unique sélectionnée. Mais en plus de ces similitudes, il existe également des différences importantes. Plus tôt, nous avons parlé de quelque chose appelé nœuds et nous avons dit que nous pouvions avoir différents types dans le DOM. Nous avons des nœuds d'éléments, des nœuds attributaires, ainsi que des nœuds de texte. Il s'agit de valeurs qui peuvent être renvoyées à l'intérieur d'une NodeList. Cependant, avec une collection HTML, ils ne peuvent contenir que des éléments HTML. Souvent, cela ne causera pas de problèmes majeurs, mais il peut être utile de le savoir. Un indice de la prochaine chose que nous allons examiner est le nom de ces constantes. Un NodeList que nous récupérons avec le sélecteur de requête all, retournera une collection statique. Une collection HTML est considérée comme active. Cela signifie que lorsque nous mettons à jour le DOM, seule la collection en direct est au courant des modifications. Pour voir ce test, ce que nous allons faire si nous revenons sur notre page d'index, c'est que nous allons faire en sorte que notre article 4 ait la même classe d'éléments de liste. Nous verrons ensuite laquelle de ces deux références aux mêmes éléments va être mise à jour dans la console. Rapidement, juste avant de faire cela, nous allons également déplacer ces crochets. Parfois, lorsque nous avons plusieurs journaux de consoles comme ceux-ci, il est plus facile de les envelopper à l'intérieur de quelques accolades bouclées. La raison pour laquelle, si nous regardons la console en ce moment, nous ne voyons pas laquelle est laquelle. Si nous sauvegardons cela et que nous les actualisons, ces accolades vont maintenant transformer ces deux objets en objets, ce qui nous donnera un nom de propriété statique et live. Nous voyons clairement la différence entre ces deux bûches. Revenons maintenant à la tâche de mise à jour du quatrième élément de liste, pour avoir la classe d'élément de liste. Nous devons d'abord saisir une référence à cela. Nous dirons const, et nous dirons actif, et nous allons définir cette valeur égale à documents.queryselector. Nous allons récupérer notre quatrième élément de liste qui a cette classe active. Ensuite, je vais configurer une fonction set-timeout, qui va mettre à jour ces éléments après un certain temps. Set-Timeout prend en charge une fonction qui va s'exécuter. Juste après la fonction comme deuxième argument, nous passons, le délai. Après 3 000 millisecondes, soit trois secondes, nous allons exécuter le contenu de cette fonction. Il suffit de sélectionner nos éléments actifs, déposer la liste des classes, où nous pouvons utiliser la méthode add pour ajouter une nouvelle classe. La classe que vous souhaitez ajouter est list-item, rendez-la identique à celle des trois éléments précédents. Ensuite, à l'intérieur de cette fonction, nous pouvons remonter les deux journaux de la console et voir ce qui se passe après la mise à jour. Enregistrez, rechargez le navigateur et donnez trois secondes pour exécuter la fonction. La NodeList statique ne contient que les trois éléments originaux, et la collection live a été mise à jour. Cela inclut également le quatrième article que nous venons d'ajouter. 52. Mini défi : créer un bouton mode foncé: Bienvenue à la fin de cette section. En guise de mini-défi, j'aimerais que vous reproduisiez ce que nous pouvons voir à l'écran juste ici. Nous avons un code HTML très basique. La partie clé est ouverte dans le coin supérieur. Ce que j'aimerais que vous fassiez, c'est d'utiliser JavaScript pour répondre au clic de l'utilisateur sur ce bouton, puis il bascule entre le mode clair et le mode sombre et ce n' est en fait pas aussi difficile qu'il en a l'air. Tout ce que nous avons si nous allons dans les fichiers de démarrage, c'est une page d'index [inaudible] avec tous les textes, comme vous le voyez ici, nous avons nos feuilles de style et ensuite, actuellement à l'intérieur de la feuille de style, nous avons le corps qui définit la couleur par défaut en mode clair, nous avons la couleur d'arrière-plan claire et le texte plus sombre. Ensuite, ce que j'aimerais que vous fassiez, c'est d'écouter un événement de clic sur le bouton , puis d'ajouter la classe de dark. Cela va faire le contraire, nous allons définir la couleur la plus claire pour le texte et aussi la couleur d'arrière-plan plus foncée, nous donner un coup d'œil en utilisant JavaScript, répondre au clic dans la classe du mode sombre. Ensuite, si vous remplissez en toute confiance, il serait bon d'ajouter une déclaration IF comme nous l'avons vu dans une vidéo précédente. Vérifiez également si le mode sombre est actuellement activé, si c'est le cas, nous allons ensuite supprimer cette classe qui reviendra ensuite à l'état lumineux. Comme petit guide pour vous aider sur le site Web de Mozilla, nous pouvons utiliser une méthode appelée contient et nous pouvons l'utiliser pour vérifier si nos éléments contiennent une certaine classe. Dans notre cas, nous allons vérifier toutes les classes qui ont été ajoutées au corps, puis nous vérifierons s'il contient la classe sombre. Si c'est le cas, nous voudrons le supprimer. Laissez-nous aller, ne vous inquiétez pas si vous êtes coincé en cours de route, vous pouvez toujours vous référer à cette vidéo pour obtenir des conseils. À l'intérieur de la page d'index, passons à la section d'en-tête. Vous pouvez voir ici que nous avons le bouton initial qui est la lune , puis juste en dessous, nous avons l'entité HTML qui sera destinée au soleil. Avec cela en place, allons maintenant de l'avant avec ma solution et si la vôtre semble un peu différente, c'est tout à fait très bien. Plongez dans le script, à l'intérieur de la section Script, la première chose à faire est de saisir notre bouton et de le stocker dans la variable, avec Document.QuerySelector voir dans notre bouton. Il s'agit d'une référence à notre bouton que nous venons de voir à l'intérieur du HTML et nous n'avons qu'un seul bouton, c'est très bien comme nous l'avons fait plusieurs fois, nous accédons ensuite à notre élément de bouton. Nous pouvons ensuite ajouter un écouteur d'événement et cela va écouter un événement de clic, cela déclenchera une fonction et appelons cette fonction ToggleDarkMode que nous pourrons configurer juste au-dessus. Revenons à nos feuilles de style, ouvrons ça et jetons un coup d'œil à l'intérieur. Comme nous l'avons vu précédemment, le mode d'éclairage par défaut est activé dans la section corps mode d'éclairage par défaut est activé dans la Ce que nous pouvons ensuite faire est d'ajouter cette classe sombre au corps, ce qui remplacera ensuite la couleur et l'arrière-plan, mais simplement avant de faire cela, nous devons réellement sélectionner le corps et le stocker dans une constante, Document.QuerySelector, qui se trouve dans le corps. Maintenant, nous avons une référence à ce corps, nous pouvons le sélectionner à l'intérieur de notre fonction et nous pouvons l'utiliser pour ajouter notre nouvelle classe sombre, c'était classlist, nous utilisons la méthode add, où nous ajouter la classe de l'obscurité. Maintenant, avec cela en place, nous allons ouvrir notre page d'index dans le navigateur et c'est la première étape que nous avons prise en charge. Nous avons activé le mode lumière par défaut et maintenant, si nous cliquons sur l'icône de la lune, cela se terminera à la classe sombre et aussi aux couleurs correspondantes. C'est la partie la plus simple, tout ce que nous avons fait ici est d'ajouter une classe, mais maintenant nous avons besoin d'un moyen comprendre le contraire et de supprimer cette classe sombre. Pour ce faire, nous pouvons ajouter une instruction IF à l'intérieur de notre fonction et cela va vérifier si la classe dark a déjà été appliquée avant de l'ajouter juste en dessous. Nous pouvons utiliser la méthode contient que nous venons de regarder dans le navigateur. Ce que nous devons faire à l'intérieur de l'instruction IF, c'est vérifier si le corps contient cette classe sombre. Nous allons d'abord vérifier cela en gras dans un journal de console, nous pouvons accéder au corps, la liste de classes, puis utiliser la méthode contains pour vérifier si cette classe sombre a été appliquée. Comme vous pouvez le voir dans la documentation, cela renvoie une valeur booléenne de vrai ou de faux, nous pourrons ensuite l'utiliser à l'intérieur de l'instruction IF. Ce journal de la console est en haut de la fonction, nous vérifierons si cela est vrai au début, puis juste après l'avoir ajouté, nous vérifierons si cela s'applique à la toute fin, sauvegarderons ceci et encore dans le navigateur, sautez dans les outils de développement, rechargez et accédez à la console. Cela n'aime pas notre instruction IF vide, nous allons simplement supprimer cela et actualiser et maintenant si nous basculons notre bouton, nous voyons au départ la valeur false puisque le premier journal de la console est en haut de notre fonction Mais notre deuxième est vrai parce que nous avons ajouté cette classe sombre à notre corps. Super, maintenant que nous savons que cela fonctionne, nous pouvons supprimer nos journaux de console et nous pouvons maintenant appliquer cela à nos instructions IF. Tout comme les journaux, nous allons vérifier si le body.classlist contient la classe de dark, si le code à l'intérieur s' exécutera et quel code voulons-nous exécuter exactement ? Eh bien, si nous y réfléchissons, nous avons essayé d'activer et de désactiver le mode sombre, le mode sombre est déjà appliqué, nous voulons supprimer cette classe du corps, nous pouvons le faire en accédant au corps. classlist, puis utilisez la méthode remove qui supprimera notre classe sombre, enregistrez-le et essayez-le dans le navigateur, la valeur par défaut est le mode lumière. Nous avons maintenant le mode sombre mais si nous essayons de cliquer à nouveau dessus, il ne revient pas encore à notre mode d'éclairage. La raison pour laquelle, en raison de l'intérieur de notre fonction, tout ce que nous faisons au début de cette fonction s'appliquera toujours dans la classe du mode sombre et la façon contourner cela se trouve à l'intérieur de nos instructions IF. Si nous ajoutons le mot-clé retour, si l'instruction IF est vraie et que le code à l'intérieur s'exécute, cette instruction de retour sortira de notre fonction, le code ci-dessous ne sera pas exécuté. fait, si l'instruction IF est déclenchée, seul ce bloc de code sera exécuté. Si elle n'est pas déclenchée, cette section en bas s'exécutera à la place. Essayez encore une fois, actualisez le navigateur. Notre bouton bascule fonctionne désormais correctement. La dernière étape consistait à changer cette icône dans le coin supérieur, pour changer entre le soleil et la lune. Nous avons déjà accès à notre bouton, ce qui nous permet de le sélectionner à l'intérieur de notre fonction. abord, juste au-dessus des instructions de retour, nous accéderons à notre bouton et nous pouvons modifier le code HTML interne pour qu'il soit égal à notre entité HTML. Dans cette déclaration IF, nous supprimons le mode sombre, nous voulons ensuite fournir une référence de la lune, puis la resélectionner. Allez sur notre page d'index, saisissez l'entité qui est la lune qui est co-réactive, alors sélectionnez-la, collez-la dans une chaîne et juste en dessous, nous pouvons également définir la couleur de ces éléments avec le , définissez la couleur égale à une valeur RVB de 62, 62, 62. En dehors de l'énoncé IF, nous voulons faire le contraire, si nous copions ces deux lignes, il suffit de l'ajouter au bas de notre fonction. Le HTML intérieur va être notre icône de lune qui est celle-ci dans le commentaire, puis vous l'enregistrez, ajoutez aussi la couleur, je vais opter pour l'aqua. Nous allons essayer ça, basculer en mode sombre. Je cherche ensuite à réactiver le mode lumière avec l'icône soleil, cliquez dessus et cela rétablira ensuite la lune. Nous pouvons ensuite revenir au mode sombre. 53. Projet de lecteur vidéo : créer l'UI: Hé. Bienvenue dans notre nouvelle section. Cette section va être utilisée pour créer des projets de pratique afin renforcer ce que nous avons appris jusqu'à présent. Nous allons commencer par un projet de lecteur vidéo. HTML dispose d'un lecteur vidéo natif avec des commandes permettant de lire et de mettre en pause la vidéo. Mais nous pouvons également supprimer ces contrôles et créer un lecteur entièrement personnalisé. Nous le faisons en utilisant certaines propriétés, méthodes et événements que nous aurons disponibles. Juste en avant-première, c'est ce que nous allons créer et c'est la version finale. haut, nous avons notre écran vidéo toute la largeur du navigateur. En dessous, nous avons une barre de progression puis nous avons les commandes en bas. Comme vous pouvez vous y attendre, nous pouvons cliquer sur le bouton Lecture et cela commencera la vidéo et commencera par la barre de progression. Nous pouvons faire une pause, si la vidéo est audio, nous pouvons également contrôler le niveau de volume et la vitesse de lecture peut également être contrôlée. Nous pouvons ralentir la situation, nous pouvons accélérer les choses et sauter la vidéo en reculant et en avant. Pour commencer, sautez dans les fichiers étoiles. Je vais devoir entrer dans la nouvelle section qui est numéro 5, sauter dans le projet de lecteur vidéo. Si vous ouvrez la page d'index, vous verrez que nous avons un point de départ assez basique. Nous n'avons pas de contenu, tout ce que nous faisons ici est de le lier à nos feuilles de style et aussi à notre script.js. Le script est un fichier vide, nous allons donc créer tout cela nous-mêmes mais nous avons une longueur d'avance avec la feuille de style. Cela nous donne juste un style et une mise en page de base pour que nous puissions nous concentrer sur le JavaScript. Une vidéo qui est un fichier MP4 est également fournie . Il s'agit la même vidéo que celle que vous venez de voir dans la version finale. Mais vous pouvez également la remplacer par une vidéo de votre choix si vous préférez, tout fonctionnera exactement de la même manière. Commençons par ouvrir notre page d'index dans le navigateur, copier le chemin d'accès à ce fichier, coller dans et comme vous vous y attendez, il n'y a pas encore de contenu à l'écran. Nous commencerons dans la section corps, j'utilise les éléments vidéo HTML et c' est un wrapper pour le contenu que nous allons placer à l'intérieur. Si vous avez utilisé les éléments vidéo natifs ou même les éléments audio, cela sera assez familier, sinon la vidéo n' est qu'un wrapper où nous fournissons la source de nos fichiers vidéo. La source est fournie à l'intérieur des éléments source. Cela ne contient aucun contenu à l'intérieur, donc nous avons simplement la balise unique. Nous n'avons pas besoin de le fermer comme ça, mais nous l'utilisons pour fournir la source de nos fichiers que nous voulons lire et, dans notre cas, il s'agit du video.mp4. Un deuxième attribut que nous pouvons ajouter est le type de vidéo et dans notre cas, c'est le type de vidéo et le format MP4. L'élément vidéo prend également en charge d'autres types. Bien que cela ajoutera simplement du texte en place, ce qui est un texte de secours si la vidéo n'est pas prise en charge. Ce n'est pas vraiment un problème de nos jours car le lecteur vidéo est vraiment bien pris en charge dans tous les navigateurs mais cela vaut la peine de le mettre, juste au cas où. Supposons que votre navigateur ne supporte pas la vidéo HTML5, donc si nous l'ouvrons dans le navigateur, actualisez la page, nous avons effectivement une image fixe, nous pouvons cliquer dessus, nous pouvons jouer. Pour ce faire, nous pouvons utiliser les contrôles vidéo HTML5 natifs. Activez cela, c'est assez simple, nous allons simplement dans le wrapper vidéo et nous ajoutons les attributs des contrôles. Cela permettra d'activer les commandes vidéo par défaut que l'on peut désormais voir en bas . On peut jouer à ça. Nous avons le temps écoulé, le temps total de la vidéo, nous avons une barre de progression et nous pouvons également contrôler des choses comme le volume, nous pouvons passer en mode plein écran. De plus, nous avons quelques options pour la vitesse de lecture et pour activer l'image dans l'image. Bien sûr, tout cela est vraiment bon et c'est génial d'avoir un lecteur vidéo natif, car dans notre situation, il ne nous apprend rien sur JavaScript. » Ce que j'aimerais faire, c'est supprimer ces contrôles natifs par suppression de l' attribut control et recréez ces boutons pour interagir avec la vidéo, lisez-le en JavaScript. Lorsque nous pourrions le faire, si nous allons sur le site Web Mozilla qui est developer.mozilla.org, effectuez une recherche vidéo. C'est une minute ici. À l'intérieur d'ici, nous verrons un exemple qui n'est rien que nous n'avons déjà vu jusqu'ici. Nous avons le wrapper vidéo, nous avons l'attribut control, nous avons la source de nos fichiers vidéo, puis les textes de secours si le lecteur vidéo n'est pas pris en charge. Nous avons plusieurs autres attributs tels que, si vous souhaitez que la vidéo soit également lue et si nous allons un peu plus loin, nous avons accès à divers événements. Différents événements sont configurés tout au long de la lecture de notre vidéo, par exemple, regardant cela maintenant pour les événements lorsque la vidéo est en cours de lecture, lorsqu'elle est en pause et également la progression de la vidéo. à mesure que l'heure est mise à jour De plus, cet élément vidéo hérite des méthodes d' une API parente appelée éléments multimédia HTML. Faisons une recherche pour cela, faites-le défiler vers le haut, HTML, éléments multimédias et ainsi que ces événements que nous pouvons répertorier maintenant. Cet élément multimédia possède des propriétés et des méthodes telles que la possibilité de lire des impulsions, nous pouvons modifier le volume et voir depuis combien de temps le média est lu. Nous pouvons les voir si nous faisons défiler un peu plus loin, nous aurions différentes propriétés. Nous pouvons également basculer les commandes partir d'ici si nous le voulions, nous pourrions vérifier l'heure actuelle de la vidéo pendant sa lecture, vérifier la durée de la vidéo, combien de temps elle dure, nous pouvons faire une boucle la vidéo, nous pouvons également couper le son de la vidéo, et en faisant défiler vers le bas, nous aurons également les différentes méthodes que nous pouvons utiliser. Nous avons des méthodes utiles telles que la possibilité de lire et de mettre en pause une vidéo, et nous allons les utiliser dans nos projets. Nos éléments vidéo que nous utilisons ici ont accès en héritant de toutes ces propriétés et méthodes. Bien entendu, des méthodes régulières telles qu'un dif n'auraient pas besoin d'accéder à ces méthodes supplémentaires, ce qui explique pourquoi elles doivent être héritées. Mais pourquoi ne pas simplement attacher ces méthodes et propriétés supplémentaires directement à ces éléments vidéo ? Pourquoi devons-nous en hériter en premier lieu ? Nous aurons des moyens distincts, d'autres éléments peuvent également les utiliser. À cet égard, d'autres éléments tels que les éléments audio peuvent également utiliser ces mêmes méthodes et propriétés telles que la lecture et la pause, ce qui signifie que nous n'avons pas besoin de les dupliquer pour les ajouter à la fois aux éléments vidéo et audio. Cet élément multimédia HTML fait également partie d'une collection de nombreuses API Web différentes qui nous donnent accès à la puissance de nombreuses choses étonnantes à l'intérieur du navigateur. En fait, l'une de ces API Web répertoriées est l'API DOM. C'est celui que nous avons utilisé dans la dernière section pour interagir avec nos éléments DOM. Par exemple, entre autres, il s'agit des éléments de canevas HTML, qui permettent diverses fonctions de dessin. C'est juste au-dessus. Il permet de dessiner à l'intérieur du navigateur et nous y jetterons également un coup d'œil plus tard. Nous avons également des éléments tels que l'API Geolocation, afin que les utilisateurs puissent partager leur position. Nous avons le glisser-déposer, ce qui nous permet de déplacer des éléments sur la page et de les déposer à certains endroits. Nous allons utiliser ces propriétés et méthodes multimédias très prochainement, mais nous devons d'abord créer des contrôles HTML, que nous allons utiliser pour les activer. Créons-les à l'intérieur de la section du corps, juste en dessous de la vidéo. Cela créera une nouvelle section avec la classe de contrôles. Cela va simplement déclencher notre CSS et ouvrons cette section. Tout en haut, nous commencerons par une barre de progression, comme nous le voyons dans la version finale, puis nous créerons différentes sections de haut en bas. haut, nous avons la barre de progression, elle se trouve dans l'attribut value, qui sera initialement la valeur zéro et nous mettrons à jour cette valeur sous forme de mise à jour de la progression vidéo. Ensuite, une section div, qui sera l'enveloppe des boutons Lecture et Pause. Le premier bouton détecte la lecture, et comme cela va être contrôlé à l'aide de JavaScript, il faudra un identifiant unique. Cela peut être Play, et donc vous donnez un coup de pied dans notre CSS, nous allons donner un tour à cette classe ici. Dupliquez celui-ci et modifiez l'ID en Pause et aussi le texte, donnez-lui un « Enregistrer » et « Actualiser » le navigateur. Bien. Bien sûr, ils ne feront rien pour l'instant, car nous devons les saisir en utilisant JavaScript et déclencher toutes les propriétés et méthodes que nous avons examinées auparavant. La section suivante concerne le volume, donc juste en dessous de notre dernière div, nous en créerons une nouvelle. La classe d'align. De gauche à droite, nous allons créer un élément de span et cela va être de réduire le niveau de volume, donc disons le volume négatif au centre et l'entrée qui sera un curseur de plage. L'ID est égal au volume. Ensuite, nous pouvons également contrôler les valeurs minimales et maximales de cette entrée. Le minimum sera égal à zéro et le maximum est égal à un. C'est ce que nous utilisons dans JavaScript. Nous allons saisir la plage comprise entre zéro et un. Le volume détecté est sélectionné par l'utilisateur. Nous pouvons également passer de zéro à un à plusieurs étapes et nous pouvons le faire avec cette étape, qui sera égale à 0,1. Cela signifie que chaque fois que nous déplaçons ce cercle, cela sautera par incréments de 0,1, ce qui nous donne 10 étapes. Après cela, juste en dessous d'une seconde plage d'éléments et celui-ci doit augmenter le volume. Nous dirons volume plus. Nous y sommes. La section suivante concerne ces vitesses de lecture, il s'agira donc de différents boutons qui vont de 0,5 à une double vitesse. Pour garder cet endroit cohérent dans une div, et le premier bouton sera pour la vitesse de lecture de 0,5, la classe de vitesse, puis copiez-le et collez trois fois de plus. Ce sera pour un, c' est-à-dire la vitesse de lecture normale, 1,5, puis le double de notre vitesse normale. La dernière section, encore une fois à l'intérieur d'une div, ce sera pour nos boutons arrière et avant. Dernier bouton, nous pouvons utiliser certaines entités HTML pour obtenir ces directions à gauche et à droite. Entité pour la première est saisir cela à l'intérieur de JavaScript avec un ID unique qui sera égal à back et également à la classe de skip. Dupliquez ceci, et c'est pour aller de l'avant. Nous utiliserons la même classe, où l'entité est le et cela nous donnera l'icône Forward. Essayons ça. « Rafraîchir » et notre contrôle est maintenant terminé dans le navigateur. Bien sûr, ils ne feront rien, car ce ne sont que des éléments HTML normaux. Nous devons les contrôler à l'intérieur de notre script. Jetons un coup d'œil à notre script et nous pouvons saisir chacun de ces éléments avec leur identifiant unique. Ouvrez nos scripts et, en plus d'accéder à chacun de ces boutons de commande, nous avons également besoin d'une référence à notre vidéo réelle. Besoin d'une référence à tous les éléments vidéo ou l'enveloppe car ces éléments peuvent accéder à toutes les propriétés, méthodes et événements qui vont nous permettre de contrôler le lecteur. Document.QuerySelector, transmettez la vidéo. Nous ferons de même pour chacun de nos contrôles. Nous devons accéder à notre barre de progression car nous devons le mettre à jour avec JavaScript, nous devons accéder à la lecture et faire une pause. Nous voulons accéder à l'entrée de volume, à tous les différents boutons de vitesse, et enfin aux boutons arrière et avant. Nous allons le faire de haut en bas. Le suivant concerne la barre de progression et nous utilisons le sélecteur de requêtes. Ensuite, nous avons les boutons de lecture et de pause. Celui-ci est un ID, nous utilisons le hachage, l'ID de lecture et nous allons dupliquer cela. Le second est la pause. Vers le suivant, nous avons besoin du volume. Nous allons saisir le type d'entrée avec l'ID du volume, nous dupliquons celui-ci, le modifions en volume. Le prochain, si nous revenons à notre page d'index, sera de sélectionner les quatre boutons. Nous n'avons pas d'ID pour chacun d'entre eux, ce sera beaucoup plus simple si nous les avons sélectionnés par la classe Nous pouvons donc utiliser le sélecteur de requêtes tous pour les saisir. Ensuite, dans la vidéo suivante, nous détecterons quel bouton a été sélectionné. La constante suivante est la vitesse avant et cette fois, nous devons utiliser le sélecteur de requête tous, utiliser un point car il s'agit d'une classe, puis les deux derniers sont pour nos boutons retour et avant. Cette fois, nous revenons aux identifiants, donc nous utilisons un hachage. C'est pour notre bouton Précédent, dupliquez-le et modifiez-le pour qu'il soit transféré. Bien. Nous progressons bien avec ce lecteur vidéo. Nous avons maintenant ajouté les commandes. Nous avons accès à tous ces contrôles via nos variables. Dans la vidéo suivante, nous pouvons commencer à ajouter des événements, des propriétés et des méthodes pour ensuite contrôler notre lecteur vidéo. 54. Projet de lecteur vidéo : événements vidéo, propriétés et méthodes: Dans la vidéo précédente, nous avons brièvement examiné ces éléments multimédia HTML. Nous avons discuté du fait qu'il avait certaines propriétés et méthodes dont nous pouvons tirer parti. C'est ce que nous allons maintenant faire dans notre JavaScript. concerne les propriétés, si nous faisons défiler vers le bas, nous avons quelque chose appelé l'heure actuelle, et c'est quelque chose que nous pouvons utiliser pour saisir le temps de lecture actuel en secondes. Descendez un peu plus loin. Nous avons également quelque chose appelé la durée. Il s'agit de la longueur totale de la vidéo. Nous en aurons également besoin plus tard dans cette vidéo. Un peu plus loin vers le bas, nous devrions également avoir des méthodes disponibles. Ici, nous pouvons profiter de méthodes telles que le jeu et la pause. Bien sûr, ils vont vraiment être utiles pour notre projet. Passons à notre script.js et implémentons ces éléments à l'intérieur d'ici. Le jeu et la pause sont assez simples. Tout ce que nous devons faire est de saisir nos éléments particuliers, puis d'ajouter un écouteur d'événements. Nous allons maintenant cliquer gratuitement, puis nous pouvons exécuter ces méthodes. À l'intérieur de notre lecteur vidéo, à l'intérieur de notre code HTML, nous avons déjà configuré ces boutons pour lire et mettre en pause, et dans notre script, nous avons déjà une référence à ces deux éléments. Nous pouvons commencer par accéder au bouton Lecture, puis à l'écouteur d'événements. Nous écouterons l'événement Click. Vous pouvez soit ajouter une fonction en ligne à l'intérieur d'ici, soit l'ajouter séparément. Je vais juste ajouter ce nom de fonction en ligne . Alors, que voulez-vous faire dans cette fonction ? Eh bien, ce que nous devons faire, c'est accéder à notre vidéo, qui est nos éléments vidéo, et comme cela hérite de toutes les propriétés et méthodes des éléments du média HTML, nous pouvons ensuite utiliser ces méthodes que nous venons de regarder, et ce dont nous avons besoin, c'est jouer. Nous pouvons essayer ça. Testons notre lecteur vidéo, actualiserons, cliquez sur « Lire » et il met à jour instantanément la vidéo. Bien sûr, le bouton Pause ne fonctionne pas encore, mais si nous revenons à notre JavaScript, nous pouvons y accéder et faire exactement la même chose en ajoutant un écouteur d'événements. Pour l'événement de clic, nous allons exécuter une fonction appelée pause. La pause sera à peu près la même chose. Nous avons juste besoin d'accéder à notre vidéo et à la méthode de publication. Ensuite, nous pouvons également tester que cela fonctionne aussi. Jouez, c'est très bien. Ensuite, faites une pause, et cela mettra ensuite notre vidéo en pause. plus, ces deux boutons peuvent également être agréables à lire et à pause la vidéo lorsque nous cliquons sur la vidéo réelle en haut. Certains joueurs vous permettent également faire avec la barre d'espace. Cela créera une fonction que vous allez basculer entre l'état de lecture et l'état de pause. Première étape, nous créerons notre fonction pour basculer le jeu. La première partie de cette fonction va détecter si la vidéo est déjà en pause. Si c'est le cas, nous allons alors exécuter la fonction Play. Si ce n'est pas le cas, nous allons faire une pause. Nous allons créer une instruction if à l'intérieur d'ici, qui va vérifier si la vidéo est en pause. Comment savoir que cela fonctionnera. Eh bien, si nous revenons à la documentation et que nous faisons défiler vers le bas jusqu'aux propriétés, nous avons accès à une propriété en lecture seule appelée pause, qui renvoie alors une valeur vraie ou fausse. Dans notre cas, si la vidéo est en pause, nous voudrions faire le contraire et exécuter la méthode de lecture. Si c'est vrai, nous pouvons également revenir sur cette déclaration if. Ensuite, juste en dessous, si ce n'est pas vrai, qui signifie que la vidéo n'est pas en pause, nous ne voulons pas mettre la vidéo en pause. Pour que cela fonctionne, nous devons accéder à nos éléments vidéo, qui sont stockés à l'intérieur de cette constante vidéo. La place est en bas, video.addeventlistener. Nous allons maintenant répertorier un événement de clic sur cette vidéo , puis exécuter notre fonction qui consiste à basculer la lecture. Enregistrez ceci et revenez dans le navigateur, rechargez-le. Étant donné que l'état est actuellement en pause, ce qui est vrai dans les instructions if, nous devrions maintenant pouvoir cliquer dessus puis lire la vidéo. Cliquez dessus et cela devrait fonctionner. Nous allons ensuite cliquer à nouveau là-dessus. Le deuxième clic va faire l'inverse et faire une pause. Bien. Tout cela fonctionne maintenant. La prochaine chose, comme mentionné précédemment, est de basculer entre l' état lecture et pause lorsque l'utilisateur atteint la barre d'espace. Lorsque vous appuyez sur la barre d'espace, il n'est attaché à aucun élément. Ce que nous pouvons faire pour écouter la barre d'espace c'est d'ajouter un écouteur d'événements au document réel. Prenons cela, sélectionnez Ajouter un écouteur d'événements. Nous voulons faire une liste pour un événement clé vers le bas. Cette touche est enfoncée lorsque n'importe quel bouton du clavier est enfoncé. Cela va ensuite exécuter une fonction. Ici, avant d'exécuter notre fonction de lecture à bascule, oubliez pas que nous sommes à l'écoute n'importe quelle touche à appuyer sur le tableau. Ce que nous devons faire, c'est de détecter d'abord si la barre d'espace est enfoncée ou si une autre touche est pressée. Nous pouvons le faire en accédant aux informations de l'événement, en passant à la fonction. Ensuite, nous pouvons jeter un coup d'œil à l'information sur l'événement. Enregistrez cela, actualisez, ouvrez les outils de développement, accédez à la console. Ce que nous devons faire maintenant, c'est appuyer sur n'importe quelle touche à l'intérieur d'ici. Cela a non déclenché nos événements de clavier. Si nous ouvrons cela, cette propriété de code sur cet objet nous indiquera exactement quel bouton du clavier a été enfoncé. Mon cas, j'appuie sur la barre d'espace, qui est le code de l'espace. Nous pouvons maintenant y accéder à l'intérieur de notre fonction. Plutôt que le journal de la console, nous allons vérifier si le code event.code est égal à la chaîne d'espace, qui correspond à cette chaîne ici. Ensuite, ce que nous voulons faire, c'est exécuter notre fonction de lecture à bascule. C'est le résultat, baisse et rafraîchissement. Maintenant, si nous appuyons sur la barre d'espace, notre fonction sera de nouveau exécutée et elle s'arrêtera. Vous constaterez également que si vous appuyez sur un autre bouton du clavier, cette fonction ne sera pas activée. Bien. En descendant, la prochaine chose que nous avons est ce curseur de volume. Si nous allons sur la page d'index, nous pouvons voir que cela est contrôlé par l'entrée avec le type de plage. La plage que nous avons définie ici est d'un minimum de zéro et d'un maximum. Donc, zéro étant silencieux et le numéro un étant le volume maximal. Au fur et à mesure que vous utilisez les diapositives, elles augmentent ou descendent par incréments de 0,1 de la référence verticale du script à cette constante de volume. Sélectionnez cette option. Nous ajouterons ensuite un écouteur d'événements. Nous voulons écouter un événement de saisie. Cela signifie que l'utilisateur a déplacé l'entrée. Encore une fois, cela déclenchera une fonction appelée change de volume. Revenez à la documentation de Mozilla. Nous pouvons voir à l'intérieur ici. Nous avons également accès à une propriété de volume. Nous devons nous assurer que le volume est exactement le même que notre curseur de portée. Nous pouvons le faire en accédant à notre video.volume, qui est cette propriété juste ici, puis nous voulons définir cette valeur comme égale à une nouvelle valeur. Cette nouvelle valeur correspond à la valeur de notre plage de volumes. En haut, nous avons accès à tous les volumes, ce qui est juste ici. Il s'agit simplement d'une référence à l'élément réel. Si la valeur du curseur rencontre les accès avec la propriété de valeur de point. Essayons ça. Enregistrez et rafraîchissez. Il peut jouer. Maintenant, si vous faites glisser le volume vers le haut et vers le bas, si vous avez construit ici une différence entre si vous avez construit ici une différence entre les niveaux de volume la prochaine chose que nous avons est celle de nos quatre boutons, qui vont ralentir et accélérer la lecture de la vidéo. Dans notre script, nous utilisons le sélecteur de requête tous pour sélectionner tous ces boutons d'alimentation qui les installent dans la variable de vitesse. Cela signifie que nous avons accès à ces quatre boutons. Nous aurons également besoin d'un moyen de saisir les valeurs particulières. Cela nous permet d'ajouter un attribut personnalisé appelé vitesse des données. Cela sera égal à la valeur de 0,5, puis nous allons simplement copier ceci, coller ceci dans notre prochain bouton. Celui-ci est la valeur d'un. Le troisième est 1,5 et le dernier est le double de la vitesse de lecture, soit deux. s'agit simplement d'un attribut personnalisé et nous commençons généralement les attributs personnalisés avec ce préfixe de données. Nous savons, d'après les vidéos précédentes, que nous pouvons accéder aux valeurs de n'importe lequel de ces attributs. Revenons maintenant au script et nous pouvons commencer par ajouter un EventListener à n'importe lequel de ces boutons. Le script en bas permet d'accéder aux quatre boutons que vous avez stockés dans la constante de vitesse. Puisque nous avons plusieurs valeurs, va boucler sur la largeur FoEach. Fonction client qui va fonctionner pour chacun de nos boutons, je vais stocker une référence à chacun de nos boutons à l'intérieur d' une variable, puis accéder à tous les boutons. Ajoutez un EventListener. Nous allons maintenant lancer un événement de clic, puis exécuter une fonction appelée SetSelected. De plus, nous ne l'avons pas encore créé, donc nous allons simplement créer ceci juste au-dessus, SetSelected comme dans le corps de la fonction. Cette fonction est responsable de deux choses. Tout d'abord, si la vidéo n'est pas en cours de lecture, nous pouvons cliquer sur l'un de ces boutons, mais nous voulons d'abord commencer la lecture. Nous le faisons comme ci-dessus avec video.play, transmettez cela dans notre fonction. Ensuite, la deuxième chose que nous voulons faire est de sélectionner la vitesse de lecture particulière. d'autres termes, nous avons besoin d'accéder aux informations de nos événements. Ensuite, comme toujours, nous utilisons e.target pour accéder à des éléments particuliers. Nous pouvons ensuite utiliser GetAttribute, que nous avons examiné par le passé pour saisir notre attribut de vitesse de données client. Cela devrait maintenant nous donner accès à nos valeurs qui vont de 0,5 à 2. Nous avons également besoin d'un moyen de définir cette valeur à notre vidéo. Tout d'abord, accédez à notre vidéo puis dans la documentation, nous avons une autre variable de propriété appelée PlaybackRate. Accédez donc à ceci. Cela correspond au volume de notre attribut. Essayons ça. Chargez la page. Ensuite, nous allons essayer 0,5, ce qui est vraiment lent. Vitesse unique, 1,5, puis double la vitesse. Bien. Au fur et à mesure que cette vidéo est en cours de lecture, nous voulons également mettre à jour la barre de progression en haut. Pour ce faire, nous pouvons accéder à divers événements. Nous pouvons le faire en profitant de certaines propriétés appelées durée et CurrentTime. Dans la section probabilité, tout en haut, nous avons le CurrentTime, qui est le temps de lecture équivalent en secondes, ainsi que la durée de la vidéo. Nous pouvons utiliser ces deux propriétés pour calculer la valeur de la barre de progression à n'importe quel point mais nous devons également le faire régulièrement. Malheureusement, il existe certains événements que nous pouvons maintenant répertorier si nous faisons défiler la page jusqu'à la section Événements. En bas, sous événements, nous avons un événement appelé timeupdate, qui se déclenche chaque fois l'attribut CurrentTime a été mis à jour. Cela signifie que nous pouvons maintenant écouter l'heure actuelle à mettre à jour, puis recalculer la barre de progression à chaque fois. Étape 1, nous allons créer une nouvelle fonction qui va réellement mettre à jour la barre de progression , puis nous appellerons cela à chaque mise à jour. Excellente fonction appelée UpdateProgress. Nous pourrions simplement mettre à jour immédiatement la barre de progression, mais nous ajouterons d'abord une instruction if rapide à l'intérieur, qui va vérifier si la video.CurrentTime est supérieure à la valeur de zéro. Cela ne sera exécuté que si la vidéo a commencé à être lue, puis nous pourrons accéder à notre barre de progression. Ceci est stocké dans la constante de progression. Définissez la valeur. Cette valeur peut être calculée en divisant le CurrentTime par la durée. Donc Video.CurrentTime propriétés facilement que nous venons de regarder, divisez cela par la video.duration. Pour exécuter cette fonction, nous devons ensuite ajouter un écouteur d'événements à un lecteur vidéo. Accédez à la vidéo, ajoutez EventListener et cette fois-ci, nous ne sommes pas en ligne maintenant pour un clic, nous voulons maintenant répertorier l'une des méthodes intégrées. La méthode intégrée est cette mise à jour temporelle, qui appellera ensuite notre fonction de progression de mise à jour. Essayons cela dans le navigateur. Cliquez sur Play. Dès que cela commence notre lecture, nous effectuerons la mise à jour de notre barre de progression. Faites une pause, et cela s'arrêtera. Bien. Nous allons également essayer de régler la vitesse lente et cela la ralentit. vitesse la plus rapide augmentera également cela. Nous sommes presque là avec notre lecteur vidéo et la dernière chose à prendre en charge, c'est ces boutons arrière et avant. La façon de les configurer consiste également à utiliser le CurrentTime, puis nous déduirons un certain nombre de secondes et augmenterons également le nombre de secondes en fonction du bouton sur lequel vous avez cliqué. Nous avons tous accès à ces deux boutons avec les constantes arrière et avant. Il peut être associé à la variable arrière ajoutant un EventListener. C'est maintenant un clic, qui va ensuite exécuter une fonction. Nous rappellerons cela puis accéderons à notre lecteur vidéo pour répondre à l'heure actuelle à l'aide l'opérateur d'attribution de soustraction. J'ai défini cette valeur égale à cinq, ce qui déduira cinq secondes, puis réinitialisera le CurrentTime pour qu'il soit égal à la nouvelle valeur. s'agit simplement d'un raccourci et Il s'agit simplement d'un raccourci et ce serait exactement la même chose que de faire Video.CurrentTime est égal à Video.CurrentTime emporter cinq. Les deux sont donc exactement les mêmes. Au contraire, nous pouvons simplement copier et coller ceci. Cette fois, nous devons écouter le bouton Suivant. La fonction peut également être appelée vers l'avant. Cette fois-ci, la seule différence est que nous voulons augmenter le temps de cinq secondes. Essayons ça. Actualisez, que je transfère, et cela mettra à jour la barre de progression. Cliquez en arrière. Cela se terminera cinq secondes à partir de notre CurrentTime. 55. Jeu Shape Drop : créer l'UI: Bienvenue de retour. Nous avons un petit jeu amusant pour terminer cette section, qui va être un jeu de gouttes de forme. Cela va utiliser l'API de glisser-déposer HTML, ce qui signifie que nous pouvons créer toutes ces formes. Nous avons une section en haut avec des contours vides, puis les formes en bas. L'utilisateur peut ensuite les faire glisser sur ces derniers et les déposer à l'emplacement correspondant approprié. Chacune de ces formes en bas a une forme correspondante en haut. Si vous les avez bien compris, nous augmentons le score. Vous vous trompez, ce score est déduit par un. Je vais commencer dans cette vidéo en créant tout le HTML, donc essentiellement l'interface utilisateur. Ensuite, dans les prochaines vidéos, nous ferons en sorte que tout cela fonctionne en utilisant JavaScript. Ce projet va utiliser une autre API Web, qui est l'API glisser-déposer. L'API glisser-déposer nous donne accès à divers événements de glisser-déposer que nous pouvons utiliser dans JavaScript. Nous pouvons écouter quand un élément a commencé à traîner. Nous pouvons écouter quand la traînée se termine. Nous pouvons écouter quand un élément est déplacé, lorsqu'il a quitté une cible particulière et également écouter quand cet élément a été déposé. C'est ce que nous allons utiliser dans les prochaines vidéos. Mais pour l'instant, passons aux fichiers du projet et nous commencerons à l'intérieur de la page d'index. Dans le jeu de gouttes de forme, il s'agit d'une page d'index assez simple. autre moitié est notre structure très basique qui se lie à un script.js vide. Commençons ce projet. J'ai déjà ajouté quelques styles à cela. Tout ce que nous avons fait ici, c'est d'ajouter des classes qui sont liées à différentes formes. Par exemple, nous avons divers rectangles, nous avons des pilules, nous avons, nous avons des carrés. Chacun d'entre eux correspond généralement à la largeur et à la hauteur. Nous avons une couleur d'arrière-plan, et certains d'entre eux ont également un rayon de bordure. Nous allons entrer dans notre code HTML, nous créerons tous ces éléments et les relierons aux classes appropriées. Le script est vide pour les prochaines vidéos, et nous allons commencer dans le fichier index.html. Sautons ici et dans la section du corps. La section du corps va être relativement simple. Si nous regardons la partie finale, nous avons une section d'en-tête avec la partition et du texte, puis nous avons deux sections distinctes ci-dessous. Chacune de ces sections va être une grande forme div. Ensuite, nous allons simplement les lier aux noms de classes pour fournir chacune de ces formes et couleurs. Dans la section corps, à l'en-tête, ce qui sera pour une section très supérieure. Comme vous pouvez le constater, la première chose dont nous avons besoin, c'est une rubrique. C'est H3. Nous dirons la partition, qui ne sera que du texte codé en dur. Mais juste après, nous avons besoin d'une valeur dynamique. Nous pouvons l'entourer dans une période, insérer l'ID de partition, puis nous compléterons le contenu de la plage plus tard en utilisant JavaScript. Une chose que nous ne pouvons pas voir sur cette version finale est un bouton appelé Play Again. C'est parce qu'il a mis certains n' apparaîtront qu' à la fin de la partie. Mais pour l'instant, nous allons le placer et ensuite nous le cacherons plus tard pour détecter Play Again. Ensuite, ouvrons notre version dans le navigateur. Copiez le chemin d'accès à notre index. Vous devriez voir que tous les styles prédéfinis ont été mis en place. La dernière chose dont nous avons besoin à l'intérieur de cet en-tête, c'est le texte. Juste en dessous du bouton, ajoutez un élément p. Le texte du glissement, les formes colorées dans les trous correspondants. Bien, après avoir fait cela, nous passons ensuite à nos deux sections. La section supérieure sera la section Drop car nous avons déposé les formes à l'intérieur d'ici, et la partie inférieure sera la section de glissement. Ce sont à peu près les mêmes. Ils auront les mêmes noms de classes pour créer les formes. Nous ajouterons également une classe supplémentaire à la section supérieure. Ils ont simplement le contour plutôt que la couleur de fond unie. Jetons un coup d'œil à ça. J'ai l'air bien. Maintenant, juste en dessous de l'en-tête, créez notre premier, qui est la section supérieure à l'intérieur d'une div, et donnez-nous une classe de la section de dépôt. Dupliquez cela, et notre deuxième section sera destinée à la section glisser-glisser. Nous pouvons utiliser tous les éléments que vous souhaitez pour chacune de ces formes, ce sera juste un élément vide. Je vais faire une plongée. Nous n'avons pas besoin de texte ou de contenu dans la div car nous utilisons la classe CSS pour lier cela et créer la forme sur la page. Par exemple, à propos de la classe de carré. Enregistrez ça. Square apparaît désormais à l'écran. Nous voyons cela parce que cette classe de carré à l'intérieur de notre styles.css, juste ici comme couleur d'arrière-plan et a également une largeur et une hauteur définies. Cela va automatiquement placer notre forme sur l'écran. de même pour toutes les autres classes, dupliquez celle-ci et la seconde. Celui-ci est pour notre rectangle, numéro 3 est pour le cercle, numéro 4, le carré numéro 2. Même si nous avons des formes identiques telles que deux carrés différents ici, vous remarquerez qu'elles sont tailles différentes pour rendre le jeu un peu plus difficile. Nous avons le carré numéro 2. La suivante concerne l'ovale numéro 2 et le rectangle 2, le rectangle numéro 3. Le prochain est pour la pilule ovale, puis enfin la pilule numéro 2. Sauvegardons cela et examinons notre projet. Actualisez. Il y a maintenant des formes ovales à l'écran. La prochaine chose à faire est de copier toutes ces sections, toutes les formes, et de les coller à l'intérieur de notre section de glissement. Même toutes nos formes sont maintenant en place. Mais nous devons maintenant mélanger la deuxième section parce que si nous n'avions pas tous ces éléments dans le même ordre que ci-dessus, ce sera vraiment facile à jouer. Il suffit de mélanger quelques-uns de ces éléments. Je vais en faire la même chose qu'une version finale. Au début, nous avons le rectangle, est en haut, le carré, le troisième est la pilule, carré 2. Peu importe si le vôtre est différent ou identique. Vous pouvez le faire exactement comme vous le souhaitez. Oval 2, pilule numéro 2 suivante, cercle, rectangle, puis rectangle. C'est tout à fait très bien, tant que c'est dans un ordre différent de celui ci-dessus. Pour conserver la cohérence de nos formes dans les deux sections, nous avons utilisé ce même nom de classe en haut et en bas. Mais le problème que nous avons actuellement dans notre version est que les formes en haut ont cette couleur d'arrière-plan. Ce que nous voulons, c'est comme la version finale où nous avons un contour vide. Nous pouvons faire glisser ces formes vers l'intérieur, ce qui remplira ensuite la couleur d'arrière-plan pour donner l'illusion que la forme est tombée dans un trou. Nous pouvons le faire en ajoutant une classe supplémentaire. Si nous jetons un coup d'œil à l'intérieur de nos feuilles de style et que nous descendons vers le bas, nous avons cette classe de goutte. Il s'agit certainement d'une bordure violette, que nous voyons dans la version finale autour de chacune de nos formes. Nous avons également supprimé n'importe quelle couleur d'arrière-plan. Maintenant, à l'intérieur de notre page d'index dans la section supérieure, nous pouvons ajouter cette classe, j'ai laissé tomber chacune de nos formes. Nous pouvons copier et coller cela si vous le souhaitez, ou vous pouvez le taper. Des places pour chacune de nos formes. Nous devons économiser, et jetons un coup d'œil à notre propre version. Actualisez. Maintenant, j'ai une forme vide que nous pouvons maintenant déplacer n'importe lequel de ces éléments à l'intérieur. Bien sûr, si nous essayons de cliquer et de déplacer l'un d'entre eux, nous ne voyons pas encore les événements de glissement. Mais c'est quelque chose qui sera activé dans les prochaines vidéos lorsque nous utiliserons JavaScript. 56. Jeu Shape Drop : glisser / déplacer des événements: Comme vous pouvez vous y attendre, il suffit de placer éléments HTML normaux comme nous l'avons ici. Lorsque nous essayons de cliquer et de faire glisser l' une de ces formes, rien ne se passe. Rendre ces formes pouvant être glissées, la première étape consiste à ajouter un attribut appelé glisser-déplacer et à les définir comme étant égal à vrai. Parce que nous savons tous que les sections inférieures peuvent être glissées, ajoutez-les à la section de glissement, puis sautez dans notre première forme. Définissez le glissement pour qu'il soit égal à une valeur true. Maintenant, si nous essayons de rafraîchir et de cliquer sur l'un de ces éléments, nous pouvons maintenant les faire glisser sur la page. Nous devons encore configurer des éléments comme la zone de dépôt pour permettre leur mise en place. Mais pour l'instant, c'est le premier pas que nous devons franchir. Copiez ceci et collez-le dans chacune de nos formes supplémentaires. Je vais essayer ça. Bien. Nous pouvons maintenant tous les déplacer, mais nous ne pouvons pas vraiment faire grand-chose avec eux pour l'instant. C'est parce que nous avons besoin d'une configuration exactement ce que nous voulons faire à chaque étape. L'API glisser-déposer contient divers événements que nous pouvons écouter. C'est ce que nous avons regardé initialement dans la première vidéo. Nous pouvons les utiliser à l'intérieur de nos scripts, pour sauter dans notre scripts.js, qui devrait être un fichier vide. Ensuite, tout en haut, ce que nous allons faire en premier, c'est de recadrer tous nos boutons avec la classe Drop. Dans la page d'index, cette classe est supprimée dans toutes les sections supérieures. Nous pouvons utiliser Query Select all pour rogner tous ces éléments, puis nous pouvons passer en boucle sur ces éléments et écouter que n'importe quel élément soit déposé sur les sections. Document.QuerySelectorAll comme dans la classe Drop, puis nous pouvons stocker cela à l'intérieur d' une constante appelée dropzones. Bien, nous avons maintenant accès à toutes ces zones d'accès. Nous devons ensuite les parcourir en boucle et ajouter un écouteur d'événements, pour écouter une chute. Grab, toutes les zones de chute constantes, boucle sur attendre chacune, va exécuter la fonction. Ensuite, chacune de ces formes passera à notre fonction. Appelons ces éléments l'élément, supprimons les éléments, sorte que chaque personne 1, nous puissions ajouter un écouteur d'événement, qui revient à cela maintenant, pour l'événement drop. Ces événements de dépôt sont activés en raison de l'API glisser-déposer. C'est ce que nous voyons ici où un objet est déposé sur la cible de dépôt valide. Séparé par un communiste, va déclencher une fonction appelée HandleDrop. Pour chaque fonction juste au-dessus, elle disparaîtra. Ensuite, tout ce que nous faisons pour l'instant est placé dans un simple journal de console, moins maintenant cela fonctionne. Le texte de drop, il s'agit donc de l'événement drop maintenant pris en charge. La prochaine chose que nous devons faire est d'écouter à nouveau l'événement Drag. Nous pouvons le faire avec un événement appelé glisser-démarrer et revenir dans la section Événements de glissement. C'est une chose dont nous avions besoin ici. Cet événement est déclenché dès que l'utilisateur commence à glisser l'un de nos éléments glissables. Ce que nous allons faire, c'est d'accéder à notre document complet et d'ajouter un écouteur d'événements pour écouter l'événement Drag Start sur n'importe lequel de nos éléments. place dans le glissement démarre, qui va ensuite exécuter une fonction appelée HandleDragStart. Pour créer cela juste au-dessus, HandleDragStarts. Pour l'instant, nous allons simplement placer une fois de plus dans un journal de console, vérifiez que tout fonctionne. Le glisser-démarre, puis nous copierons et collerons cette section que nous venons de créer, puis l'ajouter ci-dessous. La seule différence est de remplacer glisser-début par la fin du glissement, la même chose pour le journal de la console, ainsi le nom et la fonction de l'événement. Maintenant en place, nous pouvons maintenant le tester, assurer que votre fichier est enregistré puis recharger le navigateur, déposer dans la console, et maintenant nous pouvons essayer cela. Si nous cliquons sur l'un de nos éléments glissables, nous pouvons les déplacer et nous voyons que l'événement de démarrage par glisser-déclencher est déclenché. Déposez cela sur l'un de nos éléments. Nous voyons que la fin de la traînée a également été déclenchée. Mais une chose qui nous manque, c'est ce journal de console ou a été abandonné. Ce que nous attendrions de ces zones lorsque nous passons sur l'une de nos zones de dépôt, qui est l'une de ces formes supérieures, et que nous déposons des éléments n'importe où à l'intérieur de celles-ci. Nous nous attendons à ce que ce journal de console soit tiré. La raison pour laquelle nous ne pouvons pas laisser tomber, c'est que le comportement par défaut est ne pas autoriser les objets à être déposés dans page Web par défaut. Nous devons empêcher ce comportement par défaut sur nos zones de dépôt. Nous pouvons le faire en écoutant un événement appelé Dragover, ce qui signifie que nous faisons glisser un élément dans une certaine zone, où nous voulons qu'il soit déposé. Tout en bas, elle parcourt à nouveau toutes nos zones de dépôt, puis effectuera une boucle pour chaque boucle pour accéder à nos zones de dépôt. Pour chacun, qui est chacune de nos formes vides. Exécutez une fonction. Cette fonction prendra une valeur pour chacune de nos formes. Nous pouvons accéder à la valeur, puis ajouter un écouteur d'événements. Cet écouteur d'événements va maintenant répertorier un événement appelé dragover. s'agit de l'événement juste ici, et il est appelé chaque fois qu'un élément glissé est déplacé sur une cible de dépôt valide. Essentiellement, je veux supprimer tous les éléments de cette section supérieure. Il va déclencher cet événement appelé dragover, séparé par une virgule Great fonction AllowDrop, que nous pouvons ensuite créer juste au-dessus. Maintenant, lorsque nous cliquons sur l'un de ces éléments, dans notre version et faites-les glisser sur l'une de ces zones de dépôt avec n'importe qui pour accéder aux informations de l'événement, puis nous pouvons appeler empêcher défaut. N'oubliez pas que le comportement par défaut était de ne pas permettre que cela soit supprimé. Nous sommes maintenant priés de permettre à toutes les fonctions du haut d'être appelées. Essayons cela, sauvegardons et rafraîchissons. Faites glisser l'un de ces éléments, puis déposez-les sur une cible. Nous voyons maintenant le texte de « drop », et notre fonction fonctionne maintenant correctement. Bien. Nous savons maintenant que cette fonction fonctionne et tous les autres sont également en train de tirer. Nous pouvons maintenant commencer à faire bouger les choses à l'intérieur de notre jeu. Ce que nous voulons faire, c'est de ne laisser tomber qu' une certaine forme sur une certaine zone de chute. Par exemple, nous voulons seulement que le rectangle soit déposé sur le rectangle et qu'un cercle soit déposé sur le cercle, à l'intérieur de notre index.html. Une façon de procéder consiste à faire correspondre les classes particulières. Par conséquent, si nous faisons glisser la classe de rectangle, nous voulons seulement que cela soit déposé sur la classe rectangle de la zone de dépôt. Pour que cela se produise dans notre fonction de dépose de poignée, nous devons avoir accès à nos deux éléments. Nous devons avoir accès à l'élément qui a été traîné, ainsi qu'aux éléments que nous déposons. Nous pouvons ensuite comparer les deux classes qui sont les mêmes. Avant d'autoriser cette chute, nous pouvons le faire à l'intérieur de notre fonction en accédant aux informations sur les événements, ce qui nous permettra d'accéder à tous les éléments avec e.target. Nous pouvons ensuite accéder à notre liste de cours. Examinons cela dans le navigateur. Rafraîchissez, faites glisser le rectangle et déposez-le sur l'un de nos éléments. Nous avons déposé cela sur le carré en haut à gauche, et nous récupérerons une liste de classes qui inclut le drop et le carré. C'est exactement la même chose que ce que nous voyons à l'intérieur de notre code HTML. Essayons encore une fois. Nous avons essayé le rectangle, et celui-ci fonctionne aussi. C'est ainsi que nous pouvons accéder aux classes des éléments supprimés. Eh bien, comment pouvons-nous accéder aux classes pour les éléments traînés ? Eh bien, une bonne façon de le faire est de le stocker dans une variable en haut de notre page. Juste au-dessus de nos zones de dépôt, nous disons laisser sélectionner. Nous pouvons mettre à jour cette valeur à l'intérieur de la fonction appelée Handler Drag Start. N'oubliez pas que cela est déclenché dès que nous commençons à cliquer sur l'un de nos éléments en bas pour commencer le processus de glissement Pour ce faire, nous devons accéder aux informations de l'événement. Nous pouvons supprimer le journal de la console, puis mettre à jour notre variable sélective pour qu'elle soit égale à e.target. Cela signifie maintenant que si nous revenons à une fonction de dépôt de poignée près du haut, nous avons désormais accès à ces deux éléments. Nous avons accès à la liste des classes des éléments de dépôt et, en haut, nous avons accès aux éléments glissés avec cette variable appelée sélectionnée. Nous pouvons maintenant créer une instruction if pour vérifier si ces deux éléments contiennent les mêmes classes. Je peux d'abord le faire en accédant à notre liste de classes, f e.Target.ClassList, puis nous avons accès à une méthode appelée contient. Ce que nous voulons faire ici, c'est que nous vérifions si l'élément particulier que nous avons sélectionné, qui est juste ici, contient la même classe que celui-ci ici. Nous pouvons le transmettre dans Selected.ClassName. Nous pouvons utiliser le nom de classe unique pour celui-ci, car nous savons que l'un de ces éléments de glissement ne contiendra qu'une seule classe. Si c'est vrai, nous ouvrirons les calibres, transmettrons le journal de la console, et nous pouvons modifier ce texte pour qu'il s'agisse du texte correct. Nous pouvons ensuite revenir de cette affirmation if, si c'est vrai. Si ce n'est pas le cas, exécutera le code, juste en dessous, où nous ferons un journal de console avec le texte incorrect. Essayons ça, il suffit de rafraîchir. Tout d'abord, nous allons essayer le bon comportement, donc un carré, nous allons le faire glisser sur le bon carré, qui est celui-ci, et nous voyons bien. Faites-le glisser sur un élément incorrect, nous obtiendrons le texte incorrect. Vous pouvez voir si nous allons au dernier match juste ici, dès que nous avons obtenu l'un de ces corrects, faisant glisser vers la droite ou juste au-dessus. Cette forme est maintenant retirée de la partie inférieure. De la façon dont nous pouvons le faire, à l'intérieur de nos instructions if, nous pouvons maintenant supprimer le journal de la console. Nous pouvons saisir les éléments sélectionnés et ils appellent la méthode remove. Testons cela, actualiserons à nouveau et faites glisser un rectangle dans un rectangle, puis supprimons le rectangle de la section inférieure. Bien. La prochaine chose à faire lorsque nous avons une de nos formes dans le trou correct, c'est de s'assurer que la couleur d'arrière-plan est remplacée la même couleur que la forme qui a été mise en place. Si nous le déposons, il hérite maintenant de la couleur de fond rouge, donne l'illusion que celle-ci est tombée dans une forme particulière. Maintenant, la façon dont nous pouvons le faire, si nous examinons notre styles.css, la seule différence entre ces deux formes, comme celle-ci et celle-ci, est ce fond d'aucune. Ceci est fourni avec la classe de goutte, qui se trouve sur toutes les sections supérieures. Tout ce que nous devons faire lorsque l'utilisateur dépose la bonne forme dans le trou correct, c'est de supprimer cette classe de goutte et d'ouvrir notre script. Il s'agit de la section correcte de l'instruction if. Ce que nous allons faire, c'est saisir nos éléments avec e.Target.ClassList. Cette liste de classes possède une méthode appelée remove, comme dans la classe de dépôt, qui supprimerait ensuite cette classe, y compris la couleur d'arrière-plan, laissant la couleur d'arrière-plan à remplir. Essayons ça. Faites glisser l'une de ces formes dans le trou approprié. La forme est maintenant supprimée du bas, et la couleur d'arrière-plan s' affiche à l'intérieur du navigateur. Nous allons vérifier si c'est correct lorsque nous essayons une erreur. Bien. Tout cela fonctionne maintenant bien, et si nous examinons la version finale, la dernière chose que je veux faire est de changer l'opacité lorsque la forme a été glissée. Par exemple, si nous nous éloignons, nous pouvons voir que la forme de l'endroit d'origine est maintenant devenue une couleur plus claire. De même si nous bougeons en rouge, nous pouvons voir la forme rouge plus claire a été laissée en place, ce qui permet à l'utilisateur de savoir quelle forme il fait actuellement glisser. Nous pouvons le faire en définissant l'opacité à l'intérieur de notre script, et nous commencerons dès que nous commencerons à gérer le démarrage par glissement. Tout d'abord, sélectionnez l'élément avec e.targets.style.opacité. Eh bien, nous allons définir l'opacité sur 0,5. Ensuite, nous pouvons copier ceci, et nous le remettrons à l'intérieur de l'extrémité de glissement de la poignée. Nous n'avons plus besoin d'un journal de console, collez-le dans lequel nous pouvons définir la valeur comme égale à un. Maintenant que nous accédons aux informations de l'événement, nous devons également les transmettre dans notre fonction. Économisez. Essayons cela et dans notre version. Dès qu'il commence à bouger l'une de nos formes, la forme qui est maintenant laissée en place est maintenant beaucoup plus légère. Il s'agit de la fonctionnalité glisser-déposer maintenant en place, et dans la prochaine, elle améliorera ce jeu en ajoutant au score de l'utilisateur, gérant la fin de la partie et en redémarrant également le jeu 2 avec notre Bouton Play Again. 57. Jeu Shape Drop : gérer le score et la fin du jeu: Le jeu n'est pas fonctionnel en termes de glisser-déposer. Mais pour l'améliorer encore, nous pourrions suivre le score et également réinitialiser le jeu à la fin. abord, commençons par nous attaquer au score. En haut du script, nous avons besoin d'une variable pour stocker cela Je vais donc passer tout en haut et nous allons créer une variable à l'aide cette variable et nous initialiserons un score avec une valeur zéro. À l'intérieur de notre index, sautez sur cette page, nous avons déjà une section de score au-dessus du haut. Nous avons le texte de la partition à l'intérieur du titre de niveau trois. Nous avons maintenant une plage avec l'ID de partition, que nous allons mettre à jour à l'intérieur de notre script et un endroit pour obtenir la partition sera à l'intérieur d'une section de dépôt de poignée. Sautez à l'intérieur ici. C'est ici que nous vérifions si la forme correcte a été abandonnée à l'intérieur de l'instruction if. Si c'est vrai, juste au-dessus de notre déclaration de retour accédera à notre variable de score et l'augmentera de la valeur d'un. Nous devons ensuite mettre à jour notre section étendue, afin d'apparaître dans le navigateur. Nous pouvons le faire en saisissant Document.QuerySelector comme identifiant de partition. Mais je veux que le texte intérieur soit égal à notre variable de score. Nous pouvons copier ces deux lignes, bien fonctionner et ensuite nous pourrions faire le contraire juste en dessous. Si nous supprimons le journal de la console incorrecte et que l'on place en dehors de l'instruction if, la seule différence est que nous allons déduire un de la partition. Essayons ceci, actualiserons le navigateur, et si vous essayez l'une des bonnes formes, cela augmente le score. Essayons un deuxième numéro 2. Tout cela est bon et si nous essayons une forme incorrecte, baisse dans le score est déduite de la valeur d'un à chaque fois. De plus, si nous actualisons le navigateur dès que nous commençons le jeu, nous voulons également nous assurer que le score actuel est égal à zéro. Puisque nous avons déjà notre score à initialiser en tant que valeur zéro. Nous pouvons également copier cette mise à jour et nous pouvons la définir juste au-dessus de notre fonction, alors actualisez. Cela commence par la valeur zéro. Essayez de faire glisser une forme et celle-ci est toujours correctement mise à jour. La prochaine chose est ce bouton de lecture en haut. Nous voulons nous assurer que cela soit visible uniquement une fois la partie terminée. Actuellement, si nous actualisons la page, nous ne voulons pas voir le bouton Jouer à nouveau car nous pouvons déjà démarrer le jeu en faisant glisser l'une de ces formes. Nous allons faire en dehors de nos fonctions en haut de la page si nous allons commencer par saisir notre bouton. Document.QuerySelector passe dans un bouton. C'est l'élément que nous avons utilisé pour la section ici , puis nous le stockerons à l'intérieur d'une constante. Appelons ça StartGameBTN. Au départ, nous devons accéder à notre bouton Démarrer le jeu et définir le type d'affichage sur aucun. La propriété style de l'affichage n'est pas égale à aucune. Cela va masquer tout le bouton au début de la partie. Ensuite, nous allons créer deux nouvelles fonctions. Une fonction va gérer ce qu'il faut faire avec le début de la partie, puis une fonction permettant de gérer la fin de la partie. Fonctionne et jeu lorsque vous les configurez pour l'instant. Ensuite, une deuxième fonction juste en dessous, qui est pour commencer le jeu. Commencez par la fonction de fin de jeu et ouvrez les accolades bouclées et à la fin du jeu, nous voulons réintroduire bouton pour que l'utilisateur puisse redémarrer le jeu. Tout ce que nous devons faire est de copier cette ligne ici où nous définissons le type d'affichage et nous le remplacerons changeant cette ligne pour qu'elle soit en ligne. Ensuite, à l'intérieur de la fonction de démarrage du jeu, nous devons tout remettre à son état d'origine. Cela inclut la partition. Cela inclut le retrait du bouton Lecture à nouveau et le déplacement de ces formes en position. Nous pourrions faire tout cela manuellement si vous le vouliez, ou ce sera beaucoup plus simple si nous actualisons la page pour lui donner le même effet. Pour ce faire, nous devons accéder à l'objet Window, puis sélectionner l'emplacement actuel, puis une méthode appelée reload. Maintenant, nous avons nos deux fonctions, et en fait, nous devons les appeler au bon moment. Le début du jeu est assez simple, nous l'appelons simplement lorsque vous cliquez sur le bouton Jouer à nouveau. J'ai fait référence à cela à l'intérieur du bouton Démarrer le jeu pour y accéder, puis nous écouterons un clic en assistant à un auditeur d'événement comme en un clic. Ensuite, nous allons exécuter notre fonction, qui est le début du jeu. La fin de la partie est un peu plus délicate. Si nous passons à index.html et dans la section glisser-glisser. Chaque fois, nous réussissons à faire glisser l' un d'entre eux dans la même forme, comme celle-ci juste ici. La div dans la partie inférieure disparaîtra ensuite. Un par un, nous déplaçons chacune de ces formes. Le jeu est essentiellement terminé lorsque le wrapper, qui est la section glisser-glisser, n'a plus d'éléments enfants. Le glissement commencera par accéder à notre section glisser-glisser du script. Nous allons le faire à l'intérieur d'une goutte de poignée. Il y a des choses en dehors. Nous commencerons à l'intérieur d'un journal de console où nous sélectionnerons notre wrapper donc Document.QuerySelector. Il y a la classe de glisser-section, puis nos éléments ont accès à une propriété en fonction du nombre d'éléments enfants qu'elle contient, appelée ChildElementCount. À la fin. ChildelementCount. Je vais juste le rendre un peu plus grand pour qu'il soit plus visible. Sauvegardons cela et testons cela à l'intérieur du navigateur. Ouvrez les outils de développement, accédez à la console. Essayons cela, notre journal de console est exécuté au début de la fonction drop. Dès que nous mettons en place l'une de ces formes, si vous exécutez la fonction et donnez la valeur de 10. Notre deuxième devrait être neuf et la valeur est toujours supérieure celle que nous voyons à l'écran. Actuellement, nous avons la valeur de neuf, nous voyons huit éléments à l'écran. La raison en est que nous faisons un journal de console du haut de la fonction avant de supprimer réellement cet élément. En fait, le jeu est terminé lorsque la valeur actuelle est égale à 1. Au lieu du journal de la console, nous pouvons supprimer cela et le transformer en une instruction if à la toute fin ouvrir les accolades et nous vérifierons si cette valeur est égale à 1. Si c'est le cas, nous appellerons notre fonction de fin de jeu. Essayons cela, ce que nous voulons maintenant faire, c'est nous assurer que nous arriverons à la fin du jeu. Une fois la dernière forme mise en place, nous devrions maintenant exécuter la fonction de fin de jeu, qui la liera à l'accès au bouton Jouer à nouveau. Alors rafraîchissez-vous, et je vais passer en revue chacun de ces éléments un par un, m' assurant que tous ces éléments sont corrects. C'est un, et si nous avons déposé le dernier en place, nous voyons maintenant que le bouton Jouer à nouveau est apparu en haut. Nous pourrions également enlever cette bordure en bas, mais c'est bon pour l'instant. On peut juste supposer que ça marche, la pièce encore une fois. La fonction Play Again va maintenant recharger notre page et rétablir l'état d'origine. Si vous voulez faire si la bordure en bas, nous pouvons le faire aussi dans la fonction de fin de jeu, nous pouvons saisir la section glisser-glisser avec Document.QuerySelector. Puisqu'il s'agit d'une classe, nous utilisons point et saisissons la section glisser-glisser. Mais le style, la bordure doit être égale à la valeur de aucun. Essayons encore une fois, accédons au début du jeu. Terminez ce jeu en faisant glisser toutes les formes vers le haut. Plus un, on y va. Notre jeu maintenant terminé sur le plateau a été supprimé du bas de la page.