Composants Web : Comment créer des éléments HTML personnalisés avec Javascript

1. Introduction: Bonjour et bienvenue dans cette classe sur les composants Web, votre guide pour créer des éléments HTML personnalisés avec JavaScript. Je suis Christopher Dodd. Je suis un développeur web indépendant et professeur de premier plan ici sur SkillShare.com, couvrant tout ce qui concerne le développement Web et la freelance en ligne. Dans la classe d'aujourd'hui, nous allons découvrir l'ensemble de quatre spécifications qui composent les composants Web, la métaspécification et la façon dont nous pouvons les utiliser pour créer de nouvelles balises HTML personnalisées et réutilisables pour utilisation dans les pages Web et les applications Web. Pour ceux d'entre vous qui ont de l'expérience en codage avec JavaScript, apprendre à créer des éléments personnalisés pour vos applications Web et sites Web peut être un outil utile pour encapsuler des fonctionnalités, et nous l'utilisons n' importe où dans un projet particulier ou dans plusieurs projets. Si vous êtes prêt à apprendre comment créer vos propres éléments HTML personnalisés avec JavaScript, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Composants Web - Un exemple de vie réelle: Les composants Web ont été quelque chose qui est apparu sur mon radar compte tenu de mon travail avec les sites de commerce électronique alimentés par Shopify. C'était en juin 2021 lorsque Shopify a révélé que son thème par défaut avait été mis à jour pour encapsuler la majorité de la logique JavaScript dans une vingtaine de composants Web différents, tels que les modaux, la quantité, les entrées, et bien plus encore. Ils ont même créé leur propre composant de curseur ne nécessitant aucune bibliothèque JavaScript externe. Bien que je n'ai pas pu trouver de déclaration de Shopify sur les raisons pour lesquelles ils ont choisi de créer leur nouveau thème de boutique en ligne 2.0 comme celui-ci, j'ai confiance que si les composants Web étaient comme Shopify, une entreprise technologique de plusieurs milliards de dollars voulait structurer la logique de ses thèmes développés en interne, puis il s'agissait d'une spécification sur laquelle il fallait prendre note et en savoir plus. Un site de commerce électronique, tel que ceux généralement hébergés sur Shopify , possède certaines fonctionnalités communes pouvant être encapsulées via des composants Web. Pour utiliser le thème Dawn de Shopify à titre d'exemple, principaux points d' interactivité tels que la table des articles de la page du panier, les options de filtrage des produits au sein d'une collection et le formulaire produit, sont tous des domaines où les fonctionnalités peuvent être regroupées dans des composants Web distincts. À la fin de ce cours, nous allons prendre exemple de Shopify pour créer notre propre fonctionnalité de panier composée de trois composants distincts, qui interagiront tous avec l'un l'autre. Mais avant d' y arriver, nous devons approfondir la compréhension de la théorie derrière les composants Web. En commençant par une vue d'ensemble des spécifications des quatre composants Web. 3. Les 4 spécifications des composants Web: Pour cette leçon particulière, je vais vous référer au site Web dédié à aider les développeurs à partager, découvrir et réutiliser les composants Web, web components.org. Donc, si vous êtes perdu à moment donné au sujet de la théorie suivante, vous pouvez simplement consulter web components.org/specs pour suivre la suite. Comme il est écrit ici sur web components.org, composants Web sont une méta-spécification rendue possible par quatre autres spécifications. La spécification des éléments personnalisés, la spécification DOM ombre, la spécification du modèle HTML et la spécification du module ES. Dans cette leçon, nous aborderons brièvement toutes ces spécifications d'un point de vue théorique et dans les prochaines vidéos, nous examinerons chaque spécification en pratique. Commençons par des éléments personnalisés. La spécification des éléments personnalisés est la spécification fondamentale qui rend possible les composants Web. En utilisant cette méthode de définition sur l'objet éléments personnalisés, nous pouvons définir un nouvel élément personnalisé. Le premier argument est le nom de l'élément personnalisé, c'est ce que nous utilisons pour l' appeler dans le code HTML. Le deuxième paramètre est le constructeur, c'est là que se déroulera toute la logique. Nous pouvons créer cette classe construite en étendant la classe d'éléments HTML ou une classe d'éléments HTML native existante comme dans l'exemple ici, mais nous y reviendrons un peu plus tard. La plupart du temps, vous allez étendre la classe d'éléments HTML standard pour créer vos composants. C'est ce qu'on appelle un élément personnalisé anonyme. Ici, nous avons accès au composant tel qu'il existe sur le DOM via le puissant mot clé. Chaque fois que nous utilisons l' élément personnalisé dans notre code HTML, une instance est créée et nous pouvons ensuite écrire du code dans cette déclaration de classe concernant spécifiquement l' instance particulière du composant. La spécification suivante est le DOM de l'ombre, qui vous permet de créer un DOM distinct du DOM normal. Le DOM ordinaire est donc parfois appelé DOM léger pour le distinguer lorsqu'on parle de l'alternative, le DOM de l'ombre. L'API DOM ombre vous permet d'attacher une sous-arborescence DOM à des éléments de votre document Web. Le DOM de l'ombre attaché est encapsulé, ce qui signifie que les informations de style qu'il contient ne peuvent pas s'appliquer aux éléments extérieurs et vice versa. Nous pouvons attacher le DOM de l'ombre à n'importe quel élément via la méthode de l'ombre attachée. Mais dans le contexte de la création de composants Web, le DOM de l'ombre est généralement créé directement sur le composant Web lui-même à l'aide de This.AttachShadow. À l'aide de cet objet racine d'ombre, nous pouvons construire un sous-arbre d'éléments, qui sont tous pratiquement invisibles pour le DOM principal de la lumière. Parlons ensuite de la spécification du modèle HTML. C'est simplement un moyen pour nous de créer une structure HTML qui ne sera pas en place comme le HTML normal. Nous créons un modèle via la balise de modèle, plaçons notre code HTML à l'intérieur et lorsque la page se charge, le HTML n'est pas rendu, mais il est toujours accessible via JavaScript. Comme leur nom l'indique, nous pouvons utiliser ces balises pour créer un code de modèle qui peut être cloné et utilisé à plusieurs endroits. Dans le contexte de la création d'un composant Web, la balise de modèle peut être utilisée pour définir le code HTML du composant en clonant le code HTML depuis les balises et en le plaçant directement dans le code HTML interne de le composant ou dans son DOM d'ombre. Enfin, la spécification du module ES définit l'inclusion et l'utilisation de documents JS dans d'autres documents JS. Bien qu'il ne soit pas essentiel pour la création de composants Web, stockage de vos composants Web sous forme code modulaire existant dans son propre fichier JS peut s'avérer pratique pour la structuration du projet, en particulier lorsque vous faites appel à des tiers composants Web. La syntaxe de la spécification consiste à importer votre script externe comme d'habitude, sauf cette fois que vous définissez le module comme paramètre type. Ensuite, vous écrivez l'entrée suivie du chemin d'accès au fichier. Les capacités de la spécification des éléments personnalisés, de la spécification DOM ombre, la spécification du modèle HTML et la spécification du module ES fonctionnent bien ensemble pour nous aider à écrire en toute simplicité, éléments HTML personnalisés encapsulés et réutilisables. Théoriquement, seule la spécification des éléments personnalisés est requise pour créer des éléments personnalisés, mais comme vous le verrez dans les vidéos ultérieures, combinaison des fonctionnalités de chaque spécification est souvent le meilleur moyen de tirer le meilleur parti des composants Web. 4. Éléments personnalisés Partie 1: Maintenant que nous avons abordé les quatre spécifications des composants Web dans la dernière vidéo, examinons chacune d'elles en profondeur et en action dans notre éditeur de code. Ce que je vais faire, c'est commencer un tout nouveau projet. J'ai ici un dossier pour mon code. Je vais créer un nouveau dossier de projet et je vais l'appeler composants Web. Vous pouvez l'appeler comme vous voulez. Ensuite, je vais le faire glisser dans mon éditeur de code, qui est Visual Studio Code, et cela ouvrira automatiquement ce dossier pour nous. Je vais ensuite fermer cela, cliquer sur un nouveau fichier ici et créer un fichier HTML. Nous allons l' appeler index.html. Maintenant, en utilisant Emmet dans Visual Studio Code, je peux générer du code HTML de la chaudière en tapant un point d'exclamation, puis en appuyant sur « Entrée ». Je vais changer le titre ici uniquement en composants Web. Ensuite, je vais créer le fichier JavaScript, je vais l'appeler component.js car nous allons commencer par travailler avec un seul composant. Je vais faire le classique Hello World pour notre console. Revenez ici et puis dernière modification que je dois faire pour commencer est de lier ce fichier JavaScript. On y va. Maintenant, ce que je vais faire, c'est retourner notre dossier et ouvrons cela dans Google Chrome. C'est Google Chrome pour moi, mais vous pouvez utiliser n'importe quel navigateur que vous voulez. Je vais utiliser l'option de commande pour ouvrir mes outils de développement ici, et si je vais à la console, je vais juste agrandir cela pour vous, vous pouvez voir bonjour tout le monde, ce qui nous montre que nous relions correctement ce fichier JavaScript que nous avons créé ici. Génial. Maintenant que c'est fait, créons notre premier composant Web. Encore une fois, il y a de la chaudière à ça. Tout ce que nous avons à faire, et cela va être le même pour chaque composant Web, à l' exception des composants personnalisés intégrés que nous examinerons plus tard, je vais juste appeler ce composant Web et comme vous pouvez le voir ici, la première lettre de chacun des mots de ce nom de classe est en majuscule. C'est la convention que nous utilisons. Ensuite, nous saisissons des extensions, puis des éléments HTML. Ici, nous avons besoin d'un constructeur. Ensuite, nous appelons la super fonction, que nous appellerons chaque fois que nous créons un composant Web, et ce que cela fait, c'est qu'elle hérite des fonctions constructives de la classe qu'elle est extension. Nous en avons besoin pour profiter de ce que nous étendons ici. Ensuite, nous allons passer ici et terminer cela en exécutant la méthode de définition sur des éléments personnalisés. Le premier paramètre sera à quoi ressemblera le nom de l'élément dans notre document HTML, puis le deuxième argument est le nom de classe que nous venons de créer ici. Là, nous l'avons, notre premier composant Web. Maintenant, afin de mettre cela sur notre front end et de l' exécuter dans notre HTML, nous avons maintenant cette balise personnalisée à notre disposition, composant Web. Cela équivaut bien sûr à ce que nous avons dit ici dans cette méthode définie. Je vais peut-être les diriger côte à côte. On y va. Enfin, afin que nous puissions vérifier que ce composant Web est en cours de construction et d'exécution sur la page, je vais mettre un journal de console ici et taper à nouveau Hello World. Revenons à notre document HTML, actualiserons la page et vous pouvez voir la journalisation de la console Hello world is. Si nous regardons notre page ici, vous pouvez voir que c'est parce que nous avons appelé cet élément personnalisé. Jusqu' à présent, cela ne semble pas être une utilisation pratique de l'utiliser , mais au fur et à mesure que nous suivons ce cours, vous commencerez à voir comment les composants Web encapsulent certaines fonctionnalités à des éléments spécifiques ici. . L'une des façons dont nous pouvons le voir est d' utiliser le mot clé, ce mot clé. Si je tape simplement ceci dans un journal HTML et console, alors nous sommes en mesure de référencer tout ce que nous mettons entre ces balises. Je vais y mettre le monde du bonjour. Revenons ici, rafraîchissons. Vous pouvez voir que nous avons du contenu entre ces balises de composants Web et cela se fait également écho ici dans notre console. Cela va simplement vous montrer que nous pouvons prendre le composant Web lui-même comme référence en utilisant cela, puis faire des choses dans ce composant, que nous allons commencer à voir très prochainement. C'est notre composant Web de base. Ensuite, permettez-moi de vous montrer comment créer du HTML interne au sein de notre composant Web. Je vais le faire à l'intérieur la méthode constructeur car cela s'exécute chaque fois que le composant est construit. Je vais écrire quelques commentaires ici. La première méthode consiste simplement à définir le code HTML interne. Je vais écrire ça. Nous pouvons utiliser ce code HTML interne comme nous l'avons fait auparavant et au lieu de le publier, nous pouvons le remplacer. J'utiliserai les coches arrière ici pour ne pas avoir problème avec les guillemets, qu'il s'agisse de guillemets doubles ou de guillemets simples. Ce que je vais faire, c'est créer une div et à l'intérieur de la div créer une plage, puis dans la période que je vais dire, il s'agit d'un composant Web. Encore une fois, si je me rafraîchis ici et que je vais inspecter cet élément, vous pouvez voir que nous avons inséré ce code HTML dans le composant Web. La deuxième façon de le faire consiste à créer des éléments et à les ajouter au DOM. Je vais vous montrer comment nous le faisons maintenant. Commentons cela et je vais vous montrer la deuxième option ici. Nous allons simplement déplacer cela pour que nous puissions en voir davantage. Augmentez peut-être la taille de l'écran. On y va. Ensuite, ce que je vais faire, c'est utiliser le document crée un élément et nous pouvons littéralement insérer le nom de l'élément ici pour créer un élément. Mais nous devons le ranger quelque part, donc je vais mettre un const div devant. Cela stockera l'élément div nouvellement créé dans cette constante div. Ensuite, je vais créer la durée que nous avions auparavant. Je crée exactement la même chose qu'ici. Le document crée une plage d'éléments. Maintenant, nous avons notre div et notre portée. Avant de joindre la div à notre document, je vais mettre à jour le code HTML interne de la plage par rapport à ce que nous avions auparavant, s'agit d'un composant Web. Ensuite, ce que je peux faire, c'est utiliser ces méthodes d'ajout enfant pour construire le DOM. Je peux imbriquer la travée à l'intérieur de la div, puis je peux imbriquer la div dans le composant Web lui-même, comme ceci. Maintenant, si je retourne ici, nous avons un problème. Le problème est que nous mettons du contenu ici. Je vais juste supprimer ça, sauver ça. Si nous revenons, vous y allez, nous aurons le div avec la portée à l'intérieur. C'est une autre façon de le faire. La dernière façon de le faire consiste à analyser une chaîne HTML. Je vais commenter cela , puis j' écrirai le troisième commentaire, analysera une chaîne HTML. Disons, par exemple, dans une situation particulière, j'avais une chaîne HTML et que je voulais mettre la chaîne HTML en HTML dans ce composant Web. Encore une fois, nous allons le faire. Même chose encore, div avec une span à l'intérieur, il s'agit d'un composant Web, fermez la span, fermez la div. Alors ce que je dois faire parce que c'est une chaîne, je dois l'analyser. La façon dont je peux l'analyser est en utilisant l'analyseur DOM. Regardons ça maintenant. Je peux définir const Inner HTML sur un nouvel analyseur DOM, puis exécuter la méthode parse from string, qui prendra la chaîne HTML comme premier argument. Ensuite, le format texte/HTML. Ce que ça va faire, c' est que ça va me donner ce DOM analysé. Ce que je dois faire, c'est de trouver le corps, puis d'en extraire le HTML interne. Je suis en train de créer un nouveau DOM avec cette chaîne HTML , puis je saisis le HTML interne du corps de ce nouveau DOM. Ensuite, ce que je peux simplement faire, c'est dire que ce HTML interne est égal au HTML interne. Il s'agit du composant Web, je définit le HTML du composant Web sur le HTML interne de cette chaîne HTML analysée. Tout semble bien. Rafraîchissez-vous ici et nous obtenons exactement le même résultat. Maintenant, il ne vous sera pas immédiatement clair pourquoi vous devez utiliser trois méthodes différentes ou quelle méthode utiliser. Utilisez la méthode qui vous convient, si c'est la plus simple et que vous pouvez vous en sortir, utilisez certainement celle-ci . Mais il y a certaines situations dans lesquelles vous obtenez peut-être du HTML renvoyé par une API, ce qui est le cas dans les thèmes Shopify, alors vous devez utiliser cette méthode d'analyseur DOM, ou peut-être qu'elle obtient un Un peu compliqué avec la création nouveaux éléments qui s'intègrent dans une structure HTML plus complexe , auquel cas vous voudrez peut-être utiliser cette méthode. Dans cet exemple simple, il semblerait que c'est la façon la plus simple de le faire, ce qui est le cas. Mais à mesure que les exemples deviennent de plus en plus complexes, vous devrez peut-être utiliser une combinaison de ceci ou de ceci. Ce que je voulais faire dans cette petite section c'était de vous montrer comment vous pouvez le faire. La prochaine chose que je veux vous montrer, ce sont des attributs personnalisés. Je vais me débarrasser de tout ça. Ne vous inquiétez pas, tout cela se trouve dans le lien GitHub, vous pouvez donc consulter ce code quand vous le souhaitez. Ce que je veux vous montrer maintenant, c'est que nous pouvons réellement créer nos propres attributs personnalisés. Ici, dans cette balise de composant Web, je pouvais taper quelque chose comme du texte ou n'importe quel paramètre que je voulais passer. Disons simplement qu'il s' agit d'un composant Web. J'ai un paramètre par le nom du texte et je l'analyse en tant que valeur. Comment pouvons-nous utiliser cela ? Eh bien, je vais fermer ça. Ce que je vais faire, c'est accéder cet attribut via this .getAttribute. Ensuite, l'argument pour cela est le nom de l'attribut lui-même, qui est du texte. Console consignons cela pour commencer. Ensuite, nous en trouverons une utilisation plus pratique. Rafraîchissant ici, si je vais dans la console, vous pouvez voir qu'il s'agit d'un composant Web, qui correspond au paramètre que j'ai défini ici. Ce n'est pas très utile jusqu'ici. Ce que je vais faire, c'est le numéro 1, je vais le définir en variable. Je vais créer une variable dans ce composant, donc l'attacher à cela. Je vais appeler ça le contenu du texte interne. Mais avant de le faire, je veux vérifier si cet élément possède réellement cet attribut. Je vais utiliser la méthode d'attribut has analysant le texte comme nom d'attribut. Ensuite, je vais mettre ça dans le bloc si là. Encore une fois, cela devrait fonctionner. n'y a pas d'erreur ici, il n'y a pas de journal de console, mais c'est parce que la console n'a encore rien enregistré ou modifié quoi que ce soit. Ce que je pourrais faire ici est comme avant, utilisez la méthode que nous avions avant cette méthode simple consistant à définir simplement le HTML interne. Ce que je vais faire, c'est d'utiliser nouveau cette même structure avec la div et la plage imbriquée. Mais dans la plage imbriquée, je vais mettre une valeur dynamique basée sur cet attribut. Parce que nous avons défini cette variable ici, ce que je vais faire est de mettre cela ici ce .InnerTextContent. Puis rafraîchissez-vous ici. Vous pouvez voir que nous avons obtenu le même résultat que ce que nous avions auparavant. Revenons dans notre code HTML. Si je devais changer cela par, c'est un composant. C'est ce qui est envoyé à la travée. Maintenant, le seul problème est revenir ici et disons que nous avons un composant Web assez dynamique ici un composant Web assez dynamique où cette valeur va changer. Si je change cela par, il s' agit d'un composant Web, encore une fois, tout simplement pas d'un composant. Vous verrez que rien ne se met à jour. C'est parce que nous devons réellement surveiller les changements apportés aux attributs, pour que cela change réellement. De retour au fichier component.js, nous allons en parler plus sur méthodes du cycle de vie dans la section suivante. Mais pour l'instant, je vais vous montrer la méthode du cycle de vie que nous pouvons utiliser pour vérifier le changement d'attribut. Ici, notre attribut droit a changé de rappel, et il faut trois arguments. Le premier est le nom de l'attribut lui-même. Je vais dire le nom de l'attr. Le deuxième attribut est l'ancienne valeur, et le troisième est la nouvelle valeur, la valeur à laquelle il va être modifié. Ensuite, je vais le mettre dans un chèque ici. Si le nom de l'atrr est du texte , mettons à jour le code HTML interne. Gardez cette structure. Au lieu de ce contenu texte interne, nous allons définir cette sur la nouvelle valeur qui apparaît dans le rappel. Cela peut sembler la dernière étape, mais il y a une autre étape que nous devons faire, à savoir demander au composant Web de surveiller cet attribut particulier. s'agit simplement d'un moyen pour les composants Web d'être plus maigres et de s'assurer qu'ils ne vérifient pas les attributs qui n'ont pas d'importance pour le programmeur. Ce que nous devons faire pour cela, c' est simplement taper statique, obtenir des attributs observés. Ensuite, nous allons simplement renvoyer un tableau avec tous les attributs que nous voulons regarder, qui n'est que du texte. Allons à notre navigateur ici, rafraîchissez-vous. Nous avons une erreur de syntaxe. C'est parce que je dois mettre ça en dehors du constructeur. C'est la méthode constructeur ici. Je dois mettre ça dehors, me rafraîchir ici. Cela devrait fonctionner. Aucune erreur. Si j'entre ici et que je change, il s'agit d'un composant Web ou quoi que ce soit d'autre, vous pouvez voir que le HTML interne a changé. Nous avons exécuté cette méthode avec succès ici car nous recherchons les attributs observés avec le nom du texte. Nous vérifions si le nom de l'attribut qui passe par ce rappel est du texte et, dans l'affirmative, nous mettons à jour le code HTML interne vers cette nouvelle structure HTML avec la nouvelle valeur. Nous avons déjà abordé beaucoup de choses à voir avec la spécification des éléments personnalisés. Je vais diviser la deuxième moitié de cette vidéo en partie 2. Dans la partie suivante, nous allons examiner les méthodes de cycle de vie et les événements personnalisés. 5. Éléments personnalisés Partie 2: Dans cette vidéo de la partie 2, traitant des caractéristiques de la spécification des éléments personnalisés, nous allons parler des méthodes du cycle de vie et des éléments personnalisés. Dans la dernière vidéo, nous avons vu l' une de ces méthodes de cycle de vie, le rappel de changement d'attribut. Je vais mettre ça en numéro 3, dont nous parlerons dans une seconde. Un peu de disclaimer ici, je vais considérer le constructeur numéro 1 ici même si techniquement ce n'est pas une méthode de cycle de vie, mais cela aide à regarder constructeur dans le contexte de la vie... méthodes de cycle de toute façon. Il y en a une seconde ici, que je vais révéler très prochainement, et une quatrième, que je vais révéler ici. Parlons d'abord du constructeur. Le constructeur, j'en écrirai quelques uns ici et je mettrai ça dans le GitHub pour vous afin que vous puissiez y faire référence plus tard. Laissez-moi réparer cette faute de frappe. Cette opération est exécutée lorsque le composant est créé en mémoire, mais pas nécessairement rattaché au DOM. Selon mes recherches, c'est le meilleur endroit pour l'initialisation, mais pas le meilleur endroit pour interagir avec le DOM. Maintenant, la différence entre le constructeur et le suivant est assez subtile. Mais si jamais vous avez des problèmes avec la mise en place de quelque chose dans cette fonction constructeur et que cela ne fonctionne pas, le prochain est probablement là où vous devez le placer, et celui-ci le prochain est probablement là où vous devez le placer, et celui-ci est le rappel connecté. Je vais taper ça ici, rappel connecté. Cette opération est exécutée lorsque l'élément est réellement attaché au DOM. Il ressemble exactement à ceci, un rappel connecté. Ce troisième rappel, comme nous l'avons vu précédemment, consiste simplement à vérifier si un attribut a changé. C'est assez simple à comprendre. Ce quatrième rappel que nous allons examiner est le rappel déconnecté, qui est tout à l'opposé du rappel connecté. Cette opération s'exécute lorsque l'élément est détaché du DOM. Vous pourriez penser, eh bien, pourquoi avons-nous besoin de cela ? Il est utile pour effectuer un nettoyage, donc des processus que nous ne voulons plus exécuter une fois que nous nous en sommes débarrassés. Il ressemble exactement au rappel connecté sauf s'il s'agit d'un rappel déconnecté. Il y en a un ou deux autres, mais ce sont les principaux. Nous avons vu constructeur, nous avons vu un rappel de changement d'attribut. Les deux que nous n'avons pas encore regardés avant que cette vidéo soit connectée et déconnectée. Ce que je vais faire ici, c'est mettre des journaux de console et ensuite je peux vous montrer à quoi il ressemble lorsque le rappel connecté est exécuté et que le rappel déconnecté est exécuté. Tout ce que je vais faire, c'est dire callback connecté, puis écrire ici, callback déconnecté. Si j'exécute ce code maintenant, si je vais dans ma console, actualise la page, vous pouvez voir que le rappel connecté est exécuté. Si je mets un journal de console ici, et disons constructeur, et que nous courons ici, vous pouvez voir le constructeur et le rappel connecté sont exécutés. C'est ici que se produit la différence subtile entre le constructeur et le rappel connecté. rappel connecté est techniquement lorsque l'élément est attaché au DOM et constructeur est créé en mémoire. Mais les deux se produisent automatiquement une fois que nous avons placé ce composant dans notre document. Comment puis-je vous montrer la différence entre le callback connecté et le constructeur ? Eh bien, l'une des façons dont je peux vous montrer cela est en supprimant par programme ce composant Web du DOM, en l' ayant toujours dans une mémoire, puis en le reconnectant. C'est ce que je vais faire dans cet exemple ici. Juste au-dessus de la balise de script JS du composant, je vais créer une autre balise de script. Ce que je vais faire, c'est saisir le composant Web lui-même. Je vais créer un composant Web variable, puis nous allons utiliser le sélecteur de requête de document pour saisir l'élément de composant Web. Comme nous le ferions pour n'importe quel autre élément, nous pouvons également le faire avec nos propres éléments personnalisés. Ensuite, ce que je vais faire, c'est de fonder cela sur le délai d'attente pour les besoins de cet exemple. Je vais créer cette fonction de délai d'attente. Allons-le au bout d'une seconde. Ensuite, dans la fonction Timeout, ce que je vais faire est de supprimer l'enfant dans le corps du document et de supprimer ce composant Web HTML du corps du document, uniquement pour le rattacher à nouveau. composant Web enfant DocumentBody.Append. Fondamentalement, tout ce qui fait, c'est qu'après chargement d' une seconde de cette page, nous allons supprimer le chargement d' une seconde de cette page, nous allons supprimer ce composant Web du corps sur lequel il se trouve actuellement et le remettre dans le corps. Rafraîchissons ici et attendons une seconde. Vous pouvez voir que la fonction constructeur s'exécute une fois car le composant Web est créé une fois en mémoire. Ensuite, bien sûr, le rappel connecté se produit à peu près simultanément avec le constructeur. Mais ce que nous voyons après une seconde, si je réexécute ceci, après une seconde, qui est le paramètre que nous avons mis ici pour le délai d'attente, vous verrez que le rappel déconnecté est exécuté parce que nous supprimons un composant Web du DOM, puis nous le remettons pour que le rappel connecté s'exécute à nouveau. Vous pouvez voir ici la différence subtile entre la création de la mémoire du constructeur et l'interaction du composant Web avec le DOM. Souvent, cela arrive en même temps. Mais si nous devions prendre le composant Web et le déplacer autour de notre DOM , le rappel connecté et le rappel déconnecté sont utiles. Nous avons démontré deux en un là-bas. Mais si nous revenons ici et que je vais dans la section éléments de mes outils de développement ici, cliquez sur le composant Web. En fait, nous allons éclaircir tout ça. Cliquez sur cet élément maintenant et supprimez-le de notre DOM. Si je passe à l'onglet de la console, vous pouvez voir que le rappel déconnecté est à nouveau exécuté. Il s'agit essentiellement rappel connecté et d'un rappel déconnecté. Il est simplement exécuté lorsque l' élément est attaché au DOM et lorsque l'élément est détaché du DOM. Nous verrons comment utiliser callback connecté dans un exemple une fois que nous aurons accès aux composants Web en pratique plus tard dans cette classe, mais pour l'instant, jusqu'à ce que vous rencontriez un problème dans lequel vous doivent utiliser le callback connecté, vous pouvez probablement utiliser le constructeur pour toutes vos initialisations et tout ce que vous voulez exécuter lorsque ce composant Web est créé. Une fois que vous commencez à rencontrer des problèmes avec l' exécution du code dans votre constructeur, c'est à ce moment que vous devez commencer à examiner la fonction de rappel connectée. Ce sont des méthodes de cycle de vie. Enfin, dans cette spécification d'éléments personnalisés, je veux parler d'événements personnalisés. Ce que je vais faire, c'est effacer une partie de ce code. Je vais me débarrasser de ce délai d'attente. Je vais toujours garder mon composant Web dans cette constante ici. Frappez, « Sauvez » là-dessus, allez ici. Ce que je vais faire, c'est mettre à jour ce code HTML ici. Je vais devoir le faire deux fois parce que nous l'avons aussi ici. Je vais juste créer un bouton. Dans ce bouton, je vais juste mettre l'événement spécial déclencheur de contenu. Je vais copier ce code ici. Lorsque l'attribut change, ce qui se produit dès la première fois que l' attribut est défini de toute façon. Si nous ne le faisons pas, si je laisse cela éteint et que je lance la page, vous verrez que le bouton ne s'affiche pas toute façon car le changement d'attribut, rappel est exécuté dès qu'il reconnaît cet attribut. Ce n'est pas le code le plus propre, mais nous allons le copier et le coller ici. Maintenant, si je regarde mon composant ici et que je clique sur ce bouton, nous allons faire quelque chose très prochainement. Débarrassez-vous de ces journaux de console. Nous n'avons plus besoin d'eux. Nous pouvons garder ce rappel connecté là. Je vais me débarrasser de ces commentaires ici, ceux que je laisserai dans la branche pertinente du GitHub pour que vous puissiez y faire référence plus tard. Je vais juste me débarrasser de ces commentaires pour l'instant. Ensuite, ce que je vais faire, c'est créer notre propre événement personnalisé. Je vais créer une méthode qui va être exécutée sur notre EventListener, alors déclencher un événement spécial. Afin de créer notre propre événement personnalisé, nous pouvons simplement attribuer un nouvel événement. Dans le paramètre ici, nous pouvons appeler l'événement où nous le voulons. Je vais juste appeler ça Special. Maintenant que le nouvel événement, cet événement spécial est stocké dans cette constante d'événement spécial. Lorsque cette méthode est exécutée, ce que nous pouvons faire, c'est que nous pouvons expédier cet événement en exécutant un événement de répartition. Ensuite, ici, organiser un événement spécial. Ensuite, ce que nous allons faire ici, c'est aller notre rappel connecté et ajouter un écouteur d'événement à l'événement de clic sur le bouton pour exécuter cet événement spécial. Je vais trouver le bouton dans ce composant Web, ce que nous pouvons faire via ce sélecteur de requêtes. Ajoutez EventListener, recherchez l'événement Click. Ensuite, nous pourrons lancer cet événement spécial déclencheur. Ensuite, nous allons lier cela, ce qui nous permettra de faire référence à ce composant Web. Si la méthode de liaison vous confond un peu, ne vous inquiétez pas. Cela m'a aussi confondu pendant un certain temps. Tout ce qu'il fait, c'est de s'assurer que ce mot-clé à l'intérieur de la fonction est lié à celui-ci, au composant Web, pas à la fonction ou à quoi que ce soit d'autre. C'est juste une étape supplémentaire. Si nous ne l'utilisons pas, nous finirons par ne pas être ce que nous voulions être. Maintenant, ce qui va se passer c'est que lorsque nous cliquons sur le bouton, nous allons déclencher cet événement spécial qui distribue notre propre événement personnalisé, appelé événement spécial. Mais si je clique sur le bouton, rien ne se passe vraiment. Techniquement, cet événement spécial est déclenché, mais nous n'écoutons pas vraiment cet événement spécial. Rien n'est vraiment mis à jour sur la page. Allons changer cela. Allons dans notre fichier HTML ici. En dessous, dans notre balise de script, je vais ajouter cet EventListener sur notre composant Web. Nous avons déjà stocké notre composant Web ici dans cette constante, donc je peux faire un composant Web, ajouter EventListener. Nous pouvons littéralement écouter l'événement spécial que nous avons créé, afin que nous puissions mettre en scène un événement spécial. Ensuite, mettons simplement cette fonction anonyme qui va simplement consoler le journal. L'événement spécial a été déclenché. Nous avons trois étapes ici. Nous avons créé une méthode d'événement spécial qui distribue un événement personnalisé que nous avons appelé spécial. Nous l'avons joint au clic EventListener sur le bouton. Ensuite, nous allons écouter cet événement spécial sur le composant Web lui-même et le journal de la console, l'événement spécial a été déclenché si cet événement a été distribué. Si nous revenons à notre document ici et que je clique sur « Déclencher un événement spécial », vous pouvez voir qu'il s'exécutera, l'événement spécial a été déclenché. Si je clique dessus, vous pouvez voir le numéro monter ici. De toute évidence, cet exemple simple ne communique pas réellement la nécessité d'un événement personnalisé. Mais lorsque vous commencez à avoir des éléments plus complexes vous voudrez peut-être avoir un bouton qui déclenche l'événement spécial. Vous voulez avoir autre chose qui déclenche l'événement spécial. Il est tout simplement logique d'avoir un événement spécial sur votre composant Web, alors cela s'avère utile. Un exemple que vous pouvez trouver dans le monde réel est Modals. Vous pouvez avoir un événement fermé sur un composant Web modal. Cet événement fermé peut être déclenché un bouton, en dehors du modal ou en cliquant sur Annuler. Vous avez trois événements distincts que vous souhaitez déclencher le même événement sur le composant Web lui-même. Vous pouvez ensuite vérifier en dehors de votre composant Web si l'événement fermé sur ce composant Web modal a été exécuté. C'est un exemple que j'ai vu dans le monde réel pour utiliser des éléments personnalisés. Mais encore une fois, j'ai rendu la tâche vraiment simple dans cette vidéo, aussi simple que possible pour vous de le voir en action. Encore une fois, si vous n'avez pas besoin d'utiliser cette fonctionnalité, vous n'avez pas besoin de l'utiliser. Mais si vous voyez cela dans le monde réel et que vous essayez de comprendre ce qui se passe lorsque vous voyez quelque chose comme ça, c'est l'explication. Nous pouvons créer des événements personnalisés que nous pouvons expédier sur notre composant Web. Cela nous permet de rechercher les événements qui se produisent sur le composant Web lui-même. Cela fait partie de cet état d' esprit qui consiste à encapsuler des fonctions et des événements au sein d'un seul composant. C'est tout ce dont je voulais parler sur le sujet de la spécification des éléments personnalisés. Dans la vidéo suivante, nous allons parler du DOM Shadow. 6. L'ombre DOM: Bon retour, les gars. Dans cette vidéo, nous allons reprendre là où nous nous sommes arrêtés avec la dernière vidéo en ce qui concerne notre petit projet ici. Mais nous allons passer à spécification appelée Shadow DOM, qui, comme nous l' avons appris dans la section théorie, une spécification appelée Shadow DOM, qui, comme nous l'avons appris dans la section théorie, permet d' attacher une sous-arborescence DOM à un composant Web distinct. depuis le DOM principal. Nous avons donc notre DOM principal ici représenté par notre code HTML. Nous pouvons créer ce qu' on appelle un DOM Shadow sur notre composant Web ou sur n'importe quel élément d'ailleurs. Et ce DOM est séparé de ce que l'on appelle parfois le Dom de Lumière, qui est l'ombre et la lumière sont opposés. Par conséquent, appeler le DOM régulier le Dom Light est un moyen de le différencier du Dom Shadow. Vous m'entendrez peut-être parler du DOM normal sous le nom de Light Dom dans cette vidéo. Donc, juste une note. Donc, ce que je vais faire, c'est supprimer une partie de ce code pour les événements personnalisés. C'est un code un peu idiot de toute façon, c'était juste pour démontrer un point. Je vais donc me débarrasser de ce rappel connecté et de cet événement spécial. Nous n'en avons pas vraiment besoin, je laisserai le rappel déconnecté là-dedans. Et je vais aller ici et supprimer tout ce JavaScript supplémentaire du document HTML. Allons donc directement et attachons un Shadow Dom à notre composant Web personnalisé. façon dont nous procédons est très simple. Ce que nous faisons, c'est exécuter la méthode, attacher l'ombre. Et nous le faisons sur ce mot clé qui fait référence au composant Web, bien sûr. Et tout ce que nous devons faire, c'est de transmettre un objet JavaScript. Et nous allons passer en mode « ouvert ». Nous pouvons également passer en mode « fermé », mais c'est plutôt hors de propos. Vous pouvez trouver pourquoi nous serions ouverts ou fermés en effectuant des recherches, mais ce n'est pas particulièrement important pour le moment. Donc ce que je vais faire, c'est au lieu d' insérer notre HTML directement sur l'élément, ce que je vais faire est de mettre ici Shadow Root. Maintenant, il s'agit d'un mot-clé spécial qui nous permet d'attacher ce code HTML interne à la racine de l'ombre, qui est le début de la sous-arborescence DOM dans notre DOM Shadow. Permettez-moi de sauver ce qui est déjà le cas. Passez à notre code HTML. J'ai également un diagramme ici. Au fait, ils se sont ouverts entre les cours. Je vais vous le montrer dans une seconde. Et puis rafraîchissons ici. Passons ensuite aux éléments, et cliquons sur cet élément. Maintenant, vous pouvez voir que nous avons la même chose que nous avions auparavant, mais nous avons aussi une racine d'ombre. Nous pouvons donc cliquer ici et jeter un coup d'œil, et vous pouvez voir que nous avons ce code HTML interne. Maintenant, la raison pour laquelle nous avons cette autre div là aussi, je crois, c'est parce que nous n'avons pas changé cela en Shadow Root. Je vais donc changer cela, me rafraîchir ici. Et maintenant, vous pouvez voir si nous entrons dans notre composant Web, nous n'avons pas cette div et cette span à l'intérieur, mais ce que nous avons c'est un Shadow Dom. Et à l'intérieur de ce Shadow Dom, nous avons une div et la portée, et bien sûr le bouton qui ne fait plus rien à l'intérieur de ce Shadow Dom. Vous pensez peut-être quelle est la différence entre l'attachement au Shadow Dom et l'attachement direct de ce code HTML au composant Web. Et je suis content que vous vous demandiez cela parce que c'est exactement ce dont je vais parler maintenant dans le tableau suivant. Donc, en gros, l'essentiel avec Shadow Dom est le CSS. Étant donné que le Shadow Dom est séparé du DOM principal, il n'hérite pas du CSS du Light Dom, comme nous pouvons le voir ici dans ce tableau. Si je vais au contenu Shadow Dom, le CSS Light Dom ne s'applique pas. À l'inverse, aucun CSS dans le Shadow Dom ne s'applique pas au composant Web lui-même ou à tout contenu extérieur. Nous pouvons cependant surmonter ce problème en utilisant le pseudo-sélecteur de l'hôte deux-points, dont nous parlerons dans une seconde. En gros, ce tableau résume la relation entre Light DOM CSS et Shadow DOM CSS en ce qui concerne le composant Web lui-même, contenu fendu dans ce composant Web et le Contenu Shadow DOM. Je vais passer en revue chacun de ces exemples très prochainement, mais commençons par un exemple de base pour commencer ici. C'est en quelque sorte passer à la prochaine vidéo, mais je vais créer une machine à sous. Laissez-moi entrer dans la composante ici. Et au lieu d'un bouton, ce que je vais faire , c'est créer une fente. Je vais juste le copier ici aussi. Bien sûr, tout contenu que j'insère ici, nous irons là où notre tag a été défini. Donc, ce que je vais faire, c'est créer une plage et dire qu' il s'agit d'un élément intégré. Et puis ce que je vais faire, c'est commencer à écrire du CSS dans notre Light Dom. Je vais donc cibler la portée et je vais lui donner une couleur rouge. Cliquez sur « Enregistrer » sur cette actualisation ici. Et vous pouvez voir qu'il s'agit d'un élément fendu et que la couleur est en fait rouge. Mais ce que vous avez peut-être aussi remarqué, c'est qu' à l'intérieur de cette div, il y a une autre période. Et cette période n'a pas pris en charge le CSS dans notre Light Dom et c'est parce qu'il fait partie de l'ombre Root. Donc, si nous voulions styliser cette balise particulière, ce que nous ferions c'est d'aller dans le composant ici, et n'importe où où nous créons notre code HTML, nous créons une balise de style distincte. Et ensuite, nous pourrons colorer notre portée comme telle. Faisons le vert. Et encore une fois, ce n'est pas le code le plus propre, mais nous devons également le copier ici. Je vais cliquer sur « Enregistrer » là-dessus , puis je me rafraîchis ici. Vous pouvez voir que la portée Shadow Dom est verte et que la portée fendue est rouge. Voilà donc les bases du style Shadow Dom. Si vous avez un élément dans le Shadow Dom, le style doit également se produire à l'intérieur du Shadow Dom. Et cela n'affectera aucune travée insérée. À l'inverse, tous les éléments du Shadow Dom n'héritent pas des styles du Light Dom. Ainsi, comme vous l'avez vu ici, lorsque j'ai mis une règle de style pour la couleur rouge sur les travées dans le Light Dom, cela ne s'appliquait pas à la portée du Shadow Dom. C'est donc l'exemple de base du style Shadow Dom. Mais revenons à notre diagramme ici et passons en revue tous les différents scénarios. Ainsi, le premier scénario utilisant le CSS Light Dom pour styliser le composant Web lui-même. Ce que je veux dire par là, c'est comme si nous utilisons le nom de l'élément pour cibler cette plage. Nous pouvons également le faire avec un composant Web. Il fonctionne donc comme n'importe quel autre élément HTML. Nous pouvons simplement écrire un composant Web et disons simplement la décoration de texte, le souligner, enregistrer et l'actualiser, et vous pouvez voir que l'ensemble du composant Web a maintenant un soulignement. revenant ici au CSS Shadow Dom, nous pouvons réellement styliser le composant Web lui-même à partir du Shadow Dom en utilisant un hôte deux-points spécial pseudo-sélecteur. Revenons en arrière et faisons ça maintenant. Donc, si je vais dans notre composant ici, et avant que nous ne fassions cette période de vert, accueillons. Peut-être rendons simplement le poids de la police audacieux de tout ce qui se trouve dans le composant Web. Je vais cliquer sur « Enregistrer » là-dessus, rafraîchir ici. Cela ne fonctionne pas en raison de ce rappel de changement d'attribut. Nettoyons cela maintenant et créons ce code propre. Au lieu de définir exactement le même code deux fois, je vais cibler la plage spécifique ici et mettre à jour cette valeur avec la nouvelle valeur. Au lieu de définir explicitement le code HTML interne sur la racine de l'ombre, je vais revenir ici, trouver cette plage particulière sur la racine de l'ombre, puis cibler le code HTML interne de cette plage, puis le définir sur la nouvelle valeur. C'est beaucoup plus propre. De cette façon, nous maintenons la structure HTML interne de notre racine d'ombre sans avoir à mettre à jour le tout à chaque fois. Cela devrait faire fonctionner maintenant, ce qui est le cas, nous avons maintenant tout le composant Web en gras, et nous avons pu le faire dans la racine de l'ombre en utilisant ce pseudo-sélecteur d'hôte. Revenons à la table ici. Examinons le contenu à fente. Le contenu fendu dans le contexte du DOM Light n'est pas considéré comme faisant partie du DOM Shadow. Par conséquent, les styles DOM Light s'appliquent ici. Nous l'avons déjà vu. Nous l'avons vu dans le cas de cette travée ici qui a été insérée. La couleur de cette portée est rouge. Encore une fois, comme il n'est pas considéré comme faisant partie du DOM Shadow, les styles Light DOM s'appliquent ici. Mais comme nous l'avons vu précédemment avec le sélecteur d'hôte, il existe un moyen de styliser ce contenu à fente dans le CSS Shadow DOM. Nous avons juste besoin d'utiliser la pseudo-classe fendue deux-points et nous devons passer un paramètre. Allons-y et faisons-nous ça maintenant. Allons dans notre fichier component.js. Mettons cette pseudo-classe fendue et le paramètre. Nous allons mettre dans la travée de manière à ce que nous coiffions la fente en travée. Permettez-moi de changer la couleur gris, disons. Alors si nous allons ici et que nous nous rafraîchissons, que pensez-vous qu'il va se passer ? Découvrons-le. Comme vous pouvez le constater, ces couleurs ne changent pas. Pourquoi est-ce que c'est ? Si nous regardons ce deuxième élément ici, qui est l'élément à fente, et que nous examinons les styles appliqués, vous pouvez voir que nous avons notre couleur rouge ici, puis nous avons notre couleur grise pour la portée mais la couleur rouge est écrasée. Cela est cohérent avec ce que j'ai écrit dans le tableau ici, c'est-à-dire en cas de conflit, les styles du DOM Light prévalent. Vous pourriez penser que je l'ai mis dernier pour que le gris prenne le dessus, mais, dans le cas où il y a un style pour ce contenu dans le DOM Light, le style du DOM Light arrive à contrôler la couleur. Si nous voulions styliser cette fente à l'intérieur de notre DOM Shadow, nous devons nous assurer que ce n'est pas là. Si je commente cela et que je me rafraîchis ici, vous pouvez voir que nous pouvons le styliser gris lorsqu'il n'est pas écrasé par un style qui se rapporte au même élément dans notre DOM Light. Rafraîchissant ici, gardons le rouge, et revenons à notre dernière ligne en dehors de l'exception ici pour le contenu Shadow DOM dans notre tableau. N'importe quel CSS DOM léger n'aura aucun effet sur notre DOM Shadow. Je pense que nous pouvons déjà en voir quelques exemples. Nous pouvons voir qu'il existe une règle de couleur pour le rouge sur tous les éléments de portée. Mais si nous entrons ici, nous avons une portée dans notre DOM Shadow et, bien sûr, il reste vert. Nous avons déjà vu qu' avec le CSS Shadow DOM, tout CSS que nous créons dans le DOM Shadow aura un effet direct sur le DOM Shadow. Encore une fois, nous avons vu qu'avec style de notre élément span dans le DOM Shadow, vous pouvez voir qu'il est vert. C'est essentiellement la table entière. La seule exception est variables CSS DOM Light sont accessibles à l'intérieur du CSS Shadow DOM. Si vous avez déjà utilisé des variables CSS auparavant, essentiellement comment cela fonctionne, dans notre DOM Light, nous pouvons créer des variables CSS. Ce que je vais faire, c'est, sur root, créer une variable CSS appelée BG color et nous allons la définir en noir. Ensuite, ce que je vais faire, c'est que j' irai ici et réglons la couleur d'arrière-plan sur la variable de couleur BG, appuyez sur « Enregistrer » là-dessus, rafraîchissons ici. Vous pouvez voir que même si la variable CSS a été définie dans le DOM Light, nous pouvons toujours l'intégrer dans le DOM Shadow. C'est juste que la règle CSS doit être dans le CSS Shadow DOM. Cela nous permet de contrôler le contenu Shadow DOM en termes d' utilisation de variables dans notre DOM Light. Si nous avions un jeu de couleurs, je peux le changer en, faisons jaunir et cliquer sur « Enregistrer » là-dessus. Maintenant, vous pouvez voir que nous pouvons mettre à jour les valeurs dans le DOM Light et que cela affectera le DOM Shadow lors de l'utilisation de variables. Mais à part cela, si nous devions entrer ici et dire la portée, le fond, la couleur de, que devrions-nous faire ? Passons au bleu. Nous avons cette règle de span deux fois donc je vais simplement commenter celle-ci. Je vais cliquer sur « Enregistrer », me rafraîchir ici. Vous pouvez voir que le fond bleu ne s'applique qu'au contenu fendu. Il ne s'applique pas à la plage dans le DOM Shadow. Nous ne pouvons pas réellement modifier cette couleur via le DOM Light à moins, bien sûr, que nous référencions ces variables. Si jamais vous êtes perdu, je vous relierai à cette table ici. Je vais mettre un lien sur votre écran dès maintenant pour que vous puissiez le consulter lorsque je publierai ce cours. Mais essentiellement le DOM Shadow est principalement axé sur CSS. C'est un moyen pour nous de corriger le CSS d'un élément, peut-être si nous partagions des éléments entre différents projets et que nous voulions que l'élément soit exactement le même, quel que soit le projet dans lequel il se trouvait, le DOM Shadow serait utile. Mais dans vos propres applications privées et pages Web, je ne suis pas sûr que le DOM Shadow soit trop nécessaire, c'est pourquoi nous n' allons pas l'utiliser dans l'exemple pratique à la fin de ce cours. Mais il est populaire dans les composants Web , il était donc important de tirer cette leçon sur le DOM Shadow. Comme toujours, tout cela va être engagé sur GitHub, vous pouvez donc vous attendre à ce code plus tard. Bien sûr, je vais partager cette table avec vous, mais cela résume à peu près le DOM de l'ombre. Dans la vidéo suivante, parlons des machines à sous et des modèles. 7. Emplacements et modèles: Bienvenue les gars de retour. Dans cette vidéo, nous allons parler des machines à sous et des modèles, qui sont assez basiques. Nous avons déjà utilisé une machine à sous dans la vidéo précédente. Nous l'avons inséré dans du contenu ici. Fondamentalement, nous avons imbriqué une plage à l'intérieur de ce composant Web, puis nous avons pu choisir où nous voulions qu'il glisse dans cette structure HTML particulière au sein de notre DOM d'ombre. regardant cela dans le navigateur actuel, vous pouvez voir que nous avons notre racine d'ombre ici. Si je vais dans la div et vais dans ce contenu fendu ici, vous pouvez voir qu'il y a un lien vers le contenu fendu qui se trouve ici. C'est une chose bizarre où cela techniquement pas partie du DOM de l'ombre, mais il est inséré dans le DOM de l'ombre ici via cette balise de machine à sous. Nous avons déjà vu que dans la pratique, la prochaine chose à examiner est de nommer les emplacements, donc si nous voulons utiliser plusieurs emplacements dans un composant Web particulier. Pour démontrer cela, je vais supprimer tout le code dont nous n'avons pas vraiment besoin pour cette démonstration. Encore une fois, nous pouvons partir dans le rappel déconnecté, mais je vais me débarrasser de cet attribut ici. Débarrasse-toi de ça. Ensuite, je vais me débarrasser de l'attribut tel qu'il existe ici dans le HTML. Je vais créer une autre période ici. Ensuite, je vais écrire que cette période a également été insérée. Si je clique sur « Enregistrer » là-dessus, voyons ce qui se passe maintenant. Si j'actualise la page, vous pouvez voir qu'il y a deux travées à l'intérieur de cet emplacement. Mais ce que nous pouvons faire via des emplacements de noms, c'est d'intégrer ces deux travées dans différentes parties de la même structure HTML. Qu'est-ce que je veux dire par là ? Eh bien, passons à notre fichier component.js ici et modifions cela. Disons que nous avons deux divs. La première div va avoir un **** pour la première période et créons une autre div qui se sépare de cette div et à l'intérieur va être la deuxième période que j'insère dans mon composant Web. Une fois que nous avons nommé ces machines à sous, ce qui va se passer, c'est que cette plage va aller dans le premier emplacement et cette plage va aller dans le deuxième emplacement. Nous pouvons commencer soit dans le document HTML, soit dans le document JavaScript. Je vais commencer ici dans le JavaScript, tout ce que j'ai à faire est de nommer le slot en ajoutant le paramètre de nom ici , puis ici je vais juste l'appeler Slot 1. Ensuite, je vais descendre au deuxième emplacement et le nommer Slot 2. Ensuite, dans notre index.html pour les lier je vais utiliser le paramètre de slot, et je vais à nouveau utiliser ce nom, donc Slot 1, puis le slot est et je vais à nouveau utiliser ce nom, donc Slot 1, donc Slot 1, égal à Slot 2. Maintenant, si je clique sur « Enregistrer » et que je me rafraîchis ici, que pensez-vous que cela va se passer ? Rafraîchissons et jetons un coup d'œil à l'intérieur. Comme vous pouvez le voir, nous avons nos deux éléments fendus ici, mais en ce qui concerne l'endroit où ils s' intègrent dans notre structure racinaire d'ombre, ouvrons ce mauvais garçon et nous pouvons voir que nous avons deux divs. Dans la première div, nous avons le premier contenu fendu, et dans la deuxième div, nous avons le deuxième contenu fendu. Maintenant, ils sont dans des div séparés et nous pourrions en avoir besoin pour tout ce que nous avons besoin de faire avec notre structure HTML, donc le style et autres. C'est ainsi que nous pouvons insérer plusieurs éléments dans différentes parties de notre structure DOM de l'ombre. la suite de cela, la prochaine chose que je veux vous montrer, ce sont les modèles. Je vais supprimer ce code ici [NOISE] puis je vais mettre un HTML, les règles de style et je vais revenir à index.html ici. Je vais me rendre ici et supprimer ce contenu car ce que nous allons faire est de placer du contenu dans un modèle , puis d'introduire ce contenu dans le composant Web. Nous pouvons le faire de deux manières différentes. Je suis sûr que nous pouvons le faire de plusieurs façons, mais il y a deux façons de vous montrer dans cette vidéo. Nous pourrions placer la balise de modèle en dehors du composant Web. Dans ce cas, donnons une pièce d'identité. Je vais juste appeler ça modèle par souci de simplicité. Ensuite, créons notre modèle. Je vais juste faire un h1 et dire que ce code de modèle constitue le composant Web. Ensuite, je vais créer une balise de paragraphe et en utilisant Emmet dans Visual Studio Code, je peux taper Lorem hit, « Tab » et cela générera automatiquement Lorem Ipsum. Je vais juste régler l'espacement ici pour que vous puissiez voir tout le paragraphe. Appuyez sur « Économisez » là-dessus. Maintenant, comme il s' agit d'une balise de modèle, elle ne sera pas rendue lors de l'exécution. Si je retourne ici, lance le code, vous verrez que nous avons notre code de modèle ici. Nous avons ce fragment de document ici, donc nous avons le code dans notre code HTML, mais rien n'est rendu et c'est parce qu'il se trouve à l'intérieur d'une balise de modèle, ce qui signifie qu'il ne sera pas rendu à moins que nous prenions ce code de modèle et le rendu à l'aide de JavaScript. C'est exactement ce que je vais faire. Je vais retourner à notre éditeur de code ici et aller à component.js. Ce que je vais faire, c'est après avoir défini notre code HTML intérieur ici, qui n'est que la balise de style, ce que je vais faire est de trouver ce code de modèle. Je peux le faire par sélecteur de requête de document. En gros, je veux juste trouver cet élément. Il s'agissait d'un modèle avec l'ID du modèle. C'est pourquoi j'ai mis du hachage devant lui. Ensuite, je vais trouver le contenu de cela et ensuite je vais exécuter clone Node avec le paramètre true. Avec le paramètre true qui représente un clone profond , tous les sous-éléments du modèle seront également rendus. Je ne peux pas vraiment penser à une situation dans laquelle vous voudriez vous tromper ici. Restons juste vrai. Bien sûr, nous allons devoir utiliser cela quelque peu. Je vais le stocker dans une variable, une constante d'abord. Maintenant, nous avons notre modèle const. On dirait que j'ai accidentellement placé ça en dehors de la fonction constructeur, donc je vais le remettre là-dedans. Désolé pour ça. Maintenant, avec ce modèle, ce que je peux faire, c'est que je peux attacher ce nœud cloné à la racine de l'ombre. Je vais saisir la racine de l'ombre ici et lancer ajouter un enfant, plaçant ce code de modèle là-dedans comme argument. Rafraîchissons la page ici et voyons ce qui se passe. Vous pouvez voir que le code du modèle est désormais exécuté dans notre composant Web. Si je vais dans le code du composant Web ici, vous pouvez voir que nous avons notre racine d'ombre et à l'intérieur de la racine d' ombre, nous avons la balise de style que nous avons définie en définissant explicitement le code HTML interne. Ensuite, nous avons les balises h1 et p que nous avons définies dans le modèle. Ce que nous pouvons également faire pour rendre cela un peu plus simple et encapsulé, c'est de placer la balise de modèle dans le composant Web lui-même. Je vais juste le copier et ensuite le commenter. Allons à l'intérieur du composant Web. Maintenant, comme nous sommes dans le composant Web, nous pouvons simplement faire référence à l'élément de modèle plutôt que d'avoir un ID. Je vais cliquer sur « Sauvegarder » là-dessus, puis aller ici à notre code et ce que nous pouvons faire à la place, c'est enlever ce hachage. Au lieu de documenter, nous pouvons dire cela. Cela va chercher n'importe quel modèle dans notre composant Web. Je vais cliquer sur « Sauvegarder » là-dessus, rafraîchir ici, et vous voyez que nous obtenons exactement le même résultat. Vous pouvez voir que le modèle se trouve dans le composant Web, puis le code que nous avions dans ce modèle a été cloné dans le DOM de l'ombre. Cela fonctionne de la même manière que si nous n'utilisions pas du tout le DOM de l' ombre. Supprimons simplement complètement le DOM de l' ombre. En fait, je vais juste le commenter parce que je pense que nous pourrions l' utiliser dans la prochaine vidéo. Il suffit de l'ajouter au code HTML interne réel. Rafraîchissez-vous ici et vous verrez qu'il n'y a pas ajout et c'est parce que nous avons toujours la racine de l'ombre ici. Cet ajout d'enfant rafraîchit ici. Encore une fois, ne fonctionne pas. Qu'avons-nous fait ? Impossible de lire les propriétés de null. Je crois que le problème ici est que nous avons explicitement défini notre code HTML, qui efface le contenu HTML à l'intérieur du composant Web que nous avons mis ici, qui n'est que cette balise de modèle. Dans ce cas, ce que je ferais c'est que je me rendais ici et débarrasse de tout cela et que je mettrais ça directement dans le gabarit, ce qui est un peu plus propre de toute façon. « Enregistrer » là-dessus, puis à côté du modèle, je mettrai la balise de style directement dans notre code HTML. J'ai cliqué sur « Enregistrer » sur cette actualisation ici et le problème est parti maintenant. Selon la façon dont vous voulez le faire, cela semble plutôt propre car nous ne mettons aucun code HTML dans le JavaScript. Nous mettons tout le HTML et les styles qui s' y trouvent dans notre composant Web. Mais comme nous n'utilisons plus de DOM d'ombre, ces styles s'appliqueront théoriquement à tout. Si nous entrons ici et que nous mettons une travée, dites que c'est une travée. Rafraîchissez-vous ici. Les styles de notre DOM léger que nous avons ici et nos styles ici dans le composant Web s' appliqueront tous les deux. Si j'y jette un coup d'œil, jetons un coup d'œil à cette période particulière ici. Vous pouvez voir que la couleur d'arrière-plan bleue et la couleur d'arrière-plan jaune s'appliquent toutes les deux. Mais parce que cela se produit plus tard dans le document, c'est le cas ici même. Essentiellement, il n'est pas logique que nous ayons une balise de style ici si nous voulons que cela ne s'applique qu' au composant Web, dans ce cas, nous voudrions nous en tenir au DOM de l'ombre. Je vais juste revenir en arrière ici et ici. Gardons le DOM de l'ombre, rafraîchissons ici. Ensuite, si je devais ajouter une plage à notre modèle ici, rafraîchissez-le. Inspectez cet élément. Vous pouvez voir qu'aucun des styles du DOM léger ne s'applique ici , car ce code de modèle est placé dans un DOM d'ombre et, par conséquent, seuls les styles que nous avons dans notre racine d'ombre s'appliquera à elle. modèles assez simples ici, beaucoup de flexibilité, mais essentiellement, il suffit de créer une balise de modèle et ensuite ce que nous allons faire est de trouver ce modèle, regardez son contenu et exécutez clone Node pour créer un nœud DOM ou un sous-arbre DOM basé sur ce modèle, puis nous pouvons l'ajouter où nous le voulons dans notre composant Web, soit à la racine ombrée, soit à la racine de l'ombre directement le code HTML interne. Cela couvre les machines à sous et les modèles. Dans la vidéo suivante, nous allons couvrir les éléments intégrés personnalisés. 8. Éléments intégrés personnalisés: Très bien, les gars. Dans cette vidéo, nous allons couvrir les éléments intégrés personnalisés. Jusqu'à présent, nous avons étendu le HtmlElement racine. Mais maintenant, nous allons étendre un élément HTMLElement spécifique, et c'est ce qu' on appelle la création d'un élément intégré personnalisé. Donc ce que je vais faire, c'est supprimer tout ce code parce que nous créons un tout nouvel élément et parce que je fais cela, je vais aller dans mon index ici et supprimer tout ce code également. Nous pourrions tout aussi bien supprimer tout ce qui se trouve dans notre étiquette de style. Nous avons une ardoise assez propre ici. Donc, afin de démontrer un élément intégré personnalisé, je vais étendre l'élément bouton HTML. Nous allons donc créer notre propre bouton personnalisé. Donc, en commençant de la même manière que nous le ferions généralement en écrivant la classe, puis je vais appeler mon élément de bouton personnalisé, littéralement juste CustomButton. Ensuite, je vais écrire des extensions et au lieu d' écrire HTMLElement, ce que je vais faire, c'est HTMLButtonElement. Maintenant, si vous utilisez un éditeur de code ou un IDE, comme Visual Studio Code, vous pouvez voir une fois que j'ai tapé du code HTML, vous pouvez voir une liste complète de tous ces différents éléments que je peux utiliser. Le format est essentiellement HTML, le nom de l'élément, puis l'élément. Je peux donc étendre un élément de titre. Je peux étendre un élément image, un élément d'entrée, une étiquette, un lien, tant d'options différentes ici. Donc, si vous devez parcourir les différentes options, vous n'êtes pas sûr du nom de la classe, cela vous aide vraiment. Mais ce que je cherche, c'est un HTMLButtonElement, donc je vais le frapper. Alors ouvrons-le comme nous l'avons fait la dernière fois. Je vais écrire notre méthode de définition CustomElements comme nous l'avons fait précédemment pour les composants Web standard, et je vais créer le bouton personnalisé de la balise. Ensuite, comme d' habitude, nous allons mettre cette classe en jeu, mais c'est là qu'elle devient à nouveau différente. Nous devons présenter un troisième argument. Nous devons insérer un objet JavaScript avec une paire de valeurs clés. La clé va être étendue et la valeur est la balise de l' élément que nous étendons donc pour un bouton HTML, la balise est bien sûr un bouton. Si je devais écrire ceci en HTML, ce sera comme si vous preniez essentiellement le mot qui se situe entre le signe inférieur et supérieur à et mettiez juste ici après les extensions. S'il s'agissait d'un lien personnalisé par exemple, permettez-moi de tricher en utilisant la saisie automatique. Si nous étendions votre élément de lien HTML, cela deviendrait « a », car c'est ce que la balise ancre est représentée dans le code HTML. Mais nous faisons le bouton donc je vais à Control Z jusqu'à ce que nous revenions au bouton. Donc, comme nous l'avons déjà fait avec les composants Web standard, je vais créer un constructeur ici et ensuite, bien sûr, je vais exécuter super pour que nous puissions hériter de la fonction constructeur de la classe que nous étendons, qui était HTMLButtonElement. Ensuite, ce que je vais faire, c'est aller dans notre index.html ici et écrire du HTML. Créons cet élément intégré personnalisé. La façon dont nous procédons est différente des composants Web standard. Nous allons en fait utiliser le nom d'origine de l'élément que nous personnalisons. Il va s'agir d'un bouton. À l'intérieur de ce bouton, je vais juste écrire, appuyez sur moi, puis ici pour en faire notre élément intégré personnalisé et pas seulement un bouton standard, nous allons utiliser l'attribut de is. Ensuite, ici, bouton personnalisé, qui correspond à ce que nous avons écrit dans le premier argument de notre méthode définie ici. En revenant ici, ce que je pourrais faire pour cet exemple, c'est que je vais mettre un lien. Je vais mettre un attribut personnalisé de lien et nous allons simplement le faire aller sur google.com. Ce serait donc comme un comportement standard d'une balise de lien. Nous écririons donc href, puis si nous cliquons sur le lien, il irait à cette URL spécifique. Dans ce cas, si je fais cela maintenant et que je retourne à notre code ici et que je clique sur « Appuyez  », rien ne se passera car il s'agit d'un attribut personnalisé. Il ne fera rien à moins que nous n' écrivions du code dans notre composant ici pour gérer cela. C'est exactement ce que je vais faire ensuite. Je vais saisir cette valeur pour ça. GetAttribute. Ensuite, je vais mettre le nom de l'attribut dans leur lien et, bien sûr, je vais le stocker quelque part. Je vais le stocker sur le composant Web lui-même, donc je vais dire que ce .link est égal à la valeur de ce lien .getAttribute. Si je le voulais, je pourrais aussi le faire si cela a un attribut comme nous l'avons fait auparavant, mais je vais simplement supposer qu'il a cela parce que je contrôle l'écriture de ce code et je vais assurez-vous qu'il possède cet attribut. Ce que je vais faire, c'est que je vais configurer un écouteur d' événements. Si vous cliquez sur cet élément, cliquez sur « Événement », puis je vais exécuter ce code. Ce que je vais faire, c'est changer l'emplacement de la fenêtre href par la valeur de ce .link. Ce que nous avons fait ici, c'est que nous avons pris la valeur à l'intérieur de l'attribut link, stockée dans cette variable, puis nous avons créé un écouteur d'événement pour l'événement de clic sur ce bouton personnalisé. Lorsque vous cliquez dessus, il redirige l'utilisateur vers ce que nous avons stocké dans cet attribut de lien. Essayons donc si cela fonctionne. Maintenant, je vais me rafraîchir ici et je vais cliquer sur « Appuyez sur moi », et comme vous pouvez le voir, nous allons sur google.com. Encore une fois, ce n'est pas l'exemple le plus pratique car nous aurions pu simplement utiliser une balise de lien pour cela. Mais permettez-moi d'étendre cet exemple un peu plus loin. Parce que nous avons ici un élément héritant tout le comportement d'origine d'un élément bouton, nous devrons peut-être l'empêcher de se comporter comme un bouton. Un exemple de cela serait s'il se trouvait à l'intérieur d'un formulaire. Je vais avoir un formulaire ici et je vais définir l'action sur Endpoint à titre d'exemple. Cela va évidemment envoyer le formulaire vers nulle part car je n'ai pas vraiment de point de terminaison. C'est ce qu'on appelle Endpoint. Ensuite, si je clique sur « Enregistrer » là-dessus et que je me rafraîchis ici et que je clique sur « Appuyez sur moi », vous verrez qu'il hérite du comportement d'un bouton dans un formulaire, qui consiste à soumettre le formulaire. Vous pouvez donc voir ici que nous allons à ce point de terminaison qui n'existe pas. C'est donc bien sûr différent de si j' avais une balise de lien parce que nous avons une balise de lien, numéro 1 ne ressemblerait pas à ceci parce que ce n'est pas un bouton. Numéro 2, une balise de lien ne déclenche pas le sommet d'un formulaire s' il se trouve à l'intérieur d'un formulaire. Donc ce que nous pouvons faire, c'est que je peux passer à component.js ici et je peux aller à Event.PreventDefault. Il est sauvegardé sur ce rafraîchissement ici. Si je clique dessus, même s'il se trouve dans un formulaire, cela empêchera ce comportement par défaut, puis il fera ce que nous lui avons dit de faire, c' est-à-dire rediriger l'utilisateur quelle que soit l'adresse de l'attribut link. En revenant ici, juste pour percer cette maison, si je devais mettre un bouton standard qui n'était pas l'un de nos éléments intégrés personnalisés et dire que vous pouvez aussi me presser et ensuite je me rafraîchis ici. Si je clique sur le bouton, vous pouvez également appuyer sur moi, va agir comme un bouton standard et envoyer le formulaire. Mais comme nous avons personnalisé cet autre bouton pour empêcher valeur par défaut et rediriger l'utilisateur vers google.com, il va se comporter différemment. espère encore, ce n'est pas l'exemple le plus pratique, mais j'espère que cela communique ce que nous pouvons faire avec des éléments. Nous pouvons prendre certains comportements et attributs d'un élément que nous aimons, et nous pouvons les modifier en fonction de nos objectifs. Il y a évidemment des quantités folles de flexibilité ici. Vous pouvez prendre cela dans la direction que vous voulez, mais ce n'est pas quelque chose que nous utiliserons particulièrement dans la section pratique de cette classe, juste quelque chose à noter parce qu'il tombe sous la spécification du composant Web. Nous pouvons étendre des éléments spécifiques ici, et c'est ce que l'on appelle des éléments intégrés personnalisés. Les gars, donc dans la vidéo suivante, ce que nous allons faire est de couvrir la spécification finale dont nous n'avons pas encore parlé, la spécification des modules ES. Je vous verrai dans la prochaine vidéo. 9. Modules ES: Les gars, donc dans cette dernière vidéo avant entrer dans notre projet de classe pratique, parlons des modules ES, qui est la quatrième spécification de la méta-spécification des composants Web. Les modules ES sont essentiellement un moyen pour nous de structurer notre projet différemment. Nous pouvons placer chacun de nos composants dans son propre fichier JavaScript modulaire, puis l'intégrer dans un autre fichier JavaScript, puis insérer ce fichier JavaScript dans notre document HTML. Sinon, nous pouvons simplement intégrer chaque composant dans notre document HTML sans ce fichier. Mais dans les exemples que je vais vous montrer, je vais importer tous les composants dans un seul fichier JavaScript, puis nous allons le placer dans notre document HTML. Certains projets, cela va être très utile, certains projets n'auront aucun sens. Nous allons utiliser les modules ES dans la pratique qui vient après cette leçon. Ce sera quelque chose que nous verrons bientôt en action , mais pour cette leçon, allons en fait démontrer les modules ES. Comme je l'ai dit, ce que je vais faire, c'est que je vais importer tous nos composants. En ce moment, il n'y en a qu'un mais je vais en faire un second dans un fichier JavaScript central, et je vais appelez ce fichier index.js. Maintenant, ce que je vais faire pour commencer, fermons cela pour que nous puissions voir tout cela, c' est que je vais déplacer cette méthode de définition d'éléments personnalisés ici et le déplacer dans notre index.js. Pour que nous ayons accès à cette classe ici, ce que je vais devoir faire, c'est l'exporter d' ici, puis l'importer ici. Tout d'abord, parce que nous n'avons qu'une seule classe ici, je ne vais pas faire d'exportation nommée, je vais faire une exportation sans nom. J'exporte simplement par défaut , puis le nom de classe que je veux exporter. Ce que cela fait, c'est qu'il n' exporte que cette classe, donc une fois que je l'ai importée ici, je peux la référencer directement dans notre code ici. Je vais exécuter la déclaration d'importation ici, nous cherchons un bouton personnalisé et ensuite, après le mot-clé from ici, je après le mot-clé from ici, mets le chemin d'accès au fichier. Maintenant, que je l'ai fait, ce que je dois faire est de mettre à jour le code ici, donc au lieu de component.js, j'ai mis index.js. Comme nous l'avons vu dans la leçon théorique, j'ai besoin de changer ou d'ajouter l'attribut ici du module de type. Je vais cliquer sur « Sauver » là-dessus. Rafraîchissons ici. Nous devrions voir que nous avons toujours ces boutons, mais si je clique sur le premier, qui est notre élément intégré personnalisé, vous pouvez voir que nous avons les mêmes fonctionnalités qu'un bouton standard. Les deux sont exactement les mêmes. La raison en est ici, dans notre console JavaScript. Nous avons une erreur de stratégie CORS ici et la raison en est que nous ne pouvons pas vraiment le faire exécutant le code HTML à partir du système de fichiers. Ce que nous devons faire, c'est faire fonctionner un serveur. C'est très simple dans le code Visual Studio. J'espère que c'est assez simple et facile dans votre EDI. Si ce n'est pas le cas, vous pouvez toujours utiliser Visual Studio Code et je vais simplement cliquer ici et cliquer sur Go Live. Vous pouvez maintenant voir que nous exécutons un serveur. que je peux voir c'est parce que nous avons une adresse IP ici plutôt qu'un chemin d'accès depuis le système de fichiers. Maintenant, si j'appuie sur option de commande I pour afficher la console, vous ne pouvez voir aucune erreur et si je clique « Appuyez sur moi », cela m' amènera vers Google plutôt que sur le point de terminaison qu'il recherche ici. Je fermerai celui-ci dans le système de fichiers et nous utiliserons simplement celui-ci. Ici, vous pouvez voir que tout cela fonctionne déjà. Nous avons importé du code de component.js dans index.js, puis nous l'avons importé dans index.html. Mais cela n'aura pas vraiment de sens, et nous avons donc créé un autre composant. Je vais créer un deuxième composant ici. C'est un nom terrible , mais je vais juste l'appeler composent-2. Vous savez quoi ? Juste pour s'amuser, créons un autre élément intégré personnalisé. Je vais écrire une classe et étendons l' élément lien pour créer un lien personnalisé. Je vais écrire un lien personnalisé étend HTML, élément d'ancrage. Ouvre ça ici, évidemment je vais mettre le constructeur. Ensuite, je vais appeler super comme nous l'avons toujours fait. Pour cela, ce que je pourrais faire est ajouter un écouteur d'événement pour cliquer, [NOISE] c'est similaire à ce que nous avons fait auparavant, mais maintenant nous avons le comportement par défaut d'une balise d'ancrage. Ce que je vais faire, c'est en faire un lien de confirmation. Je vais lancer Confirmer et demander à l'utilisateur de confirmer qu'il souhaite utiliser Google. Vous voulez utiliser Google et si cela revient aussi faux que revient aussi faux vous pouvez le voir à partir de ce point d'exclamation ici, alors je vais empêcher la valeur par défaut. Je vais empêcher l' utilisateur d'utiliser ce lien. exemple assez basique là-bas. Ensuite, bien sûr, je vais exporter cela, et comme nous n' exportons qu'une seule classe, je peux utiliser par défaut ici. Nous allons exporter un lien personnalisé, puis nous allons aller dans index.js et utiliser le même format. Je vais importer un bouton personnalisé à partir de component2.js et ensuite nous écrirons notre méthode définie ici, donc les éléments personnalisés, définissent, appellent le lien de tiret personnalisé. Ensuite, nous mettons le nom de la classe, c'est le deuxième argument. Ensuite, dans nos extensions ici, nous allons étendre l'élément d'ancrage standard, qui est simplement représenté comme un dans le HTML. Si je me dirige ensuite vers mon index.html, nous importons déjà tout ce code. Tout ce que je dois faire, c'est simplement écrire un tag ici. Faisons en sorte qu'il aille à nouveau sur Google. Ensuite, bien sûr, pour prendre en charge la fonctionnalité de cet élément intégré personnalisé, je vais devoir écrire est et ensuite à l'intérieur de l'attribut is, mettre le nom que nous spécifions lequel est un lien personnalisé, puis je vais juste cliquer avec le bouton droit sur moi pour accéder à Google. Appuyez sur « Économisez » là-dessus. Rafraîchissons ici. Vous pouvez voir le lien ici. Nous n'avons même pas eu à nous actualiser car nous utilisons Live Server, qui n'est qu'une fonctionnalité de Visual Studio Code. C'est ce qu'on appelle le rechargement à chaud. Ensuite, si je clique dessus, je vais me demander si je voudrais vraiment aller sur Google. Si je clique sur « Annuler », cela empêchera le comportement par défaut, qui me dirige vers cette adresse. Mais si je clique dessus et que je clique « OK », ça va m'y diriger. La fonctionnalité du composant lui-même n'est cependant pas la question ici. Le fait est notre capacité à exporter des classes à partir de documents JavaScript vers d'autres documents JavaScript et dans des documents HTML à l' aide de modules ES. J'espère que c'est un concept sympa pour vous que vous venez d'apprendre. Dans la vidéo suivante, nous allons commencer à créer cette application pratique. Dans cette vidéo, peut-être plusieurs vidéos en fonction du temps que nous prenons, vous nous verrez utiliser les modules ES en action et vous le verrez donc en pratique un peu plus dans les prochaines vidéos. Ce sont essentiellement les quatre spécifications de la méta-spécification des composants Web. Mettons cela en pratique dans la prochaine vidéo et créons notre propre projet personnalisé. 10. Composants Web en pratique Partie 1: Très bien, tout le monde. Bienvenue dans la partie pratique de la classe basée sur des projets. Je reçois assez régulièrement les commentaires que vous voulez voir des exemples plus pratiques. Dans ce cours jusqu'à présent, nous n'en avons pas vu trop si je suis honnête. Sans que quelques composants Web fonctionnent ensemble et sans cas d'utilisation, il est difficile de démontrer des cas d'utilisation pratiques réels des composants Web et un grand nombre de ces spécifications que vous n'avez pas besoin d'utiliser à la même époque. Par exemple, dans ce projet que nous sommes sur le point de créer, je n'utilise pas du tout le DOM Shadow parce que je ne ressens pas le besoin de l'utiliser à moins essayer de garder mon DOM Shadow séparé et ce que je veux dire par Séparer comme dans un style CSS séparé du reste de mon projet. Si je contrôle mon propre projet, je ne ressens pas vraiment le besoin de je ne ressens pas vraiment le besoin créer un DOM Shadow, car oui, je veux peut-être que les styles du DOM Light affectent le DOM de l'ombre. Mélangez et associez toutes les fonctionnalités quelle que soit la spécification qui vous convient. J'espère que vous avez appris quelques bons fondamentaux dans cette classe, mais je voulais inclure une leçon plus pratique basée sur des projets pour vous. Cela devra probablement être divisé en plusieurs leçons, sorte que cela peut apparaître sous plusieurs vidéos dans cette classe Skillshare. Mais ce que je veux faire, c'est créer un exemple pratique, l' exemple le plus pratique auquel je puisse penser et utiliser cet exemple pratique que nous avons vu plus tôt dans la classe avec l' exemple du commerce électronique via Shopify pour créer notre propre petit projet inspiré du commerce électronique, et si vous voulez aller plus loin, utilisez-le comme source d'inspiration pour quelque chose que vous souhaitez utiliser dans le monde réel. N'hésitez pas à le faire. Mais plutôt que ce sujet, à ce sujet, je veux simplement sauter directement dedans et vous laisser suivre ce que je suis en train de créer ici. Pour ce projet, je vais tout valider dans Git afin que vous puissiez regarder ce code plus tard et comparer votre code à celui-ci. Cela a également été une critique de certains de mes cours dans le passé, c'est que vous n'avez pas été en mesure de regarder le code lui-même en dehors des vidéos. Je vous ai écoutés là-dessus aussi, et donc je vais m'engager au fur et à et vous pourrez regarder ce code sur GitHub après publication de cette classe et comparer votre code au mien. Sans plus tarder, allons-y. Je vais créer un dossier de projet ici dans le dossier de code où nous avons créé l'autre dossier. Je vais appeler ça un panier d'achat. Ensuite, ouvrez Visual Studio Code, puis saisissez ce dossier, faites-le glisser dans Visual Studio Code, et par conséquent, je sais que j'ouvre ce dossier particulier. Évidemment, je vais étendre cela à toute la largeur de votre visionnement. Nous y allons, et commençons par le contenu de notre plaque de cuisson. Je vais donc créer un nouveau fichier avec index.html. Comme je l'ai fait par le passé, utilisez le point d'exclamation pour générer un document HTML de la plaque de cuisson. Appelons ce panier d'achat. Ensuite, ce que je vais faire, c'est copier certains actifs, CSS et images parce que cette classe n'est pas vraiment en CSS, et bien sûr, je ne vais pas aller vous chercher vos propres images, donc je vais amenez-les en ce moment. Jetons un coup d'œil rapide pour que vous sachiez ce qui se passe. Je viens d'avoir un fichier styles.css ici et il y a juste un tas de code différent. Celui-ci est redondant. Mais nous avons un tas de codes différents ici pour bien coiffer notre projet. Encore une fois, nous ne sommes pas vraiment concentrés sur les styles de cette classe, mais il vaut mieux avoir un projet bien coiffé qu'un projet moche. J'ai donc ça là-dedans et j'ai images ici, des produits aléatoires. Il s'agit d' images de produits aléatoires comme vous pouvez le voir. Ils se ressemblent tous visuellement, mais il n'y a aucune relation entre le Coke Zero, huile de graines de chanvre et la pâte de curry rouge. Un peu aléatoire, mais nous avions juste besoin de quelques images d'espace réservé pour ce projet. Je vais également créer un dossier JavaScript. Commencez par cliquer sur « Nouveau dossier », « js ». Dans ce dossier js, je vais créer un fichier index.js. Ce que je vais faire ici, c'est parce que nous allons construire un panier d'achat, je vais créer un objet sur l'objet fenêtre. Ce sera un objet global appelé cart, puis je vais ouvrir un objet vide, et je sais que dans cet objet je veux avoir un tableau d'éléments, donc je ne fais que l'initialiser ici. Je vais cliquer sur « Enregistrer » là-dessus, et ce sera probablement mon premier commit. Je vais faire apparaître un terminal ici, lancer git init, git add. puis git commit initial commit. Classez cela, et ce que je vais faire, c'est que j' essaierai de m'engager de temps que vous puissiez voir les progrès et que vous puissiez vous référer au code si vous le souhaitez. Nous avons ce **** DS Store ici. Je vais juste jeter ça, je n'ai pas vraiment besoin de ça. Revenons à notre code ici, faisons notre premier pas vers la création de ce projet. En fait, avant de faire cela, cliquons sur « Go Live ». Vous verrez maintenant que nous exécutons notre fichier index.html. Nous devons également charger ces styles, donc j'aurais probablement dû faire avant mon commit initial. Mais voilà, lien rel="stylesheet » puis le chemin d'accès à cette feuille de style est css/styles.css. Maintenant, avant de construire une fonctionnalité, je vais juste créer du HTML ici, alors créons une div avec la classe de conteneur, des trucs assez standard, puis un panier d'achat h1. Ensuite, ce que je vais faire, c'est une div avec la classe de produits à vendre, puis à l'intérieur d'ici, je vais créer quatre divs, donc div fois 4. Nous allons cliquer sur « Enregistrer » là-dessus. Voyons ici, alors vous pouvez voir si je clique sur « Inspecter dessus » et voir les produits à vendre. Nous avons tous les CSS prêts à utiliser lorsque nous insérons ces éléments de produit dans cette div ici. Avant de faire quoi que ce soit, permettez-moi de vous donner un aperçu de ce que nous essayons de créer ici. Ce sera notre projet terminé. Comme vous pouvez le voir ici, nous avons quatre produits que nous pouvons ajouter à notre panier, et si je clique sur le bouton Ajouter au panier sous l'un de ces produits, il ajoutera cet article à notre petit panier ici. Si je clique à nouveau sur ce bouton, cela augmentera la quantité Si je clique sur le bouton Ajouter au panier d'un autre produit, cela ajoutera cette ligne au tableau ici, ce qui met automatiquement à jour le total. Pensez que tout cela représente environ 10 dollars, donc c'est assez simple, et je peux également mettre à jour la quantité via ces sélecteurs de grandeurs, et cela mettra à jour les totaux le cas échéant. Je peux aussi aller ici et régler ça à 10 si je veux. Ensuite, je peux définir ma propre quantité spécifique. La théorie derrière tout cela est que s'il s'agissait d'un vrai panier d'achat, je pourrais cliquer sur un bouton et il se dirigerait vers cette sélection. Pour nos besoins, si nous actualisons la page, nous perdrons notre panier. Nous pourrions écrire du code pour le conserver dans le stockage local ou le stockage de session. Mais pour les besoins de cette vidéo, je ne pense pas que nous ayons vraiment besoin de le faire, cela pourrait être une amélioration que vous apporterez à l'avenir. La dernière chose qu'il fait, c'est si c'est à un moment donné et que vous essayez de réduire la quantité, il suffit de retirer cet article du panier. S'il n'y a pas d'articles dans le panier, la table entière disparaîtra. C'est donc ce que nous construisons. Je pourrais laisser cet onglet ouvert sur le côté, retourner ici et nous mettre au travail. En fait, une chose de plus avant de commencer là-dessus, je veux vraiment comment allons-nous diviser cela en composants Web. Vous pouvez voir ici que nous avons chacun de ces produits ici et la même fonctionnalité existe sur tous. Si je clique sur le bouton Ajouter au panier, il ajoutera ce produit particulier au panier, de sorte que chacun de ces produits sera son propre composant Web. Ensuite, comme vous pouvez le voir, si je me rafraîchis ici, cliquez sur « Ajouter au panier », nous ajoutons cette autre section ici, qui est notre liste des articles du panier, le tableau des articles du panier. Ce sera également une composante. Enfin, dans ce composant de table des articles du panier, nous avons un autre composant qui est notre sélecteur d'entrée de quantité ici. Donc chaque fois que je clique plus ou moins, nous allons définir une quantité spécifique ici, réglons la valeur zéro. Voyez ce qui se passe, il disparaît. Cela va également être un élément. Commençons par le composant produit. Allons ici, puis revenons à notre éditeur de code. Dans notre dossier js, créons le fichier pour ce composant. Je vais l'appeler product.js. Commençons par la chaudière. Je vais appeler cet élément de produit de classe. Bien sûr, nous allons étendre l' élément HTML comme nous l'avons vu tout au long de cette classe. Ensuite, avant d'écrire un code à l'intérieur, je vais l' exporter immédiatement. Comme nous utilisons des modules ES avec chaque composant contenu dans son propre fichier JavaScript, je vais utiliser l'export par défaut puis écrire le nom de la classe après cela. Appuyez sur « Enter » là-dessus, puis passer à mon fichier index.js, je vais mettre mon importation au début de l' élément file products, puis directement à partir du chemin d'accès à ce fichier, qui étaient déjà dans le dossier JavaScript, donc ce sera .product.js. Ensuite, nous devons mettre ici une méthode définie, évidemment, des éléments personnalisés définissent. Je vais juste appeler ces éléments de produit comme premier argument, puis introduire cette classe d'éléments de produit. Je dois également importer ce fichier index.js en HTML. N'oublions pas cela. Script src= » js/index.js " , puis sans oublier ce type d'attribut du module. Cliquez sur « Enregistrer » là-dessus, rafraîchissez-le ici et voyez s'il y a des erreurs JavaScript qui n'existent pas. Parfait. Revenons en arrière. Au lieu de ces quatre divs, ce que je veux faire est de faire quatre éléments de produit. Appuyez sur « Sauvegarder » là-dessus et revenons ici. Comme d'habitude, je vais ajouter la méthode constructeur, puis exécuter super. Nous devons maintenant réfléchir à la façon dont nous voulons construire notre composant Web personnalisé ici. Si je regarde le code ici, nous allons introduire ce composant Web quatre fois différentes. Je ne sais pas si je veux écrire mon code HTML intérieur à l'intérieur de chacun d' eux parce que ça va être assez répétitif. Ce que je pourrais faire, c'est que je pourrais placer la structure HTML dans la définition de classe de composant Web ici. De cette façon, il en va de même pour chaque composant Web, ce que nous voulons et qui gardera notre code propre. Ce que je vais faire, c'est que je vais écrire ce code HTML interne. Cette structure est basée sur le CSS que j'ai déjà configuré. Il profite des classes déjà présentes dans le CSS. Je vais créer une div avec la classe de conteneur d'images. Fermez cela, puis à l'intérieur, je vais prendre l'image avec une classe d'image de produit. Ensuite, je vais mettre dans le SRC que dès que nous arriverons ici, nous devrions commencer à penser à nous-mêmes, cela doit être une valeur dynamique. S'il s'agit d'une valeur dynamique, nous ne pouvons pas vraiment définir explicitement quelque chose ici, car l'image du produit sera la même pour chaque produit. De toute évidence, la structure de chaque élément produit sera la même, mais le produit va changer, et donc l'image du produit. Par conséquent, le titre et l'ID du produit vont tous changer. Maintenant, nous allons en arriver à chacun d'eux au fur et à mesure. Mais pour commencer ce que je veux faire, c'est créer un attribut personnalisé au moins pour l'image. De cette façon, nous pouvons transmettre l'image dans chacun de ces composants Web. Nous l'avons déjà vu dans la classe lorsque nous avons examiné les attributs personnalisés, nous pouvons maintenant l'utiliser dans la pratique. Ce que je vais faire, c'est mettre un attribut image et jetons un coup d'œil à l'intérieur de notre dossier ici. Nous faisons cela le chemin d'accès à l' image, image/coke-zero.jpg. Copions cela ici et ici, et nous allons le mettre à jour. Le second sera l'huile de chanvre. La prochaine sera la crème pour le corps au toucher magique , puis la dernière sera pâte de curry rouge. Cliquez sur « Enregistrer » là-dessus. Ensuite, ce que nous pouvons faire, c'est passer à notre composant Web ici. Nous pouvons définir l'image sur les composants Web. Nous définissons une variable attachée à ce composant Web comme nous l'avons fait auparavant, obtenir un attribut et nous allons obtenir la valeur de cet attribut d'image. Ensuite, étant donné que nous avons cette valeur, nous pouvons ensuite entrer ici et l'insérer ici même dans ce SRC. Je vais cliquer sur « Enregistrer » là-dessus, me rafraîchir ici et voyons ce que nous avons. Ils vont consoler, pas d'erreurs. Mais vous pouvez voir qu'il ne se présente pas non plus. Je pense que c'est à cause d'une erreur stupide. Oui, c'est une faute de frappe idiot. Doit être un élément produit et non des éléments de produit. Il suffit de passer par là et de se débarrasser de ces S. Cliquez sur « Enregistrer » là-dessus, puis si nous nous rafraîchissons ici, nous n'avons même pas besoin de rafraîchir car vous pouvez le voir fonctionner pour nous. Voyons si nous pouvons toujours voir les choses. Oui. Mettons cela en bas et vous verrez que nous avons notre gamme de quatre images de produits. Nous avons la même structure pour chaque élément produit que nous stockons ici, mais nous passons par la valeur dynamique de URL de l'image , puis nous la mettons dans notre structure de modèle. ici. Mais bien sûr, comme je l'ai déjà mentionné, l'URL de l'image n'est pas le seul contenu dynamique que nous devons transmettre dans cet élément produit. Nous avons besoin de la barre oblique de titre du nom du produit. Nous avons besoin de son prix et de sa pièce d'identité. Créons également quelques attributs pour cela. Continuons avec le suivant dans la hiérarchie visuelle. Continuons avec le nom. Je vais faire exactement le même format que celui que j'ai fait ici. Créez une variable appelée this.name, puis obtenez la valeur du nom de l'attribut. De toute évidence, cela n'a pas encore été créé. Je vais entrer ici, je vais fermer ça pour que nous puissions mieux le voir, puis je vais créer un attribut de nom pour tous ces éléments de produits. Alors celui-ci va être coke zéro. Je vais mettre entre parenthèses, peut. Ensuite, ici l'huile de graines de chanvre et ici je vais juste appeler ça de la crème pour le corps , puis ici de la pâte de curry rouge. Cliquez sur « Enregistrer » là-dessus. Allons ici et nous devons utiliser ce nom quelque part dans notre code. Je peux descendre ici et ensuite je peux aller comme nous l'avons fait avec l'image, créer un h2 à l'intérieur de ce h2. Je peux glisser dans ce .name. Rafraîchissant ici, vous pouvez maintenant voir le nom de chaque produit sous l'image du produit. Il y a un peu de problèmes CSS ici et c'est parce qu'il n'est pas censé se trouver dans le conteneur d'images. Laissez-moi régler ça. Il est censé être en dehors de cette div. J'ai cliqué sur « Enregistrer » sur cette actualisation ici , alors vous pouvez voir que nous n' avons plus ce problème. Sucré. Cela constitue notre hiérarchie visuelle. Mais l'autre chose que nous devons faire est stocker certaines données dans cet élément produit lorsque nous cliquons sur « Ajouter au panier » car en fonction du bouton ou de l'élément sur lequel nous cliquons sur « Ajouter au panier » on va avoir une valeur différente. La façon dont je vais le faire est au lieu de l'ajouter au code HTML interne je vais créer un élément, puis l' ajouter au DOM. La raison pour laquelle je vais le faire de cette façon est que je puisse y attacher un écouteur d'événements avant de l'ajouter au DOM. Ce que je vais faire, c'est créer un élément pour le bouton. Ce sera juste bouton et bien sûr, je dois le stocker quelque part, donc je vais juste le stocker dans le bouton appelé constant. Je vais définir le code HTML interne du bouton pour l' ajouter au panier , puis je vais ajouter un écouteur d'événements. En fait, commentons cela pour l'instant. Retournez-y dans une seconde. Je vais juste ajouter ça pour ajouter le document en premier. Cliquez sur « Enregistrer » là-dessus, rafraîchissez-vous ici et vous pouvez voir que nous avons nos boutons Ajouter au panier et leur style, comme dans notre exemple à cause du CSS que nous avons déjà obtenu. Maintenant, pour que cela fonctionne, nous devons être en mesure de connaître le nom et l'identifiant du produit que nous ajoutons au panier ? Parce que cela ne fait actuellement rien, et c'est là que nous allons transmettre l'identifiant mais nous devons également savoir quel est le prix de chaque produit, afin que nous puissions l'ajouter à notre tableau de panier. Nous allons faire passer la carte d'identité et le prix. Créons également des attributs pour eux. Je vais commencer à l'intérieur du composant, et je dis que ce .id est égal à ce .getAttribute, pas les attributs d'animations, id, puis ce .price, ce prix .gettribute. Ensuite, je vais passer en revue les éléments ici. Ajoutons un identifiant pour chacun d'eux. Le premier, nous allons faire 1, 2, 3 et 4. n'y a que des produits complets, nous n'avons donc besoin que de simples identifiants. Ensuite, je vais ajouter le prix. Nous allons garder les choses simples et faire 10$ à chacun d'eux. Nous allons simplement les transmettre sous forme de chiffres et les convertir en entiers ou floats ultérieurement. revenant maintenant à notre composant Web, En revenant maintenant à notre composant Web, c'est la partie où nous construisons certaines fonctionnalités et nous nous compliquons un peu plus. Comme vous pouvez le voir ici, j'ai un EventListener commenté. Ce que je veux faire avant de construire cela, c'est créer la méthode que cet EventListener va déclencher. En dehors du constructeur, créons notre propre méthode appelée AddToCart. Dans AddToCart, nous allons construire un objet avec tous les attributs que nous voulons ajouter à un objet article de panier. Je vais créer un objet const item et vous devriez voir ce que je veux dire par là très prochainement. Je vais bien sûr ajouter une clé d'identifiant, et je vais juste prendre l'identifiant qui est stocké dans ce composant Web. Je vais fermer ça pour que vous puissiez en voir plus. Ensuite, je vais prendre le nom et cela sera égal au nom défini dans le composant Web. La quantité sera toujours égale à 1, car le bouton Ajouter au panier va simplement en ajouter une par défaut. Vous pouvez ajouter un sélecteur de quantité à cet élément ultérieurement si vous souhaitez à titre d'amélioration. Mais pour l'instant, chaque fois que vous cliquez sur « Ajouter au panier », il suffit d'en ajouter un. Je vais fixer ça au numéro 1, et le prix sera ce prix. Jetons un coup d'œil. Lorsque nous exécutons cela, tout ce que je vais faire pour commencer c'est d'exécuter le journal de la console, puis ItemObject, l'objet que nous venons de créer. Ici, dans AddEventListener, je vais évidemment chercher le clic « Event », puis je vais exécuter cette méthode AddToCart, puis je vais lier cela, sorte que lorsque je serai ici dans ce chaque fois que je fais référence à cela, je vais référencer le composant Web, pas l'événement. Cliquez sur « Enregistrer » là-dessus, rafraîchissez-vous ici. Ouvrons notre console, et si je clique sur « Ajouter au panier » sur l'huile de graines de chanvre, vous pouvez voir qu'elle envoie les données. Nous pouvons voir que l'ID du produit est 2, le nom est Huile de graines de chanvre. Nous en ajoutons un et le prix de chacun est de 10. Si je le fais sur le Coke Zero Can, je reçois un peu de données différentes. Si je le fais sur la crème pour le corps et la pâte de curry rouge, vous pouvez voir que je reçois un objet différent à chaque fois. confirme que nous envoyons par un objet toutes les informations dont nous avons besoin. Ce que nous devons maintenant faire, c'est écrire un peu de logique pour l'ajouter à ce tableau d'articles dans notre objet panier. Allons ici et je vais vous montrer comment nous pouvons accéder à cet objet de panier. Comme il se trouve sur l'objet window, nous pouvons taper window.cart pour y jeter un coup d'œil ou nous pouvons simplement écrire un panier parce que nous sommes déjà dans le contexte de fenêtre. Comme vous pouvez le constater, quelle que soit la façon dont nous le faisons, nous pouvons constater que nous avons un objet avec un tableau d'éléments vide. Ce que nous voulons voir lorsque nous le produisons à nouveau, après avoir ajouté au panier, c'est que nous avons un nouvel article dans ce tableau d'articles. Je vais éclaircir ça. Allons-y et faisons-nous ça maintenant. Je commenterai ce journal de la console, et ce que nous devons faire dans la plupart des cas, c'est ajouter cet objet simplement au tableau de cet élément. Nous allons faire window.cart.items.push pour ajouter cet objet item au tableau d'éléments, puis nous allons insérer l'objet item comme argument. Nous allons cliquer sur « Enregistrer » là-dessus. Rafraîchissez-vous ici. Si je tape dans le panier maintenant, vous pouvez voir que nous avons un tableau d' articles vide. Obtenons un peu plus spécifiques et disons les articles du panier en particulier. Nous avons un tableau vide qui est clair à voir. Permettez-moi de le faire encore une fois. Nous avons le précédent, alors si je clique sur « Ajouter au panier » et que nous tapons dans le panier. Articles maintenant, vous verrez que nous avons un objet dans notre tableau, et si je regarde à l'intérieur, c'est notre huile de graines de chanvre avec le quantité d'un. Si je clique sur « Ajouter au panier » sur la crème pour le corps et que je passe au panier. items, vous devriez maintenant voir que nous avons deux articles dans notre gamme avec chacun de ces produits. Nous avons maintenant un problème que je ne sais pas si vous y avez pensé ou non, mais vous découvrirez bientôt qu'il s'agit d'un problème. Si j'ajoute un autre produit que celui que nous avons déjà dans notre panier, disons encore une fois de l'huile de graines de chanvre, puis je vais ici et j'y vais. Articles, vous verrez que nous avons trois articles dans le panier, et nous avons de l'huile de graines de chanvre deux fois, mais avec une quantité chacune. Nous voulons voir un article dans le tableau pour l'huile de graines de chanvre, mais nous voulons que ce chiffre soit deux. Nous devons écrire un peu de logique supplémentaire pour cela. Revenons ici et utilisons la méthode find dans JavaScript pour déterminer si l'élément existe déjà dans le tableau. Je vais créer un article constant dans le panier. Ensuite, nous allons chercher window.cart.items, puis nous allons utiliser la méthode find passant par l'élément. Si l'ID d'élément est égal à l'ID de l'objet article , nous avons trouvé une correspondance, et il s'agira de l'objet. Avant d'écrire quoi que ce soit d'autre, faisons simplement console.log item_in_cart. Elle doit être soit indéfinie, soit une autre valeur nulle s'il peut réellement trouver quelque chose, mais s'il trouve quelque chose, nous obtiendrons l'objet lui-même. Rafraîchissant ici. Cliquez sur « Ajouter au panier » et cela apparaîtra comme non défini. Mais si nous cliquons à nouveau sur « Ajouter au panier », vous verrez que nous avons déjà ce produit existant dans le panier. Si vous allez dans le panier, vous pouvez voir que nous avons le même article deux fois dans le panier. Nous devons régler ce problème. Ce que nous allons faire, c'est exécuter si item_in_cart, alors tout ce que nous voulons faire est de prendre cet article déjà dans le panier et augmenter sa quantité d'une seule. Mais s'il n'est pas dans le panier, donc s'il n'est pas défini, par exemple, nous allons exécuter ce code ici pour pousser cet article vers le panier. Sauvegardons cela et voyons si cela résout notre problème ici. Je vais ajouter de l'huile de graines de chanvre, je vais ajouter de la crème pour le corps. Jetons un coup d'œil à nos articles de panier maintenant. Nous avons une huile de graines de chanvre et une crème pour le corps. Si j'ajoute à nouveau l'un des mêmes produits, l'huile de graines de chanvre, puis regardons le panier. articles, vous pouvez voir que nous n'avons que deux articles dans notre gamme maintenant, et si je clique dessus, vous vous pouvez voir en cliquant sur « Ajouter au panier » sur l'huile de graines de chanvre, il n'a pas créé de nouvel article dans notre gamme, mais il suffit d'augmenter la quantité de cet article existant, ce qui est exactement ce que nous voulons. En revenant ici, c'est essentiellement toutes les fonctionnalités dont nous avons besoin, particulier à partir de l'élément produit. Pour résumer à ce stade, avant de passer à autre chose, nous avons créé un composant Web d' élément produit. Nous avons passé quatre paramètres. À l'intérieur du composant Web lui-même, nous avons une structure standard commune à tous les composants Web de l' élément produit et une fonctionnalité commune d'AddToCart, que nous pouvons voir ici. Je vais supprimer ce journal de console parce que tout fonctionne, et maintenant vous pouvez le voir, même si nous n'avons pas encore de cart.items visuellement représentés sur la page, nous sommes en mesure d'ajouter des éléments à notre tableau d'articles de panier. L'objet panier ici est essentiellement notre objet d'état, et ce que nous allons faire, c'est utiliser cet objet panier pour créer notre tableau d'articles de panier dans la vidéo suivante. Comme promis, je vais valider ce code et le jeter. J'aurais probablement dû mettre ça dans l'ignorance. Désactivez, allez ici, jetez-le, puis je validerai nos modifications dans jetez-le, puis index.html, index.js, puis, bien sûr, la création de product.js. Je vais mettre en scène toutes ces modifications et j'ajouterai le message de validation, créerai un composant Web d'élément produit. balayage. Je vais frapper commit là-dessus, encore une fois, rejeter ces changements. Je vais diviser ça en une autre vidéo. Dans la vidéo suivante, nous examinerons le composant des articles du panier. 11. Composants Web en pratique Partie 2: Très bien, les gars. Dans la dernière vidéo, nous avons configuré un fichier index.js, qui contient nos objets coupés avec le tableau d'éléments, et nous avons appris comment remplir ce tableau d'éléments via cet élément produit que nous avons créé dans la vidéo précédente, et évidemment, cela comporte également une composante visuelle. Nous avons chacun de ces éléments produits avec ces boutons Ajouter au panier. Si je clique sur l'un de ces boutons Ajouter au panier, il mettra à jour notre panier. Articles que nous avons ici, mais qui ne sont pas encore visuellement représentés à l'écran. C'est ce que nous allons faire dans cette vidéo. Nous allons créer un nouveau composant appelé articles du panier. Faisons ça maintenant. Allons dans notre dossier JS, créons un nouveau fichier appelé cart-items.js. Allons chercher notre code de plaque de chaudière de composants ici. Les articles du panier sont ce que je vais appeler, et nous allons étendre la classe d'éléments HTML. On y va. Je suis tenté ici juste d'écrire des éléments personnalisés définis, mais n'oubliez pas que nous utilisons des modules ES. Au lieu de cela, ce que je vais faire c'est exporter les articles du panier, puis je vais faire ma méthode définie ici dans le fichier d'index. Définissez les articles du panier, les articles du panier ici. Voici, le code Visual Studio sait ce que j' essaie d'importer et ajoute automatiquement l' instruction d'entrée ici. Mais si votre éditeur de code ne le fait pas pour quelque raison que ce soit, vous pouvez simplement écrire ce code. C'est le même format que celui que nous avions auparavant. Sucré. Afin de placer ce composant d'articles de panier sur un document, je vais simplement me rendre ici à l'intérieur de notre conteneur, donc tout est contenu, je vais ajouter à notre composant Web personnalisé des articles du panier. Il va automatiquement y placer la balise de fermeture. Maintenant, si je rafraîchis ma page ici et qu'il n'y a pas d'erreur, je peux dire de manière fiable que nous avons sur notre document ici. Si je vais ici, vous pouvez voir que nous avons notre composant Web d'articles de panier vides ici. Ajoutons-y des trucs. Fermons les produits pour le moment. Passons à l'intérieur de notre définition de classe ici. Évidemment, comme toujours, nous allons avoir besoin de notre constructeur, et à l'intérieur de notre constructeur, nous mettrons notre super méthode. Maintenant, contrairement à tous les autres composants que nous avons créés dans le passé, je vais en fait le laisser là pour la méthode constructeur. Je vais mettre tout notre rendu dans une autre fonction appelée rendu. Pourquoi est-ce que je ferais ça ? La raison en est que lorsque nous ajoutons un nouveau produit au panier via cet élément produit, nous devrons effectuer un rendu pour la première fois ou restituer le tableau des articles de notre panier. Il sera pratique d' avoir notre fonction de rendu ici pour que nous puissions restituer le rendu chaque fois que nous en avons besoin. Tout le code à l'intérieur de cette fonction de rendu ne sera pas exécuté lorsque le composant des articles du panier est inclus sur la page, comme nous l'avons fait ici, s' exécutera une fois que nous lui demanderons spécifiquement de le rendre. Ce sera beaucoup de code et je ne vais pas approfondir tout cela, mais je vais vous expliquer au fur et à mesure. Ce que je vais faire, c'est créer un point de départ pour ce composant d'articles de panier. Je vais définir le HTML interne sur rien lorsque nous exécutons le rendu. Maintenant, l'intention est que lorsque nous lançons le rendu à l'avenir, nous devons effacer le contenu que nous avions auparavant, sinon nous pourrions avoir une partie de l'ancien code HTML interne à l'intérieur notre composant lorsque nous doivent restituer le panier. Ensuite, ce que je vais faire, c'est construire un code HTML à l'aide de document create, la deuxième méthode que nous avons vue dans la vidéo précédente sur trois façons de créer du HTML dans notre composant Web. J'ai oublié de mettre le nom de la variable ici. Je vais appeler ça un conteneur de table. Ensuite, je vais ajouter la classe de conteneur de table à cette div de conteneur de table, puis le deuxième élément que je vais créer s'appelle table. Voici notre tableau des articles de panier. Pour créer un élément de table, attribuez-le à la constante de table ici. Ensuite, ce que nous allons faire, c'est que nous allons parcourir tous les articles du panier. Je vais courir quatre chacun sur ces points. Je vais avoir deux arguments ici, un pour l'élément lui-même afin que ce soit l'élément lui-même, puis le second sera l'index. Permettez-moi d'y revenir dans une seconde avant d'entrer dans ce code profond. Ce que je vais faire, c'est table_container. Ce que je veux faire, c'est ajouter notre table à ce conteneur de table, puis nous allons ajouter le conteneur de table à notre composant Web. Il se passe un peu ici, mais supportez avec moi. Ce que nous faisons, c'est que nous avons créé en gros si je sauvegarde puis que je rafraîchis ici. Maintenant, ce n'est pas vraiment le rendu car, rappelez-vous, c'est dans la méthode de rendu, n'est pas sur le constructeur comme nous l'avions fait auparavant. Ce que nous allons devoir faire, c'est d'exécuter code pour trouver le composant Web que nous recherchons, c' est-à-dire des éléments de panier, puis d'exécuter la méthode de rendu là-dessus. Si je retourne ici maintenant, vous pouvez voir qu'à l'intérieur de nos articles de panier, nous allons avoir une div avec la classe de conteneur de table et à l'intérieur, nous aurons la table. C'est ce que nous faisons ici, nous sommes en train de créer cette structure HTML. Maintenant, ce que nous allons faire, c'est pour chaque élément du tableau que nous allons ajouter. Je vais saisir le code HTML interne, et je vais utiliser le plus égal pour ajouter à notre chaîne ici, ouvrons cela, et je vais ajouter à la suite pour chaque article de panier de notre tableau cart.items. Voyons cela en action. Si je clique sur « Enregistrer » et que je vais ici, et que nous relançons cette méthode de rendu, retournez ici, trouvez notre conteneur de table d'articles de panier et à l'intérieur de notre table, vous verrez qu'il n'y a pas encore de lignes dans le tableau, mais c'est parce que nous n'avons rien dans notre tableau de cart.items. Si je vais faire du panier, il n'y a rien là-dedans. Si je devais ajouter, disons, deux éléments à notre tableau, jetons un coup d'œil maintenant, cart.items. Nous avons définitivement deux éléments dans notre gamme maintenant. Si je devais exécuter le rendu sur les articles du panier, retourner dans les éléments ici, aller à l'intérieur de notre table, vous pouvez voir que nous avons deux rangées. Maintenant, évidemment, nous devons remplir chacune de ces lignes avec les données de chacun de ces articles du panier, et c'est ce que nous allons faire maintenant. Encore une fois, il va y avoir un peu de code ici, mais supportez avec moi. Nous avons besoin de trois cellules de table. Dans la première cellule du tableau, nous allons mettre le nom de l'élément. Bien sûr, nous avons accès à chaque élément au fur et à mesure que nous le parcourons, car c'est ce que nous avons défini ici. Je vais dire le nom de l'article. Ensuite, ici, nous allons avoir une quantité entrée. Nous y reviendrons un peu plus tard. Dans celui-ci, nous allons avoir un signe $ et ensuite nous aurons le prix du point de notre article. Nous allons régler ce problème dans une seconde car il doit s' agir du prix de ligne. Donc, si la quantité est supérieure à une, nous devons la mettre à jour. Ensuite, ce que je vais faire, c'est juste un peu de formatage. Le premier TD. Je veux que le texte soit aligné vers la gauche, mais c'est par défaut, donc je ne vais rien changer. Dans le second, je vais aligner le texte au centre. Ensuite, le dernier que je vais aligner le texte sur la droite. Maintenant, si je clique sur « Enregistrer » là-dessus, je pense qu'il se recharge automatiquement à chaud de toute façon. J'ai cliqué sur « Ajouter au panier » sur deux de ces boutons. Ensuite, j'exécute la fonction de rendu. Vous pouvez voir ici que nous avons les débuts de notre table. Nous avons le nom du produit en cours de réduction et le prix. Mais bien sûr, si je frappe à nouveau celui-ci, nous n'avons que deux éléments dans le tableau. Il ne met pas à jour la quantité ni le prix de la ligne. Donc, avant de créer la quantité sélectionnée ici, je peux simplement ajouter la quantité d'article. Pendant que nous sommes ici, fixons ce prix, le prix de la ligne. Appelons simplement le prix de la ligne. Cela équivaudra à faire en sorte que nous mettions ça dans la boucle. Le prix de la ligne sera égal au temps de prix point de l'article en fonction de la quantité de l'article. Je vais cliquer sur « Enregistrer » là-dessus. Rafraîchissez-vous ici, ajoutons quelques articles au panier. Je viens d'appuyer sur « Ajouter au panier » sur l'huile de graines de chanvre, puis sur la crème pour le corps, puis de revenir à l'huile de graines de chanvre, donc nous devrions voir deux articles dans notre gamme. Si je vais ici, vous pouvez voir que notre sélection a été enregistrée. Si nous exécutons le rendu, nous pouvons voir qu'il apparaît dans notre table ici. Bien sûr, chaque fois que nous devons exécuter la fonction de rendu nous-mêmes, nous ne voulons évidemment pas le faire. Nous ne nous attendons pas à ce que l'utilisateur aille dans sa console et sache quelle commande exécuter. Configurons donc cela pour qu'il fonctionne dans notre produit dot js. Une fois que nous avons ajouté au panier, je vais donc ajouter une ligne. Nous pouvons littéralement prendre cette ligne et la placer là. Cliquez sur « Enregistrer » là-dessus, rafraîchissez-vous ici. Chaque fois que nous cliquons sur « Ajouter au panier », il restitue le panier. Cela m'agace un peu. Je souhaite stocker ce composant Web dans ses propres variables, je vais donc créer une variable pour cela. Je vais aller ici et faire ce panier à points égal, puis prendre cet élément du DOM. J'ai l'impression que c'est juste un peu plus propre. Encore une fois, je n'ai pas à le faire de cette façon, mais je l'aime un peu mieux. La prochaine partie que je vais faire avant passer au codage la quantité entrée consiste à créer le pied de page du tableau. Donc, si je le regarde maintenant, nous n'avons pas vraiment le total et pour cela, nous créerons un pied de table. Je vais juste enlever ça là bas. Allons dans les articles du panier dot js. Nous y sommes déjà. Ensuite, après ce code, je vais créer un nouvel élément appelé document de pied de page crée un élément. Cela va être une div. Ensuite, je vais aussi devoir déterminer le total du panier. Je vais donc devoir utiliser un peu une méthode compliquée ici, des méthode compliquée ici, points de panier de fenêtre, puis exécuter la méthode de réduction dessus pour tout comptaliser. Donc, si cela vous perturbe, étudiez simplement la méthode réduite, mais c'est un moyen pour nous d' ajouter toutes les valeurs pour créer un total. Ce que je vais faire, c'est parce que les prix vont passer sous forme de chaînes, parce que nous les avons placés sous forme chaîne dans notre HTML ici, nous avons juste besoin de les passer en entiers. Maintenant, nous voudrions peut-être les transmettre en floats si nous avions des valeurs décimales, mais pour ce projet, nous n'aurons aucune valeur décimale. Le montant le plus bas sera un et il va augmenter en un, donc rien ne sera de 2,75$ ou quoi que ce soit de ce genre. Nous allons juste rester simple. Il va coûter 10 ou 20$. En fait, tout dans ce projet va coûter 10$, donc nous gardons les choses très simples. Mais pour que vous sachiez que vous devrez peut-être changer cela. Mais pour nos besoins, tout va être un entier, donc nous pouvons faire pars int. Permettez-moi d'ouvrir ça un peu plus pour vous. Ensuite, dans le pars int, nous allons prendre les temps de prix totaux d'ajout d'article par la quantité de points de l'article, qui est bien sûr le prix de la ligne, que nous avons calculé plus tôt ici. Dans le deuxième paramètre, nous allons passer à zéro. Donc, ce que nous pouvons faire, c'est définir le code HTML interne du pied de page sur, ajoutons du code HTML ici. Mettons une autre table, qui va s' aligner sur la première table. Je vais donner à ça une classe de pied de page de panier. Ensuite, nous allons mettre dans une nouvelle rangée. Ensuite, ici, nous allons mettre dans une cellule, qui aura juste le mot total. Ensuite, nous mettrons dans une autre cellule pour le total lui-même. Je vais mettre dans le style du texte, aligner. Il s'aligne sur le prix de la ligne ici. Ici, nous pouvons mettre notre valeur dynamique. Je vais donc d'abord mettre un signe $ réel, puis $ signe des accolades à mettre dans notre panier total, que nous venons de calculer. Puis ici, ce point ajoute le pied de page enfant. Je vais cliquer sur « Enregistrer » là-dessus , puis nous nous rafraîchirons ici. Si je clique sur « Ajouter au panier », vous pouvez voir que notre total s'affiche ici. Je ne suis pas encore en mesure de réduire les quantités, mais vous pouvez voir que nous pouvons au moins ajouter des articles au panier. Notre tableau des articles du panier est mis à jour, avec le total de sorte que nous couvre à peu près les articles du panier, les composants de la table ici. Le dernier composant sera le composant d'entrée de quantité, qui sera imbriqué à l'intérieur du composant curt items. Je vais diviser cela en sa propre vidéo, alors nous allons le couvrir dans la prochaine vidéo. Nous procéderons ensuite à nos dernières modifications pour terminer ce projet. Je vais vous attraper dans le prochain. 12. Composants Web en pratique Partie 3: Dans cette troisième vidéo, et je l'espère, la dernière vidéo cette série dans laquelle nous construisons cette fonctionnalité de panier d'achat personnalisée, je vais coder la quantité entrée. Une chose que j'ai oublié de faire avant de fermer la dernière vidéo était de valider ce code pour vous, donc je vais le faire maintenant. Je vais juste jeter à nouveau ce magasin DS et jeter un coup d'œil aux changements ici. J'aime toujours le faire avant de m'engager. Je vais mettre en scène tous ces éléments et le message de validation va créer des éléments coupés. C'est engagé. Jetez à nouveau celui-là. Permettez-moi de fermer certains d'entre eux. Je vais probablement devoir les ouvrir à nouveau, mais il se passe trop de choses ici. Allons dans notre dossier js ici et créons le composant d'entrée de quantité. Encore une fois, en commençant par le code de la plaque de cuisson, vous devriez être familiarisé avec cela maintenant. La quantité entrée étend les éléments HTML. Ensuite, nous allons l'exporter immédiatement. Exportez par défaut, quantité entrée, puis accédez au fichier index.js. Je vais d'abord écrire ma méthode de définition d' éléments personnalisés car je sais qu'elle va l' importer automatiquement. Appelons cela avec le nom étendu quantity-input. Magic VS Code a mis cette instruction d'entrée pour nous afin que je puisse le fermer. Pour cet élément particulier, ce que je vais faire, c'est tout construire dans le constructeur, comme nous l'avons vu précédemment dans cette classe. Il va y avoir un peu de code ici et si vous vous demandez où j'ai eu toutes les idées pour cela, j'ai pris le thème de l'aube de Shopify comme source d'inspiration. Une grande partie de ce code est inspirée du même code dans ce composant dans le thème Shopify Dawn. Si vous voulez faire référence à cela par rapport à cela, ou vous demandez d'où vient mon processus de pensée, vous pouvez jeter un coup d' œil à ce thème. Comme d'habitude, nous allons mettre la super méthode ici et ensuite ce que je vais faire, c'est écrire tout le HTML à l'intérieur du cart-items.js ici. défiler ici, tout ce que nous faisons jusqu'ici, c'est simplement écrire la quantité d'article telle qu'elle se trouve dans cette deuxième colonne ici, mais bien sûr, nous ne pouvons pas la mettre à jour, il n'y a pas d'entrée. Remplacons cela par notre nouvel élément personnalisé, la quantité entrée pour la balise de fermeture. Je vais créer tout le code HTML interne dans les balises. Nous ne l'avons évidemment pas fait pour l'élément produit ici, car nous ne voulions pas avoir à l' écrire quatre fois différentes. Ici, dans le cas de la quantité entrée, nous allons l' écrire chaque fois qu' il y a une ligne dans le tableau, et chaque ligne sera pratiquement identique. La seule différence réside les données transmises dans l'élément. Nous pouvons le placer ici et ce sera toujours le code DRY. Ici, je vais juste mettre une classe de quantité. Si vous me voyez écrire des cours comme celui-ci, c'est lié au CSS, alors ne vous inquiétez pas trop pour les classes. Créons ensuite nos deux boutons, notre bouton moins, notre entrée elle-même. De toute évidence, il y a beaucoup plus de choses à faire ici, mais je vais commencer par la structure de base. Nous avons un bouton de saisie. Jetons juste un coup d'œil à ce que cela ressemble. Vous pouvez y voir la structure de base, mais bien sûr, nous allons devoir placer le moins entre ces balises de boutons , puis le plus entre ces balises de boutons. Pour les attributs, nous allons lui donner une classe, nous allons la mettre sur les deux boutons ici, classe de quantity__button. Je vais fermer ça pour que nous puissions mieux voir. Bouton de type. Nous pouvons mettre cela sur les deux, tapez le bouton, puis le nom sera basé sur n'importe où c'est moins ou plus. Je vais m'échapper de ça et ensuite je mettrai moins dans le premier, puis plus dans le second. Cliquez sur « Enregistrer » là-dessus et voyons quoi cela ressemble jusqu'à présent. On dirait que nous avons un succès « Enregistrer » là-dessus. Cela ne devrait pas être aussi pertinent de toute façon. Cliquez sur « Ajouter au panier » et comme vous pouvez le constater maintenant, nos styles pour les avantages et les inconvénients. Nous devons ajouter du code ici à l'intérieur de nos balises d'entrée. Ajoutons quelques attributs. Nous voulons que le type soit des nombres afin que les gens utilisent le panier insérer du texte ici autre que des chiffres. La valeur sera égale à l'item .quantity. Le minimum sera zéro. Nous ne voulons pas de valeurs négatives. Nous allons lui donner un ID et l'ID va commencer par la quantité, puis nous allons mettre un tiret puis utiliser l'index pour différencier chacune des entrées. Ensuite, je vais également mettre un index de données ici, ce qui va être la même chose. Nous allons utiliser le I comme index de données. Je vais cliquer sur « Enregistrer » là-dessus. Rafraîchissez-vous ici, cliquez sur « Ajouter au panier » et comme vous pouvez le voir, cela semble fonctionner. La seule chose qui ne fonctionne pas, c'est nous ne pouvons pas ajouter et soustraire. Si je change ça par deux, ça ne changera pas les deux. Si je change cela à zéro, cela ne change pas réellement le zéro. C'est là que nous devons commencer à coder notre quantité entrée ici à l'intérieur de sa définition de classe. Mettons en place certaines choses dans notre constructeur. Je veux d'abord intégrer l' entrée dans sa propre variable. Nous allons le trouver dans le DOM, dans notre composant Web. Ensuite, ce que je vais faire, c'est créer un OnButtonClick, qui sera le rappel de notre EventListener. Je vais ajouter à l'événement le seul et unique paramètre. Je vais empêcher tout comportement par défaut, puis je vais écrire une logique ici pour que cela fonctionne. La première chose que je veux faire est de saisir la valeur précédente, la valeur avant de la modifier, et cela sera juste égal à la valeur d'entrée au moment de cette exécution. This.input représente l'élément d'entrée lui-même, et nous pouvons bien sûr saisir la valeur de n'importe quelle entrée en regardant simplement sa propriété de valeur de point. Il va saisir la valeur avant de la modifier , puis nous allons jeter un coup d'œil à l'événement et examiner les cibles de l'événement. La cible de l'événement dans cette instance sera le bouton sur lequel nous cliquons. Ensuite, nous allons examiner le nom de la cible de l'événement, c'est-à-dire le bouton et si c'est plus, nous utilisons simplement un opérateur ternaire ici, pour augmenter pour augmenter le nombre d' étapes sur l'entrée. Step-up n'est qu'une méthode qui nous permet d'augmenter la valeur de cette entrée d'une seule. Si ce n'est pas plus, ce qui signifie que c'est certainement moins parce qu' il n'y a que deux options, nous allons passer à la place. Maintenant, si je clique sur « Enregistrer » là-dessus, maintenant que nous avons notre gestionnaire d' événements ici, attachons cela à tous les boutons. Pour cela, car il y a plusieurs boutons, nous allons utiliser un QuerySelectorAll pour chaque bouton, qui se trouve aux deux et à la fin, mais nous devons toujours utiliser QuerySelectorAll. Cela va nous donner un tableau, puis nous devons les parcourir en boucle. Pour chaque bouton, nous allons ajouter un EventListener de clic. Si vous cliquez sur le bouton, nous allons exécuter ce gestionnaire d'événements en cliquant sur le bouton. Comme avant, nous allons lier cela de manière à ce que cela représente le composant Web et non l'événement. Retirez ce point-virgule et placez-le là. Si je clique sur « Enregistrer maintenant » et que je me rafraîchis ici, cliquez sur « Ajouter au panier », je peux faire monter et descendre, mais que ne se passe-t-il pas ? En fait, si j'appuie sur moins, ça va baisser. Ce n'est pas très utile, n'est-ce pas ? Je pense que c'est probablement lié à cette faute de frappe. ne s'agit pas d'une comparaison, il s' agit d'une affectation, alors permettez-moi d'en faire une affectation appropriée. Revenons ici, cliquez sur « Ajouter au panier ». Maintenant, si j'appuie vers le bas, ça devrait marcher. Maintenant, le problème est que la valeur à l'intérieur de cette entrée augmente et descend avec ces pressions sur les boutons, ce qui est bien, mais cela ne change pas réellement la valeur de nos données structure. Disons simplement que je mets ça jusqu'à sept, puis allons notre tableau d'articles de panier et regardons à l'intérieur, vous pouvez voir que la quantité est toujours une. Nous pouvons augmenter la quantité en appuyant sur le bouton Ajouter au panier ici et, comme vous pouvez le voir, il est mis à jour à deux maintenant. Ensuite, si je vais dans les articles du panier, je peux aller ici et c'est la quantité 2, mais mettre ça en place ne change rien. Résolvons ça maintenant. La façon dont je vais résoudre ce problème consiste à utiliser un événement personnalisé. Pourquoi est-ce que je vais utiliser un événement personnalisé ici ? Eh bien, je veux déclencher un événement de changement sur la quantité. Ce que je vais faire, c'est que je vais passer par la ligne de l'article que je veux modifier et sa nouvelle quantité vers une méthode, puis cette méthode va mettre à jour cart.items. Maintenant, nous pouvons mettre cette méthode à l'intérieur de la quantité entrée, mais je pense qu'il est plus logique de la mettre dans des articles de panier car elle met littéralement à jour cart.items, l'objet auquel ce composant se rapporte. Je vais le mettre ici avant le rendu. Ce que cette méthode va faire, je vais l'appeler la quantité de mise à jour. Il va prendre un index qui va se rapporter à la ligne ici. Comme vous pouvez le voir ici, nous parcourons une baie et nous stockons sur la quantité, sélectionnez le numéro de la matrice qu'il s'agit. Je peux l'utiliser pour déterminer le numéro de ligne. Ensuite, le deuxième paramètre sera la nouvelle valeur, que je vais appeler valeur comme paramètre. Ensuite, lorsque cela est exécuté avec ces deux paramètres, ce que je vais faire est de rechercher l'article via son index, puis de prendre simplement la quantité de cet article, puis le modifier en quelle que soit la valeur que nous traversons. Ensuite, lorsque cela sera mis à jour, ce que nous allons faire est de restituer la table des articles du panier, car il est évident que nous devons restituer le prix de la ligne et nous devons restituer le total lorsque nous sommes effectuer ces mises à jour, il est donc préférable de restituer la table entière. Je vais cliquer sur « Enregistrer » là-dessus, et ce que je vais faire, c'est faire référence aux articles du panier. Comme nous l'avons vu précédemment avec le produit, lorsque nous référençons des articles du panier, je l'ai mis dans sa propre variable avant d'exécuter la méthode aléatoire dessus. Parce que nous allons exécuter une méthode là-dessus, je veux faire quelque chose de similaire, configurer cela dans le constructeur, donc je vais mettre ça ici. Ensuite, lorsque nous lançons un clic sur le bouton, nous allons évidemment modifier la valeur de la quantité. Maintenant, parce que nous avons attribué ce composant Web à cette variable ici, je peux aller sur ces éléments .cart et exécuter la méthode sur ces composants Web, de sorte que je peux mettre à jour la quantité, et pour cela je il suffit de comprendre ce qu'est l'indice. Je vais aller à cet index de jeu de données d'entrée, donc cela va me permettre d'accéder ici, l'index de données. Il est disponible sur la baie de jeux de données. Je vais m'emparer de cet indice. Ensuite, comme deuxième argument, je vais mettre cette valeur .input.value. Je vais cliquer sur « Enregistrer » là-dessus. Rafraîchissons maintenant ici. Cliquez sur « Ajouter au panier ». Maintenant, comme vous pouvez le constater, mesure que je diminue et augmente, cela à mesure que je diminue et augmente, cela va restituer l'ensemble du tableau des articles du panier et modifier le total et le prix de la ligne. Maintenant, il manque encore une chose ici, et c'est que si je change ça par deux, ça ne changera rien. Si je reviens à cela, cela changera ça, mais si je mets une valeur spécifique, cela ne changera pas cela. Permettez-moi de refactionner ce code un peu plus. Ce que je veux faire ici, c'est créer un événement personnalisé. Maintenant, rappelez-vous que lorsque nous avons parlé d'événements personnalisés plus tôt, cela n'avait pas vraiment de sens, car nous ne faisions que lier un clic et que nous le transformons en un autre événement personnalisé. Mais cette fois, nous avons deux façons de modifier la valeur d'entrée, c'est-à-dire la quantité dans ce cas. Nous pouvons définir une valeur de quantité spécifique ou utiliser les boutons plus et moins ici. Ce que je veux faire, c'est combiner ces deux événements dans son propre événement, que je vais appeler un événement de changement. C'est logique. Voyons cela en action. Tout d'abord, je vais créer cet événement personnalisé. Je vais aller cet événement .changé va être, comme nous l'avons vu plus tôt avec la création d'événements personnalisés, nous créons un nouvel événement, lui donnons un nom, puis cette fois je veux ajouter un objet JavaScript pour bouillonnant. Je veux que les bulles soient vraies. Ce que cela va faire, c' est qu'il va également enregistrer un événement de changement sur le composant Web des parents, car je veux qu'il soit inscrit ici. Ensuite, ici, je vais créer un écouteur d'événements pour l'événement de modification sur ces composants Web particuliers. Je vais changer ici, créer une fonction ici. Je vais saisir les commentaires. Ce sera l'événement de changement ici. Ce que je vais faire, c'est que je vais mettre la quantité de mise à jour ici. Au lieu d'avoir à exécuter cette méthode lorsque nous exécutons le gestionnaire d' événements, cliquez sur le bouton, puis le gestionnaire d'événements lorsque nous modifions explicitement l'élément, comme nous l'avons fait auparavant, comme nous l'avons fait auparavant, comme ceci, je vais envoyer cet événement de modification la fois sur le bouton et sur cette modification d'entrée. Permettez-moi d'écrire ceci ici, et je vais approfondir l' entrée parce que nous devons utiliser certains de ses attributs là-bas. Ensuite, je vais envoyer cet événement personnalisé, donc cet événement de changement. Ensuite, parce que nous examinons l'entrée spécifique, au lieu de ne rien avoir ici ce que je peux faire est de passer par l'événement, et ensuite, au lieu de regarder cette entrée, je peux créer une référence à la ici basée sur la cible actuelle de l' événement. Désolé, j'ai oublié de mettre la mission là-dedans. Ensuite, nous pourrons supprimer ce point de chacun d'entre eux. Appuyez sur « Enregistrer » là-dessus et voyons si cela fonctionne. Je vais ouvrir ma console juste au cas où il y aurait des erreurs. Ajouter au panier. Posez ça, posez ça. Cela ne fonctionne pas car nous vérifions les événements sur le composant Web et non sur l'entrée. Ce que je vais faire, c'est simplement ajouter un paramètre supplémentaire ici avec un objet JavaScript, et je vais définir les bulles sur true. De cette façon, l' événement de modification va atteindre le composant d'entrée de quantité lui-même. Appuyez sur « Enregistrer » là-dessus, rafraîchissons ici, et voyons si cela fonctionne maintenant. Vous ne pouvez pas définir les propriétés d'une quantité de réglage non définie. Jetons un coup d'œil. Jetons un coup d'œil à ce qui se passe ici, l'entrée du journal de la console. Jetons un coup d'œil. C'est passer par le composant Web lui-même. Cela doit être dû au fait que nous nous dirigeons vers le composant Web qui déclenche la modification et que la cible actuelle de l'événement dans cette instance devient le composant Web lui-même et non l'entrée. Nous pouvons résoudre ce problème en utilisant simplement notre requête sélectionnée pour entrer et sélectionner cette entrée. Appuyez sur « Enregistrer » là-dessus, rafraîchissons ici, cliquez sur « Ajouter au panier », puis nous avons le même résultat que nous avions auparavant. Il s'agit en fait de mettre à jour nos quantités et de mettre à jour notre panier. Comme vous pouvez le constater, cela ne fonctionne pas. Permettez-moi de changer cela par deux, puis de cliquer sur « Tab ». Comme vous pouvez le constater, cela change la valeur explicite. Comme vous pouvez le constater, étant donné que le changement est déjà un événement sur cette entrée, nous profitons également de l'événement existant qui serait déclenché lorsque nous le modifions explicitement. En gros, nous ajoutons notre bouton clic dans l'événement de changement. C'est quelque chose qui se produit automatiquement, nous n'avons même pas besoin d' enregistrer un événement changement lorsque nous modifions explicitement cette valeur, cela se produit automatiquement. C'est un bon exemple de la façon dont nous pouvons marquer un événement personnalisé sur quelque chose qui existe déjà. Maintenant, juste pour nettoyer cela, nous avons cette valeur précédente ici. On suppose que si nous cliquons sur un bouton, nous modifions une valeur, mais juste pour être sûr que je vais ajouter une déclaration if ici. Nous allons simplement vérifier si la valeur précédente n'est pas égale à la nouvelle valeur. Si j'économise, je me rafraîchis, nous devrions obtenir le même résultat que nous. C'est juste un chèque supplémentaire. C'est essentiellement ça les gars. Nous avons nos trois composants Web ici. Nous avons notre élément produit, et si je clique sur « Ajouter au panier » sur l'un de ces éléments, il interagira avec notre composant d'articles de panier. Je peux utiliser ces quantités pour modifier les prix ici. En fait, une chose que nous n'avons pas faite est que si elle touche zéro, nous voulons supprimer cela, et si le total atteint zéro, nous voulons supprimer complètement la table. Je pensais que c'était fini, mais il nous reste encore une chose à faire, c'est pourquoi vous devriez toujours jouer avec vos projets et voir. Allons dans cartitems.js, et écrivons du code supplémentaire ici. Je vais faire défiler vers le bas. La première chose que je vais faire, c'est si le total du panier est nul, en fait, je vais faire l'inverse. Si le total du panier n'est pas égal à zéro , nous allons afficher le pied de page. Mais si le total du panier est égal à zéro , ce code ne s'exécutera pas du tout, qui signifie que nous n' aurons pas de pied de panier lorsque cette fonction de rendu sera exécutée. Je vais économiser là-dessus. Ce que je ferai aussi c'est que je vais faire un bilan similaire ici. Juste après le prix de la ligne ici, je n'ajouterai pas la ligne au tableau à moins la quantité d'article soit supérieure à zéro. Si ce n'est pas zéro, alors nous allons exécuter ce code, alors saisissez-le et mettez-le ici. Cliquez sur « Enregistrer » là-dessus. Maintenant, lorsque nous ajoutons quelque chose au panier, augmentez sa quantité, mais revenez à zéro, cela supprimera cela. Disons simplement que nous en avons plusieurs ici et que nous en retirons tous un du panier, puis toute la table de panier ne disparaît pas, c'est juste cette ligne. Nous pouvons tous les ajouter, retirer certains, augmenter la quantité. S'il s'agissait d'une application entièrement fonctionnelle avec des fonctionnalités de paiement similaires activées, nous pourrions avoir un bouton ici qui envoie ce tableau de panier à une page de paiement, et l'utilisateur serait en mesure de pour terminer cette commande. Cela conclut ce petit projet de classe. Laissez-moi simplement valider ce code avant que j'oublie. Encore une fois, abandonner le DS Store. Voyons rapidement ce que nous avons changé ici. Tout a l'air bien. Si vous remarquez des erreurs avec tout cela, faites-le moi savoir. Commentaires ci-dessous, mais je vais mettre en scène tous ces éléments, puis terminer le projet avec une entrée de quantité. Je vais encore jeter celle-ci. C'est à peu près tout ça les gars. J'aurai ce code sur GitHub pour vous. Il suffit de le chercher sur ma page GitHub, qui est github.com/christopherdodd. Laissez-moi m'en débarrasser. Vérifiez mes référentiels, voyez si vous pouvez le trouver là-dedans. Toutes les questions. Laissez-les dans les commentaires ci-dessous. J'espère que vous avez apprécié cette application pratique d'utilisation des composants Web. J'espère que dans ce cours, semblant que nous ayons commencé par la théorie et que nous sommes entrés dans la pratique, vous pourrez commencer à consolider ce que fait les composants Web et pourquoi c'est important. Je vous verrai sur la prochaine vidéo où nous terminerons le cours, et je vais vous parler de la façon dont vous pouvez étendre ce projet de cours encore plus loin si vous le souhaitez. Merci d'avoir regardé, je vous verrai sur la prochaine vidéo. 13. Conclu: Cela conclut notre cours sur les composants Web. Pour votre projet de classe, je vous encourage à créer votre propre composant Web entièrement fonctionnel. Pour vous inspirer, vous pouvez prendre ce que nous avons fait jusqu'ici dans cette classe avec l'exemple du commerce électronique et ajouter fonctionnalités supplémentaires telles que filtrage des produits ou la sélection de variance. Comme toujours, si vous avez des questions ou des préoccupations, laissez un commentaire dans la zone de discussion ci-dessous, et je ferai de mon mieux pour vous orienter dans la bonne direction. Merci comme toujours d'avoir regardé et j'espère vous revoir sur certains de mes autres cours.