Documentación de la serie de modelo de objeto 2023: parte 5: jerarquía de eventos, captura y burbujeo

1. Introducción a la clase: capturar y bursar: Bienvenidos, bienvenidos, bienvenidos a otra clase muy emocionante y toda una serie sobre el DOM, el Document Object Model. Yo soy Clyde, voy a ser tu instructor y la pérdida de Gerst va a ser muy avanzada. Pero no te preocupes, si eres nuevo en el desarrollo, explicaré lo básico. Pero si eres un desarrollador nuevo y no me has estado siguiendo en mis otras clases anteriores. Yo sí los animo a hacer los primero porque todos se acumulan entre sí para llegar a este punto, poniendo que todas las partes son ¿de qué se trata esta cláusula? Bueno, voy a dar un paso atrás. Ya sabes que los diferentes objetos en el DOM, ¿no? Tenemos objetos nativos y tenemos objetos JavaScript, que son diferentes entre sí. Y todos tienen propiedades y métodos propios. Estas propiedades y métodos vienen como resultado de lo que se conoce como herencia. Y es muy importante que entiendas esta estructura jerárquica, razón por la cual en esta clase voy a empezar explicando cuál es la estructura jerárquica y a qué me refiero por herencia. Pero después de eso, discutimos dos conceptos muy, muy importantes cuando se trata de eventos. Recuerda en la clase anterior discutimos eventos, mucho detalle. Bueno, estarían de acuerdo conmigo los eventos tipo que tienen que venir de algún lugar, ¿verdad? Bueno, esa es alguna manera se conoce como captura de eventos. Tiene que empezar de alguna manera y viajó hasta el elemento que desencadenó ese evento, ¿verdad? Si es un botón, representa una etiqueta div, por ejemplo, vayamos a viajar todo el camino hasta el final del día. Eso se conoce como captura de eventos. Por otro lado, en la otra cara de la moneda, tenemos burbujeo de evento. Y ese es un concepto que los eventos burbujean hasta el árbol DOM y por eso es importante saber sobre navegar por el DOM, que también hemos cubierto en una clase anterior. Entonces realmente este curso va a ser pesado. Se lo voy a explicar a un nivel muy, muy divertido y muy intuitivo. Entonces no te preocupes si no has seguido raramente en otras clases, a menos que realmente estés empezando. Y sí los animo a que tal vez paren esto ahora mismo y luego regresen a disfrutarlo. Pero si has seguido a lo largo de las calificaciones pero continuando, si eres bueno con el desarrollo, Genial, vas a aprender algo nuevo. De verdad conflicto. Vamos a estar recortando ejemplos prácticos. Te voy a estar dando retos. Eso va a ser bastante honesto con tus audios de alumnos. Y te veré en los filtros líticos. 2. Objetos en JavaScript vs. objetos DOM: Esta va a ser una sección increíblemente interesante, bastante avanzada o puede terminar. Y antes de empezar a saltar a complicadas discusiones sobre jerarquías y prototipos, quiero saltar a la consola. Yo quiero mostrarles por qué prácticamente se puede convertir en algo importante. Y lo que quiero hacer es que quiero hacer dos cosas. Ahora. Quiero crear un objeto JavaScript y acceder a su prototipo. Y quiero crear un objeto DOM y acceder a su prototipo. Por cierto, si no estás muy seguro de lo que es un prototipo, un entrar en mucho detalle en mi curso de gran maestro completo de JavaScript. Por lo que por favor echa un vistazo si te interesa. Si sabes qué son los prototipos, genial, podrás seguir adelante. Si no estás del todo seguro y no quieres hacer mi curso desecado para simplemente Google rápidamente. En resumen, el prototipo es sólo una especie de periodo del que se hereda algo. Entonces si un objeto no tiene esa propiedad funcional exacta estás tras pases bastante va a trabajar su camino hasta la cadena de prototipos para tratar de encontrarlo hecho poca propiedad que eres a menudo. Entonces de todos modos, aquí estamos en un navegador de aviones. Todo lo que quiero hacer es abrir la consola y sólo quiero codificar dos cosas ya que estoy lesionado muy, muy rápido. Vayamos a la consola. Simplemente atracar esto en una ventana nueva. Ahí vamos. Y ahora empecemos a codificar. Y déjame acercar aquí sólo para que sea más fácil de ver. De acuerdo, entonces lo primero que voy a hacer es crear un objeto JavaScript. Y esto define objeto es perro. Y podemos decir que este perro va con bastante simple, ¿verdad? Pero alguna vez te has preguntado por qué tenemos un montón de propiedades y métodos directamente de la caja. Por ejemplo, podemos acceder a nuestro objeto perro y mirar todas estas propiedades y métodos. Son una tonelada de ellos. Entonces, por ejemplo, podemos acceder a mayúsculas. Eso lo ejecutamos, y por supuesto nos dan lobo, pero ahora todo en mayúsculas. ¿ Por qué es esto? Bueno, el punto de partida es entender los prototipos. Si accedemos a nuestro objeto perro y miramos su prototipo. Y nos encantó esto fuera a la pantalla. Obtenemos este objeto string. Ahora el objeto string es nativo de Javascripts. Y si abrimos este objeto, tiene un montón de propiedades y métodos, por supuesto, a los que este perro tiene acceso. Entonces si nos desplazamos hacia abajo, deberíamos ver dos mayúsculas. Y ahí está, dos mayúsculas. Entonces por eso tenemos ciertas cosas a nuestra disposición directamente de la caja. Y esto es, como mencioné, JavaScript. Pero ahora vamos a crear un objeto DOM, lo define en una variable llamada p, y en esta instancia enumera xs. Voy a documentar objetos y leads crea un elemento. Sabrás por la parte 1 que se trata de un método DOM API create element. Tan genial, ¿verdad? Acabamos de crear nuestro objeto. Pero ahora si intentamos acceder a nuestro objeto de párrafo, y de nuevo intentamos y ahora ejecutamos la misma función que hicimos con perro. Obtenemos un error de tipo a mayúsculas no es una función. ¿ Qué hay en este tipo de raro? Volveremos a banco empinado. Echemos un vistazo a su prototipo. Por lo que accedemos a nuestro objeto y miramos su prototipo. Eso es interesante. Podemos ver aquí el prototipo no es cadena. De hecho, su prototipo es el elemento de párrafo HTML. Y si abrimos esta app, podemos ver que tiene un montón de otras propiedades y métodos diferentes a los que creamos en JavaScript. ¿ No es eso interesante? Entonces, antes de seguir adelante, quería que solo tuvieras una sensación de por qué todo esto se vuelve importante. Tenemos que empezar a entender la forma en que las cosas vienen de fin. Tipo raro de encaja. Y realmente se puede decir eso en términos generales, dos tipos diferentes de objetos. Tenemos estos objetos JavaScript, que verás en la próxima conferencia se llaman objetos nativos. Y también tenemos este otro objeto, llámalo un objeto host que nos proporciona el host, en este caso el navegador. Pero yo sólo regalaría demasiado. Te veré en la próxima conferencia. 3. Anfitrión vs. objetos nativos: Antes de pasar a discutir jerarquías y cómo funciona todo eso, necesitamos entender la diferencia entre los objetos nativos y los de host. Y lo mencioné brevemente en la conferencia anterior, pero quiero ampliar un poco más ahora. En mi curso completo de gran maestro JavaScript, cubrimos prototipos a detalle, así que por favor echa un vistazo si no estás seguro. Pero dejando a un lado los prototipos, no quiero que te confundas entre objetos JavaScript y objetos DOM. De manera sorprendente, no hay mucha información sobre esto en la ola. Eso es realmente difícil de conseguir, pero sin estrés. Precisamente por eso estoy aquí. De acuerdo, entonces ¿por dónde debemos empezar? Sabemos que cada nodo en el DOM heredan métodos y propiedades de su nodo principal. Y si quieres hablar en lenguaje JavaScript, solo podríamos decir que cada objeto en JavaScript hereda métodos y propiedades de su objeto padre. Es lo mismo. Y cuando se trata de JavaScript, casi todo es un objeto. No es del todo cierto. No todo en JavaScript es un objeto, pero casi todo lo es. Y es lo mismo en el DOM. Más o menos todo en el DOM es un nodo. El punto que estoy tratando de hacer es que cada objeto o cada nodo contiene una propiedad privada que contiene un enlace a su prototipo. Y vimos que podíamos acceder al guión bajo, subrayado proto, bajo escuela de despilfarro con el fin de ver su prototipo, cada objeto y nodo individual tiene esta propiedad. O una marea alta. ¿Cuál es tu punto? En pocas palabras, punto que estoy tratando de hacer es que un nodo es un término genérico para cualquier tipo de objeto en el DOM. Y sabemos cuando se trata de JavaScript y objeto es un tipo de datos complejo. Entonces todo se reduce a esto. Podemos ahorrar en que son tipos de objeto país. Y veamos estos dos tipos de objetos. Seguro que ya lo has adivinado. Tenemos un tipo de objeto nativo y tenemos un tipo de objeto host. Bueno en primer lugar, veamos este objeto nativo. Se trata de objetos predefinidos de núcleo que siempre están disponibles en JavaScript. Y muy importante, estos objetos de asiento fuera en la especificación de script ECMO, gente simplemente lo llama el spake. Por lo tanto, recuerda que un objeto nativo está completamente definido por la especificación del script en lugar de por el entorno host o agua IDE. Algunos ejemplos de objetos nativos, incluyen cosas como objeto, función, cadena, desorden, booleano, ex cetera, etcétera. Son muchos de ellos en JavaScript. Pero ahora volvamos a nuestro ejemplo. Acabamos de codificar para conseguirlo. Recuerda definimos una variable llamada perro y asignamos eso a la cuerda WAF. Y si usamos el tipo de operador de JavaScript y pasamos en el perro, ¿qué nos va a devolver? Bueno, vimos que cuando existimos Es prototipo. Era una cuerda. Y sí, este objeto perro es un objeto nativo. Podrías argumentar al cliente, el guión ECMO hablar no define nuestra variable de perro y tienes razón, pero este perro sigue siendo un objeto activo con una clase interna de cuerda. Y esa cadena está definida por la especificación de script ECMO y un ojo de mosca. Algunas personas desglosan objetos en tres amplias categorías. Otro siendo un objeto de usuario. Y dicen que este perro es un objeto de usuario, pero como que veo el desorden de la mano, un objeto de usuario y un objeto nativo de muy, muy cerca. Y por eso estoy diciendo que este objeto perro es un 1.5 nativo. Deshaznos de eso y pasemos al segundo tipo de objeto, y eso son los objetos host. En su núcleo, un objeto host es proporcionado por un entorno específico con el fin servir un propósito específico a su entorno que no está definido por la especificación. Y muy importante ahora nos debe conseguir, no todos los entornos tienen los mismos objetos host. Por lo tanto, si JavaScript se ejecuta fuera del navegador, por ejemplo, si se ejecuta como un lenguaje de scripting del lado del servidor en un entorno como Node.js, estarán disponibles diferentes objetos host. Por ejemplo, los objetos de host en Node.js o HTTP, HTTPS si S, matrices de URL, etcétera, etcétera. Pero sabemos cuando se trata del navegador, nuestros objetos host son muy diferentes. Tenemos la ventana, tenemos los documentos, tenemos el historial, tenemos la solicitud HTTP XML, et cetra, et cetra. ¿ Y qué es otro ejemplo de un objeto host? Codifica un pequeño ejemplo aquí. Digamos que definimos una variable P y utilizamos uno de los métodos de eje en el DOM para recuperar ese elemento. Aquí utilizamos un método llamado getElementsByTagName. Y en la parte uno de la serie, sabes muy bien que este es un método DOM API y nos devuelve una lista de nodos. El punto que estoy tratando de hacer es que este elemento de párrafo puede sentirse como un objeto JavaScript normal. Pero no se donó en su totalidad. Usted objeto referenciado por nuestra variable p es una lista de nodos. Y una lista de nodos no se define de ninguna manera en la especificación del script. Entonces sabemos que lo que nos devuelve este getElementsBytagName es un objeto host. ¿ Hace eso un poco haciendo escenas que concentra o una mano recuperándose mucho. Pero sigamos adelante. Deshacernos de eso, deshacernos de todo ese ruido. Y ahora quiero que hablemos del objeto de ventana. El objeto de ventana nos es proporcionado por el navegador, por el host. Y lo que realmente es genial de este objeto de ventana es que nos da acceso a cosas como el DOM, la bomba, y permite que JavaScript se ejecute dentro de él. Es importante destacar que todos los navegadores web admiten el objeto de ventana. Y este objeto de ventana es nuestro objeto raíz. Nos lo da el navegador. De acuerdo, entonces, ¿cuáles son algunos de los objetos host dentro del DOM? Ya hemos visto algunos de ellos en este curso. El más común que has visto es este objeto de documento. Este objeto hace referencia al contenido HTML o XML que se muestra en la ventana del navegador. Pero tenemos muchos otros objetos que nos proporciona el DOM, como el objeto de evento, la consola, el objeto nodo, incluso el objeto elemento de párrafo HTML que vimos en el ejemplo anterior, cetera, etcétera. Hay una tonelada de diversión. También tenemos bombardero, navegador, objeto, objetos modelo, ¿no? Cosas como marcos de historia de pantalla, el navegante, etcétera, etcétera. Y por último, tenemos objetos JavaScript nativos. Todos esos objetos verdes, o lo que nos referimos como objetos JavaScript nativos, cosas como el objeto y el número, fecha, cadena, Situ, etcétera. De acuerdo, antes de que acabemos, tal vez te estés preguntando Clyde, ¿cuál es la diferencia entre el DOM BOM? En primer lugar, quiero decir que podemos argumentar que el anfitrión, aka nuestro navegador, nos ha proporcionado acceso a todos los DOM y a los objetos bomba directamente de la caja. Y por esta razón estos objetos se conocen como objetos host. ¿ Cuál es la diferencia real entre el DOM y la bomba? Will en la primera parte de este curso, usted aprendió que el DOM es un asiento estándar y mantenido por el World Wide Web Consortium o W3C para abreviar. Y definen cómo los navegadores debemos interpretar un documento HTML o XML. Por lo que se podría decir que el DOM está gobernado por un organismo específico. ¿ Y la bomba, el modelo de objetos del navegador? El BOM define cómo los navegadores manejan la vista en algunas otras propiedades de un documento en contraposición a su contenido, que es principalmente lo que cubre el DOM. Zai Maxine. Un punto muy importante a hacer aquí es que a diferencia del DOM, la bomba no es un estándar establecido por ninguna organización. Entonces es algo así como un enfoque que usamos como programadores. Nos permite aprovechar el hecho de que todos los navegadores web soportan ciertos objetos y métodos relacionados. Pero de todos modos, solo quería dejar eso a un lado solo para que entiendas una especie de cómo estoy agrupando DOM y bomba en objetos host y por qué estoy agrupando JavaScript en una categoría separada todo por sí mismo referido como objetos nativos. Y sabemos que JavaScript se rige obviamente por una organización que AIG debe guiar especificación para ser específica. Y todos sus objetos están definidos por esa organización o por esa especificación. Y es por eso que podemos separar el nativo frente al anfitrión. Espero que esta conferencia haya hecho de las escenas un sentimiento feliz, mucho más cómodo con el alma. Pero no te preocupes, vamos a estar entrando en más detalle en próximas conferencias. Y ahora quiero que saltemos al alto Aki. Yo quiero que nos enfoquemos en estos objetos host porque de nuevo, esto se trata todo este curso. Estamos sobre el DOM, cómo manipular el DOM, cómo hacer que tus páginas sean más dinámicas. Y por supuesto, para poder hacer eso, tenemos que trabajar con nodos. Y los nodos, como acabamos de mencionar, son los objetos DOM y estos son objetos host. Y por eso quiero enfocarme en objetos anfitriones, albergues frescos, hacer santos. Y nos vemos en la próxima conferencia. 4. Herencia: Ya es hora de mirar la jerarquía de los nodos. Entender la jerarquía de nodos nos permitirá entender cómo los nodos obtienen todos los métodos y propiedades. este momento, sabemos que el DOM tiene todo un montón de objetos nodos de slash que nos dan directamente de la caja. Y también sabemos que estos objetos de nodo, conocidos como objetos host, o diferentes a JavaScript u objetos nativos. futuro, quiero concentrarme ahora solo en los objetos del nodo host. A pesar de que muchos de estos conceptos de los que vamos a estar hablando se aplicarán igualmente a los objetos nativos de JavaScript. De acuerdo, entonces, ¿cuál es el punto de partida? ¿ Qué necesitamos aprender? Bueno, el conjunto completo de propiedades y métodos de un nodo viene como resultado de algo conocido como herencia. Herencia, el paso de titulado a una finca al morir. No estoy hablando de herencia legal. Hablo de herencia DOM. Simplemente significa que algunos objetos de nodo por defecto heredarán valores, también conocidos como propiedades y métodos que están de estado en su objeto principal. Hace escenas económicas. Es todo lo que significa herencia. Pero con el fin de entender un poco más la herencia, Echemos un vistazo a la manera como el método simple viene de. Entonces en este momento no quiero mirar un objeto de nodo. Odio que sólo quieras ser aún más simple. Quiero mirar un método sencillo. Sabemos que para crear movimiento modificador o exceso de elementos, siempre hay que empezar por la raíz. Tenemos que acceder al objeto del documento. Por ejemplo, para crear un elemento de párrafo, tenemos que escribir documento punto crear elementos, y pasamos en el límite que queremos crear. Aquí queremos crear un párrafo. La pregunta que tengo para ti aunque es forma hace este método, esto crea, elimina admitido, viene de ti podría estar pensando que proviene del objeto documento, ¿no? Porque accedemos a los documentos y existimos un método en él llamado create element. Bueno, la respuesta puede sorprenderte. Saltemos a la consola y tratemos de encontrar. Esto crea elementos juntos. 5. Encontrar el método createElement(): Muy bien, Vamos a encontrar este método de creación de elementos. ¿ Podríamos ser? Bueno en primer lugar, acceda a nuestra consola. Y vamos y sólo hagamos de esto una página de tamaño completo. Y tratemos de encontrarlo. Significa Rumania, para que puedas ver un poco mejor. Bueno, en primer lugar, permítanme empezar con la solución más obvia. Si solo intentamos acceder a nuestro objeto ventana y abrimos este objeto ventana, realmente puedes ver si ordenamos alfabéticamente, no hay ningún método de creación de elementos. Entonces sabemos que no está en el objeto de ventana. Y esto tiene sentido. Ya sabemos cuando accedemos a este método crea elemento. Empezamos en el objeto de documento. Entonces veamos ahora el objeto de documento. Yo solo quiero consola HDR, el documento de la ventana. Por lo que estos son objeto de documento representado en formato JSON como. Justo si no tuviéramos que acceder a la ventana para poder acceder al documento. De forma predeterminada, todos los objetos o métodos globales están disponibles sin usar la ventana de palabras clave. Por lo que en realidad podríamos haber ido a consolar el documento. Eso es sólo un poco como si lo estuviéramos, si abrimos este documento y tratamos de buscar el método create element. Te darás cuenta aquí que no podemos encontrarlo. ¿ Podemos saberlo para ser visto? Algo rápido que podemos hacer es ir Controlar a y solo podemos intentar encontrarlo en la parte inferior, pero escribiendo en crear elemento, y no es en ningún lugar donde se encuentre. No se puede encontrar. Entonces eso es bastante interesante. Entonces ahora no está en el objeto ventana, eso no está en el objeto documento. Bueno, ¿dónde está? Vamos a tener que empezar a mirar la herencia. Y para hacer eso, podemos mirar el prototipo de documentos, aka podemos mirar la forma en que es el padre más inmediato. Entonces si abres nuestro objeto de documento y nos desplazamos hacia abajo, verás que tenemos Es prototipo en ser este documento HTML. Y si abrimos ese prototipo, el objeto documento HTML, de nuevo, podemos ver que el método de creación no está aquí. Entonces vayamos a su prototipo, ese HTML determine prototipo. Y aquí obtenemos otro llamado documento, pero esta vez un D. mayúscula Pasamos por esto a detalle en la Parte 1 de este curso. Pero de todos modos, abramos ese objeto. Y la buena noticia es, si nos desplazamos aquí abajo, y aquí son Mis queridos alumnos los que crean método de elemento. Entonces mi punto sobre la herencia es este, cuando el analizador se encuentra con nuestro método create element en el objeto documento, el pequeño d que puedo agregar, no está ahí. El analizador tiene que entonces trabajar su camino arriba en la cadena de prototipos. Y eventualmente va a encontrar este método create element en el abuelo del objeto documento, este gran objeto de documento D, y así es como funciona la herencia. El objeto documento hereda el método create element del objeto big D document. ¿ Quién, quién no es ese? ¿ Impresionante? Espero que te diviertas. Espero que estés aprendiendo mucho en esta serie de cursos. La suma de estas cosas está muy avanzada. Mal, sólo estamos empezando. Y empezamos con un ejemplo muy sencillo. Miramos el objeto de documento dentro del DOM, y lo seguimos todo el camino hacia arriba con el fin de encontrar de dónde viene uno de sus métodos, Henry encontró que estaba en su abuelo. Te lo puedo demostrar, pero yendo documento, podemos mirar su tipo proto, que es ese HTML. ¿ Recuerdas ese documento? Y podemos mirar su prototipo. Y ese debería ser el gran D, el documento. Y sabemos en esa gran D en este objeto de documento, de ahí salió el método. Entonces este fue un ejemplo muy específico, uno muy sencillo. Pero ahora quiero alejarme del objeto documento en el DOM. Y quiero mirar un objeto de nodo específico dentro del DOM. Y quiero seguir ese nodo objetos jerarquizan la cadena de prototipos para que podamos entender mejor el DOM. Va a ser muy, muy interesante. Entonces los veré en la próxima conferencia y empecemos a mirar ahora las jerarquías de nodos. 6. Jerarquía de nodos: De acuerdo, te sigo diciendo en y miro la jerarquía de nodos y seguimos retrasándolo ya no. Vamos a meternos en ello ahora mismo. Empecemos por crear un elemento de párrafo muy simple con un abdominal. Sabemos que esto va a ser un objeto DOM. Espera, espera, espera, espera, espera. ¿ Cómo sabemos que es un objeto DOM? Déjame mostrarte. Muy bien, entonces ¿cómo sabemos que nuestro elemento de párrafo es un objeto DOM primero lo que quiero hacer es definir una variable llamada párrafo y es crear uno. Por lo que documento crear elementos. Y queremos crear un elemento de párrafo, ¿no? Todo lo que necesitamos hacer para determinar su tipo de objeto como qué modelo. La forma más fácil que se me ocurre es que podemos alertarlo a la pantalla. Y podemos ver aquí que el artículo devuelto es un objeto. ¿ Y qué tipo de objeto es? Se trata de un elemento de párrafo HTML, objeto. Y cuello, mis queridos alumnos es un objeto DOM. ¿ Cómo sabemos que es objeto DOM? Sabrá que suena un poco extraño, pero sabemos que es objeto DOM porque no es un objeto JavaScript. Por ejemplo, si definimos una nueva variable llamada objeto, y solo usamos las llaves, hay muchas formas diferentes de crear un objeto en JavaScript. Por cierto, esta es sólo una de ellas. Es forma muy rápida de hacerlo. En realidad es muy similar, si no lo mismo que llamar a nuevo objeto. Y simplemente lanzamos nulo como su prototipo. Eso es todo lo que hace. Los tirantes rizados están haciendo. Entonces ahí vamos. Tenemos un objeto. Y si alertamos a este objeto, ¿qué vamos a ver? Bueno, ahí vamos. Sabemos que es un objeto y sabemos que es de tipo objeto con una O. grande Y ese objeto O es un objeto JavaScript ¿quién? Entonces acabamos de demostrar que ese párrafo que acabamos de crear Es un objeto DOM. Está bien, genial. Entonces tenemos nuestro párrafo, sabemos que es un objeto DOM. Empecemos a trabajar nuestro camino hasta la estructura jerárquica. Su prototipo va a ser, en esta instancia, el elemento de párrafo HTML. Whoa, whoa, whoa, whoa. ¿ Cómo sabemos que su prototipo es el elemento de párrafo HTML? De nuevo, déjame simplemente saltar rápidamente a la consola y mostrarte. De acuerdo, ¿cómo sabemos que el prototipo de este párrafo que hemos creado es el elemento de párrafo HTML. Será todo lo que tenemos que hacer es acceder a nuestro objeto de párrafo. Y por supuesto tenemos que acceder a su prototipo. Y ahí vamos. Es prototipo es este elemento de párrafo HTML. Genial, espero que tenga sentido. Ahora, el elemento de párrafo HTML también tiene un prototipo, y su prototipo es el objeto elemento HTML. Estoy seguro de que ahora te estás quedando con esto, pero ¿cómo sabemos que el elemento de párrafo HTML tiene un prototipo de elemento HTML? Si bien las dos formas en que podemos averiguarlo, las primeras y más fáciles maneras de abrir este objeto elemento de párrafo HTML. Y por supuesto podemos ir hasta el fondo y podemos mirar su protón. Y ese protón es el elemento HTML. La segunda forma en que podemos hacerlo si no quisieras abrirla ya que pudimos acceder a nuestras probabilidades de prototipo, el objeto de párrafo que hemos creado. Y entonces podemos mirar su propiedad prototipo. Y por supuesto obtenemos el elemento HTML. Espero que esto tenga sentido. Volvamos a la conferencia. Creo que estás sacando el punto ahora cómo encuentra los prototipos. Entonces no voy a seguir mostrándote con los prototipos que vienen de. Simplemente puedes tomar mi palabra para ello, pero te animo mucho a que vayas y te revises. Es un ejercicio que vale la pena. Entonces sigamos con este ejercicio. El elemento HTML también tiene un prototipo. Es prototipo va a ser el elemento objeto. Su prototipo va a ser el objeto nodo. Es prototipo va a ser el objetivo del evento. Y ahora esto es interesante. Agárrate a cambio. El prototipo definitivo es el prototipo de objeto. Y lo que es fascinante es que este prototipo de objeto proviene de JavaScript. Es el prototipo de objeto JavaScript. Y si y en caso de que te estés preguntando, el prototipo del objeto en sí es nulo. Entonces significa que este objeto, y lo que es súper interesante, lo que te va a volar la mente es que esto significa que si solo miras esta estructura de alto nivel, significa que nuestro objeto DOM en esta instancia también es un Objeto JavaScript. Sé que puede ponerse realmente confuso y puede parecer así. Y por eso los dos están tan estrechamente entrelazados, están tan estrechamente relacionados. Entonces solo recuerda en el contexto del navegador, los objetos DOM también son objetos JavaScript debido a esta estructura jerárquica. Y por supuesto lo recíproco no es cierto. Los objetos Javascript no son automáticamente objetos DOM. De acuerdo, ¿Pero por qué tenemos todos estos tipos diferentes de objetos? ¿ Qué está pasando? Sí, bueno, empecemos por lo más alto. Tapas enseñadas en este evento objetivo objeto primero, este objetivo de evento es el objeto raíz y sirve como. Base para todos los nodos. En otras palabras, engañar objetivo permite que todos los nodos de nuestro DOM utilicen eventos. A modo de ejemplo, nos da acceso al método AdDeventListener. Cuando empezamos a usar esos métodos no son elementos. De aquí es de donde viene. ¿No es eso interesante? Entonces solo recuerda que el objetivo del evento es una interfaz DOM y es implementada por todos los objetos del nodo. Pueden recibir eventos y pueden tener oyentes para ellos. Sabemos que podemos poner oyentes de eventos en los elementos, el documento, incluso el objeto de ventana, los objetivos parejos más comunes, pero no se detiene en estos ejemplos simples. Otros objetos también pueden ser objetivos de evento para, por ejemplo, el objeto de solicitud HTTP XML, el objeto de nodo de audio y el objeto de contexto de audio y toda una plétora de otros. Y es un FYI porque sabemos que todos estos nodos en última instancia heredan de ese objeto. Recuerda del objeto JavaScript, tenemos varios otros métodos disponibles para nosotros. Métodos de objeto plano como tiene propiedad propia. Por ejemplo, debería haberlo mencionado antes. Yo sólo pensé que lo tiraría ahora porque acabo de pensar en ello. De todos modos, sigamos adelante. Ese es el objetivo del evento. Empecemos a trabajar nuestro camino hacia abajo. También tenemos este objeto nodo, ¿verdad? Este objeto nodo nos permite atravesar el DOM. En otras palabras, nos da métodos como nodo padre, nodos hijos, próximo hermano, etcétera, etcétera. Estos métodos sólo se llaman calentadores porque en realidad tratamos de recuperar algo muchos de los nodos que tú y yo vamos a trabajar con heredar de este nodo, incluyendo nuestro elemento de párrafo que acabamos de crear. Eso tiene sigo mencionando que hay muchas otras clases de nodos concretos que heredan de esto. A saber que toma el nodo 4, toma nodos eliminados por 11 nodos y otros más exóticos como los nodos cómicos. Pero, ¿de qué estoy hablando? Ya lo sabes. Sigamos trabajando nuestro camino de vuelta hacia abajo. ¿ Cuál es este elemento? Este elemento es la clase base para todos los elementos DOM. Y como su nombre indica, este objeto nos ayuda a atravesar sólo elementos de elemento. Entonces por ejemplo, nos da acceso a métodos como elementos mixtos de enlace, el método child, que como ustedes saben, sólo se puede utilizar en elementos y el selector de consultas, etcétera, etcétera. Te estoy dando estos puñado de ejemplos porque sé que hemos trabajado con él anteriormente, pero como sigo aludiendo, no se detiene sólo con estos métodos y están mencionando, por ejemplo, esta cláusula de elemento que sirve de base cláusulas más específicas como el elemento SVG, elementos XML. Y por supuesto, también sirve de base para los elementos HTML. Entonces hablemos ahora de este elemento HTML. Más bien intuitivamente, esta interfaz está disponible para cualquier elemento HTML de nuestra página. Y especifica operaciones en consultas que se pueden realizar en cualquier elemento HTML. Y este elemento HTML es heredado por un elemento HTML más específico, concreto. En nuestro caso, debido a que creamos un párrafo, fue heredado por el elemento de párrafo HTML. Y recuerda cada etiqueta, un párrafo o un div, una imagen, una etiqueta ancla. Cada uno tiene su propio objeto único del que hereda. Por ejemplo, la etiqueta de anclaje no heredará del elemento de párrafo HTML. Hereda del elemento de anclaje HTML. Y cada clase de objeto como esta proporciona propiedades y métodos específicos a cualquier elemento en el que esté trabajando. Por ejemplo, un nodo de elemento correspondiente a una etiqueta. Y una etiqueta tiene propiedades relacionadas con el enlace, y una correspondiente a una etiqueta de entrada tiene propiedades relacionadas con la entrada y así sucesivamente y así sucesivamente. Quién, que han llegado un increíblemente lejano ahora. Y espero que te estés divirtiendo y llevándote toda esta información. Y me ha llevado mucho tiempo aprenderlo e intentar armarlo de una manera muy sencilla e intuitiva, divertida. Y sólo recuerda que cada objeto en el DOM tiene una estructura jerárquica similar a ésta. No será exactamente lo mismo en depende de lo que estemos trabajando. Muchos de ellos van a estar heredando del mismo tipo de cosas. Por ejemplo, sabemos que tenemos nodos de toma también. No sólo tenemos nodos de elementos con los que hemos tratado aún. Dewey y toma notas no son lo mismo que los nodos de elemento, pero también son propiedades y métodos comunes entre todos ellos. Debido a que todas las clases de dominó o desde una sola jerarquía, eventualmente, ese objetivo de evento, por ejemplo, se aplicará por igual para tomar nieves y nodos comunes como lo hace para eliminar. El punto que intento hacer es que de esto se trata la jerarquía. Y si alguna vez te encuentras en un hoyo, ahora sabrás cómo desenterrarte porque sabrás encontrar ese método. Ya sabes, si, si esperas que un determinado método esté en un determinado tipo de nodo, lo puedes encontrar en. Espero que ahora sepas por qué. Pero de todos modos, todavía nos quedan bastantes cosas que quiero venir en esta sección antes de subir de escena. 7. Inheritance resumen: O extraño, hemos recorrido un largo camino. Solo quiero dar un paso atrás y simplemente resumir lo que hemos aprendido cuando se trata de jerarquía de nodos. Hemos visto en el conjunto completo de propiedades y métodos de un nodo dado proviene de la herencia. Y específicamente, miramos el elemento de párrafo que creamos, que obtiene sus propiedades y métodos de. Así es, el elemento de párrafo HTML, que obtiene sus propiedades y métodos del elemento HTML. Obtiene sus propiedades y lo hizo a partir de un elemento. Obtiene sus propiedades y métodos del nodo, y obtiene sus propiedades y métodos del objetivo del evento. Eso fue un poco bocado. Y también aprendimos que cada tipo específico de objeto prototípico es el para un propósito. Por ejemplo, el elemento de párrafo HTML proporciona propiedades específicas de párrafo. El elemento HTML proporciona métodos de elementos HTML comunes como getters y setters. Sabemos que elemento objeto proporciona método de elemento general. Recuerda que miramos algunas de esas. El nodo proporciona propiedades generales del nodo DOM y el objetivo del evento es quizás el más importante. Esta es la raíz de la mayoría de los métodos con los que vamos a estar trabajando. Y esto da soporte para eventos como el oyente de eventos add. Ahí vamos. Yo sólo quería dar un paso atrás. Entonces se puede ver un poco a un nivel muy alto lo que acabamos de cubrir. Pero antes de terminar esta sección, quiero que discutamos otra cosa. Yo quiero que veamos cómo funcionan las extinciones tontas. Este no es un tema muy publicitado, pero es muy, muy interesante. Entonces pasemos a eso en la próxima conferencia. 8. Extende extensiones: introducción: Hemos recorrido un largo camino en este apartado, pero sólo quiero mencionar rápidamente la práctica de extinción DOM. En primer lugar, ¿qué es? La extinción tonta es solo el proceso de agregar métodos y propiedades personalizados a los objetos DOM. Resto, los objetos DOM están observando. Y los intrones no objetos ni hospedan objetos. Específicamente los objetos DOM o los objetos Hearst que heredan del documento de evento del elemento o de cualquier otra interfaz DOM. Hemos pasado por este aviso. Y todo el concepto de extinciones, extinciones DOM. Bueno, para agregar estas propiedades y métodos a estos objetos host. Y puedes agregar a estos objetos directamente o a los prototipos. Durante días veremos en breve, sólo se puede hacer esto en entornos que tengan un soporte adecuado para los objetos extendidos más populares o elementos DOM, como el párrafo o las etiquetas div, IE, elementos que heredan del interfaz de elementos desde el DOM. Estas son las cosas más populares a las que muchos desarrolladores quieren sumar extinciones porque es con lo que más trabajamos. Y como es tan popular, hay muchas bibliotecas y paquetes de terceros que se han expandido y permiten que sucedan estas cosas, como prototipo o herramientas Moo. Pero de todos modos, no dejes que pierda la pista de esta conferencia. Deshaznos de eso y veamos ahora un elemento de párrafo. ¿ Recuerdas que caminamos por la jerarquía de este elemento de nodo. ¿ Cómo se ve eso? Bueno, eso es varillas son párrafo comienza como un objeto, no un elemento objeto para ser específico. Y cuando miramos su prototipo, era este elemento de párrafo HTML. Y obviamente este objeto va a ser específico del tipo de elemento para nuestro párrafo. Sí, podemos ver que es el elemento de párrafo HTML. Para un elemento div, no va a ser eso, va a ser el elemento div HTML. Para el elemento de anclaje, ese va a ser elemento HTML y así sucesivamente y así sucesivamente. Por cierto, ¿por qué son estos principales, sentarse así? ¿ Por qué son tan extraños? Bueno, tú y yo no sentamos estos nombres. Están definidos por la especificación DOM HTML y etcétera, misma especificación, esa misma red de especificación también define la herencia entre diferentes interfaces. Entonces, de todos modos, eso es solo un poco de información. El párrafo HTML elementos, ¿Cuál es su prototipo? Es el elemento HTML. Su prototipo es el elemento, su prototipo es el nodo. Después llegamos al muy importante objetivo del evento. Y como vimos en la conferencia anterior, el objeto último es el objeto. Y por supuesto su prototipo es nulo. Por eso con más detalle. Está bien, Clyde, esto es genial. Yo sé todo esto, pero ¿por qué lo estamos mirando de nuevo? Bueno, yo quiero hacer un DOM intercambiando contigo. En realidad quiero saltar a los toma datos a conocido. Yo quiero que empecemos a codificar algo. Entonces agreguemos una extinción que está en nuestro propio método personalizado a uno de estos nodos, estos objetos. Y déjame simplemente chupar mi pulgar y escoger uno al azar que es sólo mirar este elemento. Y vamos a añadir nuestro propio método personalizado en este objeto host de elemento. Hagámoslo ahora. Eso sería realmente divertido. 9. Añadir nuestra propia extensión de DOM: Muy bien, ¿cómo funciona esta extinción DOM? Y veamos un ejemplo. ¿ Qué queremos hacer? Bueno, solo digamos que queremos crear una función llamada leer que podemos usar en cualquier elemento que creemos. Y sólo cambia ese color de los elementos. Para leer. Escribe muy simple, muy intuitivo. Entonces aquí solo estamos en la consola del navegador. No estoy usando ningún IDE de lujo. Nosotros sólo en la consola de Chrome. Voy a ampliar esto sólo para que podamos verlo en pantalla completa. Y déjame acercar un poco. De acuerdo, entonces lo que voy a hacer es que vamos a acceder a ese objeto elemento, ¿verdad? Y recuerden, esto nos lo proporciona el DOM. Este es un objeto host. Y ahora lo que quiero hacer es que quiero acceder a su prototipo y quiero definir una función llamada lectura. Lo que quiero hacer, esta es una función personalizada y vamos a hacer, aguanta a Clyde. ¿ Por qué tenemos que acceder a su prototipo? ¿ Por qué no simplemente accedemos al objeto e importamos un método personalizado llamado rid en él? Bueno, en primer lugar, para saber más sobre los prototipos y la cadena de prototipos, por favor echa un vistazo a mi curso completo de gran maestro JavaScript. La respuesta corta es que si lo ponemos directamente en el objeto elemento así, no se va a adjuntar a su función constructora. En otras palabras, va a ser específico de esta instancia del elemento. Pero en otros objetos creamos usando la función constructor de elementos que no va a estar ahí. Y por eso estoy queriendo adjuntarlo a su prototipo. Recuerda, el prototipo está disponible para nosotros desde JavaScript. Y solo significa que otros objetos que se crean a partir de él también mostrarán sus propiedades prototipo. Digamos que tiene sentido. Eso espero. Entonces aquí vamos, estamos accediendo como prototipo. Ahí definimos una función llamada leer y vamos a asignar eso. Como dije, va a ser una función. Entonces usando la palabra clave de función de JavaScript. Y en esta función, ¿qué queremos que suceda? ¿ Queriremos acceder al objeto que llamó a este método? Por lo que usamos la, esta palabra clave. Nuevamente, si no entiendes qué es esto, por favor echa un vistazo a nuestro curso completo de gran maestro JavaScript. Entonces ahora tenemos el objeto que llamó a este método dentro quieren acceder a su propiedad de estilo y queremos cambiar su color. ¿ Recuerdas eso? Y queremos cambiar el color a rojo. Entonces ahí vamos. Ese es nuestro prototipo rojo. De acuerdo, nos hemos unido ahora a este objeto elemento. Entonces lo siguiente que quiero hacer es que quiero crear un párrafo. Por lo que ya sabemos hacer esto. Vamos a crear una variable llamada p. Se inició la raíz de nuestra página, y vamos a acceder a un método llamado crear elementos. Y elemento que queremos crear aquí es p. ¿De acuerdo? Ahora lo que quiero hacer, no le asigné signo igual. Ahí vamos. Por lo que ahora hemos creado nuestro párrafo. Lo que quiero hacer ahora es dejarme que en realidad se adhiera a la página otra vez. Para ver esto en acción, quiero poner nuestro párrafo en este documento. ¿ Cómo podemos hacer eso? Bueno, en primer lugar, vamos a acceder a nuestro documento y es sólo reemplazar todo lo que ves en pantalla por la palabra hola. Entonces ahí vamos. Tenemos la palabra hola. Ahora lo que quiero hacer es añadir contenido a un párrafo. Ahora mismo sólo va a ser una etiqueta vacía. Por lo que quiero acceder a nuestro objeto p.sit y me pregunto luego insertar algún contenido de texto. Y digamos que este es un nuevo elemento de párrafo. Bastante simple. Por el momento, tan bueno. Y como recuerdan de la serie uno de este curso, hemos creado este párrafo, pero no nos hemos apegado a nada. Simplemente está flotando en el espacio en este punto. Entonces ahora mismo lo que quiero hacer es añadir esto al DOM. Entonces todo lo que hacemos aquí es acceder a nuestro cuerpo de documento y usamos un alfiler ese niño para sujetarlo al cuerpo. Y yo estoy queriendo anclar este párrafo. Cu Ya casi terminamos, te lo prometo. Lo último que queremos hacer es que queremos acceder a esta función roja. Y notarás en este objeto P, nunca hemos definido una función de lectura en él en gran medida. Entonces, ¿crees que funcionará? Accedemos a nuestra P y tratamos de ejecutar esta función llamada leer. ¿ Te lo crees lejos? ¿ Agua? Ahora, vamos a dar vuelta. Y mira qué impresionante. Y esto mis queridos alumnos es la extinción DOM. Hemos agregado nuestro propio método personalizado a este objeto elemento. Hombre, así que podrías estar pensando en este punto, esto es impresionante y voy a hacer esto todo el tiempo. Pero por razones que voy a discutir ahora, esto no es una buena práctica, puede ponerse muy desordenado por razones que voy a discutir. Entonces, sin más preámbulos, saltemos a la siguiente conferencia y miremos este código con un poco más de detalle. 10. ¿Son las extensiones de DOM o los malos?: Acabamos de hacer un ejemplo de extinción DOM juntos, ip, divirtiéndonos. Espero que estés aprendiendo una vez, pero solo quiero hablar de nuestro código con un poco más de detalle. Entonces déjame traerlo de vuelta a la pantalla. Esto es lo que acabamos de hacer. Recuerda. Primero asignamos la función de lectura al prototipo del elemento. Después creamos nuestros elementos de párrafo y nombre. Podríamos invocar la función directamente sobre ella. Bueno, ¿por qué funciona este código? El motivo que funciona es porque el objeto al que se refiere el elemento dot prototipo, realidad uno de los objetos en la cadena prototipo de este elemento de párrafo que hemos creado. Es decir, cuando esta función roja se ejecuta en el elemento párrafo, el pasado no la va a encontrar directamente en el párrafo. Se va a buscar en la función a lo largo la cadena de prototipos hasta que se encuentre en este objeto prototipo de punto elemento. Segundo, para hacerla escenas, como aludimos en la conferencia anterior, son problemas con el enfoque de extinción DOM. Bueno, ¿cuáles son algunos de estos problemas? En primer lugar, vamos a deshacernos de todo el ruido. Ya que estoy seguro de que estaría de acuerdo conmigo. Tenemos que tener cuidado con la forma en que adjuntamos la función de lectura. Por ejemplo, si creamos una propiedad, Digamos que ponemos esa propiedad de lectura o una función en el prototipo del elemento de párrafo HTML, no en el objeto elemento. Recuerda que hicimos eso en nuestro ejemplo. Digamos que lo hicimos en el elemento de párrafo HTML. En esa instancia, no seríamos capaces de usar esta propiedad por ejemplo, un elemento ancla. Déjame mostrarte a lo que me refiero. Déjame llamar aquí algún código. Y esto es lo que teníamos, ¿verdad? Ponemos nuestra propiedad de lectura en este prototipo sobre objeto elemento. Como mencioné, qué pasa si vamos y hacemos algo parecido, pero ahora ponemos esta propiedad en el elemento de párrafo HTML. No lo hacemos directamente en el elemento ahora. Y luego en lugar de crear un párrafo, vamos a crear una etiqueta de anclaje. Y tratamos de ejecutar esta función, la propiedad en la etiqueta de anclaje. ¿ Qué va a pasar? Por inseguro, has adivinado array, nos van a echar un error. Específicamente, nos van a decir que ese rojo no es una función definida en esa etiqueta de anclaje. ¿ Tiene sentido esto? Y piensa por qué sucede esto. Recuerde, esto se debe a que la cadena prototipo de elementos de anclaje nunca incluye un objeto al que hace referencia el prototipo de punto elemento de párrafo HTML. En cambio, va a incluir un objeto al que hace referencia el prototipo de punto de elemento anclaje HTML. Y es por eso que en el ejemplo anterior, realidad adjuntamos nuestro método más arriba en la cadena de prototipos en ese objeto elemento. Entonces, ¿por qué no sólo incluir todas nuestras extinciones en ese elemento objeto? Bueno, crear una propiedad sobre elemento de prototipo tienen problemas similares. Por ejemplo, no estará disponible en todos los tipos de nodos, sino sólo en los de tipo elemento. Por ejemplo, y si creamos un nodo de texto o un nodo de comentario, etcétera, etcétera. De acuerdo, Clyde entonces solo seguirá trabajando más arriba en la cadena de prototipos en lugar de adjuntar nuestro recién creado intercambio DOM admitido al objeto elemento. ¿ Por qué acabamos de hacerlo al objeto nodo? Y sí, esa es en realidad una pregunta muy válida. ¿ Por qué no acabamos de sumar en la nota más alta? De hecho, ¿por qué no simplemente agregamos todas nuestras extinciones a ese objeto? Recuerda la O mayúscula, el objeto, los objetos. ¿Por qué simplemente no hacemos eso? Bueno, de esto es de lo que quiero hablar en la próxima conferencia. Existen otros problemas al usar esta extinción DOM. Mantente motivado, toma un café y te veré en la próxima conferencia. 11. Los problemas con las extensiones DOM: Poder extender elementos DOM a través de prototipos de objetos suena increíble. Estamos aprovechando la naturaleza prototípica de JavaScript. Y el scripting DOM se vuelve muy orientado a objetos y es tan tentador que incluso hace unos años, prototipo de biblioteca JavaScript lo convirtió en una parte central de su arquitectura. Pero agárrate a tus caballos. Son muchos problemas con la implementación de extinciones dominantes como camino. Y voy a discutir por qué no es del todo la mejor idea. Bueno, se pueden ver algunos de los problemas en la pantalla es solo empezar con el primero. Y como que ya hemos mirado esto. El primer problema es que tenemos que elegir el prototipo correcto. Si adjuntamos una propiedad al prototipo de un elemento DOM, sólo se puede acceder por un objeto que tenga el mismo prototipo que parte de su cadena, nos vendimos derechos. Si agregamos esa propiedad de lectura al elemento, el nerd cómico no tendrá acceso a la propiedad raid que toma el hardware y tiene acceso a la propiedad de violación, etcetra, etcétera. Entonces ese es el primer problema con este enfoque. En segundo lugar, el no reglas. Recuerda, objetos DOM u objetos host tiene C, tengo un error ortográfico. No son objetos opuestos sobre el tema de no reglas. Solo quiero decir que un gran problema con el uso de todos estos enfoques para agregar propiedades emisores es que la exposición de estos prototipos de objetos DOM no está garantizada. ¿ Por qué no está garantizada? Bueno, porque la especificación DOM no hace que sea obligatorio para los proveedores, vale, los navegadores tener una propiedad de elemento global que se convertirá en un prototipo de todos los objetos implementándolo. Esto no se especifica como no obligatorio, y tampoco establece que debe existir una propiedad de nodo global que sea un prototipo de todos los objetos que implementan esta interfaz es que se podría argumentar que aunque ellos no lo hacen obligatorio, mayoría de los navegadores lo hacen en voz alta. Y es cierto. Pero cuando empezamos a mirar Internet Explorer siete o Safari dos ejemplos, no podemos hacer este tipo de cosas que hemos visto. Y se podría argumentar, cliente, sí, pero seguramente podemos sortear todo este objeto de extensión simplemente extendiendo un objeto directamente. Por ejemplo, si vamos y hacemos un elemento de párrafo, recuerda, P es igual a documento o crear elemento. ¿ No podemos simplemente entonces agregar una propiedad a su párrafo? Bueno, podemos, pero el rendimiento sabio, no es una buena idea. Es muy lento. Pero de todos modos, quiero volver a este objeto host. ¿ Cuáles son los problemas aquí? Vamos a DOM objetos u objetos host y hosts objetos son los más difíciles de trabajar. Objetos de Hearst permitieron hacer cosas que ningún otro objeto puede ni siquiera soñar con hacer. Por lo que podríamos decir que extender objetos DOM es como caminar en un campo minado. Por definición, trabajamos con algo que se permite comportarse de una manera impredecible y completamente errática. Esto es rápidamente mirar un ejemplo. Si escribimos documento crea el elemento p y existimos el método padre offset. Esto no funcionará en Internet Explorer. Obtendremos un error. Eso es sólo un ejemplo de Watson, una buena idea y las reglas no que especifican cómo deben comportarse estas. Lo último que quiero discutir son las colisiones. Tienes que pensar qué es lo que estamos haciendo aquí cada vez que empezamos agregar nuestras propias extensiones a los objetos, tenemos que llegar a un nombre de propiedad y nuestra instancia donde nuestro ejemplo lo llamamos rojo. Pero qué pasa con el miedo ya es parte del DOM. Podemos sobre escritores no tiene otros efectos de golpe con otras partes del código dominante. Recuerda, HTML5 trae nuevos métodos y propiedades todo el tiempo. ¿ Quién ha dicho que lo tiene? Esos son algunos de los mayores problemas que se me ocurre. Y sólo para resumir, mi punto de vista sobre todo este tema es generalmente extinciones DOM sobre no una gran idea. Y esto es cierto aunque solo quieras que tu sitio funcione en dos navegadores, todavía vas a tener riesgos de colisión, esos que acabamos de discutir. Entonces, ¿cuál es la solución? Will one solución es usar rápidos de objetos. Y esto es más o menos lo que jQuery ha hecho desde el principio. Pero de todos modos, este es un tema que está completamente más allá del alcance de lo que estoy tratando de cruzar aquí. Espero que hayas aprendido mucho sobre las extinciones DOM. Espero que tengas un poco de idea de por qué no es necesariamente la mejor idea. Pero de todos modos, mantente motivado y nos vemos en la próxima conferencia. 12. Los eventos no son una perturbación aislada: Muy bien, empecemos a hablar de burbujeo de eventos. Y por balbucear vano, sólo estoy significando el flujo de cada evento a través del DOM. Hasta este punto del curso, hemos visto muchas formas de agregar escuchas al DOM. La mejor manera es usar este método add event listener. Y todos sabemos cómo funciona esto. Pero lo que aún no hemos discutido es un tema bastante avanzado de cómo despiden los eventos. Lo más importante que se debe quitar de esta sección es que cualquier vena no es una perturbación aislada, igual que una mariposa aleteando sus alas, entonces conocida como sismo, un golpe de meteorito o incluso una visita de Hulk. Piensa efecto ondulado, un montón de elementos que yacen en un camino. Si y i, antes de seguir adelante, la mariposa falsificada es solo la idea de que las cosas pequeñas pueden tener impactos no lineales en un sistema más complejo. Entonces cuando decimos que la mariposa falsa, como que imaginamos una mariposa aleteando sus alas y causando un gran tifón. Eso Sigamos adelante. No quiero digredir. Bueno, quiero que codificemos algo muy, muy sencillo. Yo quiero tener un documento HTML muy sencillo. Yo quiero tener un elemento corporal. Y dentro del cuerpo, Vamos a tener extranjeros, tres divs anidados. Y podemos darle al primer div una idea de uno, el secante de idea de dos. Y en el tercer elemento anidado, Vamos a tener dos divs. Demos al primer div un ID de tres a, y al segundo div un ID de tres B. Y dentro de cada uno de esos divs, leads incluyen un botón. El primer botón podemos dar una idea del Botón 1 y el segundo botón podemos dar un ID de botón también. Como podemos ver, no hay nada realmente emocionante pasando con nuestro código. Y el HTML debería parecer bastante sencillo. Y a estas alturas, deberías poder mapear esto en el árbol DOM. Recuerda que empezamos con un objeto de ventana, Ese es el rey. Dentro de eso tenemos nuestro objeto de documento, después tenemos el objeto HTML, y luego podemos empezar a mapear todo. Tenemos nuestro cuerpo y luego tenemos esos divs debajo del cuerpo. Tenemos un div con identificación de uno, ¿verdad? Dentro de eso, tenemos otro div con ID de dos. Dentro de eso, tenemos dos divs con los ID de 33 b. y por supuesto, dentro de cada uno de esos términos, tenemos un patrón con los ID Qu correspondientes. Entonces aquí vamos. Esta es la base con la que quiero que trabajemos, como Pausa el video ahora antes de que sigas adelante, déjanos hundirnos y dejan ver qué pasa cuando hacemos clic en uno de esos botones. 13. Burbuja de eventos vs. Captura: De acuerdo, veamos lo que pasa cuando haces clic en un botón. Recuerda que tenemos nuestro HTML y lo hemos encontrado en un árbol DOM. Y así va a comenzar la investigación en este árbol DOM. Y vamos a deshacernos de ese embudo HTML sólo para eliminar el ruido. Y vamos a dar click en el Botón 1. ¿Qué va a pasar? Bueno, por lo que ya hemos aprendido en el curso, sabemos que se va a encontrar un Nikki venas. Lo interesante aunque que no hemos discutido es que exactamente el evento click está siendo despedido de nuestro evento click, igual que casi cualquier otro evento no se origina en el elemento con el que interactuamos. Eso sería demasiado fácil y haría demasiadas escenas. Por lo que en nuestro caso, ese evento click no se origina en la parte inferior con ID del Botón 1. En cambio, todas las venas se originan en el tambores. El de la página, que es el objeto de ventana. Entonces vamos a mapear esto. Sabemos que nuestro evento tick comienza aquí en el objeto ventana. Sé que es un poco raro, correcto, con hacer clic en el botón, pero el evento en realidad no comienza por el botón. Se inicia en el objeto de ventana. Desde esta raíz Objeto Ventana, dejar tinta se abre paso a través de la parte estrecha del DOM. Y eso lo detiene, el elemento que desencadenó el evento. En nuestro caso, se detiene en este botón con una ID de Botón 1. Y se conoce más generalmente como las togas, el objetivo del evento, si se quiere. Entonces solo recuerda que el elemento más profundamente anidado que llama al evento real, en este caso, ese botón se llama elemento objetivo. Y este elemento objetivo no cambia a lo largo de todo este proceso de burbujeo. Como acabamos de ver en este diagrama aquí, el camino que toma olivina es bastante giratorio, comienza en la raíz y va hasta el objetivo del evento. Pero en el camino, sí notifica de manera molesto a cada elemento a lo largo del camino. Entonces esto significa que si a es un manejador de eventos asociado con el elemento en la ruta que coincide el aún que pasa actualmente por ese manejador de eventos también se llamará no se detiene. Una vez que el evento llega al objetivo, eso no se detiene. Es como uno de esos conejitos intergénicos donde metió baterías en el tubo de la vena, sigue yendo retrocediendo pasos y volviendo a la raíz. Y al igual que antes, en su camino hacia arriba, cada elemento recibe notificación de este evento. Por lo que esto significa que cualquier manejador de eventos presente se enfriará también, siempre y cuando sea el mismo evento. En nuestra instancia, el evento click. Esto tiene un poco de sentido. Sé que al principio parece un poco raro. Una de las principales cosas a notar sin embargo, es que no se encontró con una manera. Y Aldon, iniciamos un evento. El evento siempre comenzará en la raíz. Viajará por la estructura DOM hasta que llegue a nuestro objetivo de evento. Y luego se va a ir y volver a viajar hasta la raíz. Y todo este viaje está muy formalmente definir lo que quiero decir con eso. Bueno, vamos a deshacernos de todo el ruido. Y veamos esto. Cuando viaja hacia abajo. A esto se le conoce como la fase de captura de eventos. Y cuando viaja hacia arriba, y como probablemente habrías adivinado, esto se le llama la fase burbujeante del evento. El más sencillo entre nosotros, incluyéndome a mí mismo, sólo llámalo fase 1 y fase 2. Simplemente es más fácil. Así que ten en cuenta es posible que veas el nombre propio llamado captura de eventos, y es posible que veas el término fase 1. Ambos se pueden utilizar indistintamente. De acuerdo, creo que he sacado mucha información sobre ti en esta conferencia. Yo quiero parar aquí, pero aún nos queda bastante por cubrir. En la próxima conferencia, Empecemos a profundizar más en esto. Espero que te estés divirtiendo, mantente motivado, y te veré en la próxima conferencia. 14. Cómo escuchar durante la fase de captura: Muy bien, Para recordarles, estamos hablando de burbujeo de evento. Y recuerden, incluso balbucear es solo el flujo de cada evento a través del DOM. Y acabamos de ver en la conferencia anterior que podemos dividir todo este proceso en dos fases. Fase 1, aka la fase de captura, somos nosotros, el evento comienza en la raíz y se camino a través del DOM hasta el objetivo del evento. Esa es la fase uno. También miramos la fase 2, alias la fase burbujeante. Y bastante intuitivo, sí, supongo que así es como el evento burbuja todo el camino de vuelta hasta la raíz. Vimos que todos los elementos en cualquier paletas Pausa, son bastante afortunados. Si bien tienen suerte porque tienen la buena fortuna de ser notificados dos veces cuando cada vez y se convocan a los despedidos. Este tipo de tal vez un arreglado el kobe, ¿verdad? Porque cada vez que escuchamos eventos, ahora tenemos que elegir en qué cara queremos escuchar para nuestro evento. En. ¿ Escuchamos nuestro evento es Se está tirando abajo en la fase de captura. ¿ Qué escuchamos nuestros eventos como sube de nuevo en la fase de burbujeo? qué fase realmente escuchar un evento? Bueno, mis queridos alumnos, este somos nosotros, tenemos otro argumento a nuestra función de escucha de eventos add. Recuerda la sintaxis. Agregamos este oyente de estimación a un elemento. Digamos que tenemos que hacer clic en eventos. Y luego tenemos un manejador llamado click handler, que aún no hemos discutido, es que en realidad hay un tercer argumento a esta función. Y este tercer argumento especifica si queremos escuchar este evento durante la fase de captura. Es decir, un argumento de verdad significa que queremos escuchar al infante durante la fase de captura. ¿ Eso tiene sentido? Y si no tenemos verdadero, obviamente el final predeterminado es falso. Y cuando usamos oyentes de eventos en línea o si acabamos de especificar a sus argumentos al oyente de eventos add. El navegador no sabe nada de capturar y codificas tus manejadores de eventos son necesarios para ejecutarse en la segunda fase, en la fase burbujeante. Si y i, en realidad van formalmente tres fases. Y entonces tercera fase es la fase objetivo que necesitamos vena ha llegado al elemento real. Pero en la práctica, esto no se maneja por separado. De hecho, los manejadores tanto en las fases de captura como balbuceando también se activan en esa fase objetivo. Pero de todos modos, y he guardado, probablemente te estés preguntando cómo funciona todo esto. Entonces siempre lo ha hecho, saltemos al editor de texto y empecemos a codificar. 15. Burbuja vs. Captado: ejemplo 1: Está bien, ya me conoces, me encantan los ejemplos. Entonces vamos a agrietarse. Todo lo que quiero hacer es crear una página HTML muy sencilla. Yo quiero incluir dos botones. Entonces hagamos una etiqueta de botón con ID de Botón 1. Y sólo podemos llamar a ese botón uno. Y sólo podemos duplicar esto. Y por supuesto esto también puede ser botón. Eso es más o menos lo que quiero hacer. Derechos muy sencillos, y quiero incluir JavaScript. Empecemos a acceder al DOM. Vamos a poner aquí un servidor en vivo para que podamos ver esto en el navegador ya que estamos trabajando. Déjame arrastrar esto a través. ¿Tiene sentido esto? Aquí tenemos un botón uno y el botón dos. Volvamos a nuestro editor de textos y acabemos con este JavaScript. Lo que quiero hacer es que quiero acceder al Botón 1 y honesto adjuntar un oyente de eventos al mismo. Y luego quiero ver qué pasa. Entonces, pero uno, ya sabemos hacer esto. Accedemos a nuestros objetos de documento, un método llamado get element by ID. El ID por supuesto es el Botón 1. Vale, genial, Pero lo que quiero hacer ahora, bueno, escuchemos el evento durante la fase de captura y también escuchemos el evento y la fase burbujeante. En primer lugar, hagamos la fase de captura. Entonces ejecutemos a nuestro manejador en la fase de captura. ¿ Cómo hacemos eso? Bueno, acabamos de ver que accedemos a nuestro botón. Después implementamos el método add event listener. Queremos escuchar un evento de click. Después queremos definir una función llamada manejador de clics. No hemos definido una escritura, vamos a terminar. El tercer argumento que tenemos que proporcionar es cierto, porque ahora queremos que escuchen y ejecuten a nuestro manejador en la fase de captura. Realista, exactamente lo mismo ahora. Pero ahora ejecutemos cómo manejador en la fase burbujeante, y este es el predeterminado. Nuevamente, podemos acceder a nuestro botón uno. Agregamos el oyente de eventos. Queremos escuchar un evento de click. Queremos ejecutar el manejador de clics. Pero ahora queremos poner falso. Y no tenemos que hacer esto. Podemos simplemente poner dos argumentos. Pero quería ser explícito aquí porque quiero que sepas lo que está pasando detrás de bambalinas. Este es el comportamiento predeterminado. Lo último que tenemos que hacer, por supuesto, es definir a nuestro manejador. Lo hemos llamado manejador de clics. Y vamos a hacer algo muy simple es solo registro de consola. O me han recortado. Escenas económicas muy, muy sencillas. Así que vamos a ahorrar, vamos a nuestro navegador y vamos a abrir una consola. ¿ Qué va a pasar cuando hacemos clic en el botón uno? ¿ Qué esperarías ver? Bueno, antes de mostrarles la solución, volvamos a nuestro editor de códigos aquí. ¿ Qué va a pasar cuando ese evento de click se desencadene en el botón de red uno. ¿ Recuerdas qué pasa? Se va a empezar por la raíz de nuestro documento no está en el objeto ventana y va a viajar todo el camino hasta ese botón una mano que net evento golpea botón uno. Hemos dicho, Sí, queremos ejecutar el manejador de clics porque hemos especificado true. Pero recuerda que no se detiene. Ahí, no nos despide después de que llegue a esa de abajo. Ese objetivo incluso que luego tiene que recorrer todo el camino de vuelta hasta el objeto de ventana. Y así es como nuestro segundo oyente de eventos se activará porque también está escuchando un evento de click que ya ha sido despedido. Pero esta vez va a escuchar y ejecuta al manejador. Durante la fase de burbujeo. Se sembró el log de consola esperado que sucediera dos veces. Uno Durante la fase de captura y dos durante la fase de burbujeo. Bueno, veamos si onCreate. Entonces, vamos a hacer clic en el botón uno. Sí, y hábito, me han hecho clic, se ha registrado consola dos veces a la pantalla. Por eso el número 2, Zai Bu Gou. Espero que esto tenga sentido. Sigamos motivados porque aún más tenemos que aprender. 16. Burbuja vs. Captado: ejemplo 2: Está bien, ya me conoces lo mucho que me encantan ejemplos y éste va a ser bastante divertido porque lo que yo estoy queriendo hacer algunos queriendo mostrarnos todo el proceso de captura y balbucear. Va a ser realmente genial y vamos a estar usando el for of loop para hacerlo. Entonces, ¿a qué estamos esperando? Vamos a agrietarnos. Lo que quiero hacer es crear una página HTML sencilla. Ahora solo quiero incluir estilos solo para que se vea un poco más contundente. Y quiero darle estilo a todo nuestro cuerpo. Me estoy preguntando que todos nuestros elementos tengan un margen de 10 píxeles. Y quiero poner un borde alrededor de cada elemento. Creamos esto, solo dale un ancho de un píxel. Digamos que es un borde sólido y listas color de rojo. Tan muy simple, nada demasiado elegante pasando ahí. Ahora vamos a crear nuestro elemento corporal. Dentro de nuestro cuerpo, quiero crear tres elementos anidados. En primer lugar, vamos a crear un div. Entonces vamos a crear un formulario. Deshacernos de la acción aquí. No necesitamos una acción. Entonces lo último que quiero hacer es crear un elemento de párrafo. Entonces ahí vamos. Bastante simple, ¿verdad? Y si vamos y miramos esto en el navegador, es como se va a ver. Empecemos nuestro servidor en vivo. Entonces ahí vamos. Tenemos nuestro div, tenemos un formulario y tenemos un elemento de párrafo. Obviamente, si hacemos click en esto, no va a pasar nada porque no hemos agregado ningún oyente de eventos. Entonces hagámoslo ahora. Va a ser bastante sencillo. En primer lugar, agreguemos aquí nuestro JavaScript. Y recuerda lo que dije. Quiero usar el for of loop. No quiero agregar manualmente un oyente de eventos. Y esto se está poniendo bastante avanzado ahora, pero verás lo sencillo que es una vez que te lo cuelgues. Por lo que el for of loop es una función muy simple. Solo ten en cuenta si no estás seguro de lo que es, siempre puedes echar un vistazo a mi curso de gran maestro de JavaScript competir para obtener una sensación más intuitiva es ayudar a JavaScript en sí funciona. Pero como verás, es casi, casi tan básico como leer la función. Entonces lo que estamos queriendo hacer es correr para recorrer todos nuestros elementos de nuestra página y ponerlos en una variable. Definamos nuestra variable como elemento DOM. Y entonces los objetos que queremos recorrer es ¿qué? Bueno, esa va a ser nuestra consulta. Seleccionarlos. Por supuesto, las otras formas en que podemos hacerlo, pero estoy feliz de usar nuestro selector de consultas todo. Entonces, ¿qué queremos hacer es cuando Integrar Cada elemento individual en nuestro DOM. Es literalmente así de simple. Entonces solo recuerda lo que estamos haciendo cuando encontramos todos los elementos en nuestro DOM a través del selector de consultas, todo una colección de retorno a nosotros. Y acabamos de recorrer esa colección y cada elemento esa colección se pone en una variable aquí llamada elemento DOM. Y ahora queremos agregar oyentes de eventos a todos estos, no te preocupes. Y queremos hacerlo tanto para la fase de captura como para la fase de burbujeo. Entonces, primero tratemos con la fase de captura. Vamos a acceder a nuestro elemento que nos ha sido devuelto. En ese ítem, vamos a agregar cualquier oyente de eventos, un oyente de eventos de clic. Y sí, ahora en realidad podríamos definir una función de manejador, pero solo quiero ejecutarla en línea. Entonces solo voy a usar el año de sintaxis de flecha. ¿ Y qué vamos a hacer? Solo alertemos algo a la pantalla. Usemos literales de plantilla. Nuevamente, si no sabes qué es todo esto, por favor echa un vistazo al curso completo de gran maestro de mi JavaScript. Si sí sabes lo que es, genial, puedes seguir adelante. Como mencioné, esto va a ser para la fase de captura. Y ahora quiero usar la sintaxis de dólar y corsé rizado para poner en una variable. Aquí vamos a utilizar nuestro elemento DOM. Y quiero que me den el nombre de la etiqueta. Por ejemplo, el HTML, la paloma, la forma, la p, cualquiera que sea su nombre de etiqueta. Y para precisar que queremos que esto escuche en la fase de captura, ¿qué tenemos que hacer? Así es, Tenemos que proporcionar un tercer argumento al método de escucha de eventos add. Y el tercer argumento tiene que ser cierto. Ahora, lo último que queremos hacer es hacer exactamente lo mismo. Pero en la fase burbujeante, accede a nuestro elemento, agregamos el método AdDeventListener. Nuevamente, va a ser un evento click y podemos usar la sintaxis de flecha. Una vez más. Solo quiero que sepas que en realidad no tenemos que ponerlo entre corchetes rizados como lo hicimos anteriormente. En realidad podemos simplemente ejecutar nuestra función de alerta directamente escribiendo alerta. De acuerdo, solo quiero mostrarte diferentes formas de hacer las cosas. Sí, va a ser durante la fase de burbujeo. Y yo quiero hacer exactamente lo mismo. Deseo mostrar su nombre de etiqueta. Entonces aquí vamos. ¿ Es ese tipo de hacer cosas? ¿ Es intuitivo? Eso espero. Vayamos a nuestro navegador y pensemos qué pasaría cuando vayamos y hacemos clic en este elemento de párrafo. ¿ Qué crees que pasará? Daremos un paso atrás. Hacemos que todos los eventos se originen a partir de ella, se origina desde el objeto ventana de la raíz de nuestro documento, sur de España, durante la fase de captura, para que se muestren muchas alertas, ¿no? De hecho fuera se esperaba que comenzara desde la propia etiqueta HTML. Y va a burbujear hasta el en el cuerpo en se va a golpear la paloma en la forma. Y por último, un elemento de párrafo y red va a formar la fase de captura, aka fase uno. No se detiene ahí, ¿verdad? Porque ¿qué pasa después? Eso es correcto. Se va a burbujear todo el camino de vuelta hasta el elemento raíz. Espero que tenga sentido. Entonces, hagamos clic en este párrafo y veamos qué pasa. Bueno, ahí vamos. Sabemos que estamos en la fase de captura. Y es HTML. Eso es exactamente lo que esperábamos cuando tomamos un k se espera que sea el cuerpo y eso es lo que tenemos. Qué impresionante. El siguiente elemento que va a capturar, por supuesto, es el elemento div. Entonces va a hacer el elemento de forma. Y luego finalmente el elemento de párrafo. Como mencioné, no se detiene aquí, ¿verdad? Porque lo que va a pasar ahora cuando pinchemos Ok, Bueno, eso es correcto. Se va a iniciar la fase de burbujeo. Y la fase burbujeante comienza en el objetivo del evento, en este caso la p. Y va a funcionar su camino todo el camino de vuelta hasta el objeto raíz de ventana. Por lo que esperaría que la siguiente alerta sea la forma. Eso es correcto. El siguiente sería el div. El siguiente será el cuerpo. El siguiente será el HTML. Y entonces terminamos. Hombre, esta cosa realmente es impresionante y es muy, muy avanzada. Ahora entiendes todo el proceso del que el puesto más del que quiero hablar y te veré en la próxima conferencia. 17. Por Por qué capturar asuntos de burbuja: O raro, estamos viniendo por el camino. Entiendes las diferentes fases, la fase de captura y la fase de burbujeo. Pero en este punto probablemente te estés preguntando, ¿por qué importa todo esto? ¿ A quién le importa? Y esta es una pregunta muy válida, sobre todo si llevaba mucho tiempo trabajando con las venas y realmente no te has topado con esto antes. Y esta es la primera vez que escuchas hablar de estas diferentes fases. Y seré honesto, sobre todo no importa. En otras palabras, nuestra elección de escuchar un evento durante la fase de captura o burbujeo es en su mayoría irrelevante a lo que tú y yo vamos a estar haciendo el 99 por ciento del tiempo. Pero cuando siempre es el murciélago. Con eso dicho, llegarán un momento de tu vida en el que necesitarás distinguir entre capturar y burbujear, sobre todo cuando estás haciendo un poco de sus fuentes, cosas en tu sitio, lo que quiero decir, harás más probablemente tenga que distinguir entre los dos cuando se trata de menús anidados que revelan submenús cuando se pasa el cursor sobre ellos. También puede necesitar este conocimiento necesitamos tratar con una biblioteca de terceros. Con esa biblioteca tiene su propia lógica de eventos que quieres eludir por tu propio comportamiento personalizado. Y otro escenario en el que será importante distinguir entre balbucear y capturar es cuando se quiere anular algún navegador predeterminado incorporado. Aquí. Bueno, lo que es un ejemplo lo hará, cuando hagas clic en la barra de desplazamiento o te enfocas a TextField, etcétera, etcétera. Cuando quieras empezar a anular todas estas cosas, es posible que quieras escucharte sólo venas en cierta fase. Por lo que ahí lo tienes. Yo sólo quería proporcionar esta revelación. Genial, vale, pero ahora sabemos de balbucear, sabemos de capturar. Pero, ¿qué pasa si no queremos que esto suceda? ¿ Y cuando hacemos click en un elemento de párrafo? Nosotros sólo queremos que ese manejador dispare. No queremos que suceda todo el proceso de burbujeo. ¿ Qué hacemos? Bueno, agárrate a tus caballos. En la próxima conferencia. 18. Cómo detener la captura y el burbuja: lo último de lo que quiero hablar antes de agarrar otro café es cómo evitar que nuestro evento se propage, de balbucear, de continuar. En ocasiones no queremos que nuestro evento burbujee todo el camino de vuelta a la cima. En otras palabras, queremos matar nuestro evento, aka evitar que llegue a la raíz y para terminar con su vida, tenemos el método stop propagation, que impide que nuestro evento se ejecute a través de nuestro DOM. De acuerdo, suena bastante simple. Entonces, ¿cómo funciona? Llame aquí nuestra estructura DOM. ¿ Te acuerdas de éste? Y recuerda insertamos un oyente de clics en ese de abajo. Will LET también insertará un oyente de clics en el div con ID de tres a. ¿ Y qué crees que pasaría si pusiéramos el método de propagación stop en el div con ID de tres a, qué pasaría? Entonces digamos que el usuario viene con cualquier botón de clics uno. Lo primero que sucede es que los eventos puntean en la raíz de nuestra página, que es el objeto de ventana. Un danés comienza a viajar por el árbol DOM, deteniéndose a lo largo de cada elemento. En el camino sabemos esto, se queda va a golpear este div con tres como su ID. ¿ Y qué va a pasar? Bueno, las venas se van a detener en este punto. ¿ Por qué? Bueno, porque en realidad habíamos dejado de que se llamara a la propagación a este manejador. ¿ Tiene sentido? No te preocupes si no lo hace, quiero saltar a la consola ahora mismo y quiero codificar esto contigo para que puedas verlo en acción. Ver ahora. 19. Un ejemplo de usar stopPropagation: O recuerdo que teníamos este código unas cuantas conferencias atrás. Acabamos de tener un botón uno y un botón dos. Y insertamos un oyente de eventos, específicamente un oyente de eventos click en cada uno de estos botones. En realidad, sabes qué, ni siquiera necesitamos botón para, déjame solo deshacerme de botón a esto solo nos va a confundir. Por lo que acabamos de tener el Botón 1 y agregamos estos oyentes de eventos en el fondo uno. Pero recuerda que queríamos que el evento del manejador de clics fuera disparado durante la fase de captura y durante la fase de burbujeo. Y luego tuvimos dos consolas. ¿ Recuerdas eso? Ahora quiero mezclar las cosas, ¿no? En realidad quiero agregar algo sobre, ya sabes qué TO, acabamos de tener un botón que en realidad quiero crear. Vamos a crear un div con una ID de tres. Y luego dentro de este div, quiero insertar este botón. ¿ Tiene sentido? Entonces pueden irse, pero ahora quiero mezclar las cosas como SATA. En realidad quiero agregar un oyente en estos elementos div. Entonces hagámoslo. Y oyente en nuestros div padres elementos. Lo primero que queremos hacer es definir ese div en una variable. Entonces, definámoslo como tres. Y por supuesto comenzamos con nuestros objetos de documento. Obtenemos elemento por ID. El ID aquí es de tres, un secado bastante sencillo. Lo siguiente que quiero hacer es añadir un oyente de eventos. Entonces eso es acceso. Agregar oyente de eventos. Vamos a estar escuchando el evento click. Y entonces solo llamemos a nuestro propio manejador personalizado, lo deja. Y queremos escuchar esto y ejecutar este mango cuando quiera hacerlo durante la fase de captura. Entonces por eso tenemos que especificar verdadero como tercer argumento. Y por último, sólo tenemos que definir a nuestro manejador. Uno. Muy sencillo, muy intuitivo. Y quiero una consola log algo a la pantalla. Digamos que te han detenido en tus huellas. Y lo último que quiero hacer es que quiero agarrar nuestro evento en sí y ¿cómo hacemos eso? Bueno, podemos definir eso en cualquier variable. Nosotros una vez, recuerda dije que la mayoría de los desarrolladores en la práctica estándar para simplemente definirlo como E. Así que ahora queremos agarrar nuestro evento real y queremos llamar a este método de propagación stop en él. Espero que eso tenga sentido. Entonces pensemos en lo que sucederá cuando vayamos y hagamos clic en ese botón uno. Sabemos que el evento comienza en la raíz, ¿no? Y viaja por cada elemento. Se va a golpear eventualmente los tres elementos, que también tiene el mismo método de escucha de eventos click en él, esa cosa y ejecutar esa función. En este caso, se va a registro de consola, te han detenido en tus pistas. Pero entonces va a detener la propagación. Va a impedir que este veteado viaje más allá. Por lo que no esperaría que esta función de manejador de clics siquiera se llame. A ver si escribimos. Vayamos a nuestro navegador. Abramos realmente la consola. Y vamos a dar click en este botón. ¿ Estás listo? Te han detenido en tus huellas y no pasa nada más. Y para demostrártelo, Vayamos a aquí y comentemos la propagación del stop. Volvamos a nuestra consola, despeja y volvamos a hacer clic en ella. Este será el comportamiento predeterminado. Se va a mostrar que te han detenido en sus huellas, pero luego va a seguir bajando. Se va a apretar ese botón. Se van a llamar a los manejadores de eventos, y luego se va a llamar de nuevo durante la fase de burbujeo. Por lo que ahí lo tienes. Espero que sea hora de hundirse. Espero que esté empezando a ser más intuitivo. Y como puedes ver, no es tan difícil una vez que entendemos lo básico, ¿verdad? Antes de pasar a la siguiente conferencia, sólo quiero mencionar algo rápidamente y ese es este método de parada de propagación va a detener el movimiento de las venas que viajan hacia arriba, ¿verdad? Pero en el elemento actual existente, ejecutarán todos los demás manejadores. En otras palabras, si un elemento tiene varios manejadores de eventos en un solo evento, entonces incluso si uno de ellos detiene el balbuceo, todos los demás manejadores de eventos era ejecutar. Y eso puede estar absolutamente bien un bebé lo que quieras. Pero si realmente quieres detener el proceso de burbujeo e invadir manejadores en el elemento actual de que se ejecute. Estos otro método estrechamente relacionado llamado detener la propagación inmediata. Yo sólo quería como que supieras que eso existe. Y esto sólo significa que a menudo se despide. Ningún otro lado se ejecutará incluso en estos elemento existente. Espero que te diviertas, y te veré en la próxima conferencia. 20. Delegación de eventos: introducción: En una de las conferencias anteriores, vimos que distinguir entre Katherine versus el empaquetamiento es útil, pero tal vez no es del todo crucial porque el 99 por ciento del tiempo, realmente no nos importa. Nos alegramos sólo de escuchar un evento sobre la fase burbujeante. Pero esto no quiere decir que balbucear en sí no sea crucial de entender. De hecho, si quieres tomarte en serio tu desarrollo web Corea, necesitamos entender balbuceando. Y uno de los mayores beneficios de balbucear es lo que se conoce en la industria como delegación de eventos. ¿ En qué es la delegación de eventos y cómo encaja? Bueno, la idea es muy sencilla. Digamos que tenemos muchos elementos que queremos ser manejados de una manera muy similar. La primera opción es que podríamos adjuntar oyentes de eventos a cada uno de esos elementos. Pero como se puede escapar, estoy consiguiendo con esto que es muy ineficiente. Voy a estar teniendo mucho código redundante y repetitivo. Entonces, en lugar de poner manejadores de eventos en cada elemento, todo lo que necesitas hacer es elegir un antepasado común, poner cualquier manejador de eventos que quieras en las redes y confiar en el burbujeo. Y lo que es bastante ingenioso es que recuerden ese método de escucha de eventos add. Lo que nos da cuando un evento está bien, nos da ese objeto de evento. ¿Recuerdas esa E? Y en ese E En realidad podemos acceder al ítem mic desencadenó el evento con su propiedad de objetivo de evento. ¿ De qué estoy hablando? Bueno, creo que la mejor manera es mirar un ejemplo muy final donde tenemos muchos bloques y lo que sea bloqueo click en, quiero cambiar ese color. Muy, muy cool. Y luego quiero que pruebes tu suerte a pocos retos. Así que disfrútalo y empieza a realizarlo. Este es el mayor beneficio a la hora de entender el balbuceo. Espero que te divirtieras, espero que tengas un café. Desperdicias la mía. Porque la mía. Entonces sí tengo de punta. Sí. Te veré en la próxima semana para disfrutarlo. 21. Reto: introducción: Bienvenido a este increíble reto, o no puedo esperar para meterte en él contigo. Pero, ¿de qué se trata todo? Vamos, en primer lugar, se puede ver que tenemos una mesa en nuestra pantalla es un bateo en la mesa. Y si hago clic en este bateo sobre la mesa, no pasa nada. Pero lo que pase cuando haga clic en uno de estos números solo hará clic en ese número uno. Podemos ver que va a leer. Ahora cuando voy a dar click en el encabezado de la mesa, alrededor de la mesa, no pasa nada que esté limitado en el número dos. Ahora, como podemos ver, el color rojo, ese color de fondo sobre el número uno ha desaparecido. Y ahora el bloque número dos tiene un color de fondo de rojo. Entonces sé que podrías estar pensando y Clyde, este es un ejemplo súper simple y eres 100 por ciento de grado. Pero las lecciones que vas a aprender en este reto de inhibición, muy, muy importantes. Así que da una idea de cómo puedes codificar esto. Recuerda una cosa sin embargo, queremos confiar en lo que hemos aprendido sobre remar. Recuerda, balbucear es una técnica muy, muy poderosa y no muchos se desarrollan como verdaderamente aprecian el poder de entender al público. No quiero que agreguen oyentes de eventos en cada uno de estos elementos. Quiero que agregues un oyente de eventos sobre el padre porque sabes que no importa donde hagas click en el DOM, ese evento click va a atravesar el Dom, No es que va a viajar arriba, va a burbujear todo el camino hacia arriba en nuestro elemento raíz. Entonces con eso en mente, dale una oportunidad, toma un café y simplemente disfrútalo. Diviértete con estas cosas, porque de eso se trata todo esto. Se trata de divertirse. Pero en el camino, aprender información muy valiosa también. Entonces te veré en la próxima conferencia. 22. Reto: crea nuestro HTML: Nada como un buen, buen café. Y este va a ser un pequeño ejercicio realmente divertido. Porque como viste, lo que vamos a tener es que vamos a tener un montón de cuadras cuadradas. Cuando hacemos clic en esos bloques, queremos que los colores cambien. Y recuerda qué es lo que estamos tratando de hacer. Estamos tratando de utilizar nuestros conocimientos sobre burbujeo porque la levadura podríamos adjuntar un oyente de eventos individual a cada bloque. Eso significa que el opcode se vuelve muy repetitivo y caen redundantes. En realidad, simplemente no es eficiente en el rendimiento. Entonces ahora vamos a confiar en que no importa donde hagamos clic, ese evento va a burbujear. Y siempre va a burbujear más allá del último div de padres, ¿verdad? Por lo que podemos simplemente adjuntar un oyente de eventos a su div padre, sabiendo que siempre tenemos acceso al objetivo del evento en sí. Sé que podrías estar un poco raro por los más viejos, pero no te preocupes, vamos a meternos en ello ahora mismo. Aquí puedes ver tenemos a nuestro editor de textos a la izquierda. Tenemos nuestro navegador a la derecha, así que en realidad podemos ver qué es lo que está teniendo un arreglo nuestro código en el navegador. Por lo que esta conferencia específica aquí, quiero que nos sentemos nuestro esqueleto. Y en la próxima conferencia comenzaremos a agregar JavaScript y ver esto en acción. Así que disfrútalo y diviértete. Esta va a ser una conferencia muy informativa, audios. Entonces lo primero que queremos hacer es que queremos sentarnos nuestro HTML. Y puedes ver aquí tengo un archivo index.html y tengo un styles.css. De manera muy simple, vamos a configurar una plantilla HTML y vamos a empezar a crear la carne de nuestros lados. Voy a envolver todos esos bloques grises en una mesa. Y esta mesa es lo que van a ser los padres de todo lo demás. Y por lo tanto, es esta tabla a la que queremos adjuntar un oyente de eventos. Entonces solo quiero darle un i D. Y recuerda de qué estamos aprendiendo aquí. Aprendemos sobre delegación de eventos. Entonces, ¿por qué no sólo llamar a esto la mesa de delegación por falta de una palabra mejor. Por lo que irían con lo que nuestra mesa. Y ahora lo que quiero hacer es que creemos un encabezamiento para toda nuestra mesa. Añadamos un encabezamiento con la etiqueta th. Y no lo sé, solo podemos decir, Hey, vamos a tenerlo un poco audaz. Podemos decir delegación. Tabla, haga clic para cambiar de color. Entonces guardamos eso. Ahí vamos. Podemos verlo en nuestro navegador, pero eso es sólo el encabezado de la tabla. Lo que podemos hacer ahora es añadir otra fila. Y en esta fila vamos a incluir sólo algunos puntos son ahora. Y quiero sólo atrevido. Enfriar en el número uno. Por lo que ahí vamos es el número 1. Y vamos a tener tres columnas. Entonces ahí vamos. Puede haber uno, esto puede ser dos, y esto puede ser, este formato se ve terrible. Se puede ver la unicidad a la izquierda y los 23 son manojo a los disturbios. Y si solo inspeccionas esto, sabrás exactamente lo que está pasando. Se reduce a nuestro bateo por cierto. Te mostraré por qué ahora, solo expande esto rápidamente. Lo que realmente está pasando aquí. Golpear a Zao está ocupando todo el espacio en una celda. En otras palabras en una columna y es columna neta estirada, razón por la cual esto está sucediendo. Entonces lo que realmente queremos hacer es este rubro. Queremos extendernos a través de tres columnas, ¿no? Entonces te mostraré lo que quiero decir ahora, vuelve a cómo lo teníamos. Ahí vamos. Y con este bateo, solo queremos colspan en tres columnas. Ahí vamos. Ahora todos están distribuidos de manera uniforme. Entonces ahí vamos. Esa es literalmente nuestra primera fila. Yo entonces quiero tener otra fila. Y por supuesto, para eso pueden ser cinco y eso puede ser seis. Y lo adivinaste. Tengamos otro Podemos tener 789. ¿ Cómo se ve eso? Está empezando a tomar forma traída. Pero ahora vamos a ir a nuestros estilos aquí rápidamente. En primer lugar, necesitamos incluir una cabeza. Y dentro de la sección de cabecera podemos incluir un enlace a nuestro archivo CSS. Y sabemos que se llama estilos. Podemos ir a nuestra hoja de estilo, por supuesto que ahora está vacía, pero solo marquemos esta mesa para que se vea un poco más funky. Entonces, ¿cómo debemos iniciar nuestra mesa primero, vamos a agarrar nuestra mesa y podemos agarrarla usando su ID, que llamamos mesa de delegación. ¿Te acuerdas? Entonces tenemos nuestra mesa. Lo siguiente que queremos hacer es querer darle estilo a cada celda, cada celda hija en nuestra mesa. Por lo que sólo podemos marcar la etiqueta td. Y aquí vamos. Podemos definir el ancho de cada celda, tal vez unos 150 píxeles. Se ve mejor. Y podemos hacer lo mismo con la altura. Hagamos tal vez un 100 pixeles empezaría a verse bien. Y podemos tomar la línea al centro. Y vamos a darle un bonito fondo de luz. Por lo que estos son de estilo rápido. Tiene nuestro HTML y ahora quiero que intentes y piensen en cómo podemos editar los intestinos a esto. Recuerda lo que queremos hacer cuando hacemos click en un número, queremos que su color de fondo cambie para leer. Así que pausa el video aquí, piénsalo y te veré en continuar en la próxima conferencia. 23. Reto: solución: De acuerdo, aquí es exactamente donde lo dejamos. Recuerda que terminamos nuestro HTML y tenemos estos pequeños bloques cool, malos, claro, como sabes, si hacemos click en estos bloques, no pasa nada y esto es lo que quiero que hagamos ahora mismo. Entonces entrémonos en ello. ¿ Cuál es el primer paso que debemos hacer? Bueno, vamos a montar. Necesitamos incluir una etiqueta de script directamente. Etiqueta de script. Y construyamos esto lentamente en pasos. De acuerdo, entonces recuerda lo que queremos hacer. Nosotros queremos confiar en el efecto burbujeante, el hecho de que los eventos burbujeen a través del DOM. Entonces con eso dicho, lo primero que queremos hacer es que queremos adjuntar un oyente de eventos a nuestro elemento padre, que en este caso es la tabla. Por lo que aquí queremos definir una variable y su llamarlo tabla. Y podemos conseguir esta tabla accediendo a un asesor que obtiene elemento por método ID. Sabemos esto, hemos pasado por esto muchas, muchas veces y su id es mesa de delegación. Solo comprobemos que es la tabla de delegación ID. Eso es correcto. ¿Qué tiene de genial esos editores de texto? Si un resaltado podemos ver que es exactamente el mismo derramamiento, lo carga, va a funcionar, ponerlo de esa manera. Entonces ahí vamos. Tenemos nuestra mesa, y ahora queremos adjuntar un oyente de eventos. Tan táctil y oyente de eventos. Por lo que accedemos a nuestro objeto de mesa. Después accedemos a un método llamado add event listener. De nuevo, lo sabemos. Queremos escuchar un evento de click. Y luego queremos definir nuestra función personalizada de manejador de eventos. Y es solo llamarlo cambiar de color porque eso es exactamente lo que estamos queriendo hacer. Entonces ahí vamos. ¿ Qué tan guay es esto? Ya empezamos a hacerlo. Y se puede ver cuando lo hacemos por partes, no es tan difícil. El siguiente paso es, por supuesto, es que necesitamos definir esta función ChangeColor. ¿ Y qué estamos haciendo aquí? Recuerda lo que va a pasar ahora, cuando hacemos clic en cualquiera de esas células dentro de la mesa, las venas van a burbujear hacia arriba a la derecha. Y podemos demostrar que sí. Si registramos la consola, se ha hecho clic en algo y tenemos nuestro navegador, accedemos a la consola. Simplemente haz que esto sea un poco más grande. Facultad me lo hacen a pantalla completa. Accedamos a nuestra consola. Y ahora vamos a dar click, digamos el número uno, se ha hecho clic en algo. El número cinco, de nuevo, se ha hecho clic en algo. Su estatura. Qué impresionante este objetivo. Pero sigamos. Volvamos a nuestro editor de textos. Hagamos este tamaño completo ahora. Y ahora podemos empezar a meternos en el pellejo, ¿verdad? Porque ahora mismo sabemos que se ha hecho clic en algo, pero no sabemos en qué se ha hecho clic. Y recuerda, con este método AdDeventListener, fin de semana dado un objeto real y objeto de evento. Y para poder acceder a ese objeto, tenemos que ponerlo dentro de una variable, como mencioné anteriormente en el curso, más comúnmente, usamos la letra E. Ahora tenemos este evento y en realidad podemos simplemente definirlo en otra variable. Digamos que los objetivos tardíos sean los togas de evento. Y luego para demostrártelo, podemos consola cerrar la sesión de este objetivo. Sabrán exactamente de dónde salió este evento. Volvamos a nuestro navegador. Despejemos la consola y hagamos click en esta primera. El objetivo no está definido. ¿ Qué he hecho mal? A esto se le llama terroristas debe ser blanco. Uga. Simple error de derramamiento es volver a nuestro navegador. Eso está claro, esta consola y vamos a dar click en esta primera. Y ahí vamos. Literalmente estamos recogiendo este elemento td. ¿ Qué tan impresionante es esa fuerte? Por lo que sabemos ahora podemos acceder al elemento real que se desencadena ese evento. Entonces ahí vamos. Quitemos esa consola. Lo que se podría pensar que tenemos que hacer ahora es cambiar el color. Pero ahora ¿cómo cambiamos el color? Bueno, hay algunas maneras en que podemos hacerlo. La forma más fácil que se me ocurre es definir una cláusula y luego simplemente agregar eso cerca de ese elemento en el que se ha hecho clic. Vamos a nuestra hoja de estilo rápidamente. Te mostraré lo que quiero decir. Y lo que quiero hacer es volver a acceder a nuestra mesa de delegación. Y ahora esta vez lo que quiero hacer es añadir nuestra propia clase personalizada a cada derechos de etiqueta td. Y quiero llamar a esa causa, no sé resaltar porque eso es lo que estamos queriendo hacer. Queremos resaltar la celda un cierto color. Y por supuesto, lo que estamos queriendo hacer aquí es simplemente que queremos cambiar su color de fondo a rojo. Eso es todo lo que queríamos hacer. Entonces si volvemos aquí a nuestro índice, impresionante, Así que tenemos nuestra clase de punto culminante, que sabemos queremos agregar esa cláusula a cualquier elemento desencadenante el evento. ¿ Cómo agregamos una cláusula? Bueno, es muy sencillo. Podemos acceder a nuestro objetivo. El artículo que desencadena desviado. El Dean tiene un objeto llamado lista de clases. Objeto es un método llamado add in. Es realmente así de simple. Simplemente estamos agregando una clase a este elemento. Y la clase que queremos sumar, por supuesto, es destacada. Guardemos esto y vayamos a nuestro navegador. Este va a ser un gran problema con lo que acabamos de hacer. Entonces déjame hacer click en el número uno, por ejemplo. Cambios a leer. Pero, ¿cuál es el problema? ¿ Se puede prever aquí un gran problema? Bueno, eso es correcto. Si vamos y hacemos click en otra celda, ¿qué va a pasar? Escribamos que resuelve va a ir a leer, pero la celda original número uno estaría marcada, no cambia. Sigue siendo rojo. Entonces hay un ligero problema con nuestro código que quiero arreglar ahora. Podemos volver a nuestro código aquí. Quiero eliminar agregando una clase el año pasado y te mostraré por qué en un segundo. Lo que quiero hacer en este momento es que quería encontrar nuestra propia función personalizada, y ya verás por qué un poco más tarde. Y solo llamemos a esta función destacada. Y queremos resaltar este objetivo, ¿verdad? Entonces el siguiente paso que vamos a tener que hacer es que vamos a tener que definir una función llamada Resaltar. Y va a tomar un nodo. En este caso, en realidad va a tomar ese elemento, el elemento objetivo. Y esta es una especie de manera quiero que regulemos qué artículo se hace clic actualmente frente al anterior declarado. Entonces déjame explicarte. Al principio mismo de nuestro script, Sólo definamos una variable vacía y llamemos a esta variable elemento seleccionado. Y inicialmente vamos a asignarlo a un valor de nulo. Entonces lo que es realmente genial es que cuando empezamos a ejecutar esta función de resaltado, ahora podemos introducir una declaración if. ¿ Y qué hace esta declaración si va a contener? Bueno, pensemos en qué es lo que queremos hacer cuando hacemos click en una de esas celdas TD, queremos entonces definir una variable que se le asigne a esa celda. Y luego la próxima vez algunas cosas Dan efecto variable tiene un valor. Después queremos quitar su clase de la variable head. Sé que suena raro, pero vas a ver exactamente cómo funciona esto ahora. Entonces todo lo que quiero hacer es que queramos decir si el elemento seleccionado no es igual a nulo, lo que significa que en realidad hemos seleccionado previamente un elemento. ¿ Qué queremos hacer? Bueno, queremos tomar ese elemento seleccionado, queremos acceder a su método de lista de garras. ¿ Recuerdas eso? Pero esta vez no queremos agregar Dewey. Queremos eliminar esa cláusula llamada subrayados. Entonces ahora esto eliminará en el elemento previamente seleccionado Xj un poco haciendo escenas o R, eso está todo bien y bien, pero ahora lo que quiero hacer es que necesitamos asignar el nuevo elemento en el que hemos hecho clic a la variable de elemento selecto. Asignar el nuevo elemento td. Hemos hecho clic en la variable de elemento select. Y por supuesto, esta primera declaración si es deshacerse de los elementos td previamente seleccionados. Destacar clase, ¿eso es un poco hacer santos? Entonces nos hemos deshecho de la anterior. Ahora queremos que asigne el nuevo elemento td a esta variable. Entonces, ¿cómo hacemos eso? Vamos muy sencillos. Accedemos a nuestro elemento seleccionado. Y por supuesto que asignamos eso al valor del nodo. Y entonces por supuesto lo que queremos introducir running para acceder al elemento seleccionado, su método de lista de clases. Y ahora queremos agregar una clase llamada resaltar al ítem recién seleccionado. Algo que tiene sentido. Eso espero, de verdad lo espero. Soy apático. Acude rápidamente al navegador, a ver cómo vamos. Despejemos la consola y pinchemos en el número uno. Entonces ahí vamos. Es rojo. Hagamos click en el número 2. Sí. Wow. Esto es asombroso. ¿Verdad? Vuelve a hacer clic en el número 1. Quizás si de verdad estás queriendo convertirte en una verdadera materia más dura de la abuela, notarás que esto no es del todo perfecto. ¿ Por qué? Bueno, por algunas razones. Uno es lo que pasa si hacemos click en este encabezamiento de la mesa? Bueno, el tipo al que podemos ver el calentamiento de la mesa quita el color del elemento td, pone un problema, ¿verdad? Y es sólo refrescar esto. Vamos a dar click en uno. ¿Qué pasa si hago click en la brecha? Sí. En otras palabras, los márgenes y los paddings entre sí. Bueno, lo mismo va a pasar si el usuario hace eso accidentalmente , el color desaparece. Y eso no es lo que queremos. Solo queremos que el color desaparezca al hacer clic en otro elemento td, un elemento hija de mesa, vacunas. Entonces todavía hay algo que tenemos que hacer para que tipo de terminar esto fuera y perfeccionar era el video ahora y tratar de resolverlo. Eso realmente es una solución rápida. Pero es un poco de matiz. Eso es bastante complicado. 24. ¿Qué es la API de la lista?: Antes de seguir adelante, solo quiero aclarar algo que tal vez te estés preguntando. Y eso es lo que es esta propiedad de lista de clases si tuviéramos que existir? Bueno, permítanme decir que la lista de clases es una API, y esta API devuelve una lista de tokens DOM en vivo. Y a qué me refiero con una API simplemente seguirá siendo la baraja cuando trabajemos en el navegador. El propio navegador nos proporciona muchas API diferentes. Ya hemos pasado por esto con anterioridad. Una de estas API está fría, esta lista de clases y otros sockets web de API. También tenemos las venas API, excéntrica cetera. Este es sólo uno de muchos. ¿ Y qué nos permite hacer esta lista de cláusulas? Bueno, nos da una manera fácil de agarrar todos los lanzamientos de un elemento HTML en particular. Y estoy seguro de que ya puedes adivinar lo útil que será esto. Por ejemplo, podemos usar esta propiedad para agregar, eliminar y activar clases CSS en un elemento en tiempo real. Y ha existido desde hace bastante tiempo. De hecho, fue introducido por la especificación HTML5. Y lo realmente genial es que tenemos muchos métodos disponibles para nosotros en esta API de lista de clases. Tenemos add, remove contiene enlaces totales de ítem a string y value. No vamos a estar usando todos estos en el curso, pero vamos a estar usando los más populares. Vamos a estar usando add, remove, e incluso toggle. Este EKG un poco haciendo escenas. Puede que te estés preguntando sin embargo, ¿qué es esta lista de tokens DOM? ¿ De qué se trata todo eso? Bueno, esto devuelve un tambores. Rutas bastante obvias. Seguro que lo adivinaste. Es un tipo especial de lista. Y es una lista que nos da todos los métodos que acabamos de ver en la diapositiva anterior. Recuerde, Agregar, Eliminar, toggle, etcétera, etcétera. Y probablemente solo encontrarás la lista de tokens DOM con esta API de lista de clases. Entonces ahí vamos. Yo sólo quería darle rápidamente un resumen de lo que hace la propiedad enumerada de la cláusula era. Espero que estés aprendiendo una tonelada y te veré en el próximo reto. 25. Reto: perfecciona nuestra solución: ¿ Lo averiguaste? No te preocupes si no lo hiciste. Eso no es lo importante. Lo importante es que le diste un poco de pensamiento y le diste una oportunidad. Vayamos a nuestro editor de textos aquí. ¿ Y cómo podemos lidiar con ello? Bueno, tenemos que volver a la fuente. Recuerda la función de resaltado, solo queremos que eso suceda. En lo que hemos hecho clic es un elemento TD. Todo lo demás. En realidad queremos que no pase nada. Si el usuario va y hace clic en el golpeo de la mesa, queremos que no suceda nada. Entonces sabemos por esa razón, necesitamos un tipo de tener un gatekeeper, net gatekeeper puede ser esta primera función, esta función ChangeColor. Entonces lo que no queremos hacer es llamar inmediatamente a esta función de objetivo de resaltar. Necesitamos una declaración if. No te preocupes. Empecemos con una declaración if. Y si no estás seguro de cómo funciona la declaración if, por favor echa un vistazo a mi curso completo de gran maestro JavaScript. Realmente es impresionante. Pero de todos modos, para aquellos de ustedes entienden lo que es, genial, podrán seguir adelante. ¿ Cuál es lo primero que podemos probar para eso? Nuevamente, las muchas formas de despellejar a un gato cuando se trata de programación. Esto sólo se ocupa de la situación en la que el elemento objetivo con Tiktok no es igual al elemento td. Entonces lo que podemos decir entonces es que el nombre de la etiqueta objetivo, correcto, no es igual a TD. En ese caso. Nosotros no queremos hacer nada. Y podemos simplemente ejecutar una declaración de retorno que en efecto, decirle al analizador de JavaScript que salga de todo este si la ejecución. Eso es todo lo que hacemos. Pero entonces por supuesto queremos lidiar con la situación de manera. Ese nombre de etiqueta es Td. Entonces el medio a la simple declaración else. Y por supuesto aquí sabemos que el elemento en el que hemos hecho clic es un elemento TD. Y en ese caso eres un 100 por ciento, cierto. Aquí es donde queremos ejecutar una función de resaltado y pasar en el objetivo como su argumento. Crew, hemos hecho una cantidad increíble o espero que todo tenga sentido. Volvamos a nuestro navegador. Despeja la consola, Vamos a dar click en una. Basta con dar click en cinco, conseguir que todo funcione. Ahora vamos a dar click en el encabezado. No pasa nada. Hagamos click entre estas celdas. No pasa nada. Por lo que literalmente tenemos una mesita perfecta. Qué impresionante es el final para que Herbie se divirtiera. Espero que hayas aprendido mucho en esta conferencia. Y si volvemos al código, sí, Sólo tómate tu tiempo, pasa por él, entiende paso a paso qué es lo que hemos hecho muy rápido. Todo lo que hemos hecho es que obviamente hemos definido nuestro HTML en la parte superior. Hemos estado en el archivo styles.css, que estilos voy a poner muy bien. Y luego en la parte inferior tenemos nuestro JavaScript todo encerrado dentro de una etiqueta de script. Y dentro de la etiqueta de script empezamos definiendo una variable llamada elemento seleccionado. Y recuerda por qué hicimos esto. Hicimos esto para que podamos hacer un seguimiento de qué ítem con seleccionado actualmente en y cuando seleccionamos un nuevo elemento, fuimos a eliminar esa cláusula de reflejos sobre el elemento anterior que seleccionamos. ¿ Por qué? principio solo definimos una variable vacía. Y ese tipo variable de nos ayuda a realizar un seguimiento de qué elemento está seleccionado actualmente. Dentro de grab our table, agregamos un oyente de eventos a esa tabla y aprovechamos burbujeo de eventos cada vez que un evento click se burbujea a esa tabla, esta función ChangeColor se va a ejecutar. Verificamos si ese elemento objetivo, el elemento que activó el evento click. Verificamos si ese es un elemento TD. Y si lo es, ejecutamos una función llamada esa función resaltando comprueba el elemento seleccionado. Y si no es nulo, elimina ese nombre de clase. Y después de eso si la sentencia se ejecuta dentro asignar el nuevo nodo con clic en el elemento seleccionado, y luego le agregamos una clase de resaltado. hoy lo tenemos en serio Walden, has llegado tan lejos, lo has hecho tan bien. Y ahora quiero que pruebes suerte ante unos retos. Creo que sí, creo que en ese punto ahora mismo, has hecho una cantidad increíble en serio, afortunada necesidad también celebrar estas cosas. Perdón, sacaré la música. Y baila poco. Relájese y disfrute. Agarra un café. Y nos vemos en la próxima conferencia. 26. Reto: introducción: Bienvenidos a otro reto. Espero que te estés divirtiendo. De hecho, me encantan estas cosas y me encanta juntarlas y pasar por ellas contigo realmente es fascinante. Yo sólo lo disfruto, pero basta, blubber, blubber. ¿ De qué se trata este reto? Bueno, estoy seguro que probablemente lo puedas adivinar, pero aquí tenemos tres citas generales en su propio blog. Y cuando haces click en la pequeña x de la esquina derecha, ¿qué pasa? Eso es correcto. Ella se fue. Se lo quita por completo. Es entonces aniquilar. De todos modos, se obtiene el punto cuando el usuario hace clic en eso. Esas cotizaciones enteras deberían desaparecer. Imagen solo se refresca sería cuando el usuario hace clic en la cotización real, no debería pasar nada ahí. Sólo cuando el usuario hace clic en ese botón. Apenas pensé antigua ella. Entonces dale una oportunidad. En la próxima conferencia, voy a codificar el HTML con ustedes. Si no quieres codificar HTML, está bien. No he creado el archivo, pero en serio, es la mejor manera de aprender. Entonces independientemente de si vas a codificar el HTML conmigo y te veré en el video de soluciones también donde codificamos el JavaScript, manipulamos el DOM, utilizamos el resto de delegación de eventos en conocimiento de burbujeo. No queremos estar poniendo oyentes de eventos en cada uno de estos puntos. Nosotros queremos ponerlo en los elementos de un padre de familia. De acuerdo, así que ten eso en cuenta. En fin, disfruta de un agarrar un café, y te veré en la próxima conferencia. 27. Reto: crea nuestro HTML: Impresionante. Nos estamos metiendo en el próximo reto. Y como siempre, el know-how funciona cuando escribo el HTML contigo porque creo que es base para aprender de esa manera. De verdad lo hago y te animo a seguir adelante. Pero si no quieres seguir adelante y realmente eres un monstruo en HTML y todo ese tipo de cosas. No entres en pánico. He incluido un enlace al HTML en esta conferencia. Por lo que solo puedes recoger desde ahí. Pero si viniste a codificar junto a mí, genial, Vamos a meternos en ello ahora mismo puedes ver arriba en mi código de Visual Studio en blanco y el navegador en los derechos. Y todo lo que tengo son dos archivos, un archivo índice y un estilos. Eso es todo. ¿ Por dónde empezamos? Como siempre, quiero empezar con un simple archivo HTML. Y antes de que olvidemos esto, solo incluye nuestra hoja de estilo. Ahora mismo. Ahí vamos. Voy hoja de estilo está todo conectado y empiezan a pudrirse cuerpo. ¿ Recuerdas lo que tratamos de hacer? Estamos tratando de utilizar nuestro conocimiento de burbujeo. Vale, Así que quiero envolver todo el código dentro, llamarlo una delegación de, Vamos a crear un div con ID de delegación dentro de este cuadro de delegación div, todo esto abarcando uno, el desarrollo de los padres. Yo quiero tener cotizaciones fuera y cada cotización tipo de luce igual. Recuerda que tenemos rumbo, compramos cierto fondo. Tenemos la frontera superior. Y debido a que son algo repetitivos, lo que debemos hacer es crear una cláusula y rentar cada puerto dentro de otro desarrollo con cierta cláusula. Entonces con eso dicho, vamos a crear un div y vamos a tener una clase de box porque eso es lo que estamos haciendo. Ponemos cada cotización en su propia caja. En este punto, recuerda lo que hemos hecho. Tenemos nuestra caja y dentro de cada caja queremos cotizar y recordar lo que cada cabeza bastante. Entonces un simple, tenía un rumbo y luego tuvo que realmente toma. Y luego por supuesto tenemos el botón de cerrar en la parte superior derecha. Entonces en primer lugar, hagamos el bateo esto solo a una etiqueta H3 porque no lo quiero tan grande. Y golpear puede ser frío en una cadera, cadera, cadera. Aquí vamos. Y pueden necesitar el abandono real hecho haciendo. Entonces, la cotización solo puede estar en una etiqueta de párrafo normal. Tenemos nuestro párrafo y en lugar de escribirlo de solo ahorrar tiempo, realidad he guardado todas las citas y otras pantallas deliciosas copiarlo y pegarlo. Sí. Estos son bastante como un hipopótamo. Un hipopótamo o simplemente un realmente cool up optimizan. Para una brillante, brillante, esa es una típica broma de papá, ¿no? En fin, tenemos nuestro rumbo, nos hemos adquirido, y luego necesitamos el botón de cerrar. No quieres que crees una etiqueta de botón con una clase de cool vicioso, se quitó. Y sólo queremos incluir a la pequeña XD. Entonces sabemos que eso es un botón. Hacemos click en ese botón y queríamos movernos. No te preocupes por el estilo de esto. Ahora, vamos a meternos en eso en nuestra hoja de estilo. Esto es sólo sentar el HTML. Entonces ahí vamos. Idea es ofertas cotización, todo lo que tenemos que hacer ahora es copiar. Esto sí vuela directamente Guardar y todas son solicitudes. Cómo alguien fue esto, esto sólo cambia. Por supuesto, cada uno de estos encabezamientos, este bateo puede ser frío. Sigan adelante. Y déjame agarrar el texto en mi otra pantalla. Sí, equidad. Y esta cita era de Winston Churchill. Y luego finalmente, pongámonos en uno perdido. Y podemos decir, prestar atención. De nuevo, déjame solo copiar y pegar esto de mi otra pantalla aquí solo para ahorrarnos tiempo. Ahí vamos. Enfriar hackles esto. Por lo que estos son HTML. Lo último que quiero hacer para limitar solo desplácese hasta la parte superior aquí es condimentar esto un poco aplicando estilo fresco se hizo Hojas de estilo Talk y hace que el pensamiento jazzing esto up. El primero que quiero hacer es en un agarrar nuestro cuerpo, bien, y quiero darle estilo a todo en Siguiente, y vamos a tratar con margen primero. Digamos que queremos un margen de 10 píxeles y queremos todo alineado al centro. Entonces podemos definir un ancho de 450 píxeles. ¿ Cómo se ve eso? Y luciendo buenas sequías sainted. Tiene un ancho de masa para nosotros. Y entonces las fuentes son apenas promedio. Entonces, solo pongamos font-family. Unidad coreana. Eso es divertido. David chico, eso se ve bastante guay. Parece que es una cotización adecuada. Estadísticas arriba amigo, empiezan a ponerse más específicos ahora mismo. Y dejemos de trabajar en la cima. Hablemos trabajando con nuestra etiqueta h3. El, vamos a deshacernos del margen. Y podemos tener un poco de relleno en la parte inferior. Entonces eso es bueno. Parte inferior acolchada. No lo sé. Camión de 0.3 m. Sí, eso está bien. Entonces así es como H3. Ahora, quiero empezar a trabajar con nuestro párrafo. Vamos a levantarnos padre o apagado de nuevo, esto quitar margen. Y de nuevo, quiero afectar al fondo de relleno o al fondo de relleno. Y incógnitas. 0.5 Apunta un poco más, tal vez 0.8 a él. Creo que eso se ve bien. Vamos a ser H3 y nuestro párrafo. Lo siguiente que quiero darle estilo es este botón quitar. Deberíamos hacer eso? En realidad, ya sabes qué, antes de hacer el botón quitar, déjame realmente darle estilo a una caja porque entonces verás tipo de manera que colocamos ese botón o sea más fácil de ver. Entonces todo lo que queremos hacer es agarrar el nombre de la clase de box. Recuerda, sí, podemos aplicar un color de fondo de esto, solo di morado, pero ahora lo voy a cambiar. Entonces, solo pasemos el rato sobre esto. Esto es realmente algo genial sobre el editor de texto. Y podemos darle estilo literario de la manera que nos guste. ¿ Cómo se ve eso? Pongamos rosa, ¿no? A lo mejor deberíamos hacerlo, ya sabes, yo puedo hacerlo de un bonito color azul. ¿Cómo es eso? Sí, eso es genial. Eso me gusta. Y lo hacemos un poco más transparente. Ahí vas. Eso me gusta. Añadamos un poco de relleno. Sí, se ve mejor. Y ya está empezando a parecer cool con ahora mismo se puede ver que uno sí miente sin comillas lo lanza al otro. Entonces vamos a separarlo por tener frontera realmente cool. De hecho, quiero tener sólo una tabla en la parte superior para que podamos ir arriba fronterizo. A dos píxeles, azul sólido. ¿ Cómo se ve eso? Sí, yo soy los netbooks o al menos ahora puedes distinguir una cita de la otra. Y ahora lo último que quiero hacer es simplemente desplazarme hacia abajo. Sí, Pero como quería darle estilo a ese botón de cierre, justo entonces le dimos una clase de remove. Recuerda que si obtuve nuestro archivo HTML y nos desplazamos a cada uno de estos botones, puedes ver que cada botón tiene una cláusula o eliminar. Entonces eso es lo que estamos haciendo aquí. Vamos a haber fingido personal de TI lo hará primero, quiero que la posición sea una posición absoluta porque recuerden, queremos colocar esto en los primeros derechos de cada cotización, aka de cada div con una clase de caja. Por lo que queremos que su posición sea una posición absoluta. Pero vamos a tener un ligero problema con esto que te voy a mostrar ahora. Entonces tenemos una posición absoluta, que es genial ahora necesitamos moverla si afectamos su posicionamiento superior a 0, puede ver que se están apilando uno encima del otro. Entonces aunque queríamos ser un posicionamiento absoluto, queremos que siempre sea relativo a su padre. Y el div de los padres es este Boston. Y para poder hacer eso, tenemos que entrar en esta caja hace y luego las cosas de caja, podemos tener una posición de relativa. Ahí vamos. Ahora, cada botón Eliminar se posicionará en relación con su padre. ¿ Eso tiene sentido? Entonces por eso hicimos eso, ya sabes, deberíamos tener un comentario. Sí. Y el comentario puede ser que queremos que cada botón se coloque en relación con su padre. Por eso estamos haciendo esto. Entonces ahí vamos. Eso hace muchas escenas. Y por supuesto queremos que ese botón presione a la derecha. De hecho, tal vez podamos tener un equipo pixeles desde la derecha. ¿ Cómo se ve eso? Empezando a lucir bien, ¿verdad? ¿ Qué más podemos hacer? Podemos quitar la frontera. Está bien. Por lo que frontera ninguno. ¿ Cómo se ve eso? Sí, mi nombre está buscando. Está bien. ¿Qué más podemos hacer? Podemos agregar un fondo. Tengamos transparentes. No queremos que ese gris no se vea bien. Ustedes chicos están empezando a lucir mejor mano, el color, por supuesto, puede ser rojo oscuro. Como en punto. Es mejor. Otra cosa que podemos hacer es que se puede ver si pasamos el rato con nuestro ratón, no cambia ese divertido símbolo de la mano. Entonces por supuesto que lo que podemos hacer es que podemos afectar su propiedad de cursor y hacer que un puntero sea ahora si pasamos por encima de estas manecitas y es un poco pequeño. Entonces hagámoslo un poco más grande. Tamaño de fuente. Hagámoslo una m Eso es un poco mejor, y creo que está bien. Creo que esto se ve genial. Obviamente, podemos pasar mucho más tiempo haciéndolo más hermoso. Pero para los efectos de esta conferencia, ya hemos hecho suficiente. Tenemos nuestras tres cotizaciones. Y por supuesto, creo obvio lo que quiero que intentes y hagas. Al hacer clic en eso para cruzar el botón de cerrar. Yo quiero que esa cita desaparezca. Entonces tenemos nuestro HTML. ¿ Recuerdas lo que hicimos? Definimos un elemento div general, un elemento activo. Vamos a utilizar podredumbre porque hemos aprendido sobre balbucear. Y esta va a ser la que escuche nuestras venas pegajosas en ese botón de cierre. ¿ Eso tiene sentido? Enfriar, Así que dale un vistazo. Y en la próxima conferencia, codificaré la solución contigo. Abracado divirtiéndose de él decir fin. Y nos vemos en la próxima conferencia. 28. Reto: solución: Woo hoo. Ojalá te divirtieras y espero que estés aprendiendo y espero que se lo haya dado porque eso es lo más importante. Pero sí, todos sabemos bien, quiero hacer ahora es quiero agregar nuestros Javascripts, quiero agregar ese oyente de eventos, y quiero que aprovechemos el burbujeo de eventos. Déjame expandir toma editor ahora mismo. Y esto empezando a totear nuestra etiqueta de guión. Te vas a sorprender de lo simple que es la solución, por cierto, ¿no es tan difícil? ¿ Qué es lo primero que tenemos que hacer? Bueno, vamos a rockear. Queremos adjuntar a algo a nuestro oyente de eventos, ¿verdad? Entonces digamos delegación tardía. El asignado al valor de nuestro div real con ID de delegación, porque ese es el que queríamos escuchar lo que vengo, correcto. No queremos estar adjuntando una caja de distribución de desmayo que es demasiado engorroso y su rendimiento ineficiente. Queremos ser verdaderos grandes maestros codificando dominio. Por lo que comenzamos con nuestro objeto de documento. En ese objeto de documento, ya lo sabemos. Hay un método llamado get element by ID. Y por supuesto la ID que queremos FH es delegación. Creo que así es como la llamamos delegación ID. Y eso es correcto. Entonces ahí vamos. Ese es el primer paso. El segundo paso es que queremos adjuntar a nuestro oyente de eventos. Por lo que sacamos de delegación. Ahora existimos un método directamente en este llamado add event listener. Queremos escuchar eventos de click completo. Y cuando hacen clic evento es despedido, queremos ejecutar nuestro manejador y el manejador eliminado por falta de una palabra mejor. Por supuesto, ahora tenemos que definir nuestra función que hemos nombrado eliminada. Y ahora podrías pensar que es complicado, pero no es tan complicado. ¿ Qué hacemos ahora? Will mucha codificación viene a través de prueba y error. Entonces lo que puedo hacer es que puedo codificar algo que no fuera del todo trabajo, pero nos va a conseguir a medio camino. Lo primero que queremos hacer es querer acceder a los objetivos de la vena, ¿no? Queremos conocer las formas de las que proviene este evento. Y para eso, tenemos que acceder al objeto de evento real que se nos da en esta función de devolución de llamada. ¿ Cómo hacemos eso? Bueno, como ustedes saben ahora, ponemos en una variable y típicamente la llamamos variable e. Y para acceder a nuestros objetivos, solo podemos definir una variable llamada target, y accedemos a nuestro objeto de evento y obtenemos un propiedad llamada objetivo en él. Esto lo sabemos. Ahora lo que queremos hacer es que queremos eliminar no sólo el objetivo real, sino que queremos eliminar el nodo padre, el elemento padre. ¿ Recuerdas cómo estructuramos nuestro código? Déjame desplazarme hasta aquí. Cada cotización como naufragada y qué? Está bien. Está envuelto en su propio elemento div con una clase de bugs. Por lo que podríamos decir, si hacemos click dentro de una cotización, queremos eliminar sus elementos padre. Y por supuesto, si quita su propio elemento padre, eso es quitar a todos los hijos también. Dicho esto, podría estar pensando de la forma más fácil Clive es simplemente agarrar esos objetivos eje, su elemento padre a través del método del elemento padre. En DOM pot una de las series, entramos en mucho detalle en elementos padre y cómo atravesar el DOM. Esto es específico de una razón por la que se vuelve muy útil. Y en esto, queremos acceder a un método llamado remove. Entonces vamos a guardar esto e ir a nuestro navegador. Ampliemos nuestro navegador. Y ahora vamos a dar click en seguir adelante. Oh hombre, se lo quitó pero no debería tener razón? Porque sólo debemos quitarlo cuando hacemos click en eso. De acuerdo, Así que es una especie de Hoff trabajando y esto es lo que dije antes cuando solo podías intentar darle una oportunidad. Y como verás, ya sabes, podemos seguir mejorando en nuestro código a medida que avanzamos. Nos vemos refrescar la página y se tiene de vuelta a nuestro editor de textos. Entonces, ¿cómo lidiar con el hecho de que sólo queremos quitar el elemento padre cuando ese poco le dole, ese botón de cierre se hace clic. Una forma en que lo podemos hacer es usar la declaración if. Y las muchas formas en que podemos utilizar la declaración if también. Yo sólo voy a empezar diciendo si el objetivo, recuerda el objetivo es la cosa, ese elemento que ha disparado el evento de tic. Si ese objetivo, si su nombre de clase no es igual a eliminar. Recuerda porque todos nuestros botones tienen una clase de eliminados. Si ese elemento que hemos marcado no tiene la clase de remoción. Sabemos que no es la porra. Entonces en ese caso no queremos hacer nada. Simplemente queremos salir de esta declaración if. De lo contrario. Este es el bloque de caché de código. Sabemos que el elemento que marcamos sí tiene un nombre de clase de remove, en cuyo caso eso significa que es el botón. Entonces en esa instancia, sí queremos ejecutar el método remove en su elemento padre. ¿Eso tiene sentido? Eso espero. Vamos a refrescarnos. Y ahora si hago clic en un, pegando todas las cotizaciones, no pasa nada. Pero si pasamos por encima de uno de estos botones de flujos y hacemos clic en eso, se ha ido. Qué impresionante. Entonces ahí vamos. Espero que te diviertas mucho, infeliz siguiéndome. Espero que estén entendiendo cómo sentamos el código y cómo estamos utilizando la delegación de seres vía burbujeo. De verdad es interesante y te conviertes en maestro en este banal. Si bien que 29. Reto: introducción: Me encanta esto serio, tan divertido. Y por eso sigo poniendo retos y ejemplos prácticos. Ai disfrutarlo y sea yo creo que te vas a sacar toneladas de ella. Recuerda, este curso te está equipando para aprender a codificar eficientemente y estas leyes. Pocos retos incluido este, es utilizar el concepto de burbujeo de evento. Y lo hacemos por delegación de eventos. Recuerda una delegación veta e incluso burbujeante trabajo de la mano. Están muy estrechamente relacionados. Y cuanto más practiques esto, la puja en Coda te vas a convertir. Pero de todos modos, basta de esto, ¿de qué se trata este reto? Bueno, como puedes ver, tenemos texto de aspecto muy sencillo en la pantalla, HTML. Y deliberadamente no quería gastar mucho de Thomas CSA. Yo sólo quería que aprendieras este concepto y luego vamos a seguir adelante como estoy seguro que tal vez ya puedas adivinar. Todo lo que queremos hacer colecciona artículos y artículos afilados al hacer clic en ellos. Si nos llevamos carnes rojas, hombre, eso se ha ido. Si hacemos click en otro, eso se ha ido. Si hacemos click en las verduras, se ha ido toda la lista. Para volver a hacer clic en él, aparece. Si hacemos clic en los yucky en los colapsos, si hacemos click en cumple que se derrumba. Entonces ahí lo tienes. Creo que se le da el punto. Y recuerda que estamos queriendo utilizar delegación de eventos. Así que asegúrate de leer todo en un elemento y escuchar un evento click en ese elemento porque ya sabes, va a burbujear. Entonces dale una oportunidad. Espero que te diviertas. Mantente motivado y nos vemos en la próxima conferencia. 30. Reto: crea nuestro HTML: O impar. Entonces voy a dejar de pasar muy rápido por esto porque te estás poniendo bien. Entonces empecemos a crear nuestro HTML de forma rápida y eficiente. Aquí vamos. Tenemos nuestro cuerpo. Lo que quiero hacer, bueno, necesitamos crear o su lista de etiquetas se pudre y sé que va a parecer un poco engorroso, pero llegaremos juntos. Entonces vamos a agrietarse. Recuerda, queremos utilizar el burbujeo de eventos. Y para hacer eso, tenemos que crear una especie de elementos padre que capte todos los eventos. Entonces hagámoslo. Podemos llamarlo la etiqueta UL y eso puede tener una identificación de comida. Y como sabemos, todas las listas desordenadas tienen que tener un elemento de lista dentro de él. Por lo que primero enumeraré artículo pueden ser carnes. Y voy segundo elemento de lista puede ser bajo ninguna verdura. Ahí vamos. Y si guardamos eso y nos refrescamos en nuestra página, podemos ver que tenemos carnes y verduras. Bastante simple. Ahora recuerden, queríamos crear toda una especie de estructura arbórea de listas y todo eso. Entonces dentro de esto cumple con una mentira, en realidad quiero crear otra lista desordenada. Y recuerden que querían alcanzar, desglosarlo aún más en llamarlo carnes rojas y otros. Entonces para hacer eso, solo podemos crear otro elemento de lista. Esto puede ser carnes rojas. Y claro que podemos tener uno aquí diciendo guarde eso y podemos parar. Podemos verlo que está tomando lleno y está tomando forma y ¿qué sigue? Bueno, recuerda que cuando un usuario hace clic en tarifa y come, queremos que se muestre otra estructura anti y menos. Por lo que dentro de List meets queremos otra etiqueta UL y podemos tener alla, listar artículos de carnes rojas. Para que podamos escribir carne de res, cordero, y POLQA. ¿ Esa mirada ahora te vas y más o menos queremos hacer exactamente lo mismo para otros. Fuimos a una lista desordenada y dentro de eso ganamos tres ítems de lista. O puede ser pescado, pollo, y digamos Turquía. Enfriar, sé que se pone un poco raro el tiempo de dibujo, todas estas listas y listas desordenadas. Pero sigamos adelante. Ya casi, casi terminamos. En realidad podemos hacer más o menos lo mismo con las herramientas base. Permanece por debajo de la cara a los lunares. También queremos subrubros. Podemos tener una lista desordenada y los dos subtítulos queremos ricos y podemos tener los afortunados. Y estos son sólo a Hamline opinión por cierto, cuáles son ricos y cuáles de las tías dentro de sabrosa, claro que necesitamos otra etiqueta UL y la, podemos tener nuestros artículos de lista reales. Bueno, ¿cuáles son algunas verduras realmente deliciosas? ¿ Me encantarán las papas? Y me encantan los espárragos. ¿ Qué más? Diga una mentira. A mí me gustan los guisantes. Ahora, es hora de tomar forma. Y luego por supuesto en los yucky, queremos hacer exactamente lo mismo. Queremos una lista desordenada con elementos de lista debajo de cada uno. En primer lugar, realmente no me gustan los brotes de brussel, aunque estaba con unos en forma. Y hizo el proceso más delicioso. Y no los he vuelto a tener. Entonces solo voy a poner coles de Bruselas. No, gracias. Basta con poner otros dos. Pongamos col rizada solo por el bien del argumento. Y no me gustan los hongos por alguna razón. Seta está disponible. No estoy seguro. Simplemente lo puso aquí. Entonces ahí vamos. Aquí está nuestra configuración general. Tenemos nuestros artículos de lista, tenemos nuestras listas. Voy a listas desordenadas. Y tenemos nuestra última etiqueta UL con una identificación de comida. Y va a ser lo que escucha por todos nuestros WikiLeaks. Ahí vamos. Respira profundo. Hemos hecho nuestro HTML. Pero por supuesto ahora cuando hacemos click en todos estos, no pasa nada. En qué quiero que pienses, ¿cómo lo recogerías? Es bastante complicado. No quiero que te preocupes por el estilo de estos elementos de lista en una lista desordenada. No te preocupes por eso. Piensa en qué es lo que estamos tratando de aprender qué bajo aprendió sobre burbujeo de eventos, delegación de eventos y cómo podemos trabajar con este tipo de conceptos para crear Es efectos muy cool y crear una mejor experiencia de usuario. Así que dale un pensamiento, diviértete. Y en el siguiente cuadro cortarán la solución juntos. Veamos ahora. 31. Reto: solución: ¿ A quién le diste una oportunidad? Eso espero. Pero de todos modos, aquí estamos. No te voy a quedar. Simplemente voy a pasar por la solución muy, muy rápidamente y explicar cada paso en el camino. Entonces, ¿cómo hacemos esto? Puede ser un poco complicado, pero ya sabes cómo hacerlo, te va a sorprender lo simple que es realmente la solución. Nos vemos desplazar aquí abajo. El primer paso, por supuesto, es que tenemos que incluir nuestra etiqueta de guión. Nos damos cuenta, y queremos utilizar el burbujeo de eventos e incluso la delegación. Y lo que eso significa es que queremos escuchar nuestras venas en cierta sección y nuestra página. Pero queremos escuchar ese evento desde un elemento, ¿no? Porque sabemos contra Babilonia. Y es exactamente por eso que envolvimos todo en este elemento de lista desordenado con una identificación de comida. Entonces el primer paso es, como lo adivinaste, necesitamos acceder a todo este artículo. Y lo hacemos mediante el uso de documento get element by ID, que le dimos un DNI de alimento. Y como estoy seguro que ya lo has adivinado, el siguiente paso es acceder a esta variable que acabamos de crear. Después queremos ejecutar un método en él llamado adDeventListener. Estamos escuchando un evento de click, ¿verdad? Y cuando se despide ese evento, ¿qué queremos hacer? Bueno, queremos o mostrar u ocultar algo pudrido. Entonces para bailar, limosna y llamémoslo mostrar u escondernos. Y el paso final es definir esta función de manejador. Lo hacemos mediante el uso de la palabra clave de función JavaScript, y la hemos llamado Mostrar Ocultar. Y aquí vamos. La carne y los corazones de nuestro código está en esta función. De acuerdo, entonces, ¿qué queremos que suceda? Vamos a desplazarnos hacia arriba y Nakoda. Echemos un vistazo a esta carne lo haría, cuando hacemos clic en cumple, qué pasa. Echaremos un vistazo a sus alrededores. Sabemos y cuando hago clic en cumple, así que en su lugar fuimos carnes rojas y otros a colapsar. No leas. lo primero que puedo notar sin embargo, Esta reunión está en una etiqueta LI. Dice lo primero. El segundo es, sí, podemos colapsar a cada uno de esos aliados debajo de él, pero es más eficiente simplemente colapsar la etiqueta UL, será el elemento UL dentro de esa etiqueta LI? Porque tengo sentido. Está bien, genial. ¿ Qué pasa con las carnes rojas leerán nos cumple lo mismo cuando hacemos clic en eso y notamos que está en una etiqueta aliada y que simplemente podemos colapsar el elemento UL debajo de ella. Y a medida que te desplazas hacia abajo, notarás que cada otro elemento funciona la misma manera y tiene que estar en una etiqueta aliada. Y entonces tenemos que encontrar sus elementos debajo de él y luego esconder eso. Entonces, ¿cómo hacemos esto? Bueno, ya verás que no es tan difícil. Lo primero es que siempre tenemos que conseguir el objetivo, tenemos que conseguir el automático debe desencadenar el evento. Entonces definamos una variable llamada target. Accedamos a nuestro objeto de evento. Y recuerda que lo hacemos poniéndolo en una variable llamada e. Y tiene una propiedad llamada tolerancia. Entonces ahí vamos. Tenemos nuestro objetivo de vena. El primer cheque que quiero hacer es que quiero comprobar si se trata de un técnico aliado. Y ya lo hemos hecho antes, así que sabes cómo hacerlo, pero podemos acceder a nuestro objetivo. Tiene una propiedad de nombre de etiqueta. Y queremos que ese nombre de etiqueta sea una etiqueta aliada, ¿verdad? Y si eso sucede, sabemos que entonces podemos ejecutar nuestra función de manejador Qu. ¿ Y qué queremos que haga nuestra función de manejador? Bueno, recuerda que queremos que nuestra función de manejador oculte o te muestre nuestro elemento. Entonces definamos otra variable y llamemos a eso la UL, pongamos la URL que queremos o bien mostrar u ocultar. Ah, es nombre horrible, pero es justo lo que pensaba ahora. Y ahora asignemos eso a dos. ¿ Qué valor? Bueno, acceda a nuestro objetivo. Nuestro objetivo va a ser si marcamos unos yucky, va a ser esta etiqueta LI Rochester. Queremos acceder a eso y luego queremos consultar, seleccionar todos sus elementos debajo de él, ¿verdad? Para que podamos acceder a él objetivos. Podemos entonces acceder al selector de consulta de método, selector de consultas, y queremos obtener todos los elementos UL. En lo que va tan bien. Pero si ahora solo trabajamos con esa variable, qué pasa cuando hacemos click en, di esto, yo tomaré col rizada. Bueno, estarían de acuerdo conmigo en que, que no todos ustedes existen dentro de esa etiqueta LI. Por lo que será indefinido. Entonces la comprobación de pérdidas que tenemos que hacer es que sólo tenemos que decir si existe, entonces si existe, sabemos que no será indefinido. Entonces solo podemos decir si existe y cómo podemos ejecutar nuestro código. ¿ Qué queremos que haga? ¿ Cómo escondemos que tú, yo tomaré, bueno las muchas formas de despellejar a un gato cuando se trata de programación. Pero, ¿por qué no simplemente agregamos una clase? Y esa clase puede tener una propiedad en su propiedad de visualización, que sólo se puede guardar para ocultar. Y podemos simplemente activar y desactivar eso. Déjame mostrarte a lo que me refiero. Entonces vamos a nuestro HTML en la parte superior. Eso se incluye una sección de cabeza dentro de eso, un elemento de estilo. Y solo agreguemos una clase llamada Hyde. Y como dije, tiene una propiedad de display y solo podemos tener un valor de ninguno. hoy vamos, hemos definido una nueva cláusula. Por lo que al fondo, sabemos que todo ha pasado de acuerdo a lo planeado. Podemos acceder a nuestra nueva variable. Podemos entonces acceder a su propiedad de lista de garras. Recuerda, hemos estado haciendo esto en conferencias anteriores, pero ahora hay otro método llamado toggle, y es muy útil y su nombre lo regala que literalmente alterna, agregando y quitando una clase. Y la clase que queremos cambiar, por supuesto, es esa tripulación de la clase Haida. Solo comprobemos si esto funciona. Demos click en cumple. Si bien estos problemas vuelven a tomar fugas, vamos a dar click en otros. Abramos las verduras. Hagamos clic en las claves Anya. carnes rojas, las carnes, las verduras de uno Delicioso. Regla. Esto es divertido. Y espero que hayas aprendido una tonelada en esta conferencia en serio. Y a veces simplemente dar un paso atrás y pasar por él paso a paso. ¿ Recuerdas lo que hicimos? Vuelve a nuestro código aquí definimos nuestra delegación de eventos estar en este enorme elemento búho justo en la parte superior, porque sabemos que solo las venas no harán clic los eventos tienen en una burbuja arriba a través de ella. Después queríamos escuchar las venas cosquillas. Y por último, cuando sucede ese evento, queríamos ejecutar una función y simplemente llamamos a esa función mostrar u ocultar. The Show, Hide solo comprueba que el elemento en el que hemos hecho clic está de hecho en una etiqueta LI porque no queremos que las cosas oculten y se muestren cuando hacemos clic aleatoriamente en una página, tiene que estar bien. Verificamos que tenía que ser una etiqueta aliada. Entonces tuvimos que comprobar que sí tiene de hecho estos enormes elementos de búho debajo de él. Y si lo hace, queremos cambiar esa clase por juramento, esa clase de VIH. Entonces ahí lo tenemos. Esperanza insertando en su momento, espero que te estés divirtiendo. Y nos vemos en la próxima conferencia. 32. Outro de clase: Bien hecho, mis queridos alumnos. Bien hecho. Acabas de terminar esta clase impresionante sobre conceptos muy avanzados. Podría agregar jerarquía de nodos u jerarquía de objetos, evento captando cualquier vena pública es entonces si realmente estás empezando a dominar al donante, y debo decir, toda esta serie de cursos ha llevado a este momento porque en la muy próxima clase, en la última clase de la serie, quiero que aplicemos todas las técnicas, todos los conocimientos que hemos aprendido en este curso. Y el oro, un verdadero vivir con ellos. ¿ Se oye esos pájaros? A esos se les llama Hadi. ¿Son bellos? Tumar en tenaz ahora entrando en agradable Ahora donde estaba, sí, estamos iniciando un proyecto impresionante en la próxima pérdida donde vamos a aplicar muchas de las técnicas que has aprendido para construir un ferrocarril de vuelta. Vas a estar agregando cosas dinámicamente al DOM. Vamos a estar quitando cosas del DOM. Vamos a permitir que un usuario busque artículos en el perro Eso va a ser fascinante y también esconder elementos en el DOM. Va a ser impresionante. Entonces llamo blanco, quédese conmigo. Sólo tienes un 100 cerca para ir. Sería una lástima que te detengas ahora. Gracias por todo su apoyo. Hacer la asignación. Es una tarea divertida. No hay bien ni mal raramente porque es un sistema de honestidad. Sólo tienes que pasar por la tarea, contestar las preguntas, y luego te veré, mis queridos alumnos en la misma, la siguiente clase.