Série modèle d'objet de document 2023 - Partie 5 : Hiérarchie des événements, capture et ébullition

1. Introduction du cours - Capturer et bouillir: Bienvenue, bienvenue, bienvenue dans une autre classe très excitante et toute une série sur le DOM, le Document Object Model. Je suis Clyde, je vais être votre instructeur et la perte de Gerst va être très avancée. Mais ne vous inquiétez pas, si vous êtes nouveau dans le développement, je vais vous expliquer les bases. Mais si vous êtes un nouveau développeur et que vous ne m' avez pas suivi dans mes autres classes précédentes. Je vous encourage à les faire d'abord parce qu'ils s'appuient tous les uns sur les autres pour en arriver à ce point , en disant que tous les partis sont de quoi consiste cet article ? Eh bien, je vais faire un pas en arrière. Vous savez que les différents objets dans le DOM, n'est-ce pas ? Nous avons des objets natifs et des objets JavaScript, qui sont différents les uns des autres. Et ils ont tous leurs propres propriétés et méthodes. Ces propriétés et méthodes sont le résultat de ce qu'on appelle l'héritage. Et c'est très important pour vous de comprendre cette structure hiérarchique, c'est pourquoi, dans cette classe, je vais commencer par expliquer ce qu' est la structure hiérarchique et ce que je veux dire par héritage. Mais après cela, nous discutons de deux concepts très, très importants en ce qui concerne les événements. Rappelez-vous dans la classe précédente, nous avons discuté des événements, beaucoup de détails. Tu serais d'accord avec moi que les événements doivent venir de quelque part, non ? Eh bien, c'est un moyen connu sous le nom de capture d'événements. Il doit commencer d'une certaine façon et a voyagé jusqu'à l' élément qui a déclenché cet événement, n'est-ce pas ? Si c'est un bouton, représentez une balise div , par exemple, allons parcourir jusqu'à la fin de la journée. C' est ce qu'on appelle la capture d'événements. D' un autre côté, au revers de la pièce, nous avons des événements bouillonnants. Et c'est un concept que les événements bouillonnent dans l'arbre DOM et c'est pourquoi il est important de savoir comment naviguer dans le DOM, que nous avons également couvert dans une classe précédente. Donc, vraiment ce cours va être lourd. Je vais l'expliquer à un niveau très, très amusant et très intuitif. Donc, ne vous inquiétez pas si vous n'avez pas suivi rarement d'autres cours, à moins que vous ne commenciez vraiment. Et je vous encourage à faire une pause tout de suite, puis à y retourner et à en profiter. Mais si vous avez suivi les notes mais que vous continuez, si vous êtes doué avec le développement, Super, vous allez apprendre quelque chose de nouveau. Vraiment conflit. Nous allons découper des exemples pratiques. Je vais vous donner des défis. Ça va être assez honnête à propos de vos élèves audios. Et je te verrai dans les filtres Lytic. 2. Objets JavaScript: Ce sera une section incroyablement intéressante, assez avancée ou peut se terminer. Et avant de commencer à sauter dans discussions compliquées sur les hiérarchies et les prototypes, je veux sauter sur la console. Je veux vous montrer pourquoi pratiquement peut devenir une chose importante. Et ce que je veux faire, c'est que je veux faire deux choses. Maintenant. Je veux créer un objet JavaScript et accéder à son prototype. Et je veux créer un objet DOM et accéder à son prototype. Par ailleurs, si vous n'êtes pas trop sûr de ce qu'est un prototype, un aller dans beaucoup de détails dans mon cours de grand maître complet JavaScript. Alors s'il vous plaît vérifier si vous êtes intéressé. Si vous savez ce que sont les prototypes, génial, vous serez en mesure de suivre. Si vous n'êtes pas tout à fait sûr et que vous ne voulez pas faire mon cours dessécher pour juste rapidement Google il. En bref, le prototype est un peu comme une période dont vous héritez quelque chose. Donc, si un objet n'a pas cette propriété fonctionnelle exacte, vous êtes après passe à peu près aller travailler son chemin dans la chaîne de prototype pour essayer de trouver qu'il a fait peu de propriété que vous êtes souvent. Donc, de toute façon, nous sommes dans un navigateur d'avion. Tout ce que je veux faire, c'est que je veux ouvrir la console et que je veux juste coder deux choses car je suis blessé très, très rapidement. Allons à la console. Il suffit d'ancrer ça dans une nouvelle fenêtre. On y va. Et maintenant commençons à coder. Et laissez-moi zoomer ici juste pour que ce soit plus facile à voir. Ok, donc la première chose que je vais faire est de créer un objet JavaScript. Et cela définit l'objet est le chien. Et on peut juste dire que ce chien est assez simple, non ? Mais avez-vous déjà demandé pourquoi nous avons beaucoup de propriétés et de méthodes tout de suite sortis de la boîte. Par exemple, nous pouvons accéder à notre objet chien et regarder toutes ces propriétés et méthodes. Ils sont une tonne d'entre eux. Ainsi, par exemple, nous pouvons accéder aux majuscules. Nous exécutons cela, et bien sûr nous obtenons loup, mais maintenant tout en majuscules. Pourquoi c'est ça ? Eh bien, le point de départ est de comprendre les prototypes. Si nous accédons à notre objet chien et nous regardons son prototype. Et nous avons adoré ça à l'écran. Nous obtenons cet objet de chaîne. Maintenant, l'objet chaîne est natif de JavaScripts. Et si nous ouvrons cet objet, il a beaucoup de propriétés et de méthodes, bien sûr, auxquelles ce chien a accès. Donc, si nous faisons défiler vers le bas, nous devrions voir deux majuscules. Et voilà, deux majuscules. C' est pourquoi nous avons certaines choses à notre disposition dès la sortie de la boîte. Et c'est, comme je l'ai mentionné, JavaScript. Mais maintenant, nous allons créer un objet DOM, est défini dans une variable appelée p, et dans cette instance liste xs. Je vais documenter les objets et les pistes crée un élément. Vous saurez de la partie 1 qu'il s'agit d'un élément de création d'API DOM. C' est plutôt cool, non ? Nous venons de créer notre objet. Mais maintenant, si nous essayons d'accéder à notre objet paragraphe, et encore une fois nous essayons d'exécuter la même fonction que nous l'avons fait avec le chien. Nous obtenons une erreur de type en majuscules n'est pas une fonction. Qu' est-ce qu'il y a dans ce genre de bizarre ? Nous allons encore une fois la banque raide. Regardons son prototype. Donc, nous accédons à notre objet et nous regardons son prototype. C' est intéressant. Nous pouvons voir ici le prototype n'est pas une chaîne. En fait, son prototype est l'élément de paragraphe HTML. Et si nous ouvrons cette application, nous pouvons voir qu'elle a beaucoup d'autres propriétés et méthodes différentes de celles que nous avons créées en JavaScript. N' est-ce pas intéressant ? Avant de passer à autre chose, je voulais que tu saches pourquoi tout ça devient important. Nous devons commencer à comprendre comment les choses viennent de la fin. Un genre bizarre s'intègre. Et vous pouvez vraiment dire cela en gros, deux types d'objets différents. Nous avons ces objets JavaScript, que vous verrez dans la prochaine conférence sont appelés objets natifs. Et nous avons aussi cet autre objet, appelez-le un objet hôte qui nous est fourni par l'hôte, dans ce cas par le navigateur. Mais je n'en donnerais que trop. Je te verrai à la prochaine conférence. 3. Objets hôte: Avant de passer à discuter des hiérarchies et de la façon dont tout fonctionne, nous devons comprendre la différence entre les objets natifs et les objets hôtes. Et je l'ai brièvement mentionné dans la conférence précédente, mais je veux développer un peu plus maintenant. Dans mon cours de grand maître complet JavaScript, nous avons couvert les prototypes en détail, alors s'il vous plaît vérifier si vous n'êtes pas sûr. Mais en mettant les prototypes de côté, je ne veux pas que vous soyez confus entre les objets JavaScript et les objets DOM. De façon surprenante, il n'y a pas beaucoup d'informations à ce sujet sur la vague. C' est vraiment difficile à trouver, mais pas de stress. C' est exactement pour ça que je suis là. D' accord, donc par où devrions-nous commencer ? Nous savons que chaque nœud du DOM hérite des méthodes et des propriétés de son nœud parent. Et si vous voulez parler en langage JavaScript, nous pourrions simplement dire que chaque objet en JavaScript hérite des méthodes et des propriétés de son objet parent. C' est la même chose. Et quand il s'agit de JavaScript, peu près tout est un objet. Ce n'est pas tout à fait vrai. Tout en JavaScript n'est pas un objet, mais presque tout l'est. Et c'est pareil dans le DOM. peu près tout dans le DOM est un nœud. Le point que j'essaie de faire est que chaque objet ou chaque nœud contient une propriété privée qui contient un lien vers son prototype. Et nous avons vu que nous pouvions accéder au trait de soulignement, soulignement proto, sous l'école de gaspillage afin de voir son prototype, chaque objet et nœud a cette propriété. Ou une marée haute. Quel est votre point de vue ? En bref, le point que j'essaie de faire est qu'un nœud est un terme générique pour tout type d'objet dans le DOM. Et nous savons quand il s'agit de JavaScript et l'objet est un type de données complexe. Donc tout se résume à cela. Nous pouvons enregistrer en ce qu'ils sont des types d'objet pays. Et regardons ces deux types d'objets. Je suis sûr que vous l'avez déjà deviné. Nous avons un type d'objet natif et nous avons un type d'objet hôte. Eh bien d'abord, regardons cet objet natif. Ce sont des objets prédéfinis de base qui sont toujours disponibles en JavaScript. Et très important, ces objets de siège dans la spécification du script ECMO, les gens l'appellent juste le mot. Rappelez-vous donc qu'un objet natif est entièrement défini par la spécification de script plutôt que par l'environnement hôte ou l'eau IDE. Quelques exemples d'objets natifs, ils incluent des choses comme l'objet, la fonction, la chaîne, le désordre, booléen, ex cetera, et cetera. Ils sont beaucoup d'entre eux en JavaScript. Mais revenons maintenant à notre exemple. On a codé pour l'obtenir. Rappelez-vous que nous avons défini une variable appelée chien et nous l'assignons à la chaîne WAF. Et si nous utilisons le type d'opérateur de JavaScript et que nous passons dans le chien, qu'est-ce qui va nous être retourné ? On a vu que quand on existe, c'est un prototype. C' était une ficelle. Et oui, cet objet chien est un objet natif. Vous pouvez argumenter le client, le script ECMO parle ne définit pas notre variable chien et vous avez raison, mais ce chien est toujours un objet actif avec une classe interne de chaîne. Et cette chaîne est définie par la spécification de script ECMO et un œil mouche. Certaines personnes répartissent les objets en trois grandes catégories. Un autre étant un objet utilisateur. Et ils disent que ce chien est un objet utilisateur, mais je vois en quelque sorte la main du gâchis dans la main, un objet utilisateur et un objet natif de très, très proche. Et c'est pourquoi je dis que cet objet chien est un 1.5 natif. Débarrassez-vous de cela et passons au deuxième type d'objet, et c'est des objets hôtes. En son cœur, un objet hôte est fourni par un environnement spécifique afin servir un but spécifique à son environnement qui n'est pas défini par la spécification. Et très important maintenant, il doit nous obtenir, tous les environnements n'ont pas les mêmes objets hôtes. Ainsi, si JavaScript s'exécute en dehors du navigateur, par exemple, s'il s'exécute en tant que langage de script côté serveur dans un environnement comme Node.js, différents objets hôtes seront disponibles. Par exemple, les objets hôtes dans Node.js ou HTTP, HTTPS if S, les tableaux d'URL , etc. Mais nous savons quand il s'agit du navigateur, nos objets hôtes sont très différents. Nous avons la fenêtre, nous avons les documents, nous avons l'historique, nous avons la requête HTTP XML, et cetra, et cetra. Et quel est un autre exemple d'un objet hôte ? Codez un petit exemple ici. Disons que nous définissons une variable P et que nous utilisons l'une des méthodes d'axe dans le DOM pour récupérer cet élément. Ici, nous avons utilisé une méthode appelée getElementsByTagName. Et dans la première partie de la série, vous savez très bien qu'il s'agit d'une méthode DOM API et il nous renvoie une liste de nœuds. Le point que j'essaie de faire est que cet élément de paragraphe peut ressembler à un objet JavaScript normal. Mais il n'est pas donné plein. Votre objet référencé par notre variable p est une liste de nœuds. Et une liste de nœuds n'est pas définie dans la spécification de script. Donc, nous savons que ce qui nous est retourné par ce getElementsBytagName est un objet hôte. Est-ce un peu faire des scènes qui se concentrent ou une main récupérant beaucoup. Mais passons à autre chose. Débarrassez-vous de ça, débarrassez-vous de tout ce bruit. Et maintenant, je veux que nous parlions de l'objet fenêtre. L' objet fenêtre nous est fourni par le navigateur, par l'hôte. Et ce qui est vraiment cool à propos de cet objet de fenêtre, c'est qu'il nous donne accès à des choses comme le DOM, la bombe, et il permet à JavaScript de fonctionner dedans. Fait important, tous les navigateurs Web prennent en charge l'objet fenêtre. Et cet objet fenêtre est notre objet racine. Il nous est donné par le navigateur. Ok, donc quels sont certains des objets hôtes dans le DOM ? Nous en avons déjà vu certains dans ce cours. Le plus commun que vous avez vu est cet objet de document. Cet objet fait référence au contenu HTML ou XML affiché dans la fenêtre du navigateur. Mais nous avons beaucoup d'autres objets fournis par le DOM, comme l' objet d'événement, la console, l' objet nœud, même l'objet d' élément de paragraphe HTML que nous avons vu dans l'exemple précédent, cetera, et cetera. Il y a une tonne de plaisir. Nous avons aussi bombardier, navigateur, objets, modèles, n'est-ce pas ? Des choses comme les cadres d'historique de l'écran, le navigateur, et cetera, et cetera. Et enfin, nous avons des objets JavaScript natifs. Tous ces objets verts, ou ce que nous appelons des objets JavaScript natifs, des choses comme l'objet et le numéro, date, la chaîne, Situ, et cetera. Ok, avant de finir, vous pourriez juste vous demander Clyde, quelle est la différence entre la nomenclature DOM ? Tout d'abord, je tiens à dire que nous pouvons soutenir que l'hôte, alias notre navigateur, nous a donné accès à tous les objets DOM et les bombes directement sortis de la boîte. Et pour cette raison, ces objets sont appelés objets hôtes. Quelle est la vraie différence entre le DOM et la bombe ? Will dans la partie 1 de ce cours, vous avez appris que le DOM est un siège standard et maintenu par le World Wide Web Consortium ou W3C en bref. Et ils définissent comment nous, navigateurs, devons interpréter un document HTML ou XML. Donc, vous pourriez dire que le DOM est gouverné par un organisme spécifique. Et la bombe, le modèle d'objet du navigateur ? La nomenclature définit la façon dont les navigateurs gèrent la vue dans d'autres propriétés d'un document par opposition à son contenu, qui est principalement ce que le DOM couvre. Chez Zai Maxine. Un point très important à faire ici est que contrairement au DOM, la bombe n'est pas une norme établie par aucune organisation. Donc, c'est un peu plus comme une approche que nous utilisons en tant que programmeurs. Il nous permet de profiter du fait que tous les navigateurs web supportent certains objets et méthodes connexes. Mais de toute façon, je voulais juste mettre cela de côté juste pour que vous compreniez comment je groupe DOM et bombe en objets hôtes et pourquoi je groupe JavaScript dans une catégorie distincte tout en soi appelée objets natifs. Et nous savons que JavaScript est régi de toute évidence par une organisation qui AIG doit script spécification pour être spécifique. Et tous ses objets sont définis par cette organisation ou par cette spécification. Et c'est pourquoi nous pouvons séparer natif et hôte. J' espère que cette conférence a fait des scènes un sentiment heureux, beaucoup plus à l'aise avec l'âme. Mais ne vous inquiétez pas, nous allons entrer plus en détail dans les prochaines conférences. Et maintenant, je veux qu'on saute à Aki. Je veux que nous nous concentrions sur ces objets hôtes parce que, encore une fois, c'est de cela que ce cours est tout. Nous parlons du DOM, comment manipuler le DOM, comment rendre vos pages plus dynamiques. Et bien sûr, pour ce faire, nous devons travailler avec des nœuds. Et les nœuds, comme nous venons de le mentionner, sont les objets DOM et ce sont des objets hôtes. Et c'est pour ça que je veux me concentrer sur les objets hôtes, les ports cool, faire des saints. Et je te verrai à la prochaine conférence. 4. Héritage: Il est temps maintenant de regarder la hiérarchie des nœuds. Comprendre la hiérarchie des nœuds nous permettra de comprendre comment les nœuds obtiennent toutes les méthodes et propriétés. moment, nous savons que le DOM a tout un tas d' objets slash noeuds qui nous sont donnés directement sortis de la boîte. Et nous savons également que ces objets de noeud, aka objets hôtes, ou différents de JavaScript ou objets natifs. À l'avenir, je veux me concentrer maintenant uniquement sur les objets du nœud hôte. Bien que beaucoup de ces concepts dont nous allons parler s' appliqueront également aux objets natifs JavaScript. Ok, alors quel est le point de départ ? Qu' avons-nous besoin d'apprendre ? Eh bien, l'ensemble complet des propriétés et des méthodes d'un noeud vient comme le résultat de quelque chose connu sous le nom d'héritage. Héritage, le passage du titre à une succession à la mort. Je ne parle pas de l'héritage légal. Je parle de l'héritage DOM. Cela signifie simplement que certains objets de noeud par défaut hériteront des valeurs, aka propriétés et méthodes qui sont état sur son objet parent. Fait des scènes économiques. C' est tout ce que signifie l'héritage. Mais afin de comprendre un peu plus l'héritage, Regardons la façon dont vient la méthode simple. Donc, en ce moment, je ne veux pas regarder un objet de nœud. Je déteste que tu veuilles être encore plus simple. Je veux regarder une méthode simple. Nous savons que pour créer un mouvement modificateur ou des éléments excédentaires, nous devons toujours commencer à la racine. Nous devons accéder à l'objet document. Par exemple, pour créer un élément de paragraphe, nous devons taper document point créer des éléments, et nous passons la limite que nous voulons créer. Ici, nous voulons créer un paragraphe. La question que j'ai pour vous est cependant de savoir comment cette méthode, cela crée, élimine admis, vient de vous pourriez penser qu'il vient de l'objet du document, n'est-ce pas ? Parce que nous accédons aux documents et nous existons une méthode appelée create element. Eh bien, la réponse peut vous surprendre. Sautons sur la console et essayons de trouver. Cela crée des éléments ensemble. 5. Trouver l'endroit où la méthode createElement() vient de l'aide: Très bien, Trouvons cette méthode de création d'élément. On pourrait l'être ? Tout d'abord, accédons à notre console. Et nous allons faire de cette page une page pleine grandeur. Et essayons de le trouver. Cela signifie la Roumanie, donc vous pouvez voir un peu mieux. Eh bien, tout d'abord, laissez-moi commencer par la solution la plus évidente. Si nous essayons juste d'accéder à notre objet de fenêtre et que nous ouvrons cet objet de fenêtre, vous pouvez vraiment voir si nous trions par ordre alphabétique, il n'y a pas de méthode de création d'élément. Donc nous savons que ce n'est pas sur l'objet fenêtre. Et ça a du sens. Nous savons déjà quand nous accédons à cette méthode crée élément. Nous avons commencé à l'objet document. Alors regardons maintenant l'objet document. Je veux juste console HDR, le document de fenêtre. Donc, ce sont des objets de document représentés dans le format JSON comme. Juste si nous n'avions pas besoin d'accéder à la fenêtre pour accéder au document. Par défaut, tous les objets ou méthodes globaux sont disponibles sans utiliser la fenêtre de mot-clé. Donc nous aurions pu aller consoler le document. C' est juste un peu comme si nous le faisions, si nous ouvrons ce document et nous essayons de chercher la méthode create element. Vous remarquerez ici que nous ne pouvons pas le trouver. Pouvons-nous le savoir pour le voir ? Une chose rapide que nous pouvons faire est que nous pouvons aller Control a et nous pouvons juste essayer de le trouver en bas, mais en tapant l'élément create, et il est nulle part où être trouvé. Vous ne pouvez pas le trouver. Donc c'est assez intéressant. Donc maintenant, ce n'est pas sur l'objet window, ce n'est pas sur l'objet document. Eh bien, où est-il ? Nous allons devoir commencer à examiner l'héritage. Et pour ce faire, nous pouvons regarder le prototype de documents, aka nous pouvons regarder comment c'est le parent le plus immédiat est. Donc, si vous ouvrez notre objet de document et que nous faisons défiler vers le bas, vous verrez que c'est le prototype de ce document HTML. Et si nous ouvrons ce prototype, l'objet de document HTML, encore une fois, nous pouvons voir que la méthode create n'est pas ici. Alors faisons défiler jusqu'à son prototype, que HTML détermine prototype. Et ici, nous obtenons un autre document appelé, mais cette fois un capital D. Nous sommes passés par cela en détail dans la partie 1 de ce cours. Mais de toute façon, ouvrons cet objet. Et la bonne nouvelle est, si nous faisons défiler ici, et ici ce sont Mes chers étudiants qui créent la méthode d'élément. Donc, mon point sur l'héritage est le suivant, lorsque l'analyseur tombe sur notre méthode d'élément create sur l'objet document, le petit d que je peux ajouter, il n'est pas là. L' analyseur doit ensuite remonter la chaîne du prototype. Et finalement, il va trouver cette méthode d'élément de création sur le grand-parent de l'objet de document, ce grand objet de document D, et c'est ainsi que l'héritage fonctionne. L' objet document hérite de la méthode create element de l'objet document grand D. Qui, qui n'est-ce pas ? Génial ? J'espère que tu t'amuses. J' espère que vous apprenez beaucoup dans cette série de cours. La somme de ces choses est très avancée. Mauvais, on ne fait que commencer. Et nous avons commencé par un exemple très simple. Nous avons regardé l'objet document dans le DOM, et nous avons suivi cela tout le chemin vers le haut afin de trouver d'où vient l'une de ses méthodes, Henry a trouvé qu'il était sur son grand-parent. Je peux vous le prouver, mais en allant document, nous pouvons regarder son type de proto, qui est ce HTML. Tu te souviens de ce document ? Et nous pouvons regarder son prototype. Et ça devrait être le grand D, le document. Et nous savons dans ce grand D dans cet objet de document, c'est d'où vient la méthode. C' était donc un exemple très précis, très simple. Mais je veux maintenant m'éloigner de l'objet document dans le DOM. Et je veux regarder un objet de nœud spécifique dans le DOM. Et je veux suivre cette hiérarchie des objets de noeud jusqu'à la chaîne prototype afin que nous puissions mieux comprendre le DOM. Ça va être très, très intéressant. Donc, je vais vous voir dans la prochaine conférence et commençons à regarder maintenant les hiérarchies de nœuds. 6. Hiérarchie des nœuds d'élément: Ok, je ne cesse de te le dire et regarde la hiérarchie des noeuds et on ne cesse de le retarder plus. Allons y sauter maintenant. Commençons par créer un élément de paragraphe très simple avec un abdomen. Nous savons que ce sera un objet DOM. Attendez, attendez, attendez, attendez. Comment savons-nous que c'est un objet DOM ? Laisse-moi te montrer. Très bien, alors comment pouvons-nous savoir que notre élément de paragraphe est un objet DOM sera la première chose que je veux faire est de définir une variable appelée paragraphe et c'est en créer un. Donc, créez des éléments de document. Et nous voulons créer un élément de paragraphe, n'est-ce pas ? Tout ce que nous devons faire pour déterminer son type d'objet comme modèle. La façon la plus simple à laquelle je peux penser est de pouvoir l'alerter à l'écran. Et nous pouvons voir ici que l'élément retourné est un objet. Et quel type d'objet est-il ? C' est un élément de paragraphe HTML, objet. Et le cou, mes chers étudiants est un objet DOM. Comment savons-nous que c'est un objet DOM ? Saura que cela semble un peu étrange, mais nous savons que c'est un objet DOM parce que ce n'est pas un objet JavaScript. Par exemple, si nous définissons une nouvelle variable appelée objet, et que nous utilisons simplement les accolades, il existe de nombreuses façons de créer un objet en JavaScript. Au fait, ce n'est qu'un d'entre eux. C' est un moyen très rapide de le faire. C' est en fait très similaire, sinon la même chose à appeler un nouvel objet. Et nous jetons juste null comme prototype. C' est tout ce qu'il fait. Les accolades font. Alors on y va. On a un objet. Et si nous alertons cet objet, qu'est-ce qu'on verra ? Eh bien, on y va. Nous savons que c'est un objet et nous savons qu'il est de type objet avec un gros O. Et ce gros objet O est un objet JavaScript qui ? Nous venons donc de montrer que ce paragraphe que nous venons de créer est un objet DOM. Ok, cool. Donc nous avons notre paragraphe, nous savons que c'est un objet DOM. Commençons à remonter la structure hiérarchique. Son prototype sera, dans ce cas, l'élément de paragraphe HTML. Whoa, whoa, whoa, whoa, whoa. Comment savons-nous que son prototype est l'élément de paragraphe HTML ? Encore une fois, laissez-moi juste sauter rapidement sur la console et vous montrer. Ok, comment pouvons-nous savoir que le prototype de ce paragraphe que nous avons créé est l'élément de paragraphe HTML. Tout ce que nous avons à faire est d'accéder à notre objet paragraphe. Et bien sûr, nous devons accéder à son prototype. Et on y va. Son prototype est cet élément de paragraphe HTML. Super, j'espère que ça a du sens. Maintenant, l'élément de paragraphe HTML a également un prototype, et son prototype est l'objet élément HTML. Je suis sûr que vous obtenez le coup de cela maintenant, mais comment savons-nous que l'élément de paragraphe HTML a un prototype d'élément HTML ? Alors que les deux façons que nous pouvons trouver cela, les premières et les plus faciles façons d'ouvrir cet objet élément de paragraphe HTML. Et bien sûr, nous pouvons aller au fond et nous pouvons regarder son proton. Et ce proton est l'élément HTML. La deuxième façon de le faire si vous ne vouliez pas l' ouvrir car nous pourrions accéder à nos cotes de prototype, l'objet paragraphe que nous avons créé. Et puis nous pouvons regarder sa propriété prototype. Et bien sûr, nous obtenons l'élément HTML. J' espère que cela a du sens. Retournons à la conférence. Je pense que vous comprenez comment il a trouvé les prototypes. Donc je ne vais pas continuer à te montrer avec les prototypes qui viennent. Vous pouvez juste prendre ma parole, mais je vous encourage vivement à aller vérifier vous-même. C' est un exercice intéressant. Alors continuons cet exercice. L' élément HTML a également un prototype. C' est le prototype va être l'objet élément. Son prototype va être l'objet noeud. C' est le prototype qui va être la cible de l'événement. Et maintenant, c'est intéressant. Accrochez-vous pour changer. Le prototype ultime est le prototype d'objet. Et ce qui est fascinant, c'est que ce prototype d'objet vient de JavaScript. C' est le prototype d'objet JavaScript. Et si y au cas où vous vous demandez, le prototype de l'objet lui-même est nul. Donc, cela signifie que cet objet, et ce qui est super intéressant, ce qui va vous exploser l'esprit, c'est que cela signifie que si vous regardez juste cette structure de haut niveau, cela signifie que notre objet DOM dans ce cas est aussi un Objet JavaScript. Je sais que ça peut devenir vraiment déroutant et ça peut sembler comme ça. Et c'est pourquoi les deux sont si étroitement liés qu'ils sont si étroitement liés. Donc, rappelez-vous simplement dans le contexte du navigateur, les objets DOM sont également des objets JavaScript en raison de cette structure hiérarchique. Et bien sûr, la réciprocité n'est pas vraie. Les objets Javascript ne sont pas automatiquement des objets DOM. Ok, mais pourquoi avons-nous tous ces différents types d'objets ? Que se passe-t-il ? Ouais, eh bien, commençons par le haut. Les couvercles enseignés à cet objet cible d'événement seront d'abord, cette cible d'événement est l'objet racine et il sert de. Base pour tous les nœuds. En d'autres termes, la cible trompeuse permet à tous les nœuds de notre DOM d'utiliser des événements. À titre d'exemple, il nous donne accès à la méthode addEventListener. Lorsque nous commençons à utiliser ces méthodes ne sont pas des éléments. C' est de là que ça vient. N'est-ce pas intéressant ? Rappelez-vous donc que la cible d'événement est une interface DOM et qu'elle est implémentée par tous les objets de nœud. Ils peuvent recevoir des événements et ils peuvent avoir des auditeurs pour eux. Nous savons que nous pouvons mettre des écouteurs d'événements sur les éléments, le document, même l'objet fenêtre, les cibles les plus courantes, mais cela ne s'arrête pas à ces exemples simples. D' autres objets peuvent également être des cibles d'événements pour, par exemple, l'objet de requête HTTP XML, l'objet de nœud audio et l'objet de contexte audio et toute une pléthore d'autres objets. Et c'est un FYI parce que nous savons que tous ces nœuds héritent finalement de cet objet. Rappelez-vous à partir de l'objet JavaScript, nous avons diverses autres méthodes à notre disposition. Les méthodes d'objet Plane comme a sa propre propriété. Par exemple, j'aurais dû le mentionner tout à l'heure. J' ai juste pensé que je le jetterais maintenant parce que j'y ai pensé. Bref, passons à autre chose. C'est la cible de l'événement. Commençons à travailler notre chemin vers le bas. Nous avons aussi cet objet de noeud, n'est-ce pas ? Cet objet nœud nous permet de traverser le DOM. En d'autres termes, il nous donne des méthodes comme nœud parent, noeuds enfant, frère suivant, et cetera, et cetera. Ces méthodes sont simplement appelées appareils de chauffage parce que nous essayons réellement de récupérer quelque chose de nombreux nœuds que vous et moi allons travailler avec hériter de ce nœud, y compris notre élément de paragraphe que nous venons de créer. C' est ce que je continue de mentionner qu'il y a beaucoup d'autres classes de nœuds concrets qui héritent de cela. A savoir que prend le noeud 4, prend des nœuds éliminés pour 11 nœuds et plus exotiques comme les nœuds de bande dessinée. Mais de quoi je parle ? Tu le sais déjà. Continuons à travailler notre chemin vers le bas. C' est quoi cet élément ? Cet élément est la classe de base pour tous les éléments DOM. Et comme son nom l'indique, cet objet nous aide à parcourir uniquement les éléments d'élément. Ainsi, par exemple, il nous donne accès à des méthodes comme des éléments mixtes de lien, la méthode children, qui, comme vous le savez, ne peut être utilisée que sur les éléments et le sélecteur de requête, et cetera, et cetera. Je vous donne ces quelques exemples parce que je sais que nous avons travaillé avec lui précédemment, mais comme je continue de faire allusion, cela ne s'arrête pas seulement avec ces méthodes et mentionne, par exemple, cette clause d'élément qui sert de base pour des clauses plus spécifiques comme l'élément SVG, les éléments XML. Et bien sûr, il sert également de base pour les éléments HTML. Parlons donc maintenant de cet élément HTML. Plutôt intuitivement, cette interface est disponible pour tous les éléments HTML de notre page. Et il spécifie les opérations dans les requêtes qui peuvent être faites sur n'importe quel élément HTML. Et cet élément HTML est hérité par un élément HTML plus spécifique et concret. Dans notre cas, parce que nous avons créé un paragraphe, il a été hérité par l'élément de paragraphe HTML. Et rappelez-vous chaque balise, un paragraphe ou un div, une image, une balise d'ancrage. Chacun a son propre objet unique dont il hérite. Par exemple, la balise d'ancrage n'héritera pas de l'élément de paragraphe HTML. Il héritera de l'élément d'ancrage HTML. Et chaque classe d'objet comme celle-ci fournit des propriétés et des méthodes spécifiques à tout élément sur lequel vous travaillez. Par exemple, un nœud d'élément correspondant à une balise. Et une balise a des propriétés liées au lien, et une qui correspond à une balise d'entrée a des propriétés liées à l'entrée, etc. Qui, qui sont venus un incroyablement loin maintenant. Et j'espère que tu t'amuses et que tu prends toutes ces informations. Et il m'a fallu beaucoup de temps pour l'apprendre et essayer de le rassembler d'une manière très simple et intuitive, amusante. Et rappelez-vous juste que chaque objet dans le DOM a une structure hiérarchique similaire à celle-ci. Ce ne sera pas exactement la même chose selon ce que nous travaillons avec. Beaucoup d'entre eux vont hériter du même genre de choses. Par exemple, nous savons que nous avons aussi des nœuds. Nous n'avons pas seulement des nœuds d'éléments que nous avons encore traités. Dewey et prend les notes ne sont pas les mêmes que les nœuds d'élément, mais ils sont également des propriétés et des méthodes communes entre tous. Parce que toutes les classes de dominos ou à partir d'une seule hiérarchie, éventuellement, cette cible d'événement, par exemple, s' appliquera également pour prendre des neiges et des nœuds communs comme pour éliminer. Le point que j'essaie de faire est que c'est ce qu'est la hiérarchie. Et si jamais tu te retrouves dans un trou, tu sauras maintenant comment te creuser parce que tu sauras trouver cette méthode. Vous savez, si, si vous attendez qu'une certaine méthode soit sur un certain type de nœud, vous pouvez le trouver sur. J' espère que maintenant tu sauras pourquoi. Mais de toute façon, nous avons encore beaucoup de choses que je veux venir dans cette section avant de passer sur scène. 7. Inheritance - Résumé: Ou bizarre, on a fait un long chemin. Je veux juste prendre du recul et résumer simplement ce que nous avons appris en ce qui concerne la hiérarchie des nœuds. Nous avons vu à l'ensemble complet des propriétés et des méthodes d' un nœud donné provient de l'héritage. Et plus précisément, nous avons examiné l'élément paragraphe que nous avons créé, qui tire ses propriétés et ses méthodes de. C' est vrai, l'élément de paragraphe HTML, qui obtient ses propriétés et ses méthodes à partir de l'élément HTML. Il obtient ses propriétés et l'a fait à partir d'un élément. Il obtient ses propriétés et méthodes à partir du nœud, et il obtient ses propriétés et méthodes à partir de la cible de l'événement. C' était un peu une bouchée. Et nous avons également appris que chaque type spécifique d'objet prototypé est le pour un but. Par exemple, l'élément de paragraphe HTML fournit des propriétés spécifiques au paragraphe. L' élément HTML fournit des méthodes d'élément HTML courantes telles que getters et setters. Nous savons que l'objet élément fournit la méthode générale de l'élément. Souviens-toi que nous avons examiné certaines de ces choses. Le nœud fournit les propriétés générales du nœud DOM et la cible de l'événement est peut-être la plus importante. C' est la racine de la plupart des méthodes avec lesquelles nous allons travailler. Et cela prend en charge les événements comme l'écouteur d'événement add. On y va. Je voulais juste prendre du recul. Vous pouvez donc voir à un très haut niveau ce que nous venons de couvrir. Mais avant de terminer cette section, je veux qu'on discute d'autre chose. Je veux qu'on regarde comment fonctionnent les extinctions stupides. Ce n'est pas un sujet très médiatisé, mais c'est très, très intéressant. Alors passons à ça dans la prochaine conférence. 8. extensions DOM - Introduction: Nous avons parcouru un long chemin dans cette section, mais je veux juste mentionner rapidement la pratique de l'extinction DOM. Tout d'abord, qu'est-ce que c'est ? L' extinction stupide est juste le processus d'ajout de méthodes et de propriétés personnalisées aux objets DOM. Reste, les objets DOM regardent. Et les introns ne font pas d'objets ou d'objets hôtes. Plus précisément les objets DOM ou Hearst qui héritent du document d'événement d'élément ou de toute autre interface DOM. Nous avons traversé cet avis. Et tout le concept des extinctions, des extinctions DOM. Eh bien, pour ajouter ces propriétés et méthodes à ces objets hôtes. Et vous pouvez ajouter directement à ces objets ou aux prototypes. Pendant des jours, nous verrons sous peu, vous ne pouvez le faire que dans des environnements qui ont un support approprié pour les objets étendus les plus populaires ou les éléments DOM, comme le paragraphe ou les balises div, IE, éléments qui héritent de la à partir du DOM. Ce sont les choses les plus populaires sur lesquelles beaucoup de développeurs veulent ajouter des extinctions parce que c'est ce que nous travaillons le plus. Et parce que c'est si populaire, il y a beaucoup de bibliothèques et de paquets tiers qui se sont développés et permettent à ces choses de se produire, comme des prototypes ou des outils Moo. Mais de toute façon, laissez-moi ne pas perdre la trace de cette conférence. Débarrassez-vous de cela et regardons maintenant un élément de paragraphe. Vous souvenez-vous que nous avons parcouru la hiérarchie de cet élément de nœud. Comment ça a l'air ? Eh bien, c'est tiges sont paragraphe commence comme un objet, ne pas un objet élément pour être spécifique. Et quand nous avons regardé son prototype, c'était cet élément de paragraphe HTML. Et évidemment, cet objet va être spécifique au type d'élément de notre paragraphe. Oui, on peut voir que c'est l'élément de paragraphe HTML. Pour un élément div, ce ne sera pas cela, ce sera l'élément div HTML. Pour l'élément d'ancrage, ce sera l'élément HTML et ainsi de suite et ainsi de suite. Au fait, pourquoi sont ces principaux, assis comme ça ? Pourquoi sont-ils si étranges ? Toi et moi, on n'est pas assis sur ces noms. Ils sont définis par la spécification DOM HTML et cetera, même spécification, ce même réseau de spécification définit également l'héritage entre différentes interfaces. Bref, ce n'est qu'un peu d'information. Les éléments du paragraphe HTML, Quel est son prototype ? C' est l'élément HTML. Son prototype est l'élément, son prototype est le nœud. Nous arrivons ensuite à la cible très importante de l'événement. Et comme nous l'avons vu dans la conférence précédente, l'objet ultime est l'objet. Et bien sûr, son prototype est nul. C' est pourquoi avec plus de détails. Ok, Clyde, c'est super. Je sais tout ça, mais pourquoi on le regarde à nouveau ? Eh bien, je veux faire un DOM qui échange avec vous. Je veux en fait sauter aux données prises à connu. Je veux qu'on commence à coder quelque chose. Ajoutons donc une extinction qui est à notre propre méthode personnalisée à l'un de ces nœuds, ces objets. Et laissez-moi juste sucer mon pouce et choisir un hasard qui est juste regarder cet élément. Et ajoutons notre propre méthode personnalisée sur cet objet hôte d'élément. Faisons ça maintenant. Ce serait vraiment amusant. 9. Ajouter notre propre extension DOM: D' accord, comment fonctionne cette extinction DOM ? Et regardons un exemple. Que voulons-nous faire ? Eh bien, disons simplement que nous voulons créer une fonction appelée lecture que nous pouvons utiliser sur n'importe quel élément que nous créons. Et cela change juste que la couleur des éléments. À lire. Écritures très simples, très intuitives. Donc, nous sommes ici juste dans la console du navigateur. Je n'utilise aucun IDE fantaisie. On est juste dans la console de Chrome. Je vais l'étendre juste pour qu'on puisse le voir en plein écran. Et laissez-moi zoomer légèrement. Bon, donc ce que je vais faire, c'est qu'on va accéder à cet objet élément, non ? Et rappelez-vous, cela nous est fourni par le DOM. Il s'agit d'un objet hôte. Et maintenant ce que je veux faire, c'est que je veux accéder à son prototype et que je veux définir une fonction appelée lecture. Ce que je veux faire, c'est une fonction personnalisée et on va faire, accrocher Clyde. Pourquoi devons-nous accéder à son prototype ? Pourquoi ne pas simplement accéder à l'objet et importer une méthode personnalisée appelée rid dessus ? Eh bien, tout d'abord, pour en savoir plus sur les prototypes et la chaîne de prototypes, veuillez consulter mon cours complet de grand maître JavaScript. La réponse courte est que si nous le mettons directement sur l'objet élément comme ceci, il ne sera pas attaché à sa fonction constructeur. En d'autres termes, cela va être spécifique à cette instance de l'élément. Mais sur d'autres objets, nous créons en utilisant la fonction constructeur d'éléments qui ne sera pas là. Et c'est pourquoi je veux l'attacher à son prototype. Rappelez-vous, le prototype est disponible pour nous à partir de JavaScript. Et cela signifie simplement que d'autres objets qui sont créés à partir de lui montreront également ses propriétés prototypes. Dis un peu de sens. Je l'espère. Donc, on y va, on y accède en tant que prototype. Là, nous définissons une fonction appelée lecture et nous allons l'assigner. Comme je l'ai dit, ça va être une fonction. Donc, en utilisant le mot-clé de fonction de JavaScript. Et dans cette fonction, que voulons-nous arriver ? Voulons-nous accéder à l'objet qui a appelé cette méthode ? Donc, nous utilisons le, ce mot-clé. Encore une fois, si vous ne comprenez pas ce que c'est, s'il vous plaît consulter notre cours complet de grand maître JavaScript. Donc maintenant, nous avons l'objet qui a appelé cette méthode dans veulent accéder à sa propriété de style et nous voulons changer sa couleur. Tu te souviens de ça ? Et nous voulons changer la couleur en rouge. Alors on y va. C' est notre prototype rouge. Ok, nous avons maintenant attaché à cet objet élément. La prochaine chose que je veux faire est de créer un paragraphe. Donc, nous savons déjà comment le faire. Créons une variable appelée p. Il a démarré la racine de notre page, et accédons à une méthode appelée create elements. Et l'élément que nous voulons créer ici est p. Maintenant ce que je veux faire, je ne lui ai pas attribué le signe égal. On y va. Alors maintenant, nous avons créé notre paragraphe. Ce que je veux faire maintenant est de me laisser attacher à la page à nouveau. Pour que cela soit mis en oeuvre, je voudrais ajouter notre paragraphe à ce document. Comment pouvons-nous faire ça ? Eh bien, tout d'abord, allons accéder à notre document et c'est juste remplacer tout ce que vous voyez à l'écran par le mot salut. Alors on y va. On a le mot bonjour. Maintenant, ce que je veux faire, c'est ajouter du contenu à un paragraphe. En ce moment, ce sera juste une étiquette vide. Donc, je veux accéder à notre objet p.sit et me demander puis insérer du contenu de texte. Et disons simplement qu'il s'agit d'un nouvel élément de paragraphe. Assez simple. Jusqu' à présent, si bien. Et comme vous vous en souvenez de la première série de ce cours, nous avons créé ce paragraphe, mais nous n'avons rien attaché. C' est juste flottant dans l'espace à ce stade. Donc maintenant ce que je veux faire, c'est que je veux ajouter ça au DOM. Donc tout ce que nous faisons ici, c'est d'accéder à notre corps de document et d'utiliser une épingle cet enfant pour l'épingler au corps. Et je veux épingler ce paragraphe. Cu On a presque fini, je te le promets. La dernière chose qu'on veut faire, c'est qu'on veut accéder à cette fonction rouge. Et vous remarquerez sur cet objet P, nous n'avons jamais défini une fonction de lecture sur celui-ci fortement. Tu crois que ça marchera ? Nous accédons à notre P et nous essayons d'exécuter cette fonction appelée lecture. Tu penses que ça disparaît ? De l'eau ? Maintenant, frappons le retour. Et regarde comme c'est génial. Et ceci mes chers étudiants est l'extinction DOM. Nous avons ajouté notre propre méthode personnalisée à cet objet élément. Mec, donc tu penses peut-être à ce stade, c'est génial et je vais le faire tout le temps. Mais pour des raisons que je vais discuter maintenant, ce n'est pas une bonne pratique, peut devenir très désordonnée pour des raisons que je vais discuter. Donc, sans plus tarder, passons dans la prochaine conférence et regardons ce code un peu plus en détail. 10. Les extensions DOM sont-elles bonnes ou mauvaises ?: Nous venons de faire un exemple d'extinction DOM ensemble, ip, s'amuser. J' espère que vous apprenez un moment, mais je veux juste parler de notre code un peu plus en détail. Laisse-moi le ramener à l'écran. C' est ce qu'on vient de faire. Souvenez-vous. Nous avons d'abord attribué la fonction de lecture au prototype de l'élément. Nous avons ensuite créé nos éléments de paragraphe et notre nom. Nous pourrions invoquer la fonction directement dessus. Eh bien, pourquoi ce code fonctionne-t-il ? La raison qui fonctionne est parce que l'objet référencé par l'élément point prototype, en fait l'un des objets dans la chaîne prototype de cet élément paragraphe que nous avons créé. En d'autres termes, lorsque cette fonction rouge est exécutée sur l'élément paragraphe, le passé ne va pas le trouver directement sur le paragraphe. La fonction va être recherchée dans toute la chaîne de prototype jusqu'à ce qu'elle soit trouvée sur cet objet prototype point élément. Deuxièmement, pour faire des scènes, comme je l'ai mentionné dans la conférence précédente, sont des problèmes avec l'approche d'extinction DOM. Eh bien, quels sont ces problèmes ? Tout d'abord, débarrassons-nous de tout le bruit. Comme je suis sûr que vous seriez d'accord avec moi. Nous devons faire attention à la façon dont nous attachons la fonction de lecture sur. Par exemple, si nous créons une propriété, Disons simplement que nous mettons cette propriété de lecture ou une fonction sur le prototype de l'élément de paragraphe HTML, pas l'objet élément. Rappelez-vous que nous l'avons fait dans notre exemple. Disons que nous l'avons fait sur l'élément de paragraphe HTML. Dans ce cas, nous ne pourrions pas utiliser cette propriété sur disons, un élément d'ancrage. Laissez-moi vous montrer ce que je veux dire. Laisse-moi appeler un code ici. Et c'est ce qu'on avait, n'est-ce pas ? Nous mettons notre propriété de lecture sur ce prototype sur l'objet élément. Comme je l'ai mentionné, que se passe-t-il si nous allons et que nous faisons quelque chose de similaire, mais maintenant nous mettons cette propriété sur l'élément de paragraphe HTML. Nous ne le faisons pas directement sur l'élément maintenant. Et puis au lieu de créer un paragraphe, créons une balise d'ancrage. Et nous essayons d'exécuter cette fonction, la propriété sur la balise d'ancrage. Qu' est-ce qui va se passer ? Comme vous n'êtes pas sûr, vous avez deviné tableau, on va se faire jeter une erreur. Plus précisément, on va nous dire que le rouge n'est pas une fonction définie sur cette balise d'ancrage. Est-ce que cela a du sens ? Et réfléchissez à la raison pour laquelle cela arrive. Rappelez-vous, cela est dû au fait que la chaîne de prototype d'éléments d'ancrage n' inclut jamais un objet auquel le prototype de point d'élément de paragraphe HTML. Au lieu de cela, il va inclure un objet qui est référencé par le prototype point d'élément d'ancrage HTML. Et c'est pourquoi dans l'exemple précédent, nous avons en fait attaché notre méthode plus loin dans la chaîne prototype sur cet objet élément. Alors pourquoi ne pas inclure toutes nos extinctions sur cet objet élément ? Eh bien, la création d'une propriété sur l'élément de prototypal ont des problèmes similaires. Par exemple, il ne sera pas disponible sur tous les types de nœuds, mais seulement ceux de type élément. Par exemple, que se passe-t-il si nous avons créé un nœud de texte ou un nœud de commentaire, et cetera, et cetera. Ok, Clyde va alors continuer à travailler plus loin dans la chaîne prototype au lieu d'attacher notre échange DOM nouvellement créé admis à l'objet élément. Pourquoi l'avons-nous simplement fait à l'objet nœud ? Et oui, c'est en fait une question très valable. Pourquoi ne pas simplement ajouter sur la note la plus élevée ? En fait, pourquoi ne pas ajouter toutes nos extinctions sur cet objet ? Rappelez-vous le O majuscule, l'objet, les objets. Pourquoi ne pas faire ça ? Eh bien, c'est ce dont je veux parler dans la prochaine conférence. Il y a d'autres problèmes en utilisant cette extinction DOM. Restez motivé, prenez un café et je vous verrai à la prochaine conférence. 11. Les problèmes des extensions DOM: Être capable d'étendre les éléments DOM à travers des objets prototypes semble étonnant. Nous profitons de la nature prototypée JavaScript. Et le script DOM devient très orienté objet et c'est tellement tentant qu'il y a quelques années, bibliothèque JavaScript prototype l'a fait dans une partie centrale de son architecture. Mais accroche-toi à tes chevaux. Ils sont beaucoup de problèmes avec la mise en œuvre des extinctions dominantes comme moyen. Et je vais discuter pourquoi ce n'est pas la meilleure idée. Eh bien, vous pouvez voir quelques-uns des problèmes sur l'écran est juste commencer par le premier. Et on a déjà regardé ça. Le premier problème est que nous devons choisir le bon prototype. Si nous attachons une propriété au prototype d'un élément DOM, il ne peut être accessible que par un objet qui a le même prototype dans le cadre de sa chaîne, nous nous avons vendu des droits. Si nous ajoutons cette propriété de lecture à l'élément, le nerd comique n'aura pas accès à la propriété de raid qui prend le matériel et a accès à la propriété de viol, et cetera. C' est donc le premier problème avec cette approche. Deuxièmement, le pas de règles. Rappelez-vous, les objets DOM ou les objets hôtes ont C, j'ai une erreur d'orthographe. Ce ne sont pas des objets opposés sur le sujet de l'absence de règles. Je veux juste dire un gros problème avec l'utilisation de toutes ces approches pour ajouter des émetteurs de propriétés est que l'exposition de ces prototypes d'objets DOM n'est pas garantie. Pourquoi n'est-il pas garanti ? Eh bien, parce que la spécification DOM ne rend pas obligatoire pour les fournisseurs, ok, les navigateurs d'avoir une propriété d'élément global qui deviendra un prototype de tous les objets l'implémentant. Ce n'est pas spécifié comme non obligatoire, et il n'indique pas non plus qu'il devrait exister une propriété de nœud global qui est un prototype de tous les objets qui implémentent cette interface est que vous pourriez soutenir que bien qu'ils ne le rendez pas obligatoire, la plupart des navigateurs le font à haute voix. Et c'est un peu vrai. Mais quand nous commençons à regarder Internet Explorer sept ou Safari deux exemples, nous ne pouvons pas faire ce genre de choses que nous avons vu. Et vous pourriez argumenter, client, oui, mais sûrement nous pouvons contourner tout cet objet d'extension en étendant simplement un objet directement. Par exemple, si nous allons faire un élément de paragraphe, rappelez-vous, P est égal à document ou créer élément. Ne pouvons-nous pas simplement ajouter une propriété à leur paragraphe ? Eh bien, nous pouvons, mais en termes de performance, ce n'est pas une bonne idée. C' est très lent. Mais de toute façon, je veux revenir à ces objets hôtes. Quels sont les problèmes ici ? Nous allons objets DOM ou des objets hôtes et les objets hôtes sont les plus difficiles à travailler avec. Les objets Hearst ont permis de faire des choses qu'aucun autre objet ne peut même rêver de faire. Donc, nous pourrions dire que l'extension des objets DOM est un peu comme marcher dans un champ de mines. Par définition, nous travaillons avec quelque chose qui est autorisé à se comporter de manière imprévisible et complètement erratique. Ceci est rapidement regarder un exemple. Si nous tapons document crée l'élément p et nous existons la méthode parent offset. Cela ne fonctionnera pas dans Internet Explorer. On va avoir une erreur. C'est juste un exemple de Watson, une bonne idée et l'absence de règles spécifiant comment ceux-ci devraient se comporter. La dernière chose que je veux discuter, c'est des collisions. Vous devez penser ce que nous faisons ici chaque fois que nous commençons ajouter nos propres extensions aux objets, nous devons trouver un nom de propriété et notre instance où notre exemple nous l'appelons rouge. Mais qu'en est-il de la peur fait déjà partie du DOM. Pouvons-nous sur les écrivains n'a pas d'autres effets de frappe avec d'autres parties du code dominant. Rappelez-vous, HTML5 apporte de nouvelles méthodes et propriétés tout le temps. Qui a dit qu'il l'avait ? Voilà quelques-uns des plus gros problèmes auxquels je peux penser. Et juste pour résumer, mon point de vue sur ce sujet est généralement éteintes DOM sur pas une bonne idée. Et cela est vrai même si vous voulez que votre site fonctionne uniquement sur deux navigateurs, vous allez toujours avoir des risques de collision, ceux que nous venons de discuter. Alors, quelle est la solution ? Est-ce qu'une solution est d'utiliser des rapides d'objet. Et c'est à peu près ce que jQuery a fait depuis le début. Mais de toute façon, c'est un sujet qui dépasse entièrement la portée de ce que j'essaie de traverser ici. J' espère que vous avez beaucoup appris sur les extinctions DOM. J' espère que vous aurez un peu une idée de pourquoi ce n'est pas nécessairement la meilleure idée. Mais de toute façon, restez motivé et je vous verrai à la prochaine conférence. 12. Événements ne sont pas une perturbation isolée: Bon, commençons à parler de bulles d'événements. Et par vaine bavardage, je veux juste dire le flux de chaque événement à travers le DOM. Jusqu' à ce point du cours, nous avons vu de nombreuses façons d'ajouter des écoutes au DOM. La meilleure façon est d'utiliser cette méthode d'écoute d'événement add. Et nous savons tous comment ça marche. Mais ce que nous n'avons pas encore discuté est un sujet assez avancé de la façon dont les événements sont déclenchés. chose la plus importante à retirer de cette section est que toute veine n'est pas une perturbation isolée, tout comme un papillon battant ses ailes, alors connu sous le nom de tremblement de terre, un coup de météore ou même une visite de Hulk. Il pense effet d'ondulation, un tas d'éléments qui se trouvent dans un chemin. Si y i, avant de passer à autre chose, le papillon faux est juste l'idée que les petites choses peuvent avoir des impacts non linéaires sur un système plus complexe. Donc, quand on dit le papillon faux, on imagine un papillon battant ses ailes et provoquant un gros typhon. Que Allons passer à autre chose. Je ne veux pas faire de digression. Eh bien, je veux que nous codions quelque chose de très, très simple. Je veux avoir un document HTML très simple. Je veux avoir un élément corporel. Et dans le corps, nous allons avoir des étrangers, trois divs imbriqués. Et nous pouvons donner à la première div une idée d'un, la sécante de l'idée de deux. Et dans le troisième élément imbriqué, ayons deux divs. Donnons au premier div un ID de trois a, et le second div un ID de trois B. Et dans chacun de ces divs, les leads incluent un bouton. Le premier bouton, nous pouvons donner une idée du bouton 1 et le second bouton, nous pouvons donner un ID de bouton aussi. Comme nous pouvons le voir, il n'y a rien de vraiment excitant qui se passe avec notre code. Et le HTML devrait paraître assez simple. Et maintenant, vous devriez être capable de cartographier cela dans l'arbre DOM. Souviens-toi qu'on commence avec un objet de fenêtre, c'est le roi. À l'intérieur de cela, nous avons notre objet document, puis nous avons l'objet HTML, et ensuite nous pouvons commencer à cartographier tout. Nous avons notre corps et ensuite nous avons ces divs sous le corps. On a une div avec une carte d'identité, non ? l'intérieur de cela, nous avons un autre div avec un ID de deux. Dans ce cas, nous avons deux divs avec les ID de 33 b. Et bien sûr, dans chacun de ces termes, nous avons un modèle avec les ID correspondants Qu. Alors on y va. C'est la base avec laquelle je veux que nous travaillions, telle que Pause la vidéo maintenant avant de passer à autre chose, laissez-nous entrer et ils permettent de voir ce qui se passe lorsque nous cliquons sur l'un de ces boutons. 13. Fouler de l'événement: Ok, regardons ce qui se passe quand on clique sur un bouton. Rappelez-vous que nous avons notre HTML et que nous l'avons rencontré dans un arbre DOM. Et c'est la façon dont l'enquête va commencer dans cet arbre DOM. Et nous allons nous débarrasser de cet entonnoir HTML juste pour supprimer le bruit. Et nous allons cliquer sur le bouton 1. Que va-t-il se passer ? Eh bien, d'après ce que nous avons appris dans le cours déjà, nous savons qu'une veine Nikki va être trouvée. La chose intéressante cependant que nous n'avons pas discuté est que nous avons exactement l'événement click est déclenché à partir de notre événement click, tout comme presque tous les autres événements ne proviennent pas de l'élément avec lequel nous avons interagi. Ce serait beaucoup trop facile et ferait beaucoup trop de scènes. Donc, dans notre cas, cet événement click ne provient pas en bas avec l'ID du bouton 1. Au lieu de cela, toutes les veines proviennent du tambour. La page, qui est l'objet window. Alors nous allons cartographier ça. Nous savons que notre événement tick commence ici à l'objet fenêtre. Je sais que c'est un peu bizarre, d'accord, en cliquant sur le bouton, mais l'événement ne commence pas par le bouton. Il démarre sur l'objet fenêtre. À partir de cet objet de fenêtre racine, laisser de l'encre fait son chemin à travers la partie étroite du DOM. Et cela l'arrête, l'élément qui a déclenché l'événement. Dans notre cas, il s'arrête à ce bouton avec un ID de bouton 1. Et c'est plus généralement connu sous le nom de togas, la cible de l'événement, si vous voulez. Rappelez-vous donc que l'élément le plus profondément imbriqué qui appelle l'événement réel, dans ce cas, ce bouton est appelé un élément cible. Et cet élément cible ne change pas tout au long de ce processus de bouillonnement. Comme nous venons de le voir dans ce diagramme, le chemin que prend Olivine est plutôt gyrate, commence à la racine et il descend jusqu'à la cible de l'événement. Mais en cours de route, il notifie de façon ennuyeuse chaque élément le long du chemin. Donc, cela signifie que si un est un gestionnaire d'événements associé à l'élément sur le chemin qui correspond au même en cours de passage par ce gestionnaire d'événements sera également appelé ne s'arrête pas. Une fois que l'événement atteint la cible, cela ne s'arrête pas. C' est comme un de ces lapins intergéniques où il a mis des piles dans le tube veineux, continue en retraçant les pas et en revenant à la racine. Et comme avant, sur son chemin, chaque élément est notifié de cet événement. Cela signifie donc que tous les gestionnaires d'événements présents seront froids aussi, tant que c'est le même événement. Dans notre cas, l'événement click. C' est un peu logique. Je sais que ça semble un peu bizarre au début. L' une des principales choses à noter cependant, est qu'il n'a pas rencontré un moyen. Et Aldon, on initie un événement. L' événement commencera toujours à la racine. Il parcourra la structure DOM jusqu'à ce qu'il atteigne notre cible d'événement. Et puis il ira remonter jusqu'à la racine. Et tout ce voyage est très formellement définir ce que je veux dire par là. Eh bien, débarrassons-nous de tout le bruit. Et regardons ça. Quand il descend. C' est ce qu'on appelle la phase de capture d'événement. Et quand il monte, et comme vous l'auriez probablement deviné, c'est ce qu'on appelle la phase bouillonnante de l'événement. Le plus simple d'entre nous, y compris moi-même, il suffit d'appeler la phase 1 et la phase 2. C' est juste plus facile. Donc, sachez que vous pouvez voir le nom propre appelé capture d'événement, et vous pouvez voir le terme phase 1. Les deux peuvent être utilisés de façon interchangeable. Ok, je crois que j'ai récupéré beaucoup d'informations sur vous dans cette conférence. Je veux m'arrêter ici, mais nous avons encore beaucoup à couvrir. Dans la prochaine conférence, Commençons à approfondir plus dans cela. J' espère que vous vous amusez, restez motivé, et je vous verrai à la prochaine conférence. 14. Comment écouter dans la phase captivante: Bon, pour vous rappeler, nous parlons de bulles d'événements. Et rappelez-vous, même le babillage est juste le flux de chaque événement à travers le DOM. Et nous venons de voir lors de la conférence précédente que nous pouvons en quelque sorte diviser tout ce processus en deux phases. Phase 1, alias la phase de capture, est nous, l'événement commence à la racine et il fonctionne son chemin à travers le DOM jusqu'à la cible de l'événement. C' est la phase un. Nous avons également examiné la phase 2, alias la phase bouillonnante. Et plutôt intuitif, oui, je suppose que c'est ainsi que l'événement remonte à la racine. Nous avons vu que tous les éléments dans toutes les aubes Pause, sont assez chanceux. Alors qu'ils ont de la chance bien parce qu'ils ont la chance de se faire notifier deux fois quand chaque fois et se réunir pour le feu. Ce genre de genre peut être un fixe le Kobe, n'est-ce pas ? Parce que chaque fois que nous écoutons les événements, nous devons maintenant choisir sur quel visage nous voulons écouter notre événement. Sur. Est-ce que nous écoutons notre événement, c'est qu'il est en train de tâtonner dans la phase de capture. Qu' est-ce que nous écoutons nos événements comme une escalade de retour dans la phase bouillonnante ? Quelle phase pour vraiment écouter un événement ? Eh bien, mes chers étudiants, voici nous, nous avons un autre argument à notre fonction d'écoute d'événement add. Rappelez-vous la syntaxe. Nous ajoutons cet écouteur d'estimation sur un élément. Disons que nous devons cliquer sur les événements. Et puis nous avons un gestionnaire appelé gestionnaire de clic, dont nous n'avons pas encore discuté, est qu'il y a en fait un troisième argument à cette fonction. Et ce troisième argument spécifie si nous voulons écouter cet événement pendant la phase de capture. En d'autres termes, un argument de vrai signifie que nous voulons écouter le nourrisson pendant la phase de capture. Est-ce que ça a un peu de sens ? Et si nous n'avons pas vrai, évidemment la fin par défaut est fausse. Et lorsque nous utilisons des écouteurs d'événements en ligne ou si nous venons de spécifier vos arguments à l'écouteur d'événement add. Le navigateur ne sait rien sur la capture et vous codez vos gestionnaires d'événements sont nécessaires pour s'exécuter sur la deuxième phase, sur la phase bouillonnante. Si y i, ils seront formellement trois phases. Et puis la troisième phase est la phase cible que nous avons besoin de veine a atteint l'élément réel. Mais dans la pratique, cela n'est pas géré séparément. En fait, les gestionnaires des phases de capture et de babillage se déclenchent également à cette phase cible. Mais de toute façon, et j'ai sauvé, vous vous demandez probablement comment tout cela fonctionne. Donc, il a toujours, passons à l'éditeur de texte et commençons à coder. 15. Fumer vs capturer - Exemple 1: D' accord, tu me connais, j'adore les exemples. Alors, on va se fissurer. Tout ce que je veux faire est de créer une page HTML très simple. Je veux inclure deux boutons. Donc, faisons une balise de bouton avec l'ID du bouton 1. Et on peut appeler ce bouton 1. Et on peut juste dupliquer ça. Et bien sûr, cela peut être un bouton aussi. C' est à peu près ce que je veux faire. Droits très simples, et je veux inclure JavaScript. Commençons à accéder au DOM. Mettons juste sur un serveur en direct ici pour que nous puissions voir cela dans le navigateur pendant que nous travaillons. Laisse-moi juste faire glisser ça à travers. Est-ce que cela a du sens ? Ici, on a un bouton 1 et un bouton 2. Revenons à notre éditeur de texte et finissons ce JavaScript. Ce que je veux faire, c'est que je veux accéder au bouton 1 et honnête d'y attacher un écouteur d'événement. Et puis je veux voir ce qui se passe. Donc, mais un, nous savons déjà comment le faire. Nous accédons à nos objets de document, une méthode appelée get element by ID. L' ID est bien sûr le bouton 1. Ok, super, mais ce que je veux faire maintenant, écoutons l'événement pendant la phase de capture et écoutons aussi l'événement et la phase bouillonnante. Tout d'abord, faisons la phase de capture. Alors exécutons notre gestionnaire dans la phase de capture. Comment on fait ça ? Eh bien, on vient de voir qu'on accède à notre bouton. Nous implémentons ensuite la méthode add event listener. Nous voulons écouter un événement click. Nous voulons ensuite définir une fonction appelée gestionnaire de clic. Nous n'avons pas défini d'acte, nous finirons. Le troisième argument que nous devons fournir est vrai, car maintenant nous voulons qu'ils écoutent et exécutent notre gestionnaire dans la phase de capture. Réaliste, exactement la même chose maintenant. Mais maintenant, exécutons comment gestionnaire dans la phase bouillonnante, et c'est la valeur par défaut. Encore une fois, nous pouvons accéder à notre bouton un. Nous ajoutons l'écouteur d'événement. Nous voulons écouter un événement click. Nous voulons exécuter le gestionnaire de clics. Mais maintenant, nous voulons mettre faux. Et nous n'avons pas à faire ça. On peut juste mettre deux arguments. Mais je voulais être explicite ici parce que je veux que tu saches ce qui se passe dans les coulisses. Il s'agit du comportement par défaut. La dernière chose que nous devons faire, bien sûr, est de définir notre gestionnaire. Nous l'avons appelé gestionnaire de clics. Et nous allons juste faire quelque chose de très simple est juste le journal de la console. Ou j'ai été coupée. Scènes économiques très, très simples. Alors économisons, allons dans notre navigateur et ouvrons une console. Que va-t-il se passer lorsque nous cliquerons sur le bouton 1 ? Qu' attendez-vous à voir ? Eh bien, avant de vous montrer la solution, revenons à notre éditeur de code ici. Qu' est-ce qui va se passer lorsque cet événement click est déclenché sur le bouton net un. Tu te souviens de ce qui arrive Il va commencer à la racine de notre document n'est pas à l'objet de fenêtre et il va voyager jusqu'à ce bouton d'une main, nous net événement frappe le bouton un. Nous avons dit, Oui, nous voulons exécuter le gestionnaire de clic parce que nous avons spécifié true. Mais rappelez-vous que ça ne s'arrête pas. Là-bas, ne nous remets pas après qu'il soit arrivé au fond. Cette même cible qui doit alors remonter jusqu'à l'objet de fenêtre. Et c'est ainsi que notre deuxième écouteur d'événement sera déclenché car il écoute également un événement click qui a déjà été déclenché. Mais cette fois, il va écouter et exécuter le gestionnaire. Pendant la phase bouillonnante. journal de console attendu semé se produira deux fois. Un pendant la phase de capture et deux pendant la phase de bouillonnement. Eh bien, voyons si onCreate. Alors, cliquez sur le bouton un. Oui, et l'habitude, j'ai été cliqué, a été connecté à la console deux fois à l'écran. C' est pour ça que le numéro 2, Zai Bu Gou. J' espère que cela a du sens. Restez motivés parce qu'ils sont encore plus que nous devons apprendre. 16. Fumer vs capturer - Exemple 2: D' accord, vous me connaissez maintenant combien j'aime exemples et celui-ci va être assez amusant parce que ce que je veux faire un peu vouloir nous montrer tout le processus de capture et de babillage. Ce sera vraiment cool et nous allons utiliser la boucle for of pour le faire. Alors qu'est-ce qu'on attend ? Mettons-nous à craquer. Ce que je veux faire, c'est que je veux créer une simple page HTML. Maintenant, je veux juste inclure des styles juste pour le rendre un peu plus épais. Et je veux coiffer notre corps entier. Je me demande que tous nos éléments aient une marge de 10 pixels. Et je veux mettre une bordure autour de chaque élément. Nous créons ceci, il suffit de lui donner une largeur d'un pixel. Disons que c'est une bordure solide et liste la couleur de rouge. Donc très simple, il n'y a rien de trop de fantaisie qui se passe là-bas. Créons maintenant notre élément de corps. Dans notre corps, je veux créer trois éléments imbriqués. Tout d'abord, créons un div. Ensuite, créons un formulaire. Débarrassez-vous de l'action ici. On n'a pas besoin d'action. Ensuite, la dernière chose que je veux faire est de créer un élément de paragraphe. Alors on y va. Assez simple, non ? Et si on va regarder ça dans le navigateur, c'est à ça que ça va ressembler. Commençons notre serveur en direct. Alors on y va. Nous avons notre div, nous avons un formulaire et des éléments de paragraphe. Évidemment, si nous cliquons dessus, rien ne se passera parce que nous n'avons pas ajouté d'écouteur d'événement. Alors faisons-le maintenant. Ça va être assez simple. Tout d'abord, ajoutons notre JavaScript ici. Et rappelez-vous ce que j'ai dit. Je veux utiliser la boucle for of. Je ne veux pas ajouter manuellement un écouteur d'événement. Et cela devient assez avancé maintenant, mais vous verrez à quel point c'est simple une fois que vous en aurez le coup. Donc, la boucle for of est une fonction très simple. Gardez juste à l'esprit si vous n'êtes pas sûr de ce que c'est, vous pouvez toujours vérifier mon cours de grand maître JavaScript pour obtenir une sensation plus intuitive est d'aider JavaScript lui-même fonctionne. Mais comme vous le verrez, c'est presque, presque aussi basique que la lecture de la fonction. Donc, ce que nous voulons faire est que nous courons pour parcourir tous nos éléments sur notre page et les mettre dans une variable. Définissons notre variable comme élément DOM. Et puis les objets que nous voulons traverser sont quoi ? Eh bien, ça va être notre requête. Sélectionnez-les. Bien sûr, les autres façons que nous pouvons le faire, mais je suis heureux d'utiliser notre sélecteur de requête tout. Alors que voulons-nous faire, c'est quand Intégrer chaque élément unique dans notre DOM. C' est littéralement aussi simple. Alors rappelez-vous ce que nous faisons quand nous trouvons tous les éléments dans notre DOM via le sélecteur de requête, tous une collection de retour à nous. Et nous passons juste en boucle à travers cette collection et chaque élément cette collection est mis dans une variable ici appelée élément DOM. Et maintenant, nous voulons ajouter des écouteurs d'événements à tous ces, ne vous inquiétez pas. Et nous voulons le faire à la fois pour la phase de capture et pour la phase de bouillonnement. Alors traitons d'abord de la phase de capture. Nous allons accéder à notre élément qui nous a été renvoyé. Dans cet élément, nous allons ajouter n'importe quel écouteur d'événement, un écouteur d'événement de clic. Et oui, maintenant nous pouvons réellement définir une fonction de gestionnaire, mais je veux juste l'exécuter en ligne. Donc, je vais juste utiliser l'année de syntaxe de la flèche. Et qu'est-ce qu'on va faire ? Allons juste alerter quelque chose à l'écran. Utilisons des littéraux de modèle. Encore une fois, si vous ne savez pas ce que tout cela est, s'il vous plaît consulter le cours complet de grandmaster de mon JavaScript. Si vous savez ce que c'est, génial, vous pouvez suivre. Comme je l'ai dit, ce sera pour la phase de capture. Et maintenant, je veux utiliser la syntaxe dollar et accolade pour mettre une variable. Ici, nous allons utiliser notre élément DOM. Et je veux avoir le nom de la balise. Par exemple, le HTML, la colombe, le formulaire, le p, quel que soit leur nom de balise. Et pour préciser que nous voulons que cela soit écouté sur la phase de capture, que devons-nous faire ? C' est vrai, Nous devons fournir un troisième argument à la méthode add event listener. Et le troisième argument doit être vrai. La dernière chose qu'on veut faire c'est faire exactement la même chose. Mais sur la phase bouillonnante, accédez à notre élément, nous ajoutons la méthode addEventListener. Encore une fois, ce sera un événement click et nous pouvons utiliser la syntaxe flèche. Encore une fois. Je veux juste vous faire savoir que nous n'avons pas vraiment à mettre entre crochets bouclés comme nous l'avons fait ci-dessus. Nous pouvons simplement exécuter notre fonction d'alerte directement en tapant alerte. Ok, je veux juste te montrer différentes façons de faire les choses. Ouais, ça va être pendant la phase bouillonnante. Et je veux faire exactement la même chose. Je veux afficher son nom de balise. Alors on y va. Est-ce que c'est du genre de faire des choses ? Est-il intuitif ? Je l'espère. Allons dans notre navigateur et réfléchissons à ce qui se passerait lorsque nous allons cliquer sur cet élément de paragraphe. Que croyez-vous qu'il se passera ? On va faire un pas en arrière. Nous faisons tous les événements proviennent de lui, provient de l'objet fenêtre de la racine de notre document, le sud de l'Espagne, pendant la phase de capture, pour de nombreuses alertes à afficher, n'est-ce pas ? En fait, on s'attend à commencer à partir de la balise HTML elle-même. Et il va buller vers le bas dans le corps dans il va frapper la colombe dans la forme. Et enfin, un élément de paragraphe et un net vont former la phase de capture, alias phase 1. Ça ne s'arrête pas là, n'est-ce pas ? Parce que quoi se passe-t-il ensuite ? C' est vrai. Il va bouillonner jusqu'à l'élément racine. J' espère que ça a du sens. Cliquez donc sur ce paragraphe et voyons ce qui se passe. Eh bien, on y va. Nous savons que nous sommes dans la phase de capture. Et c'est HTML. C' est exactement ce que nous attendions quand nous prenons un k sont censés être le corps et c'est ce que nous avons. Comme c'est génial. L' élément suivant qui va capturer, bien sûr, est l'élément div. Alors ça va faire l'élément de forme. Et puis enfin l'élément paragraphe. Comme je l'ai dit, ça ne s'arrête pas ici, n'est-ce pas ? Parce que ce qui va se passer maintenant quand on cliquera sur Ok, eh bien, c'est exact. Ça va commencer la phase bouillonnante. Et la phase bouillonnante commence à la cible de l'événement, dans ce cas, la p. et elle va remonter jusqu'à l'objet racine de la fenêtre. Donc, je m'attendrais à ce que la prochaine alerte soit la forme. C' est vrai. Le suivant serait la div. Le prochain sera le corps. Le prochain sera le HTML. Et puis nous avons fini. Mec, ce truc est vraiment génial et c'est très, très avancé. Maintenant, vous comprenez tout le processus dont plus je veux parler et je vous verrai dans la prochaine conférence. 17. Pourquoi capturer des choses à capturing: Ou bizarre, nous arrivons sur le chemin. Vous comprenez les différentes phases, la phase de capture et la phase de bouillonnement. Mais à ce stade, vous vous demandez probablement, pourquoi tout cela compte ? Qui s'en soucie ? Et c'est une question très valable, surtout s'il travaillait avec les veines depuis très longtemps et que vous ne l'avez pas vraiment rencontré auparavant. Et c'est la première fois que vous entendez parler de ces différentes phases. Et je serai honnête, plupart du temps ça n'a pas d'importance. En d'autres termes, notre choix d'écouter un événement pendant la phase de capture ou de bouillonnement est pour la plupart sans rapport ce que vous et moi allons faire 99 % du temps. Mais quand il est toujours la chauve-souris. Cela dit, ils viendront un moment dans votre vie où vous aurez besoin distinguer entre la capture et le bouillonnement, surtout quand vous faites un peu de ses polices, choses sur votre site, ce que je veux dire, vous le plus susceptibles d'avoir à faire la distinction entre les deux lorsque vous avez affaire à des menus imbriqués qui révèlent des sous-menus lorsque vous passez le curseur sur eux. Vous pouvez également avoir besoin de ces connaissances que nous avons besoin de traiter avec une bibliothèque tierce. Avec cette bibliothèque a sa propre logique d'événement que vous voulez contourner pour votre propre comportement personnalisé. Et un autre scénario dans lequel deviendra important de distinguer entre babbling et capture est lorsque vous voulez remplacer certains navigateur par défaut intégré. Ici. Eh bien, quel est un exemple sera, lorsque vous cliquez sur la barre de défilement ou vous concentrer sur TextField, et cetera, et cetera. Lorsque vous voulez commencer à surpasser toutes ces choses, vous voudrez peut-être vous écouter seulement les veines à une certaine phase. Donc là, vous l'avez. Je voulais juste fournir cette divulgation. Cool, ok, mais maintenant on sait à propos du babillage, on sait comment capturer. Mais qu'en est-il si on ne veut pas que ça arrive ? Qu' en est-il lorsque nous cliquons sur un élément de paragraphe ? On veut seulement que ce maître tire. Nous ne voulons pas que tout le processus de bulles se produise. Qu' est-ce qu'on fait ? Eh bien, accrochez-vous à vos chevaux. Dans la prochaine conférence. 18. Comment arrêter la capture et l'ébauche d'événements: La dernière chose dont je veux parler avant de prendre un autre café est de savoir comment empêcher notre événement de se propager, de bavarder est de savoir comment empêcher notre événement de se propager, , de continuer. Parfois, nous ne voulons pas que notre événement remonte au sommet. En d'autres termes, nous voulons tuer notre événement, aka l'empêcher d'atteindre la racine et de mettre fin à sa vie, nous avons la méthode de propagation stop, qui empêche notre événement de courir à travers notre DOM. Ok, ça a l'air assez simple. Alors, comment ça marche ? Appelez notre structure DOM ici. Tu te souviens de celui-ci ? Et rappelez-vous que nous avons inséré un écouteur de clic sur ce dernier. LET va également insérer un écouteur de clic sur la div avec l'ID de trois a. Et que croyez-vous que se passerait si nous mettions la méthode de propagation d'arrêt sur la div avec l'ID de trois a, que se passerait-il ? Donc, disons que l'utilisateur vient le long de n'importe quel bouton clics un. La première chose qui se passe est que les événements pointent à la racine de notre page, qui est l'objet fenêtre. Un Danois commence à parcourir l'arbre DOM, s'arrêtant le long de chaque élément. En chemin, nous le savons, il va continuer à frapper cette div avec trois comme ID. Et que va-t-il se passer ? Eh bien, les veines vont être arrêtées à ce stade. Pourquoi ? Eh bien, parce que nous avions en fait arrêté la propagation d'être appelée sur ce gestionnaire. Est-ce que ça a du sens ? Ne vous inquiétez pas si ce n'est pas le cas, je veux sauter sur la console dès maintenant et je veux coder cela avec vous afin que vous puissiez le voir en action. Voir maintenant. 19. Exemple d'utilisation de example: Ou je me souviens qu'on avait ce code quelques conférences. On a juste un bouton 1 et un bouton 2. Et nous avons inséré un écouteur d'événement, particulier un écouteur d'événement de clic sur chacun de ces boutons. En fait, tu sais quoi, on n'a même pas besoin de bouton pour, laisse-moi juste me débarrasser du bouton pour ça juste pour nous confondre. Nous venons donc d'avoir le bouton 1 et nous ajoutons ces écouteurs d'événement sur le bas. Mais rappelez-vous que nous voulions que l'événement de gestionnaire de clic soit déclenché pendant la phase de capture et pendant la phase de bulle. Et puis on avait deux consoles. Tu te souviens de ça ? Maintenant, je veux mélanger les choses, non ? Je veux vraiment ajouter quelque chose sur, vous savez quoi, nous avons juste un bouton que je veux vraiment créer. Créons un div avec un ID de trois. Et puis dans cette div, je veux insérer ce bouton. Est-ce que ça a du sens ? Donc ils peuvent y aller, mais maintenant je veux mélanger les choses comme un SATA. Je veux réellement ajouter un écouteur sur ces éléments div. Alors faisons ça. Et écouteur sur nos éléments de parents div. La première chose que nous voulons faire est que nous voulons définir cette div dans une variable. Alors définissons-le comme trois. Et bien sûr, nous commençons avec nos objets de document. Nous obtenons élément par ID. La carte d'identité ici est trois, un séchage assez simple. La prochaine chose que je veux faire est que je veux ajouter un écouteur d'événement. Donc c'est l'accès. Ajouter un écouteur d'événement. Nous allons être à l'écoute de l'événement click. Et puis appelons notre propre gestionnaire personnalisé, quitte. Et nous voulons écouter cela et exécuter ce handle quand je veux le faire pendant la phase de capture. C' est pourquoi nous devons spécifier true comme troisième argument. Et enfin, nous avons juste à définir notre gestionnaire. Un. Très simple, très intuitif. Et je veux qu'une console connecte quelque chose à l'écran. Disons que vous avez été arrêté sur vos traces. Et la dernière chose que je veux faire, c'est que je veux saisir notre événement lui-même et comment faire ça ? Eh bien, nous pouvons définir cela dans n'importe quelle variable. Nous une fois, rappelez-vous que j'ai dit que la plupart des développeurs à la pratique standard pour simplement le définir comme E. Donc maintenant, nous voulons saisir notre événement réel et nous voulons appeler cette méthode de propagation d'arrêt sur elle. J' espère que ça a du sens. Alors réfléchissons à ce qui se passera quand nous allons cliquer sur ce bouton un. On sait que l'événement commence à la racine, n'est-ce pas ? Et il descend chaque élément. Il va finalement frapper les trois éléments, qui a également la même méthode d'écoute d'événement de clic sur elle, cette chose et exécuter cette fonction. Dans ce cas, il va dans le journal de la console, vous avez été arrêté dans vos pistes. Mais ça va arrêter la propagation. Ça va empêcher cette veineuse de voyager plus loin. Donc, je ne m'attendrais pas à ce que cette fonction de gestionnaire de clic soit même appelée. Voyons si nous écrivons. Allons à notre navigateur. En fait, ouvrons la console. Et nous allons cliquer sur ce bouton. Es-tu prêt ? Tu as été arrêté sur tes traces et rien d'autre ne se passe. Et pour vous le prouver, Allons ici et commentons l'arrêt de propagation. Revenons à notre console, efface et nous allons cliquer à nouveau. Ce sera le comportement par défaut. Ça va montrer que vous avez été arrêté dans leurs traces, mais ensuite ça va continuer vers le bas. Il va appuyer sur ce bouton. Ce sont des gestionnaires d'événements qui vont être appelés, puis il va être appelé à nouveau pendant la phase bouillonnante. Donc là, vous l'avez. J' espère qu'il est temps de s'enfoncer. J' espère que ça commence à devenir plus intuitif. Et comme vous pouvez le voir, ce n'est pas si difficile une fois que nous comprenons les bases, n'est-ce pas ? Avant de passer à la prochaine conférence, je veux juste mentionner quelque chose rapidement et c'est cette méthode d'arrêt de propagation arrêtera le mouvement des veines qui se déplacent vers le haut, non ? Mais sur l'élément actuel existant, tous les autres gestionnaires s'exécuteront. En d'autres termes, si un élément a plusieurs gestionnaires d'événements sur un seul événement, alors même si l'un d'eux arrête le babillage, tous les autres gestionnaires d'événements devaient s'exécuter. Et cela peut être absolument bien un bébé ce que vous voulez. Mais si vous voulez réellement arrêter le processus bouillonnant et envahir les gestionnaires sur l'élément courant de s'exécuter. Ces autres méthodes étroitement apparentées appelées arrêter la propagation immédiate. Je voulais juste vous faire savoir que cela existe. Et cela signifie juste que souvent se fait virer. Aucune autre main n'est exécutée même sur ces éléments existants. J' espère que tu t'amuses, et je te verrai à la prochaine conférence. 20. Délégation d'événement - Introduction: Dans l'une des conférences précédentes, nous avons vu que la distinction entre Katherine et bundling était utile, mais peut-être que ce n'est pas tout à fait crucial parce que 99 pour cent du temps, nous ne nous en soucions pas vraiment. Nous sommes heureux d'écouter un événement sur la phase bouillonnante. Mais cela ne veut pas dire que se bavarder n'est pas crucial à comprendre. En fait, si vous voulez prendre votre développement web Corée au sérieux, nous devons comprendre babling. Et l'un des principaux avantages du babillage est ce qu'on appelle dans l'industrie la délégation d'événements. Qu' est-ce que la délégation d'événements et comment s'insère-t-elle ? Eh bien, l'idée est très simple. Disons que nous avons beaucoup d'éléments que nous voulons traiter de manière très similaire. L' option 1 est que nous pourrions attacher des écouteurs d'événement à chacun de ces éléments. Mais comme vous pouvez vous en sortir, je suis avec ça qui est très inefficace. Je vais avoir beaucoup de code redondant et répétitif. Donc, au lieu de mettre des gestionnaires d'événements sur chaque élément, tout ce que vous devez faire est de choisir un ancêtre commun, mettre le gestionnaire d'événements que vous voulez sur les réseaux, et de compter sur le bouillonnement. Et ce qui est assez astucieux, c'est que rappelez-vous que la méthode add event écouteur. Ce qu'il nous donne quand un événement va bien, il nous donne cet objet d'événement. Tu te souviens de cet E ? Et sur ce E Nous pouvons réellement accéder à l'élément micro a déclenché l'événement avec sa propriété cible d'événement. De quoi je parle ? Eh bien, je pense que la meilleure façon est de regarder un exemple très final où nous avons beaucoup de blocs et quel que soit le clic de blocage, je veux changer cette couleur. Très, très cool. Et puis je veux que tu essaies ta main à quelques défis. Alors profitez-en et commencez à le réaliser. C' est le principal avantage quand il s'agit de comprendre le babillage. J' espère que tu t'es bien amusé, j'espère que tu as un café. Tu gaspilles le mien. Parce que le mien. Donc, j'ai à la fin. Oui. Je te verrai la semaine prochaine pour en profiter. 21. Défi de la boîte - Introduction: Bienvenue à ce défi génial, ou je ne peux pas attendre pour entrer dans ce jeu avec vous. Mais de quoi s'agit-il ? Nous allons, tout d'abord, vous pouvez voir que nous avons une table sur notre écran est un coup sur la table. Et si je clique sur ce frapper sur la table, rien ne se passe. Mais ce qui se passe quand je clique sur l'un de ces numéros va simplement cliquer sur ce numéro un. On peut voir qu'il va lire. Maintenant, quand je vais cliquer sur le titre de la table, autour de la table, rien ne se passe qui soit limité au numéro deux. Maintenant, comme on peut le voir, la couleur rouge, cette couleur de fond sur le numéro un a disparu. Et maintenant, le bloc numéro deux a une couleur de fond rouge. Donc je sais que vous pourriez penser et Clyde, c'est un exemple super simple et que vous êtes à 100 %. Mais les leçons que vous allez apprendre dans ce défi de l'inhibition sont très, très importantes. Alors réfléchissez à la façon dont vous pouvez coder cela. Souvenez-vous d'une chose, cependant, nous voulons nous fier à ce que nous avons appris sur la pagaie. Rappelez-vous, babbling est une technique très, très puissante et peu se développent comme vraiment apprécier le pouvoir de comprendre le public. Je ne veux pas que vous ajoutiez des écouteurs d'événements sur chacun de ces éléments. Je veux que vous ajoutiez un écouteur d'événement sur le parent parce que vous savez que peu importe où vous cliquez dans le DOM, cet événement click va traverser le Dom, N'est-ce pas qu'il va monter, il va buller tout le chemin vers le haut à notre élément racine. Donc, en gardant cela à l'esprit , prenez un café et profitez-en. Amusez-vous avec ces choses, parce que c'est de ça qu'il s'agit. Il s'agit de s'amuser. Mais en cours de route, apprendre des informations très précieuses aussi. Je te verrai à la prochaine conférence. 22. Défi de la boîte - Créer notre HTML: Rien de tel qu'un bon, bon café. Et ça va être un petit exercice vraiment amusant. Parce que, comme vous l'avez vu, nous allons avoir beaucoup de petits blocs carrés. Lorsque nous cliquons sur ces blocs, nous voulons que les couleurs changent. Et rappelez-vous ce que nous essayons de faire. Nous essayons d'utiliser nos connaissances sur le bouillonnement parce que levure nous pourrions attacher un écouteur d'événement individuel à chaque bloc. Cela signifie que l'opcode devient très répétitif et qu'ils tombent redondants. En fait, ce n'est tout simplement pas efficace. Donc maintenant, nous allons compter sur le fait que, peu importe où nous cliquons, cet événement va exploser. Et il va toujours bouillonner au-delà de la div parente ultime, n'est-ce pas ? Donc, nous pouvons simplement attacher un écouteur d'événement à leur div parent, sachant que nous avons toujours accès à la cible d'événement elle-même. Je sais que vous êtes peut-être un peu bizarre par les plus anciens, mais ne vous inquiétez pas, nous allons y entrer maintenant. Vous pouvez voir ici nous avons notre éditeur de texte sur la gauche. Nous avons notre navigateur sur la droite, donc nous pouvons réellement voir quel correctif notre code a sur le navigateur. Donc cette conférence spécifique ici, je veux qu'on s'assied notre squelette. Et dans la prochaine conférence, nous allons commencer à ajouter JavaScript et à voir cela en action. Alors profitez-en et amusez-vous. Ce sera une conférence très instructive, audios. Donc la première chose que nous voulons faire est que nous voulons asseoir notre HTML. Et vous pouvez voir ici j'ai un fichier index.html et j'ai un styles.css. Donc, très simplement, mettons en place un modèle HTML et commençons simplement à créer la viande de nos côtés. Je vais envelopper tous ces blocs gris dans une table. Et cette table est ce qui va être les parents de tout le reste. Et par conséquent, c'est cette table à laquelle nous voulons attacher un écouteur d'événement. Donc je veux juste lui donner un I D et me rappeler ce qu'on apprend ici. Nous apprenons à propos de la délégation d'événements. Alors pourquoi ne pas simplement appeler cela la table des délégations faute d'un meilleur mot. Donc ils allaient avec ce que notre table. Et maintenant ce que je veux faire, c'est que nous créons un titre pour toute notre table. Ajoutons un titre avec la balise th. Et je ne sais pas, on peut juste dire, Hey, allons le faire un peu audacieux. On peut dire délégation. Tableau, cliquez pour changer de couleur. Donc, nous gardons ça. On y va. Nous pouvons le voir dans notre navigateur, mais c'est juste l'en-tête de la table. Ce que nous pouvons faire maintenant, c'est que nous pouvons ajouter une autre ligne. Et dans cette rangée, nous allons juste inclure quelques points sont maintenant. Et je veux juste audacieux. Refroidir au numéro un. Donc, nous y allons est le numéro 1. Et nous allons avoir trois colonnes. Alors on y va. Il peut y en avoir un, cela peut être deux, et cela peut être, ce formatage semble terrible. Vous pouvez voir l'unité à gauche et les 23 sont tas aux émeutes. Et si vous inspectez ça, vous saurez exactement ce qui se passe. Ça se résume à notre frappe au fait. Je vais vous montrer pourquoi maintenant, développez ça rapidement. Ce qui se passe réellement ici. Zao frappe prend toute la place dans une cellule. En d'autres termes, dans une colonne et c'est une colonne de filet extensible, qui explique pourquoi cela se produit. Donc, ce que nous voulons vraiment faire, c'est cette rubrique. On veut s'étendre sur trois colonnes, n'est-ce pas ? Alors je vais te montrer ce que je veux dire maintenant, revenons à comment on l'avait. On y va. Et avec ce coup, nous voulons juste le colspan en trois colonnes. On y va. Maintenant, ils sont tous répartis uniformément. Alors on y va. C' est littéralement notre première rangée. Je veux alors avoir une autre rangée. Et bien sûr, car cela peut être cinq et cela peut être six. Et tu l'as deviné. Allons en avoir un autre. On peut en avoir 789. Comment ça a l'air ? Il commence à prendre forme apporté. Mais maintenant, passons à nos styles ici rapidement. Tout d'abord, nous devons inclure une tête. Et dans la section tête, nous pouvons inclure un lien vers notre fichier CSS. Et on sait que ça s'appelle les styles. Nous pouvons aller à notre feuille de style, bien sûr qu'elle est vide maintenant, mais nous allons juste composer cette table pour qu'elle ait l'air un peu plus funky. Alors, comment devrions-nous commencer notre table va d'abord, prenons notre table et nous pouvons l'attraper en utilisant son ID, que nous avons appelé table de délégation. Tu te souviens ? Donc nous avons notre table. La prochaine chose que nous voulons faire, c'est que nous voulons coiffer chaque cellule, chaque cellule fille de notre table. Donc on peut juste composer le tag td. Et nous y voilà. Nous pouvons définir la largeur de chaque cellule, peut-être un 150 pixels. Ça a l'air mieux. Et nous pouvons faire la même chose avec la hauteur. Faisons peut-être qu'un 100 pixels commencerait à bien paraître. Et on peut prendre la ligne jusqu'au centre. Et donnons-lui un beau fond de lumière. Donc, ce sont un style rapide. Il a notre HTML et maintenant je veux que vous essayiez de réfléchir à la façon dont nous pouvons éditer les intestins à cela. Rappelez-vous ce que nous voulons faire lorsque nous cliquons sur un nombre, nous voulons que sa couleur d'arrière-plan change pour lire. Alors arrêtez la vidéo ici, réfléchissez-y et je vous verrai continuer dans la prochaine conférence. 23. Défi de la boîte - Solution: Ok, c'est exactement là qu'on s'est arrêté. Rappelez-vous que nous avons fini notre HTML et nous avons ces petits blocs cool, mauvais, bien sûr, comme vous le savez, si nous cliquons sur ces blocs, rien ne se passe et c'est ce que je veux que nous fassions maintenant. Alors allons y entrer. Quelle est la première étape que nous devons faire ? Eh bien, montons. Nous devons inclure une balise de script directement. Balise de script. Et construisons cela lentement par étapes. Ok, alors rappelez-vous ce qu'on veut faire. Nous voulons compter sur l'effet bouillonnant, le fait que les événements bouillonnent à travers le DOM. Donc, avec cela dit, la première chose que nous voulons faire est que nous voulons attacher un écouteur d'événement à notre élément parent, qui dans ce cas est la table. Donc, ici, nous voulons définir une variable et son appeler la table. Et nous pouvons obtenir cette table en accédant à un conseiller qui obtient élément par la méthode ID. Nous le savons, nous avons traversé autant de fois et son identifiant est la table de délégation. Vérifions simplement que c'est la table de délégation d'ID. C' est vrai. Qu'est-ce qui est cool à propos de ces éditeurs de texte ? Si un surligné, nous pouvons voir que c'est exactement le même déversement, le charge, ça va marcher, le mettre de cette façon. Alors on y va. Nous avons notre table, et maintenant nous voulons joindre un écouteur d'événement. Donc, toucher et écouteur d'événement. Donc, nous accédons à notre objet de table. Nous accédons ensuite à une méthode appelée add event listener. Encore une fois, nous le savons. Nous voulons écouter un événement click. Et puis nous voulons définir notre fonction de gestionnaire d'événements personnalisé. Et ça s'appelle juste changer de couleur parce que c'est exactement ce que nous voulons faire. Alors on y va. C' est cool ? On a déjà commencé à le faire. Et vous pouvez voir quand on le fait à la pièce, ce n'est pas si difficile. L' étape suivante est, bien sûr, que nous devons définir cette fonction ChangeColor. Et qu'est-ce qu'on fait ici ? Rappelez-vous ce qui va se passer maintenant, quand on clique sur une seule de ces cellules dans la table, les veines vont buller en haut à droite. Et nous pouvons prouver que c'est le cas. Si nous console journal, quelque chose a été cliqué et nous avons obtenu notre navigateur, nous accédons à la console. Rends ça un peu plus grand. Professeur me le faire en plein écran. Accédez à notre console. Et maintenant, nous allons cliquer sur, disons le numéro un, quelque chose a été cliqué. Le numéro cinq, encore une fois, quelque chose a été cliqué. Sa taille. Comme c'est génial cet objectif. Mais continuons. Retournons à notre éditeur de texte. Faisons cette pleine taille maintenant. Et maintenant, on peut commencer à se mettre dans le pétrin, non ? Parce qu'en ce moment nous savons que quelque chose a été cliqué, mais nous ne savons pas ce qui a été cliqué. Et rappelez-vous, avec cette méthode addEventListener, week-end donné un objet réel et un objet d'événement. Et pour accéder à cet objet, nous devons le mettre dans une variable, comme je l'ai mentionné précédemment dans le cours, le plus souvent, nous utilisons la lettre E. Maintenant, nous avons cet événement et nous pouvons simplement le définir dans une autre variable. Disons juste que les cibles tardives soient l'événement togas. Et puis pour vous le prouver, nous pouvons consoles déconnecter cette cible. Ils sauront exactement d'où vient cet événement. Revenons à notre navigateur. Effacons la console et cliquons sur ce premier. La cible n'est pas définie. Qu' ai-je fait de mal ? C'est ce que l'on appelle les terroristes devraient être la cible. Uga. Simple erreur de déversement est de revenir à notre navigateur. C' est clair, cette console et nous allons cliquer sur ce premier. Et on y va. On ramasse littéralement cet élément td. C' est génial, c'est fort ? Donc, nous savons maintenant que nous pouvons accéder à l'élément réel qui est déclenché cet événement. Alors on y va. Retirons cette console. Ce que vous pensez que nous devons faire maintenant, c'est changer la couleur. Mais maintenant, comment pouvons-nous changer la couleur ? Il y a plusieurs façons de le faire. La façon la plus simple à laquelle je peux penser est de définir une clause , puis juste l'ajouter à cet élément sur lequel on a cliqué. Allons à notre feuille de style rapidement. Je vais te montrer ce que je veux dire. Et ce que je veux faire, c'est que je veux à nouveau accéder à notre table de délégation. Et maintenant, cette fois, ce que je veux faire est que je veux ajouter notre propre classe personnalisée à chaque droit de balise td. Et je veux appeler cette cause, je ne sais pas mettre en évidence parce que c'est ce que nous voulons faire. Nous voulons mettre en évidence la cellule une certaine couleur. Et bien sûr, ce que nous voulons faire ici, c'est que nous voulons simplement changer sa couleur de fond en rouge. C' est tout ce qu'on voulait faire. Donc, si nous revenons ici à notre index, génial, donc nous avons notre classe de points forts, nous savons que nous voulons ajouter cette clause à n'importe quel élément déclencheur de l'événement. Comment ajouter une clause ? Eh bien, c'est très simple. On peut accéder à notre cible. L' élément qui déclenche un déviant. Le doyen a un objet appelé liste de classes. Object est une méthode appelée add in. C' est vraiment aussi simple que ça. Nous ajoutons juste une classe à cet élément. Et la classe que nous voulons ajouter, bien sûr, est le point culminant. Sauvegardons ceci et allez dans notre navigateur. Ce sera un problème majeur avec ce que nous venons de faire. Laissez-moi donc cliquer sur le numéro un, par exemple. Changements à lire. Mais quel est le problème ? Pouvez-vous prévoir un gros problème ici ? Eh bien, c'est vrai. Si on va cliquer sur une autre cellule, que va-t-il se passer ? Écrivons que ça résout va aller lire, mais la cellule numéro un d'origine serait cochée, ne change pas. Il reste toujours rouge. Donc, il y a un léger problème avec notre code que je veux résoudre maintenant. On peut revenir à notre code ici. Je veux supprimer l'ajout d'un cours l'année dernière et je vais vous montrer pourquoi dans une seconde. Ce que je veux faire maintenant, c'est que je voulais trouver notre propre fonction personnalisée, et vous verrez pourquoi un peu plus tard. Et appelons simplement cette fonction surbrillance. Et nous voulons mettre en évidence cette cible, n'est-ce pas ? Donc, la prochaine étape que nous allons devoir faire est que nous allons devoir définir une fonction appelée Highlight. Et ça va prendre un noeud. Dans ce cas, il va en fait prendre cet élément, l'élément cible. Et c'est une sorte de façon que je veux que nous régulions quel élément est actuellement cliqué par rapport au précédent déclaré. Alors laissez-moi vous expliquer. Au tout début de notre script, définissons simplement une variable vide et appelons cet élément sélectionné variable. Et d'abord, nous allons l'assigner à une valeur de null. Donc, ce qui est vraiment cool, c'est que lorsque nous commençons à exécuter cette fonction de surbrillance, nous pouvons maintenant introduire une instruction if. Et qu'est-ce que cela si la déclaration va contenir ? Eh bien, réfléchissons à ce que nous voulons faire lorsque nous cliquons sur une de ces cellules TD, nous voulons ensuite définir une variable qui est assignée à cette cellule. Et puis la prochaine fois, certaines choses variable d'effet Dan a une valeur. Nous voulons ensuite supprimer leur classe de la variable de tête. Je sais que ça a l'air bizarre, mais tu vas voir exactement comment ça marche maintenant. Donc tout ce que je veux faire, c'est que nous voulons dire si l'élément sélectionné n'est pas égal à null, ce qui signifie que nous avons déjà sélectionné un élément. Qu' est-ce qu'on veut faire ? Eh bien, nous voulons prendre cet élément sélectionné, nous voulons accéder à sa méthode de liste de griffes. Tu te souviens de ça ? Mais cette fois, nous ne voulons pas ajouter Dewey. Nous voulons supprimer cette clause appelée « surlignements ». Donc maintenant, cela va supprimer à l'élément précédemment sélectionné Xj quelque sorte faire des scènes ou R, tout est bon et bien, mais maintenant ce que je veux faire est que nous devons affecter le nouvel élément sur lequel nous avons cliqué à la variable d'élément select. Attribuez le nouvel élément td. Nous avons cliqué sur la variable select element. Et bien sûr, cette première déclaration si se débarrasse des éléments td précédemment sélectionnés. Highlight class, est-ce que ça fait des saints ? On s'est débarrassés de la précédente. Maintenant, nous voulons qu'il attribue le nouvel élément td à cette variable. Alors comment on fait ça ? Nous allons très simple. Nous accédons à l'élément sélectionné. Et bien sûr, nous attribuons cela à la valeur du nœud. Et puis bien sûr ce que nous voulons introduire en cours d'exécution pour accéder à l'élément sélectionné, sa méthode de liste de classes. Et maintenant, nous voulons ajouter une classe appelée surbrillance à l'élément nouvellement sélectionné. C' est un peu logique. Je l'espère, je l'espère vraiment. Je suis impitoyable. Allez dans le navigateur rapidement, voir comment nous allons. Effacons la console et cliquez sur le numéro un. Alors on y va. C'est rouge. Cliquez sur le numéro 2. Oui. Wow. C' est incroyable. Droit ? Cliquez à nouveau sur le numéro 1. Peut-être que si vous voulez vraiment devenir un vrai truc de grand-mère plus sévère, vous remarquerez que ce n'est pas tout à fait parfait. Pourquoi ? Eh bien, pour quelques raisons. L' un est que se passe-t-il si nous cliquons sur ce titre de la table ? Eh bien, le gars que nous pouvons voir le chauffage de la table enlève la couleur sur l'élément td, pose un problème, non ? Et c'est juste rafraîchir ça. Cliquons sur un. Que se passe-t-il si je clique sur l'écart ? Oui. En d'autres termes, les marges et les paddings entre lui-même. Eh bien, la même chose va se produire si l'utilisateur fait ça accidentellement , la couleur disparaît. Et ce n'est pas ce qu'on veut. Nous voulons que la couleur disparaisse seulement lorsque vous cliquez sur un autre élément td, un élément fille de table, des vaccins. Donc il y a encore quelque chose que nous devons faire pour finir ça et perfectionner c'était la vidéo maintenant et essayer de comprendre. C' est vraiment une solution rapide. Mais c'est un peu une nuance. C' est assez délicat. 24. Qu'est-ce que l'API ?: Avant de passer à autre chose, je veux juste clarifier quelque chose dont vous vous demandez peut-être. Et c'est ce qui est cette propriété de liste de classes si nous devions exister ? Eh bien, laissez-moi juste dire que la liste de classes est une API, et cette API renvoie une liste de jetons DOM en direct. Et qu'est-ce que je veux dire par une API restera juste le pont lorsque nous travaillons dans le navigateur. Le navigateur lui-même nous fournit beaucoup d'API différentes. On a déjà traversé ça. L' une de ces API est froide, cette liste de classes et d'autres API sockets Web. Nous avons aussi l'API veines, cetera excentrique. C' est juste l'un des nombreux. Et qu'est-ce que ces listes de clauses nous permettent de faire ? Eh bien, cela nous donne un moyen facile de saisir tous les lancements d'un élément HTML particulier. Et je suis sûr que vous pouvez déjà deviner à quel point cela sera utile. Par exemple, nous pouvons utiliser cette propriété pour ajouter, supprimer et basculer des classes CSS sur un élément en temps réel. Et il existe depuis un bon moment. En fait, il a été introduit par la spécification HTML5. Et la chose vraiment cool est que nous avons beaucoup de méthodes disponibles pour nous sur cette API de liste de classes. Nous avons ajouter, supprimer contient des liens d'élément total vers la chaîne et la valeur. Nous n'allons pas utiliser tous ces éléments dans le cours, mais nous allons utiliser les plus populaires. Nous allons utiliser ajouter, supprimer, et même basculer. Cet ECG fait des scènes. Vous vous demandez peut-être, quelles sont les listes de jetons DOM ? C' est quoi tout ça ? Eh bien, ça retourne un tambour. routes assez évidentes. Je suis sûr que tu l'as deviné. C' est une liste spéciale. Et c'est une liste qui nous donne toutes les méthodes que nous venons de voir dans la diapositive précédente. Rappelez-vous, Ajouter, Supprimer, bascule, et cetera, et cetera. Et vous ne rencontrerez probablement jamais la liste de jetons DOM avec cette API de liste de classes. Alors on y va. Je voulais juste vous donner rapidement un aperçu de ce que la propriété répertoriée Clause était. J' espère que tu apprends une tonne et je te verrai dans le prochain défi. 25. Défi de boîte - Perfectionner notre solution: Tu l'as compris ? Ne vous inquiétez pas si vous ne l'avez pas fait. Ce n'est pas ce qui est important. L' important, c'est que tu y as réfléchi et que tu lui as donné un coup d'envoi. Allons voir notre éditeur de texte ici. Et comment pouvons-nous y faire face ? On doit retourner à la source. Rappelez-vous la fonction de surbrillance, nous voulons seulement que cela se produise. Ce que nous avons cliqué est un élément TD. Tout le reste. En fait, nous voulons qu'il ne se passe rien. Si l'utilisateur va et clique sur la touche de la table, nous voulons que rien ne se passe. Donc, nous savons pour cette raison, nous avons besoin d'un type de gardien, net gatekeeper peut être cette toute première fonction, cette fonction ChangeColor. Donc, ce que nous ne voulons pas faire est d'appeler cette fonction cible de surbrillance immédiatement. Nous avons besoin d'une déclaration if. Ne vous inquiétez pas. Commençons par une déclaration if. Et si vous n'êtes pas sûr de savoir comment fonctionne l'instruction if, s'il vous plaît consulter mon cours de grand maître complet JavaScript. C' est vraiment génial. Mais de toute façon, pour ceux d'entre vous comprennent ce que c'est, super, vous serez en mesure de suivre. Quelle est la première chose que nous pouvons tester pour ça ? Encore une fois, les nombreuses façons de peau d'un chat quand il s'agit de programmation. Cela traite simplement de la situation où l'élément cible avec Tiktok n'est pas égal à l'élément td. Donc, ce que nous pouvons dire, c'est que le nom de la balise cible, à droite, n'est pas égal à TD. Dans ce cas. Nous ne voulons rien faire. Et nous pouvons juste exécuter une déclaration de retour qui va en effet, dire à l'analyseur JavaScript de quitter cet ensemble si l'exécution est exécutée. C' est tout ce qu'on fait. Mais alors, bien sûr, nous voulons faire face à la situation de la manière. Ce nom de balise est Td. Donc, la moyenne à la déclaration else simple. Et bien sûr ici, nous savons que l'élément sur lequel nous avons cliqué est un élément TD. Et dans ce cas, tu es un 100 pour cent, non. C' est là que nous voulons exécuter une fonction de surbrillance et passer la cible comme argument. Crew, nous avons fait une quantité incroyable ou espérons que tout cela a du sens. Revenons à notre navigateur. Effacer la console, Cliquons sur un. Il suffit de cliquer sur cinq, travaillez tout. Maintenant, nous allons cliquer sur l'en-tête. Rien ne se passe. Cliquons entre ces cellules. Rien ne se passe. Donc nous avons littéralement une petite table parfaite. Comment génial la fin de Herbie s'amuser. J' espère que vous avez beaucoup appris dans cette conférence. Et si nous revenons au code, ouais, prenez votre temps, passez à travers, comprenez pas à pas ce que nous avons fait très rapidement. Tout ce que nous avons fait, c'est que nous avons clairement défini notre HTML tout en haut. Nous avons été au fichier styles.css, quels styles je vais mettre en table très bien. Et puis en bas, nous avons notre JavaScript tous enfermés dans une balise de script. Et dans la balise de script, nous avons commencé par définir une variable appelée élément sélectionné. Et rappelez-vous pourquoi nous avons fait ça. Nous avons fait cela pour que nous puissions garder une trace de quel élément avec actuellement sélectionné sur et lorsque nous sélectionnons un nouvel élément, nous sommes allés supprimer cette clause de surlignements sur l'élément précédent que nous avons sélectionné. Pourquoi ? Initialement, nous définissons juste une variable vide. Et ce type variable de nous aide à garder une trace de l'élément actuellement sélectionné. Dans saisir notre table, nous ajoutons un écouteur d'événement à cette table et nous utilisons bulles d' événements chaque fois qu'un événement de clic est bouillonné à cette table, cette fonction ChangeColor va être exécutée. Nous vérifions si cet élément cible, l'élément qui a déclenché l'événement click. Nous vérifions s'il s'agit d'un élément TD. Et si c'est le cas, nous exécutons une fonction appelée cette fonction mise en évidence vérifie l'élément sélectionné. Et si ce n'est pas nul, il supprime ce nom de classe. Et après cela, si instruction est exécutée dans assigner le nouveau nœud avec cliqué sur l'élément sélectionné, puis nous ajoutons une classe de surbrillance à elle. Aujourd'hui, nous l'avons sérieusement Walden, vous êtes venu si loin, vous avez si bien fait. Et maintenant, je veux que vous teniez la main à quelques défis. Je pense que vous ouais, je pense qu'à ce moment là, vous avez fait une quantité incroyable au sérieux, chanceux ont aussi besoin de célébrer ces choses. Désolé, je vais sortir la musique. Et danser peu. Détendez-vous et profitez. Prends un café. Et je te verrai à la prochaine conférence. 26. Défi de citation - Introduction: Bienvenue à un autre défi. J' espère que tu t'amuses. En fait, j'aime ces choses et j'aime les assembler et les parcourir avec vous est vraiment fascinant. J' aime juste ça, mais assez, blubber, blubber. Quel est le sujet de ce défi ? Eh bien, je suis sûr que vous pouvez probablement le deviner, mais ici nous avons trois citations générales dans leur propre blog. Et quand vous cliquez sur le petit x dans le coin droit, que se passe-t-il ? C' est vrai. Elle est partie. Il l'enlève entièrement. C' est alors anéantir. Quoi qu'il en soit, vous obtenez le point lorsque l'utilisateur clique dessus. Que les citations entières devraient disparaître. L' image juste actualise serait lorsque l'utilisateur clique sur le devis réel, rien ne devrait se passer là. Seulement lorsque l'utilisateur clique sur ce bouton. J' ai juste pensé à l'ancienne. Alors donne-lui un coup de pouce. Dans la prochaine conférence, je vais coder le HTML avec vous. Si vous ne voulez pas coder HTML, c'est bon. Je n'ai pas créé le fichier, mais sérieusement, c'est la meilleure façon d'apprendre. Donc, indépendamment de savoir si vous allez coder le HTML avec moi et je vous verrai dans la vidéo de solutions ainsi que où nous codons le JavaScript, manipulons le DOM, utiliser le reste de délégation d'événements sur la connaissance de la bulle. Nous ne voulons pas mettre des écouteurs d'événements sur chacun de ces points. Nous voulons le mettre sur les éléments d'un parent. Ok, alors gardez ça à l'esprit. Bref, profitez d'un café, et je vous verrai à la prochaine conférence. 27. Défi de citation - Créer notre HTML: Impressionnant. Nous entrons dans le prochain défi. Et comme toujours, le savoir-faire fonctionne lorsque j'écris le HTML avec vous parce que je pense que c'est la base pour apprendre de cette façon. Je le fais vraiment et je vous encourage à suivre. Mais si vous ne voulez pas suivre et que vous êtes vraiment un monstre au HTML et tout ce genre de choses. Ne paniquez pas. J' ai inclus un lien vers le HTML dans cette conférence. Donc, vous pouvez juste ramasser à partir de là. Mais si vous êtes venu à coder à côté de moi, super, Allons-y maintenant, vous pouvez voir sur mon code Visual Studio vide et le navigateur sur les droits. Et tout ce que j'ai, ce sont deux fichiers, un fichier d'index et un style. C' est ça. Par où commençons-nous ? Comme toujours, je veux commencer par un simple fichier HTML. Et avant de l'oublier, il suffit d'inclure notre feuille de style. ce moment. On y va. Je vais feuille de style est tout connecté et ils commencent à pourrir corps. Tu te souviens de ce qu'on a essayé de faire ? Nous essayons d'utiliser notre connaissance du bouillonnement. Ok, donc je veux envelopper tout le code à l'intérieur, appeler ça une délégation de, Créons un div avec l'ID de délégation dans cette boîte de délégation div, tout cela englobant un, le développement parent. Je veux avoir des citations et chaque genre de citation ressemble le même. Souviens-toi qu'on a un cap, on a acheté un certain fond. On a la frontière supérieure. Et parce qu'ils sont en quelque sorte répétitifs, ce que nous devrions faire est de créer une clause et de louer chaque port dans un autre projet avec une certaine clause. Donc, avec cela dit, créons un div et avons une classe de boîte parce que c'est ce que nous faisons. Nous mettons chaque citation dans sa propre boîte. À ce stade, souvenez-vous de ce que nous avons fait. Nous avons notre boîte et dans chaque boîte, nous voulons citer et rappeler ce que chaque tête tout à fait. Donc un simple, il avait un cap et puis il a dû réellement prendre. Et bien sûr, nous avons le bouton de fermeture en haut à droite. Donc, d'abord, faisons le frapper juste à une étiquette H3 parce que je ne veux pas que ça soit si grand. Et frapper peut être froid sur une hanche, une hanche, une hanche. On y va. Et ils peuvent avoir besoin de l'abandon réel fait de faire. Ainsi, la citation peut simplement être dans une balise de paragraphe normale. Nous avons notre paragraphe et au lieu de le taper de juste gagner du temps, j'ai effectivement enregistré toutes les citations et un autre écran délicieux copier-coller. Oui. Ce sont tout à fait comme un hippopotame. Un hippopotame ou juste une optimisation vraiment cool up. Pour un brillant, brillant, c'est une blague typique de papa, n'est-ce pas ? Bref, nous avons notre cap, nous avons acquis, et ensuite nous avons besoin du bouton de fermeture. Ne voulez pas que vous créez une balise de bouton avec une classe de cool vicieux, il a été supprimé. Et nous voulons juste inclure le petit XD. Donc, nous savons que c'est un bouton. Nous cliquons sur ce bouton et nous voulions bouger. Ne vous inquiétez pas pour le style de ça. Maintenant, on va entrer dans ça dans notre feuille de style. C' est juste assis sur le HTML. Alors on y va. Idée est offre citation, tout ce que nous avons à faire maintenant est de copier. Cela ne vole directement Enregistrer et ce sont toutes les demandes. Comment quelqu'un était ça, ce juste changement. Bien sûr, chacun de ces titres, ce coup peut être froid. Continuez. Et laissez-moi saisir le texte sur mon autre écran. Oui, l'équité. Et cette citation vient de Winston Churchill. Et enfin, on en a perdu un. Et nous pouvons dire, faites attention. Encore une fois, laissez-moi simplement copier et coller ceci de mon autre écran ici juste pour nous faire gagner du temps. On y va. Cool hackles ça. Donc, ce sont du HTML. La dernière chose que je veux faire pour limiter juste défiler vers le haut ici est pimenter cela un peu en appliquant stylistique cool a été fait feuilles de style Talk et fait penser jazzing cela. La première chose que je veux faire est sur un attraper notre corps, ok, et je veux tout style sur Next, et nous allons faire face à la marge d'abord. Disons simplement que nous voulons une marge de 10 pixels et que nous voulons que tout soit aligné au centre. Nous pouvons ensuite définir une largeur de 450 pixels. Comment ça a l'air ? Et à la recherche de belles sécheresses saintes. Il a une largeur de masse pour nous. Et puis les polices sont juste moyennes. Alors mettons juste font-family. Unité coréenne. C' est amusant. David, ça a l'air cool. On dirait que c'est une bonne citation. Stats up mon pote, ils commencent à devenir plus précis en ce moment. Et arrêtons de travailler tout en haut. Parlons travailler avec notre tag h3. Le, nous allons juste se débarrasser de la marge. Et nous pouvons avoir un peu de rembourrage en bas. Donc c'est bien. Fond de rembourrage. Je ne sais pas. 0,3 m de camion. Ouais, c'est bon. Alors c'est comme ça que H3. Maintenant, je veux commencer à travailler avec notre paragraphe. Nous allons lever parent ou éteindre à nouveau, cette suppression de la marge. Et encore une fois, je veux affecter le fond de rembourrage ou le fond de rembourrage. Et des inconnues. 0,5 But un peu plus, peut-être 0,8 pour lui. Je pense que ça a l'air bien. Soyons H3 et notre paragraphe. La prochaine chose que je veux styler est ce bouton de suppression. Devrions-nous faire ça ? En fait, vous savez quoi, avant que je fasse le bouton de suppression, laissez-moi vraiment styler une boîte parce que vous verrez comment nous positionnons ce bouton ou être plus facile à voir. Donc tout ce qu'on veut faire, c'est prendre le nom de la boîte. Souviens-toi, oui, on peut appliquer une couleur de fond de ça, juste dire violet, mais je vais le changer maintenant. Alors passons juste au-dessus de ça. C' est vraiment quelque chose de cool dans l'éditeur de texte. Et nous pouvons le style littéraire comme nous l'aimons. Comment ça a l'air ? Mettons du rose, n'est-ce pas ? Peut-être qu'on devrait le faire, tu sais, je peux le faire d'une belle couleur bleue. Comment c'est ? Ouais, c'est cool. J' aime ça. Et nous le rendons un peu plus transparent. Voilà, tu y vas. J' aime ça. Ajoutons un peu de rembourrage. Oui, ça a l'air mieux. Et il commence déjà à regarder cool avec en ce moment vous pouvez voir que l'un ne mensonge sans citation jette dans l'autre. Donc, séparons simplement en ayant une bordure vraiment cool. En fait, je veux juste avoir une planche en haut pour qu'on puisse aller au sommet de la frontière. Deux pixels, bleu uni. Comment ça a l'air ? Oui, je suis les netbooks ou au moins maintenant vous pouvez distinguer une citation de l'autre. Et maintenant, la dernière chose que je veux faire, c'est juste faire défiler vers le bas. Oui, mais comme je voulais styler ce bouton de fermeture, alors on lui a donné une classe de suppression. Rappelez-vous que si j'ai obtenu notre fichier HTML et nous faisons défiler jusqu'à chacun de ces boutons, vous pouvez voir que chaque bouton a une clause ou supprimer. C' est ce qu'on fait ici. Nous allons avoir faux personnel informatique va d'abord, je veux que la position soit une position absolue parce que rappelez-vous, nous voulons placer cela en haut à droite de chaque citation, aka de chaque div avec une classe de boîte. Nous voulons donc que sa position soit absolue. Mais nous allons avoir un léger problème avec ça que je vais vous montrer maintenant. Donc nous avons une position absolue, ce qui est cool maintenant nous devons la déplacer si nous affectons son positionnement supérieur à 0, vous pouvez voir qu'ils sont empilés les uns sur les autres. Donc, bien que nous voulions être un positionnement absolu, nous voulons qu'il soit toujours relatif à son parent. Et la div parent, c'est Boston. Et pour ce faire, nous devons aller dans cette boîte fait et ensuite le truc de la boîte, nous pouvons avoir une position de parent. On y va. Maintenant, chaque bouton Supprimer sera positionné par rapport à son parent. Est-ce que ça a du sens ? C' est pour ça qu'on a fait ça, on devrait avoir un commentaire. Oui. Et le commentaire peut être que nous voulons que chaque bouton soit placé par rapport à son parent. C' est pour ça qu'on fait ça. Alors on y va. Ça fait beaucoup de scènes. Et bien sûr, nous voulons que ce bouton appuie sur la droite. En fait, peut-être que nous pouvons avoir une équipe de pixels à partir de la droite. Comment ça a l'air ? Commencer à avoir l'air bien, non ? Que pouvons-nous faire d'autre ? On peut enlever la frontière. D' accord. Donc frontière aucune. Comment ça a l'air ? Oui, mon nom est à la recherche. D' accord. Que pouvons-nous faire d'autre ? Nous pouvons ajouter un arrière-plan. Soyons transparents. On ne veut pas que le gris n'ait pas l'air sympa. Vous commencez à regarder mieux main, la couleur, bien sûr, peut être rouge foncé. Comme à l'heure. C' est mieux. L' autre chose que nous pouvons faire est que vous pouvez voir si nous survolons avec notre souris, ne change pas ce symbole drôle de main. Donc, bien sûr, ce que nous pouvons faire est que nous pouvons affecter sa propriété de curseur et faire qu' un pointeur est maintenant si nous survolons ces petites mains et c'est un peu petit. Alors rendons ça un peu plus grand. Taille de la police. Faisons un m. C' est un peu mieux, et je pense que c'est bon. Je pense que ça a l'air génial. Évidemment, nous pouvons passer beaucoup plus de temps à le rendre plus beau. Mais pour les besoins de cette conférence, nous en avons assez fait. On a nos trois citations. Et bien sûr, je pense évident ce que je veux que tu essaies de faire. Lorsque vous cliquez dessus pour croiser le bouton de fermeture. Je veux que cette citation disparaisse. Donc, nous avons notre HTML. Tu te souviens de ce qu'on a fait Nous avons défini un élément div global, un élément actif. Nous allons utiliser les pourritures parce que nous avons appris à babiller. Et ça va être celui qui écoute nos veines collantes sur ce bouton de fermeture. Est-ce que ça a du sens ? Cool, alors donne-le un coup d'envoi. Et dans la prochaine conférence, je vais coder la solution avec vous. Embrassé s'amuser lui dire fin. Et je te verrai à la prochaine conférence. 28. Défi de citation - Solution: Woo hoo. J' espère que tu t'es amusé et j'espère que tu apprends et j'espère qu'il l'a fait parce que c'est la chose la plus importante. Mais oui, nous savons tous bien, veux le faire maintenant c'est que je veux ajouter nos JavaScripts, que je veux ajouter cet écouteur d'événement, et je veux que nous utilisions des bulles d'événements. Laissez-moi développer l'éditeur prend en ce moment. Et ce début de tooting notre balise de script. Vous allez être étonné de voir à quel point la solution est simple, au fait, n'est-ce pas si difficile ? Quelle est la première chose qu'on a à faire ? Eh bien, allons faire du rock. Nous voulons attacher notre écouteur d'événement à quelque chose, n'est-ce pas ? Disons que la délégation tardive. L' assigné à la valeur de notre div réelle avec ID de délégation, parce que c'est celui que nous voulions écouter ce que je veine, à droite. Nous ne voulons pas attacher une boîte de distribution qui est trop lourde et dont les performances sont inefficaces. Nous voulons être de vrais grands maîtres domaine d'encodage. Nous commençons donc par notre objet de document. Sur cet objet de document, nous le savons déjà. Il existe une méthode appelée get element par ID. Et bien sûr, la carte d'identité que nous voulons FH est la délégation. Je pense que c'est ce qu'on appelle ça la délégation d'identité. Et c'est vrai. Alors on y va. C' est la première étape. La deuxième étape est que nous voulons joindre notre écouteur d'événement. Donc, nous sommes sortis de la délégation. Nous existons maintenant une méthode directement sur cet écouteur d'événement add. Nous voulons écouter les événements de clic complet. Et quand ils cliquent événement est déclenché, nous voulons exécuter notre gestionnaire et le gestionnaire supprimé faute d'un meilleur mot. Bien sûr, maintenant nous devons définir notre fonction que nous avons nommée supprimée. Et maintenant, vous pourriez penser que c'est délicat, mais ce n'est pas si délicat. Qu' est-ce qu'on fait maintenant ? Est-ce que beaucoup de codage vient par l'essai et l'erreur. Donc, ce que je peux faire, c'est que je peux coder quelque chose qui n'était pas tout à fait du travail, mais ça nous arrivera à mi-chemin. La première chose qu'on veut faire, c'est qu'on veut accéder aux cibles veineuses, n'est-ce pas ? Nous voulons trouver les moyens de venir de cet événement. Et pour cela, nous devons accéder à l'objet événement réel qui nous est donné dans cette fonction de rappel. Comment on fait ça ? Eh bien, comme vous le savez maintenant, nous la mettons dans une variable et nous l'appelons généralement variable e. Et pour accéder à nos cibles, nous pouvons simplement définir une variable appelée cible, et nous accédons à notre objet événement et nous obtenons un appelée cible sur elle. C' est ce que nous savons. Maintenant, ce que nous voulons faire, c'est que nous voulons supprimer non seulement la cible réelle, mais nous voulons supprimer le nœud parent, l'élément parent. Tu te souviens comment nous avons structuré notre code ? Laisse-moi faire défiler ici. Chaque citation comme naufragé et quoi ? C' est juste. Il est enveloppé dans son propre élément div avec une classe de bugs. Donc, nous pourrions dire, si nous cliquons à l'intérieur d'un devis, nous voulons supprimer ses éléments parents. Et bien sûr, si vous supprimez son propre élément parent, cela supprime également tous les enfants. Cela dit, vous pourriez penser que la façon la plus simple Clive est juste d'attraper ces axes cibles, son élément parent via la méthode de l'élément parent. Dans DOM pot une de la série, nous allons dans beaucoup de détails dans les éléments parents et comment traverser le DOM. Ceci est spécifique à une raison pour laquelle il devient très utile. Et sur ce point, nous voulons accéder à une méthode appelée remove. Alors sauvegardons ceci et allons dans notre navigateur. Élargissons notre navigateur. Et maintenant, nous allons cliquer sur continuer. Oh mec, ça l'a enlevé, mais ça ne devrait pas avoir raison ? Parce que nous ne devrions le supprimer que lorsque nous cliquons dessus. Ok, donc c'est un peu Hoff qui travaille et c'est ce que j'ai dit avant quand tu pourrais essayer de le faire. Et comme vous le verrez, vous savez, nous pouvons continuer à améliorer notre code au fur et à mesure que nous continuons. Voyez moi rafraîchir la page et elle est revenue à notre éditeur de texte. Alors, comment traitons-nous le fait que nous voulons seulement supprimer l'élément parent lorsque ce petit mal, ce bouton de fermeture est cliqué. Une façon de le faire est d'utiliser l'instruction if. Et les nombreuses façons que nous pouvons utiliser l'instruction if aussi. Je vais juste commencer par dire que si la cible, rappelez-vous que la cible est la chose, cet élément qui a déclenché l'événement tick. Si cette cible, si son nom de classe n'est pas égal à supprimer. Rappelez-vous parce que tous nos boutons ont une classe de supprimé. Si cet élément que nous avons coché n'a pas la classe de suppression. On sait que ce n'est pas le bâton. Donc, dans ce cas, on ne veut rien faire. Nous voulons juste sortir de cette déclaration if. Sinon. C' est le bloc de cache de code. Nous savons que l'élément sur lequel nous avons coché a un nom de classe remove, auquel cas cela signifie que c'est le bouton. Donc, dans ce cas, nous voulons exécuter la méthode remove sur son élément parent. Est-ce que ça a du sens ? Je l'espère. Rafraîchissons. Et maintenant, si je clique sur un, en appuyant sur toutes les citations, rien ne se passe. Mais si nous survolons l'un de ces boutons de flux et que nous cliquons dessus, c'est parti. Comme c'est génial. Alors on y va. J' espère que tu t'amuses beaucoup, malheureux de me suivre. J' espère que vous comprenez comment nous sommes assis sur le code et comment nous utilisons la délégation des êtres via bouillonnant. C' est vraiment intéressant et vous devenez un maître à ce banal. Alors que 29. Défi de la liste - Introduction: J' adore ce truc sérieux, tellement amusant. Et c'est pourquoi je continue de mettre des défis et des exemples pratiques. J' aime ça et je pense que tu en tireras des tonnes. N' oubliez pas que ce cours vous permet d'apprendre à coder efficacement ces lois. Peu de défis, y compris celui-ci, utilise le concept de bouillonnement d'événements. Et nous le faisons par délégation d'événements. Rappelez-vous une délégation veineuse et même un travail bouillonnant main dans la main. Ils sont très étroitement liés. Et plus vous pratiquez ça, vous allez devenir à Coda. Mais de toute façon, assez de cela, quel est ce défi ? Eh bien, comme vous pouvez le voir, nous avons un texte très simple à l'écran, HTML. Et délibérément, je ne voulais pas dépenser beaucoup d'ASC Thomas. Je voulais juste que tu apprennes ce concept et ensuite on passera comme je suis sûr que tu peux déjà deviner. Tout ce que nous voulons faire recueille des objets et des objets tranchants lorsque vous cliquez dessus. Si on prend des viandes rouges, c'est parti. Si on clique sur d'autres, c'est parti. Si nous cliquons sur les légumes, la liste entière a disparu. Pour cliquer dessus à nouveau, il apparaît. Si nous cliquons sur les yucky à effondrements, si nous cliquons sur les rencontres qui s'effondrent. Alors voilà. Je pense que vous comprenez le point. Et rappelez-vous que nous voulons utiliser la délégation d'événements. Assurez-vous donc de lire tout dans un élément et d'écouter un événement de clic sur cet élément parce que vous savez, il va bouillonner. Alors donne-le un coup d'œil. J'espère que tu t'amuses. Restez motivé et je vous verrai dans la prochaine conférence. 30. Défi de la liste - Créer notre HTML: Ou bizarre. Donc je vais arrêter de passer très vite à travers ça parce que tu vas bien. Commençons donc à créer notre HTML rapidement et efficacement. On y va. On a notre corps. Ce que je veux faire, eh bien, on doit créer ou ses étiquettes de liste pourrissent et je sais que ça va paraître un peu encombrant, mais on y arrivera ensemble. Alors, on va se fissurer. Rappelez-vous, nous voulons utiliser le bouillonnement d'événements. Et pour ce faire, nous devons créer une sorte d'éléments parents qui capture tous les événements. Alors faisons ça. Nous pouvons l'appeler l'étiquette UL et qui peut avoir un ID de nourriture. Et comme nous le savons, toutes les listes non ordonnées doivent avoir un élément de liste à l'intérieur. Donc, je vais d'abord l'élément de la liste peut être des viandes. Et je vais deuxième article de la liste peut être sous aucun légume. On y va. Et si nous gardons ça et nous rafraîchissons sur notre page, nous pouvons voir que nous avons de la viande et des légumes. Assez simple. Rappelez-vous, nous voulions créer toute une sorte d'arborescence de listes et tout ça. Donc, dans ce rencontre un mensonge, je veux en fait créer une autre liste non ordonnée. Et rappelez-vous qu'ils voulaient atteindre, décomposer encore plus loin en l'appelant viandes rouges et autres. Donc, pour ce faire, nous pouvons simplement créer un autre élément de liste. Cela peut être des viandes rouges. Et bien sûr, on peut en avoir un ici qui dit, et on peut s'arrêter. On peut voir que ça prend plein et qu'il prend forme et qu'est-ce qui se passera ? Eh bien, rappelez-vous que quand un utilisateur clique sur le taux et mange, nous voulons une autre structure anti et moins à afficher. Donc, dans la liste répond, nous voulons une autre étiquette UL et nous pouvons avoir alla, liste des articles de viandes rouges. On peut écrire du boeuf, de l'agneau et de la POLQA. Est-ce que ce regard maintenant vous allez et nous voulons à peu près faire exactement la même chose pour les autres. Nous sommes allés à une liste non ordonnée et à l'intérieur, nous avons gagné trois articles de liste. un ou l'autre peut être du poisson, du poulet, et disons la dinde. Cool, je sais que ça devient un peu bizarre, toutes ces listes et listes non ordonnées. Mais passons à autre chose. On va presque, presque fini. On peut faire la même chose avec les outils de base. Rester en dessous du visage aux taupes. Nous voulons également des sous-titres. Nous pouvons avoir une liste non ordonnée et les deux sous-titres que nous voulons plus délicieux et nous pouvons avoir les chanceux. Et ce sont juste à l'opinion de Hamline par la façon, lesquels sont délicieux et quels sont ses tantes dans délicieux, bien sûr, nous avons besoin d'une autre étiquette UL et la, nous pouvons avoir nos articles de liste réels. Eh bien, quels sont des légumes vraiment délicieux ? Vais-je aimer les pommes de terre ? Et j'adore les asperges. Quoi d'autre ? Dis un mensonge. J'aime les pois. Maintenant, il est temps de prendre forme. Et puis, bien sûr, sur les yucky, on veut faire exactement la même chose. Nous voulons une liste non ordonnée avec des éléments de liste sous chacun. Tout d'abord, je n'aime pas vraiment les choux de Bruxelles, même si j'étais avec des pousses en forme. Et il a fait le processus le plus délicieux. Et je n'ai plus eu ça. Je vais mettre des choux de Bruxelles. Non, merci. Il suffit de mettre deux autres. Mettons du chou frisé juste pour argumenter. Et je n'aime pas les champignons pour une raison quelconque. Champignon est disponible. Pas sûr. C'est juste le mettre ici. Alors on y va. Voici notre configuration générale. Nous avons nos articles de liste, nous avons nos listes. Je vais listes non ordonnées. Et nous avons notre étiquette UL ultime avec un identifiant de nourriture. Et ce sera ce qui écoute tous nos WikiLeaks. On y va. Prenez une profonde respiration. Nous avons fait notre HTML. Mais bien sûr maintenant, quand on clique sur tout ça, rien ne se passe. À quoi je veux que tu penses, comment tu le recueilles ? C' est assez délicat. Je ne veux pas que vous vous souciez du style de ces éléments de liste dans une liste non ordonnée. Ne vous inquiétez pas pour ça. Réfléchissez à ce que nous essayons d'apprendre ce que nous avons appris sur les bulles d' événements, la délégation d'événements et comment nous pouvons travailler avec ce genre de concepts pour créer des effets très cool et créer une meilleure expérience utilisateur. Alors réfléchis, amuse-toi. Et dans l'image suivante va couper la solution ensemble. Voyons voir maintenant. 31. Défi de la liste - Solution: Qui as-tu donné un coup de pouce ? Je l'espère. Mais de toute façon, nous y voilà. Je ne vais pas te garder. Je vais juste passer à travers la solution très, très rapidement et expliquer chaque étape en cours de route. Alors comment on fait ça ? Cela peut être un peu délicat, mais vous savez comment, ça va vous surprendre à quel point la solution est vraiment simple. Voyez me faire défiler ici. La première étape, bien sûr, est que nous devons inclure notre balise de script. Nous remarquons, et nous voulons utiliser des événements bouillonnants et même délégation. Et ce que cela signifie, c'est que nous voulons écouter nos veines sur une certaine section et notre page. Mais nous voulons écouter cet événement d'un seul élément, non ? Parce que nous savons contre Babylone. Et c'est exactement pourquoi nous avons enveloppé tout dans cet élément de liste non ordonné avec un identifiant de nourriture. Donc, la première étape est, comme vous l'avez deviné, nous devons accéder à cet élément entier. Et nous le faisons en utilisant document get element par ID, que nous avons donné un ID de nourriture. Et comme je suis sûr que vous l'avez déjà deviné, l'étape suivante consiste à accéder à cette variable que nous venons de créer. Nous voulons ensuite exécuter une méthode appelée addEventListener. On écoute un événement click, non ? Et quand cet événement est déclenché, qu'est-ce qu'on veut faire ? Eh bien, nous voulons montrer ou cacher quelque chose de pourri. Donc, pour danser, distribuer et appelons-le montrer ou se cacher. Et la dernière étape consiste à définir cette fonction de gestionnaire. Nous le faisons en utilisant le mot-clé de fonction JavaScript, et nous l'avons appelé Show Hide. Et nous y voilà. La viande et les cœurs de notre code sont dans cette fonction. Ok, alors qu'est-ce qu'on veut se passer ? Défilons vers le haut et Nakoda. Jetons un coup d'oeil à cette viande serait, quand nous cliquons sur les rencontres, ce qui se passe. Nous allons jeter un oeil à ses environs. Nous savons et quand je clique sur les rencontres, alors au lieu de cela, nous sommes allés viandes rouges et autres pour s'effondrer. Ne lis pas. La première chose que je peux remarquer cependant, Cette réunion est sur une étiquette LI. Dit la première chose. La deuxième chose est, oui, nous pouvons réduire chacun de ces alliés en dessous, mais il est plus efficace de simplement réduire la balise UL, l'élément UL dans cette balise LI ? Parce que j'ai du sens. Ok, cool. Qu' en est-il des viandes rouges va lire nous rencontrer la même chose lorsque nous cliquons dessus et remarquons que c'est sur une étiquette alliée et que nous pouvons simplement réduire l'élément UL en dessous. Et lorsque vous faites défiler vers le bas, vous remarquerez que tous les autres éléments fonctionnent la même manière et doivent être sur une balise alliée. Et puis nous devons trouver ses éléments en dessous et ensuite cacher ça. Alors comment on fait ça ? Tu verras que ce n'est pas si difficile. La première chose est toujours que nous devons obtenir la cible, nous devons obtenir l'automatique devrait déclencher l'événement. Donc, définissons une variable appelée cible. Accédez à notre objet événement. Et rappelez-vous que nous le faisons en la mettant dans une variable appelée e. et qu'elle a une propriété appelée tolérance. Alors on y va. On a notre cible veineuse. La première vérification que je veux faire est que je veux vérifier si c'est un technicien allié. Et nous l'avons déjà fait, donc vous savez comment le faire, mais nous pouvons accéder à notre cible. Il a une propriété de nom de balise. Et nous voulons que ce nom soit une étiquette alliée, non ? Et si cela arrive, nous savons qu'alors nous pouvons exécuter notre fonction de gestionnaire Qu. Et que voulons-nous que notre fonction de gestionnaire fasse ? Rappelez-vous que nous voulons que notre fonction de gestionnaire vous cache ou vous montre notre élément. Donc, définissons une autre variable et appelons que l'UL, mettez l'URL que nous voulons afficher ou cacher. Oh, c'est un nom horrible, mais c'est juste ce à quoi je pensais maintenant. Et maintenant assignons ça à deux. Quelle valeur ? Eh bien, allons accéder à notre cible. Notre cible sera si on coche les méchants, ce sera cette étiquette LI Rochester. Nous voulons y accéder et ensuite nous voulons interroger, sélectionner tous ses éléments en dessous, n'est-ce pas ? Pour que nous puissions accéder aux cibles. Nous pouvons ensuite accéder au sélecteur de requête de méthode, sélecteur de requête, et nous voulons obtenir tous les éléments UL. Jusqu' à présent, si bon. Mais si nous travaillons maintenant juste avec cette variable, que se passe-t-il quand on clique sur, disons ceci, je prendrai du chou frisé. Eh bien, vous seriez d'accord avec moi que, vous n'existez pas tous dans cette balise LI. Donc ce sera indéfini. Donc, la vérification des pertes que nous devons faire est qu'il suffit de dire si elle existe, alors si elle existe, nous savons qu'elle ne sera pas indéfinie. Donc, nous pouvons juste dire s'il existe et comment nous pouvons exécuter notre code. Que voulons-nous qu'il fasse ? Comment pouvons-nous cacher que vous, je vais prendre, bien les nombreuses façons d'écorcher un chat quand il s'agit de programmation. Mais pourquoi ne pas ajouter un cours ? Et cette classe peut avoir une propriété dans sa propriété d'affichage, qui peut simplement être enregistrée pour masquer. Et on peut juste activer et désactiver ça. Laissez-moi vous montrer ce que je veux dire. Alors passons à notre HTML en haut. Cela inclut une section de tête à l'intérieur de cela, un élément de style. Et ajoutons juste une classe appelée Hyde. Et comme je l'ai dit, il a une propriété d'affichage et nous pouvons juste avoir une valeur de zéro. Aujourd'hui, nous allons, nous avons défini une nouvelle clause. Donc, tout au fond, nous savons que tout s'est passé selon le plan. Nous pouvons accéder à notre nouvelle variable. Nous pouvons ensuite accéder à sa propriété de liste de griffes. Rappelez-vous, nous avons fait cela dans des conférences précédentes, mais maintenant il y a une autre méthode appelée toggle, et c'est très pratique et son nom le donne qui bascule littéralement, en ajoutant et en supprimant une classe. Et la classe que nous voulons basculer, bien sûr, c'est l'équipage de la classe haïda. Vérifions simplement si cela fonctionne. Cliquons sur les rencontres. Alors que ces problèmes prennent à nouveau des fuites, nous allons cliquer sur d'autres. Ouvrons les légumes. Cliquez sur les touches Anya. Les viandes rouges, les viandes, les légumes. Règle. C' est amusant. Et j'espère que vous avez appris une tonne dans cette conférence sérieusement. Et parfois il suffit de prendre du recul et de le parcourir étape par étape. Tu te souviens de ce qu'on a fait Revenez à notre code ici, nous définissons notre délégation d'événement étant sur cet énorme élément de hibou en haut, parce que nous savons que seules les veines ne cliqueront pas les événements auront dans une bulle à travers elle. Nous voulions alors écouter les veines chatoyantes. Et enfin, quand cet événement se produit, nous voulions exécuter une fonction et nous appelons simplement cette fonction show ou hide. Le Afficher, Masquer vérifie simplement que l'élément sur lequel nous avons cliqué est en fait sur une balise LI parce que nous ne voulons pas que les choses se cachent et s'affichent lorsque nous cliquons aléatoirement sur une page, doit être OK. On a vérifié que ça devait être une étiquette alliée. Nous avons ensuite dû vérifier qu'il a en fait ces énormes éléments de hibou en dessous. Et si c'est le cas, nous voulons faire prêter serment à cette classe, cette classe de VIH. Donc, nous l'avons là. Espérons insérer à l'époque, j'espère que vous vous amusez. Et je te verrai à la prochaine conférence. 32. Cours Outro: Bravo, mes chers étudiants. Bien joué. Vous venez de terminer ce cours génial sur des concepts très avancés. Je pourrais ajouter une hiérarchie de noeuds ou une hiérarchie d'objets, événements capturant n'importe quelle veine publique, c'est alors si vous commencez vraiment à maîtriser le donneur, et je dois dire, toute cette série de cours a conduit à ce moment parce que dans la toute prochaine classe, dans la dernière classe de la série, je veux que nous appliquions toutes les techniques, toutes les connaissances que nous avons apprises dans ce cours. Et de l'or, un vrai live avec eux. Tu entends ces oiseaux ? C' est ce qu'on appelle Hadi. Est-ce qu'ils sont beaux. Humming dans tenace maintenant venir en belle Maintenant où il était, oui, nous commençons un projet génial dans la toute prochaine perte où nous allons appliquer beaucoup des techniques que vous avez appris pour construire un chemin de fer en arrière. Vous allez ajouter des choses dynamiquement au DOM. On va retirer des choses du DOM. Nous allons permettre à un utilisateur de rechercher des objets dans le chien qui va être fascinant et aussi cacher des éléments dans le DOM. Ça va être génial. Alors j'appelle blanc, restez avec moi. Tu n'as qu'une centaine à faire. Ce serait une honte si tu t'arrêtais maintenant. Merci pour tout votre soutien. Faites l'affectation. C'est une mission amusante. n'y a pas de bien ou de mal rarement parce que c'est un système d'honnêteté. Tu dois juste passer la mission, répondre aux questions, et puis je te verrai, mes chers élèves dans la classe suivante.