Série modèle d'objet de document 2023 - Partie 6 : Projet final de la DOM. Exemples avancés et amusants

1. Introduction du cours - Projet réel: Hey, Mes chers élèves font cette dernière classe dans toute cette série sur le DOM, le modèle d'objet de document, le guide de mon nom. Je vais être plus stricte. Et jusqu'à maintenant, nous avons fait oui, beaucoup d'exemples, mais surtout de la théorie. Et qui aime la théorie, n'est-ce pas ? Et c'est pourquoi ce cours est assis autour de faire un projet entier ensemble. Ça va être super amusant. Cela va appliquer beaucoup de vos connaissances sur le DOM qui va vous tester sur des choses comme le bouillonnement d'événements et la capture. Il va tester votre capacité à ajouter des éléments au DOM. Il va tester votre capacité à écouter des types d'événements, des événements de keyup, des changements de veines, et même soumettre des événements sur le format va être fascinant et bien fait pour suivre le long. Si vous avez, si vous êtes un nouveau venu, Si c'est votre première classe de Simeon, bienvenue, bienvenue. Donne-lui un coup d'envoi. Je vais coder le HTML, le CSS, le JavaScript avec vous. Donc, peu importe le niveau d'expérience que vous avez. Je suis ouais, je suis ton instructeur, celui-là, oui. Donc, sans plus tarder, entrons dans ces projets très, très cool. Et Conway, je ne peux vraiment pas. Je m'amuse tellement. Mais assez dit, laissez-moi aller à mon ordinateur en ce moment et commencer à coder tard ensemble. 2. Qu'est-ce que nous allons créer ?: Hey, vous venez tous à ce projet final qui va être épique et je suis super, super excité. Et je sais que ça va ressembler à un exemple très simple. Mais un, il renforce vraiment toutes les choses que nous avons appris jusqu'à présent dans ce cours et être les astuces et les compétences que vous avez appris dans cette section, vous serez en mesure de postuler à vos propres sites Web. Cela vous aidera vraiment à aller de l'avant. J' espère que tu t'amuses beaucoup. Mais en cours de route, j'espère vraiment vous apprendre des méthodes très utiles et pratiques. Alors, quel est le projet final ? De quoi s'agit-il ? Eh bien, comme vous pouvez le voir, nous l'avons appelé notre site de holics, et il contient juste une liste de courses. Je sais que ça semble très simple, mais il se passe beaucoup. Alors, qu'est-ce qu'on va faire dans ce projet ? Nous allons tout d'abord, lorsque l'utilisateur passe la souris sur chaque élément de la liste, vous pouvez voir là nous mettre en évidence cette bordure, cette bordure de levage pour être spécifique. Juste pour que l'utilisateur sache qu'il plane dessus. S' il clique sur un objet, rien ne se passe. Mais comme vous le voyez à droite, ce, ce bouton Supprimer, encore une fois, si l'utilisateur survole, Nous sommes malades que la propriété de style. Et bien sûr, si l'utilisateur supprime, disons cette pizza, nous voulons que retiré du dom. Et le sucre et les épices ? Est-ce que l'utilisateur supprime cela. Nous voulons que cela soit entièrement supprimé. Donc c'est la première chose que je veux que vous réfléchissiez à la façon dont vous pouvez y arriver. Ce n'est pas si difficile. Mais encore une fois, on va devoir écouter certains événements, n'est-ce pas ? Plus précisément l'événement click ? C' est une chose que je veux que tu fasses. L' autre chose, dont vous avez déjà deviné, c'est que je veux que l'utilisateur puisse ajouter des éléments à la liste. Donc, si l'utilisateur tape quelque chose comme de la bière par exemple, des clics s'ajoutent, il est ajouté dynamiquement à la liste. Et ici, parce que nous utilisons un formulaire, nous écoutons réellement l'événement submit. Bien sûr, si l'utilisateur veut aller supprimer de la bière de la liste, il peut le faire. Donc, tout a un sens intuitif. Qu' en est-il de cette case à cocher masquer la liste ? que nous allons être à l'écoute d'un autre type d'événements, les gains changeants. Et si l'utilisateur vérifie cela, alors nous cachons tout. Je sais que vous pensez peut-être, pourquoi voudriez-vous vous cacher anti-ShoppingList ? Et assez juste, c'est une question très valable. Rappelez-vous que nous apprenons des compétences. Oui. J' essaie de vous équiper pour l'utiliser dans d'autres situations qui sont applicables à votre application Web. Donc, si l'utilisateur décoche cela, évidemment tout est de retour à la normale, quel est le sujet des éléments de recherche prend la boîte ? Eh bien, cela permet à l'utilisateur de rechercher des articles dans la liste de courses. Et nous ne serons pas à l'écoute d'un événement click. Ouais, parce qu'il n'y a pas de tique, on va écouter un événement clé. Regardons un exemple. Disons que l'utilisateur a quelques choses sur le ShoppingList, comme, je ne sais pas, le sucre, céréales, le jour où tu as. Maintenant, si l'utilisateur tape, disons sucre, nous voulons seulement afficher les éléments qui correspondent à ce texte, mais regarder de près. Remarquez-vous que toutes les utilisations prend dans ce cas comme minuscules, une étole fermée correspondait au sucre ci-dessous, même si le sucre ci-dessous a une majuscule. Et de même, si l'utilisateur tape toutes les majuscules, c'est toujours Mencius parce que nous ne voulons pas que cela soit sensible à la casse. Alors gardez cela à l'esprit. On y va. Vous pouvez voir que ce sera un projet vraiment amusant. Je suis super, super excité. J' espère que je vous ai donné assez d'une sorte d' aperçu de haut niveau pour comprendre ce que nous devons audacieux, garder à l'esprit. Je vais tout construire à partir de zéro. Je vais construire un HTML à partir de zéro, le CSS. Nous allons couper le JavaScript ensemble. Ça va être épique sont super, super réponse. Je te verrai à la prochaine conférence. 3. Liste de achats: Donc, vous avez vu à quoi ressemblera le braconnage sur votre excité de vous impliquer. Et nous pouvons continuer à développer ce projet. On peut continuer à s'améliorer. Mais, vous savez, quelles sont les compétences que vous avez acquises jusqu'à maintenant sont vraiment, vraiment incroyables. Et je veux te le prouver dans cette dernière section. Alors j'espère que vous l'apprécierez, mais vous pourriez être rayé et caché. Maintenant, qu'est-ce qui est impliqué dans la création de toute cette structure ? Laisse-moi te montrer ça maintenant. C' est bon. C'est bien. Et ça va être encore mieux. Parce que maintenant nous sommes sur le projet final. Ça va être très amusant. Il va être très interactif et il va être très pratique pour votre carrière à l'avenir, parce que maintenant nous allons construire un site de shopping. Nous allons permettre à un utilisateur d'ajouter des articles à une liste de courses. Supprimez ces articles d'une liste d'achats, masquez tous ces articles d'une liste d'achats. Nous allons même entrer dans quelque chose de tout à fait à polices et c' est des articles de recherche à l'intérieur d'eux, cette liste de courses. Donc je suis super, super excité. Un câlin au-delà de deux. Permettez-moi de vous parler brièvement de ce que nous allons faire dans ce projet final. Adios. Jusqu' à présent, nous n'avons vu que des extraits de ce que nous pouvons et ne pouvons pas faire avec le DOM. Dans la première partie de ma série DOM, nous avons beaucoup parlé de traverser le DOM, accéder aux éléments dans le DOM, créer des éléments dans le DOM, supprimer des éléments du DOM, cloner des éléments dans ce DOM avancé dans ce cours particulier que vous faites en ce moment, nous sommes allés un peu plus loin, n'est-ce pas ? Nous sommes vraiment entrés dans les veines, comment ils fonctionnent. Nous sommes allés à capturer contre bouillonner. Nous sommes entrés dans les hiérarchies. Nous avons parcouru un chemin incroyablement long. Il est maintenant temps de mettre toutes nos compétences à l'épreuve par Bolding et toute la page Web pour obtenir. Ok, c'est génial. Que voulons-nous qu'il fasse ? Eh bien, tout d'abord, appelons ça nos cotés, parce que nous sommes des bourreaux du shopping et nous voulons juste aller au supermarché et acheter beaucoup de choses. Et parce qu'il s'agit d'un côté acharné, nous avons besoin de la possibilité de modifier un article d'épicerie, trouver un article d'épicerie, puis de supprimer les articles d'épicerie de notre liste. Cri mieux à général va me laisser étirer cela. Qu' est-ce qu'on va couvrir exactement ? D' abord, on va devoir naviguer dans le DOM. Et vous allez voir que nous allons devoir changer le DOM lorsque vous utilisez une suppression de coups de pied. Nous voulons qu'un article soit supprimé. Par exemple, lorsqu'ils ajoutent un élément, nous voulions modifier Todd Don, par exemple. Nous allons devoir manipuler CSS. Nous allons devoir interagir avec les formulaires et les événements. Nous allons devoir utiliser JavaScript pour ajouter de nouveaux éléments au DOM. Comme je l'ai mentionné, nous allons devoir supprimer des éléments du DOM. Et je veux vraiment que nous entrions également dans un sujet de polices de mode, et c'est ainsi que nous recherchons des sommes FADH dans le DOM. Donc je vous montre, vous pouvez voir que nous faisons beaucoup dans cette dernière section. Allons nous installer, buvons du café et nous allons craquer. Je te vois maintenant. 4. Créer notre HTML: Allez. Tu dois être que ce n'est pas le projet final. Je suis tellement excité. Alors oui, on y va, j'ai une couverture. Code Visual Studio, prend des modifications sur la gauche, l'IDE, et sur la droite, nous avons notre navigateur juste pour que nous puissions voir faire. Et avant de sauter là-dedans, Henry entre dans beaucoup de détails, je veux juste dire qu'on peut l'aborder de manière fragmentaire. Nous allons passer par étape par étape, cette conférence. Maintenant, je veux juste que nous regardions le HTML et le prochain H0, nous pouvons le styliser pour le rendre vraiment agréable si vous voulez sauter le Bolding du HTML et SESAC. Oh, bienvenue pour le faire. Et il suffit de sauter dans le cœur de manipuler le DOM, mais vous encourager fortement à suivre et sans plus tarder, commençons. Voyons comment on va. Nous avons notre projet final, fichier vide. Tout ce que je veux faire, c'est que je veux commencer avec un modèle HTML très simple. Nous pouvons avoir une section en tête pour l'instant, allons juste avoir un titre pour toutes les pages. Et le titre peut être ShoppingList. Et sous la tête, bien sûr, on peut avoir notre copain. C' est vraiment la viande de notre HTML va s'asseoir. Maintenant, avant que nous voyions, c' est toujours une bonne idée d'imaginer ce que vous voulez dans votre esprit parce que nous devons structurer cela d'une manière très logique. Comment devrions-nous structurer cela me permettra d'en appeler à un niveau très élémentaire. Nous pouvons ajouter à cela plus tard, mais c'est ce que nous voulons audacieux initialement émeutes. Et le point de saute que j'aime toujours faire est que je veux lire toute la chose dans sa propre balise div. Et on peut lui donner une carte d'identité de Rapa. C' est un point de départ. Nous voulons que notre liste de courses soit dans un div parent. Mais toujours une bonne idée de le faire. C' est toujours une bonne idée de décomposer les choses en ensembles d'éléments plus froids à parents. La première chose que je veux faire, si nous regardons maintenant avec un filet, je veux faire trois éviers de haut niveau. Si vous regardez ça, vous pouvez voir qu'on peut le diviser en trois sections. Je veux avoir un en-tête ou ils veulent avoir ce total, un virage 100 rapide dans un formulaire. Et puis enfin, je veux que toute cette liste soit correcte dans sa propre div. Donc, c'est comme ça que je veux le structurer, surestimer combien de façons d'éplucher un chat. Mais vous pouvez voir ici, nous allons avoir une div globale. Et à l'intérieur de cela, nous pouvons avoir trois éléments parents de très haut niveau, un en-tête, un formulaire et un diff. Est-ce que ça a du sens ? Bon, alors faisons-le. Faisons-le. Oui. Et que div que nous sauvegardons, nous pouvons donner une idée de RAM. Alors on y va. C' est dans la marée de l'intérieur de la div. Rappelle-toi qu'on a gagné trois choses. On veut frapper. Euh, qu'est-ce qu'on voulait d'autre ? On voulait un formulaire. Et que voulons-nous d'autre ? On voulait un autre div. On y va. Et c'est juste très haut niveau. Et oui, nous allons donner toutes ces identifiants et choses plus tard. Pour l'instant, c'est ce que nous avons, pensons était caché. Et souviens-toi de quoi je vais cacher ressemble. C' est cette section verte en haut. Et encore une fois, je veux le représenter dans son propre élément parent entier. Ceci est rapide dans une dose, va lui donner un ID de haut de page. Alors vous pouvez voir que je vais haha a quelques choses, n'est-ce pas ? Allons à la haine des accros du shopping, truc, allez à la description, ma liste de courses. Et puis il y a un peu la section de recherche que je vais louer et un début complet ou obsolète à structurer cela. Nous allons avoir notre div rapide pour tout le chauffage et le cou. On peut juste avoir un ID de haut de page. Et dans cet en-tête, nous avons le titre. Et c'est juste avoir une haine de Hollich. Et juste pour que nous puissions le coiffer plus tard, donnons-lui une classe de sans titre. Comment c'est ? Et comment nous regardons jusqu'à présent avec littéraire. J' ai juste un cap et je vais parcourir. Assez simple et nous avons mis un long chemin à parcourir. Donc ce n'est pas frapper la chose en dessous qu'on a une description, tu te souviens ? Et je vais juste le lire dans une balise de paragraphe. Et je vais juste dire ma liste de courses. Hé, on y va. Et la dernière chose que je voulais maintenant Haider, est que toute la fonctionnalité de recherche, qui est assez avancé comme un peu comme un bonus en plus mettre sur cela. Et on y arrivera à la fin. Donc, nous pouvons avoir une fonctionnalité de recherche. On y va. Et comme je l'ai mentionné, je veux l'envelopper dans un dossier et une liste juste donner le nom complet et l'ID de l'élément de recherche. Parce que c'est ce que ce formulaire va faire. ce moment. Nous pouvons simplement supprimer l'action et est un ancien, je voulais que cette mousse ait une boîte d'entrée des goûts de temps et nous pouvons avoir un détenteur de place d'éléments de recherche. Et rappelez-vous simplement ce que l'élément de recherche ou les fonctionnalités vont faire. Cela va permettre à l'utilisateur de rechercher mots-clés pour voir si ces mots-clés ou dans la liste d'achats. Par exemple, s'il contrevient à la façon dont vous avez édité cuisinier à holistique au sommet de Coke et tous les éléments qui ont des noix de coco apparaîtront. Donc ça va être assez cool, assez avancé. Alors on y va. C' est notre élément d'entrée. Et une autre chose que je veux ajouter ici. Juste la possibilité pour l'utilisateur de masquer et d'afficher plus ancien listé en dessous. Et je pourrais le mettre à d'autres endroits. Tu sais quoi, Jimmy a refroidi une fonctionnalité de recherche et de masquage. Laisse-moi juste faire cela lui a répondu. Ouais, c'est mieux. Et comme je l'ai dit, on pourrait mettre ça ailleurs. Je veux juste dire oui, parce que c' est comme ça que je le vois dans ma tête. Et nous avons donc notre contribution. La prochaine chose que je veux est celle que j'ai inclus une balise div. Et on peut lui donner une pièce d'identité de joue. Et ça peut être une étiquette pour cacher. Et si l'utilisateur clique dessus, nous voulons cacher. La liste reste toute navale. Et évidemment, maintenant, nous avons besoin de la case à cocher, n'est-ce pas ? Ainsi, le type de données d'entrée peut être en forme de boîte. Et nous pouvons également lui donner une ID de chaud. Oui. Bien joué. Nous venons de terminer notre en-tête. Ça va être toute la grande section. Ne vous inquiétez pas pour les ASC. On va y entrer. Ensuite, dans la prochaine conférence, je veux juste que nous étirions notre HTML. Et puis vous verrez à quel point il est facile et rapide d' ajouter rapidement des styles pour le rendre magnifique. On y va, c'est notre en-tête. La prochaine chose qu'on veut faire, c'est qu'est-ce que ça va rafraîchir notre image ? La prochaine chose qu'on veut faire, c'est mettre fin à ce formulaire au milieu. Droit ? C' est ce qu'on veut faire. Alors faisons cette équité. Comment on fait ça ? Eh bien, nous allons nous débarrasser de cette action ici et donnons à cela un ID d' AddItem parce que c'est ce que ce formulaire est tout au sujet. Il s'agit de l'ajout d'éléments à la liste d'achats par l'utilisateur. Et nous avons besoin d'une boîte de saisie, n'utilisons-nous pas ça va taper en yens. Et je voulais placer le titulaire, pas l'espace réservé à l'intérieur. Qu' est-ce que tu veux acheter ? Et puis après que l'utilisateur a tapé ce qu'ils veulent acheter, nous avons un bouton appelé un coup il vient d'éditer bouton et nous pouvons avoir edX. Ensuite, nous allons à la mise en forme. Qu' est-ce qui se passe ici ? Et j'ai juste 72 à la Parole de la balise de fermeture. Alors on y va. Je pense que ça fait des saints. Et maintenant, nous en sommes à la dernière section. Encore une fois. C' est cool pour cette image. Et vous pouvez voir l'article final Nick, nous avons besoin est ce articles à acheter section. Et nous allons l'envelopper dans une dose aussi. Vous pouvez voir qu'il a un titre et qu'il a tous ces éléments de liste. Et puis il y a aussi ces boutons de suppression. Et ce que nous allons faire, c'est que nous pouvons lire, rappeler ce qu'ils ont fait bavarder et la délégation de veine. Nous sommes allés lire tous ces éléments de liste dans un élément parent. Alors nous allons l'envelopper dans un élément UL parent, et ensuite nous irons à partir de là. Alors on y va. Nous avons tout l'élément div. Nous voulons tout enregistrer et lui donner un ID de listes d' épicerie parce que c'est ce qu'est cette div. Et puis nous avons aussi à haïr fait peaufiner les articles à acheter. Mais c'est un peu plus petit que 81, il le fait. Alors faisons-en un chauffage H2. Et nous pouvons dire des articles à acheter. Le sexe a en fait un T et B majuscules et puis donnons à cela aussi une classe de squelettique. Et maintenant, nous arrivons sur tous ces alliés, ceux-là , et les listes d'objets. Et rappelez-vous ce que j'ai dit, nous voulons l'envelopper dans une Rapa globale et nous allons le faire avec une étiquette UL. Assez simple. Et à l'intérieur, nous avons chacune de nos listes. Donc, bien sûr, nous avons une étiquette alliée et chaque article a deux choses pourrissent. Et il a l'objet réel lui-même. Et puis il y a ce genre de bouton de suppression à droite. Et encore une fois, il y a plusieurs façons d'écorcher un chat, donc je vais juste lire ces deux dans un élément de span. Ceux qui vont avoir une classe d'article parce que c'est l'article que nous traitons. Cela donne juste un mot de MLK que vous avez. Vous pouvez le voir dans le navigateur. Et puis une autre plage va avoir une classe de Delete. Et je vais avoir le mot supprimer. On y va. Et nous l'avons là. Donc, nous avons notre tout premier élément et tout ce que nous avons à faire maintenant est nous pouvons simplement copier et coller ces éléments LI. L' article suivant peut être Sucre et Épice. Comment ça a l'air ? On peut le copier à nouveau. Et ici, on peut avoir quelque chose à boire du coca. Et encore une fois, ça s'appelle BIA alerte oeuf. Faisons un de plus ci-dessous et nous pouvons dire peta et dire périphérique, Margarita. Si je l'ai écrit correctement, je l'espère. C' est donc notre HTML. Si vous regardez notre navigateur ici, il semble terrible. En fait, je deviens nauséeux même en le regardant. Et ce sera ce que nous ferons dans la prochaine conférence. Embellissons ça. Ça donne l'air vraiment funky. Et pour revenir à notre code, rappelez-vous tout de suite, tout ce que nous avons fait, c'est que nous avons fait notre HTML et c'est une page très, très simple. Nous avons tout lu dans cette div d'une carte d'identité avec Rapa. Tout est suivi en d. Et puis on le divise en trois sections. Pourri. Je peux même structurer ce COVID. Je peux dire la première section. Disons que la section 2 était ce genre de formulaire où nous ajoutons des articles. Et puis la troisième et dernière section est la section 3. Et c'est d'afficher la liste à l'utilisateur et de permettre à l'utilisateur de supprimer des éléments de la liste. Donc, comme une sorte de saints, c'est très simple. Passez par là, pause la vidéo, et dans la prochaine conférence, Commençons à coiffer ceci et vous verrez quel point la signature est amusante parce que vous allez de quelque chose comme ça. Et je vais chercher quelque chose de vraiment incroyable. On se voit. 5. Créer l'en-tête CSS: Bienvenue de retour. Et vous pouvez voir qu'on reprend exactement là où on s'est arrêté. Vous pouvez voir à quel point c'est horrible. Je suis juste des choses qui regardent dans le coin arrière juste parce que ça a l'air si moche. Mais n'insistez pas sur cette volonté, cette conférence est tout au sujet, nous allons faire le CSAC ensemble. Et vous pouvez voir ici je viens de créer un fichier CSS de couverture. C' est tout ce que j'ai fait. Donc, tout ce que nous avons à faire dans notre section tête est d'inclure une référence à notre fichier CSS, qui sont appelés styles.css. Alors allons y entrer. Allons à notre fichier CSS, et commençons à rendre cela plus beau. Donc la première chose que je veux faire est de commencer par le haut et de travailler avec tout notre corps. Tout ce que je veux faire est de changer la famille de polices en, faisons quelque chose de gentil ou Cambria. Comment ça se sent ? Il est toutes ces petites choses, en passant, qui fait que votre site semble beaucoup plus de soutien de la juste fait ressembler à elle a été amant et a été créé avec des couleurs k. Eh bien, je voulais juste tenir noir. Noir. noir peut être assez intense. Alors faisons-le juste un peu noir. On y va. Et les litres peuvent assez fermer ensemble. Donc je veux juste, je vais conduire à la propriété d'espacement pour être égale à un pixel. Zone. Ça a l'air un peu mieux. La prochaine chose que je veux faire est que vous pouvez voir la balise H1 et la balise H2 sont assez audacieuses. Je veux juste enlever ça. Alors composez un jumeau et H2. Et nous allons juste avoir un commentaire ici afin que nous nous souvenons pourquoi nous avons fait cela supprimé. Et ce que je veux faire, c'est des poids de police. Disons que c'est normal, beaucoup mieux. Et celui, et nous commençons à coiffer notre en-tête. Tu te souviens de ce gros en-tête vert ? Ok, alors commençons à travailler avec Allah Hitter. Et rappelez-vous quelle pièce d'identité nous lui avons donné. Nous avons eu notre HTML. On peut voir ici que nous avons notre en-tête. Ensuite, nous avons tout détruit dans un div avec un ID de haut de page. Tu peux le voir ? Alors allons à nos styles ici et accédons à notre élément avec un ID de haut de page. Donc, nous savons maintenant que nous traitons avec ce rép entier dans la section d'en-tête. Tout d'abord, je veux changer notre couleur d'arrière-plan à 10, 7 et 11. Ensuite, nous avons eu, et le rembourrage semble choquant. Alors traitons juste du rembourrage. Et les nombreuses façons que vous pouvez faire le rembourrage et lui donner quatre valeurs et faire le haut, soulevez à droite en bas. Mais si nous lui donnons juste deux valeurs, par exemple, les pixels d'équipe et 0, les premiers pixels d'équipe comme traitant du remplissage supérieur et inférieur et un 0 pixels traitant de la gauche et de droite. C' est logique. Nous devrions donc voir des lacunes maintenant en haut et en bas. Sauve ça. C'est exactement ce qui s'est passé. Donc on y arrive. L'élément suivant, ce que nous pouvons faire est pourquoi ne pas commencer à affecter l'ensemble de l'enveloppe, la div entière pour oublier notre index. Et je veux juste faire un pas en arrière maintenant et commencer à coiffer ce wrapper parce que je veux que les styles s'appliquent à tous les éléments de ce wrapper. Donc, faisons-le effectivement au-dessus de cette page en haut, parce qu'il est plus logique pour moi de traiter de l'extérieur, la plupart des éléments vont de plus en plus détaillés, bas vers le bas la page CSS. Donc, ici, nous voulons accéder à notre ID de droits de rata. Et tout d'abord, je ne veux pas que l'étire sur tout l'écran. Donnez-lui juste une largeur ou 90 pour cent. On y va. Donc, vous pouvez voir même si nous faisons cela un peu plus grand, vous pouvez voir que ce n'est pas tout à fait aussi étirer sur tout l'écran. On y va. Juste plus facile de voir ce que notre fixateur. Et je veux lui donner une largeur maximale. Et disons que la largeur maximale est de 100 pixels. Comment ça a l'air ? Ne fait pas vraiment grand-chose, je suppose parce que nos écrans assez grands comme c'est. Et puis commençons à nous donner un peu de marge. Encore une fois, la marge supérieure et inférieure, nous voulons être 20 pixels. Et puis nous voulons sembler à l'ensemble de l'enveloppe div directement sur. C' est en fait ce que je voulais faire dès le début. On peut faire ça en tant qu'autel. Et on y va. Il semblait que sur notre page a le temps de prendre vie en quelque sorte. La prochaine chose que je veux faire, c'est que je veux maintenant ajouter son box-shadow rock vraiment cool. On veut que ça soit vraiment génial. Faisons une propriété d'ombre de boîte. Et je veux lui donner trois valeurs. Tout d'abord, je veux lui donner la valeur de décalage x, qui va juste la pousser à droite de cette boîte. Et je veux que ce soit six pixels. L' entrée suivante de la propriété d'ombre de boîte est les décalages Y. Donc je voulais vraiment être l'ombre d'être à droite de la boîte. Et en bas. Donc encore une fois, je veux lui donner une valeur positive de deux pixels. Et puis je voulais juste avoir un rayon bleu. Je voulais avoir l'air floue. Et je veux donner une taille de cinq pixels. Et enfin, on veut lui donner une couleur, non ? Et ça donne juste un cinq. Comment est cette colonne qui ressemble à de bonnes manèges et vous pouvez voir qu'elle commence à tomber, commence à se former. L' autre chose que je veux faire est que je veux avoir un remplissage de 20 pixels. Comment ça a l'air ? Ça a l'air mieux. Et la dernière chose que je veux faire, c'est que je veux avoir une frontière. Vous voulez avoir une bordure d'un pixel solide ? Et disons deux sur 12121. Et nous pouvons le rendre un peu transparent, dit. Je pense que ça commence à avoir l'air bien. Donc, tous ces petits détails qui font un site look vraiment wow. Ok, vous pouvez voir comment nous avons commencé à styliser notre en-tête, mais ce n'est pas tout à fait un diagnostic. On veut que ça paraisse mieux. Alors accédons à la page en haut et soyons des connaissances plus spécifiques. Bonjour, j'en suis un. Et faisons aussi exactement la même chose ici, haut de la page, mais sortons de notre paragraphe. Article parce que x le mot ma liste de courses. Et prenons la ligne. De belles choses pour le Père Noël. air bien, sans fin, juste gâcher avec la marge. Disons que la moitié AIM. Vise. Est-ce que ça a l'air ? Maintenant je pense que ça a l'air sympa. Et bien sûr, la prochaine chose et je veux styler est cette boîte de saisie. Donc ce x est ça. Et je vais arrêter de faire plus vite à travers ce n'est pas un cours sur CSS. Et j'espère juste que tu apprendras une ou deux choses en m'accompagnant. Pour arrêter de faire cela, nous pouvons évidemment ajuster. A quoi ça ressemble ? Peut-être que c'est un peu trop. Allons-y largeur max de 250. Comment ça a l'air ? Ça a l'air mieux. Marge. En haut et en bas. Je veux appliquer une certaine marge et ensuite je veux dire, je veux que l'affichage soit un bloc. Sinon, ça menace la peau listée en dessous à côté de nous. C' est pourquoi quand j'utilise la marge de modifié n'a pas semblé aimer ça. C' est pourquoi je voulais faire bloc d'affichage. Et ajoutons un peu de rembourrage. Oh, c'est juste beau, n'est-ce pas ? Et bien sûr, ajoutons une bordure d'un pixel solide. Rvb, 2.7212212210. Qu' est-ce que l'entreprise ? Oui, ça a l'air sympa. La taille de la police, on peut dire est un M, il suffit de le rendre un peu plus grand. Et qu'en est-il des prises de couleur ? Voyons comment nos quarante neuf, quarante neuf, quarante neuf. Mec, je pense que ça commence à avoir l'air vraiment, vraiment pointu. Et bien sûr, la dernière chose que je veux faire dans ce Haidt est de coiffer cette case à cocher. Alors qu'est-ce qu'on lui a encore donné ? Allons à notre HTML. Il y a une case à cocher. Comme j'ai frappé un, encore une fois, la case à cocher donnerait un ID de shake. Rappelez-vous que nous lui avons donné une pièce d'identité. Donc si nous allons ici, nous pouvons aller ID de largeur maximale. Nous pouvons le donner à un 180 pixels. Maintenant, nous allons sembler vrai il marge, haut et bas des pixels de l'équipe et de l'élévation et du rock. Nous voulons le centrer. Et puis on veut prendre la ligne au centre. On y va. Donc, cette liste de masquage commence à prendre forme. Mais ce n'est toujours pas 100 pour cent, n'est-ce pas. Pourquoi pas ? Oui. Tu sais ce que c'est ? Je veux réellement styler cette case à cocher réelle, cette case à cocher d'entrée avec l'idée d'une équité de style élevée. Alors allons-y. Ce qu'on veut faire, c'est avoir accès à notre fausse carte d'identité, mais maintenant on veut styler ça. En fait, il prend Bob avec l'idée de difficile à faire. Et je pense que cela fonctionnera avec une marge de 18 pour cent de 0. Et il est vrai que nous affichons toujours le bloc en ligne. Je pense que cela devrait fonctionner parce que l'imagerie la place à côté de ces listes de masquage. Sauve un ego. Cool, on y va. Nous allons lentement, attraper lentement un singe comme ils disent. Alors on y va. Nous avons notre cool sympa qu'un en-tête stylisé. Je suis de l'un pour juste mettre la vidéo en pause ici parce que ça devient un peu long et je sais que parfois c'est agréable de faire une pause. Nous avons parcouru un long chemin et dans la prochaine conférence, nous finirons. Nous allons finir avec les deux sections du bas, la forme et la div avec la loi depuis Dubaï, et cela devrait être relativement rapide. Rendez-vous à la prochaine conférence. 6. Créer les éléments de la liste CSS: Ok, donc c'est là qu'on s'est arrêté. Rappelez-vous que nous avons commencé à espionner l'en-tête ici et que nous avons fini la chaleur, mais continuons avec la perte de ces sections. Hen, tu te rappelles à quoi ils ressemblent ? Je veux envelopper un et un formulaire sur un représentant l'autre et un élément div. Et nous allons juste le coiffer pour les rendre funky ou bizarres. Alors continuons son plein. Et si vous allez dans le fichier d'index et que nous faisons défiler ici, vous pouvez voir que nous lui avons donné un ID d'élément Ed. Alors attrapons cet élément, ajoutons l'élément, et manipulons le. Quel est le but ? Et il semblait à cela. Ok, c'est bon pour l'instant. Et j'ai glissé tout à fait même typiquement dans un dépôt de stock, les spécificités de ceci, aka l'entrée réelle et ce bouton. Donc, commençons en fait toutes les entrées. Nous voulons donc accéder à la vague de, et nous voulons maintenant être très précis. Nous voulons commencer à coiffer cet élément d'entrée. La première chose que je veux faire, c'est que je veux agrandir cette boîte de saisie. Tu vois comment ce n'est pas assez grand ? Faisons la largeur de 300 pixels. C' est assez grand ? Ça devrait aller, on pourra toujours le changer plus tard. La prochaine chose que je veux faire est que je veux en faire une boîte de saisie. C' est un élément d'outsider. Donc je voulais prendre toute la largeur. Donc, nous choisirons le bloc d'affichage de xi. Comment c'est ? Ouais, ça ajoute juste une marge pour que ça paraisse mieux. Donnons-lui un peu de rembourrage. Que pouvons-nous faire d'autre ? Changeons cette frontière. Un pixel solide, deux sur six à 16. Hé les gars, juste un beau gris clair. Nous ne voulons pas que ces choses soient dans le visage de l'utilisateur. Nous voulons que tout soit très subtil. Et augmentons la taille de la police spiky. On dirait mieux. Peut-être devrions-nous juste courber cette bordure légèrement. Donc je vais juste ajouter un rayon de bordure, deux pixels. Il a ce regard. Maintenant, je pense que ça ressemble à une bouteille. J' ai dit que c'était très, très subtil. Le rayon de bordure, les deux premiers pixels sont en haut à gauche de la carte. Je l'arrondisse juste un peu. Et puis perdu deux pixels est juste style. Et l'ascenseur inférieur, j'aime faire seulement des choses subtiles en taille qui vient d'obtenir un vous obtenez un bon sentiment à ce sujet quand vous atterrissez sur une page et vous savez, et l'amour a été mis dedans. Mais on n'avait pas besoin de cet indium. Et que pouvons-nous faire d'autre ? Taille de boîte, border-box, à quoi ça ressemble ? L' autre chose que je veux faire, c'est que je vais juste inonder ce genou gauche. On doit deviner. Je veux ajouter des éléments pour être à droite. Plus précisément, nous voulions ajouter le bouton directement pour être affiché à droite à ce coucou d'entrée. Ok, donc on m'attrape, on m'attrape. Souviens-toi juste pourquoi j'ai mis le flux aujourd'hui. Si c'était parce que nous chassons l'un ou l'autre des éléments, plus précisément que le bouton ajouter pour être sur la droite de cette boîte de saisie. La raison pierreuse pour laquelle nous avons fait ça, et maintenant, bien sûr, nous devons accéder à ce bouton. Commençons. Nous voulons donc accéder à l'élément de formulaire parent. À l'intérieur de ça. Si nous voulons réellement arrêter le bouton du dipôle, C'est des points et manipuler les boutons quoi ? Ça a l'air Beta. Je voulais un curseur, évidemment pour changer quand l'utilisateur survole pour qu'il sache que c'est un bouton. Degas était de deux kilowatts. Comment ça se montre ? Et tout ce qu'on ne peut pas voir. C' est bon. Nous allons ajouter un arrière-plan et un arrière-plan. J' ai choisi un CALEA, 32 ans. Voir 77 D. Comment ça a l'air ? Nous y voilà, commençant à prendre vie. On peut l'intégrer. Comment c'est ? Regarde ? Voyons, nous allons changer cette bordure d'un pixel solide série. Ou si, si, dire comment cela totalise-t-il ? Maintenant, m'obtenir peut augmenter légèrement la taille de la police. Maintenant, nous pouvons ajouter de la marge. Regardez-le à un OBS aligné. Rappelez-vous juste que nous utilisons la même marge est à propos de nous que la boîte de saisie et c'est pourquoi ces deux alignent l'un avec l'autre. Et enfin, nous pouvons entrer sur nos articles faire bisection. Cette dernière section. Rappelez-vous, c'est un élément apparent, l'élément div parent est spécifique, et nous voulons résoudre cela maintenant. Alors faisons défiler vers le bas. Oui, et on y accède. Qu' est-ce que nous lui avons donné à nouveau et si nous faisons défiler la section 3, un ID du nom de liste d'épicerie que vous pouvez voir dans la liste d'épicerie avec une étiquette H2. Et puis nous avons les éléments UL et tous nos articles de liste, particulier les articles allées pour acheter une épave dans les éléments alliés. Encore une fois. Souviens-toi de la première chose que je veux les faire en excès, je vais faire une liste d'épicerie et donnons-lui une certaine marge. Ouais, donc ça commence vraiment à avoir l'air bien. Et puis je veux être plus précis. Donc, je veux prendre des listes d'épicerie. Mais maintenant stylisons les éléments UL. Tout d'abord, je veux supprimer ces points. points de balle. Ça va être méchant. Comment on fait ça ? Eh bien, nous accédons juste à la propriété de style liste et nous changeons sa valeur à zéro. Le jour où nous avons des points de balle ont disparu. Et puis l'autre chose que je veux faire est que je veux supprimer remplissage par défaut qui vient avec l'élément SQL. Supprimez le remplissage par défaut. Désolé, peut-être que je suis plus spécifique que vous avez parce que ce n'est pas ce que Golson CSA. J' essaie donc d'aller très vite. Hum, n'hésitez pas à sauter cette conférence si vous voulez parler du conseil d'administration. Mais alors vous devez avoir supprimé le rembourrage par défaut. Maintenant, ce que je veux faire, encore une fois ne veut pas être spécifique, mais je veux commencer à manipuler la liste des styles alliés, l'ID de la liste d'épicerie XY South. Mais maintenant, nous allons accéder à nos articles de liste. Je veux que chaque élément de la liste ait un rembourrage, l'IGA. Et rappelez-vous comment lorsque nous survolons chacun de ces éléments de la liste, nous avions une bordure gauche et des photos d'Angeles surlignées. C' est ce que je veux savoir. Disons cinq pixels solides. Et ce camion. Ouais, ça a l'air bien. Une autre inondation l'un sur l'autre maintenant, mais ne vous inquiétez pas, nous allons être une marge de la vie depuis. Et puis vous pouvez voir tous les suppressions actuellement est juste les goûts. Et rappelez-vous que nous les enveloppons dans une balise span est juste aller au HTML. Comment on l'a fait ? Nous l'avons enveloppé dans une balise span, permettra aux leads. Nous lui avons donné une classe de suppression. Tu te souviens de ça ? Donc pour l'instant, c'est juste un vieux goût ennuyeux. Ce qu'on veut faire, c'est qu'on veut le suivre. Et comme je l'ai dit, nous lui avons donné une clause. Supprimer. Donc 50. Allons-le flotter, non ? Ouais, oh, c'est cool. Alors donnons-lui une couleur de fond fraîche. A extra OK. Maintenant, ça a l'air bien. Donnons-lui un rembourrage et nous verrons que ça a l'air terrible pour le moment. On y va, ça vient vivant. Je veux faire la frontière C. Vous pouvez voir comment il ajoute très squishy. Alors arrondissons ça jusqu'au rayon de la frontière. Et arrondissons les quatre coins de quatre pixels. Hé les gars, c'est juste subtil. Je veux que le curseur de l'utilisateur change évidemment quand ils mettent la souris sur le bouton. Et nous allons nous débarrasser de l'ID noir et en faire une couleur blanche. Le gars. Mais maintenant, s'ils utilisent un cheval sur supprimer, je veux spécifier CUDA pour changer. Je voulais juste être une expérience utilisateur agréable. Donc, tout ce que nous avons à faire est la clause excessive de suppressions et presque fermer supprimer chaque fois que l'utilisateur survole dessus. Nous voulons affecter certains styles à résoudre, nous voulons affecter est ce front de fond et nous allons juste aller 20 2020. Degas. quel point ça a l'air cool ? C' est génial et vous pouvez voir nous tous, je pense que nous avons fait comme nous l'avons fait avec la recherche des côtés. Tu sais quoi ? Je viens de me rappeler quand nous survolons ces styles de suppression de mais pas ces frontières. Oui, il est le plus audacieux. Restez gris lorsque vous passez la souris sur un élément de liste. Laisse-moi le faire rapidement. Besoin d'accéder aux listes d'épicerie id. Nous voulons simuler le style sur les étiquettes LI, mais bien sûr seulement quand ils utilisent un chaud était en colère. Vous voulez changer la couleur de la bordure, n'est-ce pas ? Couleur da, 43, 43 centaines HLC. Nous survolons tout ça. Juste être belle. En passant, je viens de rencontrer da 43, 43 avec la couleur de suppression que je peux frapper. Donc, les deux couleurs sont exactement les mêmes. Mais ils vont s'amuser beaucoup de ne pas apprendre beaucoup. Et les politiques de listes est pris assez longtemps, mais je l'ai littéralement codé à partir de zéro. Maintenant, tu as vu comment je l'ai fait. Tout semble fonctionner à la recherche de lisinopril, bureau vu, rien ne fonctionne. Si nous cliquons sur Supprimer. Si nous essayons de dire que je veux acheter du sucre, MLK, ce que je ne sais pas ce que c'est, mais si nous ajoutons ça, rien ne se passe. Si nous cachons la liste et que rien ne se passe. Et bien sûr, si nous essayons de chercher, disons, MLK, rien ne se passe. C' est le sujet de la prochaine étape. Nous mettons toutes nos connaissances que nous avons apprises dans le DOM lors des conférences à venir. Alors amuse-toi, amuse-toi, et je te verrai. 7. Synthèse rapide: Pétrole brut, gaz, et allons-nous entrer dans le cœur et les moyens de manipuler le DOM ? Ça va être vraiment excitant, vraiment excité. Donc, vous pouvez voir sur l'écran et regarder assez bien, Il semble assez funky, mais bien sûr, il n'y a pas de fonctionnalité. Avant de commencer. Je veux juste te montrer quelques choses. Je veux juste vous donner un résumé de haut niveau. Donc si on inspecte ce document ici et qu'on va à la console, quelles sont les choses que je veux juste vous résumer sur moi. Il suffit de zoomer un peu. Oui. Donc ce qui ne veut pas lire vous a gardé sur quelques choses. Tout d'abord, rappelez-vous comment nous avons structuré notre code. Et je veux que nous commencions par regarder comment il avait un article dynamiquement au plus lent. Donc, en prenant du recul, rappelez-vous comment nous avons structuré notre code. Nous avons pris notre élément UL et nous avons des listes souscrites. Et nous avons lu tout ça dans une balise div. Et la balise div a un ID de listes d'épicerie ou de l'article d'épicerie. Jetons un coup d'oeil ici. Allons à notre code. Laissons une liste d'épicerie qui est là-bas dans cette div. Rappelez-vous que nous l'avons structuré de sorte que si nous avons un élément UL et à l'intérieur de cela, nous avons tous nos articles de liste. Qu' est-ce que ces fans. Et le nom de chaque article d'épicerie est dans un élément de span avec un nom de classe d'article. Souviens-toi de ça pendant qu'on va. Ok, alors qu'est-ce que je veux te récapituler ? Eh bien, regardons juste quelques choses. Cookie haut niveau, juste pour les obtenir, juste pour nous faire réfléchir. Tout d'abord, comment accéder à une forte domination de l'élément ? Tu te souviens de ça ? Je suis sûr que ce que nous pouvons faire est que nous pouvons définir une variable appelée article d'épicerie. Et puis nous pouvons accéder à notre objet document sur le net. Nous pouvons accéder au QuerySelector. Et cela fonctionne très similaire à d'autres bibliothèques corrélées là-bas comme jQuery. Nous pouvons être extrêmement précis. Qu' est-ce que je veux dire ? Disons que nous voulons accéder au troisième élément de cette liste. Quelque chose à boire, Coca. Comment ferons-nous ça ? Eh bien, je vais vous montrer ce que nous pouvons faire c'est que nous pouvons d'abord être très large en accédant à la div entière avec un ID de liste d'épicerie. Dans ce contexte, nous voulons accéder à un allié cocher vers le bas à chacun de ces éléments de la liste. Mais dans ce cas, nous voulions être le troisième élément pour pouvoir accéder au troisième enfant. Mais maintenant, nous ne voulons pas non plus que la balise LI entière nous soit renvoyée. Nous n'avons besoin que d'un, le goût réel, quelque chose à boire, EG Coca. Nous ne voulons pas que ce bouton de suppression aussi. Donc, nous pouvons même être plus précis. On peut dire, Ok, Cool, on veut la chose qui nous revient. Nous voulons seulement que ce soit la clause d'article. Parce que si vous vous souvenez si j'ai eu lieu, vous pouvez voir ici que la travée avec quelque chose à boire ET Kirk a un nom de classe d'ensembles d'articles. Tout ce qu'on a fait ici. Et ça devrait être ça. Si nous essayons d'accéder à notre article d'épicerie. À quel point c'est génial que nous soyons retournés à nous ? Cet article exempté, on est coucou. D' accord. Comment pouvons-nous nous retourner ? Tous les éléments de la liste. Alors que vous pourriez penser, ok, définissons une variable appelée articles d'épicerie. Il sort le document du sélecteur de requête. Et disons que nous voulons tous les éléments de la liste. Encore une fois, nous pouvons accéder à toute notre liste d'épicerie Rapa et nous pouvons juste dire, écoutez, donnez-nous l'allié. Oh, oh, bien sûr, article d'épicerie. Je voulais une épicerie ACI. Et si on faisait ça et qu'on essayait de consoler les autres, quelque chose de bizarre se passe. Les Y nous donnent l'article d'épicerie du lot de console. Je voulais que ce soit des objets. Et si on fait ça, on n'aura que le premier allié tech. Parce que rappelez-vous, la sélection de requête renvoie un élément du DOM. Alors, comment retourner tous les articles dans le DOM ? Écrivons ceci, juste effacer ça. Pour qu'il puisse commencer. Encore une fois. C' est vrai. Nous pouvons utiliser le sélecteur de requête tout concret. Donc, allons-y LET articles d'épicerie égale le sélecteur de requête de document tous. Et oui, on peut l'essayer. On peut accéder à notre liste d'épicerie, toutes les étiquettes LI. Et cette console se déconnecte. Et ils nous vont, nous obtenons une liste de noeuds retournée à nous. Et si nous ouvrons cette liste de nœuds, nous obtenons chacun de nos textes. Mais c'est un imperceptible. Rappelez-vous comment nous pouvons accéder aux éléments dans la liste des nœuds ? Eh bien, vous pouvez y accéder comme un tableau normal. Donc, si vous voulez le premier allié, nous pouvons juste faire les crochets et 0, cela nous donnera la première balise LI. Bien sûr, si vous voulez le second, vous pouvez mettre le numéro 1 et cela vous donnera le second, et ainsi de suite et ainsi de suite. Assez simple. Et comment pouvons-nous l'appeler cycle à travers tous ces éléments de manière dynamique. Nous pouvons utiliser le pour chaque méthode. Et nous avons traversé tout cet inconnu. Je vous donne juste un bref résumé. Mais de toute façon, pourquoi pouvons-nous utiliser la méthode ForEach ? Il le fera, parce que c'est une liste de nœuds. Si nous utilisons d'autres méthodes d'accès comme le sélecteur de requête par exemple, nous n'avons pas accès à la pour chacun. Je veux dire, quand nous utilisons certains qui nous retournent un ArrayList, comme le sélecteur de requête tous par exemple. Alors, comment ça marche ? Eh bien, nous pouvons accéder à nos articles d'épicerie. Nous pouvons accéder à la pour chaque méthode. Ensuite, nous pouvons dire pour chaque article qui nous est retourné, nous voulons effectuer une fonction spécifique. Et sous non, disons que nous voulons accéder à l'élément et que nous voulons changer ses prises pour contin propriété être. Tu crois que ça marchera ? Les articles haka que de sorte que c'est une façon que nous pouvons parcourir tous les éléments de la liste et arrêter de manipuler son contenu. Quelque chose d'autre que nous pouvons faire quand vous ne voulez pas remplacer quelque chose est que vous pouvez l'ajouter à jamais Ils déjà. Donc, ce que nous pouvons faire, par exemple, c'est prendre nos articles de liste d'épicerie, le foreach. Et au lieu d'assigner le contenu du texte entier à quelque chose de nouveau, nous pouvons simplement l'ajouter et votre peint en incluant le symbole d'addition. Et oui, on peut juste dire que c'est un article d'épicerie qui voit si ça marche. main. On y va. Maintenant, nous venons d'ajouter quelque chose de nouveau. Nous pouvons continuer à jouer avec cela et les infini et est vraiment amusant. Je voulais juste vous donner un résumé ou un résumé de très haut niveau de ce que nous avons fait dans les conférences précédentes. L' autre chose juste avant de terminer cette conférence est d'aller aux éléments ici. Débarrassons-nous de tout ça. Et souviens-toi qu'on travaille avec toutes ces choses. Nous travaillons avec des nœuds. Rappelez-vous, tout est à peu près un nœud dans le DOM. Nous avons des nœuds d'élément et le nez d'élément ou très simple, c'est comme ceci div ici comme une note d'élément. Mais nous n'avons pas seulement des nœuds d'éléments. Dewey, nous avons toute une gamme de types différents. Nous avons généralement des nœuds, par exemple, vous pouvez voir oui, section 1, section 2, 6 et 3. Ce sont des commentaires, des notes. Nous n'avons pas seulement les nœuds communs sont Dewey. Et on a une tonne de choses. On a des nœuds gustatifs. Nous ouvrons une de ces doses, nous ouvrons l'URL. Et maintenant je suppose que je veux dire, nous sommes montés l'échelle fait maintenant. Donc, ce n'est pas exactement la même chose que notre HTML. Mais ceux-ci, il prend noeud via l'article d'épicerie car il prend note, nous n'avons pas seulement des nœuds Takes, nous avons également un noeuds d'attribut. Par exemple, cette balise H2 a un attribut avec une propriété appelée clause, et nous lui avons donné une valeur de titre. Alors, voilà. J'espère que c'est la mémoire de Tokyo. J' espère que ça fait des saints. Mais assez pour moi. J' ai l'impression qu'il est temps pour nous d'entrer dans l'aspect grossier de faire ce travail. Donc je suis super, super excité et je te verrai à la prochaine conférence. 8. Suppression des éléments DOde - L'ancien chemin: Alors parlons de codage. Tout ce que j'ai fait est que j'ai ajouté un fichier JavaScript appelé app.js. Donc si nous avons notre index et que nous allons au bas, nous devons vraiment ajouter le script, n'est-ce pas ? Et nous l'avons appelé app.js. Alors on y va. Et je viens de créer un fichier dot js vide dans le même répertoire est que nous allons nous ajouter l'index dans le styles.css. Donc ce que j'ai fait et la première chose que je veux faire, c'est que je veux qu' on prenne ça de façon fragmentaire. Je veux qu'on s'attaque à chaque pièce, le pétrole. Donc la première chose que je veux faire est que nous puissions supprimer un élément de la liste. Si nous allons à notre navigateur, pouvons-nous y aller, vous pouvez voir que nous avons ces boutons de suppression. Et bien sûr, en ce moment, quand on clique dessus, rien ne se passe. Alors voyons ce que c'est d'abord, comment allons-nous faire ? Tout d'abord, je veux vous montrer la façon inefficace de le faire. Et puis je veux que vous mettiez la vidéo en pause et que vous essayiez d'utiliser les événements bouillonnants et même la délégation. Mais d'abord, allons-y avec l'approche inefficace, que vous pouvez voir beaucoup dans le code du développeur. C' est pour ça que je voulais que tu sois au courant. Donc oui, on est tous de retour et je prendrai l'état sur comment on peut faire ça. Nous allons d'abord, je veux étiqueter notre code donc il y a juste bloqué ici et supprimer des éléments, des pourritures et je vais juste copier ces liens SAM. On y va. Et une façon de le faire est d'ajouter des écouteurs d'événements à chacun de ces boutons. Donc la première étape serait de saisir tous ces boutons, non ? Et nous pouvons le faire en définissant une variable appelée Lessons. Zoom immédiat, oui, donc vous pouvez voir cette bêta, nous voulons accéder aux documents sur le, nous avons le sélecteur de requête. Tout sur le sélecteur de requête tout ce que nous voulons saisir la liste d'épicerie div externe et sur le nom, nous voulons saisir chacun de ceux-ci. J' élimine ça. Rappelez-vous, cela nécessite un coût de suppression. Il y a donc une classe d'élites. Et si on console déconnecte ça à l'écran, Allons-y. Et si nous inspectons cela, irait à la console. Nous devrions voir une liste de nœuds et je vais mode liste est ici et j'ai parlé quatre éléments, n'a pas d'importance. Et c'est chacun de ces boutons. Alors on y va. On a accès aux boutons. Revenons à 6 type de données. Et le moyen inefficace de la vieille école est de parcourir chaque bouton et d'y ajouter des écouteurs d'événements. Comment ferons-nous ça ? Eh bien, même dans la vidéo de récapitulation vous a déjà montré que nous pouvions accéder pour chaque rend. Alors faisons ça. Accédez à notre variable de boutons. Et puis nous pouvons accéder à cette méthode ForEach. Nous pouvons saisir chaque bouton dans le pour chaque boucle, et ensuite nous pouvons faire des choses à elle. Et dans ce cas, nous voulons saisir ce bouton et nous voulons ajouter tout fait juste maintenant, les veines que nous voulons écouter et chaque bouton est un événement de clic. Et puis bien sûr, nous voulons exécuter notre gestionnaire. Rappelez-vous cette main à fonction portes donné un objet d'événement que nous définissons dans une variable ancienne II. Au fait, je suis juste en train d'exécuter la main d'olivine directement dans cette fonction. Que se passe-t-il lorsque l'utilisateur clique sur ce bouton ? Ce que nous voulons naviguer vers les parents ne tweet pas, puis nous voulons supprimer cette période. Donc, ce que nous voulons faire, c'est que nous voulons définir une nouvelle variable. Nous voulons définir une variable appelée allié, par exemple, parce qu'elle est conservée dans un élément allié. Et donc les éléments alliés vont être la cible. Apporte le bouton sur lequel nous venons de cliquer, et ce sera ses éléments parents. Est-ce que ça a du sens ? Souviens-toi de ce qu'on a fait. Les utilisateurs ont cliqué sur ce bouton. Nous avons maintenant navigué jusqu'à la balise alliée trop mince. Et disons maintenant que nous voulons utiliser la vieille école enlever l'enfant et la méthode. On fait ça. Rappelez-vous que dans ce cours, nous nous avons vu, eh bien, c'est un peu bizarre parce que nous arrivons à la LI, nous n'avions pas besoin d' accéder à ses parents et ensuite de retirer son enfant pour se retirer lui-même. Je sais que ça a l'air bizarre. Donc, nous devons accéder à notre variable, nous devons ensuite accéder à son élément parent, et ensuite nous pouvons supprimer la craie. Et bien sûr, l'enfant que nous voulons enlever est lui-même. Voyons donc si ce code fonctionne avant de commencer à l'améliorer. Allons vers le bas navigateur et il essaie de déplacer la classe des enfants. Évacuation de la fumée. Qu' ai-je fait de mal ? Allons au dessus de la console. L' enfant supprimé n'est pas une fonction. L' enfant supprimé n'est pas une fonction. Pourquoi ? Devrait être un C majuscule ? Refroidisse, c'est là que l'analyseur JavaScript est atroce genou précis. Donc l'ego, si mettre un C majuscule qui devrait fonctionner, Astronomie déplacer le sucre et les épices et il est retiré. Comment cool quelque chose à boire, pizza et MLK. Jour, nous allons si supprimé tout. Comme c'est génial. Mais comme je suis ancienne, allons à notre code. Ce n'est pas le moyen le plus efficace de le faire. Je veux que vous arrêtiez la vidéo ici. Tu sais quoi ? Je vais arrêter la vidéo ici. Dans la prochaine conférence, nous ferons la nouvelle et améliorée façon de faire exactement la même chose. Mais nous allons utiliser des bulles d'événements, toute délégation d'événements qui avant de donner cette solution, donnez-lui un avis. Et dans la prochaine conférence, nous allons le découper ensemble. 9. Suppression des éléments DOM - La nouvelle façon: Premièrement, comment allons-nous structurer cela ? Et il utilise même bouillonnant. Si nous obtenons notre fichier d'index ici et que nous faisons défiler vers le haut, vous remarquerez que nous avons ces énormes éléments de hibou, n'est-ce pas ? Alors pourquoi ne pas mettre notre écouteur d'événement là-dessus et il peut écouter tous les haricots cliquables qu'ils bouillonnent. Alors faisons ça. Supprimons donc tout ce code parce que c'est très, très inefficace. Nous allons donc ajouter un écouteur d'événement sur ces éléments UL. La première étape est évidemment que nous devons saisir cet élément UL. Alors faisons cela en définissant une variable appelée liste d'épicerie. Vous possédez. Faute d'un meilleur mot, nous pouvons accéder à notre document ici. Nous pouvons accéder au sélecteur de requête parce que nous n'avons besoin que d'un seul élément, n'est-ce pas ? Et pour être précis, nous pouvons regarder dans notre emballage de liste d'épicerie. Et à l'intérieur, nous voulons attraper tout ce que vous prenez. Maintenant, ce que nous voulons faire, c'est que nous voulons ajouter notre écouteur d'événement. Alors comment on fait ça ? Eh bien, nous saisissons nos éléments URL. Il a une méthode appelée addEventListener. Nous allons écouter tout l'événement click, puis nous allons exécuter une fonction de gestionnaire. Et appelons-le supprimer. Donc, ici, nous pouvons définir une fonction de gestionnaire. Nous allons utiliser le mot-clé de fonction de JavaScript, nous l'avons appelé remove. Et nous y voilà. Les cœurs de l'opcode se trouvent dans ces bouclés ou indices. Nous allons exister dans l'objet événement. Nous savons que nous devons le mettre dans une variable. Nous l'appelons généralement variable E. Et nous allons avoir besoin d'accéder à une sorte de chute de veine tada à cause de l'action des États-Unis en disant le mot MLK. Nous ne voulons pas supprimer cet élément de la liste. Ce n'est que lorsque l'utilisateur clique sur le bouton Supprimer. Aka rappelez-vous qu'il a une classe de suppression. C' est seulement dans ce cas que nous voulons réellement exécuter cette fonction. Donc, tout d'abord, définissons une variable cible. Et ils peuvent être la cible réelle, alias cet élément qui phi a DVT. Maintenant, nous pouvons changer si la cible, si c'est Krosnick est égale à enlever Dean, nous voulons que quelque chose arrive. Neurones, nous voulons exécuter cette fonction. Sinon, nous voulons que rien ne se passe dans un rabais si l'utilisateur a cliqué sur cette bande et nous sommes entrés dans saisir son élément parent étant cet élément LI entier. Donc, définissons une autre variable appelée allié. Et nous savons que ce sera la cible, ce sera son élément parent. Est-ce que ça a du sens ? Ensuite, tout ce que nous avons à faire, bien sûr, est XY set éléments et utiliser la nouvelle méthode remove améliorée sur nous. Aujourd'hui, nous allons, j'espère que cela fait beaucoup de scènes et c'est une meilleure façon de structurer notre code. Alors allons dans notre navigateur et voyons si cela fonctionne. Essayons de supprimer MLC. Ça ne marche pas. Qu' ai-je fait de mal ? Allons à la console. Donc, ce n'est même pas voir ça. Ce n'est même pas dans le déclenchement de cet événement click. Allons ici. Oh, tu sais ce que je pense être le cas. Oui, le nom de la classe n'est pas enlevé la résistance. Si on va ici pour indexer, oui, c'est peut-être le problème. Le nom de la classe est supprimé. Comme on peut le voir, ce n'est pas enlevé. Cela devrait être supprimé. Revenons au navigateur. Essayons de supprimer le biais d'assurance. C' est donc une meilleure façon de structurer notre code et nous utilisons vraiment beaucoup d'encombrement de concepts avancés avec des objectifs de douceur. Donc, comme je ai du sens, je l'espère, mais dans le prochain âge et continuons à eux, nous avons fait la suppression des éléments logiquement, l'étape suivante devrait être d'avoir à comprendre comment ajouter des éléments à la liste. Vous pouvez le faire vous-même. Si nous allons au navigateur, restez. Mais ce que nous voulons, nous voulons que l'utilisateur tape quelque chose dans la zone de saisie ou lorsque l'utilisateur clique sur annonce. Nous voulions l'édition dynamiquement à la liste du prêt. Comment pourrions-nous faire ça ? Donnez-lui un peu de réflexion et la prochaine conférence, nous allons le coder pour l'obtenir. Sinon. 10. Introduction aux formulaires: Donc, maintenant, nous commençons à ajouter des éléments à une liste. Ça va vraiment être excitant et espérant et j'ai appris une tonne dans cette conférence. Alors, par où commençons-nous ? Eh bien, avant de commencer, le codage, les cerceaux ne sont presque pas faits. Un café Lama. C'était cette classe. Quoi qu'il en soit, comme je le disais avant de commencer à coder, je veux que nous discutions des formulaires un peu plus en détail. Rappelez-vous, dans la première partie de cette série DOM, que nous avons discuté de l'accès à la propriété du formulaire dans notre document. Laissez-moi vous montrer ce que je veux dire. Moi seul te le rappelle. Alors allons à notre console. Maintenant, nous allons et comment pouvons-nous accéder à nos formulaires taupe d'abord, nous accédons à notre document, la racine de notre page à emporter et document honnête fait une propriété par défaut fournie par le DOM appelé formulaires. Et c'est aussi facile et ce qui nous est retourné est une HTMLCollection. Nous avons vécu cela beaucoup plus en détail dans la série 1. Mais si nous ouvrons cette collection HTML, nous pouvons voir que nous avons deux formulaires. Et cela a du sens. Il représente littéralement nos formulaires dans notre HTML. Si on va se produire. Ceci est notre fichier index.html. On voit qu'on a deux formulaires. Le premier formulaire est dans notre section d'en-tête, puis il a un ID d'élément de recherche. On va y entrer plus tard. Pour l'instant, nous voulons traiter de la section 2. Ne twetez pas la conformité SRC. C' est là que l'utilisateur tape dans l'élément qu'ils veulent ajouter à la liste et cliquez sur Ajouter ledit saints de fabrication. Donc si on retourne à notre navigateur, comment existe-t-on à quatre heures ? Eh bien, il y a plusieurs façons et nous pouvons traiter comme un tableau dans certains cas. Plus précisément si nous voulons accéder aux éléments de cette collection HTML, qu'est-ce que je veux dire ? On peut accéder à ce formulaire exact. Nous avons gagné en accédant à la propriété du formulaire. Et puis un peu le traiter comme un tableau en utilisant les crochets. Et nous pouvons quitter le deuxième élément dans le tableau. Et c'est la forme que nous voulons. C' est une façon de le faire. Une autre façon de le faire est que nous pouvons réellement passer en argument. C' est ID, et nous savons qu'il a un ID d'ajout d'élément. Nous rendons ça et nous obtenons exactement la même chose. Ok, donc c'est un peu un résumé. C' est juste un peu d'info sur le côté. Maintenant avant de commencer à coder est une chose de plus que je dois vous montrer. Et c'est ce qui arrive avec les formulaires. Deux choses arrivent. Premièrement, un événement submit est déclenché. La deuxième chose qui se passe est que la page entière ne s'actualise pas. Laissez-moi vous montrer ce que je veux dire. Donc, disons que l'utilisateur supprime tous les éléments, mais le dernier dans cette pizza. Si nous voulons maintenant ajouter MLC et que l'utilisateur clique sur l'annonce, rappelez-vous quel est le comportement par défaut. Il faut envoyer l'événement est déclenché et à l'ensemble de la page se recharge. Cliquez sur Ajouter. Et ils allaient recharger la page entière. Et vous pouvez voir dans le coin supérieur gauche de notre navigateur, chaque fois méticuleux Ajouter rafraîchit le bouton. Watts. Nous ne voulons pas de ce Dewey, mais la chance pour nous de le faire est la façon dont nous pouvons empêcher le comportement par défaut. Laissez-moi juste sauter à l'écran rapidement et laissez-moi en parler un peu plus à ce sujet. 11. Comporter par défaut pour la présentation de formulaires: Avant de commencer à traiter notre formulaire, je pense que vous avez vraiment besoin de comprendre comment certains événements déclenchent le comportement par défaut et ce que nous pouvons faire en tant que développeurs pour contrôler quel type d'empêcher le comportement par défaut de se produire. Alors on y va. J' ai un fichier de code Visual Studio vide ouvert. Et je veux qu'on regarde l'étiquette d'ancrage. Plus précisément, que se passe-t-il lorsque nous cliquons sur un lien ? Quel est le comportement par défaut ? Et je vais vous montrer déjà que le comportement par défaut est d'ouvrir une nouvelle fenêtre de navigateur suivant ce lien, laissez-moi vous montrer ce que je veux dire. Alors on y va. allons juste créer un fichier index.html, un modèle HTML ici, nous pouvons littéralement avoir un élément de corps et juste une balise d'ancrage avec un lien. Et ça, il suffit de le lier à, je ne sais pas, Google. Il peut être n'importe quelle taille que nous voulons. La prochaine chose que je veux faire, c'est ouvrir un serveur en direct. Ouvrons rapidement notre serveur en direct. Attendez la Russie. Ça arrive. Bien sûr, avoir un goût intuitif. Moi idiot. Allons à Google. Et prenons ceci à gauche de l'écran. Et on y va. Il y a sur le lien. Et que se passe-t-il quand on clique sur ce lien ? Je suis sûr que tu le sais. L'utilisateur est redirigé vers Google.com. Ok, c'est un exemple très simple. Mais comment pouvons-nous empêcher ce comportement par défaut ? Eh bien, laissez-moi passer rapidement à une présentation et parlons de ça. Comme je viens de le mentionner, de nombreux éléments HTML présentent un comportement par défaut lorsque nous interagissons avec lui. Quel genre d'éléments jamais comportement par défaut ? Les images en disent beaucoup. Par exemple, lorsqu'un utilisateur clique sur une zone de texte, le comportement par défaut donne qui prend le focus de la boîte avec une petite période de curseur clignotant. Nous le savons tous quand nous allons dans la zone de texte d'entrée, ne vous inquiétez pas. L' utilisation de notre molette de souris dans une zone défilante fera défiler dans la direction que nous faisons défiler avec cette petite molette de souris. L' activation d'une case à cocher activera ou désactivera cet état de modification. En cliquant sur un lien, un lien de balise d'ancrage ouvrira une nouvelle page et dirigera l'utilisateur vers ce lien. Tous ces exemples sont des exemples de boulon dans les réactions aux événements, notre navigateur sait instinctivement quoi faire. La bonne nouvelle pour nous cependant, est que nous pouvons désactiver ce comportement par défaut et quand nous ne le voulons pas. Et nous pouvons le faire parce que nous avons beaucoup de contrôle sur le navigateur, a les développeurs. Ok, cool, tout est bon et bien, mais comment pouvons-nous désactiver ce comportement par défaut ? Si nous voulons activer ce comportement par défaut ou nous pouvons appeler la fonction par défaut de la province. Cette fonction doit être appelée lors de la réaction à un événement sur l'élément si la réaction par défaut que nous voulons ignorer. Alors n'oubliez pas que nous devons y accéder sur l'objet d'événement lui-même. Et je suis porteur de bonnes nouvelles aujourd'hui parce que la méthode preventDefault peut être utilisée sur de nombreux éléments, tels que les liens, les boîtes de saisie, formulaires, les cases à cocher, cetera, et cetera. Mais maintenant, revenons à notre exemple de la balise d'ancrage et voyons comment nous pouvons empêcher son action par défaut de se produire. Est-ce que ça a du sens ? Je l'espère. Mais comment accéder à la méthode preventDefault ? Retournons ici à notre éditeur de texte. Allons élargir cette mignonne. Comment pourrions-nous accéder à l'endroit où cela vient et comment cela fonctionne-t-il ? Eh bien, tout d'abord, nous voulons utiliser JavaScript. Nous allons donc ajouter une balise de script au bas de notre fichier. La première chose qu'on veut faire est d'accéder à cette balise d'ancrage. Et nous le savons maintenant. Ce sont de nombreuses méthodes d'accès différentes. Mettons-le dans une variable JavaScript, et donnons à cette variable un nom de dire, ancre. Nous pouvons accéder à cette variable en commençant et je vais documenter l'objet. Et le jour, nous avons beaucoup de méthodes de x. Celui que je vais utiliser maintenant est getElementsByTagName. Le nom de la balise que nous voulons est notre balise d'ancrage. Et rappelez-vous ce que ce getElementsBytagName nous revient. Il nous renvoie une HTMLCollection. S' arrêter ici n'a pas assez. Nous devons en fait dire au navigateur quel élément de la collection nous voulons. Dans ce cas, il n'y a qu'un seul article dans la collection. Nous voulons donc accéder au tout premier élément de la collection. Alors, voilà. On a une étiquette d'ancrage. Tout ce qu'on veut faire maintenant, c'est qu'on doit joindre un écouteur d'événement. On ne le fait pas ? Cliquez sur écouteur d'événement ? Nous pouvons le faire en accédant à notre variable sur le net. Nous avons une méthode par défaut fournie par le navigateur appelé add event listener. On a vécu ça de nombreuses fois et tu t'ennuies probablement de cette banane. Et au lieu de définir notre propre gestionnaire d'événements personnalisé dans une autre fonction, je vais juste le faire correctement dans le deuxième argument. Et je vais utiliser la syntaxe de flèche. Simple à trois voies. C'est juste de mettre un espace là. Alors on y va. C' est notre fonction de gestionnaire. Et qu'est-ce qu'on veut faire ? Eh bien, tout d'abord, nous voulons empêcher le comportement par défaut. Ce comportement par défaut se trouve sur l'objet d'événement lui-même. Et vous souvenez-vous comment accéder à cet objet d'événement ? Nous devons le mettre dans une variable, et nous la mettons généralement dans une variable appelée e. Donc, tout ce que nous avons à faire pour empêcher la valeur par défaut est que nous devons accéder à cet objet d'événement sur le ils est une méthode appelée prevent default. Et parce que c'est une fonction, volonté, parce que c'est une méthode, nous devons la suivre par parenthèses. Aujourd'hui, nous allons et nous avons empêché le comportement par défaut. Et juste pour finir pour l'exemple cool de la santé, ce que je veux faire est que je veux accéder à variable ANCA et ensuite je veux changer son contenu texte. Et nous pouvons simplement dire que le comportement par défaut a été empêché. Qu' est-ce qui se passe ? Oui, tu l'as. On l'a et si on y va, c'est tout le navigateur. Élargir les États-Unis. Revenons en arrière et rafraîchissons notre page. Qu' est-ce que tu crois qu'il va se passer maintenant, laisse-moi juste zoomer. Selon vous, que va avoir le null lorsque l'utilisateur clique sur ce lien. Eh bien, essayons-le. Cliquez sur le lien. C' est cool, ça n'a pas d'importance. Donc maintenant, vous venez d'apprendre à empêcher le comportement par défaut. R. Nous n'avons pas été redirigé vers Google et d'avoir changé, prend soin de cette colère lorsque nous cliquons dessus. Alors on y va. Je voulais juste vous montrer comment nous pouvons commencer avoir plus de contrôle sur le comportement par défaut. Bien sûr, en ce moment, nous n'avons pas traité le formulaire, mais c'est ce que nous allons faire lors de la prochaine conférence. Nous allons commencer à traiter ce formulaire avec l'utilisateur veut ajouter des éléments à la liste ShoppingList. On se voit maintenant. 12. Ajouter des éléments de manière dynamique: Maintenant, nous entrons dans le moment vraiment excitant d'ajouter des articles à notre côté. Comment pouvons-nous le faire, si nous allons à notre fichier app.js, vous pouvez voir ici nous avons fait supprimer les éléments. Laisse-moi juste copier ça. Frapper les émeutes et c'est non-stop. Créez une nouvelle section où nous voulons ajouter des éléments. Par où commençons-nous ? Eh bien, si nous allons à notre fichier index.html et si nous faisons défiler vers le bas dans notre fichier d'index, nous arrivons à la section Alice deux, c'est notre formulaire avec l'utilisateur ajoute un élément et rappelez-vous le comportement par défaut d'un plein. Chaque fois que nous voyons un bouton dans un plein et que l'utilisateur clique sur ce bouton, un événement submit sera déclenché, mais pas sur le bouton lui-même qui sera tiré sur cet élément de formulaire. Donc, la toute première si nous voulons faire est que nous voulons écouter l'événement submit sur l'élément de formulaire, n'est-ce pas ? Mais alors, nous voulons éviter les défaillances de la dette. Donc, si nous allons à notre fichier app.js, la première étape consiste à saisir cet élément de formulaire. Et pour ce faire, mettons-le dans une variable appelée un format de tableau. Et nous pouvons accéder à notre objet document. Sur cela, nous pouvons accéder à une méthode appelée get element par ID et nous lui avons donné un ID d'addItem. Rappelez-vous pour cela notre fichier d'index, Compte tenu de ce formulaire, un ID de AddItem. Voyez comment nous allons avec l'accès à notre plein dès maintenant. La prochaine chose que nous voulons faire est que nous voulons ajouter un écouteur d'événement. Ne joignons-nous pas un écouteur d'événement ? Nous accédons donc à notre formulaire et à notre variable. Nous voulons ensuite ajouter un écouteur d'événement, mais cet événement n'est pas un événement de clic est nous. C' est une soumission. C' est ce qu'on veut écouter. Et puis bien sûr, nous voulons exécuter une fonction de gestionnaire. Nous allons accéder à cet objet d'événement. Rappelez-vous, nous devons, afin d'utiliser cette méthode par défaut, nous allons la mettre dans une variable appelée e. Ensuite, nous allons utiliser la nouvelle syntaxe de flèche améliorée. Et nous allons définir comment un gestionnaire fonctionne dans ces accolades. La première chose que nous voulons faire est de ne pas rafraîchir la page. Et pour ce faire, nous devons accéder à notre objet événement et nous utilisons la méthode par défaut. Oui, on l'a. Allons dans notre fichier d'index et remontons notre site sur Live Server. Pour cela est zoomé ou zoom arrière sur un 100 pour cent. Et disons que l'utilisateur supprime tous les éléments sauf un, puis ils écrivent quelque chose dans l'air et cliquez sur Ajouter. Vous pouvez voir maintenant la page n'est pas rafraîchissante. Donc il obtient un lentement mais sûrement, revenons à notre code. Et revenons à notre fichier JavaScript. Quelle est la prochaine déclaration ? Eh bien, si vous allez sur notre site, encore, l'utilisateur va taper des litres et goûter dans cette boîte de saisie à ce sujet. Et qu'est-ce qu'on veut qu'ils fassent, c'est qu'ils saisissent ces commentaires. Il prend dans cette boîte de saisie. Et puis nous devons modifier en tant qu'élément de liste quand ils cliquent sur Ajouter. Alors attrapons cette entrée savoureuse. Et comment on prend des textos ? Tout ce que nous pouvons utiliser une autre des méthodes de x qui utilisent QuerySelector dans ce cas, c'est tout ce que nous devons faire ici est de saisir les utilisations. Nous pouvons quitter la table des utilisateurs en utilisant un sélecteur de requête et nous cherchons les éléments d'entrée. Et dans l'élément d'entrée, il y a une propriété appelée valeur, et il nous renvoie la valeur dans le champ de texte d'entrée. Laissez-moi vous montrer ce que je veux dire. Donc, définissons une variable appelée texte, et ce sera ce que l'utilisateur a tapé dans cette zone de saisie. Nous devons prendre le formulaire et la propriété. Et comme je l'ai mentionné, nous pouvons utiliser une méthode d'accès appelée sélecteur de requête. Maintenant, nous pouvons être très précis encore. Nous ne pouvons pas, nous ne pouvons pas simplement utiliser le sélecteur de requête d'entrée et ensuite obtenir cette valeur. Et pour vous le prouver, il suffit de consigner le texte. Allons à notre navigateur. Et regardons la console. Et il est enseigné piano, MLK et cliquez sur Ajouter. Et ils allaient avec obtenir le MLK affiché pour nous avec littéralement obtenu qui prend de la valeur de cette boîte de saisie. Je t'ai dit que ce n'était pas si difficile. Mais revenons à notre éditeur de texte. On peut être plus précis. Par exemple, disons que vous avez quelques types différents de champs ou d'éléments en entrée. Mais dans ce cas, nous ne voulons que celui avec type de carte de goût. Nous pouvons le faire aussi bien pour être plus spécifique dans le navigateur GUDDAT, encore une fois, il est juste tout déchirer et disons juste des épices de sucre. Et nous cliquons sur Ajouter et nous obtenons le patron de la rusticité. C' est juste si vous voulez être plus précis. Mais dans ce cas, nous savons que nous n'avons qu'une seule entrée, donc nous n'avons pas à gérer ça. On peut juste garder ça très, très simple. Supprimons cette console parce que nous savons que cela fonctionne. Quelle est la prochaine date maintenant ? Mères célibataires, nous voulons ajouter l'élément de liste sur notre navigateur. Nous voulons littéralement ajouter un autre élément de liste comme Sugar and Spice. Nous voulions en ajouter un nouveau. Et comment on fait ça ? Eh bien, nous devons d'abord regarder son maquillage. Index. Qu' est-ce que vous remarquez à propos de chaque article ? Vous pouvez voir qu'il y a une étiquette LI. Et dans chaque élément LI, nous avons deux travées. Le OneSpan a une classe d'article et c'est l'article que l'utilisateur souhaite acheter. Et puis l'autre plage est ce bouton de suppression. Et bien sûr, nous avons différentes clauses qui définissent ce style. C' est donc ce que nous devons créer chaque fois que l'utilisateur clique dessus bouton Ajouter. Ne vous inquiétez pas. Revenons à notre dossier ici. Et laissez-moi juste remonter ce qu'on veut. C'est ce qu'on veut. Et je le ferai, et les deux travées. Commençons donc à créer moins maintenant à chaque fois que l'utilisateur clique sur le bouton EdX. Donc, disons ici, créer des éléments dynamiquement. Et nous avons parcouru cela en détail dans la partie 1 de cette série DOM. Donc, vous devriez être très familier avec ça. Regardez cette image maintenant, qu'avons-nous besoin de créer en premier ? On doit créer une heure, je ne m'inquiète pas. Donc, définissons une variable appelée allié. Et bien sûr, nous pouvons accéder à notre document et est une méthode appelée créer des éléments. L' élément que nous voulons créer est que les éléments Ally. Et puis nous devons créer deux autres éléments. Ne vous inquiétez pas, nous en avons besoin pour l'épicerie et nous en avons besoin pour le bouton Supprimer. Donc, définissons deux variables. Disons que c'est le nom de l'épicerie parce que c'est le nom de l'épicerie que nous ajoutons à notre liste. Et on va aller documenter. Bien sûr, nous devons créer un élément et dans ce cas, ce sera un élément span. On va faire exactement la même chose, mais on n'a pas besoin d'un nom d'épicerie maintenant, on a besoin, c'est vrai, d'un bouton Supprimer. Alors appelons-le le bouton de suppression. Et en passant, je ne sais pas si vous pouvez le voir aussi clairement, mais l'IDE a grisé ces noms de variables. C' est en fait une couleur grise, pas blanche et grise parce que ça nous dit que nous n'avons pas encore utilisé ces variables. Donc c'est juste un peu intéressant, pour info. Nous avons donc créé nos éléments. Nous savons maintenant que les travées toutes imbriquées dans l'élément LI le jour. On peut voir ça. Alors faisons ça. Laissons un peint aux éléments LI et comment obtenons-nous des choses aux objets ? Encore une fois, nous l'avons fait en détail auparavant. Tout ce que nous avons à faire est x élément LI ESL et nous accédons à une propriété appelée un enfant douloureux. L' enfant que nous voulons peindre dans ce cas est épicerie nommé pour celui et vous avez lancé le deuxième que nous voulons peindre à qui est ce bouton Supprimer. Bouton Supprimer. On y va. Pourquoi pensez-vous que ça va marcher ? Ça fonctionnerait en fait. Sauvegardons ça. Scarabée Rosa. Laissez-moi taper la main via MS cliquez sur Ajouter. Il n'est pas ajouté à notre DOM, n'est-ce pas ? Et encore une fois, nous en avons discuté beaucoup de détails dans la première série. Ce qui se passe maintenant, c'est que nous avons créé tous ces objets, mais ils flottent un peu dans l'espace. Nous devons l'ajouter au DOM, nous devons l' attacher à un parent d'une manière ou d'une autre. Alors comment on fait ça ? Eh bien, si nous allons à une prochaine automne, qu'est-ce qu'on vient d'attraper cet élément UL cacahuète à ça ? Donc, si nous allons à nouveau à notre script et le fichier ab.js, il ne vous attrape pas. Je vais l'élément. Donc tout ce qu'on a à faire ici, c'est qu'on vous dit tard, je serai le document. Récupère les éléments par nom de balise. Nous pouvons accéder aux trucs cool ou tours et HTMLCollection et nous voulons le premier élément UL à l'intérieur. Tout ce que nous avons à faire maintenant est de toucher nos citrons nouvellement créés au domino. Est-ce que ce genre de faire S2 ? Je l'espère. Donc, pour le toucher, c'est très simple. Nous saisissons notre élément parent d'URL et encore une fois, nous accédons à un enfant de douleur et l'enfant que nous voulons ajouter est l'allié. Est-ce que ça a du sens ? Alors on y va. Sauvegardons ça. Allons à notre navigateur. Disons, ou disons de la bière, juste pour être différent de ce que nous avons. Et ajoutons. Et regarde ça. Nous avons littéralement édité l'allié, mais comme vous pouvez le voir, nous n'avons aucun goût à ce qu'ils mangent comme avant nous nous occupons de ça, prend de l'aspect, jetez un oeil à notre inspection DAW sur, regardons les éléments. Nous avons littéralement édité dynamiquement cet élément LI. Oui, les travées sont vides, mais vous devez célébrer nos succès jusqu' à présent et nous le faisons dans une approche étape par étape. Si nous le faisons à nouveau et que nous cliquons sur Ajouter, vous pouvez voir qu'il est modifié dynamiquement pour le chien. Très, très cool et allié élément avec deux travées. Encore quelques choses que nous devons faire pour finaliser. La première chose est que nous devons ajouter du texte alt. Deuxièmement, nous devons ajouter ces articles. Alors je veux que tu réfléchisses à la façon de faire ça. Et à la prochaine conférence, on finira ça ensemble. On se voit maintenant. 13. Ajouter des cours: Ok, donc oui, on est tous là où on s'est arrêté. Et rappelez-vous, nous avons créé cette LI, éléments dynamiquement. Donc on a un peu le squelette en place pour y ajouter la viande, n'est-ce pas ? Comment on fait ça ? Nous allons d'abord ajouter le contenu. L' élément a des données de sortie ensemble. Et ajoutons six. Et rappelez-vous que si je fais défiler vers le haut et que je suis survenu, nous avons réellement défini une variable appelée goûts que nous n'avons pas encore utilisés. Et c'est le goût des États-Unis est écrit en HTML dans ce champ d'élément d'entrée. Alors ajoutons ça maintenant. Est-ce qu'on va éditer aussi ? Si vous regardez ce nom d'épicerie decks façon dont nous voulons ajouter l'entrée prend contenu dans la dentine. Donc, tout ce que nous devons faire, c'est avoir accès à ce nom variable d'épicerie. Nous voulons que son contenu de texte soit signé à la valeur de cela prend d'accord est si simple ? Et ils se terminent par un bouton de suppression. Pour supprimer la variable de bouton que nous avons créée ci-dessus. Nous voulons également mettre du contenu dans cet élément span. Et le jour du contenu Nous les est juste de mener un très simple. Et si nous allons à notre navigateur et juste actualiser cette page, ajoutons avoir BIA et c'est bon à cela. Comme vous pouvez le voir, nous ne sommes pas tout à fait fait tout ce que nous n'avons pas résolu correctement. Pourquoi est-ce supprimer, pas poussé vers la droite. Que se passe-t-il ? Et si nous ouvrons notre Divya et nous donnons à l'article nous nœuds dans la liste d'épicerie. Si nous ouvrons l'URL et que nous allons réellement à cette balise LI, Regardons ce qui se passe. Nous avons édité le goût, ce qui est génial. Mais vous pouvez voir que les classes sont appliquées à cela. Et ce que cela signifie, bien sûr, c'est qu'il n'y a pas de style. Comment ajouter cela ? Revenons tot prend des données. Commençons à penser à ça. Disons d'ajouter des clauses. Comment ajouter des lancers ? Gagner volontiers par jour sont de quelques façons. Si on va à notre navigateur ici, il y a notre console. Laisse-moi te montrer une façon. Donc, tout d'abord, disons que notre document de réservoir obtient des éléments par nom de balise. Et nous voulons la balise LI. Si nous retournons cela, nous obtenons et HTMLCollection. Et nous pouvons voir que nous avons cherché des balises LI à l'intérieur. Nous voulons celui que nous allons juste ajouter, pas via edit. Alors on y va. Maintenant, ils devraient être cinq. Tiges avec un 50 alliés. Le jour ne dépasse pas le dernier. Celui que nous venons d'ajouter un imprimé, nous pouvons voir del know clauses appliquées à nous. Une façon d'éditer la classe est de simplement éditer, refroidir via les compteurs de propriétés ClassName. Alors, qu'est-ce que je veux dire par là ? On a juste accès à cet objet. Nous avons ClassName et nous pouvons ajouter nos propres maths de classe. Disons juste que ça a un goût de cannes. Si nous existons maintenant cet allié et que nous revenons à nous, nous pouvons voir ces éditages, cette classe de goûts. Donc net est une façon, mais quelle est la chute majeure a été cette ? Will, le principal inconvénient, c'est qu'il l'emporte sur tous les autres articles. On ne peut que faire ça. Une clause. Par exemple. Le troisième que je vais prendre c'est la pizza et nous a fait changer maintenant sa propriété de faux nom au goût. Si nous faisons cela, et nous quittons le LI écrasé d'autres clauses si elle avait d'autres lancements. passant, par exemple, si nous quittons cette perte de bande de l'élément et le remplacons par la propriété ClassName, il supprimera effectivement la classe de l'élément. Est-ce que ça fait des saints ? Je sais que cela peut sembler un peu déroutant, gardez à l'esprit tout ce que j'essaie de traverser est que l'utilisation la propriété du nom de classe remplace les pertes. Vous ne pouvez pas en ajouter plus d'un. A partir, vous pouvez voir que le nom de la classe est un peu maladroit. Ils ont toujours fouetté autour. Alors disons maintenant que nous voulions ajouter sur cela, sur l'allié, prendre une autre classe. Ce qu'on pourrait faire, c'est avoir accès à cet allié. Le nom de la classe, le Danois. On aurait pu concaténer les nouveaux creux dessus, disons T2. Donc maintenant, si on fait ça et qu'on accède à Ally, tu verras un autre problème. G, qu'est-ce qui se passe ? Oui, je le suis. Aujourd'hui, tu dois des jours. L'autre problème que t-statistique à néant. Qu' est-ce que vous devez vous rappeler de faire lorsque vous modifiez ceux-ci ? Tu dois mettre une CIA. Ils peuvent. Quand on y accède, ça devrait marcher. Il a le goût comme un nom de classe distinct, mais vous pouvez voir que c'est un moyen très lourd. Il y a une meilleure façon. Qu'est-ce que c'est ? Tu te souviens ? Revenons à nos données textuelles. Alors, quelle est la façon nouvelle et améliorée d'ajouter des pertes dynamiquement ? Il utilise l'API de liste de classes qui a été introduit par la spécification HTML5. Nous avons vécu ça dans des conférences précédentes. Il a beaucoup de méthodes cool disponibles pour nous, bascule supprimé ou exemples. Mais celui que nous voulons utiliser est ajouter et modifier, super facile à utiliser. Tout ce qu'on a à faire, c'est que je vais l'élément. Nous voulons ensuite accéder à l'API de liste que Damon a une méthode appelée add. Et nous voulons ajouter une clause, ne tweet pas. Et la classe que nous voulons ajouter de manière froide, et nous voulons faire exactement la même chose avec le bouton Alt Supprimer. Nous voulons accéder ou supprimer le bouton, l'API de liste de classes. Et nous voulons ajouter une clause, supprimer à froid. Si nous les États-Unis et aller à notre navigateur, nous pouvons supprimer cela. Maintenant. Ajoutons maintenant VIA, Cliquez sur Ajouter. Et comment c'est ? On verra juste un peu. Vous pouvez donc voir qu'il a été ajouté dynamique. Nous ne pouvons pas le supprimer à nouveau. On peut dire et écouter, on n'en a pas besoin. Nous avons besoin de ce qui va finir qui peut ajouter du théâtre aussi. Impressionnant, soyons édités. Clé dynamique du DOM. Prenez un reniflard. Célébrez vos succès parce que vous venez long, long chemin. Et vous pouvez commencer à voir comment nous pouvons appliquer les connaissances que nous avons apprises dans ce cours entier pour créer des pages Web dynamiques, Greenwald. Et maintenant, je veux que nous continuions à vapoter les côtés. Que pouvons-nous faire ensuite ? Qu'avons-nous traité avec les listes de masquer, case à cocher à côté de vague, nous cochons qu'Allah toute la liste de courses est caché et réfléchir à la façon dont nous pouvons le faire. Et puis le prochain agent qui pourrait le modifier. Complexe, je suis Sue bananes, je suis super excité. C rien. 14. Cacher et unhiding les éléments de notre liste: Ok, donc nous y voilà. Et l'étape suivante est d'obtenir ce wiki de case à cocher masquer. Comme vous pouvez le voir maintenant si nous allons et cochez ces listes de masquage, rien ne se passe. Comment pourrions-nous faire ça ? Avant de commencer à coder ? Je veux que vous compreniez quelque chose quand il s'agit de cases à cocher et cou est un événement unique est déclenché chaque fois que nous cliquons une case à cocher. Ce n'est pas un événement click. C' est un changement de faisceau pour le satisfaire. Donc, si nous allons à notre code, Ouais, nous regardons notre HTML et nous regardons cette div avec un ID de changement. Et nous voyons cette case à cocher d'entrée. Nous pouvons voir que je vais cocher les cases pour trouver dans cet élément d'entrée ce type de case à cocher. Et chaque fois que cette case à cocher est totalement un événement de changement est déclenché qui bulle jusqu'à ce div avec un ID de changement. Mais quelle est exactement ce changement de veines vous donnera très rapidement un bilan de l'iniquité. Vous vous demandez peut-être que nous, l'événement de changement vient de. Et laissez-moi juste dire qu'il est hérité de l'interface de l'élément HTML. Et puis vous pensez peut-être, eh bien, si cela provient de l'interface des éléments HTML, cela signifie que tous les éléments présentent un inconvénient et que ce n'est pas le cas. Le changement de faible disponible uniquement sur certains éléments. Pas tous. Par exemple, le changement en vain ne déclenche pour l'entrée un élément select et prend de l'ère dans les moments où l'altération de la valeur de l'élément est commise par l'utilisateur. Et cela signifie que pour notre case à cocher, celle que nous venons de voir, un événement de changement sera déclenché chaque fois que le site principal de ceci et change i0 chaque fois que l'utilisateur clique sur cette case à cocher. Et juste un peu de fichier, vous pourriez penser que c'est très similaire à l'événement oninput. Mais la différence, oui, subtil D sur l'événement d'entrée se produit immédiatement hors de la valeur d'un élément a changé. Alors que ce changement en vain à Sony soumis venteux et veines, sorte de mise au point perdue offrira, le contenu a été changé. Alors Zach, j'ai du sens. Je l'espère, mais nomme la coupe douce, vous verrez à quel point c'est simple. Donc c'est bien. Notre fichier JavaScript volé au sommet a été fait à des atomes. Copions ça. Et maintenant, nous voulons cacher des éléments. Voyez comment on va. On a des éléments du cœur, qui détestent. Comment va-t-on faire avec nous ? Qu'est-ce qu'on va faire ? Eh bien, de nombreuses façons d'éplucher un chat. On pourrait utiliser la délégation de veines. Nous pourrions écouter le changement de div globale Anton. Mais dans ce cas, je ne veux pas faire ça. Et c'est pourquoi vous ne pouvez pas simplement suivre une règle en ce qui concerne le codage. La raison pour laquelle je ne veux pas utiliser une délégation de veine ici est que vous devrez alors accéder à la cible de l'événement pour déterminer si les cases à cocher ont été cochées ou non. Et je pense juste que c'est un moyen plus facile si nous travaillons directement sur cet élément d'entrée lui-même. n'y a aucune raison pour nous d'utiliser une délégation veineuse ici. Ça ne nous profite en aucun cas. Donc la première chose que je veux faire est que je veux attraper cet élément d'entrée, aka je veux qu'on prenne cette case à cocher. Donc, définissons une variable JavaScript et appelons-la juste case à cocher. Et ça va être un document. Utilisons QuerySelector 1 ons sélecteur de requête. Et la sélection de requête que nous voulons obtenir est que nous voulons obtenir cette entrée avec l'ID all. Je pense que nous sommes assis idée du VIH. Si on va à notre fichier d'index, on fait défiler ici. Cet élément d'entrée a un ID de cool, donc nous l'avons juste. Bien. L' étape suivante est la boîte de chaîne honnête. Ajoutons un écouteur d'événement. Mais les veines Navi, nous voulons écouter un jeu de données particulier. C' est le changement. Et puis bien sûr, nous voulons exécuter une fonction de rappel sont gestionnaire. Et nous allons le faire correctement dans cette méthode d'écoute publicitaire. Et qu'allons-nous faire de nouveau, une des choses que nous devons faire est de déterminer quel élément, élément global nous voulons cacher. Donc encore une fois, passons à notre HTML. Faites défiler ici. Nous pouvons voir dans la section 3, nous avons lu Allah toute la liste d'épicerie dans un élément parent global avec un ID de liste d'épicerie. Et c'est exactement pourquoi j'ai toujours aimé structurer mon code était un représentant général. Parce que tu ne sais jamais quel genre de codage tu veux faire à l'avenir. Et il ajoute très facile pour nous de l'attraper et de le cacher. Alors disons-le ça en temps de sorte qu'on y aille. La prochaine chose que je veux faire est de définir la liste d'épicerie. Et puis peut être à nouveau l'objet document. Nous devons commencer la date et nous pouvons obtenir élément par ID et nous savons que l'ID est des listes d'épicerie. Prochaines cotes et nous voulons recueillir ce qui est le prochain état sera si les cases à cocher, nous voulons que tout caché est à tricher case est décoché. On le voulait, on pense Shun. Et chaque fois que vous venez à cette bifurcation dans la route, nous utilisons une déclaration if, qui vient de JavaScript. Alors, si et qu'est-ce qu'on va goûter ? Heureusement pour nous, quand un article est changé, il a une propriété appelée chaîne. Et puis la propriété sera vraie si elle est modifiée et fausse si elle n'est pas modifiée. Alors, qu'est-ce qu'on veut dire ? Oui, nous voulons dire que si la case à cocher est changée, nous savons qu'elle sera vérifiée du tout proche de true. Alors que voulons-nous arriver ? Voulons-nous prendre notre liste d'épicerie, n'est-ce pas ? Nous voulons accéder à une propriété solide qui est la propriété d'affichage sur cela et nous voulons enregistrer cela au symbole de jeu nul autre. Et nous savons que la déclaration else signifie que c'est Jake. Maintenant, dans ce cas, nous voulons essayer de prendre notre liste d'épicerie. Encore une fois, nous accédons à la propriété de style. C' est la propriété de l'esclave que nous voulons changer. Nous voulions devenir un ensemble de blocs faisant des espoirs de saints sur une plaque tournante. À ce stade, vous pouvez commencer à comprendre qu'il est très intuitif sur de comprendre comment les veines fonctionnent. Oui, dans ce cas, nous devions savoir que nous devions écouter l'événement de changement. Que ce sont le genre de choses qui sont littéralement vous prendre 30 secondes pour rapidement Google. Et vous obtiendrez le, vous comprendrez le flux de code. Vous comprendrez comment coder ces choses vous-mêmes. Alors de toute façon, allons à notre navigateur. Le fil dentaire. Faire sauter une trompette, c'est voir, voir comment on va et cacher notre liste. Cliquons dessus. Je vais beau comme il est caché. Et si on le décoche, il est affiché comme un bloc à nouveau, serait des amplis, s'amuser. J' apprendrais l'autonomie et le code de débogage, juste faire des graines. Si ce n'est pas le cas, regardez à nouveau la vidéo, si vous avez des questions et que vous l'avez perdu dans les questions et réponses, je suis là pour vous aider et je vous verrai dans la prochaine étape. 15. Réalisez un aperçu des écouteurs d'événement que nous avons utilisés: Je n'arrive pas à croire à quel point on a un CRC. Bien joué. C' est tellement cool. Je m'amuse beaucoup et j'espère que tu as beaucoup appris en chemin. Avant d'entrer sur maintenant une chose assez avancée et c'est nous passer par le filtre de recherche. Je veux juste récapituler ce qu'on a fait. Rappelez-vous que ce cours porte principalement sur les événements et la compréhension de manière très avancée et comment nous utilisons les soirées dans cet exemple très simple où nous l'avons utilisé de différentes manières. Par exemple, regardons ce bouton Supprimer. N' oubliez pas que lorsque nous cliquons sur Supprimer le supprime du DOM. Mais comment on le fait ? C'est vrai. Nous avons écouté le veto de Contiki sur cet élément particulier. Et puis on a utilisé l'assouplissement de la délégation, n'est-ce pas ? Parce que nous avons écouté cet événement click, pas sur chaque latin. Nous l'avons écouté sur l'étiquette UL. Et puis bien sûr, quand cet événement a bouillonné jusqu'à la balise UL, nous pourrions obtenir la cible, aka wood peut comprendre quel bouton a été cliqué dans l'élément parent étant la balise LI. Et puis, bien sûr, on retire ça du DOM. Est-ce que ça fait du SSD ? Et puis que s'est-il passé avec la chute de l'EDx ? Qu' est-ce qu'on a fait là-bas ? Eh bien, dans ce cas, nous avons écouté l'événement, pas l'événement click parce que nous savons que dans un bouton ou une entrée, cela a un peu donné par l'utilisateur dans un formulaire, un événement submit est déclenché. Alors ils tombent. Nous avons écouté l'événement submit sur le formulaire lui-même. Et ça a été vraiment épique parce qu'une fois que cela a été soumis, les anges ont tiré dedans ont créé un nouvel élément à la volée. Nous éditons ses pertes dynamiquement en utilisant l'API de liste de classes, puis nous éditons cela dans notre liste. C' est pourquoi une flotte ou un poulet OT. Et nous cliquons sur Ajouter. Il est édité dans le DOM et dynamiquement. Et bien sûr, nous avons dû empêcher à nouveau le comportement par défaut d'une soumission de formulaire, n'est-ce pas ? Nous avons dû utiliser la preuve par défaut. Et puis nous venons de couvrir cette case à cocher de la liste. Et encore une fois, nous n'avons pas écouté un événement click. Nous avons écouté un événement soumettre. Nous avons écouté l'événement de changement car une case à cocher a un changement de fichier d'index chaque fois qu'ils changent, l'état continue et continue. Et oui, il n'y avait pas vraiment besoin de délégation. On a juste écouté ces veines sur la case à cocher elle-même. Et bien sûr, quand une case à cocher est cochée, nous l'avons attrapé. Et nous avons jalonné sa propriété d'affichage au nano système. Très amusant. Et vous pouvez voir que nous avons écouté différents événements tout au long. Et c'est pourquoi j'ai choisi cet exemple, car il passe par beaucoup de types différents. Et vous pouvez voir à quel point chacun est logique. Il fait beaucoup de scènes quand vous comprenez intuitivement ce qui se passe. Maintenant, parlons de ça. Rechercher des éléments. Quand ils utilisent un commence à taper dans un élément de recherche, nous voulons et devons tuer ces éléments dans cette liste ci-dessous. Encore une fois, nous n'allons pas écouter un événement click car l'utilisateur n'a pas encore cliqué sur quoi que ce soit. Qu' est-ce qu'on va écouter ? Quand dans ce cas, nous serons à l'écoute de l'événement clé. Par exemple, si l'utilisateur l'appuie sur le clavier, dès qu'ils lèvent le doigt, nous voulons que notre fonction recherche tous les articles et je vais les listes d'épicerie qui ont ce personnage, Amy. Si le nom d'utilisateur parle I, L, K, par exemple, nous voulons alors saisir tout ce bloc de texte, le mot mole entier. Et nous voulons chercher à travers ça, à travers nos listes. Donc ça va juste être un autre V2 cool écouter, tomber. Et comme vous le verrez, ce n'est pas si difficile. Vous l'approchez pas à pas. J' ai entendu parler de signe pour avoir du sens. Si ça ne t'inquiète pas, on va le traverser ensemble. Et comme vous le verrez, nous allons le faire pas à pas. La seule chose que je veux les maintenir. On va faire face aux rayons. Nous allons traiter des méthodes sur ces effacer l'index noir. Et nous allons également faire une boucle à travers les tableaux et utiliser la méthode foreach. Si vous êtes un peu confus sur la façon dont JavaScript fonctionne, s'il vous plaît vérifier mon cours complet de grand maître JavaScript ou quoi que ce soit, c'est cool. C' est aussi un parcours amusant. Et je passe en revue exactement ce que JavaScript signifie dans ce cours. Donc, si vous avez été confus, poussé quelques uns, comprenez ces choses. Donc, à un niveau élevé de toute façon, ne vous inquiétez pas, je suis sûr que vous serez en mesure de suivre. Mais alors doit blubber, blubber. Allons-y et je te verrai à la prochaine conférence. Bonjour. 16. Comment accéder au champ d'entrée et à sa valeur: D' accord. J'ai juste une coupe de cheveux. Je me sens frais, je me sens bien. Et entrons dans les éléments de recherche. C' est très, très cool. Et encore une fois, c'est comme ça qu'on fait et par où on commence ? Eh bien, tout d'abord, vous pouvez voir que nous avons cette boîte de saisie et nous savons à partir de notre code que nous avons lu ceci sous un formulaire. Donc la première chose que nous devons faire est de prendre ce formulaire. Si nous obtenons notre code et nous dans notre fichier d'index pour le moment, nous pouvons voir que nous avons lu tout ce champ d'entrée dans une chute. Nous avons donné ce formulaire, un ID d'élément de recherche va monter en flèche loin si bon. Mais comment saisons-nous ce formulaire ? Il y a quelques façons qui a notre navigateur. Allons à la console. On y va. Il est clair, comment pouvons-nous attraper tout ce zoom dans un peu pour que vous puissiez voir, comme je l'ai mentionné, il y a quelques façons de commencer à jouer avec elle. Disons simplement que le formulaire de plomb est égal à document.getElementById. Et qu'est-ce qu'on a appelé ça l'élément de recherche. Voyons si cela fonctionne et nous allons la console déconnecter ce formulaire. Donc oui, nous obtenons le formulaire que nous l'ouvrons. Nous avons besoin de l'entrée directement. Alors peut-être ce que nous avons besoin de faire l'accès veineux à la forme. Et puis bien sûr, nous pouvons faire un sélecteur de requête. Et le sélecteur de requête est, nous pouvons obtenir l'entrée. Ça marcherait ? Et on y va. Donc c'est une façon d'obtenir le formulaire. Je peux mentionner les nombreuses autres façons si nous allons à notre code ou en fait nous n'avons même pas à aller à notre code. On peut juste prendre cet inspecteur d'éléments et regarder ces formulaires. On ne nous a pas donné d'identité. Donc, ce que nous pourrions faire dans notre code comme nous pourrions aller ici, nous pouvons lui donner un ID de l'élément de recherche. Sauvegardez que nous pouvons retourner à notre navigateur, effacer la console. Et nous allons définir maintenant formulaire égal document, obtenir élément par ID. Et l'ID qu'on lui a donné était un objet de recherche. Donc ils pourraient être une autre façon. On a adoré ça. Et nous obtenons le bus d'entrée. Ils sont de nombreuses façons d'éplucher un chat, n'est-ce pas ? Rafraîchissons ça. Dégagons la console. Allons à notre code et débarrassons de cet identifiant. Je veux juste te montrer une autre façon. Et nous allons utiliser le balancement d'un opcode. Ce qu'on va faire, c'est qu'on va définir une variable appelée formulaire. Et rappelez-vous qu'il y avait la propriété de ce formulaire dans notre document. Et nous pouvons l'utiliser pour accéder aux formulaires. Donc, si nous accédons à notre document et que nous accédons à cette propriété appelée formulaires, qu'est-ce que cela nous donne ? Donne-nous tous les formulaires de notre page entière, non ? Et on n'en a que deux. Nous avons le formulaire des atomes de recherche et nous avons également ce formulaire façon régulière que l'utilisateur peut décider ce qu'il veut ajouter à la liste. Donc, nous voulons faire face à ce premier formé laid. Donc, une façon de quitter le formulaire serait d'accéder à nos formulaires, HTMLCollection. Et encore une fois, il y a quelques façons de le faire. Nous pouvons soit accéder au premier élément dans le tableau, tout le formulaire avec un ID d'élément de recherche. C' est une autre façon de le faire. Et puis nous pouvons bien sûr accéder à notre sélecteur de requêtes. Et nous voulons obtenir la boîte de saisie. Et nous survolons cela et nous arrivons à ce que nous voulons par point à travers tout cela est juste pour vous donner une idée intuitive du nombre de façons différentes de faire quelque chose en tant que développeur. Cela dépend donc juste de votre style et de ce que vous vous sentez le plus à l'aise. Ok, c'était tout au long du chemin ? Commençons. La première étape est que nous devons saisir cette boîte de saisie ne pas semaine parce que nous avons besoin de saisir qui prend la saisie de l'utilisateur là dedans. Alors commençons à coder maintenant. Allons dans notre fichier d'application. La dernière chose que nous avons faite était de cacher des objets et de copier ça. Et maintenant, nous voulons rechercher des articles. Et comme je l'ai mentionné, la première chose que je veux que nous fassions est nous saisissions cette boîte de saisie de recherche. Donc, définissons une constante maintenant parce que cela ne va jamais changer, nous allons toujours faire référence à une seule boîte de saisie de recherche. Appelons ça la recherche. Et nous savons, au fait, juste avant que je continue la raison pour laquelle je mets des capitales, ils juste convention quand vous définissez une constante, variable qui chaque fois que le changement, en d'autres termes, pour le mettre en majuscules. Donc, quand nous le voyons dans notre code plus tard, nous savons que c'est une constante. Alors attrapons cette boîte. La première chose que nous pouvons faire est que nous puissions accéder à notre document et ensuite accéder à la propriété de ce formulaire. Et comme nous venons de le voir dans la console, nous savons que nous l'appelons rechercher des éléments. C' était l'ID de notre HTML complet. Et nous regardons cette forme. Nous savons qu'il a un ID d'élément de recherche. C' est exactement pour ça que je le fais. Ouais, ce n'est pas article à article. Donc heureusement, j'ai vérifié alors notre cou que nous voulons, bien sûr x est notre requête select API. Et nous voulons l'entrée. Ok, tout aussi bien. En bon, Nous avons notre contribution. Quelle est la prochaine étape ? Eh bien, chaque fois que l'utilisateur appuie sur la touche et lève cette clé, nous voulons écouter cet événement clé. Essayons. Ce n'est pas un événement click. Ouais, l'utilisateur ne soumet rien qui utilise juste littéralement taper du texte. Donc, ce que nous voulons faire maintenant, c'est que nous voulons ajouter l'écouteur d'événement. Donc, nous saisissons notre constante et nous accédons à la méthode add event listener. Et ici, nous voulons écouter la clé et la liste. Il suffit de définir notre main directement ici et nous voulons accéder à cet objet d'événement. Comme vous le verrez, cela utilise simplement la syntaxe d'erreur et notre viande du code va dans ces accolades bouclés. Rien de nouveau. Tu sais déjà qui c'est. Et juste pour vous assurer que l'événement keyup fonctionne, Soyons juste le journal de la console. Il fonctionne à l'écran. Alors allons sur notre console, ou désolé, allons dans notre navigateur. Allons à la console. Et allons là-dedans. Et maintenant, quand j'appuie sur une touche, appelez la barre d'espace, on s'aggrave. Oui. Donc, nous savons que nous avons enregistré un événement valide dans notre boîte de saisie, et je vais chercher la boîte de saisie. Et chaque fois que l'utilisateur clique sur Aquino, nous possédons littéralement vrai pendant cet événement et ce gestionnaire est en cours d'exécution. Ufo, j'adore ça, tellement cool. Ok, alors revenons à notre code et débarrassons de cette console. Quelle est la prochaine étape maintenant ? Est-ce que l'étape suivante est que nous voulons saisir l'entrée réelle prend elle-même. On ne le fait pas ? Dis juste, ouais, prenons le texte de l'utilisateur. Et comment on fait ça ? Eh bien, c'est très facile et pour vous le prouver, définissons une variable appelée texte. Et nous pouvons accéder à notre objet d'événement, cet objet d'événement keyup. Nous pouvons alors accéder à la cible étant des rétines à clé naturelle, et nous voulons obtenir sa valeur. Et si nous consoles le texte du journal, nous devrions le voir. Navigateur Tom. Allons vers la console. le Alors ce que je vais faire, on alejournal de la console des enfants à l'écran, B, C, D. C'est cool, non ? Et vous pouvez commencer à voir comment nous pouvons accéder aux enjeux et à la nouveauté. Maintenant, nous devons commencer à comparer ceci à ce qui est dans notre liste d'articles à acheter. Mais c'est quelque chose ici. Je veux te montrer. Si nous tapons un D majuscule et un OG. C' est sensible à la casse, n'est-ce pas ? En fait, nous obtenons un capital. Donc, si vous regardez dans nos tentatives d'achat de listes sur la page en ce moment et que nous regardons le lait, nous le voyons comme un M. majuscule donc si l'utilisateur tape un kilomètre, ok. Laisse-moi recommencer. Pour l'espace. Si l'utilisation de la fumée de temps sans un M majuscule, ne va pas être exactement égal aux enveloppes de capital du tout. Si l'utilisateur tape Koch, il ne va pas correspondre exactement à la coke en dessous de toutes les minuscules. Comment pouvons-nous faire face à ce problème ? En fait, c'est plus simple que vous ne le pensez. Eh bien, nous devons faire est de nous assurer que tout ce qu'il faut les types d'utilisateurs, nous voulons le convertir en minuscules. Nous voulons que la recherche soit insensible à la casse. Peu importe où les types d'utilisateur de majuscules ou minuscules. Il devrait toujours regarder le vrai mot juste lui-même. Alors comment on fait ça ? Eh bien, c'est très simple. Débarrassez-vous de cette console. Je vais commenter. Disons simplement que nous allons saisir les prises de l'utilisateur et le convertir minuscules en utilisant JavaScripts en méthode minuscule. Et c'est très simple à utiliser. Nous saisissons qui prend l'utilisateur tapé et nativement à nous directement sortir de la boîte est la méthode deux minuscules fournie par JavaScript. Et si nous consoles les listes de journaux une fois de plus, désolé, je sais que nous allons lentement, mais c'est si important pour vous de le comprendre. Allons-y, console Kayla. Et il est temps MLK capitales. Mais vous pouvez voir que nous avons converti tous les caractères en minuscules. C' est génial. Je vais m'amuser à apprendre une tonne. Je veux m'arrêter ici et je veux que nous parlions cette méthode ToLowerCase un peu plus en détail. Je sais que la plupart des conférenciers vont continuer tout de suite, mais je veux que vous compreniez exactement comment cela fonctionne et comment notre code fonctionne parce que cela vous aidera à devenir un programme génial. Et donc je veux juste que nous nous arrêtions maintenant et une unité pour discuter un peu plus en détail de ce que fait cette méthode en minuscules et comment elle fonctionne. On se voit maintenant. 17. Introduction à lowerCase: Crew, je suppose que ce que je viens de faire ce matin dès notre première fois, j'ai fait une séance de yoga et je suis brisé dans ce truc appelé la chose s'appelait l'Oiseau du Paradis. Des incendies m'ont fait exploser l'esprit. Quoi qu'il en soit, je souffre beaucoup en ce moment. Mais cela ne devrait pas nous empêcher d'apprendre JavaScript. Et très spécifiquement, je veux que nous apprenions à propos de cette méthode appelée à minuscules. Cela semble simple, mais je veux juste que vous compreniez exactement comment cela fonctionne parce que c'est une méthode très, très utile qui nous est fournie tout de suite par JavaScript. Maintenant, même si cela ne prend aucun argument, c'est une méthode super pratique. Pourquoi ? Eh bien, dans de nombreux cas, vous voulez votre texte ou vous voulez que vos chaînes soient insensibles à la casse. Aka, tu ne veux pas de capitales pour un faux, quoi que ce soit que tu fasses. Par exemple, si vous avez une liste et qu'un utilisateur tape un certain mot, parfois vous voulez voir ou vous voulez comparer si ce mot est dans la liste et que vous ne voulez pas que les majuscules ruinent vos formules. Dans ce cas, pourquoi ne pas simplement convertir tout en minuscules ? Et pour ce faire, nous utilisons les deux minuscules émises. Donc, sans plus tarder, nous allons sauter dans le cookie de présentation et il parle encore de la méthode deux minuscules, en profitant. Alors, quelle est exactement cette méthode TOLowerCase ? Très simpliste tout ce qu'il fait et c'est assez intuitif qui convertit votre goût tout en minuscules. En d'autres termes, la méthode ToLowerCase renvoie la chaîne appelant, la chaîne sur laquelle vous l'avez appelée. Il convertit cette valeur de chaînes en minuscules. Et je pourrais arrêter. Oui, mais je veux que vous en sachiez un peu plus sur cette méthode ToLowerCase. Tout d'abord, il est une fonction JavaScript nous est fourni par le langage JavaScript. Chercher ne prend pas d'arguments, mais ne laissez pas ça vous tromper. C' est toujours une méthode très puissante. Et ce que je veux vraiment que tu comprennes, oui. Et je veux m'arrêter sur ce point. La méthode en deux minuscules ne modifie pas la chaîne d'origine. Au lieu de cela, il génère la nouvelle chaîne modifiée avec toutes les lettres minuscules. Laisse-moi passer à la console et je te montre ce que je veux dire par là. Ok, Donc, nous savons que la méthode en minuscules n'affecte pas la chaîne d'origine. Je veux juste te le prouver maintenant. Comment vais-je y aller ? Eh bien, créons une chaîne et appelons ça les symptômes originaux. Et c'est juste dire que nous rendons ça égal à des grenouilles folles ou juste, eh bien, vous savez, fou. Comment ça va ? Et puis créons une nouvelle phrase. Donc le score de cette phrase plus bas. Et oui, je veux qu'on accède à notre phrase originale. Et c'est ce que je veux qu'on fasse ensuite. Je veux qu'on accède à la méthode des deux minuscules. Et ce qui est vraiment génial, c'est que parce que nous avons une chaîne et que cette phrase originale est une chaîne tendue, nous avons automatiquement accès à JavaScripts à la méthode en minuscules. Comment y accéder lorsque nous sortons avec la notation de points ? Et bien sûr, nous pouvons simplement commencer à taper en minuscules et notre IDE reprend déjà cette méthode. Donc, je peux simplement cliquer sur Tab ouvert et fermé parenthèses pour exécuter cette méthode. Et nous avons fini et saupoudré. Maintenant, je peux ouvrir un navigateur et nous pouvons consoles enregistrer les choses à l'écran. Mais je veux utiliser quelque chose appelé cloaca. Si on va à mes extinctions tibia, et que je commence à taper plus vite. Nous pouvons voir que j'ai installé Aka dans mon IDE. C' est vraiment, vraiment utile, donc fortement recommandé. Et tout ce qu'on a à faire pour faire tourner la cuisinière, c'est qu'on appelle littéralement la boîte de recherche ici. J' appuie sur Control Shift P sur mon clavier, et je veux démarrer cloaca sur le fichier courant. C' est juste un plug-in supplémentaire et il nous permet d' exécuter JavaScript en temps réel dans ce fichier. C' est le cas. Donc on y va et tout ce que je veux faire, c'est que je déconnecte l'original de la phrase. Et vous pouvez voir le bleu prend des données. C' est ce qui est consolé, jambes, ce qui nous est retourné par JavaScript et le Walker travaillant, il nous permet juste de voir comment un correctif en temps réel pour vous très utile. Que croyez-vous qu'il se passera quand on renverra la phrase plus basse ? Je suis sûr que vous nous avez probablement déjà deviné. Eh bien, ça va arriver, c'est qu'on obtient exactement la même chose qu'en minuscules. Mais ce que j'ai réussi à vous prouver, c'est que notre phrase originale, cette phrase originale que nous avons écrite ensemble est inchangée. Cette méthode ToLowerCase ne modifie pas cette chaîne d'origine. Ok, un peu faire des saints sont observés. Continuons. Ok, cool. Nous avons donc vu que cela ne modifie pas la chaîne d'origine. En fait, il en génère un nouveau. Mais à ce stade, vous pourriez toujours vous gratter la tête. Vous pouvez être cool et le bruit fourni par JavaScript. Mais nous le faisons exactement d'où ça vient. Et le début, c'est du tambour, s'il vous plaît. Il provient de l'objet chaîne en JavaScript. Et rappelez-vous juste que l'objet chaîne est un objet global pour toutes les chaînes. Encore une fois, laissez-moi sauter sur la console en images vous montrer où nous pouvons le trouver. Reprenons exactement où on s'est arrêté. Rappelez-vous que nous avons écrit la phrase, nous l'avons convertie en minuscules. Maintenant, je veux juste te prouver qu'il doit être sur une corde. Donc, une façon de le faire est d'utiliser le type d'opérateur. Donc c'est le journal de la console. Et allons-y type de et nous voulons regarder ce que notre type d'origine est. Et nous pouvons voir ce qui nous est retourné par JavaScript est un type de chaîne. Donc nous connaissons nos symptômes. La variable d'origine est une chaîne, et c'est pourquoi nous pourrions exécuter cette méthode ToLowerCase. Mais vous vous demandez probablement, façon est cette méthode exacte d'un Howdy voir ? Eh bien, c'est très, très simple. Allons ouvrir un navigateur. Donc, je vais juste faire un clic droit sur mon Chrome Mu Cognito. Et allons au cookie de la console. Allons ouvrir la console. Je fais un zoom avant pour que vous puissiez voir ce qui se passe. Et c'est très simple tout ce que je veux faire, c'est que je veux console et faire, en passant, est différent de la console journal, il nous donne tout ce que nous voulons faire. Mais dans le format JSON comme, dans un format arborescent. Et bien sûr, ce que je veux faire est que je veux obtenir un objet de chaîne JavaScript, parce que rappelez-vous que nous savons que notre phrase originale est une chaîne. Donc, nous savons que c'est de type chaîne. Et si on ouvre la ficelle, et encore une fois, il n'est pas grand chose ici. On a des liens, on a un nom. Mais ce que nous voulons regarder, c'est ce prototype parce qu'il hérite de beaucoup de méthodes et de propriétés. Et parce que c'est une chaîne, c'est prototype comme une chaîne ici, nous obtenons beaucoup de méthodes et de propriétés du type de chaîne. Et si nous faisons défiler vers le bas, nous devrions trouver deux minuscules. Et c'est là. On l'a trouvé, vous savez, s'installer d'où il vient. J' espère que ça a du sens. Nous n'avons pas tout à fait fini. Alors revenons à la conférence. Nous avons vu qu'il vient de l'objet de chaîne et d'un cas élevé, c'est assez intuitif qui ne fonctionne qu'avec des chaînes. Si vous essayez d'analyser dans d'autres types de données, tels que null undefined, nous même un nombre. L' analyseur JavaScript vous lancera une erreur. En fait, vous obtiendrez une erreur de type. Assurez-vous donc juste de prendre le type avant de l'analyser dans cette fonction. Sinon, votre application se bloquera. De quoi je parle ? Eh bien, laissez-moi sauter sur la console une fois de plus et conduit pensée codage ensemble juste pour voir cela en action. Une dernière chose avant de terminer ça, rappelez-vous que nous disions qu'il ne peut être utilisé que sur un type de chaîne ? Désolé, faisons défiler vers le haut. En fait, on vient de finir. On reprendra exactement là où on s'est arrêté sur la console. Alors, qu'est-ce que ça veut dire ? Eh bien, cela signifie que si nous avons un numéro, disons juste 85 et nous essayons d'accéder aux minuscules. Que crois-tu qu'il va se passer ? Eh bien, nous obtenons une erreur de syntaxe, jeton invalide ou inattendu. Nous ne pouvons pas l'appeler méthode TolowerCase sur un nombre. Ça a du sens. Qu' en est-il d'un tableau ? Donc, disons qu'on a une moraine avec un seul objet et qu'on s'appelle Bu. Et nous essayons l'accès aux minuscules est économique. Sachez que nous obtenons une erreur de type. Nous ne pouvons pas appeler cette fonction là-dessus. Qu' en est-il de l'indéfini ? Eh bien, si nous essayons d'accéder à nouveau aux minuscules sur indéfini, encore une fois, cela ne fonctionnera pas. Et maintenant si nous essayons null ? Je pense que ça marchera. Donc c'est le point que j'essaie de faire valoir. Nous ne pouvons accéder à la méthode TolowerCase sur les chaînes. J' espère que tu t'amuses et que tu te disputes beaucoup. Donc, c'est juste un peu plus de détails sur la méthode TolowerCase que vous ne saviez peut-être pas auparavant. Continuez, restez motivé. Et je te verrai à la prochaine conférence. 18. Accéder à et boucler nos étiquettes: Bon, revenons dans notre projet. J' espère que tu apprends beaucoup. Nous avons déjà vu cette méthode ToLowerCase. C' est génial. Des pourritures. Et maintenant, je veux que nous poursuivions nos recherches. Box est une sorte de comparer l'utilisateur prend que leur droit d'autoriser les articles à acheter. Et nous filtrons uniquement pour les choses que l'utilisateur a tapé dans cette case à cocher cette boîte de saisie, Désolé, donc nous sommes bien en ce moment. Rappelez-vous que nous avons cette boîte de saisie ici avec des éléments de recherche. Nous avons réussi à le trouver en utilisant les identifiants, les méthodes d'accès DOM. Et ce que nous avons également fait comme nous le savons sur cette boîte de saisie est une propriété utile appelée valeur, qui nous permet d'extraire ce que l'utilisateur a tapé dans cette zone de saisie de texte. Nommé parce que c'est une chaîne, parce que c'est une prise. Nous savons que nous pouvons utiliser JavaScript pour la méthode en minuscules pour convertir tout ce que l'utilisateur a tapé en minuscules. C' est exactement là qu'on a jusqu'à présent. Donc, je suppose que l'étape suivante est, sautons dans le code et continuons. Alors on y va ? Nous avons littéralement attrapé qui utilise la valeur. Rappelez-vous de la cible veine, qui est cette boîte de saisie comme une propriété utile appelée valeur. Nous extrayons la valeur de l'utilisateur, qui est une chaîne, c'est un goût. Et puis à cause de cela, nous accédons à JavaScripts aux méthodes en minuscules sont en ce moment , nous savons que nous obtenons tout ce que l'utilisateur a tapé en minuscules. Cool, Supprimons la console. Quelle est la prochaine étape ? Nous allons maintenant ce que je veux que nous fassions, c'est que nous saisissions toutes les étiquettes LI. Parce que ce que nous allons devoir faire, c'est que nous allons devoir comparer tout ce que l'utilisateur tapé à chaque élément de la liste. Il s'agit de saisir chaque étiquette LI. Donc la première étape est que je voulais trouver notre liste d'épicerie. Et c'est, bien sûr que nous l'avons fait beaucoup de fois auparavant. Nous pouvons simplement utiliser QuerySelector ici. De nombreuses façons d'écorcher le chat quand il s'agit de programmer. Et qu'est-ce que je veux attraper ? Est-ce que je veux saisir notre identifiant de liste d'épicerie, et je veux saisir tous les éléments UL. Donc pour la page d'index Godot ici, juste pour vous montrer ce que nous faisons. Nous faisons défiler vers le bas jusqu'à la section trois pourri. Nous pouvons voir que nous louons tout dans cette div avec un ID de liste d'épicerie. Je veux saisir cette balise UL car cet élément UL contient tous les alliés en dessous. C' est tout ce qu'on a fait ici. Donc on a cette liste d'épicerie. Et maintenant, je veux saisir chaque liste, élément et cou que nous pouvons dire est allumé épicerie parce que nous savons qu'il va être pluriel est plus d'une étiquette LI. Et nous savons que ça va être la liste des courses. Et puis nous pouvons accéder aux éléments get par la méthode de nom de tag. Encore une fois, cela nous est fourni par l'API DOM. Ce n'est pas de JavaScript. On y va. Maintenant, nous avons tous nos tags LI. Jusqu' à présent, si bien. Mais vous seriez d'accord avec moi maintenant, nous avons toutes les étiquettes LI. Nous avons besoin d'un moyen de parcourir tout cela et de rivaliser. Ils ont le goût de ce que l'utilisateur a tapé. Et si vous vous souvenez de la partie 1 de la série que getElementsByTagName nous renvoie une HTMLCollection. Et cette HTMLCollection, bien qu'elle ressemble à un tableau et selle comme un tableau, ce n'est pas tout à fait un tableau. Et parce que ce n'est pas tout à fait un tableau, nous n'avons pas beaucoup de méthodes de tableau. Et l'une des méthodes que je veux utiliser dans cet exercice spécifique est la pleine chaque méthode. Pour utiliser la méthode ForEach, nous avons besoin d'un moyen de convertir le HTMLCollection en un tableau. Zach fait des coutures. Parce que si nous pouvons le faire, nous pouvons utiliser cette méthode ForEach. Comment on fait ça ? Eh bien, une façon est d'accéder à ce qu'on appelle le tableau à partir de la méthode. Donc, si nous définissons cela, il suffit de dire ici, pour convertir. Eh bien, disons juste, convertissons les épiceries en un tableau pour que nous puissions accéder à la totalité de chaque méthode. Une façon de le faire est de définir une nouvelle variable. Maintenant, en JavaScript est de le définir comme épicerie, tableau d'épicerie. Et tout ce que nous avons besoin de faire ce tableau de JavaScript axe. Et le tableau, nous avons beaucoup de propriétés et de méthodes. L' un d'eux a été appelé de. Et je veux créer un tableau à partir de l'objet épicerie ou de la variable épicerie que nous venons de créer. C' est beaucoup à prendre et avant de passer à autre chose, je veux m'arrêter à nouveau. Je veux vous expliquer ce que ce tableau de la méthode est tout. Nous avons mis un argument ici, mais il en faut plus. Alors arrêtons-nous. Faisons une pause. Allons dans une autre conférence. Et je veux juste que nous regardions rapidement ce tableau à partir de la méthode plus en détail. J' espère que tu t'amuses, que tu restes vide. Scène en haut. 19. Introduction à Array.from(): J' espère que tu t'amuses beaucoup dans ce cours. Autant que je le suis. J' adore assembler ces choses et j'ai quitté l'enseignement de ce que j'ai appris depuis de nombreuses années. Quoi qu'il en soit, la prochaine chose que je voulais que nous discutions très brièvement est un autre lit très utile, une fonction peu avancée en JavaScript appelée tableau de. Et que fait cette méthode ? Quel est le niveau très, très, très basique, tout ce qu'il fait, c'est qu'il crée un tableau, mais pas à partir d'un tableau, car ils seraient inutiles. Il crée un tableau à partir de deux types de choses différentes. Crée un tableau à partir d'un objet de type tableau. Et tout ce que je veux dire par ensemble de données, c'est un objet qui a une propriété length. Et deuxièmement, vous pouvez créer un tableau à partir d'un objet itérable, des choses comme l'état mental. Quoi qu'il en soit, c'est plus important en ce moment. La chose importante à comprendre est que le tableau de la méthode prend quelque chose et il se convertit en un tableau. Et pourquoi voulons-nous faire ça ? Eh bien, si nous pouvons le créer dans quelque chose qui ressemble à un tableau, nous pouvons avoir certaines méthodes et propriétés à notre disposition que nous pouvons utiliser sur cet objet nouvellement créé, un tableau créé par l'énergie d'état entier. Alors dis un peu de sens. Ne vous inquiétez pas si ce n'est pas la première chose que je veux que vous compreniez ce que le tableau de la méthode, qu'il est sur le tableau lui-même. Ce que je veux dire par là, laissez-moi sauter sur la console et vous montrer rapidement. J' ai ma console ouverte. Ouais, et la seule chose que je veux te montrer est un moyen de trouver ça de MTD. Et comme je l'ai mentionné, c'est sur l'objet du tableau dans JavaScript lui-même. Comment puis-je prouver que deux vont d'abord, nous allons simplement console le tableau. Et si nous faisons cela, oui, le tableau fourni par JavaScript. On ouvre ça. Nous faisons défiler vers le bas et il est là. Le, est-ce que le de rend assez simple, non ? Alors on y va. Nous savons que le tableau de la méthode telle que trouvée sur l'objet tableau de JavaScript a un peu de sens, non ? Mais nous n'avons pas encore fini. Laissez-moi sauter dans la conférence et parlons de cette méthode un peu plus en détail. 20. Comment Array.from(): Alors, quel est exactement le sous-tableau de la méthode ? Nous allons très intuitivement blesser fondamentalement, tout ce qu'il fait est qu'il crée un tableau à partir d'un objet semblable à un tableau, propre objet itérable. Mais je cherche à entrer dans ça maintenant. De même, tout comme la méthode ToLowerCase, le tableau de la méthode est une fonction JavaScript pure. En fait, il a été introduit dans le cadre de ES6. Es6, soit dit en passant, était juste une révision majeure et mise à niveau vers t0 est cinq et vous ne vous grattez probablement pas la tête, mais vous avez peut-être déjà oublié d'où vient-il. Et nous venons de le voir venir de l'objet tableau lui-même. Mais ce sont des choses que vous savez déjà. Alors, comment ça marche ? Eh bien, c'est très facile d'accéder à cette méthode. Nous commençons par accéder à l'objet tableau de JavaScript dans xi, la méthode from. Et la méthode front prend un argument et son argument est un objet de type tableau. Mais avant de parler plus de ce qu'il fait, ils passent à l'éditeur de codage et conduit à voir comment cela fonctionne en action. Avant de commencer à entrer plus en détail sur le tableau de la méthode, je veux juste que vous compreniez comment cela fonctionne. Alors rappelez-vous ce que j'ai dit. Il doit être un objet de type tableau sur un objet itérable pour que nous puissions utiliser ce tableau à partir de la méthode. Alors, comment ça marche ? Eh bien, définissons un objet semblable à un tableau. Et soyons très, très simples ici. Disons juste quel est le cas. Donc nous savons que c'est une chaîne dans ce cas. Comment ressemble le tableau de ? Eh bien, tout d'abord, je veux juste dire, en haut, co-se produire. Ouvrir. Kauket nous permet simplement d'exécuter JavaScript en temps réel dans notre éditeur de texte. Donc, nous n'avons pas besoin de continuer à sauter vers le navigateur juste beaucoup plus rapidement pour sorte d'augmenter votre code. C' est très pratique. De toute façon. Comment ça marche ? Eh bien, nous allons consigner quelque chose et accédons à l'objet de tableau JavaScript sur le nom. On sait qu'il y a une méthode qui s'appelle. Et nous voulons passer dans notre tableau comme et comme vous pouvez le voir, il prend notre objet de type tableau vaut la peine et il le convertit en un tableau, ce qui est vraiment, vraiment génial. Et vous pouvez voir ici, notre tableau se compose juste de chaque litre en radiographie. Et c'est, eh bien, c'est fait. Retour en haut à la conférence. Cool, c'est qu'ils font des scènes. Nous avons regardé un exemple très simple, mais gardez juste à l'esprit que cela signifie cet objet de type tableau ? Cela signifie simplement que l'objet doit avoir une propriété length et des éléments indexés. Qu' est-ce que je veux dire par là ? Eh bien, nous allons à nouveau sur la console dans ce juste regarder exactement de quoi je parle. Chlorure. Nous avons donc examiné cet exemple ici, mais comment et pourquoi cela fonctionne-t-il ? Rappelez-vous, le tableau de la méthode ne fonctionnera pas sur tout comme la description une saison, comme nous l'avons dit, qui ne fonctionne que sur des objets comme tableau. Et ce que cela signifie, c'est que l'objet doit avoir une propriété length et des éléments d'index D4. Qu' est-ce que je veux dire ? Eh bien, c'est sur une console. Alors laissez-moi faire un clic droit sur Google Chrome ici, nouveau mode de navigation privée. Et on va à une console et on fait des scènes. Tu vois le X ? Et rappelez-vous ce que nous disons, définissons juste l'objet de tableau de chien comme loup. Et nous savons que le tableau de la méthode fonctionne sur nous. On vient d'en voir un exemple. Mais pourquoi ? Eh bien, pour vous montrer, faisons la console cet objet tableau et je veux regarder son proton. Et si nous chargeons cela, nous savons que c'est de type chaîne. Et si nous ouvrons la méthode de chaîne, ce qui est génial, c'est que nous avons cette propriété de lien. C' est ce que je veux dire par un ID d'objet de type tableau doit avoir ceci lié correctement pour que le tableau de la méthode fonctionne. Alors voilà. L'espoir fait des scènes. Revenons dans la conférence ou bizarre. J' espère que ça commence à avoir plus de sens pour toi. Et rappelez-vous ce que j'ai dit tout à l'heure, qu'il faut plus d'un argument. En fait, il peut prendre jusqu'à trois arguments, peut prendre une carte, et il peut prendre ce que vous voulez que cela se réfère. Gardez à l'esprit que ces arguments sont facultatifs. Nous n'avons pas à les mettre dans cette fonction du tout. Et beaucoup de gens combinent réellement le, cet argument facultatif dans cette fonction de carte elle-même. Donc, souvent, vous verrez juste deux arguments dans le tableau de la méthode. Quoi qu'il en soit, je ne veux pas entrer trop en détail à ce sujet. Je peux vous montrer rapidement ce qu'est la carte. Donc, dans le haut de l'éditeur de texte à nouveau. Et regardons comment ça fonctionnerait. Last but not least, voyons comment fonctionne le deuxième argument du tableau à partir de la fonction. De quoi s'agit-il ? Supprimons tout ce que nous avions sur notre écran auparavant. Et cela définir un tableau est juste dire que notre tableau a un chien et vous l'avez deviné. Un chat. L'autoroute, simple. Maintenant, ce que je veux faire, c'est que je veux définir une fonction de gestionnaire. Je veux tout prendre à l'intérieur de ce tableau et je veux déconnecter quelque chose à l'écran. Donc, c'est le mot-clé de fonction JavaScript utilisé. Appelons ça le gestionnaire. On peut l'appeler comme on veut. La main va prendre un animal dans chaque cas. Et tout ce que je veux faire, c'est que je veux juste retourner déclaration et je vais utiliser des littéraux de modèle ici. Et ce que je vais dire, c'est que je vais dire un animal prêt à marcher, marcher pour qu'il aille. Ce n'est rien de trop profond. C' est une fonction très, très simple. Qu' est-ce que je veux faire ? Eh bien, connectons la console. Accédez au tableau à partir de la méthode. Nous savons que nous voulons accéder à ce type de tableau. Un coup de main, comme vous pouvez le voir ici. Si nous le gardons simplement avec un argument, littéralement n'a pas de sens pour nous de le faire parce que c'est déjà un tableau. n'y a donc aucun intérêt de créer un tableau à partir d'un tableau. Mais c'est le deuxième argument de cette carte que je veux que nous comprenions. Et le deuxième argument est ce que nous avons défini comme la main la fonction. Et puis nous allons à ce qui nous est retourné. Sur l'écran est un chien marchant et compte lors de la marche. Ceci est un nouveau tableau. Maintenant, il a créé un tout nouveau tableau et il est pris, chaque élément du tableau original, le coûte grâce à notre fonction de carte, et il nous est retourné un nouveau tableau. Parce qu'ils ont un peu de sens. Et c'est de ça qu'il s'agit. J' espère que tu t'amuses. Et je pense que maintenant vous avez une bonne idée intuitive de la façon dont cela fonctionne. Si bien joué. Je suis très, très impressionné. On y va. J'espère que ça commence à faire un peu plus de scènes. Et ne vous inquiétez pas, au fur et à mesure que vous les rencontrerez dans votre carrière de codage, vous commencerez à l'utiliser de plus en plus et cela deviendra beaucoup plus intuitif. Je voulais juste que vous sachiez sur le tableau de la méthode parce que c'est un peut être extrêmement pratique, ce qui m'amène au sujet suivant. Et c'est pourquoi vous devez connaître le tableau à partir de la méthode. Pourquoi j'en ai même discuté dans ce cours ? Nous allons, parfois nous voulons travailler avec des méthodes qui ne sont disponibles que à partir de l'objet tableau. Par exemple, pour chaque méthode n'est disponible que sur l'objet tableau. Et pour accéder à cette méthode, nous devons parfois convertir ce que nous travaillons dans notre code en un tableau. Est-ce que ça a du sens ? Et plus et au-dessus de cela, le tableau de la méthode est extrêmement utile. Il vous permet de faire beaucoup d'autres choses comme le clonage des tableaux, la suppression des doublons, même le remplissage d'un tableau , etc. Il y a beaucoup de choses que vous pouvez faire. Et très certainement, vous allez utiliser moins lorsque vous travaillez avec des collections DOM. Et cela me ramène d'abord à cela, parfois nous voulons utiliser des méthodes qui ne sont disponibles que sur l'objet tableau. Donc, lorsque vous travaillez avec la collection DOM, par exemple, et HTMLCollection, parfois nous devons le convertir en un objet tableau afin d'accéder aux méthodes que nous voulons. Donc, je suppose que ce que j'essaie de dire est que cela est utile lorsque vous rencontrez et travaillez avec des objets de type tableau. Il fournit un peu plus de clarté sur ce que fait cette méthode. Mais ne vous inquiétez pas, on ne fait que s'y mêler. Alors ne paniquez pas si vous ne comprenez pas complètement. Euh, th, ça viendra à travers le temps. J' espère que vous avez apprécié ce cool jusqu'à présent Huike, rester motivé et je vous verrai dans la prochaine conférence. 21. Utiliser pour l'utilisation de forEach: Ok, donc c'est exactement là qu'on s'est arrêté. Nous avons créé notre tableau d'épicerie en utilisant le tableau JavaScripts à partir de la méthode. Que veut-on faire ensuite ? Eh bien, nous voulons faire une boucle à travers ce tableau, mais rappelez-vous si nous allons à notre fichier d'index ici, nous avons littéralement chaque élément LI comme un élément dans un tableau, puis vous allez dans l'élément de la dette et bien sûr il doit s'étendre. Donc, il suffit de regarder le premier élément de notre tableau. Ce sera ces éléments LI. Et qu'est-ce qu'on veut ? Eh bien, nous voulons l'enfant du premier élément, non ? Nous voulons seulement travailler avec cet article, ce mot MOOC ici. Scènes et femmes, Partie 1 de ce cours, nous avons discuté de diverses méthodes de traversée. Nous avons discuté du premier enfant, premier enfant élément, rappelez-vous toutes ces choses ? Oui, on veut s'assurer que c'est un élément. Nous ne voulons pas être retournés pour prendre la neige, par exemple. Donc, nous voulons faire une boucle à travers chaque élément dans le tableau. Mais rappelez-vous dans chaque cas, nous sommes allés chercher n'importe quel article. Nous voulons attraper le premier élément enfant. Et nous voulons que cela prend du contenu parce que nous voulons saisir seulement les travées qui ont le texte réel que nous voulons comparer. Et encore une fois, nous allons devoir convertir tous ces goûts en minuscules parce que nous sommes allés rivaliser les pommes avec les pommes. Revenons à notre application. Et commençons à coder ceci. On commence par où ? Eh bien, nous allons juste avoir un commentaire Oui, et boucle à travers chaque article d'épicerie. C' est ce qu'on veut faire. Alors comment on fait ça ? Comment pouvons-nous faire une boucle à travers chaque article d'épicerie sera d'abord, nous devons saisir notre tableau. Et maintenant, c'est là que se passe la magie. Nous pouvons y accéder pour chaque méthode. Et la raison pour laquelle nous pouvons y accéder est parce que nous utilisons ce tableau à partir de la méthode. Nous avons converti nos épiceries en un tableau, disons faire des saints. Et si vous ne savez pas tout à fait comment fonctionne la méthode ForEach, s'il vous plaît consulter le cours complet de grand-maître de mon JavaScript. Merci. Peut savoir comment ça marche. Ce n'est pas tout à fait intuitif. Tout ce qu'il fait, c'est qu'il boucle à travers chaque élément du tableau. Et il nous donne cet élément comme une variable. Et on peut l'appeler comme on veut. Faisons juste refroidir notre épicerie. Si nous allons au fichier d'index, rester mauvais lorsque nous utilisons le plein chaque méthode, il va nous renvoyer chaque balise LI. On vient d'appeler cette épicerie. C' est tout ce qu'on a fait. Et je vais juste utiliser la nouvelle syntaxe flèche. Et c'est vraiment le cœur de notre code va appartenir. Tout d'abord, souviens-toi qu'on a cet Ally. Je voulais attraper le premier élément enfant. Donc, définissons une nouvelle variable. Appelons ça un nom superficiel parce que c'est ce que nous voulons parcourir. Et nous savons que ce sera l'épicerie que l'élément LI. Mais maintenant, nous voulons l'enfant du premier élément, n'est-ce pas ? Et puis, dans cet enfant, nous voulons accéder à sa propriété de contenu de texte. C' est génial ? Cool ? J' espère que ça a du sens. C'est en fait arrêter. Oui, c'est que la console consigne ça à l'écran juste pour que nous puissions nous assurer que nous nous inscrivions correctement. Et c'est sauter sur notre navigateur. Allons à la console. Rendons ça un peu plus grand. Sclera. Allons dans notre élément de recherche et tapez une majuscule a. Wow, Nous y allons. Il est littéralement fouillé dans tous nos articles, lait, sucre et épices, quelque chose à boire, et pizza. Je peux le déchirer à nouveau. Tu peux parler maintenant, petit A, et c'est exactement la même chose. C' est génial ? L' homme ? Je m'amuse beaucoup. Revenons à notre code ici. Nous savons donc que nous avons réussi à parcourir tous nos éléments et que nous obtenons son contenu textuel. La prochaine étape est de se rappeler nous ne voulons pas de capitales. Si nous avons notre navigateur ici, nous avons des capitaux. Donc, si l'utilisateur tape moule, mais avec de petits objectifs, Il ne va pas correspondre à ce MOOC avec une capitale. Alors, comment on fait face à ça ? Eh bien, tu le sais déjà. Nous savons que chaque nom d'épicerie est de type chaîne. Et pour cette raison, nous pouvons accéder à JavaScripts à la méthode en minuscules. Donc, ce que nous voulons faire maintenant, c'est que nous voulons convertir tout notre texte en minuscules. Ensuite, nous faisons cela en accédant à notre nom d'épicerie, va réellement créer une nouvelle variable. Appelons ça le nom de l'épicerie. Et c'est notre nom d'épicerie. Et nous pouvons quitter JavaScripts en minuscules nous avons fait comme je fais des scènes. Donc on a un nom. Quelle est la prochaine étape ? Eh bien, l'étape suivante est que nous voulons comparer si l'utilisateur me prend juste revenir en arrière encore pour voir, vous voyez ce que je veux dire ? On est allés rivaliser. Supprimons simplement la console et laissez-moi taper. Ce que nous voulons que vous fassiez, c'est que nous voulons comparer si l'utilisateur tape MOOC. Nous voulons rechercher tous les éléments de bandes ci-dessous. Nous voulons voir si ce MLK est quelque chose ci-dessous. Et si c'est le cas, nous voulons que celui-là se montre. Et si ce n'est pas le cas, nous voulons que tout le reste disparaisse. C' est ce que nous voulons faire. Nous avons donc besoin d'un moyen de comparer. Hey, nous avons regardé la chaîne MLK est de toute façon dans ces noms ci-dessous. Et comment on fait ça ? Eh bien, je veux utiliser une autre méthode en JavaScript appelée index off. Permettez-moi de faire un commentaire ici maintenant je peux dire maintenant que nous pouvons utiliser index off pour voir si notre texte peut être trouvé dans notre nom d'épicerie. Si rien n'est trouvé, une valeur négative est renvoyée. Et on peut se cacher. L' article. C' est un peu faire des scènes. Je sais que ça peut sembler accablant. Nous avons vraiment vécu beaucoup de choses dans cet exercice. Je veux dire, nous avons parlé du tableau de la méthode, des deux méthodes en minuscules, et maintenant il y en a un autre appelé index de. Mais croyez-moi, ça va vous aider tant dans votre longueur d'onde en Corée. Alors passons à une nouvelle conférence avant de passer à autre chose. Et je veux que vous compreniez l'index de la méthode et comment cela fonctionne. On se voit assez. 22. Introduction à indexOf(): Une autre fonction très incroyable en JavaScript est connu sous le nom d'index de fonction. Et qu'est-ce que ça fait ? Eh bien, au niveau très basique qui vous indique si un élément donné peut être trouvé dans un tableau ou une chaîne. L' indice de mxnet a été ajouté à la norme de 260 secondes dans la cinquième édition. Ce que cela signifie, c'est qu'il vient d'être ajouté le 3 décembre 2009. Donc, ce que j'essaie de dire est que vous n'avez pas à vous soucier des navigateurs et ne pas incorporer cette méthode. Chaque navigateur aujourd'hui vous permettra d'utiliser l'index de la méthode. Bon client, les vieux navigateurs peuvent accepter un chien. A quoi ça ressemble quand on commence à l'utiliser ? Eh bien, tout d'abord, vous appelez l'index de la méthode en tapant ses mots, C'est l'index des mots-clés off. Un doyen prend deux arguments. Le premier argument est l'élément de recherche et alias l'élément que vous souhaitez rechercher. Et le second argument est facultatif. C' est le point de départ de votre bouton de recherche Plus huit, nous allons voir des exemples de cela sous peu. Donc l'ego, c'est un peu à ça que ça ressemble, un haut niveau. Et comme je l'ai dit, nous allons examiner des exemples. Mais avant de le faire, c'est quelque chose de très important que vous devez comprendre. Et c'est la méthode IndexOf n'existe que pour deux types filles en JavaScript. La première fille haut qu'il existe sur effacement. Qu' est-ce qu'un tableau ? En JavaScript et tableau comme une seule variable qui est utilisée pour stocker différents éléments. Et gardez à l'esprit, le tableau JavaScript est un objet global, ce qui signifie que vous pouvez en quelque sorte y accéder de n'importe quelle façon vous le souhaitez. Mais assez de conversation veulent vraiment sauter sur notre éditeur de texte et je veux commencer à coder une augmentation avec vous. Et je veux commencer à regarder cet index de méthode, en particulier sur les tableaux. Sautons sur la console et il est toujours en train de jouer. 23. Utiliser indexOf() avec des arrays: Ok, donc nous y voilà. Et je veux que nous commencions à coder ensemble, mais je veux que nous allions étape par étape, lentement, attrapons lentement un singe. La première chose que nous avons mentionnée est que cet index de existe sur les types fille en JavaScript. Et le premier ordre que nous regardons est le tableau. Alors laissez-moi vous le prouver avant d'aller plus loin dans notre codage, je suis allé au journal de la console. Tout C'est juste la console faire l'objet du tableau. Si nous ouvrons ceci et nous regardons son prototype, il y a un index de méthode. On y va. Pouvez-vous nous voir ? Donc maintenant, je viens de vous prouver qu'il existe sur le tableau, cet objet de tableau global en JavaScript. C' est de là que ça vient. Bon, maintenant, allons à notre éditeur de codage. Je viens d'avoir un fichier app.js vide ouvert ici. Et je dirige le caucus. Caucus, très utile, d'ailleurs. Très utile. Je ne cesse de le dire, mais c'est très bon. Ok, la première chose que je veux vous faire connaître est un tableau. Eh bien, tout d'abord, créons un tableau. Et nous l'utilisons par les crochets ici. Et je veux juste dire, je suis le premier élément. Je suis le deuxième élément. Et vous l'avez deviné, je suis le troisième élément, C. Voilà, nous avons créé un tableau. Nous utilisons ces crochets. Et comment accéder aux tableaux ? Nous allons la première chose que je veux mentionner est que les tableaux JavaScript ou Sarah. Qu' est-ce que je veux dire par là ? Je veux juste dire que le premier élément d'un tableau est toujours indexé à Sarah. Et le dernier élément peut toujours être trouvé à l'index qui est égal à la valeur de la propriété length du tableau moins 1. Laissez-moi vous montrer ce que je veux dire. Alors connectons notre tableau à la console. Et rappelez-vous comment j'ai dit qu'il est 0 x indexé est le premier élément du tableau. Nous tapons 0. Je suis le premier élément. Et bien sûr, nous pouvons le faire pour les prochains articles, non ? Nous pouvons aller 012 sur le premier et le deuxième et le troisième élément. C' est logique. Et l'autre chose que je veux mentionner est que chaque tableau a une propriété length. Donc, si nous console déconnectons notre tableau et nous accédons à cette propriété appelée liens, nous savons que notre tableau a trois éléments. Donc, une astuce très pratique quand il s'agit de codage. Et je vais même venir ici, nous pouvons toujours x est le dernier élément d'un tableau comme celui-ci. Et c'est très, très utile. Souviens-toi de ça. Avant de taper la solution, pensez à ce que nous venons de faire. Nous savons que la longueur du tableau est de trois. Et si vous regardez le journal de la console juste au-dessus, nous savons que nous avons accédé au dernier élément que j'utilise tableau et l'index deux. Parce que rappelez-vous, les tableaux JavaScript sont toujours index à 0. Donc, nous savons que le dernier élément du tableau est cette longueur du tableau, qui est 3 moins 1, ce qui nous amène à deux. Donc tout ce que j'essaie de dire est d'accéder au dernier élément du tableau, tout ce que nous avons à faire est d'accéder à notre tableau. Et maintenant, si vous ne savez pas ce qu'est le lien, il est très pratique d'accéder à la propriété link, qui dans ce cas est indéfinie car il n'y a pas de quatrième élément dans le tableau. Donc vous avez toujours moin1. Est-ce que ça a du sens ? Je l'espère. Et les herbicides ont une sensation plus intuitive sur le fonctionnement des baies. L' autre chose que je veux mentionner, supprimons cet homme, déteste supprimer des trucs parfois. Avons-nous passé si longtemps à essayer de me donner des points à travers et je viens de supprimer c'est un peu triste, mec le chlorure. Mais de toute façon, créons un nouveau tableau, 1, 2 et 3. L' autre chose que je veux juste mentionner avec des tableaux qui sont assez particuliers est que vous ne pouvez pas utiliser la notation de points pour accéder aux éléments. C' est un point important. Donc, par exemple, si nous connectons notre tableau et que nous essayons d'obtenir le premier élément, il ne nous laissera pas le faire. Nous obtenons effectivement une erreur de syntaxe. Alors gardez ça à l'esprit. Et ce n'est pas, tu sais, il n'y a rien de spécial à ce sujet. En fait, les propriétés JavaScript qui commencent par un chiffre ne peuvent jamais être référencées avec la documentation existaient toujours dans l'utilisation de la notation entre crochets. La nuance de JavaScript, Ne vous inquiétez pas, d'accord, mais vous vous demandez probablement client, je ne veux pas en apprendre davantage sur les tableaux. Nous sommes sur le sujet de l'indice de n. Vous êtes à 100 pour cent correct. Je voulais juste vous familiariser avec les tableaux avant de sauter dedans. D' accord ? Le point que je veux faire avec des chutes d'index est qu'il retourne le premier index auquel un élément donné peut être trouvé dans le tableau. S' il n'existe pas dans le tableau, un négatif est renvoyé. Qu' est-ce que je veux dire ? Eh bien, définissons un tableau appelé animaux. Et il y a un phrothogs qui a une girafe. Et ça dit avoir un buffle. Et il dit qu'il y a une ligne. Comment ça marche ? Eh bien, regardons. Laissons le journal de la console afin que nous puissions réellement voir le résultat de ce que nous produisons. La première chose pour accéder à notre index de est d'accéder à un tableau. Et le tableau auquel on accède est notre tableau d'animaux. Nous voulons maintenant accéder à l'index de la méthode qui est intégré dans tous les tableaux. Et cherchons à parler. Qu' attendez-vous à voir ? Où se trouvent les phachots ? C' est vrai, il est situé à l'index 0. Rappelez-vous que les tableaux JavaScript sont toujours indexés à la base Sarah. Donc, si nous essayons de trouver des phachots, nous pouvons voir retourné à nous est égal à 0. C'est le plus logique. Et je vais juste dupliquer ce code. Cherchons maintenant Buffalo. Selon vous, quels sont les numéros d'index qui seront ? Lève-toi. Je m'attendrais au numéro deux. Voyons si c'est bien. Maintenant ce que je veux faire, c'est chercher un chien. Que va-t-il se passer avec les chiens ? Eh bien, comme je l'ai mentionné, s'il n'est pas trouvé, un négatif nous est retourné. Est-ce que ça a du sens ? Alors rappelez-vous, un négatif signifie qu'il n'est pas trouvé. Et la dernière chose que je veux mentionner juste avant de passer à autre chose est que l'index de la méthode compare les éléments de votre tableau en utilisant l'égalité stricte. En d'autres termes, en utilisant la même méthode que celle utilisée par le triple signe égal. Souvenez-vous de ça. Cool. Ok, Clyde avait tout cela est bien et bon, mais nous n'utilisons qu'un seul argument dans cet index de tableau. Je veux utiliser les deux et je le comprends plus en détail. Eh bien, c'est bon d'entendre mon camarade étudiant. Supprimons toutes ces consoles. Cherchons maintenant cet animal déchiré par la guerre, mais conduit à dire à notre index de méthode que nous voulons seulement commencer dans le deuxième élément de notre tableau, un à partir de l'index un à partir. Que croyez-vous qu'il se passera alors ? Alors passons à notre deuxième argument dans cette méthode. Et disons que nous voulions commencer à partir du deuxième élément dans le tableau. Bien sûr que ça n'existe pas parce que nous savons que nous regardons à partir de la girafe et qu'il n'y a pas d'eau. Ils regardent un autre exemple qui est maintenant regarder Mozilla. Et son dire notre index de méthode à rechercher à partir de disons, le troisième élément dans le tableau numéro deux. Et dans ce cas, il renvoie notre numéro d'index. Donc c'est très, très cool et nous savons qu'il existe. C' est une sorte de comment fonctionne un deuxième argument. Zack, j'ai du sens. J' espère que nous avons beaucoup travaillé avec des tableaux, mais maintenant je vais revenir au canal de fuite. L' un est de regarder le type de deuxième ordre où nous pouvons commencer à utiliser cette méthode d'Auth d'index. 24. Utiliser indexOf() avec des chaînes: Je m'amuse beaucoup. J' espère que tu as beaucoup appris. Revenons à l'endroit où on a commencé. Rappelez-vous que nous avons dit qu'il n'existe que sur les types de deux dollars. Cet index de méthode, le haut de premier ordre que nous avons regardé comme des tableaux. Quel est, selon vous, le type de second ordre ? Eh bien, il est déroulé, s'il vous plaît. Donc, cette diapositive que vous regardez ici est très importante, vous donne un aperçu très haut niveau de cet index de méthode. Nous avons regardé une tonne d'exemples avec des tableaux. Je veux terminer cette conférence maintenant en regardant exemples avec nous travaillant avec des cordes. Ça commence à voir comment ça marche. Ça va être très amusant. Crois-moi. Hé, wow, c'est vraiment cool. Nous venons de faire des tableaux, mais maintenant je veux qu'on entre dans les cordes. Comment ça marche ? Et c'est vraiment excitant, tu verras maintenant. Alors, nous allons y sauter. Cool. Ok, on commence par où ? La première chose que je veux vous montrer ici, c'est que si on va sur notre console, enlève la console, le tableau. Effacons simplement la console et faisons la même chose avec la force. Assez simple. Nous avons été une chaîne. Nous regardons son prototype. Nous faisons défiler vers le bas et ils, mes chers étudiants est l'index de ceci est la deuxième fille parlant technologie JavaScript nous donne accès à cette méthode utile impressionnante. Disons que tu y vas, je voulais juste te prouver qu'il est trouvé sur ce type de fille aussi. Si nous revenons à notre éditeur de codage, commençons à regarder cela en action. Supprimons donc notre Air Asia. Nous avons regardé les tableaux. Ça crée, je ne sais pas, une phrase. Et c'est juste dire, bonjour, monde. L' univers. Sachez souvent ce qui ne va pas avec mon sujet aujourd'hui. Vous souhaite la bienvenue. Ce sont des phrases que nous savons que c'est de type chaîne. Comment le savons-nous ? Tout le type de phrase du journal de la console. Et c'est assez évident, mais on sait que c'est une ficelle. Parce qu'on sait que c'est une ficelle. Nous savons que nous avons accès à l'index de la méthode. Donc, définissons une variable appelée AIM, c'est une phrase excessive. Et cherchons quelque chose. Cherchons le mot. Bienvenue. Voyons comme des morts ici. Pourquoi pensez-vous que ce serait la console se déconnecter à l'écran et nous obtenons un numéro 26. Pourquoi 26 ? Commençons à compter ensemble. Nous savons que c'est l'indice 0, 1, 2 , 3, 4, 5, 6 , 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25. Et bien sûr 26 est l'endroit où commence l'accueil. Très, méthode très utile est de définir une phrase d'appel constante à nouveau. Et disons juste, Hey, tu apprends beaucoup dans ce cours ? J' espère, monsieur. Continuez à apprendre. Alors commençons à utiliser cet index hors. Commençons à obtenir un champ plus intuitif. Définissons une nouvelle variable JavaScript appelée mot de recherche. C' est ce que nous voulons rechercher. Et disons que nous voulons chercher le mot apprentissage. On voit d'abord, tout de suite, on a deux mots, n'est-ce pas ? Apprendre et apprendre. Alors gardez ça à l'esprit. Donc, cela définit une nouvelle variable appelée première fois. Et accédons à notre constante de phrase. C' est accéder à cet index de méthode. Et nous allons chercher, va chercher mot. Console enregistrons ce premier délai d'expiration. C' est du sida. Et nous savons que c'est huit, car c'est le huitième personnage depuis le début, c'est ce premier mot d'apprentissage. Mais maintenant, comment accéder au deuxième mot d'apprentissage ? Comment ferons-nous ça ? Laisse-moi te donner un indice. Utilisons le deuxième argument dans la méthode OLS de l'index. Donc, tout ce que nous avons à faire est de définir une nouvelle variable appelée deuxième fois. Accédez à notre phrase. Je viens de réaliser une phrase impeccable. Pour qu'ils s'en aille, nous allons en excès dans Nick. Ce qu'on veut faire maintenant, c'est qu'on cherche notre mot de recherche, n'est-ce pas ? Cette fois, nous voulons utiliser le point de départ. Et où voulons-nous commencer avec cette pensée après sa fondation ? Premier article, qui est la première fois plus un. Donc maintenant, nous savons qu'il va chercher dans notre tableau, mais seulement après que nous avons passé le premier mot d'apprentissage. Cu, j'espère que ça a du sens. Si on se déconnecte, on arrive à 44, ce qui est exactement ce qu'on attend. L' utilisation d'index ou de cette façon peut être très utile dans votre code et vous pouvez faire beaucoup de choses avec lui. Je ne sais pas. Donnons un exemple. Définissons une variable appelée Solution 1. Utilisons des littéraux de modèle et disons l'index du premier. Et nous allons utiliser le mot de recherche variable, mot du début. Est et il ira la première fois. Et si nous retournons cela à l'écran, nous obtenons littéralement le journal de la console pour nous. L' index du premier mot d'apprentissage depuis le début est de huit. C' est génial ? Nous combinons beaucoup de choses que nous combinons des littéraux de modèle, combinant les accolades signe dollar pour incorporer expressions et des variables dans notre littéral de modèle. C' est très, très cool et ça va t'aider beaucoup sur le chemin. Bien sûr, nous pouvons faire la même solution complète à la solution à ce que nous venons de copier cela au lieu de tout faire à nouveau. Nous savons que c'est la deuxième recherche que nous avons faite depuis le début n'est pas la première fois. Deuxième fois. Et si on retourne ça, on obtient exactement la même chose. Mais maintenant, nous faisons référence au deuxième mot d'apprentissage. Cool. Désolé, je sais que parfois je me laisse emporter et je vais peut-être être un peu plus avancé que ce que tu dois savoir maintenant. Mais croyez-moi, cela vous aidera dans votre codage Corée. Et je veux que tu deviennes un maître dans toutes les affaires. J' espère que ça commence à avoir du sens. L' autre chose que je veux vous montrer est de tout effacer. Je veux vous montrer que l'index de est sensible à la casse. Donc ce que je veux dire, nous le ferons, si nous avons un mot et que le mot est coté chien. Si nous console maintenant log et nous accédons à notre chaîne de mots, nous accédons à l'index de la méthode et nous recherchons le chien. Nous savons qu'il existe. Encore une fois, cela aurait du sens, mais qu'en est-il si nous faisions la même chose ? Mais oui, on a cherché le mot rouge. Comme vous pouvez le voir, il est sensible à la casse. Nous avons retourné un négatif, AKA il n'existe pas. Si nous changeons le petit r en grand R, il existe. En fait, le tout premier élément de notre tableau. J' espère que vous apprenez tous à l'heure. La dernière chose que je veux traverser est que 0 n' évalue pas à vrai et négatif n'évalue pas à faux. Rappelez-vous si nous avons un petit r, c'est un négatif. Ça ne fait pas de faux. C' est une nuance bizarre quand il s'agit de cette méthode. Alors, comment puis-je vous le prouver ? Permettez-moi de vous le prouver en utilisant JavaScripts, IF instruction. Et ce que je veux rivaliser comme je veux dire, si c'est un mot, pourrir, contenir, dire taux. Si cela est évalué à false, exécutons ce code qui dit journal de la console. C' est le début correct. Début. Sinon journal de la console, c'est le mauvais début. Et maintenant, vous verrez un problème. Vous verrez qu'à cause de cloaca, ce qui nous est rendu est la mauvaise réponse. Nous savons que le petit r ne devrait pas exister dans notre chaîne parce qu'il a seulement la cote R en capital. Alors pourquoi frappons-nous le deuxième journal de la console dans notre instruction if ? La raison en est, est que le négatif n'évalue pas à faux. Une roue pleine qui frappe ce début et c'est la mauvaise réponse. Par conséquent, le point que j'essaie de faire comme lors de la vérification si une chaîne spécifique existe dans une autre chaîne. La bonne façon est d'utiliser un négatif. Par exemple, si nous remplacons false par négatif, pourquoi cela ne fonctionne-t-il pas ? Minus1 d nous allons, nous obtenons la bonne réponse cette fois. points très importants que je viens de partager avec vous. S' il vous plaît gardez cela à l'esprit. Donc z vous l'avez. Boucle, il suffit d'utiliser l'index tout pour les rayons. On l'a juste utilisé avec des cordes. Nous avons discuté de différentes façons dont vous pouvez utiliser une interface graphique, sachez que comme K scènes qui ont, nous savons que vous ne pouvez pas forcer à 12 faux négatif. Et ce sont des sujets assez avancés. Alors ne le prenez pas pour acquis, célébrez les petites victoires. Mais de toute façon, passons à autre chose et je te verrai à la prochaine conférence. 25. Terminer la fonctionnalité du texte de recherche: Wow, nous sommes venus incroyablement loin tandis que la main sérieuse de Diana, je sais que parfois il peut être très intimidant de passer par toutes ces choses parce que vous apprenez de nouvelles choses tout le temps. Mais restez avec moi. Tu as presque, presque fini. Vous avez appris une tonne d'informations utiles. Donc on est toujours, laissez-moi défiler ici. Tu te souviens de ce qu'on a fait ? Nous avons écouté les veines TIP dans la zone de texte d'entrée nette. Parce qu'il s'agit d'une boîte de saisie, nous obtenons une propriété de valeur pour saisir cette valeur qui utilise tapé dans converti en minuscules. Premier pas. Deuxièmement, nous saisissons notre liste d'épicerie. En fait, ce sont toujours des éléments alliés. Rappelez-vous, dans un seul et boucle à travers eux. Pour ce faire, nous avons dû convertir netlist en un tableau. Nous utilisons le tableau de JavaScript à partir de la méthode, car c'est un tableau. Maintenant, nous pouvons accéder à ceci pour chaque méthode. Vous êtes en boucle à travers chaque élément LI. Nous voulons ensuite chercher le premier élément dans cet élément est resté. Mais si nous obtenons notre fichier d'index, cet élément LI ne suffit pas. Nous voulons que les premiers éléments enfants au sein de l'allié parce que cela nous donnera l'article d'épicerie réel, disons les mixins. Nous convertissons ensuite chacun de ces éléments en minuscules. Et maintenant, enfin, nous voulons comparer si l'entrée prend que la saisie de l'utilisateur correspond à chaque article d'épicerie. Et pour ce faire, nous allons utiliser l'index de la méthode. On sait comment ça marche. Et nous allons utiliser JavaScripts, IF déclaration, et que voulons-nous goûter ? Eh bien, nous voulons tester si ce nom d'épicerie tout en minuscules, si les prises, l'utilisateur a tapé, peuvent être trouvées à l'intérieur. Et cela prend l'utilisateur tapé, nous mettons dans une variable appelée texte. Nous défilons vers le haut. Rappelez-vous, pour trouver une variable JavaScript appelée texte, et c'est ce que l'utilisateur a tapé. Donc, tout ce que nous voulons comparer, nous voulons trouver si cette chaîne existe dans chaque nom d'épicerie. Et rappelez-vous que nous ne pouvons pas utiliser le mot faux, nous devons utiliser un mot négatif. Donc, dans ce cas, si elle n'existe pas, si l'utilisateur tape Coke, par exemple, et nous regardons MLK, nous savons que MLK ne contient pas le goût Kirk et il va retourner un négatif si c'est le cas. Qu' est-ce qu'on veut qu'il fasse ? Voudrons-nous saisir tout cet élément allié sur moi, que nous avons mis dans une variable appelée épicerie. Rappelez-vous dans R pour chaque fonction, nous faisons une boucle à travers ces alliés et nous mettons chacun dans une variable appelée épicerie. Et tout ce que nous avons à faire est d'accéder à la propriété de style. Et nous voulons affecter sa propriété d'affichage. Et on va changer ça en rien. Définir des scènes de création. Sinon. Si nous savons qu'il existe, nous savons que nous voulons accéder à notre propriété d'affichage de style épicerie. Et nous voulons que cela soit montré comme un élément de bloc. Et ces étudiants de Medea devraient travailler. Donc, si nous allons à notre navigateur et nous allons taper MLK, tous en minuscules. Et regarde ça. de mer sénior. C'est génial. Essayons un autre. Essayons de cuisiner. Quelque chose à boire. Ça n'a pas de sens. Allons à notre code rapidement. Fichier d'index. Ça devrait être quelque chose à boire. Sauve ça, va ici. Et nous avons littéralement fini. C' est génial ? Sérieusement ? Tu dois fêter ces choses. Tu as fait une somme incroyable. Regardez tout cet exemple. Regardez toutes les raisons pour lesquelles nous avons écouté réagir aux événements mettant en vedette des éléments du DOM. Nous avons utilisé des méthodes JavaScript dans les deux méthodes, des objets natifs. Nous avons utilisé toutes ces choses pour interagir avec le DOM. Et c'est un exemple très simple. Nous n'avons même pas de serveur web en arrière-plan. On a tous fait ça à l'avant. Nous avons retardé ou nous avons arrêté, nous avons empêché les comportements par défaut de se produire. Il n'y a pas encore de regel. Tout se passe en direct. Nous pouvons supprimer des éléments. Nous pouvons ajouter des éléments à la liste tels qu'un chien. Et puis nous pouvons chercher des objets qui recherchent un chien. Et nous nous sommes assurés que cette affaire est insensible. Si nous supprimons des données, tout le reste arrive. On peut aussi avoir piqué. Je vais énumérer sous serment comment Olson a fait si long chemin. J' espère que tu t'es bien amusé dans ce cours. Souviens-toi, on n'a pas encore à s'arrêter. Nous pouvons apporter de petites améliorations à cela, qui peut-être je vais inclure quelques étapes bonus, juste le rendre un peu plus grand. Par exemple, lorsqu'un utilisateur clique sur Ed pour un chien, nous ne voulons pas prendre encore affiché dans cette zone de saisie. Est-ce que nous pouvons même ajouter peut-être des onglets ci-dessous façon que l'utilisateur peut avoir un peu d'informations. Donc, s'ils avaient peu d'améliorations que nous pouvons faire à cela. Mais en ce moment, vous avez parcouru un chemin incroyablement long, un 12 pour simplement sauter de haut en bas avec excitation. Walden, et je te verrai dans quelques conférences bonus. Bonjour. 26. Désactivez la boîte de texte d'entrée: On passe à la prochaine chose que je veux qu'on fasse, c'est que tu saches si tu peux tout seul. Effacer qui prend que l'utilisateur est entré dans cette zone de saisie lorsqu'il clique sur le bouton Modifier. Ainsi, par exemple, si l'utilisateur tape chien et clique sur Ajouter, nous ne voulons pas que l'écran de décrochage de chien fasse la façon dont nous allons le retirer. Mettez la vidéo en pause ici et dans cinq secondes, je vais vous montrer la solution. Il est très, très facile de lui donner un coup d'envoi. J' espère, monsieur. Donc, ce que nous voulons faire est lorsque l'utilisateur a cliqué sur un bouton, lorsque cet événement a été déclenché dans un, une claire que la saisie de texte. Donc, nous devons faire est d'obtenir notre code. Voici notre HTML, c'est bon, notre fichier JavaScript. Et nous sommes allés à la section « Ajouter des éléments » ici. Et rappelez-vous, quand cet événement submit est déclenché à la toute fin. Après que nous avons attrapé les utilisateurs goûtent. Tout ce qu'on veut faire maintenant, c'est un bus d'entrée clair. Et pour cela, tout ce que nous avons à faire est d'accéder à notre formulaire entier. Dans ce formulaire, nous voulons accéder à cette boîte de saisie, n'est-ce pas ? Donc, c'est l'utilisation du sélecteur de requête. Nous voulons rechercher la boîte de saisie elle-même. Ensuite, nous voulons accéder à sa valeur. Et c'est juste asseoir cette valeur à null. Tu vas être d'accord avec moi, allez. C' est très simple. Si nous revenons à notre navigateur et nous avons parlé chien, nous cliquons sur Ajouter la rigueur. Il est littéralement effacé de cette boîte de saisie. Très simple. Vous pouvez donc vraiment voir comment nous améliorons nos cartes existantes. Et c'est ainsi que bon nombre d'applications Web fonctionnent. Tu sais, beaucoup de gens vont sur un site et c'est tellement compliqué. Ils pensent que c'était comme ça au tout début. Ce n'est pas la plupart du temps, c'est fait d'une manière fragmentaire étape par étape. Un peu ce qu'on fait ici. suffit de s'attaquer à chaque pièce comme il sort où la prochaine chose que je veux regarder est que je veux ajouter des onglets en bas. Juste parce que je pense que c'est amusant et je pense que ça pourrait être une courbe oscillante et une belle petite plume à avoir dans ta tête. Rendez-vous à la prochaine conférence. 27. Améliorer notre formulaire - Ce que je veux créer: Mec, nous avons parcouru un chemin incroyablement long. Tout d'abord, je veux juste dire Walden, je suis vraiment, vraiment impressionné et, donc l'âge de coincé avec moi. Qu' est-ce qu'on va faire maintenant ? Est-ce que je veux qu'on ajoute ces onglets au bas de notre plan, la liste Hollich ? Et cela va être super pratique pour vous dans vos propres applications web qui va vous permettre de dynamiser chaque spectacle et de masquer les panneaux à la volée en utilisant pur DOM et JavaScript à la manipulation qui est vraiment, vraiment utile. Alors qu'est-ce que ces onglets ont fait ? Eh bien, tout d'abord, lorsque l'utilisateur passe au-dessus d'eux, je veux changer de style. Tu devrais savoir comment faire ça. Maintenant, quand on clique sur un onglet, on a cette question, comment appelez-vous une fausse nouille ? Tout d'abord, vous pouvez remarquer que la réponse n'est pas immédiatement montrée. On l'a enveloppé dans un bouton. Et bien sûr, nous allons être à l'écoute d'un événement de clic sur ce bouton. Et lorsque le bouton est cliqué, nous voulons que la réponse s'affiche. Donc, l'utilisateur clique sur un bouton et nous obtenons l'apparition et l'imposteur. Je sais, je sais que c'est une blague de papa, mais heureusement pour moi, je ne suis pas un comédien. Donc, ils considéraient comme le premier onglet. Bien sûr, si vous cliquez, oh, avant de cliquer sur l'étape suivante, vous remarquez que l'onglet blague alimentaire est maintenant un gris plus foncé ? Donc, en quelque sorte, nous devons appliquer le style à tout ce qui détestait un sélectionné. Maintenant, si nous cliquons sur l'autre panneau, le vous avez que l'onglet de haine est maintenant gris plus foncé et un autre panneau en dessous est affiché. Donc honoré semble être un exemple très simple, et c'est un exemple simple, mais les compétences que vous apprendrez de cela vont vous être très, très utiles. Alors réfléchis à la façon dont tu peux rassembler toutes ces choses et je te verrai dans la prochaine conférence. 28. Créer les onglets: Ok, Alors commençons à ajouter ces onglets. Comment on le fait ? Stocker des points, bien sûr, est d'écrire le HTML ensemble. Alors, allons-y. Allons à la fin de cette saleté par ici. Et je veux créer une nouvelle div. Rappelez-vous que nous avons besoin de regarder section amigo pour ajouter des onglets. On y va. Juste pour que nous sachions ce qui se passe dans l'instruction opcode assez bien. On y va. Je veux créer un nouvel enregistrement et cela appelle simplement ceci le ruban de l'onglet. Assez simple. Et tu sais, c'est utile. Amenons notre navigateur sur la droite pour que nous puissions voir ce qui se passe c'est qu'on code et comment je veux que ces cassettes fonctionnent ? Nous allons juste avoir un titre d'abord dans la liste des titres. Définissez simplement notre frappe dans cette vue, tous les éléments et donnons-lui une classe de frapper. Et bien sûr, nous avons des balises LI en dessous. Je les balises en dessous. Faisons une blague à ça. Ça pourrait être tout ce que tu veux et faisons-en un autre. Et c'est ouais. Saviez-vous que Diego sont sortis de deux titres. Laissez-moi juste le faire et le compte Bennett T de connaissances veulent ajouter cette fille attribuée à null. Je ne m'inquiète pas de ce que c'est. Je vais l'expliquer. En fait, je vais juste décider que je vais faire toute une conférence à ce sujet. Alors ne paniquez pas encore et je vais appeler cette fille. Cliquez sur. Ok, cette coupée, on peut définir comme on veut. Je voulais juste être cliqué parce que évidemment cela va se déclencher lorsque l'utilisateur clique dessus. Et je voulais être une blague, mais je veux totaliser les identifiants, que vous verrez plus tard, c'est pourquoi je fais ça. C' est pour ça que je vais en faire la blague de hashtag. Et donnons-lui une classe pour que nous puissions le styliser dans notre CSS. Nous pouvons dire, vous savez, par défaut, que nous voulons que quelque chose soit actif. Smith, dit-elle, va s'amuser. Et puis sur le deuxième allié, je veux basculer un autre panneau entier. Donc, je veux ajouter à nouveau quelque chose à son attribut fille. Je vais l'appeler à nouveau cliqué. Et dans ce cas, donnons-lui une identification des faits ou une valeur des effets d'identification. Vous verrez comment on l'utilise. Ne paniquez pas, s'il vous plaît. J' y reviendrai. Alors on y va. Ce sont des éléments UL. La prochaine chose que je veux faire, c'est que je veux créer deux panneaux. Et ces panneaux vont être un produit total. Lorsque vous cliquez sur celui qui frappe sur le panneau un pour afficher quand vous avez pris qui frappent les autres panneaux vont afficher. Et répliquons le panneau dans une balise div. Et la première avec laquelle je veux m'occuper, c'est cette blague, est-ce que la bouffe ? Alors donnons-lui un ID de blague et une classe de panneau. Est-ce que ça a du sens ? Et quelle est la blague ? Comment appelez-vous une fausse nouille ? On sauve ça. Vous pouvez voir ce sont des paragraphes et ne vous inquiétez pas de le coiffer. On va y aller et répondre. Nous pouvons mettre dans un paragraphe ci-dessous est dans les pâtes. Et c'est une route brillante. C' est une blague de papa. Alors on y va. C'est notre premier de je me demande alors faire un deuxième div pour notre deuxième panel. Ce deuxième tribunal aura une identification des faits. Et il va aussi avoir une classe de panel. Et donnons-lui un paragraphe disant, c' est ce que j'ai appris sur la nourriture cette semaine. Et en dessous de cela, nous pouvons juste avoir un autre paragraphe avec le texte Lorem Ipsum, peu importe ce que c'est encore, nous sauvegardons ceci. Vous pouvez voir nos scientifiques à l'air terrible, Cool. Donc, afin d'améliorer, genre de look et de sensation de cela, entrons dans notre CSS. Et il a arrêté de l'espacer un peu. Allons donc dans nos styles ici. Allons au fond. Qui a fait beaucoup de choses célestes. Et traitons maintenant sans onglets, nous devrions bien commencer, si nous allons à notre fichier d'index et que je fais défiler vers le haut, nous avons classé tous nos onglets dans cette div avec un ID de représentant de tabulation. Alors allons à notre feuille de style. Et ce que je veux faire, c'est que je veux accéder à notre élément d'emballage UL. Mais maintenant, je veux que nous définissions ce qui se passe lorsque nous survolons chacun de ces éléments. Eh bien, premièrement, je veux que notre arrière-plan soit le même que les autres couleurs que nous avons obtenues. Vous pouvez voir que mon idée m'aide vraiment. On a da 43, 43. Et l'infinie changer la couleur du texte en blanc. Si nous survolons chacun de ces éléments, il change l'arrière-plan et sa couleur de police en blanc. Un plutôt cool. Et ne vous inquiétez pas, on va faire en sorte que ça paraisse mieux. Accédez à notre onglet à nouveau, pas déchirer brca. Et affectons chaque balise LI. Soif. Je veux que chacun soit un bloc en ligne. Et désolé si je vais vite, mais je veux qu'on soit très rapides. Et parce que ce n'est pas un cours sur CSS. Ensuite, ajoutons un peu de rembourrage pour le haïr. Chez les hommes, c'est incroyable à quel point ces choses peuvent paraître beaucoup mieux dans un court laps de temps. Très, très cool. Changeons la couleur de fond. Donnons-lui un léger rayon de bordure. Trois pixels. Comment ça a l'air ? Ça a l'air plutôt cool. Faisons en sorte que nous ayons encore un pointeur de curseur. Et puis donnons-lui juste un peu de droits de marge. Disons en pixels. Voilà, tu y vas. Tu dois admettre que ça a l'air plutôt soigné. Travaillons maintenant sur nos panneaux. Donc encore une fois, je veux juste que nous soyons spécifiques à cause des règles CSS en cascade. Je veux que nous attrapions cette tabulation repre, alors je veux que nous prenions nos divs avec classe de panneau et cette étoile notes d'étourneau. Tout d'abord, n'affichons rien. Ils regardent Sheila. Donnons-lui juste une certaine marge. On sait ce qu'on ne va pas voir ce qu'on fait. Oui, faisons ça à la fin. Alors voyons ce qu'on fait. Ils considèrent donc 0 à m. Donnons-lui une frontière. Un pixel, solide, triple D. Comment ça ressemble ? On y va. C'est en quelque sorte me faire faire une pause. Il a besoin de rembourrage. Ça a l'air terrible. On y va. Et donnons-lui une courbe, bordures, un rayon de bordure, trois pixels. On y va. C' est toutes ces petites touches qui nous font paraître beaucoup mieux, non ? Cette petite courbe légère dans la bordure la rend bien mieux. Ok, maintenant, cachons tout. On y va, il est parti. Qui, encore une fois, d'un point de vue de style avec à peu près fait. Mais ces deux choses que je veux faire, une, une unité quand nous cliquons soit sur la nourriture blague ou saviez-vous sur veut que nous le styliser un peu différemment donc vous savez, il est supprimé. Appelons ça un acte de style. La deuxième chose que je veux faire est quand les panneaux s'ouvrent, nous devons en quelque sorte ajouter dynamiquement une classe pour la montrer ou la cacher. Alors ajoutons un peu plus de CSS à ce fichier en ce moment. Comme je l'ai mentionné, je veux ajouter un peu plus. Accédez à notre enveloppe d'onglets. Je me demande alors quitte le panneau avec le panneau de classe. Et comme je l'ai dit, nous allons faire basculer cette classe active, non ? Et le, tout ce qui va faire quand il sera actif, c'est qu'il va l'afficher. On va l'afficher comme un bloc. La dernière chose que je veux faire, c'est que je veux accéder à notre table. Et comme je l'ai mentionné, je veux ajouter une classe sélectionnée 2, qui si un onglet est sélectionné et qu'il a changé sa couleur de fond arrière à 139 autre. 139, 139. Je pense que ça devrait marcher. Alors on y va. Nous avons fait notre CSS. Je pense que si nous voyons des erreurs, va les trouver le long du chemin et nous allons les réparer. Si nous obtenons notre fichier d'index, rappelez-vous, laissez-moi simplement développer ceci. Rappelle-toi ce qu'on a fait. Nous avons ajouté un emballage pour tous nos panneaux à l'intérieur de la rétine. Nous avons une section de titre que nous avons écrit cette balise UL. On lui a donné une classe de frappe, et on a deux onglets. Et nous éditons cet attribut cliqué fille. Qu' est-ce que c'est ? Je vais m'y mettre sous peu. Dans défini nos deux panneaux avec lui caché pour l'instant. C' est nous qui voulons ajouter des clauses. Nous voulons les ajouter dynamiquement pour qu' un soit affiché et quand un utilisateur clique sur l'un de ces panneaux qui le montre, quand il clique sur l'autre panneau à masque le précédent et affiche le nouveau. Pense à la façon dont on peut le faire. Mais avant d'entrer dans ça, laissez-moi juste avoir une conférence rapide sur cet attribut coché fille. Comment cela fonctionne-t-il et pourquoi l'avons-nous ? On se voit maintenant. 29. À quoi est utilisé l'attribut de données ?: D' accord, c'est quoi cet attribut de fille ? Eh bien, tout d'abord, HTML5 a introduit l'attribut fille, et il nous permet de stocker quelques informations supplémentaires dans notre élément HTML sans signification particulière. Rencontre avec, nous pouvons stocker de l' information en moi et nous pouvons faire avec cette information car nous aimons cette règle difficile et rapide que nous ne devrions l'utiliser que dans une seule circonstance. Donc, chaque fois que vous voulez ajouter des données au HTML, c'est un excellent moyen de le faire. Et ne vous inquiétez pas, la syntaxe est super facile. Tout ce que nous devons faire est d'inclure un attribut avec un nom qui commence par fille. Rappelez-vous dans notre exemple, rappelez le tiret de données cliqué, qui était notre nom d'attribut. Et très important, rappelez-vous, afin d'y accéder dans le besoin d'utiliser JavaScript pour lire la valeur de cet attribut. Javascript et l'utilisation de l'attribut vont beaucoup main dans la main. Images se débarrasser de cette diapositive, flyaway Verde. Et laissez-moi juste dire que lire les valeurs avec JavaScript quand nous voulons accéder à cet attribut de données est également très facile. Tout ce que nous devons faire est d'utiliser la notation point était le mot clé, siège fille, objet. C'est ça. Donc tout ce qu'on fait, c'est qu'on attrape nos éléments. Utilisez la notation par points. Nous utilisons le mot-clé « filles ». C' est ça. Ensuite, utilisez à nouveau la notation par points. Et puis pour accéder à cette valeur, nous insérons le nom de notre fille. Rappelez-vous dans notre exemple que nous venons de voir, nous avons mis le nom coupé. Est-ce que ça a du sens ? Donc, je voulais juste prendre ce très bref moment pour discuter cet attribut de siège fille dans un peu plus en détail parce que vous ne l'avez peut-être pas vu avant. Mais comme vous le verrez dans la prochaine conférence, il a un attribut très, très pratique pour accéder à Cold Harbor comme ayant du sens. Si ce n'est pas le cas, ne vous inquiétez pas, nous allons le couper dans les prochaines minutes. Rendez-vous à la prochaine conférence. 30. Ajouter le cours sélectionné: Donc, nous y voilà. Nous avons commencé à ajouter ces onglets tout en bas. Comme vous pouvez le voir, l'utilisateur clique, rien ne se passe. Alors passons à notre éditeur de texte et commençons à taper ce JavaScript. Je ne veux pas que tu réfléchisses à la façon dont tu peux le faire. abord, nous devons écouter un écouteur d'événement. N' avons-nous pas besoin de déterminer l'onglet sur lequel l'utilisateur a cliqué. Et nous pouvons même utiliser ou utiliser même babbling ici. On sait que tout va bouffer aujourd'hui. Tu te souviens qu'on a lu ces deux frappeurs. Je vais, je balises dans un élément UL parent. Utilisez donc l'événement bouillonnant. Et bien sûr quand il est cliqué, nous avons besoin d'un moyen de sorte du navigateur, le DOM pour montrer cette pénalité appropriée. Nous devons donc ajouter des clauses dynamiquement. Et comment on fait ça ? Il y a plusieurs façons, mais je veux que vous utilisiez l'API de liste de classes. Et rappelez-vous qu'il y a une méthode appelée bascule dessus, que je veux que vous utilisiez aussi. Alors arrêtez la vidéo ici et dans les cinq prochaines secondes, je commencerai à découper la solution avec vous. Bonne chance. D' accord, j'ai entendu dire que tu l'avais fait. C' est bien. Je vais texter les données en tant que fichier d'index. Sortons le fichier dot js. Et commençons à coder. Alors allons ici et peut-être au fond, pourrait le mettre de toute façon dans notre dossier. Copions simplement cet en-tête. Il est donc bon de structurer votre code comme ceci. Sinon, tu vas oublier. Et c'est un site très simple, donc nous n'avons pas besoin de plusieurs fichiers JavaScript. Normalement, vous en auriez beaucoup différentes. Ok, donc par où commençons-nous ? Eh bien, premièrement, je veux traiter de nos rubriques et de nos listes. Il suffit de dire, prenons notre frapper notre étiquette UL parent. Rappelez-vous que nous avons notre fichier d'index. Nous pouvons voir ici que nous avons lu nos titres dans cet élément. Revenons à notre JavaScript ici et prenons d'abord nos en-têtes. Nous savons comment le faire maintenant, vous tous les pros à cela. Utilisons QuerySelector. Et nous voulons attraper l'objet avec la classe de me frapper, aller ici avec AQL donné, cette classe de frapper. Alors on y va. Pas difficile, non ? La prochaine chose que je veux faire, c'est que je veux aussi définir nos panneaux. Décrivez nos titres et les médias. Prenons nos panneaux et est défini une nouvelle variable JavaScript appelée panneaux. Et oui, on sait comment faire ça aussi. Sélecteur de requête, tout cela parce que rappelez-vous ici il y a plus d'un panneau. Et nous lui avons donné une classe de panel pour obtenir notre fichier d'index. Nous avons donné à chaque div, chaque panneau sa propre classe appelée panneau. Et encore une fois, ce n'est pas difficile. On va juste étape par étape. Ok, la prochaine chose que je veux faire est que je veux basculer entre l'onglet sur lequel les utilisateurs ont cliqué parce que je veux le style différemment. Donc, cela dit juste définir une variable d'élément sélectionnée. Basculer entre les classes. Et je vais un peu plus vite maintenant parce que nous avons déjà fait ce genre de choses dans des défis et des exercices précédents. Donc, vous devriez avoir une très bonne idée de comment cela fonctionne. Mais définissons une variable appelée panneau sélectionné. Et il commence en définissant cela comme null. Maintenant, comme je l'ai mentionné dans l'introduction à cela, je veux profiter des bulles d'événements. Attendons l'écouteur d'événement sur l'élément parent UL. Comment on fait ça ? Eh bien, nous savons que nous l'avons défini dans une variable JavaScript appelée frapper, hum, qu'il y a une méthode appelée addEventListener. Vous allez probablement glisser, c'est si facile que vous avec moi, supportez avec moi. Ça va devenir un peu plus compliqué. Nous écoutons l'événement click sur moi. Et bien sûr, nous voulons exécuter notre fonction de gestionnaire est juste d'utiliser la syntaxe de flèche. Très, très simple. La première chose que je veux faire maintenant est que je veux qu'on trouve, ce que je vais, j'ai déclenché le CBT. Souviens-toi de notre fichier d'index, nous jugeons avec ces deux chars alliés. Et quand l'utilisateur en prend un, nous voulons savoir lequel a été cliqué et nous voulons ajouter un cluster dynamiquement. On y va. Voyons quel allié a déclenché l'événement et comment pouvons-nous le faire ? Tu te rappelles ? Eh bien, très simple. Nous définissons une variable appelée cible. Nous accédons à notre événement, allons l'exécuter, juste suivre la norme et nous ne le définissons pas comme un événement, nous l'avons juste défini comme E. Et chaque événement qui est émis a une propriété cible et qui nous indique quel élément réellement a déclenché cet événement. Et maintenant, utilisons notre fille définit la valeur de sa fille. Cela va déterminer quel panneau nous avons affiché à l'utilisateur. Souviens-toi, on a appelé Alice, cliqué. Tu peux l'appeler comme tu veux. Et rappelez-vous, nous avons eu cette brève conférence expliquant ce qu'est cet attribut de données. Alors oui, on va le chercher. Ma fille va être la cible de l'événement. Et il a une propriété de fille définie. Rappelez-vous que nous devons utiliser ce mot-clé et nous avons appelé le nôtre cliqué. Il faut, c'est vraiment si facile. Cool. Ok, maintenant je veux qu'on ajoute une clause dynamiquement à chacune de ces balises LI. Donc, pour ce faire, je veux utiliser l'instruction IF de JavaScript. Je veux qu'on dise, eh bien, si la cible, c' est une de ces étiquettes LI. Tout d'abord, son nom de balise doit être égal à un allié. Si l'utilisateur clique entre les boutons ou à droite du bouton et de l'espace vide, je veux que rien ne se passe. Donc, ce n'est que si l'utilisateur clique sur l'une de ces balises LI. Si c'est le cas, supprimons l'élément actuellement sélectionné. Et comment on fait ça ? Eh bien, si le panneau liquide, nous trouverions ce qui précède comme nul, si ce panneau sélectionné n'est pas égal à null, alors nous savons qu'il est actif. Nous savons qu'une de ces balises est active. Et dans ce cas, ce qu'on veut faire, c'est avoir accès à notre panel. Nous sommes allés affecter sa tige de griffes. Et nous voulons le faire en accédant à cette API de liste de classes. Et nous avons déjà traversé cela avant, mais il a une propriété appelée Toggle, ce qui est très, très utile. Et nous voulons basculer une clause que nous venons de sélectionner au hasard. Ok, donc maintenant nous avons supprimé l'élément actuellement sélectionné. L' étape suivante consiste à se terminer sur l'élément actif sélectionné. Nous voulons ajouter la classe sélectionnée. On est allés chercher notre crayon. Et nous voulons définir cela comme la technologie alliée nouvellement cliquée. Et la dernière chose qu'on veut faire, c'est avoir accès à ce panneau de liquide. Nous voulons accéder à la liste de classes API x est une propriété appelée total. Et bien sûr, nous voulons ajouter cela sélectionné à elle. Est-ce que ça a du sens ? Allons à notre navigateur. Cliquez sur un et déplacez notre souris. Et vous pouvez voir notre style CSS s'est appliqué. Nous avons littéralement édité ceci dynamiquement et cliquez sur l'autre changement. Et pour vous le prouver, ce que je peux faire, c'est ouvrir la console ici, et maintenant cliquer sur ce bouton dégénéré. Nous pouvons voir et éditer cette classe appelée sélectionnée dynamiquement. Si nous cliquons sur la blague alimentaire maintenant, Il est éditer le sélectionné près de cela et il est retiré de l'autre. C' est génial ? Bien joué ? Et j'espère que vous suivez. J' espère que tu trouves que c'était plus intuitif. Désolé, je sais que je me précipite. Mais on l'a déjà fait. Si vous avez des questions, je suis très, très heureux de vous aider. Alors s'il vous plaît postez-les sur Q&R , mais j'espère que c'est logique. Nous avons parcouru un chemin incroyablement long. Mais vous savez ce que cette conférence est longue, je veux que vous vous arrêtiez , que vous passiez à travers ce que nous venons d'apprendre ensemble. Et puis dans la prochaine conférence, pourquoi l'avons-nous fini ? Ça va être épique. Je te vois maintenant. 31. Présenter et cacher nos panneaux en cas de clic d'inscriptions: OK, continuons avec notre code. Je m'amuse beaucoup. J' espère que vous devriez le faire. La prochaine étape que nous voulons faire maintenant est de trouver la pénalité que nous voulons montrer, n'est-ce pas ? Parce que nous cochons sur les onglets de frappe, mais rien ne s'affiche en dessous. Comment on fait ça ? Eh bien, nous voulons toujours être dans le bloc if, n'est-ce pas ? Parce que nous voulons seulement que cela se produise, Il y a des panneaux pour montrer si nous avons effectivement cliqué sur un élément allié. Mais maintenant, il est temps de trouver le panneau que nous voulons montrer. Et ces étudiants de Medea est exactement la raison pour laquelle nous avions besoin de ces attributs de fille. C' est ainsi que nous allons l'utiliser, ne définit une variable JavaScript appelée panneau cible. Parce que c'est la pénalité ciblée. Si nous voulons montrer à l'utilisateur, nous voulons accéder à notre objet document sur le net. Nous voulons accéder à un sélecteur de requête. Et la requête sélectionnée l'élément que nous voulons rechercher est l'attribut fille. Et rappelez-vous ce qu'est l'attribut de données. C' est l'objet sur lequel nous avons cliqué. Rappelez-vous, nous l'avons défini comme la cible. Nous avons notre fichier d'index. Ce sera soit la première table alliée, la deuxième balise LI. Nous avons défini un attribut de données appelé cliqué, et il va soit avoir une valeur d'ID de gioco, faits idéaux. Et nous avons donné le premier panel et l'identification de la blague dans le deuxième panel, l'identification des faits. Alors j'espère que c'est logique pour ça qu'on en avait besoin. Nous trouvons littéralement leur panneau maintenant qui a l'ID de leur attribut de données. Qui ne s'inquiète pas si tu ne comprends pas tout à fait, on va s'en occuper maintenant. La prochaine chose que je veux faire, c'est qu'on veut traverser ces panneaux, non ? Et nous voulons nous assurer que le panneau cible est la pénalité claire sur. Et puis nous voulons éditer près de lui. Et la classe que nous voulons ajouter est appelée active y. Eh bien, si nous allons à notre CSS et nous faisons défiler ici, la classe d'active lui donne une propriété d'affichage de bloc. C' est ce qu'on veut faire. Et si nous faisons défiler vers le haut dans notre fichier JavaScript, rappelez-vous en haut que nous avons défini nos panneaux dans une variable appelée panneaux. On a juste interrogé tous ces divs avec une classe de panneau. Ne vous perdez pas dans les moindres détails. Tout ce que nous faisons en ce moment, nous devons déterminer si le panneau actuellement sélectionné est celui affiché et l'autoriser. Vous pensez probablement que vous pensez probablement client, si nous avons besoin de commencer à faire une boucle à travers les panneaux, nous devons convertir notre liste en un tableau. Nous avons donc accès à la pour chaque méthode. Si tu as même commencé à penser dans ce sens, sérieusement, Bravo. Commencer à me prouver que vous êtes vraiment en train de devenir un très bon codeur. Les chauves-souris dans ce cas, c'est un peu unique. Si nous allons faire défiler ici dans notre fichier JavaScript et nous regardons la variable de ce panneau. Nous avons utilisé une méthode d'accès appelée Query Selector all. Et le mot clé ici est tout. Lorsque nous utilisons cela, nous n'avons pas renvoyé de HTMLCollection. Nous sommes retournés romancier. Et aucune liste n'est assez unique parce que bien que ce ne soit pas un tableau sorti de la boîte, il nous donne accès à la pour chaque fonction, ce qui est vraiment, vraiment génial. Cela signifie juste que nous pouvons contourner la conversion de notre liste en un tableau. J' aurais du sens, mais revenons dans notre code. Ok, alors qu'est-ce qu'on fait ? Eh bien, laissez-moi juste dire ici pour vous rappeler, nous pouvons utiliser le pour chaque fonction parce que sélecteur de requête tous renvoie une liste de noeuds. Ok, j'espère que ça a du sens. Tout ce que nous devons faire alors ce X est notre liste de nœuds de panneaux. Rappelez-vous, sur moi, nous avons accès à ceci pour chaque méthode directement sortie de la boîte. Et passons à travers chaque panneau. Et il ne peut pas mettre fin à son utilisation de la nouvelle syntaxe d'erreur pour définir notre code. Tout ce que nous voulons faire, c'est que nous voulons vérifier sans pénalité est le même que le panneau cible. Et le reste du panneau cible est l'élément que nous voulons montrer à l'utilisateur. Si tel est le cas, ce que nous voulons faire est que nous voulons accéder à notre panneau avec A1 pour accéder à l'API de liste de classes. Et nous voulons éditer la perte. Et le coût que nous voulons ajouter comme actif. Droit ? Peux-tu croire que c'est aussi simple ? Sinon ? Que voulons-nous arriver ? C' est rocheux, probablement deviné. Nous voulons toujours accéder à l'API de liste de classes, mais cette fois, nous voulons supprimer la classe d'actif. J' espère que cela fonctionne parce que sinon je vais ressembler à une telle cartographie. Donc on y va, ici je vais onglets. Cliquons sur la plaisanterie alimentaire. Wow, on y va. Cliquez sur Dino. Et bien, oui, donc, si cool. S' il vous plaît, célébrez vos succès. Sautez de haut en bas, pompez de la musique. Nous avons fait beaucoup, beaucoup de travail et cela devient assez avancé aussi. C' est génial ? Les chauves-souris ? Tu sais quoi ? Je voulais faire encore une chose. Je ne veux pas que la réponse soit montrée comme ça. Comment appelez-vous une fausse nouille ? Et dans les pâtes, ça montre juste ce qu'est un 12. Pourquoi ne pas convertir ça, essayer de le convertir ou répondre au bâton. Et lorsque l'utilisateur clique sur le bouton, nommé uniquement comme affichage de début. Réfléchissez à la façon dont vous pouvez le faire et pourquoi ne pas avoir une conférence de plus rapidement. Et je vais vous montrer comment notre mot l'a dactylographié et c'est très, très rapide. Vous verrez, c'est rapide et l'affectation. Rendez-vous à la prochaine conférence. 32. Ajouter un bouton dynamique: Comme je l'ai mentionné, je veux que nous ne montrions pas cela directement. Je veux que nous ajoutions un bouton lorsque l'utilisateur clique sur un bouton dans un Hahn dit affiché dans le HTML SCADA ici, et faisons défiler vers le bas pour l'appeler fausse nouille est supprimer ce paragraphe. Je veux ajouter maintenant un bâton et cela nous donne le bouton et l'identification des étrangers montrent sur les téléviseurs ce qu'il fait. Et on peut juste avoir le mot réponse ici. Et avons notre réponse sous nous. Ceci est le mettre dans une balise de paragraphe et lui donner un ID d'apparition. Comment ce ruissellement peut être vide si nous allons à notre navigateur et nous cliquons sur la plaisanterie alimentaire, nous y allons. Voilà notre bouton. C'est très simple, mais évidemment, quand on passe des billets, rien ne se passe. Alors, comment allons-nous faire ça ? Eh bien, c'est un JavaScript vient dans l'image. Revenons à notre éditeur de codage. Allons à notre fichier JavaScript et les pistes maintenant. Où suis-je ? Faites défiler ici. Ouais, on n'a plus besoin d'être avec l'événement inet click. Donc jetez tout ce code et il est maintenant affaire avec bouton pour afficher le début. Ça va être très simple. La première chose que je veux faire, c'est prendre notre bouton. Appelons ça le bouton Onset. Nous savons comment faire ça. Document. Obtenir l'élément par ID. Et la carte d'identité qu'on lui a donnée était le début du spectacle. Alors on y va. On a notre bouton. Tout ce que nous devons faire maintenant, c'est que nous devons ajouter un écouteur d'événement directement, afin que nous sachions comment le faire aussi. Nous accédons à ATD appelé AddeVentListener. Avec cela, nous voulons écouter les événements click. Et lorsque l'événement click est déclenché, lançons un gestionnaire que nous appelons onset est de le définir en utilisant le mot-clé fonction de JavaScript, que nous appelons maintenant onset. Ça va nous donner l'événement. En fait, nous n'en avons pas besoin dans ce cas. Donc, laissez-moi réellement supprimer ceci. Qu' est-ce qu'on veut faire dans ce gestionnaire ? Pensez-y. Eh bien, tout d'abord, nous voulons ajouter une classe à ce paragraphe. Ok, je veux éditer dynamiquement, et je vais aussi changer son contenu texte. Je veux donner la réponse, puis je veux cacher le bouton. Revenons donc à notre fichier JavaScript et faisons ça. Donc, d'abord, allons accéder à notre document, obtenir élément par ID. C'est bien. Ce paragraphe que nous avons donné une idée de début. Et ajoutons une clause plus des listes. Dans cette API, nous avons une propriété ou une méthode d'ajout et nous voulons lui donner une classe de sucre. Et ne vous inquiétez pas, nous allons le coiffer maintenant. Faisons la même chose, mais maintenant ce que je veux faire, c'est que je veux changer ça prend du contenu. Donc obtenir élément par ID. Nous voulons obtenir le paragraphe. Nous voulons changer son contenu prend. Et nous voulons que ce soit le début, qui est une IM, des pâtes dans le passé. On y va. Puis enfin, prenons notre bouton de réponse. Sortons la propriété de style, sa propriété d'affichage, et définissez-la sur none. Donc, si nous allons à notre navigateur maintenant, nous cliquons sur la plaisanterie alimentaire. On a un bouton, on clique dessus et on a le début, woohoo. C' est, appelons-le juste pour le rendre un peu plus joli. Nous savons que nous avons ajouté cette liste de cours. Nous allons juste la clause appelée plus courte. Donc, tout ce que nous avons à faire est que nous pouvons aller dans notre styles.css. Oui. Et on peut quitter le spectacle. C'est aussi facile. On peut changer sa couleur d'arrière-plan. Faisons une belle couleur jaunie. Espérons que ça aura l'air sympa. Nous pouvons définir sa largeur, un 100 pixels. On peut lui donner un peu de rembourrage. Et donnons-lui une bordure juste pour la finir. Jaune massif. Je veux qu'il soit un peu plus sombre, la frontière. Ceci, allons à notre navigateur. Et on y va. Ça a l'air assez juste. Donc, si nous rafraîchissons la plaisanterie alimentaire, que faire des nouilles effet cool. Si l'utilisateur clique sur la réponse, nous sommes renvoyés à nous, un imposteur. Je n'arrive pas à croire à quel point nous sommes allés avec un arbre. Il suffit de continuer à améliorer notre page étape par étape, sérieusement, et vraiment aussi amusant, j'espère que vous vous amusez parce que vous avez vraiment appris beaucoup d' informations utiles que vous pouvez utiliser pour appliquer à vos applications web. Je suis super excité, Walden, merci de rester avec moi. J' espère que vous avez apprécié ce cours une tonne. Si vous avez des questions, postez-les sur Q&R, je suis là pour vous aider et continuer, rester motivé. Et je te verrai à la prochaine conférence. 33. Outro et de série - BIEN FAIT: Qui ça pourrait vraiment être ? C'est ça ? Toutes les bonnes choses se terminent, non ? Sera. Sera, tu as si bien fait, meneur et tard. Quelle est la version féminine des jambes ? Le droit. Mesdames et messieurs, merci beaucoup, chers étudiants. Nous restons avec moi à toute cette série. Si c'est la première classe que tu as entendu parler de la mienne. Merci. Merci pour le sport. Je m'amuserais beaucoup parce que dans cette perte, nous avons construit toute une logique ensemble. C'était vraiment bien. Et il applique beaucoup, sinon toutes, des techniques que je vous ai enseignées dans les classes précédentes sur cette série DOM. Eh bien, c'est vraiment cool, n'est-ce pas ? Et ne tenez pas pour acquis. Vous savez maintenant ce qu'est le dôme. Nous savons ce qu'est la bombe, pas là en parlant de la nomenclature, la bombe, vous savez comment le DOM est différent de JavaScript et Python. Vous savez maintenant comment accéder au DOM. Tu te souviens des méthodes de X ? Vous savez comment traverser à un mouvement dans le DOM. Rappelez-vous d'utiliser les relations parents, enfants, frères et sœurs des nœuds, vous savez comment les événements fonctionnent, d'où ils viennent. Vous savez comment attacher des écouteurs d'événement à la page. Vous savez comment écrire JavaScript afin de réagir à ces veines certainement. Et bien sûr, dans cette classe, vous savez maintenant comment construire un projet. J' espère vraiment que vous avez appris une tonne dans ce cours, mais j'ai pris beaucoup de temps pour apprendre ce que j'ai ressenti dans ce circuit. Est-ce que Hubbard vous propose un hub ? Cela rend vraiment votre processus d'apprentissage dans l'industrie du développement web beaucoup, beaucoup plus rapide. Merci beaucoup pour tout votre soutien. Merci beaucoup. plaît laissez un commentaire si vous avez apprécié le cours, si vous ne l'avez pas fait, faites-le moi savoir aussi et je vais essayer de m'améliorer. Je ne suis pas parfait loin de là. Et avant que nous finissions, n'oubliez pas d'essayer votre main à la mission. De cette façon, une affectation écrit, c'était une affectation. Amuse-toi beaucoup et j'espère te voir un jour dans une future classe. Merci. Merci. Merci. Et des audios.