Documentación de la serie de modelo de objeto 2023: parte 6: proyecto final de DOM. Ejemplos avanzados y divertidos

1. Introducción a la clase: proyecto real: Oye, Mis queridos alumnos hacen esa clase muy final en toda esta serie sobre el DOM, el Document Object Model, La guía de Mi nombre. Voy a estar en más estricto. Y hasta este punto, hemos estado haciendo sí, muchos ejemplos, pero sobre todo teoría. Y a quién le encanta la teoría, ¿verdad? Y es por eso que esta clase está sentada haciendo todo un proyecto juntos. Va a ser súper divertido. Se va a aplicar mucho de tus conocimientos sobre el DOM que te va a poner a prueba sobre cosas como burbujeo de eventos y captura. Se va a poner a prueba tu capacidad de agregar artículos al DOM. Se va a poner a prueba tu capacidad para escuchar tipos de eventos, eventos keyup, cambio de venas, e incluso presentar eventos en el formato va a ser fascinante y bien hecho para seguirlo. Si tienes, si eres un nuevo llegado, Si esta es tu primera clase de Simeón, bienvenido, bienvenido. Dale un aplauso. Voy a estar codificando el HTML, el CSS, el JavaScript contigo. Por lo que realmente no importa qué nivel de experiencia tengas. Yo sí, soy tu instructor, éste, sí. Entonces, sin más preámbulos, vamos a meternos en este muy, muy cool proyectos. Y Conway, realmente no puedo. Me estoy divirtiendo tanto. Pero lo suficiente dicho, déjame ir a mi computadora ahora mismo y tarde empiecen a codificar juntos. 2. ¿Qué vamos a construir?: Hey, todos ustedes vienen a este proyecto final que va a ser épico y estoy súper, súper emocionado. Y sé que va a parecer un ejemplo muy sencillo. Pero un, realmente refuerza todas las cosas que hemos aprendido hasta ahora en este curso y sean los trucos y habilidades que aprendiste en esta sección, podrás aplicar a tus propios sitios web. De verdad te ayudará a seguir adelante. Entonces espero que te diviertas mucho. Pero en el camino, realmente espero enseñarles métodos muy útiles y prácticos. Entonces, ¿cuál es el proyecto final? ¿ De qué se trata todo? Bueno, como pueden ver, lo hemos llamado nuestro sitio de compras, y sólo contiene una lista de compras. Sé que parece muy sencillo, pero pasa mucho. Entonces, ¿cuáles son las cosas que vamos a hacer en este proyecto? En primer lugar, cuando el usuario pase el mouse sobre cada elemento de la lista, se puede ver ahí destacamos ese borde, que levantan borde para ser específico. Sólo para que el usuario sepa que lo está rondando. Si hace clic en un artículo, no pasa nada. Pero como ves a la derecha, esto, este botón Eliminar, de nuevo, si el usuario pasa por encima de él, Estamos enfermos esa propiedad de estilo. Y por supuesto, si el usuario borra, di esta pizza, queremos que se quite eso del dom. ¿ Y el Azúcar y Especias? Es el usuario borra eso. Queremos que eso se elimine por completo. Entonces eso es lo primero que quiero que pienses como que puedes hacerlo. No es tan difícil. Pero otra vez, vamos a tener que escuchar algunos eventos, ¿no? Específicamente el evento click? Eso es algo que quiero que hagas. Otra cosa, que caso ya has adivinado es que quiero que el usuario pueda agregar elementos a la lista. Entonces si el usuario escribe algo como cerveza por ejemplo, cualquier clics agrega, se agrega a la lista dinámicamente. Y aquí porque estamos usando un formulario, en realidad escuchamos el evento de envío. Por supuesto, si el usuario quiere ir a borrar cerveza de la lista, puede hacerlo. Por lo que todo tiene sentido intuitivo. ¿ Qué pasa con esta casilla de verificación de la lista de ocultar? Will aquí vamos a estar escuchando otro tipo de eventos, las ganancias cambiantes. Y si el usuario comprueba eso, entonces simplemente escondemos todo. Sé que puedes estar pensando, ¿por qué querrías esconderte anti ShoppingList? Y bastante justo, Esa es una pregunta muy válida. Sólo recuerda que aprendemos habilidades. Sí. Estoy tratando de equiparte para que lo uses en otras situaciones que sean aplicables a tu aplicación web. Entonces si el usuario desmarca eso, obviamente todo vuelve a la normalidad, ¿de qué se trata los elementos de búsqueda toman caja todo? Bueno, permite al usuario buscar artículos en la lista de compras. Y no vamos a estar escuchando un evento de clics. Sí, porque no hay garrapata, vamos a estar escuchando un evento key up. Veamos un ejemplo. Digamos que el usuario tiene algunas cosas en la ShoppingList, como, no sé, azúcar, cereal, día que tienes. Ahora, si el usuario escribe, digamos azúcar, sólo queremos mostrar aquellos elementos que coinciden con ese texto, pero echar un vistazo de cerca. ¿ Te das cuenta de que todos los usos toma en este caso como minúsculas, una estola cerrada coincidió con el azúcar de abajo, a pesar de que el azúcar de abajo tiene una mayúscula. Y de igual manera, si el usuario escribe todos los gorras, sigue siendo Mencius porque no queremos que esto sea sensible a mayúsculas y minúsculas. Por lo tanto, ten eso en cuenta. Ahí vamos. Se puede ver que este va a ser un proyecto realmente divertido. Estoy súper, súper emocionado. Espero haberte dado suficiente como una especie de visión general de alto nivel para entender qué es lo que necesitamos audaz, tenerlo en cuenta. Voy a estar construyendo todo desde cero. Voy a estar construyendo un HTML desde cero, el CSS. Vamos a estar cortando JavaScript juntos. Eso va a ser épico son super, super respuesta. Te veré en la próxima conferencia. 3. Lista de compras: Entonces ya has visto lo que hace la caza furtiva se va a ver en tu emocionado de involucrarte. Y podemos seguir expandiéndonos en este proyecto. Podemos seguir mejorando en ello. Pero, ya sabes, cuáles son las habilidades que has aprendido hasta ahora son realmente, realmente increíbles. Y quiero demostrárselo en toda esta sección final. Por lo que espero que lo disfrutes, pero podría estar rascando y escondido. Ahora vamos, ¿qué implica crear toda esta estructura? Bueno, déjame mostrarte eso ahora mismo. Es bueno. Eso es bueno. Y esto va a ser aún mejor. Porque ahora estamos en el proyecto final. Eso va a ser muy divertido. Va a ser muy interactivo y va a ser muy práctico para tu carrera adelante, porque ahora mismo vamos a construir un sitio de compras. Vamos a permitir que un usuario agregue artículos a una lista de compras. Elimina esos artículos de una lista de compras, oculta todos esos artículos de una lista de compras. Incluso nos vamos a meter en algo bastante en fuentes y eso es buscar elementos dentro de ellas, esa lista de compras. Por lo que estoy súper, súper emocionado. Un abrazo más allá de dos. Permítanme que cubra brevemente lo que vamos a estar haciendo en este proyecto final. Adios. Hasta ahora, sólo hemos visto fragmentos de lo que podemos y no podemos hacer con el DOM. En la primera parte de mi serie DOM, hablamos mucho de atravesar el DOM, acceder a elementos en el DOM, crear elementos en el DOM, eliminar elementos del DOM, clonar elementos en este DOM avanzado serie en este curso en particular que estás haciendo en este momento, hemos ido un paso más allá, ¿no? De verdad nos hemos metido en las venas, cómo funcionan. Nos hemos metido en capturar versus burbujear. Nos hemos metido en jerarquías. Hemos recorrido un increíblemente largo camino. Ahora es el momento de poner a prueba todas nuestras habilidades por Bolding y toda la página web para conseguir. Está bien, eso es genial. ¿ Qué queremos que haga? Bueno, en primer lugar, llamémoslo nuestros lados de los shopaholics, porque somos shopaholics y solo queremos ir al supermercado y comprar muchas cosas. Y como es un lado de los shopaholics, necesitamos la capacidad de editar artículo de abarrotes, encontrar un artículo de abarrotes luego eliminar artículos de abarrotes de nuestra lista. Cli best to general me dejará estirar eso. ¿ Qué exactamente vamos a cubrir? Bueno, en primer lugar, vamos a tener que navegar por el DOM. Y vas a ver que vamos a tener que cambiar el DOM cuando uses una eliminación de patadas. Queremos que se elimine un artículo. Por ejemplo, cuando agregan un elemento queríamos editar Todd Don, por ejemplo. Vamos a tener que manipular CSS. Vamos a tener que interactuar con formas y eventos. Vamos a tener que usar JavaScript para agregar nuevos elementos al DOM. Como mencioné, vamos a tener que quitar elementos del DOM. Y realmente quiero que también nos metamos en un tema de fuentes de modo, y así es como buscamos sumas FADH en el DOM. Entonces te estoy mostrando, puedes ver que estamos haciendo mucho en esta sección final. Vamos a prepararnos, bebamos un poco de café y vamos a agrietarnos. Ya te veo. 4. Crea nuestro HTML: Vamos. Tienes que ser este no es el proyecto final. Estoy tan emocionado. Entonces sí, vamos, tengo una manta. Código de Visual Studio, toma ediciones a la izquierda, el IDE, y a la derecha tenemos nuestro navegador solo para que podamos ver haciendo. Y antes de saltar a esto, henry entra en mucho detalle, solo quiero decir que podemos acercarnos de manera fragmentaria. Vamos a pasarlo paso a paso, esta conferencia. Ahora solo quiero que veamos el HTML y el siguiente H0, podemos darle estilo para que se vea realmente bonito si quieres saltarte el Bolding del HTML y SESAC. Oh, bienvenido a hacerlo. Y sólo salta a los corazones de manipular el DOM, pero animarte mucho a seguir adelante y sin más preámbulos, empecemos. A ver cómo estamos. Tenemos nuestro proyecto final, archivo en blanco. Todo lo que quiero hacer es empezar con una plantilla HTML muy sencilla. Podemos tener una sección de cabecera por ahora, solo tengamos un título para toda la página. Y el título puede ser ShoppingList. Y bajo la cabeza, claro, podemos tener a nuestro amigo. Esta es realmente la carne de nuestro HTML se va a sentar. Ahora antes de ver, es, siempre es una buena idea imaginar lo que quieres en tu mente porque necesitamos estructurar esto de una manera muy lógica. ¿ Cómo debemos estructurarlo me dejará llamar a uno en un nivel muy básico. Podemos sumar a esto más adelante, pero esto es lo que queremos atrevir inicialmente los disturbios. Y el punto salteador que siempre me encanta hacer es que quiero leer todo dentro de su propia etiqueta div. Y podemos darle a eso una identificación de Rapa. Ese es un punto de partida. Queremos que todo nuestro tipo de lista de compras esté dentro de un div de padres. Pero siempre una buena idea para hacer esto. Siempre es una buena idea descomponer las cosas en conjuntos de elementos más fríos a los padres. Lo primero que quiero hacer, si ahora miramos con una red, quiero hacer tres sumideros de alto nivel. Si miras esto, puedes ver que podemos dividirlo en tres secciones. Yo quiero tener un encabezado o quieren tener este total, un 100 corner rapido en una forma. Y luego, por último, quiero tener esa lista completa correcta en su propio div. Entonces así es como quiero estructurarlo, exagerar cuántas formas de despellejar a un gato. Pero puedes ver aquí, vamos a tener un div general. Y dentro de eso podemos tener tres elementos padre de muy alto nivel, un encabezado, un formulario, y un diff. ¿ Tiene sentido? Está bien, entonces hagámoslo. Hagámoslo. Sí. Y ese div que salvamos, podemos dar una idea de RAM. Entonces ahí vamos. Eso está en marea de dentro del div. Recuerda que ganamos tres cosas. Nosotros queremos golpear. Uh, ¿qué más queríamos? Queríamos un formulario. ¿ Y qué más queríamos? Queríamos otro div. Ahí vamos. Y eso es solo de muy alto nivel. Y sí, vamos a estar dando todas estas identificaciones y cosas después. Por ahora, esto es lo que tenemos, Pensemos que estaba oculto. Y recuerda lo que me ocultaré. Es esa sección verde en la parte superior. Y de nuevo, quiero representarlo en todo su propio elemento padre. Esto es rápido en una dosis, le dará un ID de página superior. Entonces puedes ver que voy jaja tiene algunas cosas, ¿no? Vamos a odiar a los shopaholics, cosa, vamos a la descripción, mi lista de compras. Y entonces es una especie de consiguió la sección de búsqueda la cual voy a rentar y un completo u obsoleto empezar estructurando esto. Vamos a tener nuestro div rápido para todo el calentamiento y el cuello. Simplemente podemos tener un ID de página top. Y dentro de esta cabecera tenemos el rubro. Y es sólo tener un odiado a Hollich. Y sólo para que podamos darle estilo más tarde, Vamos a darle una clase de bajo ningún título. ¿Cómo es eso? Y cómo nos vemos hasta ahora con lo literario. Apenas tengo un rumbo y voy a navegar. Bastante sencillo y lo ponemos un largo camino por recorrer. Entonces eso no es pegarle a la cosa debajo que tenemos una descripción, ¿recuerdas? Y sólo lo voy a leer en una etiqueta de párrafo. Y sólo voy a decir mi lista de compras. Oye, vamos. Y lo último que quería ahora Haider, es esa funcionalidad de búsqueda completa, que es bastante avanzada como una especie de bono adicionalmente poniendo en esto. Y llegaremos a eso al final. Por lo que podemos tener una funcionalidad de búsqueda. Ahí vamos. Y como mencioné, quiero envolverlo en una carpeta y lista solo dar el nombre completo y ID del elemento de búsqueda. Porque eso es lo que va a estar haciendo esta forma. Ahora mismo. Podemos simplemente eliminar la acción y es un ex, quería que esta espuma tuviera una caja de entrada de gustos del tiempo y podemos tener un lugar titular de artículos de búsqueda. Y sólo recuerda lo que va a hacer el ítem de búsqueda o funcionalidades. Va a permitir al usuario buscar palabras clave para ver si esas palabras clave o en la lista de compras. Por ejemplo, si contraviene la forma en que has editado cocina a holística en lo alto de Coca-Cola y todos los artículos que tienen cocos se mostrarán. Entonces va a ser bastante guay, bastante avanzado. Entonces ahí vamos. Ese es nuestro elemento de entrada. Y otra cosa que quiero agregar aquí. Apenas la capacidad para que el usuario se oculte y muestre más antiguos listados debajo de ella. Y podría ponerlo en otros lugares. Sabes qué, Jimmy enfrió una búsqueda y ocultar y mostrar funcionalidad de ocultar. Permítanme simplemente hacer que esto le respondiera. Sí, eso es mejor. Y como dije, podríamos poner esto en otro lugar. Yo sólo quiero ponerlo sí, porque así es como lo veo en mi cabeza. Y así tenemos nuestro insumo. Lo siguiente que quiero es la que incluí una etiqueta div. Y podemos darle a eso una identificación de mejilla. Y puede ser una etiqueta para el cuero. Y si el usuario hace clic en él, queremos escondernos. El listado se queda todo naval. Y obviamente ahora necesitamos la casilla de verificación real, ¿no? Por lo que el tipo de datos de entrada se puede moldear caja. Y también podemos darle una identificación de hot. Sí. Bien hecho. Acabamos de completar nuestro encabezado. Esta va a ser toda la sección alta. No te preocupes por los CSA. Nos vamos a meter. Entonces en la siguiente conferencia, solo quiero que estiremos nuestro HTML. Y luego verás lo fácil y rápido que es sólo para agregarle rápidamente estilos para que sea hermoso. Entonces ahí vamos, ese es nuestro encabezado. Lo siguiente que queremos hacer es ¿qué volvería a enfriar nuestra imagen? Lo siguiente que queremos hacer es que queremos terminar con esta forma en medio. ¿ Verdad? Eso es lo que queremos hacer nom. Entonces hagamos esa equidad. ¿ Cómo hacemos eso? Bueno, vamos a deshacernos de esta acción aquí y vamos a darle a esto un ID de AddItem porque de eso se trata esta forma. Se trata de que el usuario agregue artículos a la lista de compras. Y necesitamos una caja de entrada, no usemos va a estar escribiendo en yen. Y quería colocar titular, no dentro de día marcador de posición. ¿ Qué quieres comprar? Y luego después de que el usuario haya escrito lo que quiere comprar, tenemos un botón llamado un repentino solo botón editar y podemos tener edX. Después vamos a tomar la conformación. ¿ Qué está pasando aquí. Y yo sólo 72 a la Palabra de cierre etiqueta. Entonces ahí vamos. Creo que eso es hacer santos. Y ahora estamos en la sección final. Otra vez. Eso es enfriar esa imagen. Y se puede ver el artículo final Nick, necesitamos es este artículo para comprar sección. Y vamos a envolver eso en una dosis también. Se puede ver que tiene un encabezado y tiene todos estos artículos de lista. Y luego también tiene esos botones de borrar. Y lo que vamos a hacer es que podamos leer, recordar lo que han estado balbuceando y vena delegación. Fuimos a leer todos esos elementos de lista dentro de un elemento padre. Entonces vamos a envolverlo en un elemento UL padre, y luego iremos a partir de ahí. Entonces aquí vamos. Tenemos todo elemento div. Queremos grabar todo y vamos a darle una identificación de listas de abarrotes porque de eso se trata este div. Y entonces también tenemos que odiar hecho retocar artículos para comprar. Pero es un poco más pequeño que 81, sí. Entonces hagámoslo una calefacción H2. Y podemos decir artículos para comprar. El sexo en realidad tiene una T y B. mayúsculas Y entonces vamos a darle a esto también una clase de esquelético. Y ahora nos estamos metiendo en todos esos aliados, esos, y listas de artículos. Y recuerda lo que dije, queremos envolverlo en un Rapa general y lo vamos a hacer con una etiqueta UL. Bastante sencillo. Y dentro de eso, tenemos cada una de nuestras listas. Entonces por supuesto tenemos una etiqueta aliada y cada artículo tiene dos cosas pudriéndose. Y tiene el artículo real en sí. Y luego tiene ese tipo de botón de borrar a la derecha. Y de nuevo, hay muchas formas de despellejar a un gato, así que solo voy a leer ambas en un elemento span. A los que van a tener una clase de artículo porque es el artículo con el que nos ocupamos. Esto solo dale a eso una palabra de MLK que tienes. Lo puedes ver en el navegador. Y luego otro span va a tener una clase de Delete. Y voy a tener la palabra borrar. Ahí vamos. Y ahí lo tenemos. Entonces tenemos nuestro primer artículo y todo lo que tenemos que hacer ahora es simplemente copiar y pegar estos elementos LI. El siguiente ítem puede ser Azúcar y Especias. ¿ Cómo se ve eso? Podemos copiarlo de nuevo. Y aquí podemos tomar algo para beber Coca-Cola. Y de nuevo, eso se llama huevo alerta BIA. Hagamos una más aquí abajo y podemos decir peta y decir periférica, margarita. Si escribo eso correctamente, espero que sí. Entonces ese es nuestro HTML. Si miras aquí nuestro navegador, se ve terrible. De hecho, me estoy poniendo nauseas incluso mirándolo. Y va a ser lo que hagamos en la próxima conferencia. Vamos a embellecer esto. Eso está haciendo que se vea realmente funky. Y volviendo a nuestro código, solo recuerda ahora mismo, todo lo que hemos hecho es que hemos hecho nuestro HTML y es una página muy, muy sencilla. Hemos leído todo dentro de este div de una identificación con Rapa. Todo se rastrea en d. Y luego simplemente lo dividimos en tres secciones. Podrido. Hasta puedo estructurar este COVID. Puedo decir la sección uno. Say la Sección 2 fue este tipo de forma donde agregamos artículos. Y luego la tercera y última sección es la sección 3. Y eso es mostrar la lista al usuario y permitir que el usuario elimine elementos de la lista. Entonces como una especie de hacer santos, es muy sencillo. Pasa por ello, pausa el video, y en la siguiente conferencia, Empecemos a peinar esto y verás lo divertido que es firmar porque te vas de algo como esto. Y navegaré a algo realmente increíble. Nos vemos. 5. Crea el encabezado de CSS: Bienvenido de nuevo. Y se puede ver que sólo estamos recogiendo exactamente donde lo dejamos. Se puede ver lo espantoso que se ve esto. Yo solo estoy cosas viendo en la esquina trasera sólo porque se ve tan feo. Pero no enfades esta voluntad, esta conferencia se trata de todo, vamos a estar haciendo CSAC juntos. Y puedes ver aquí acabo de crear un archivo CSS manta. Eso es todo lo que he hecho. Entonces todo lo que tenemos que hacer en nuestra sección de cabecera es incluir una referencia a nuestro archivo CSS, que se llaman styles.css. Entonces entrémonos en ello. Vayamos a nuestro archivo CSS, y empecemos a hacer esto más hermoso. Entonces lo primero que quiero hacer es empezar por arriba y trabajar con todo nuestro cuerpo. Todo lo que quiero hacer es cambiar la familia de fuentes a, hagamos algo bonito o Cambria. ¿ Cómo se siente eso? Es todas estas pequeñas cosas, por cierto, lo que hace que tu sitio luzca mucho más apoyo del solo hace que parezca que ha sido amante y ha sido creado con colores k. Bueno, yo sólo quería aguantar negro. Negro. negro puede ser bastante intenso. Así que vamos a tenerlo un poco de negro. Ahí vamos. Y los litros pueden cerrar bastante juntos. Entonces solo quiero, conduciré a la propiedad de espaciado para ser igual a un píxel. Zona. Se ve un poco mejor. Lo siguiente que quiero hacer es que se puede ver la etiqueta H1 y la etiqueta H2 son bastante audaces. Yo sólo quiero quitar eso. Entonces, solo marquemos un gemelo y H2. Y vamos a tener un comentario aquí para que recordemos por qué hicimos esto eliminado. Y lo que quiero hacer son pesos de fuente. Digamos que es normal, mucho mejor. Y el uno, y empezamos a peinar nuestro encabezado. ¿ Recuerdas esa gran cabecera verde? De acuerdo, así que empecemos a trabajar con el bateador de Alá. Y recuerda qué identificación le dimos. Tenemos nuestro HTML. Podemos ver aquí tenemos nuestro encabezado. Después destrozamos todo dentro de un div con un ID de página top. ¿Puedes verlo? Entonces vamos a nuestros estilos aquí y vamos a acceder a nuestro elemento con un ID de página top. Por lo que sabemos ahora nos ocupamos de ese representante completo en la sección de encabezados. En primer lugar, quiero cambiar nuestro color de fondo a 10, 7, y 11. Después nos dieron, y el relleno se ve impactante. Entonces, solo tratemos con el relleno. Y las muchas formas en que puedes hacer relleno y darle cuatro valores y hacer la parte superior, levantar la derecha abajo. Pero si sólo le damos dos valores, por ejemplo, píxeles de equipo y 0, los píxeles del primer equipo como tratar con el relleno superior e inferior y un 0 píxeles tratando con la izquierda y la derecha. Eso tiene sentido. Entonces deberíamos ver huecos ahora arriba y abajo. Guarda eso. Eso es exactamente lo que ha pasado. Entonces estamos llegando ahí. El siguiente ítem, lo que podemos hacer es por qué en realidad no empezamos a afectar todo el wrap up, todo el div para olvidar nuestro índice. Y solo quiero dar un paso atrás ahora y empezar a peinar esta envoltura porque quiero que los estilos se apliquen a todos los artículos dentro de esta envoltura. Entonces hagámoslo realmente por encima de esta página superior, porque tiene más sentido para mí tratar desde el exterior, mayoría de los elementos van cada vez más detallados, bajando la página CSS. Por lo que aquí queremos acceder a nuestro DNI de derechos rata. Y En primer lugar, no quiero los estirados a lo largo de toda la pantalla. Simplemente dale un ancho o 90 por ciento. Ahí vamos. Por lo que se puede ver aunque hagamos esto un poco más grande, se puede ver que no es tan estirarse por toda la pantalla. Ahí vamos. Simplemente más fácil ver lo que nuestro fijador. Y quiero darle a esto un ancho máximo. Y digamos que el ancho máximo es de 100 píxeles. ¿ Cómo se ve eso? Realmente no hace mucho, supongo porque nuestras pantallas bastante grandes como es. Y entonces empecemos a darnos un poco de margen. Nuevamente, el margen superior e inferior, queremos ser de 20 píxeles. Y luego queremos parecerle a todo el envoltorio div directamente en. Esto es en realidad lo que quería hacer desde el principio. Por lo que sólo podemos hacer eso como altar. Y ahí vamos. Parecía que en nuestra página tiene tiempo de especie de cobrarse vida. Lo siguiente que quiero hacer es que ahora quiero agregarla realmente cool box-shadow rock. Queremos que esto se vea realmente impresionante. Hagamos una propiedad box shadow. Y quiero darle tres valores. En primer lugar, quiero darle el valor de desplazamiento x, que sólo lo va a empujar a la derecha de esta caja. Y quiero que sean seis píxeles. La siguiente entrada a la propiedad de sombra de cuadro son los desvíos Y. Por lo que quería realmente ser la sombra para estar a la derecha de la caja. Y al fondo. Entonces de nuevo, quiero darle un valor positivo de dos píxeles. Y entonces sólo quería tener un radio azul. Yo quería lucir un poco borrosa. Y quiero darle a eso un tamaño de cinco píxeles. Y luego, por último, queremos darle un color, ¿no? Y esto sólo le dan un cinco. ¿ Cómo está esa columna que luce bien paseos y se puede ver que está empezando a caer, empezando a tener forma. Otra cosa que quiero hacer es que quiero tener relleno de 20 pixeles. ¿ Cómo se ve eso? Se ve mejor. Y entonces lo último que quiero hacer es que quiero tener frontera. ¿ Quieres tener un borde que sea sólido de un píxel? Y digamos sólo dos en el 12121. Y podemos hacerlo un poco transparente, le dice. Creo que eso empieza a verse bien. Entonces todos estos pequeños detalles que hacen que un sitio se vea realmente wow. De acuerdo, Ya puedes ver cómo hemos empezado a darle estilo a nuestro encabezado, pero no es del todo diagnóstico. Queremos que se vea mejor. Entonces vamos a acceder a la página superior y seamos conocimientos más específicos. Hola, soy uno. Y también hagamos exactamente lo mismo aquí, página superior, pero salgamos de nuestro párrafo. Artículo porque x la palabra mi lista de compras. Y tomemos la línea. Cosas bonitas al Santa. buen aspecto, sin fin, solo límpiate con margen. Digamos mitad AIM. Apuntar. ¿Eso se ve? Ahora creo que eso se ve bien. Y por supuesto lo siguiente y quiero darle estilo es esa caja de entrada. Entonces esta x es esa. Y voy a dejar de hacer más rápido a través de esto no es un curso sobre CSS. Y sólo espero que aprendas una o dos cosas a medida que vas conmigo. Para dejar de hacer esto, obviamente podemos ajustarnos. ¿ Qué aspecto tiene eso? A lo mejor es un poco mucho. Vamos ancho máximo de 250. ¿ Cómo se ve eso? Eso se ve mejor. Margen. Arriba e inferior. Yo quiero aplicar algún margen y luego quiero decir, quiero que la pantalla sea un bloque. De lo contrario está amenazando el escondite que aparece debajo de él junto a nosotros. Por eso cuando uso margen de alterado no parecía gustarle esto. Por eso quería hacer display block. Y agreguemos un poco de relleno. Oh, eso sólo se ve hermoso, ¿no? Y por supuesto, vamos a añadir un borde de sólido de un píxel. Rb, 2.7212212210. ¿ Qué hace empresa? Sí, eso se ve bien. Tamaño de fuente, podemos decir es una M, Sólo hazlo un poco más grande. ¿ Y qué pasa con las tomas de color? Veamos cómo nuestros cuarenta y nueve, cuarenta y nueve, cuarenta y nueve. Hombre, creo que eso empieza a parecer muy, muy afilado. Y por supuesto, lo último que quiero hacer en este Haidt es darle estilo a esa casilla de verificación. Entonces, ¿qué le dimos otra vez? Vamos a nuestro HTML. Ahí hay una casilla de verificación. Al golpear un, de nuevo, la casilla de verificación daría una identificación de sacudida. Recuerda que le dimos un DNI de cambio. Entonces si vamos aquí, podemos ir ID de ancho máximo. Podemos dárselo a unos 180 píxeles. Ahora vamos a parecer verdad margen, top e bottom team pixels y lift y rock. Queremos centrarlo. Y luego queremos tomar la línea al centro. Ahí vamos. Por lo que esa lista de ocultas está empezando a tomar forma. Pero aún no es un 100 por ciento, verdad. ¿Por qué no? Sí. ¿ Sabes qué es? Quiero realmente darle estilo a esa casilla de verificación real, esa casilla de verificación de entrada con la idea de alta esa equidad de estilo. Entonces vamos aquí. Lo que queremos hacer es que queremos acceder a nuestra identificación falsa, pero ahora queremos darle estilo a esto. En realidad se lleva el de Bob con idea de difícil de hacer. Y creo que esto funcionará con 18 por ciento de margen de 0. Y es cierto que siempre mostramos bloque en línea. Creo que eso debería funcionar porque las imágenes lo colocan junto a esas listas de ocultación. Guardar un ego. Genial, ahí vamos. Nos estamos poniendo despacio, poco a poco atrapar a un mono como dicen. Entonces aquí vamos. Tenemos nuestro agradable cool que un encabezado estilizado. Yo soy de solo pausar el video aquí porque se está haciendo un poco largo y sé que a veces es agradable tomar un descanso. Hemos recorrido un largo camino y en la próxima conferencia acabaremos de terminar. Terminaremos con las dos secciones inferiores, el formulario y el div con ley desde Dubai, y debería ser relativamente rápido. Nos vemos en la próxima conferencia. 6. Crea los elementos de lista CSS: De acuerdo, Entonces aquí es donde lo dejamos. Recuerda que empezamos a espiar cabecera aquí y como que hemos terminado el calor, pero sigamos con la pérdida a esos tramos. Gallina, ¿recuerdas cómo lucen? Quiero envolver uno y un formulario en un rep el otro y un elemento div. Y sólo vamos a darle estilo para que se vean funky o extraños. Entonces sigamos con su plenitud. Y si vas al archivo de índice y nos desplazamos aquí abajo, puedes ver que le dimos un ID de elemento Ed. Entonces vamos a agarrar ese elemento, agregar elemento, y vamos a manipularlo. ¿ Cuál es el objetivo? Y a esto le pareció. De acuerdo, eso está bien por ahora. Y me resbalé bastante mismo típicamente en una presentación de acciones, los detalles de esto, aka la entrada real y ese botón. Entonces, en realidad empecemos todas las entradas. Entonces queremos acceder a la marea de, y queremos ahora ser muy específicos. Queremos empezar a peinar ese elemento de entrada. Lo primero que quiero hacer es que quiero hacer esa caja de entrada más grande. ¿ Se puede ver cómo no es lo suficientemente grande? Hagamos el ancho de 300 píxeles. ¿ Es lo suficientemente grande? Debería estar bien, siempre podemos cambiarlo más tarde. Lo siguiente que quiero hacer es que quiero hacer esto en una caja de entrada. Es elemento underdog. Por lo que quería retomar todo el ancho. Por lo que elegiríamos el bloque de exhibición de xi. ¿ Cómo es eso? Sí, esto solo agrega un margen para que se vea mejor. Vamos a darle algo de relleno. ¿ Qué más podemos hacer? Cambiemos esta frontera. Sólido de un píxel, dos en seis a 16 a 16. Oigan chicos, sólo un bonito gris claro. No queremos estas cosas en la cara del usuario. Queremos que todo sea muy sutil. Y aumentemos el tamaño de fuente puntiaguda. Se ve mejor. A lo mejor sólo deberíamos curvar ligeramente ese borde. Entonces solo voy a agregar un radio de borde, dos píxeles. Tiene esa mirada. Ahora creo que parece una botella. Dije que esto es muy, muy sutil. El borde radio, los dos primeros píxeles es la parte superior izquierda del tablero. Simplemente lo estoy redondeando tan ligeramente. Y luego perdió dos píxeles es solo estilo. Y el elevador de fondo, me gusta hacer sólo cosas sutiles de tamaño que acaban de conseguir un a te dan una buena sensación al respecto cuando aterrizas en una página y ya sabes, y se ha puesto amor en ella. Pero no teníamos que tener este indio. ¿ Y qué más podemos hacer? Tamaño de caja, border-box, ¿cómo se ve? La otra cosa que quiero hacer es que sólo voy a inundar esta rodilla izquierda. Tenemos que adivinar. Yo sí quiero agregar artículos para estar a la derecha. Específicamente, queríamos agregar botón directamente para que se mostrara a la derecha a este cuco de entrada. De acuerdo, así que nos estamos agarrando, nos llevamos a mí. Sólo recuerda por qué puse el flujo hoy. Si fuera porque estábamos cazando cualquiera de los elementos, específicamente que agregar botón para estar a la derecha de este cuadro de entrada. El pedregoso motivo por el que hicimos eso, y ahora por supuesto necesitamos acceder a ese botón. Empecemos. Por lo que queremos acceder al elemento de formulario padre. Dentro de eso. Si queremos realmente parar botón el dipolo, Es puntos y manipular los botones ¿qué? Eso parece Beta. Yo quería un cursor, obviamente para cambiar cuando el usuario pasa por encima de él para que sepan que es un botón. Degas fue de dos kilovatios. ¿ Cómo se muestra eso? Y todo lo que no podemos verlo. Eso está bien. Agregaremos un fondo y un fondo. Acabo de elegir un CALEA, 32. Ver 77 D. ¿Cómo se ve eso? Aquí vamos, empezando a cobrar vida. Podemos incrustar. ¿ Cómo es eso? Mira? Ver nos conseguimos, Vamos a cambiar este borde de una serie sólida de píxel. O si, si, decir ¿cómo eso total? Ahora conseguirme puede aumentar ligeramente el tamaño de la fuente. Ahora podemos sumar margen. Míralo a un OBS alineado. Simplemente recuerda que usamos el mismo margen se trata de nosotros como el cuadro de entrada y es por eso que estos dos se alinean entre sí. Y finalmente, podemos meternos en nuestros artículos hacer bisección. Esta última, última sección. Recuerde, este es un elemento aparente, el elemento div padre sea específico, y queremos resolver esto ahora. Entonces, vamos a desplazarnos hacia abajo. Sí, y vamos a acceder a ella. Qué TI hizo lo volvimos a dar y si nos desplazamos hacia abajo Sección 3, un ID de nombre de lista de abarrotes se puede ver dentro de la lista de abarrotes con una etiqueta H2. Y luego tenemos los elementos UL y todos nuestros artículos de lista, específicamente artículos de pasillo para comprar un naufragio dentro de elementos aliados. Otra vez. Entonces solo recuerda que lo primero que quiero hacerlos como exceso, voy a lista de abarrotes y vamos a darle algún margen. Sí, así que realmente empieza a lucir bien. Y luego quiero ser más específico. Por lo que quiero agarrar listas de abarrotes. Pero ahora vamos a darle estilo a los elementos UL. En primer lugar, quiero quitar esos puntos de bala. Puntos de bala. Será yucky. ¿ Cómo hacemos eso? Bueno, sólo accedemos a la propiedad de estilo lista y cambiamos su valor a ninguno. día que nos dieron los puntos de bala se han ido. Y luego lo otro que quiero hacer es que quiero eliminar relleno predeterminado que viene junto con el elemento SQL. Eliminar el relleno predeterminado. Perdón, tal vez estoy siendo más específico lo tienes porque esto no es lo que Golson CSA. Entonces estoy tratando de ir muy rápido. Um, siéntete libre de saltarte esta conferencia si te estás acercando a bordo. Pero entonces tienes que haber quitado el relleno por defecto. Ahora lo que quiero hacer, de nuevo no quiere ser específico, pero quiero empezar a manipular la lista de estilos aliados, XY South lista de abarrotes ID. Pero ahora vamos a acceder a nuestros artículos de la lista. Quiero que cada elemento de lista tenga relleno, el IGA. Y recuerda cómo cuando pasamos por encima de cada uno de estos elementos de la lista, como que teníamos un borde izquierdo y las fotos de Ángeles resaltadas. Eso es lo que sí quiero saber. Digamos que cinco píxeles sólidos. Y ese camión. Sí, eso se ve bien. Otra inundación el uno al otro ahora, pero no se preocupen, vamos a ser cualquier margen de desde que cobramos vida. Y luego se pueden ver todos los eliminados actualmente es sólo gustos. Y recuerda que los envolvemos en una etiqueta span es simplemente ir a HTML. ¿Cómo lo hicimos? Lo envolvimos en una etiqueta span, permitirá que los leads. Le dimos una clase de borrado. ¿ Recuerdas eso? Entonces en este momento sólo es aburrido sabor viejo. Lo que queremos hacer es que lo demos seguimiento. Y como mencioné, le dimos una cláusula. Eliminar. Por lo que 50. Vamos a flotarlo, ¿verdad? Sí, Oh, eso es genial. Entonces démosle un color de fondo fresco. Tiene extra OK. Ahora se ve bien. Vamos a darle un relleno y veremos que se ve terrible por el momento. Aquí vamos, Se está cobrando vida. Yo quiero hacer la frontera C. Se puede ver cómo agrega muy esponjoso. Entonces, solo redondeemos eso hasta el radio fronterizo. Y redondeemos las cuatro esquinas por cuatro píxeles. Oigan chicos, es sólo sutil. Quiero que el cursor del usuario cambie obviamente cuando pongan el mouse sobre el botón. Y vamos a deshacernos del DNI negro y que sea de color blanco. El tipo. Pero ahora si usan un caballo sobre borrar, sí quiero especificar en CUDA para cambiar. Quería solo ser una experiencia de usuario agradable. Entonces todo lo que tenemos que hacer es exceso de cláusula off de eliminaciones y casi cerrar borrar cada vez que el usuario pasa por encima de ella. Nosotros queremos afectar ciertos estilos a resolver, queremos afectar es este frente de fondo y sólo vamos a ir 20 2020. Degas. ¿ Qué tan genial se ve eso? Esto es impresionante y nos pueden ver a todos, creo que hemos hecho como lo hemos hecho con el hallazgo de los lados. ¿Sabes qué? Acabo de recordar cuando pasamos el cursor sobre este borrar estilos de pero no estas fronteras. Sí, es más audaz. Mantente gris al pasar el cursor sobre un elemento de la lista. Entonces déjame hacer eso rápidamente. Necesita acceder a las listas de abarrotes id Queremos fingir el estilo en las etiquetas LI, pero claro sólo cuando usan un caliente estaba enojado. ¿ Quieres cambiar el color del borde, no? Color da, 43, 43 cientos HLC. Colocamos sobre todo eso. Basta con lucir hermosa. Por cierto, acabo de conocer da 43, 43 con el color de borrar que puedo golpear. Por lo que ambos colores son exactamente los mismos. Pero se estarán divirtiendo un montón de no estar aprendiendo mucho. Y las políticas de listas se toman bastante tiempo, pero literalmente lo he codificado desde cero. Ahora ya has visto cómo lo he hecho. Todo parece estar funcionando buscando lisinopril, oficina vista, nada funciona. Si hacemos clic en Eliminar. Si intentamos decir que quiero comprar un poco de azúcar, MLK, que no sé qué es eso, pero si agregamos eso, no pasa nada. Si ocultamos la lista y no pasa nada. Y por supuesto, si tratamos de buscar, digamos, MLK, no pasa nada. De esto se trata la siguiente etapa. Ponemos todos nuestros conocimientos que hemos aprendido en el DOM en las próximas conferencias. Así que diviértete, disfrútalo, y te veré. 7. Recapitulación rápida: Petróleo crudo, gas, y ¿vamos a meternos en el corazón y medios de manipular el DOM? Va a ser realmente emocionante, muy amplificado. Por lo que puedes ver en pantalla y luciendo bastante bien, Se ve bastante funky, pero claro que no hay funcionalidad. Antes de que empecemos. Yo sólo quiero mostrarles algunas cosas. Yo sólo como que quiero darte una recapitulación de alto nivel. Entonces si inspeccionamos este documento aquí y vamos a la consola, ¿cuáles son algunas de las cosas que sólo quiero recapitularlos de mí. Simplemente agréguese un poco. Sí. Entonces lo que no quieres leer te mantuvo en solo unas cuantas cosas. En primer lugar, solo recuerda cómo hemos estructurado nuestro código. Y quiero que empecemos viendo cómo tenía un artículo dinámicamente a lo más lento. Entonces dando un paso atrás, recuerda cómo hemos estructurado nuestro código. Hemos tomado nuestro elemento UL y tenemos listas suscritas. Y hemos leído todo eso dentro de una etiqueta div. Y la etiqueta div tiene una identificación de listas de abarrotes o el artículo de abarrotes. Sólo echemos un vistazo aquí. Vayamos a nuestro código. Vamos a la lista de abarrotes que hay ahí fuera dentro de ese div. Recuerda que lo hemos estructurado para que si tenemos un UL elementos y dentro de eso tengamos todos nuestros ítems de lista. Qué esos fans. Y el nombre de cada artículo de abarrotes está en un elemento span con un nombre de clase del artículo. Entonces sólo recuerda esto a medida que avanzamos. De acuerdo, entonces ¿en qué te quiero recapitular? Bueno, sólo veamos algunas cosas. Cookie de alto nivel, solo para conseguir esos, solo para hacernos pensar. En primer lugar, ¿cómo accedemos al ítem dominio fuerte? ¿Te acuerdas de esto? Seguro que lo que podemos hacer es que podemos definir una variable llamada artículo de abarrotes. Y entonces podemos acceder a nuestro objeto de documento en red. Podemos acceder al QuerySelector. Y funciona de manera muy similar a otras bibliotecas correlacionadas por ahí como jQuery. Podemos ser extremadamente específicos. ¿ A qué me refiero? Digamos que queremos acceder al tercer ítem de esta lista. Algo para beber, Coca-Cola. ¿Cómo haríamos eso? Bueno, te mostraré lo que podemos hacer es que primero podemos ser muy amplios accediendo a todo el div con una identificación de lista de abarrotes. Dentro de eso, queremos acceder a un aliado tick abajo a cada uno de esos ítems de la lista. Pero en esta instancia, queríamos ser el tercer ítem para poder acceder al tercer hijo. Pero ahora tampoco queremos que nos devuelva toda la etiqueta LI. Sólo necesitamos uno, el sabor real, algo para beber, EG Coca Cola. No queremos ese botón de borrar también. Por lo que incluso podemos ser más específicos. Podemos decir, vale, Cool, queremos la cosa que nos ha devuelto. Solo queremos que sea cláusula de ítem. Porque si recuerdas si me han ocurrido, puedes ver aquí que el lapso con algo para beber ET Kirk tiene un nombre de clase de conjuntos de artículos. Todo lo que hemos hecho aquí. Y eso debería ser. Si intentamos acceder a nuestro artículo de abarrotes. ¿ Qué tan impresionante es que nos devuelvan? Ese artículo exento, nos fuimos cuco. Está bien. ¿Cómo nos devuelven? Todos los ítems de la lista. Si bien podrías pensar, vale, definamos una variable llamada artículos de abarrotes. Es sale de documento el selector de consultas. Y digamos que queremos todos los elementos de la lista. Nuevamente, podemos acceder a toda nuestra lista de abarrotes de Rapa y solo podemos decir, escuchar, darnos el aliado. Ah, oh, claro, artículo de abarrotes. Yo quería un ACI artículos de abarrotes. Y si fuéramos a correr eso y tratamos de consolar a otro fuera, algo raro pasa. Y's nos están dando el artículo de abarrotes del lote de la consola. Yo quería que fueran artículos. Y si hacemos eso, Sólo vamos a conseguir la primera tecnología aliada. Porque recuerde, la consulta select devuelve un elemento del DOM. Entonces, ¿cómo devolveremos todos los artículos en el DOM? Escribamos esto, solo despejen esto. Para que pueda empezar. Otra vez. Eso es correcto. Podemos utilizar el selector de consultas todo concreto. Así que vamos a LET artículos de abarrotes es igual a selector de consulta de documentos todos. Y sí, podemos probarlo. Podemos acceder a nuestra lista de abarrotes, todas las etiquetas LI. Y esta consola cierre esta sesión. Y ellos vamos, nos devuelven una lista de nodos. Y si abrimos esa lista de nodos, obtenemos cada uno de nuestros textos. Pero es un imperdible. ¿ Recuerdas cómo podemos acceder a los elementos en la lista de nodos? Bueno, se puede acceder a ella como una matriz normal. Entonces si quieres el primer aliado, solo podemos hacer los corchetes y 0, eso nos dará la primera etiqueta LI. Por supuesto, si quieres el segundo, puedes poner el número 1 y eso te dará el segundo, y así sucesivamente y así sucesivamente. Bastante sencillo. Y cómo podemos llamarlo ciclo a través de todos estos ítems dinámicamente. Podemos usar el para cada método. Y hemos pasado por todo esto desconocido. Sólo te estoy dando un breve recapitulación. Pero de todos modos, ¿por qué podemos usar el método ForEach? Lo hará, porque es una lista de nodos. Si utilizamos otros métodos de acceso como selector de consultas por ejemplo, no tenemos acceso al para cada uno. Es decir, cuando usamos ciertos que nos devuelven un ArrayList, como selector de consultas todo por ejemplo. Entonces, ¿cómo funciona eso? Bueno, podemos acceder a nuestros artículos de abarrotes. Podemos acceder al para cada método. Entonces podemos decir por cada ítem que nos devuelva, queremos realizar una función específica. Y bajo no, digamos que queremos acceder al elemento y queremos cambiar sus tomas para contin propiedad para ser. ¿ Crees que eso va a funcionar? El haka artículos que así es una forma de que podamos iterar a través de todos los elementos de la lista y dejar de manipular su contenido. Algo más que podemos hacer cuando no quieres anular algo es que puedes anexarlo hacia siempre Ellos ya. Entonces lo que podemos hacer, por ejemplo, es tomar nuestros artículos de lista de abarrotes, el foreach. Y en lugar de asignar todo el contenido del texto a algo nuevo, podemos simplemente anexarlo y su pintado incluyendo el símbolo de adición. Y sí, solo podemos decir que es un artículo de abarrotes que ver si eso funciona. Mano. Ahí vamos. Ahora acabamos de agregar algo nuevo. Podemos seguir jugando con esto e infinitarlos y realmente es divertido. Yo sólo quería darles un tipo de resumen o recapitulación de muy alto nivel de lo que hemos hecho en conferencias anteriores. La otra cosa justo antes de terminar esta conferencia es ir a los elementos aquí. Deshacernos de todo esto. Y sólo recuerda que trabajamos con todas estas cosas. Trabajamos con nodos. Recuerda, todo es más o menos un nodo en el DOM. Tenemos nodos de elemento y nariz de elemento o muy sencillo, es como este div aquí como una nota de elemento. Pero no sólo tenemos nodos de elemento. Dewey, tenemos toda una gama de tipos diferentes. Tenemos comúnmente nodos, por ejemplo, se puede ver sí, sección 1, sección 2, 6 y 3. Esos son comentarios, notas. No sólo tenemos nodos comunes son Dewey. Y tenemos un montón de cosas. Tenemos nodos de gusto. Abrimos una de estas dosis, abrimos la URL. Y ahora tomo quiero decir, subimos la escalera hace ahora. Por lo que no es exactamente lo mismo que nuestro HTML. Pero estos se lleva nodo vía artículo de abarrotes ya que toma nota, no sólo tenemos nodos Tomas, también tenemos un nodo de atributo. Por ejemplo, esta etiqueta H2 tiene un atributo con una propiedad llamada cláusula, y le hemos dado un valor de título. Entonces ahí lo tienes. Espero que este sea el recuerdo de Tokio. Espero que eso sea un poco haciendo santos. Pero suficiente para mí. Siento que es hora de que nos metamos en el aspecto de la tontería de hacer que esto funcione. Entonces estoy súper, súper emocionado y nos vemos en la próxima conferencia. 8. Eliminar elementos DOM: la forma antigua: Entonces hablemos de codificación. Todo lo que he hecho es que he agregado un archivo JavaScript llamado app.js. Entonces si tenemos nuestro índice y vamos al fondo, en realidad necesitamos agregar el guión, ¿no? Y lo hemos llamado app.js. Entonces ahí vamos. Y acabo de crear un archivo js punto vacío en el mismo directorio es que nos agregaremos el índice en el styles.css. Entonces lo que he hecho y lo primero que quiero hacer es que quiero que tomemos esto de manera fragmentaria. Yo quiero que solo abordemos cada pieza, el petróleo. Entonces lo primero que quiero hacer es que quiero que seamos capaces de eliminar un elemento de la lista. Si vamos a nuestro navegador, podemos ir, puedes ver tenemos estos botones de borrar. Y por supuesto que ahora mismo cuando hacemos clic en ellos, no pasa nada. Entonces vamos a ver lo que esto primero, ¿cómo íbamos a hacerlo? En primer lugar, quiero mostrarles la manera ineficiente de hacerlo. Y luego quiero que paren el video y quiero que intenten utilizar el burbujeo de eventos e incluso delegación. Pero primero, sigamos con el enfoque ineficiente, que puede que veas mucho en el código de desarrollador. Por eso quería que estuvieras al tanto de ello. Entonces sí, todos regresamos y tomaré estado en cómo podemos hacer esto. Vamos en primer lugar, quiero etiquetar nuestro código así que sólo hay se han estancado aquí y eliminar elementos, pudre y solo voy a copiar este enlace SAM. Ahí vamos. Y una forma de hacerlo es agregar oyentes de eventos a cada uno de esos botones. Entonces el primer paso sería agarrar todos esos botones, ¿verdad? Y lo podemos hacer definiendo una variable llamada Lecciones. Zoom inmediato, Sí, Así se puede ver esa beta, queremos acceder a los documentos en el, tenemos el selector de consultas. Todo en el selector de consultas todo lo que queremos agarrar la lista de abarrotes div externa y a nombre queremos agarrar cada uno de esos. Eso lo elimino. Recuerda, eso necesita un costo de eliminación. Entonces tiene una clase de élites. Y si consolamos loguemos esto a la pantalla, Sigamos adelante. Y si inspeccionamos esto, iría a la consola. Deberíamos ver una lista de nodos y voy lista de modo está aquí y hablé cuatro elementos, no importa. Y es cada uno de esos botones. Entonces aquí vamos. Tenemos acceso a los botones. Volvamos a 6 datatype. Y la manera ineficiente de la vieja escuela es recorrer cada botón y agregarle oyentes de eventos. ¿ Cómo haríamos eso? Bueno, incluso en el video de recapitulación previamente te mostraba que podíamos acceder por cada lo hace. Entonces hagámoslo. Accedamos a nuestra variable de botones. Y luego podemos acceder a este método ForEach. Podemos agarrar cada botón en el para cada bucle, y luego podemos hacerle cosas. Y en esta instancia queremos agarrar ese botón y queremos agregar cualquier hecho justo ahora, las venas que queremos escuchar y cada botón es un evento click. Y entonces por supuesto queremos ejecutar a nuestro manejador. Recuerda esa mano para funcionar portones dado un objeto de evento el cual definimos en una variable antigua II. Por cierto, sólo estoy ejecutando mano olivina directamente dentro de esta función. Ahora, ¿qué pasa cuando el usuario hace clic en ese botón? Esto queremos navegar a los padres no tuitear, y luego queremos eliminar ese periodo. Entonces lo que queremos hacer es querer definir una nueva variable. Queremos definir una variable llamada aliado, por ejemplo, porque se mantiene dentro de un elemento aliado. Y así elementos aliados ¿Va a ser el blanco. Trajo el botón en el que acabamos de hacer clic, y van a ser sus elementos padre. ¿Eso tiene sentido? Entonces recuerda lo que hemos hecho. Los usuarios hicieron clic en ese botón. Ahora hemos navegado a la etiqueta aliada que demasiado delgada. Y digamos ahora queremos usar la vieja escuela quitar niño y método. Nosotros hacemos eso. Recuerda en este curso nos hemos visto, bueno, es un poco raro porque llegamos a la LI no tuvimos que acceder a sus padres y luego sacar a su hijo para poder retirarse a sí mismo. Sé que suena raro. Entonces tenemos que acceder a nuestra variable, tenemos que luego acceder a su elemento padre, y luego podemos quitar tiza. Y por supuesto, el niño que queremos quitar es él mismo. Entonces veamos si este código funciona antes de que empecemos a mejorarlo. Vamos por el navegador y está tratando de mover clase infantil. Absorción de humo. ¿ Qué he hecho mal? Vamos a la parte superior de la consola. El niño eliminado no es una función. El niño eliminado no es una función. ¿ Por qué? ¿ Debería ser un C mayúscula? Enfria, aquí es donde el analizador JavaScript es inagotable rodilla precisa. Entonces el ego, si pone un C mayúscula que debería funcionar, Astronomía mueve azúcar y especias y se retira. Qué fresco algo para beber, pizza y MLK. Día vamos si borramos todo. Qué impresionante. Pero como soy antigua, Vamos a nuestro código. Esta no es la forma más eficiente de hacerlo. Yo quiero que detengas el video aquí. ¿Sabes qué? En realidad detendré el video aquí. En la próxima conferencia, haremos la nueva y mejorada forma de hacer exactamente lo mismo. Pero vamos a estar utilizando el burbujeo de eventos, cualquier delegación de eventos que antes de regalar esta solución, dale un piense. Y en la próxima conferencia, lo recortaremos juntos. 9. Eliminar elementos DOM: la nueva forma: En primer lugar, ¿cómo vamos a estructurar esto? Y es utilizar incluso burbujeo. Si conseguimos aquí nuestro archivo de índice y nos desplazamos hacia arriba, notarás que tenemos estos enormes elementos de búho, ¿no? Entonces, ¿por qué no ponemos a nuestro oyente de eventos en eso y puede escuchar todos los frijoles clicky que burbujean hasta él. Entonces hagámoslo. Entonces eliminemos todo este código porque es muy, muy ineficiente. Entonces vamos a estar agregando un oyente de eventos a esos elementos de UL. El primer paso es obviamente que tengamos que agarrar ese elemento UL. Entonces hagámoslo definiendo una variable llamada lista de abarrotes. Eres dueño. Por falta de una palabra mejor, podemos acceder a nuestro documento aquí. Podemos acceder al selector de consultas porque solo necesitamos un elemento, ¿no? Y para ser específicos, podemos buscar dentro de nuestro envoltorio de lista de abarrotes. Y dentro de eso, queremos agarrar todo lo que todos tomen. Ahora lo que queremos hacer es añadir a nuestro oyente de eventos. Entonces, ¿cómo hacemos eso? Bueno, agarramos nuestros elementos de URL. Tiene un método llamado AdDeventListener. Vamos a estar escuchando todo el evento click, y luego vamos a ejecutar una función de manejador. Y sólo llamémoslo quitar. Por lo que aquí podemos definir una función de manejador. Vamos a usar la palabra clave de función de JavaScript, lo hemos llamado remove. Y aquí vamos. El corazón del opcode yace dentro de estos rizados o índices. Vamos a estar existiendo en el objeto de evento. Sabemos que tenemos que ponerlo en una variable. Normalmente lo llamamos variable E. Y vamos a necesitar acceder a especie de la gota de la vena tada debido a la acción de Estados Unidos toma al decir la palabra MLK. No queremos eliminar ese elemento de la lista. Es solo cuando el usuario hace clic en el botón de borrar. Aka recuerda que tiene una clase de borrar. Es sólo en ese caso donde queremos realmente ejecutar esta función. Entonces, en primer lugar, definamos una variable objetivo. Y pueden ser el objetivo real, alias ese elemento que phi un DVT. Ahora, podemos cambiar si el objetivo, si es Krosnick es igual quitar a Dean, queremos que pase algo. Neuronas, queremos ejecutar esta función. De lo contrario queremos que no pase nada en un remate si el usuario ha hecho clic en esa banda y entramos en agarrar su elemento padre siendo ese elemento LI entero. Entonces definamos otra variable llamada aliado. Y sabemos que van a ser los objetivos, ese va a ser su elemento padre. ¿Eso tiene sentido? Entonces todo lo que tenemos que hacer, por supuesto, es XY establecer elementos y utilizar el nuevo y mejorado método remove sobre nosotros. Hoy vamos, espero que esto esté haciendo muchas escenas y esta es una forma mucho mejor de estructurar nuestro código. Entonces vayamos a nuestro navegador y veamos si esto funciona. Intentemos eliminar MLC. No está funcionando. ¿ Qué he hecho mal? Vayamos a la consola. Entonces ni siquiera es ver eso. Ni siquiera está en desencadenar ese evento de clic. Vayamos aquí. Ah, ya sabes lo que creo que podría ser el caso. Sí, el nombre de la clase no se quita resistor. Si vamos aquí a indexar, sí, Ese podría ser el problema. elimina el nombre de la clase. Como podemos ver, no es quitar. Eso debería suprimirse. Volvamos al navegador. Intentemos eliminar el sesgo de aseguramiento. Entonces esta es una forma mucho mejor de estructurar nuestro código y nosotros utilizando realmente mucho desorden de conceptos avanzados con objetivos de gentileza. Entonces como tengo sentido, espero que sí, pero en la siguiente edad y sigamos con ellos, hemos hecho la eliminación de ítems lógicamente, el siguiente paso debería ser tener que averiguar cómo agregar ítems a la lista. Puedes darle un go tú mismo. Si vamos al navegador, quédate. Pero lo que queremos, queremos que el usuario escriba algo en el cuadro de entrada o cuando el usuario haga clic en anuncio. Queríamos la edición dinámicamente a la lista del préstamo. ¿ Cómo íbamos a hacer eso? Dale un poco de pensamiento y la próxima conferencia, lo vamos a codificar para conseguirlo. Sinón. 10. Introducción a las formas: Por lo que ahora nos estamos metiendo en añadir elementos a una lista. De verdad va a ser emocionante y esperando y aprendí una tonelada en esta conferencia. Entonces, ¿por dónde empezamos? Bueno, antes de que empecemos , la codificación, los aros casi no se hacen. Café Lama. Fue esta clase. En fin, como decía antes de empezar a codificar, quiero que discutamos formularios con un poco más de detalle. Recuerda en la primera parte de esta serie DOM, discutimos el acceso a la propiedad del formulario en nuestro documento. Déjame mostrarte a lo que me refiero. Sólo yo te lo recuerdo. Entonces vamos a nuestra consola. Ahora vamos y cómo accedemos a nuestros formularios mole en primer lugar, accedemos a nuestro documento, la raíz de nuestra página de comida para llevar y documento honesto hace una propiedad por defecto que nos proporciona el DOM llamados formularios. Y es así de fácil y lo que se nos devuelve es una HTMLCollection. Hemos pasado por esto con mucho más detalle en la serie uno. Pero si abrimos esta HtmlCollection, podemos ver que tenemos dos formas. Y esto tiene sentido. Es literalmente sólo representar nuestras formas en nuestro HTML. Si vamos a ocurrir. Este es nuestro archivo index.html. Podemos ver que tenemos dos formularios. El primer formulario está dentro de nuestra sección de cabecera, y luego tiene un ID de ítem de búsqueda. Nos vamos a meter en esto más tarde. Por ahora queremos tratar la Sección 2. No tuitear SRC conforme. Ahí es donde el usuario escribe en elemento que quieren agregar a la lista y haga clic en Agregar dicho haciendo santos. Entonces si volvemos a nuestro navegador, ¿Cómo existimos a las cuatro? Bueno, hay algunas formas y podemos lidiar con ello como una matriz en algunas instancias. Específicamente si queremos acceder a elementos de esta colección HTML, ¿a qué me refiero? Bueno, podemos acceder a esa forma exacta. Ganamos accediendo a la propiedad del formulario. Y luego tipo de tratarlo como una matriz mediante el uso de los corchetes. Y podemos salir del segundo elemento de la matriz. Y esa es la forma que queremos. Esa es una forma en que lo podemos hacer. Otra forma en que podemos hacerlo es en realidad podemos pasar como argumento. Es ID, y sabemos que tiene un ID de artículo agregado. Devolvemos eso y obtenemos exactamente lo mismo. De acuerdo, Entonces esto es un poco de recapitulación. Es sólo un poco de un FYI de un lado. Ahora antes de empezar a codificar es una cosa más tengo que mostrarte. Y eso es lo que sucede con las formas. Pasan dos cosas. Uno, se despide un evento de presentación. El segundo que pasa es que no se refresca toda la página. Déjame mostrarte a lo que me refiero. Entonces digamos que el usuario elimina todos los artículos, pero el último de esta pizza. Si ahora queremos agregar MLC y el usuario hace clic en anuncio, recuerda cuál es el comportamiento predeterminado. Se debe enviar evento se despide y a toda la página se recarga. Demos clic en Agregar. Y iban a ir toda la página recargas. Y puedes ver en la esquina superior izquierda de nuestro navegador, cada vez que se actualiza meticulosamente el botón Añadir. Watts. No queremos este Dewey, pero suerte para nosotros es la forma en que podemos evitar el comportamiento por defecto. Déjame saltar rápidamente a la pantalla y déjame hablar un poco más sobre esto. 11. Conducta predeterminada para la presentación de formularios: Antes de empezar a lidiar con nuestro formulario, creo que realmente necesitas entender cómo algunos eventos desencadenan el comportamiento por defecto y qué podemos hacer como desarrolladores para controlar qué tipo de evitar que ocurra el comportamiento por defecto. Entonces aquí vamos. Tengo un archivo de código de Visual Studio en blanco abierto. Y quiero que veamos la etiqueta de ancla. Específicamente ¿qué pasa cuando hacemos click en un enlace? ¿ Cuál es el comportamiento por defecto? Y te mostraré ya sabes que el comportamiento por defecto es abrir una nueva ventana del navegador siguiendo ese enlace, déjame mostrarte lo que quiero decir. Entonces aquí vamos. Vamos a crear un archivo index.html, una plantilla HTML dentro de aquí podemos literalmente tener un elemento de cuerpo y solo una etiqueta de anclaje con un enlace. Y esto sólo lo vincula a, no lo sé, Google. Puede ser de cualquier tamaño que queramos. Lo siguiente que quiero hacer es abrir un servidor en vivo. Abramos rápidamente nuestro servidor en vivo. Espere a Rusia. Ya viene. Por supuesto, ten un gusto intuitivo. Tonta a mí. Vayamos a Google. Y llevemos esto a la izquierda de la pantalla. Y ahí vamos. Hay en link. ¿ Y qué pasa cuando hacemos click en ese enlace? Seguro que lo sabes. El usuario es redirigido a Google.com. De acuerdo, este es un ejemplo muy sencillo. Pero, ¿cómo íbamos a evitar este comportamiento por defecto? Bueno, déjame saltar rápidamente a una presentación y hablemos de ello. Como acabo de mencionar, muchos elementos HTML exhiben un comportamiento por defecto cuando interactuamos con él. ¿ Qué tipo de elementos alguna vez comportamiento por defecto? En las imágenes se dicen muchas. Por ejemplo, cuando un usuario hace clic en un cuadro de texto, el comportamiento predeterminado da que toma el foco de caja con un poco de período de cursor parpadeante. Todos sabemos esto cuando entramos en cuadro de texto de entrada, no te preocupes. Usando nuestra rueda de ratón en un área desplazable se desplazará en dirección que nos desplazamos con esa rueda de ratón. Tomar una casilla de verificación activará o desactivará ese cambio de estado. Al hacer clic en un enlace, un enlace de etiqueta ancla abrirá una nueva página y dirigirá al usuario a ese enlace. Todos estos son ejemplos de perno en reacciones a eventos, nuestro navegador instintivamente sabe qué hacer al respecto. La buena noticia para nosotros sin embargo, es que podemos apagar este comportamiento por defecto y cuando no lo queremos. Y podemos hacer esto porque tenemos mucho control sobre el navegador, tiene Desarrolladores. De acuerdo, genial, Todo está bien y bien, pero ¿cómo apagamos este comportamiento por defecto? Si queremos convertir este comportamiento por defecto o podemos llamar a la función por defecto de provincia. Esta función necesita ser llamada al reaccionar a un evento sobre el elemento en caso de reacción por defecto queremos ignorar. Entonces solo recuerda que tenemos que acceder a ella en el objeto de evento en sí. Y hoy soy portador de buenas noticias porque el método PreventDefault se puede utilizar en muchos elementos, como enlaces, casillas de entrada, formularios, casillas de verificación, cetera, etcétera. Pero ahora volvamos a nuestro ejemplo de la etiqueta de ancla y veamos cómo podemos evitar que suceda su acción predeterminada. ¿ Eso tiene sentido? Eso espero. Pero, ¿cómo accedemos al método PreventDefault? Bueno, volvamos aquí con nuestro editor de textos. Vamos a expandir esta cutie. ¿ Cómo íbamos a ir para acceder a dónde viene y cómo funciona? Bueno, en primer lugar, queremos estar usando JavaScript. Entonces agreguemos una etiqueta de script en la parte inferior de nuestro archivo. Lo primero que queremos hacer es que queremos acceder a esta etiqueta ancla. Y ya sabemos esto. Son muchos métodos de acceso diferentes. Vamos a ponerlo en una variable JavaScript, y vamos a darle a esa variable un nombre de decir, ancla. Podemos acceder a esta variable iniciando y documentaré objeto. Y de día, tenemos muchos métodos de x. El que usaré ahora es getElementsByTagName. El nombre de la etiqueta que queremos es nuestra etiqueta ancla. Y recuerda lo que nos devuelve este getElementsBytagName. Nos devuelve una HtmlCollection. Parar aquí no tiene suficiente. En realidad tenemos que decirle al navegador qué elemento de la colección queremos. En este caso, sólo hay un artículo en la colección. Por lo que queremos acceder al primer elemento de la colección. Entonces ahí lo tienes. Tenemos una etiqueta de ancla. Todo lo que queremos hacer ahora es que necesitamos adjuntar un oyente de eventos. ¿ No lo hacemos? Haga clic en el oyente de eventos? Podemos hacerlo accediendo a nuestra variable en red. Tenemos un método predeterminado que nos proporciona el navegador llamado add event listener. Hemos pasado por esto muchas veces y probablemente te estés aburriendo bastante de ese plátano. Y en lugar de definir nuestro propio manejador de eventos personalizado en otra función, solo lo voy a hacer bien dentro del segundo argumento. Y voy a usar la sintaxis de flecha. De tres vías simple. Es sólo poner un espacio ahí. Entonces ahí vamos. Esta es nuestra función de manejador. ¿ Y qué queremos hacer? Bueno, en primer lugar, queremos evitar el comportamiento por defecto. Este comportamiento predeterminado se encuentra en el propio objeto de evento. ¿ Y recuerdas cómo acceder a este objeto de evento? Tenemos que ponerlo en una variable, y típicamente lo ponemos en una variable llamada e Así que todo lo que tenemos que hacer para prevenir el valor predeterminado es que tenemos que acceder a este objeto de evento en el son un método llamado prevent default. Y porque es una función, voluntad, porque es un método, tenemos que seguirlo por paréntesis. hoy vamos y evitamos el comportamiento por defecto. Y solo para rematar por ejemplo de salud cool, lo que quiero hacer es que quiero acceder en variable ANCA y luego quiero cambiar su contenido de texto. Y sólo podemos decir comportamiento por defecto como se ha prevenido. ¿ Qué está pasando? Sí, lo tienes. Tenemos y si vamos, Es todo navegador. Ampliar NOSOTROS. Volvamos atrás y refresquemos nuestra página. ¿ Qué crees que va a pasar ahora, déjame simplemente acercar. ¿ Qué crees que va a tener el nulo cuando el usuario haga clic en ese enlace. Bueno, probémoslo. Demos click en el enlace. Está bien, no importa. Por lo que ahora acabas de aprender a prevenir el comportamiento por defecto. A. No nos han redirigido a Google y por haber cambiado, cuida ese enojo cuando hacemos clic en él. Entonces ahí vamos. Solo quería mostrarles cómo podemos empezar conseguir más control sobre el comportamiento por defecto. Por supuesto, ahora mismo no hemos lidiado con la forma, pero eso es lo que vamos a hacer en la próxima conferencia. Vamos a empezar a lidiar con esa forma con el usuario quiere agregar artículos al ShoppingList. Nos vemos ahora. 12. Añadir elementos dinámicamente: Ahora nos estamos metiendo en la parte realmente emocionante de agregar artículos a nuestro lado. Cómo lo hacemos lo haremos, si vamos a nuestro archivo app.js, puedes ver aquí hemos hecho borrar elementos. Entonces déjame solo copiar esto. Golpear disturbios y es sin parar. Crea una nueva sección donde ahora queremos añadir artículos. ¿ Por dónde empezamos? Bueno, si vamos a nuestro archivo index.html y si nos desplazamos hacia abajo en nuestro archivo índice, llegamos a la sección dos de Alice, este es nuestro formulario con el usuario agrega un ítem y recuerda el comportamiento predeterminado de un completo. Siempre que veamos un botón en un completo y el usuario hace clic en ese botón, un evento de envío será despedido, pero no en el propio botón que será despedido sobre ese elemento de formulario. Entonces lo primero si queremos hacer es que queremos escuchar para el evento de envío en el elemento de formulario, ¿no? Pero entonces queremos evitar los impagos de deuda. Entonces si vamos a nuestro archivo app.js, el primer paso es agarrar ese elemento de forma. Y para hacerlo, pongámoslo en una variable llamada formato array. Y podemos acceder a nuestro objeto de documento. En eso, podemos acceder a un método llamado get element by ID y le dimos un ID de AddItem. Recuerda para eso nuestro archivo de índice, Dada esa forma, un ID de AddItem. Vea cómo vamos con acceso a nuestro pleno ahora mismo. Lo siguiente que queremos hacer es añadir un oyente de eventos. ¿ No adjuntamos un oyente de eventos? Por lo que accedemos a nuestra forma y variable. Después queremos agregar un oyente de eventos, pero este evento no es un evento click somos nosotros. Se trata de un presentado. Eso es lo que queremos escuchar. Y entonces por supuesto, queremos ejecutar una función de manejador. Vamos a estar accediendo a este objeto de evento. Recuerda, tenemos que, para poder usar ese método de prevención predeterminado, lo vamos a poner en una variable llamada e Entonces vamos a utilizar la nueva y mejorada sintaxis de flecha. Y vamos a definir cómo funciona un manejador dentro de estas llaves. El primero que queremos hacer es evitar que la página se refresque. Y para ello, tenemos que acceder a nuestro objeto de evento y utilizamos el método por defecto. Sí, lo tenemos. Vamos a nuestro archivo de índice y vamos a sacar nuestro sitio en Live Server. Para que se acerque o aleje a un 100 por ciento. Y digamos que el usuario elimina todos los elementos menos uno y luego escribe algo en el aire y hace clic en Agregar. Ya puedes ver la página no es refrescante. Entonces él consiguiendo una lenta pero seguramente, volvamos a nuestro código. Y volvamos a nuestro archivo JavaScript. ¿Cuál es la siguiente declaración? Bueno, si vas a nuestra página web, sin embargo, el usuario va a estar escribiendo litros y gusto en esta caja de entrada en eso. Y lo que queremos que hagan es que tengamos que agarrar ese insumo. Toma dentro de esa caja de entrada. Y luego necesitamos editar como elemento de lista cuando hagan clic en Agregar. Entonces vamos a agarrar esa entrada sabrosa. ¿ Y cómo agarramos los textos? Todo lo que podemos usar otro de los métodos de x que usan QuerySelector en esta instancia, es todo lo que tenemos que hacer aquí es agarrar usos. Podemos salir de la tabla de usuarios mediante un selector de consultas y estamos buscando los elementos de entrada. Y en el elemento de entrada, hay una propiedad llamada valor, y nos devuelve el valor en el campo de texto de entrada. Déjame mostrarte lo que quiero decir. Entonces definamos una variable llamada texto, y esto será lo que el usuario ha tocado en esa caja de entrada. Tenemos que agarrar la forma y la propiedad. Y como mencioné, podemos usar un método de acceso llamado selector de consultas. Ahora, podemos ser muy específicos todavía. No podemos, no podemos simplemente usar el selector de consulta de entrada y luego obtener ese valor. Y para demostrártelo, Sólo vamos a la consola registremos el texto. Vamos a nuestro navegador. Y echemos un vistazo a la consola. Y se enseña piano, MLK y haga clic en Agregar. Y iban con conseguir que el MLK se nos mostrara con literalmente got que toma valor de esa caja de entrada. Te dije que no es tan difícil conductor. Pero volvamos a nuestro editor de textos. Podemos ser más específicos. Por ejemplo, digamos que tienes algunos tipos diferentes de campos de entrada o elementos. Pero en esta instancia sólo queremos el que tenga tipo de mapa gustativo. Podemos hacer eso también para ser más específicos dentro del navegador GUDDAT, de nuevo, es solo rasgar todo y digamos que azúcar especia. Y hacemos clic en Agregar y obtenemos jefa astucia. Eso es solo si quieres ser más específico. Pero en este caso sabemos que sólo tenemos un insumo, así que no tenemos que manejar eso. Simplemente podemos mantenerlo muy, muy sencillo. Eliminemos esta consola porque sabemos que funciona. ¿ Cuál es la próxima fecha ahora? Madres solteras, queremos añadir elemento de lista a nuestro navegador. Nosotros queremos añadir literalmente otro elemento de lista como Azúcar y Especias. Queríamos añadir uno nuevo. ¿ Y cómo hacemos eso? Bueno, primero necesitamos mirar su maquillaje. Índice. ¿ Qué nota de cada artículo? Se puede ver que hay una etiqueta LI. Y dentro de cada elementos LI, tenemos dos tramos. El oneSpan tiene una clase de artículo y ese es el artículo que el usuario quiere comprar. Y luego el otro lapso es ese botón de borrar. Y por supuesto tenemos diferentes cláusulas que definen ese estilo. Entonces eso es lo que necesitamos crear cada vez que el usuario haga clic en el botón Agregar. No te preocupes. Volvamos a nuestro expediente aquí. Y déjame solo levantar lo que queremos. Eso es lo que queremos. Y yo lo haré, y los dos tramos. Entonces empecemos a crear menos ahora cada vez que el usuario haga clic en el botón EdX. Entonces digamos aquí, creando elementos dinámicamente. Y pasamos por esto con mucho detalle en la Parte 1 de esta serie DOM. Por lo que deberías estar muy familiarizado con ello. Mira esa imagen ahora, ¿qué necesitamos crear primero? Tenemos que crear una hora, no me preocupo. Entonces definamos una variable llamada aliado. Y por supuesto, podemos acceder a nuestro documento y es un método llamado crear elementos. El elemento que queremos crear es que Ally elementos. Y entonces necesitamos crear dos elementos más. No te preocupes, necesitamos uno para el artículo de abarrotes y necesitamos uno para el botón Eliminar. Entonces definamos dos variables. Digamos que es nombre de abarrotes porque ese es el nombre del artículo de abarrotes que estamos agregando a nuestra lista. Y vamos a ir a documentar. Por supuesto que tenemos que crear un elemento y en este caso va a ser un elemento span. Vamos a hacer exactamente lo mismo, pero no necesitamos un nombre de abarrotes ahora, ¿necesitamos, Así es, un botón Eliminar. Entonces, solo llamémoslo botón borrar. Y por cierto, no sé si se puede ver eso con claridad, pero el IDE ha puesto en gris estos nombres de variables. En realidad es un color gris, no blanco y es gris porque nos está diciendo que aún no hemos usado estas variables. Entonces es solo un poco interesante, para tu información. Por lo que hemos creado nuestros elementos. Ahora sabemos que los tramos todos anidados dentro del elemento LI en día. Podemos ver eso. Entonces hagámoslo. Vamos a un pintado a los elementos LI y ¿cómo obtenemos las cosas a los artículos? Nuevamente, lo hemos hecho con amplio detalle previamente. Todo lo que tenemos que hacer es x elemento LI ESL y accedemos a una propiedad llamada niño dolorado. El niño que queremos pintar en este caso es abarrotes llamado así por el que y tú has echado el segundo al que queremos pintar a eso es este botón Eliminar. Botón Eliminar. Ahí vamos. ¿ Por qué crees que esto va a funcionar? Funcionaría en realidad. Vamos a guardarlo. Escarabajo Rosa. Déjame escribir en la mano vía MS click Agregar. No se está agregando a nuestro DOM, ¿verdad? Y de nuevo, lo discutimos con mucho detalle en la serie uno. Lo que pasa ahora es que hemos creado todos estos artículos, pero flotan un poco en el espacio. Tenemos que anexarlo al DOM, necesitamos adjuntarlo a un padre de alguna manera. Entonces, ¿cómo hacemos eso? Bueno, si vamos a una próxima caída, ¿qué acabamos de agarrar este maní elemento UL a eso. Entonces si volvemos a nuestro script y archivo ab.js, no es agarrarte. Voy a elemento. Entonces todo lo que tenemos que hacer aquí es decir tarde ustedes, yo seré el documento. Obtener elementos por nombre de etiqueta de nuevo. Podemos acceder a las cosas cool o giros y HTMLCollection y queremos el primer elemento UL dentro de él. Todo lo que tenemos que hacer ahora es tocar nuestros limones recién creados al dominó. ¿ Es este tipo de hacer S2? Eso espero. Entonces para tocarlo, es muy sencillo. Agarramos nuestro elemento padre URL y de nuevo, accedemos a un niño doloroso y el niño que queremos anexar es el aliado. ¿ Eso tiene sentido? Entonces ahí vamos. Vamos a guardarlo. Vamos a nuestro navegador. Digamos, o digamos cerveza, sólo para ser diferentes a lo que tenemos. Y vamos a sumar. Y mira eso. Literalmente hemos editado al aliado, pero como puedes ver, no tenemos sabor en ellos sí comen como antes de lidiar con eso, toma aspecto, solo echa un vistazo a nuestro DAW inspeccionamos, echemos un vistazo a los elementos. Literalmente hemos editado dinámicamente este elemento LI. Sí, los tramos están vacíos, pero se llegó a celebrar nuestros éxitos hasta ahora y lo hacemos en un enfoque fragmentario paso a paso. Si lo hacemos de nuevo y hacemos clic en Agregar, puedes ver que se edita dinámicamente al perro. Elemento muy, muy fresco y aliado con dos tramos. Algunas cosas más necesitamos hacer eso para que tipo de finalizar. El primero es que tenemos que añadir texto alt. Y lo segundo es que tenemos que sumar estas cláusulas. Entonces quiero que pienses en cómo hacer eso. Y en la próxima conferencia, terminaremos esto juntos. Nos vemos ahora. 13. Agregar clases: De acuerdo, Así que sí, todos justo donde lo dejamos. Y recuerden, creamos este LI, elementos dinámicamente. Entonces tenemos el esqueleto en su lugar que necesitamos agregarle la carne, ¿no? ¿ Cómo hacemos esto? Primero agregaremos los contenidos. El elemento tiene datos de tomas juntos. Y sumemos seis. Y recuerda si me desplazo hacia arriba y ocurría, en realidad definimos una variable llamada gustos que aún no hemos utilizado. Y ese es el gusto de EU está escrito en HTML en ese campo de elemento de entrada. Entonces, sumémoslo ahora. ¿Haremos nosotros también editamos? Si miras este artículo de nombre de abarrotes forma queremos agregar la entrada toma contenido en dentina. Entonces todo lo que tenemos que hacer es tener acceso a ese nombre variable de abarrotes. Queremos que su contenido de texto se firme al valor de que toma de acuerdo es así de simple? Y terminan con un botón de borrar. Para eliminar la variable de botón que creamos arriba. También queremos poner contenido dentro de ese elemento span. Y el día de contenido Nosotros los es solo para liderar una muy sencilla. Y si vamos a nuestro navegador y solo actualizamos esta página, agreguemos tener BIA y es bueno en eso. Como pueden ver, no estamos del todo hecho no lo hemos resuelto correctamente. ¿ Por qué es ese borrar, no empujado a la derecha. ¿ Qué está pasando? Y si abrimos nuestra Divya y dimos al artículo nos nodos en la lista de abarrotes. Si abrimos la URL y en realidad vamos a esta etiqueta LI, Veamos lo que está pasando. Hemos editado el sabor, que es impresionante. Pero se puede ver que las clases se aplican a esto. Y lo que eso significa, por supuesto, es que no hay estilo. ¿ Cómo agregamos eso? Volvamos tot toma datos. Empecemos a pensar en eso. Digamos que agreguen cláusulas. ¿ Cómo agregamos lanzamientos? Ganar dispuesto al día son algunas maneras. Si vamos a nuestro navegador aquí, eso tiene nuestra consola. Déjame mostrarte un solo camino. Entonces, en primer lugar, digamos que nuestro documento del tanque obtiene elementos por nombre de etiqueta. Y queremos la etiqueta LI. Si regresamos eso, obtenemos y htmlCollection. Y podemos ver que hemos buscado etiquetas LI dentro de ella. Queremos el que solo vamos a añadir, no a través de edición. Entonces ahí vamos. Ahora deberían ser cinco. Varillas con un 50 aliados. El día no exceda del último. El que acabamos de agregar un impreso, podemos ver cláusulas del know que se nos aplican. Una forma de editar clase es simplemente editarla, enfriarla a través de los medidores de la propiedad ClassName. Entonces, ¿qué quiero decir con eso? Simplemente accedemos a ese artículo. Tenemos ClassName y podemos agregar matemáticas propias de clase. Digamos que sabe varillas. Si ahora existimos ese aliado y volvimos a nosotros, podemos ver estos editar, esta clase de gustos. Entonces net es de una manera, pero ¿cuál es la mayor caída fue ésta? Will, la mayor caída es que anula todas las demás cláusulas. Sólo podemos hacer esto. Una cláusula. Por ejemplo. El tercero me voy a llevar esa es la pizza y nos hizo ahora cambiar su nombre falso propiedad al gusto. Si hacemos eso, y salimos la LI sobrescribió otras cláusulas si tenía otros lanzamientos. cierto, por ejemplo, si salimos de esta pérdida de banda del elemento y la anulamos por la propiedad ClassName, en realidad eliminará clase de elemento. ¿ Eso es un poco hacer santos? Sé que podría parecer un poco confuso, solo ten en cuenta todo lo que estoy tratando de cruzar es que usar la propiedad de nombre de clase anula las pérdidas. No se puede agregar más de uno. Nos vemos, puedes ver que el nombre de la clase es un poco torpe. Siempre a azotado a su alrededor. Entonces digamos ahora queríamos sumar a esto, en el aliado, tomar otra clase. Entonces lo que podríamos hacer es que pudiéramos acceder a ese aliado. El nombre de la clase, el danés. Podríamos haber concatenado los nuevos canales sobre ella, digamos T2. Entonces ahora si hacemos eso y accedemos a aliado, verás otro problema. G, ¿Qué está pasando? Sí, lo soy. Hoy tienes días. El otro problema que t-statistic a nada. ¿ Qué tienes que recordar que hacer cuando editas esos? Tienes que poner una CIA. Ellos pueden. Entonces cuando accedamos a ella, eso debería funcionar. Tiene el sabor como nombre de clase separado, pero se puede ver que esta es una forma muy engorrosa. Hay una manera mucho mejor. ¿Qué es? ¿ Te acuerdas? Volvamos a nuestros datos de texto. Entonces, ¿cuál es la forma nueva y mejorada de sumar pérdidas dinámicamente? Está usando la API de lista de clases que fue introducido por la especificación HTML5. Hemos pasado por esto en conferencias anteriores. Tiene muchos métodos cool disponibles para nosotros, toggle remove o ejemplos. Pero el que queremos usar es agregar y editar, súper fácil de usar. Todo lo que tenemos que hacer es yo elemento. Queremos entonces acceder a la lista API que Damon tiene un método llamado add. Y queremos agregar una cláusula, no tuitear. Y la clase queremos agregar manera fría, y queremos hacer exactamente lo mismo con el botón Alt Delete. Queremos acceder o eliminar botón, la API de lista de clases. Y queremos añadir una cláusula, borrar en frío. Si nosotros los EU y vamos a nuestro navegador, podemos eliminar eso. Ahora. Ahora agreguemos VIA, Vamos a dar clic en Agregar. ¿ Y cómo es eso? Sólo veremos un poquito. Por lo que se puede ver que se ha agregado dinámico. No podemos volver a borrar eso. Podemos decir y escuchar, no lo necesitamos. Necesitamos lo que va a terminar que pueda agregar teatro también. Impresionante, Seamos editados. Clave dinámica del DOM. Toma un respiro. Celebra tus éxitos porque llegas largo, largo camino. Y puedes empezar a ver cómo podemos aplicar los conocimientos que hemos aprendido en todo este curso para crear páginas web dinámicas, Greenwald. Y ahora quiero que sigamos vapeando los lados. ¿ Qué podemos hacer a continuación? ¿Qué tenemos que lidiar con las listas de esconder, casilla de verificación junto a la ola, marcamos que Allah lista entera de compras está oculta y pensamos en cómo podemos hacer eso. Y luego el siguiente agente que podría alterarlo. Complejo, soy Sue bananas, estoy súper emocionada. C nada. 14. Hiding y Hiding nuestros elementos de la lista: De acuerdo, entonces aquí estamos. Y el siguiente paso es conseguir esta wiki de casilla de verificación de ocultar. Como puedes ver ahora si vamos y marcamos en estas listas de escondrijos, no pasa nada. ¿ Cómo íbamos a hacer esto? ¿ Antes de empezar a codificar? Quiero que entiendas algo cuando se trata de casillas y cuello es un evento único se despide cada vez que hacemos clic en una casilla de verificación. No es un evento de click. Es un cambio de haz para satisfacerlo. Entonces si vamos a nuestro código, Sí, miramos nuestro HTML y miramos a este div con una ID de cambio. Y vemos esa casilla de verificación de entrada. Podemos ver que marcaré casillas para encontrar dentro de este elemento de entrada ese tipo de casilla de verificación. Y cada vez que esa casilla de verificación es totalmente un evento de cambio se dispara que burbuja hasta este div con una ID de cambio. Pero qué es exactamente esta vetas cambiantes te dará una iniquidad muy rápidamente un resumen. Podría estar preguntándose nosotros, el evento de cambio viene. Y permítanme decir que se hereda de la interfaz de elementos HTML. Y entonces puedes estar pensando, bueno, si viene de la interfaz de elementos HTML, esto significa que todos los elementos presentan desventaja y que no es el caso. El cambio de más tenso solo disponible en algunos elementos. No todos. Por ejemplo, el cambio en vano sí dispara para entrada un elemento selecto y toma era en momentos en que la alteración al valor del elemento es cometida por el usuario. Y esto significa que para nuestra casilla de verificación, la que acabamos de ver, se disparará un evento de cambio cada vez que el sitio jefe de esto y cambie i0 cada vez que el usuario haga clic en esa casilla de verificación. Y sólo un poco de archivo, podría estar pensando que esto es muy similar al evento oninput. Pero la diferencia, sí, sutil D en evento de entrada se produce inmediatamente apagado al valor de un elemento ha cambiado. Si bien este cambio en vano a Sony presentó ventoso y vetas, algo así como el enfoque perdido ofrecerá, el contenido ha sido cambiado. Entonces Zach, estoy teniendo sentido. Eso espero, pero nomina al suave cortándolo, verás lo sencillo que es. Entonces eso es bueno. Nuestro archivo JavaScript robó a la parte superior se acaba de hacer en átomos. Vamos a copiar esto. Y ahora queremos ocultar artículos. A ver cómo vamos. Tenemos nuestros elementos del corazón, odiando. ¿ Cómo vamos a seguir tratando con nosotros? ¿Qué vamos a hacer? Bueno, en muchas, muchas formas de despellejar a un gato. Podríamos usar delegación veta. Podríamos escuchar el cambio de Anton en general div. Pero en esta instancia, no quiero hacer eso. Y es por eso que no puedes seguir una sola regla a la hora de codificar. El motivo por el que no quiero usar una delegación de vena aquí es que luego tendrás que acceder al objetivo del evento para determinar si las casillas marcadas o no. Y solo creo que es una forma más fácil si solo trabajamos directamente en ese elemento de entrada en sí. No hay razón para que utilicemos aquí una delegación de vena. No nos beneficia de ninguna manera. Entonces lo primero que quiero hacer es que quiero agarrar ese elemento de entrada, AKA Quiero que agarremos esa casilla de verificación. Entonces definamos una variable de JavaScript y vamos a llamarla casilla de verificación. Y eso va a ser documento. Usemos QuerySelector 1 ons selector de consultas. Y la consulta select que queremos obtener es que queremos obtener esa entrada con el ID todo. Piensa que nos sentamos idea del VIH. Si vamos a nuestro archivo de índice, nos desplazamos hasta aquí. Ese elemento de entrada tiene una ID de cool, así que acabamos de tener eso. Bien. El siguiente paso es la caja de cadena honesta. Añadamos un oyente de eventos. Pero las venas de Navi, queremos escuchar un conjunto de datos en particular. Es el cambio. Y entonces por supuesto queremos ejecutar una función de devolución de llamada son manejador. Y vamos a hacer eso justo dentro de este método de escucha de anuncios. Y lo que vamos a hacer novedoso, una de las cosas que tenemos que hacer es determinar qué elemento, elemento global queremos ocultar. Entonces otra vez, vamos a nuestro HTML. Desplázate aquí abajo. Podemos ver en la sección 3 hemos leído Allah lista completa de abarrotes dentro de un elemento general de padres con una identificación de lista de abarrotes. Y esta es exactamente la razón por la que siempre me encantó estructurar mi código fue un representante general. Porque nunca se sabe qué tipo de codificación se quiere hacer en el futuro. Y agrega muy fácil para nosotros agarrarlo y simplemente ocultarlo. Entonces, sólo ocultemos eso en tiempos de así vamos aquí. Lo siguiente que quiero hacer es definir lista de abarrotes. Y luego puede ser de nuevo el objeto de documento. Tenemos que iniciar fecha y podemos conseguir elemento por ID y sabemos que el DNI es listas de abarrotes. Siguiente probabilidades y queremos recoger lo que es el próximo estado voluntad si las casillas de verificación, queremos que todo lo oculto es para hacer trampa casilla está desmarcada. Queríamos, pensamos Shun. Y cada vez que se llega a esta bifurcación en el camino, utilizamos una declaración if, que viene de JavaScript. Entonces, ¿si y qué vamos a probar? Sí, Bueno por suerte para nosotros, cuando se cambia un artículo, tiene una propiedad llamada cadena. Y entonces la propiedad será verdadera si se cambia y falsa si no se cambia. Entonces, ¿qué queremos decir? Sí, queremos decir si se cambia la casilla de verificación, sabemos que será vetada en absoluto cerca de verdad. Entonces, ¿qué queremos que suceda? Vamos a querer agarrar nuestra lista de abarrotes, ¿no? Queremos acceder a una propiedad sólida Esa es la propiedad de visualización en eso y queremos guardar eso a null set symbol else. Y sabemos que la otra declaración significa que es jake. Ahora, en esa instancia, queremos tratar de agarrar nuestra lista de abarrotes. Una vez más, accedemos en propiedad de estilo. Esa es la propiedad de esclavos que queremos cambiar y cuello. Queríamos convertirnos en un conjunto de bloques haciendo esperanzas a los santos en un hub. En esta etapa, se puede empezar a entender que es muy intuitivo en entender cómo funcionan las venas. Sí, en esta instancia, necesitábamos saber que teníamos que escuchar el evento de cambio. Que este es el tipo de cosas que son literalmente te toman 30 segundos para Google rápidamente. Y obtendrás el, entenderás el flujo del código. Comprenderás cómo codificar estas cosas ustedes mismos. Entonces, de todos modos, vamos a nuestro navegador. El hilo dental. Tocar una trompeta es ver, ver cómo vamos y escondamos nuestra lista. Vamos a darle click. Voy hermosa como se esconde. Y si lo desmarcamos, se muestra de nuevo como un bloque, serían amplificadores, divirtiéndose. Estaría aprendiendo autonomía y código de depuración, solo hacer semillas. Si no, vuelve a ver el video, si tienes preguntas y lo perdiste en la Q&A, estoy aquí para ayudarte y te veré en la siguiente etapa. 15. Recap de los oyentes de eventos que hemos usado: No puedo creer lo lejos que están consiguiendo un CRC. Bien hecho. Esto es tan guay. He estado divirtiéndome mucho y espero que hayas aprendido mucho en el camino. Antes de que nos subamos ahora algo bastante avanzado y eso es que vamos por el filtro de búsqueda. Yo sólo quiero recapitular lo que hemos hecho. Recuerda que este curso es predominantemente sobre eventos y entenderlo de una manera muy avanzada y cómo usamos las noches en este ejemplo muy sencillo donde lo hemos utilizado de diferentes maneras. Por ejemplo, veamos este botón Eliminar. Recuerda cuando hacemos clic en Eliminar lo elimina del DOM. Pero, ¿cómo lo hacemos? Eso es correcto. Escuchamos el veto de Contiki sobre ese elemento en particular. Y luego usamos delegación de flexibilización, ¿no? Porque escuchamos ese evento de click, no en cada latín. Lo escuchamos en la etiqueta UL. Y entonces por supuesto, cuando ese evento burbujeó hasta la etiqueta UL, podríamos conseguir el objetivo, aka madera puede averiguar en qué botón se hizo clic dentro encontrado en el elemento padre siendo la etiqueta LI. Y entonces claro que sólo le quitamos eso al DOM. ¿ Eso hace un poco SSD? Y entonces qué pasó con la caída de EdX? ¿ Qué hicimos ahí? Bueno, en esa instancia, escuchamos el, no el evento click porque sabemos ya sea en un botón o en una entrada, este tipo pateado por el usuario en un formulario, se despide un evento de envío. Por lo que caen. Escuchamos el evento de presentación en el propio formulario. Y ha sido realmente épico porque una vez que eso se somete, los ángeles disparados dentro crearon un nuevo elemento sobre la marcha. Editamos sus pérdidas dinámicamente usando la API de lista de clases, y luego editamos eso a nuestra lista. Entonces por eso una flota o pollo OT. Y hacemos clic en Agregar. Se edita al DOM y dinámicamente. Y por supuesto tuvimos que evitar nuevo el comportamiento por defecto de un envío de formulario, ¿no? Tuvimos que usar la prueba a default. Y entonces acabamos de cubrir esta casilla de verificación de lista. Y de nuevo, no escuchamos un evento de clics. Hicimos escuchar un evento de presentación. Escuchamos el evento de cambio porque una casilla de verificación tiene un cambio de archivo de índice cada vez que cambian, el estado sigue y sigue. Y sí, realmente no había necesidad de delegación ni siquiera. Acabamos de escuchar esas venas en la casilla de verificación real en sí. Y por supuesto, cuando se marca una casilla de verificación, lo agarramos sí. Y apostamos su propiedad de display al nano sistema. Muy divertido. Y se puede ver que hemos estado escuchando diferentes eventos todo el camino. Y por eso elegí este ejemplo, porque pasa por muchos tipos diferentes. Y se puede ver una especie de lo lógico que es cada uno. Hace muchas escenas cuando se entiende intuitivamente lo que está pasando. Ahora hablemos de esto. Buscar artículos. Cuando usan un empieza a escribir en un elemento de búsqueda, queremos y necesitamos matar esos elementos en esta lista a continuación. De nuevo, no vamos a estar escuchando un evento de click porque el usuario aún no tiene click en nada. ¿ A qué vamos a estar escuchando? Cuando en esta instancia vamos a estar escuchando el evento clave. Por ejemplo, si el usuario lo presiona en el teclado, cuanto levanten el dedo, queremos que nuestra función busque a través todos los artículos y voy listas de abarrotes que tienen este personaje, Amy. Si el nombre de usuario habla I, L, K, por ejemplo, queremos entonces agarrar ese bloque de texto entero, toda la palabra mole. Y queremos buscar a través de eso, a través de nuestras listas. Entonces esto sólo va a ser otro más cool V2 escuchar, caer. Y como verás, no es tan difícil. Simplemente te acercas paso a paso. Oí hablar de señal para tener sentido. Si no se preocupa, lo vamos a pasar juntos. Y como verás, vamos a estar dándolo paso a paso. De lo único que sí quiero mantener esos. Vamos a estar lidiando con los rayos. Vamos a estar lidiando con métodos en esos borrados índice Negro apagado. Y también vamos a estar en looping a través de arrays y usando el método foreach. Si estás un poco confundido sobre cómo funciona JavaScript, por favor echa un vistazo a mi curso completo de gran maestro de JavaScript o algo así, eso es genial. Es un curso divertido también. Y paso exactamente lo que significa JavaScript en ese curso. Entonces si te has confundido, acobardado unos cuantos, entiende estas cosas. Entonces a un nivel alto de todos modos, no te preocupes, estoy seguro que podrás seguir adelante. Pero entonces debe blubber, blubber. Entrémonos en ello y nos vemos en la próxima conferencia. Hola. 16. Cómo acceder al campo de entrada y su valor: Está bien. Acabo de tener un corte de pelo. Me siento fresco, me siento bien. Y entrémonos en los ítems de búsqueda. Es muy, muy cool. Y otra vez, eso ¿cómo lo hacemos y por dónde empezamos? Bueno, en primer lugar, se puede ver que tenemos esta caja de entrada y sabemos por nuestro código que hemos leído esto en un formulario. Entonces lo primero que necesitamos hacer es agarrar este formulario. Si obtenemos nuestro código y nosotros en nuestro archivo de índice en este momento, podemos ver que hemos leído todo este campo de entrada en una caída. Hemos dado esa forma, un ID de ítem de búsqueda se elevará lejos tan bueno. Pero, ¿cómo agarramos esta forma? Son pocas las formas que tiene nuestro navegador. Vamos sólo a la consola. Aquí vamos. Está claro, cómo agarramos un poco todo este zoom para que puedas ver, como mencioné, hay pocas maneras Empecemos a jugar con él. Digamos que la forma de plomo es igual a document.getElementById. Y cómo lo llamamos elemento de búsqueda. Veamos si eso funciona y vamos a la consola a cerrar este formulario. Entonces sí, sí obtenemos la forma de que la abrimos. Necesitamos la entrada directamente. Entonces tal vez lo que necesitamos para hacer el venoso acceder a la forma. Y entonces por supuesto podemos hacer un selector de consultas. Y el selector de consultas es, podemos obtener la entrada. ¿Eso funcionaría? Y ahí vamos. Entonces esa es una forma de que podamos obtener la forma. Puedo mencionar las muchas otras formas si vamos a nuestro código o en realidad ni siquiera tenemos que ir a nuestro código. Simplemente podemos conseguir este inspector de elementos y mirar esas formas. No nos hemos dado una identificación. Entonces lo que podríamos hacer en nuestro código como podríamos entrar aquí, podemos darle a este un ID de ítem de búsqueda. Guarde que podamos volver a nuestro navegador, despejar la consola. Y vamos a definir ahora forma igual documento, obtener elemento por ID. Y el DNI que le dimos era ítem de búsqueda. Por lo que podrían ser de otra manera. Nos encantó eso fuera. Y obtenemos el bus de entrada. Son muchas formas de despellejar a un gato, ¿verdad? Vamos a refrescar esto. Despejemos la consola. Vamos a nuestro código y vamos a deshacernos de este DNI. Yo solo quiero mostrarte otro camino. Y vamos a estar usando el dominio un opcode. Lo que vamos a hacer es definir una variable llamada forma. Y recuerda que había propiedad de ese formulario en nuestro documento. Y podemos usar eso para acceder a formularios. Entonces si accedemos a nuestro documento y accedemos a este inmueble llamado formularios, ¿qué nos da eso? Déjennos todos los formularios en toda nuestra página, ¿no? Y sólo tenemos dos. Tenemos el formulario de átomos de búsqueda y también tenemos este formulario de forma regular el usuario puede decidir qué quiere agregar a la lista. Por lo que queremos lidiar con esta primera fea formada. Por lo que una forma de salir de la forma sería acceder a nuestros formularios, HTMLCollection. Y luego de nuevo, hay algunas maneras de hacerlo. Podemos o bien acceder al primer elemento de la matriz, todo el formulario con un ID de ítem de búsqueda. Es otra forma de hacerlo. Y entonces podemos por supuesto acceder a nuestro selector de consultas. Y queremos conseguir la caja de entrada. Y flotamos sobre eso y llegamos a lo que queremos por punto a través de todo esto es solo para darte una sensación intuitiva de cuántas maneras diferentes hay de hacer algo como desarrollador. Por lo que solo depende de tu estilo y con qué te sientas más cómodo. De acuerdo, ¿fue todo el camino? Empecemos. El primer paso es que tenemos que agarrar esa caja de entrada no hace semana porque necesitamos agarrar que lleva al usuario escribiendo ahí. Entonces empecemos a codificar ahora. Vayamos a nuestro archivo de la app. Lo último que hicimos fue ocultar artículos y solo copiemos eso. Y ahora queremos buscar artículos. Y como mencioné, lo primero que quiero que hagamos es que agarremos ese cuadro de entrada de búsqueda. Entonces definamos una constante ahora porque esto nunca va a cambiar, siempre vamos a solo referencias un cuadro de entrada de búsqueda. Llamémoslo búsqueda. Y sabemos, por cierto, justo antes de continuar la razón por la que pongo mayúsculas, simplemente convención cuando estás definiendo una constante, variable que cada vez cambia, decir, ponerla en mayúsculas. Entonces cuando lo vemos en nuestro código más adelante, sabemos que es una constante. Entonces vamos a agarrar esta caja. Lo primero que podemos hacer es acceder a nuestro documento y luego acceder a la propiedad de ese formulario. Y como acabamos de ver en la consola, sabemos que lo llamamos elementos de búsqueda. Ese fue el ID de nuestro HTML completo. Y miramos esa forma. Sabemos que tiene un ID de artículo de búsqueda. Precisamente por eso lo estoy haciendo. Sí, no es artículo a artículo. Por suerte revisé entonces nuestro cuello queremos, por supuesto x es nuestra consulta select API. Y queremos la entrada. De acuerdo, Todos también. En bien, Tenemos nuestro insumo. ¿ Cuál es el siguiente paso? Bueno, cada vez que el usuario presiona la tecla y levanta esa llave, queremos escuchar ese evento clave. Vamos a probarlo. No es un evento de click. Sí, el usuario no está enviando nada que use simplemente literalmente texto escribiendo. Entonces lo que queremos hacer ahora es añadir oyente de eventos. Por lo que agarramos nuestra constante y accedemos al método add event listener. Y aquí queremos escuchar la clave y la lista. Simplemente defina nuestra mano directamente aquí y queremos acceder a este objeto de evento. Como verás, esto solo usa sintaxis de error y nuestra carne del código va dentro de estas llaves. Nada nuevo. Ya sabes quién esta. Y solo para asegurarnos de que el evento keyup esté funcionando, Vamos a solo registrar la consola. Funciona a la pantalla. Entonces vamos a nuestra consola, o lo siento, vamos a nuestro navegador. Vayamos a la consola. Y entremos aquí. Y ahora cuando presiono una tecla, llámalo Barra espaciadora, lo ponemos peor. Sí. Por lo que sabemos que hemos registrado un evento válido dentro de nuestro cuadro de entrada, y buscaré cuadro de entrada. Y cada vez que el usuario hace clic en Aquino, poseemos literalmente verdadero durante ese evento y ese manejador se está ejecutando. Ufo, me encantan estas cosas, tan cool. De acuerdo, entonces volvamos a nuestro código y vamos a deshacernos de esta consola. ¿ Cuál es el siguiente paso ahora? Será el siguiente paso es que queremos agarrar la entrada real toma por sí misma. ¿No lo hacemos? Sólo di, sí, vamos a agarrar el texto del usuario. ¿ Y cómo hacemos eso? Bueno, es muy fácil y para demostrártelo, definamos una variable llamada texto. Y podemos acceder a nuestro objeto de evento, ese objeto de evento keyup. Podemos entonces acceder al objetivo siendo retinas clave naturales, y queremos obtener su valor. Y si solo consolamos el texto de registro, deberíamos verlo. Navegador Tom. Vamos a bajar la consola. Consola y señorita acaba de enseñar la letra a. Entonces lo que voy a hacer, Tenemos a los niños registro de consola a la pantalla, B, C, D. Eso está bien, ¿verdad? Y puedes empezar a ver cómo podemos acceder a las estacas y a la novedad. Ahora tenemos que empezar a comparar esto con lo que hay en nuestra lista de artículos para comprar. Pero esto es algo aquí. Yo quiero mostrarte. Si tecleamos una D mayúscula y una OG. Es sensible a mayúsculas y mayúsculas, ¿no? En realidad estamos consiguiendo un capital. Entonces si miras en nuestros intentos de comprar listas en la página ahora mismo y miramos la leche, vemos como una M. mayúscula Así que si el usuario escribe una milla, está bien. Déjame volver a hacer esto. Por el espacio. Si el uso del tiempo fuma sin una M mayúscula, no va a ser exactamente igual a los sobres mayúsculas en absoluto. Si el usuario escribe Koch, no va a coincidir exactamente con la coque por debajo de esa toda minúscula. ¿ Cómo nos enfrentamos a este problema? Bueno, en realidad es más simple de lo que puedas pensar. Bueno, tenemos que hacer es asegurarnos de lo que sea que se necesiten los tipos de usuario, queremos convertirlo en minúsculas. Queremos que la búsqueda sea insensible a mayúsculas y minúsculas. No importa donde el usuario tipos de capital o minúscula. Todavía debe mirar la verdadera palabra justa en sí. Entonces, ¿cómo hacemos eso? Bueno, es muy sencillo. Deshaznos de esta consola. Voy a comentar. Digamos que agarremos las tomas del usuario y lo convertimos a minúsculas mediante el uso de JavaScripts a minúsculas método. Y es muy sencillo de usar. Nos agarramos que nos lleva el usuario mecanografiado y de forma nativa directamente de la caja es el método de dos minúsculas que nos proporciona JavaScript. Y si hacemos listas de registro de consola una vez más, lo siento, sé que vamos despacio, pero es tan importante que entiendas esto. Adelante, consola Kayla. Y es tiempo MLK capiteles. Pero se puede ver que hemos convertido todos los personajes en minúsculas. Esto es impresionante. Estaré divirtiéndome aprendiendo una tonelada. Yo quiero parar aquí y quiero que hablemos de este método ToLowerCase con un poco más de detalle. Sé que la mayoría de los conferenciantes solo continuarán ahora mismo, pero quiero que entiendas exactamente cómo funciona y cómo funciona nuestro código porque solo te ayudará a convertirte en un programa increíble. Y así solo quiero que paremos ahora mismo y una unidad para discutir un poco más de detalle qué hace este método a minúsculas y cómo funciona. Nos vemos ahora. 17. Introducción a la lowerCase: Crew, supongo que lo que acabo de hacer esta mañana desde nuestra primera vez, hice una sesión de yoga y estoy destrozada dentro esta cosa llamada la cosa se llamaba el Pájaro del Paraíso. incendios me volaron la cabeza. De todos modos, estoy en mucho dolor ahora mismo. Pero eso no debe dejar de aprender sobre JavaScript. Y muy específicamente, quiero que aprendamos de este método llamado a minúsculas. Suena sencillo, pero solo quiero que entiendas exactamente cómo funciona porque es un método muy, muy útil que nos proporciona directamente de la caja por JavaScript. Ahora bien, aunque no toma ningún argumento, es un método súper práctico. ¿ Por qué? Bueno, en muchos casos, quieres que tu texto o quieres que tus cadenas sean insensibles a mayúsculas y minúsculas. Aka, no quieres capitales a una falsificación, sea lo que sea que estés haciendo. Por ejemplo, si tienes una lista y un usuario escribe en una palabra determinada, a veces quieres ver o quieres comparar si esa palabra está en la lista y no quieres que las mayúsculas arruinen tus fórmulas. En ese caso, ¿por qué no simplemente convertir todo en minúsculas? Y para hacer eso es usar las dos minúsculas emitidas. Entonces sin más preámbulos, saltemos a la galleta de presentación y sigue hablando del método de dos minúsculas, disfrutando. Entonces, ¿qué es exactamente este método ToLowerCase? manera muy simplista todo lo que hace y es bastante intuitivo que convierte tu gusto todo en minúsculas. En otras palabras, el método ToLowerCase devuelve la cadena de llamada, la cadena en la que la has llamado. Convierte ese valor de cadenas en minúsculas. Y yo sólo podía parar. Sí, pero quiero que sepas solo un poco más sobre este método ToLowerCase. En primer lugar, es una función de JavaScript que nos proporciona el lenguaje JavaScript. Buscar no toma ningún argumento, pero no dejes que eso te engañe. Sigue siendo un método muy poderoso. Y lo que realmente quiero que entiendas, sí. Y quiero hacer una pausa en este punto. El método de dos minúsculas no altera la cadena original. En cambio, genera la nueva cadena modificada con todas las letras minúsculas. Déjame saltar a la consola y te mostraré lo que quiero decir con esto. De acuerdo, Entonces sabemos que el método en minúsculas no afecta a la cadena original. Yo sólo quiero demostrártelo ahora. ¿ Cómo voy a hacer ahí? Bueno, vamos a crear una cuerda y sólo llamémoslo síntomas originales. Y es sólo decir, hacemos eso igual a ranas locas o simplemente, bueno, ya sabes, locas. ¿ Cómo está? Y entonces vamos a crear una nueva frase. Por lo que el marcador que sentencia baja. Y sí, quiero que accedamos a nuestra frase original. Y esto es lo que quiero que hagamos a continuación. Quiero que accedamos al método de dos minúsculas. Y lo que es realmente impresionante es que debido a que tenemos una cadena y esta frase original es una cadena tensa, automáticamente tenemos acceso a Javascripts al método minúscula. ¿ Cómo accedemos a ella cuando salimos con la notación de puntos? Y por supuesto, solo podemos empezar a escribir en minúsculas y nuestro IDE ya recoge este método. Por lo que puedo hacer clic en Tab entre paréntesis abiertas y cerradas para ejecutar ese método. Y estamos terminados y espolvoreados. Ahora puedo abrir un navegador y podemos consola registrar cosas a la pantalla. Pero quiero usar algo llamado cloaca. Si vamos a mis extinciones tibia, y apenas empiezo a escribir más rápido. Podemos ver que he instalado Aka en mi IDE. Es realmente, realmente útil, tan altamente recomendable. Y todo lo que necesitamos hacer para ejecutar cooker es que literalmente llamamos aquí el cuadro de búsqueda. Presiono Control Shift P en mi teclado, y quiero iniciar cloaca en el archivo actual. Es solo un plug-in extra y nos permite ejecutar JavaScript en tiempo real en este archivo. Sí lo hace. Entonces aquí vamos y todo lo que quiero hacer es que quiero cerrar la sesión de la frase original. Y se puede ver el azul toma datos. Eso es lo que se está consolando, piernas, lo que nos está volviendo por JavaScript y el Walker trabajando, solo nos permite ver cómo un arreglo en tiempo real para ti muy útil. Ahora bien, ¿qué crees que va a pasar cuando regresemos sentencia más baja? Bueno, seguro que probablemente ya nos adivinaste. Bueno, va a pasar es que obtenemos exactamente lo mismo que todo en minúsculas. Pero lo que he logrado demostrarles es que nuestra frase original, esa frase original que escribimos juntos no ha cambiado. Este método ToLowerCase no altera esa cadena original. De acuerdo, se observan un poco haciendo santos. Sigamos. Está bien, genial. Por lo que hemos visto que no altera la cadena original. De hecho, genera uno nuevo. Pero en este punto del tiempo, aún puede que te estés rascando la cabeza. Es posible que te estés volviendo fresco y ruido proporcionado por JavaScript. Pero exactamente lo hacemos de. Y de inicio a esto es tambores, por favor. Viene del objeto string en JavaScript. Y solo recuerda que el objeto string es un objeto global para todas las cadenas. Nuevamente, déjame saltar a la consola en imágenes mostrarte dónde podemos encontrarla. Vamos a retomar exactamente donde lo dejamos. Recuerda que escribimos la frase, la convertimos en minúsculas. Ahora solo quiero demostrarte que tiene que estar en una cuerda. Entonces una forma de hacerlo es usar el tipo de operador. Entonces eso es registro de consola. Y vamos tipo de y queremos ver cuál es nuestro tipo original. Y podemos ver lo que nos devuelve JavaScript es un tipo de cadena. Por lo que conocemos nuestros síntomas. Variable original es una cadena, y por eso podríamos ejecutar este método ToLowerCase. Pero probablemente te preguntes, manera es este método exacto de un howdy verlo? Bueno, es muy, muy sencillo. Vayamos a abrir un navegador. Por lo que sólo voy a hacer clic derecho en mi Chrome Mu Cognito. Y vayamos a la cookie de la consola. Vamos a abrir la consola. Yo acerco zoom para que veas lo que está pasando. Y es muy simple todo lo que hacer es quiero consola y hacer, por cierto, es diferente al log de consola nos da lo que queramos hacerlo. Pero en formato JSON como, en formato arbolado. Y por supuesto lo que quiero hacer es que quiero obtener objeto string JavaScript, porque recuerda que sabemos que nuestra frase original es una cadena. Entonces sabemos que es de tipo string. Y si abrimos cuerda, y de nuevo, Él no está mucho aquí. Tenemos enlaces, tenemos nombre. Pero lo que queremos ver es este prototipo porque hereda muchos métodos y propiedades. Y como es una cadena, es prototipo como una cadena aquí, obtenemos muchos métodos y propiedades del tipo de cadena. Y si nos desplazamos hacia abajo, deberíamos encontrar dos minúsculas. Y ahí está. En realidad lo hemos encontrado, ya sabes, asentándose de dónde viene. Espero que tenga sentido. No estamos del todo terminados. Entonces volvamos a saltar de nuevo a la conferencia. Hemos visto que proviene del objeto string y un caso alto, es bastante intuitivo que solo funciona con cuerdas. Si intentas analizar en otros tipos de datos, como null indefined, incluso un número. El analizador de JavaScript te lanzará un error. De hecho, obtendrás un error de tipo. Así que solo asegúrate de tomar el tipo antes de analizarlo en esta función. De lo contrario tu aplicación se estrellará. ¿ De qué estoy hablando? Bueno, déjame saltar una vez más a la consola y lleva pensamiento codificando juntos solo para ver esto en acción. Una última cosa antes de terminar esto, ¿recuerdas dijimos que sólo se puede usar en un tipo de cuerda? Perdón, Vamos a desplazarnos hacia arriba. En realidad acabamos de terminar. Estaremos recogiendo exactamente donde dejamos fuera de la consola. Entonces, ¿qué significa esto? Bueno, esto significa que si tenemos un número, digamos sólo 85 e intentamos acceder a minúsculas. ¿ Qué crees que va a pasar? Bueno, obtenemos un error de sintaxis, token inválido o inesperado. No podemos llamarlo método ToLowerCase en un número. Tiene sentido. ¿ Y qué tal un arreglo? Entonces digamos que tenemos una moraine solo con un artículo y se llaman Bu. Y tratamos de acceder a minúsculas es económico. Conoce que obtenemos un error de tipo. No podemos llamar a esta función en eso. ¿ Y qué pasa con indefinido? Bueno, si intentamos acceder de nuevo a minúsculas en indefinido, nuevo, no va a funcionar. ¿ Y qué tal ahora si intentamos nula? Creo que eso va a funcionar. Entonces este es el punto que estoy tratando de hacer. Sólo podemos acceder al método ToLowerCase en cadenas. Espero que te estés divirtiendo y discutiendo mucho. Entonces esto es solo un poco más de detalle en el método ToLowerCase que podría no haber conocido previamente. Sigue adelante, mantente motivado. Y nos vemos en la próxima conferencia. 18. Acceder y looping sobre nuestras etiquetas: Muy bien, volvamos a saltar de nuevo a nuestro proyecto. Espero que estés aprendiendo mucho. Ya hemos visto ese método ToLowerCase. Es impresionante. Se pudre. Y ahora quiero que sigamos con nuestra búsqueda. Box es tipo de comparar el usuario toma que su derecho a permitir que los artículos compren. Y nosotros filtramos solo por aquellas cosas que el usuario escribió en esta casilla de verificación lo hará esta casilla de entrada, Lo sentimos, así que estamos camino en este momento. Recuerda que tenemos este cuadro de entrada aquí con elementos de búsqueda. Hemos logrado encontrarlo usando los identificadores, los métodos de acceso DOM. Y lo que también hemos hecho como sabemos en este cuadro de entrada es una propiedad útil llamada value, que nos permite extraer lo que el usuario ha escrito en ese cuadro de entrada de texto. Nombrado porque es una cuerda, porque es una toma. Sabemos que podemos usar JavaScript to lowercase método para convertir lo que sea que el usuario escribiese todo a minúsculas. Ahí es exactamente donde hasta ahora. Entonces supongo que el siguiente paso es, saltemos al código y sigamos adelante. Entonces, ¿vamos? Literalmente hemos agarrado eso usa valor. Recuerda desde el objetivo de la vena, que es esa caja de entrada la misma como una propiedad útil llamada valor. Extraemos el valor del usuario, que es una cadena, es un sabor. Y luego por eso, accedemos a los Javascripts a los métodos en minúsculas son ahora mismo sabemos que estamos obteniendo lo que el usuario haya escrito en minúsculas. Enfriar, Vamos a eliminar la consola. ¿ Cuál es el siguiente paso? Ya vamos a lo que quiero que hagamos es quiero que agarremos todas las etiquetas LI. Porque lo que vamos a tener que hacer es que vamos a tener que comparar lo que sea que el usuario escrito con cada elemento de la lista. Es agarrar cada etiqueta LI. Entonces el primer paso es que quería encontrar nuestra lista de abarrotes. Y eso es, claro que hemos hecho esto muchas veces antes. Solo podemos usar QuerySelector aquí. Muchas formas de desollar al gato cuando se trata de programación. ¿ Y qué quiero agarrar? ¿Querré agarrar nuestro ID de lista de abarrotes, y quiero agarrar todos los elementos UL. Entonces para la página de índice de Godot aquí, solo para mostrarte lo que estamos haciendo. Nos desplazamos hacia abajo a la sección tres podrida. Podemos ver rentamos todo dentro de este div con una identificación de lista de abarrotes. Quiero agarrar esta etiqueta UL porque este elemento UL contiene todos los aliados debajo de ella. Es todo lo que hemos hecho aquí. Entonces tenemos esta lista de abarrotes. Y ahora quiero agarrar cada lista, elemento y cuello podemos decir está encendida abarrotes porque sabemos que va a ser plural es más de una etiqueta LI. Y sabemos que esa va a ser la lista de abarrotes. Y luego podemos acceder a los elementos get por método de nombre de etiqueta. Nuevamente, esto nos lo proporciona la API DOM. No es de JavaScript. Ahí vamos. Ahora tenemos todas nuestras etiquetas LI. Por ahora, tan bueno. Pero estarías de acuerdo conmigo ahora mismo, tenemos todas las etiquetas LI. Necesitamos una forma de recorrer todos esos y competir. Saborean a lo que el usuario ha escrito. Y si recuerdas de la parte 1 de la serie que getElementsBytagName nos devuelve una HtmlCollection. Y esta HTMLCollection, aunque parece una matriz y sella como una matriz, no es del todo una matriz. Y como no es toda una matriz, no tenemos muchos Métodos de Array. Y uno de los métodos que quiero usar en este ejercicio específico es el completo cada método. Para poder utilizar el método ForEach, necesitamos una forma de convertir el htmlCollection en una matriz. Zach un poco haciendo costuras. Porque si podemos hacer eso, podemos usar este método ForEach. ¿ Cómo hacemos eso? Bueno, una forma es acceder a lo que se conoce como la matriz del método. Entonces si definimos esto, sólo digamos aquí, para convertir. Bueno, digamos, vamos a convertir los abarrotes en una matriz para que podamos acceder al completo cada método. Una forma de hacerlo es definir una nueva variable. Ahora en JavaScript se define como abarrotes, abarrotes array. Y todo lo que necesitamos para hacer este eje la matriz de JavaScript. Y la matriz, tenemos muchas propiedades y métodos. Uno de ellos fue llamado desde. Y quiero crear una matriz a partir del objeto abarrotes o de la variable abarrotes que acabamos de crear. Esto es mucho para tomar y antes de seguir adelante, quiero parar de nuevo. Quiero explicarte de qué se trata esta matriz de método. Aquí hemos puesto un argumento, pero sí se necesita más. Entonces vamos a hacer una pausa. Tomemos un descanso. Saltemos a otra conferencia. Y solo quiero que veamos rápidamente esta matriz desde el método con más detalle. Espero que te estés divirtiendo, ojalá permanezcas vacío. Escena arriba. 19. Introducción a Array.from(): Espero que te estés divirtiendo mucho en este curso. Por mucho que yo lo soy. Me encanta juntar estas cosas y me fui enseñando lo que tipo de aprendí a lo largo de muchos, muchos años. De todos modos, lo siguiente que quería que discutiéramos muy brevemente es otra cama muy útil, una función un poco avanzada en JavaScript llamada array de. ¿ Y qué hace este método? De lo que el nivel muy, muy, muy básico, todo lo que hace es crear una matriz, pero no a partir de una matriz, porque serían inútiles. Crea una matriz a partir de dos tipos de cosas diferentes. Crea una matriz a partir de un objeto similar a una matriz. Y todo lo que quiero decir por conjunto de datos, es un objeto que tiene una propiedad length. Y dos, puedes crear una matriz a partir de un objeto iterable, cosas como el estado mental. De todos modos, esto es más importante ahora mismo. Lo importante a entender es que la matriz del método toma algo y se convierte en una matriz. ¿ Y por qué queremos hacer eso? Bueno, si podemos crearlo en algo que es como una matriz, podemos tener ciertos métodos y propiedades disponibles para nosotros que podemos usar en ese objeto recién creado, una matriz creada de energía estatal entera. Así que digamos algo que tiene sentido. No te preocupes si no es lo primero que quiero que entiendas cuál es la matriz de método, que está en la matriz misma. A lo que me refiero con esto, déjame saltar a la consola y mostrarte rápidamente. Tengo mi consola abierta. Sí, y lo único que quiero mostrarte es la forma de encontrar esto desde MTD. Y como mencioné, está en el objeto array dentro de JavaScript mismo. ¿ Cómo puedo probar que dos lo harán en primer lugar, vamos a consolar la matriz. Y si hacemos eso, sí, la matriz que nos proporciona JavaScript. Abrimos eso. Nos desplazamos hacia abajo y ahí está. El, es el de lo hace bastante simple, ¿verdad? Entonces ahí vamos. Sabemos que la matriz del método como se encuentra en el objeto array de JavaScript tiene sentido, ¿verdad? Pero aún no hemos terminado. Déjame saltar a la conferencia y hablemos de este método con un poco más de detalle. 20. ¿Cómo funciona?: Entonces, ¿de qué se trata exactamente la sub-matriz del método? Vamos a lesionar muy intuitivamente básicamente, todo lo que hace es crear una matriz a partir de un objeto similar a una matriz, propio objeto iterable. Pero estoy buscando meterme en eso ahora. Del mismo modo, al igual que el método ToLowerCase, la matriz de método es una función JavaScript pura. De hecho, se introdujo como parte de ES6. Es6, por cierto, fue sólo una revisión importante y actualizar a t0 es cinco y probablemente no te rascaste la cabeza, pero quizá ya hayas olvidado de dónde viene. Y acabamos de ver que proviene del objeto array en sí. Pero estas son todas las cosas que ya sabes. Entonces, ¿cómo funciona? Bueno, es muy fácil acceder a este método. Empezamos accediendo al objeto array de JavaScript dentro de xi's, el método from. Y el método front toma un argumento y su argumento es un objeto similar a una matriz. Pero antes de hablar más de lo que hace, se encienden al editor de codificación y conduce a ver cómo funciona en acción. Antes de empezar a entrar en más detalle en el array desde el método, solo quiero que entiendas cómo funciona. Entonces recuerda lo que dije. Tiene que ser un objeto similar a una matriz en objeto iterable para que podamos usar esta matriz desde el método. Entonces, ¿cómo funciona? Bueno, definamos un objeto similar a una matriz. Y seamos muy, muy simples aquí. Digamos sólo cuál es el caso. Entonces sabemos que es una cuerda en este caso. ¿ Cómo se ve la matriz de? Bueno, en primer lugar, sólo quiero decir arriba, arriba, co-ocurrir. Abierta. Kauket solo nos permite ejecutar JavaScript en tiempo real dentro de nuestro editor de texto. Por lo que no tenemos que seguir saltando al navegador solo mucho más rápido para especie de subir tu código. Es realmente útil. De todos modos. ¿Cómo funciona? Bueno, vamos a consola registrar algo y vamos a acceder a JavaScript array objeto en nombre. Sabemos que hay un método llamado desde. Y queremos pasar en nuestra matriz como y como puedes ver, toma nuestro objeto similar a una matriz valen la pena y lo convierte en una matriz, cual es realmente, realmente impresionante. Y puedes ver aquí, nuestra matriz solo consiste en cada litro en rayos X. Y está, bueno, ya está hecho. El top volver a la conferencia. Enfriar es que están haciendo escenas. Miramos un ejemplo muy sencillo, pero solo ten en cuenta que ¿qué significa este objeto tipo de matriz? Simplemente significa que el objeto necesita tener una propiedad de longitud y elementos indexados. ¿ A qué me refiero con esto? Bueno, volvamos a subir a la consola otra vez en esto sólo mira exactamente de lo que estoy hablando. Cloruro. Entonces aquí hemos mirado este ejemplo, pero ¿cómo y por qué funciona? Recuerde, la matriz de método no funcionará en todo como la descripción un poco de temporada, como hemos hablado, que solo funciona en array como objetos. Y lo que eso significa es que el objeto necesita tener una propiedad de longitud y elementos de índice D4. ¿ A qué me refiero? Bueno, tiene a una consola. Entonces déjame hacer clic derecho en Google Chrome aquí, nuevo modo incógnito. Y vamos a una consola y tipo de hacer escenas. ¿ Se puede ver la x? Y recordad lo que decimos, solo definamos el objeto tipo matriz de perro como lobo. Y sabemos que la matriz del método funciona en nosotros. Acabamos de ver un ejemplo de eso. Pero, ¿por qué? Bueno, para mostrarte, vamos a consolar hacer este objeto array y quiero mirar su protón. Y si cargamos esto, sabemos que es de tipo string. Y si abrimos el método de cadena, Lo que es impresionante es que tenemos esta propiedad de enlace. A eso me refiero con un ID de objeto similar a una matriz tiene que tener esto vinculado correctamente para que la matriz del método funcione. Entonces ahí lo tienes. La esperanza está haciendo escenas. Volvamos a saltar a la conferencia o impar. Entonces espero que esté empezando a tener más sentido para ti. Y recuerda lo que dije antes que sí se necesita más de un argumento. En realidad, puede tomar hasta tres argumentos, puede tomar un mapa, y puede tomar lo que quieras que esto se refiera. Ten en cuenta que estos argumentos son opcionales. No tenemos que ponerlos en esta función para nada. Y mucha gente realmente combina el, este argumento opcional en esa función de mapa en sí. Por lo que muchas veces solo verás dos argumentos en la matriz desde el método. En fin, no quiero entrar en demasiados detalles sobre esto. Te puedo mostrar rápidamente de qué se trata el mapa. Entonces en la parte superior sobre al editor de texto otra vez. Y echemos un vistazo a cómo funcionaría eso. último, pero no menos importante, veamos cómo funciona el segundo argumento a la matriz desde la función. ¿ De qué se trata todo? Bueno, eliminemos todo lo que teníamos en nuestra pantalla previamente. Y esto definir una matriz es sólo decir que nuestra matriz tiene un perro y lo adivinaste. Un gato. Freeway, simple. Ahora lo que quiero hacer es definir una función de manejador. Quiero llevar todo dentro de esta matriz y quiero cerrar sesión algo en la pantalla. Por lo que eso se utiliza la palabra clave de función JavaScript. Llamémoslo manejador. Podemos llamarlo como queramos. La mano se va a llevar un animal en cada caso. Y todo lo que quiero hacer es que solo quiero devolver declaración y voy a estar usando literales de plantilla aquí. Y lo que voy a decir es que voy a decir un animal dispuesto a caminar, caminando para que se vaya. Eso no es nada demasiado profundo. Se trata de una función muy, muy sencilla. Ahora, ¿qué quiero hacer? Bueno, vamos a la consola de registro. Vamos a acceder a la matriz desde el método. Sabemos que queremos acceder a este tipo de array. Una mano, como se puede ver aquí. Si sólo lo mantenemos con un argumento, literalmente no tiene sentido que lo hagamos porque ya es una matriz. Entonces no tiene sentido crear una matriz a partir de una matriz. Pero es el segundo argumento ese mapa que quiero que entendamos. Y el segundo argumento es lo que hemos definido como la mano la función. Y luego vamos a lo que nos ha devuelto. En la pantalla se encuentra un perro paseando y cuenta al caminar. Esta es una nueva matriz. Ahora, se ha creado una matriz totalmente nueva y se toma, cada elemento en la matriz original, lo cuesta a través de nuestra función de mapa, y nos devuelve una nueva matriz. Porque tienen un poco de sentido. Y de eso se trata todo. Espero que te estés divirtiendo. Y creo que a estas alturas como que tienes una buena sensación intuitiva de cómo funciona esto. Tan bien hecho. Estoy muy, muy impresionado. Ahí vamos. Espero que esté empezando a hacer un poco más escenas. Y no te preocupes, a medida que te encuentras con estos en tu carrera de codificación, empezarás a usarlo cada vez más y más y se volverá mucho más intuitivo. Solo quería que supieras sobre la matriz desde el método porque es un puede ser extremadamente útil, lo que me lleva al siguiente tema. Y es por eso que necesitas saber sobre la matriz a partir del método. ¿ Por qué siquiera lo discutí en este curso? Vamos, a veces queremos trabajar con métodos que sólo están disponibles desde el objeto array. Por ejemplo, el para cada método sólo está disponible en el objeto array. Y para poder acceder a ese método, veces tenemos que convertir lo que trabajamos dentro de nuestro código en una matriz. ¿ Eso tiene sentido? Y por encima de esto, la matriz de método es extremadamente útil. Permite hacer muchas otras cosas como clonar matrices, eliminar duplicados, incluso llenar una matriz, etcétera, etcétera. Hay muchas cosas que puedes hacer. Y lo más definitivamente vas a estar usando menos cuando trabajes con colecciones DOM. Y me trae de vuelta a eso primero, a veces queremos usar métodos que solo están disponibles en el objeto array. Entonces, cuando estás trabajando con la colección DOM, por ejemplo, y HTMLCollection, a veces necesitamos convertir eso en un objeto array para acceder a los métodos que queremos. Entonces supongo que lo que estoy tratando de decir es que resulta útil cuando te encuentras y trabajas con objetos parecidos a una matriz. Está proporcionando un poco más de claridad sobre lo que hace este método. Pero no te preocupes, sólo nos estamos metiendo en ello. Entonces no te asustes si no entiendes del todo. Uh, th, va a venir a través del tiempo. Espero que hayas disfrutado de este fresco hasta ahora Huike, manteniéndote motivado y te veré en la próxima conferencia. 21. Uso de forCada para bucles a través de nuestra matriz: De acuerdo, Así que aquí es exactamente donde lo dejamos. Hemos creado nuestra matriz de abarrotes mediante el uso de JavaScripts array a partir del método. ¿ Qué es lo que queremos hacer a continuación? Bueno, queremos recorrer esta matriz, pero recuerda que si vamos a nuestro archivo de índice aquí, literalmente tenemos cada elemento LI como un solo elemento en una matriz y luego vas al elemento de deuda y por supuesto tiene que extenderse. Por lo que esto solo mira el primer elemento de nuestra matriz. Van a ser estos elementos LI. ¿ Y qué queremos? Bueno, queremos al primer elemento hijo, ¿verdad? Nosotros sólo queremos trabajar con este ítem, esta palabra MOOC aquí. Escenas y mujeres, Parte 1 de este curso, discutimos diversos métodos de atravesar. Discutimos primer hijo, primer elemento niño, ¿recuerdas todas estas cosas? Sí, queremos asegurarnos de que sea un elemento. No queremos que nos devuelvan a tomar nevadas, por ejemplo. Por lo que queremos recorrer cada elemento de la matriz. Pero recuerda en cada caso fuimos a agarrar el artículo que sea. Queremos agarrar al niño de primer elemento. Y queremos que eso toma contenido porque queremos agarrar sólo esos tramos que tienen el texto real que queremos comparar. Y de nuevo, vamos a tener que convertir todos estos artículos gustos en minúsculas porque fuimos a competir manzanas con manzanas. Volvamos a nuestra app. Y empecemos a codificar esto. ¿Por dónde empezamos? Bueno, sólo hagamos un comentario Sí, y recorra cada artículo de abarrotes. Eso es lo que queremos hacer. Entonces, ¿cómo hacemos esto? ¿ Cómo hacemos un bucle a través de cada artículo de abarrotes primero, necesitamos agarrar nuestra matriz. Y ahora es donde ocurre la magia. Podemos acceder a esto para cada método. Y la razón por la que podemos acceder a ella es porque usamos esta matriz desde el método. Hemos convertido nuestros abarrotes en una matriz, digamos haciendo santos. Y si no sabes muy bien cómo funciona el método ForEach, por favor echa un vistazo al curso completo de gran maestro de mi JavaScript. Gracias. Puede saber cómo funciona. No es del todo intuitivo. Todo lo que hace es bucles a través de cada elemento de la matriz. Y nos da ese artículo como variable. Y podemos llamarlo como queramos. Vamos a enfriar nuestro abarrotes artículo. Si vamos al archivo índice, permanecemos malos cuando usamos el completo cada método, nos va a echar de vuelta cada etiqueta LI. Acabamos de llamar a eso abarrotes. Es todo lo que lo hemos hecho. Y solo voy a usar la nueva sintaxis de flecha. Y este es realmente el corazón de nuestro código va a pertenecer. Lo primero que quiero hacer, recuerda que tenemos a ese Ally. Yo quería agarrar al niño de primer elemento. Entonces definamos una nueva variable. Vamos a llamarlo un nombre somero porque esto es lo que queremos recorrer. Y sabemos que ese va a ser el abarrotes ese elemento LI. Pero ahora queremos al primer elemento hijo, ¿no? Y luego en ese niño, queremos acceder a su propiedad de contenido de texto. ¿ Qué tan impresionante es esto? ¿Enfriar? Espero que tenga sentido. Eso es en realidad parar. Sí, esa es consola registra esto a la pantalla solo para que podamos asegurarnos de que sí nos inscribimos correctamente. Y es salto a nuestro navegador. Vayamos a la consola. Hagamos eso un poco más grande. Esclera lo. Entrémonos a nuestro elemento de búsqueda y tecleemos un mayúscula a. Wow, Ahí vamos. Literalmente se busca a través de todos nuestros artículos, leche, azúcar y especias, algo para beber, y pizza. Puedo romperlo otra vez. Ya puedes hablar, pequeña a, y se hace exactamente lo mismo. ¿ Qué tan impresionante es esto? ¿ Hombre? Me estoy divirtiendo mucho. Volvamos a nuestro código aquí. Por lo que sabemos que hemos bucle exitosamente a través de todos nuestros artículos y estamos obteniendo su contenido de texto. El siguiente paso es recordar, no queremos capitales. Si tenemos nuestro navegador aquí, tenemos tienda de capital. Entonces si el usuario tipa moho, pero con objetivos pequeños, No va a emparejar este MOOC con un capital. Entonces, ¿cómo nos enfrentamos a eso? Bueno, ya lo sabes. Sabemos que cada nombre de abarrotes es de tipo string. Y por eso, podemos acceder a Javascripts a método minúscula. Entonces lo que queremos hacer ahora es que queremos convertir todo nuestro texto en minúsculas. Entonces lo hacemos accediendo a nuestro nombre de abarrotes, en realidad vamos a crear una nueva variable. Llamémoslo el nombre del abarrotes. Y ese es nuestro nombre de abarrotes. Y podemos salir de JavaScripts a minúsculas lo hicimos como hago escenas. Entonces estamos consiguiendo nombre. ¿ Cuál es el siguiente paso? Bueno, el siguiente paso es que queremos comparar si el usuario me lleva solo volver aún a ver, ¿sabes a qué me refiero? Fuimos a competir. Solo eliminemos la consola y déjame teclear. Lo que queremos que hagas es que queremos comparar si el usuario escribe MOOC. Queremos buscar a través de todas esas cintas artículos a continuación. Queremos ver si ese MLK está alguna manera por debajo. Y si lo es, queremos que esa se muestre. Y si no lo es, queremos que todo lo demás desaparezca. Eso es lo que queremos hacer. Por lo que necesitamos una forma de comparar. Oye, miramos la cadena MLK es de todos modos en esos nombres de abajo. ¿ Y cómo hacemos eso? Bueno, quiero usar otro método en JavaScript llamado index off. Déjame hacer un comentario aquí ahora puedo decir ahora podemos usar index off para ver si nuestro texto se puede encontrar dentro de nuestro nombre de abarrotes. Si no se encuentra nada, se devuelve un valor de uno negativo. Y podemos escondernos. El artículo. Es un poco haciendo escenas. Sé que podría parecer abrumador. Realmente hemos pasado por mucho en este ejercicio. Es decir, hemos hablado sobre la matriz de método, el método de dos minúsculas, y ahora hay otro llamado índice de. Pero confía en mí, te va a ayudar tanto en tu longitud de onda Corea. Entonces vamos a saltar a una nueva conferencia antes de seguir adelante. Y quiero que entiendas el índice de método y cómo funciona. Nos vemos lo suficiente. 22. Introducción a indexOf(): Otra función muy increíble en JavaScript se conoce como el índice de función. ¿Y qué hace? Bueno, en el nivel muy básico que te dice si un elemento dado se puede encontrar en una matriz o una cadena. El índice de mxnet se sumó al estándar de 260 segundos en la quinta edición. Lo que eso significa es que se acaba de agregar el tercero de diciembre de 2009. Entonces lo que intento decir es que no tienes que preocuparte por los navegadores y no incorporar este método. Cada navegador de hoy le permitirá utilizar el índice de método. De acuerdo, gran cliente, los navegadores antiguos pueden aceptar un perro. ¿ Cómo se ve cuando empezamos a usarlo? Bueno, en primer lugar, se llama al índice de método escribiendo sus palabras, Es palabras clave índice off. Un decano toma dos argumentos. El primer argumento es el ítem de búsqueda y aka el ítem que desea buscar. Y el segundo argumento es opcional. Es el punto de partida de tu botón de búsqueda Más ocho, vamos a estar viendo ejemplos de esto en breve. Entonces el ego, eso es un poco lo que parece, un alto nivel. Y como mencioné, vamos a estar viendo ejemplos. Pero antes de que lo hagamos, eso es algo muy importante que debes entender. Y ese es el método IndexOf solo existe para dos tipos hijas en JavaScript. El primer top hija que existe en borrado. ¿ Qué es una matriz? En JavaScript y array como solo una sola variable que se utiliza para almacenar diferentes elementos. Y ten en cuenta el array JavaScript es un objeto global, lo que significa que puedes acceder a él desde la forma que quieras. Pero suficiente plática en realidad quieren saltar a nuestro editor de texto y quiero empezar a codificar un aumento contigo. Y quiero empezar a mirar este índice de método, específicamente en matrices. Saltemos a la consola y todavía está jugando. 23. Usa indexOf() con Arrays: De acuerdo, entonces aquí estamos. Y quiero que empecemos a codificar juntos, pero quiero que vayamos paso a paso, despacio, poco a poco atrapar a un mono. El primero que mencionamos es que este índice de existe en a tipos hijas en JavaScript. Y el top de primer orden que estamos viendo es el array. Entonces déjame demostrártelo antes de ir más lejos en nuestra codificación, fui al registro de consola. Todo Es solo consola hacer fuera el objeto array. Si abrimos esto y miramos su prototipo, hay un índice de método. Ahí vamos. ¿Nos puede ver? Entonces ahora acabo de probarle que sí existe en la matriz, ese objeto de matriz global en JavaScript. De ahí viene. Muy bien, ahora vamos a nuestro editor de codificación. Acabo de tener un archivo app.js en blanco abierto aquí. Y yo estoy dirigiendo caucus. Caucus, muy útil, por cierto. Muy útil. Sigo diciéndolo, pero es muy bueno. De acuerdo, Lo primero que quiero que tipo de comunicarme contigo es uno como una matriz. Bueno, en primer lugar, vamos a crear una matriz. Y lo usamos por los corchetes aquí. Y sólo quiero decir, yo soy el primer elemento. Yo soy el segundo elemento. Y lo adivinaste, yo soy el tercer elemento, C. Aquí vamos, Hemos creado una matriz. Utilizamos esos corchetes. ¿ Y cómo accedemos a matrices? Lo primero que quiero mencionar es que las matrices JavaScript o Sarah. ¿ A qué me refiero con eso? Sólo quiero decir que el primer elemento de una matriz siempre está indexado en Sarah. Y el último elemento siempre se puede encontrar en el índice que es igual al valor de la propiedad longitud de la matriz menos 1. Déjame mostrarte lo que quiero decir. Entonces vamos a la consola log nuestro array. Y recuerda cómo dije que es 0 indexado x es el primer elemento de la matriz. Escribimos 0. Yo soy el primer elemento. Y por supuesto que podemos hacer eso para los próximos ítems, ¿no? Podemos ir 012 en el primero y el segundo y el tercer elemento. Eso tiene sentido. Y lo otro que quiero mencionar es que cada matriz tiene una propiedad de longitud. Entonces si la consola desconecta nuestra matriz y accedemos a esta propiedad llamada links, sabemos que nuestra matriz tiene tres ítems. Por lo que un consejo muy útil a la hora de codificar. E incluso voy a entrar aquí, siempre podemos x es el último elemento en una matriz como esta. Y esto es muy, muy útil. Entonces por favor recuerden esto. Antes de teclear la solución, solo piensa en qué es lo que acabamos de hacer. Sabemos que la longitud de la matriz es de tres. Y si miras el registro de la consola justo arriba, sabemos que hemos accedido al último ítem que utilizo array y el índice dos. Porque recuerda, las matrices JavaScript siempre están indexadas en 0. Entonces sabemos que el último elemento de la matriz es esa longitud de la matriz, que es 3 menos 1, lo que nos lleva a dos. Entonces todo lo que trato de decir es acceder al último elemento de la matriz, todo lo que tenemos que hacer es acceder a nuestra matriz. Y ahora si no sabes cuál es el enlace, es muy útil acceder a la propiedad link, que en este caso es indefinida porque no hay un cuarto elemento en la matriz. Por lo que siempre minos1. ¿ Tiene sentido? Eso espero. Y los herbicidas obtienen una sensación más intuitiva sobre cómo funcionan las matrices. La otra cosa que quiero mencionar, solo eliminemos a este hombre, odiemos borrar cosas a veces. ¿ Hemos pasado tanto tiempo para tratar de darme puntos a través y acabo de borrar es un poco triste, hombre arriba el cloruro. Pero de todos modos, vamos a crear una nueva matriz, 1, 2 y 3. Otra cosa que quiero simplemente mencionar con matrices que son bastante peculiares es que no se puede usar la notación de puntos para acceder a los elementos. Este es un punto importante. Entonces, por ejemplo, si registramos en consola nuestra matriz y tratamos de obtener el primer elemento, no nos va a dejar hacerlo. En realidad obtenemos un error de sintaxis. Entonces sólo ten eso en cuenta. Y no es, ya sabes, hay nada especial en esto. De hecho, las propiedades de JavaScript que comienzan con un dígito nunca pueden ser referenciadas con documentación siempre existieron en el uso de notación de corchete. El matiz de JavaScript, No te preocupes, vale, pero probablemente te estés preguntando cliente, no quiero aprender sobre matrices. Estamos en el tema de índice de n. eres 100 por ciento correcto. Solo quería que te familiarizaras con las matrices antes de saltar a ella. ¿ De acuerdo? El punto que quiero hacer con las caídas de índice es que devuelve el primer índice en el que se puede encontrar un elemento dado en la matriz. Si no existe en la matriz, se devuelve uno negativo. ¿ A qué me refiero? Bueno, definamos una matriz llamada animales. Y tiene un warthogs que tiene una jirafa. Y dice que consiguió un búfalo. Y dice que tiene una línea. ¿ Cómo funciona? Bueno, veamos. Vamos a registrar la consola para que realmente podamos ver el resultado de lo que producimos. Lo primero con el fin de acceder a nuestro índice de es acceder a una matriz. Y el array al que entramos en el acceso es nuestro array de animales. Queremos ahora acceder al índice de método que está incorporado en todas las matrices. Y busquemos platicar. ¿ Qué esperarías ver? ¿ Dónde se encuentra warthogs? Así es, Está ubicado en el índice 0. Recuerda que las matrices JavaScript siempre están indexadas en la base Sarah. Entonces si tratamos de encontrar warthogs, podemos ver devuelto a nosotros es 0. Eso tiene más sentido. Y sólo voy a duplicar este código. Ahora busquemos Buffalo. ¿ Cuáles crees que serán los números de índice que serán? Levantemos. Esperaría el número dos. A ver si este derecho. Ahora lo que quiero hacer es, busquemos perro. ¿ Qué crees que va a pasar con los perros? Bueno, como mencioné, si no se encuentra, se nos devuelve uno negativo. ¿ Tiene sentido? Entonces sólo recuerda, negativo uno significa que no se encuentra. Y lo último que quiero mencionar justo antes de seguir adelante es que el índice de método compara elementos en tu matriz usando estricta igualdad. En otras palabras, utilizando el mismo método utilizado por el signo triple igual. Sólo recuerda eso. Enfriar. De acuerdo, Clyde tenía esto está todo bien y bien, pero sólo estamos usando un argumento en este índice de matriz. Quiero usar ambos y lo entiendo con más detalle. Bueno, es bueno escuchar a mi compañero estudiante. Eliminemos todas estas consolas. Ahora busquemos a este animal desgarrado por la guerra pero nos lleva a decir nuestro índice de método solo queremos empezar en el segundo ítem de nuestra matriz, a desde el índice uno en adelante. ¿ Qué crees que pasará entonces? Entonces vayamos a nuestro segundo argumento en este método. Y digamos que queríamos empezar desde el segundo elemento de la matriz. Bueno, claro que no existe porque sabemos que estamos mirando desde la jirafa en adelante y no hay agua. Miran otro ejemplo que ahora se mira a Mozilla. Y su decir nuestro índice de método para buscar desde say, el tercer ítem en la matriz número dos. Y en este caso, sí devuelve nuestro número de índice. Entonces es muy, muy cool y sabemos que sí existe. Esta es una especie de cómo funciona un segundo argumento. Zack, tengo sentido. Espero así que hayamos trabajado mucho con matrices, pero ahora voy a saltar de nuevo al canal de fuga. Una es mirar el tipo de segundo orden donde podemos empezar a usar este método de Auth de índice. 24. Usa indexOf() con caderas: Estoy divirtiéndome toneladas. Espero que hayas aprendido mucho. Sólo volvamos a donde empezamos. Recuerda dijimos que solo existe en tipos de dos dólares. Este índice de método, el top de primer orden que hemos visto como matrices. ¿ Cuál crees que es el tipo de segundo orden? Bueno, se desenrolla, por favor. Por lo que esta diapositiva que miras aquí es una muy importante, te da una visión general de muy alto nivel de este índice de método. Hemos mirado un montón de ejemplos con matrices. Quiero terminar esta conferencia ahora viendo ejemplos con nosotros trabajando con cuerdas. Empieza a ver cómo funciona eso. Va a ser muy divertido. Confía en mí. Oye, guau, esto es realmente genial. Acabamos de hacer matrices, pero ahora quiero que nos pongamos a cuerdas. ¿ Cómo funciona eso? Y es realmente emocionante, ya verás. Entonces, saltemos a ello. Enfriar. De acuerdo, ¿por dónde empezamos? Lo primero que quiero mostrarles aquí es si vamos a nuestra consola, quitamos la consola, la matriz. Simplemente despejemos la consola y hagamos lo mismo con la fuerza. Bastante sencillo. Hemos sido una cuerda. Nos fijamos en su prototipo. Nos desplazamos hacia abajo y ellos, mis queridos estudiantes es índice de esto es la segunda hija hablando La tecnología JavaScript nos da acceso a este increíble método útil. Di que te vas, sólo quería demostrarte que se encuentra en este tipo de hija también. Si volvemos a nuestro editor de codificación, empecemos a ver esto en acción. Por lo tanto, eliminemos nuestro Air Asia. Hemos mirado matrices. Ahora es crea, no sé, una frase. Y es sólo decir, hola, mundo. El universo. A menudo sé qué le pasa a mi tema hoy. bienvenida. Estos son frase sabemos esto es de tipo string. ¿ Cómo sabemos eso? Todo su consola log tipo de sentencia. Y es bastante obvio, pero sabemos que es una cuerda. Porque sabemos que es una cuerda. Sabemos que tenemos acceso al índice de método. Entonces definamos una variable llamada AIM, eso es exceso de oración. Y busquemos algo. Busquemos la palabra. Bienvenida. Veamos como muertes aquí dentro. ¿ Por qué crees que sería la consola cerrar sesión en la pantalla y obtenemos un número 26. ¿ Por qué 26? Empecemos a contar juntos. Sabemos que este es el índice 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25. Y por supuesto 26 es donde comienza la bienvenida. Método muy, muy útil es definir una frase de llamada constante de nuevo. Y digamos, Oye, ¿ estás aprendiendo mucho en este curso? Espero, señor. Seguir aprendiendo. Entonces empecemos a usar este índice apagado. Empecemos a conseguir un campo más intuitivo. Definamos una nueva variable de JavaScript llamada palabra de búsqueda. Esto es lo que queremos buscar. Y digamos que queremos buscar la palabra aprendizaje. Podemos ver en primer lugar, directamente del murciélago, tenemos dos palabras, ¿ no? Aprendizaje y aprendizaje. Entonces sólo ten eso en cuenta. Por lo que esto define una nueva variable llamada primera vez. Y acceda a nuestra constante de oración. Eso es acceder a este índice de método. Y busquemos, buscaremos palabra. Vamos a la consola log este primer tiempo de espera. Se trata de ayudas. Y sabemos que son ocho porque es el octavo personaje desde el principio es esta primera palabra de aprendizaje. Pero ahora, ¿cómo accedemos a la segunda palabra de aprendizaje? ¿ Cómo haríamos eso? Bueno, déjame darte una pista. Utilizemos el segundo argumento en el método OLS índice. Entonces todo lo que tenemos que hacer es definir una nueva variable llamada segunda vez. Accedamos a nuestra sentencia. Apenas se dio cuenta de una sentencia impecable incorrectamente. Entonces se irían, Vamos a exceso en Nick's off. Lo que queremos hacer ahora es buscar nuestra palabra de búsqueda, ¿no? Esta vez, queremos utilizar el punto de partida. ¿ Y por dónde queremos empezar con este pensamiento después de su fundación? Primer ítem, que es la primera vez más uno. Entonces ahora sabemos que va a buscar a través de nuestro array, pero solo comenzando después de haber pasado la primera palabra de aprendizaje. Cu, espero que tenga sentido. Si consolamos cerramos esta sesión, llegamos al 44, que es exactamente lo que esperaríamos. Usar índice o de esta manera puede ser muy útil en tu código y puedes hacer muchas cosas con él. No lo sé. Vamos a darle un ejemplo. Definamos una variable llamada Solución 1. Usemos literales de plantilla y digamos el índice de la primera. Y usaremos la palabra de búsqueda variable, palabra desde el principio. Es y va a ir la primera vez. Y si regresamos esto a la pantalla, literalmente obtenemos el registro de la consola para nosotros. El índice de la primera palabra de aprendizaje desde el principio es ocho. ¿ Qué tan impresionante es esto? Combinamos muchas cosas que combinamos literales de plantilla, combinando el signo dólar llaves para incorporar expresiones y variables con en nuestra plantilla literal. Es muy, muy cool y te va a ayudar mucho en el camino. Por supuesto, podemos hacer la misma solución completa a la solución a lo que acabamos de copiar esto en lugar de hacerlo todo de nuevo. Sabemos que esta es la segunda búsqueda que tuvimos desde el principio no es la primera vez. Segunda vez. Y si regresamos eso, obtenemos exactamente lo mismo. Pero ahora estamos haciendo referencia a la segunda palabra de aprendizaje. Enfriar. Perdón, sé que a veces me dejo llevar y quizá voy un poco más avanzado de lo que necesitas saber ahora mismo. Pero confía en mí, esto te ayudará en tu codificación Corea. Y quiero que te conviertas en un maestro en todas las cosas. Espero que esté empezando a tener sentido. Lo otro que quiero mostrarles es que eliminemos todo. Yo quiero mostrarles que índice de es sensible a mayúsculas y minúsculas. Entonces lo que quiero decir, lo haremos, si tenemos una palabra y la palabra es tasa perro. Si ahora consolamos log y accedemos a nuestra cadena de palabras, accedemos al índice de método y buscamos perro. Sabemos que existe. De nuevo, esto tendría sentido, pero ¿qué pasa si hiciéramos lo mismo? Pero sí, pasamos por buscar la palabra rojo. Como se puede ver, es sensible a mayúsculas y minúsculas. Hemos devuelto uno negativo, AKA no existe. Si cambiamos la r pequeña a R grande, sí existe. De hecho, el primer elemento de nuestra matriz. Espero que todos estéis aprendiendo a tiempo. Lo último que quiero atravesar es que 0 no evalúa a verdadero y negativo uno no evalúa a falso. Recuerda si tenemos una r pequeña, Es una negativa. No coacciona a falso. Es una especie de matiz raro cuando se trata de este método. Entonces, ¿cómo te demuestro esto? Me permitirá demostrártelo mediante el uso de JavaScripts, sentencia IF. Y lo que quiero competir como quiero decir, si es una palabra, podredumbre, contiene, digamos tasa. Si eso se evalúa como falso, entonces ejecutemos este código que dice registro de consola. Este es el inicio correcto. Inicio. De lo contrario registro de consola, este es el inicio incorrecto. Y ahora verás un problema. Ya verás que por la cloaca, lo que se nos devuelve es la respuesta equivocada. Sabemos que el pequeño r no debe existir en nuestra cadena porque sólo tiene la calificación R mayúscula. Entonces, ¿por qué estamos golpeando el segundo inicio de sesión de consola en nuestra declaración if? El motivo es, es que el negativo no evalúa como falso. Una rueda llena golpeando este inicio y es la respuesta equivocada. Por lo tanto, el punto que estoy tratando de hacer como al comprobar si existe una cadena específica dentro de otra cadena. El camino correcto es usar uno negativo. Por ejemplo, si sustituimos falso por uno negativo, ¿por qué esto no funciona? Minus1 d vamos, obtenemos la respuesta correcta esta vez. Puntos muy, muy importantes que acabo de compartir con ustedes. Por favor, ten eso en cuenta. Entonces z lo tienes. Bucle, solo usa índice todo para los rayos. Acabamos de usarlo con cuerdas. Hemos discutido varias formas en las que puedes usar una GUI, sepan que como K escenas que tienen, sabemos que no se puede coaccionar en negativo 12 falso. Y estos son temas bastante avanzados. Entonces no lo den por sentado, festejen los pequeños triunfos. Pero de todos modos, sigamos adelante y nos vemos en la próxima conferencia. 25. Terminar nuestra funcionalidad de texto de búsqueda: Wow, hemos llegado un increíblemente lejano mientras la mano seria de Diana, sé que a veces puede ser muy desalentador pasar por todas estas cosas porque aprendes cosas nuevas todo el tiempo. Pero quédate conmigo. Casi, casi terminas. Has aprendido una tonelada de información útil. Entonces siempre estamos, déjame desplazarme hasta aquí. ¿ Recuerdas lo que hemos hecho? Hemos escuchado las venas TIP en cuadro de texto de entrada neta. Debido a que es un cuadro de entrada, obtenemos una propiedad de valor para agarrar ese valor que usa escrito dentro convertido a minúsculas. Primer paso. En segundo lugar, estamos agarrando nuestra lista de abarrotes. De hecho, siempre son elementos aliados. Recuerda, dentro de uno y bucle a través de ellos. Para hacer eso, tuvimos que convertir netlist en una matriz. Utilizamos la matriz de JavaScript desde el método, porque es una matriz. Ahora podemos acceder a esto para cada método. Estás haciendo un bucle a través de cada elemento LI. Seguidamente queremos buscar el primer ítem en ese elemento quedó. Pero si obtenemos nuestro archivo índice, este elemento LI no es suficiente. Queremos que los elementos de primer hijo dentro del aliado porque eso nos dará el artículo de abarrotes real, digamos mixins. Después convertimos cada uno de esos artículos en minúsculas. Y ahora finalmente, queremos comparar si la entrada toma que el usuario tecleado coincide con cada artículo de abarrotes. Y para hacer eso, vamos a usar el índice de método. Sabemos cómo funciona. Y vamos a estar usando JavaScripts, sentencia IF, ¿y qué queremos probar? Bueno, queremos probar si este nombre de abarrotes todo en minúsculas, si las tomas, el usuario ha escrito, se pueden encontrar dentro de él. Y eso lleva al usuario mecanografiado, ponemos en una variable llamada texto. Nos desplazamos hacia arriba. Recuerda, para encontrar una variable JavaScript llamada texto, y eso es lo que escribe el usuario. Entonces todo lo que queremos comparar estos, queremos encontrar si esa cadena existe dentro de cada nombre de abarrotes. Y recuerda que no podemos usar la palabra falso, tenemos que usar la negativa. Entonces en ese caso, si no existe, si el usuario tipa Coca-Cola, por ejemplo, y estamos viendo MLK, sabemos que MLK no contiene el sabor Kirk y va a devolver uno negativo si ese es el caso. ¿ Qué queremos que haga? ¿ Vamos a querer agarrarme todo ese elemento aliado sobre mí, que ponemos en una variable llamada abarrotes. Recuerda en R para cada función, pasamos por esos aliados y ponemos a cada uno en una variable llamada abarrotes. Y todo lo que tenemos que hacer es acceder a la propiedad de estilo. Y queremos afectar su propiedad de visualización. Y vamos a cambiar eso a ninguno. Establecer escenas haciendo. De lo contrario. Si sabemos que existe, sabemos que queremos acceder a nuestra propiedad de exhibición estilo abarrotes. Y queremos que eso se muestre como un elemento de bloque. Y este estudiantes de Medea deberían trabajar. Entonces si vamos a nuestro navegador y tecleemos en MLK, todo minúscula. Y mira eso. Agua de mar Senior. Esto es impresionante. Probemos otra. Probemos cocinar. Algo para beber. No tiene sentido. Vayamos a nuestro código rápidamente. Archivo de índice. Debería ser algo de beber. Ahórrate eso, ve aquí. Y estamos literalmente terminados. ¿ Qué tan impresionante es esto? ¿En serio? Tienes que celebrar estas cosas. Has hecho una cantidad increíble. Mira todo este ejemplo. Mira todas las razones por las que hemos escuchado reaccionar a los eventos con elementos del DOM. Hemos utilizado métodos JavaScript en ambos métodos, objetos nativos. Hemos utilizado todas estas cosas para interactuar con el DOM. Y este es un ejemplo muy sencillo. Ni siquiera tenemos un servidor web en segundo plano. Todos lo hemos hecho en front end. Hemos retrasado o hemos parado, evitamos que ocurran comportamientos por defecto. Todavía no hay recongelamientos en marcha. Todo sucede en vivo. Podemos eliminar artículos. Podemos agregar artículos a la lista como un perro. Y luego podemos buscar artículos que busquen un perro. Y nos aseguramos de que ese caso sea insensible. Si eliminamos datos, todo lo demás surge. También podemos haber pied Voy a enumerar en un juramento cómo Olson hemos recorrido tan largo camino. Espero que hayas tenido un montón de diversión en este curso. Y sólo recuerda, no tenemos que parar todavía. Podemos hacer pequeñas mejoras a esto, que tal vez voy a incluir algunas etapas de bonificación, sólo haciéndolo un poco más grande. Por ejemplo, cuando un usuario hace clic en Ed para un perro, no queremos tomar todavía mostrado en este cuadro de entrada. ¿ Podemos incluso agregar quizás pestañas abajo de manera que el usuario pueda tener un poco de información. Por lo que tenían pocas mejoras que podemos hacer a esto. Pero ahora mismo has recorrido un increíblemente largo camino, un 12 para simplemente saltar arriba y abajo con emoción. Walden, y te veré en unas conferencias de bonificación. Hola. 26. Limpiar el cuadro de texto de entrada: Estamos en lo siguiente que quiero que hagamos es quiero que solo averigües si puedes por ti mismo. Claro que toma que el usuario está escrito en ese cuadro de entrada cuando hace clic en el botón editar. Entonces, por ejemplo, si el usuario tipea perro y hace clic en Agregar, no queremos que esa pantalla de puesto de perro haga cómo vamos para quitarlo. Pausa el video aquí y en cinco segundos, te mostraré la solución. Es muy, muy fácil darle una oportunidad. Espero, señor. Entonces lo que estamos queriendo hacer es cuando el usuario ha hecho clic en un botón, cuando ese evento se ha disparado dentro de uno, una entrada de texto clara. Entonces tenemos que hacer es conseguir nuestro código. Aquí está nuestro HTML, eso es bueno, nuestro archivo JavaScript. Y hemos ido a la sección aquí llamada Añadir artículos. Y recuerden, cuando ese evento de presentación se despide al final mismo. Después de que hemos agarrado el gusto de los usuarios. Todo lo que queremos hacer ahora es bus de entrada clara. Y para eso, todo lo que tenemos que hacer es acceder a todo nuestro formulario. Dentro de esa forma, queremos acceder a esa caja de entrada, ¿no? Entonces eso es uso del selector de consultas. Queremos buscar el propio cuadro de entrada. Entonces queremos acceder a su valor. Y es solo sentar ese valor a nulo. Vas a estar de acuerdo conmigo, vamos. Eso es muy sencillo. Si volvemos a nuestro navegador y hablamos perro, hacemos clic en Añadir el rigor. Literalmente lo despejó de esa caja de entrada. Muy sencillo. Por lo que realmente se puede ver cómo estamos mejorando en nuestra existente basada en la tarjeta-. Y así es como funcionan muchas aplicaciones web. Ya sabes, mucha gente va a un sitio y es tan complicado. Piensan que así fue al principio. No es mayormente se hace de manera paso a paso fragmentaria. Un poco lo que estamos haciendo aquí. Basta con abordar cada pieza ya que sale donde lo siguiente que quiero mirar es que quiero añadir pestañas en la parte inferior. Sólo porque creo que es divertido y creo que podría ser una curva oscilante y una bonita pluma para tener en tu cabeza. Nos vemos en la próxima conferencia. 27. Mejora nuestra forma: lo que quiero construir: Hombre, hemos recorrido un increíblemente largo camino. En primer lugar, sólo quiero decir Walden, estoy realmente, muy impresionado y, y así la edad de pegado conmigo. ¿ Qué vamos a estar haciendo ahora? ¿ Voy a querer que sumamos estas pestañas al fondo de nuestro tiro, la lista de Hollich. Y esto va a ser súper práctico para ti en tus propias aplicaciones web que te van a permitir dinamizar cada show y ocultar paneles sobre la marcha mediante el uso de DOM y JavaScript puros a la manipulación que es realmente, realmente útil. Entonces, ¿qué hicieron estas pestañas? Bueno, en primer lugar, cuando el usuario pasa por encima de ellos, quiero estilo para cambiar. Deberías saber hacer eso. Ahora, cuando hacemos clic en una pestaña, nos llega esta pregunta, ¿cómo se llama fideos falsos? En primer lugar, se puede notar que la respuesta no se muestra de inmediato. Lo hemos envuelto en un botón. Y por supuesto, vamos a estar escuchando un evento click en este botón. Y cuando se hace clic en el botón, queremos que se muestre la respuesta. Por lo que el usuario hace clic en un botón y obtenemos el inicio y el impostor. Ya sé, sé que es una broma de papá, pero por suerte para mí no soy comediante. Por lo que consideraron como el primer tabulador. Por supuesto, si haces click, oh, en realidad antes de dar clic en el siguiente paso, ¿te das cuenta de que la pestaña de broma de comida ahora es un gris más oscuro? Entonces de alguna manera necesitamos aplicar estilo a lo que odie a un seleccionado. Ahora si hacemos click en el otro panel, la que tienes esa pestaña de odiar ahora es gris más oscuro y otro panel debajo se muestra. Tan honrado parece un ejemplo muy sencillo, y es un ejemplo sencillo, pero las habilidades que aprendas de esto te van a ser muy, muy útiles. Entonces piensa en cómo se puede juntar todas estas cosas y te veré en la próxima conferencia. 28. Crea las pestañas: De acuerdo, Así que empecemos a añadir estas pestañas. ¿ Cómo lo hacemos? Almacenar puntos, por supuesto, es escribir juntos el HTML. Entonces vamos aquí. Lleguemos al final de esta suciedad por aquí. Y quiero crear un nuevo div. Recuerda necesitamos buscar sección amigo para agregar pestañas. Aquí vamos. Sólo para que sepamos lo que está pasando en la instrucción opcode bastante bien. Aquí vamos. Quiero crear un nuevo registro y esto solo llama a esto la cinta de pestañas. Bastante simple. Y ya sabes, es útil. Vamos a tener nuestro navegador a la derecha para que podamos especie de ver qué está pasando es codificamos y ¿cómo quiero que funcionen esas cintas? Sólo tengamos un encabezamiento primero en la lista de encabezamientos. Simplemente defina nuestro hitting dentro de esta visión, todos los elementos y démosle una clase de hitting. Y por supuesto tenemos etiquetas LI debajo de ella. Yo etiqueto debajo de ella. Vamos a darle un chiste a esto. Podría ser lo que quieras y hagamos otra. Y es sí. ¿ Sabías que Diego están fuera dos rubros. Déjame solo hacerlo y el conocimiento cuenta Bennett T quieren agregar esta hija atribuida a nula. No me preocupo de qué es esto. Voy a estar explicándolo. De hecho, voy a haber decidido que voy a hacer toda una conferencia al respecto. Entonces no entres en pánico todavía y sólo voy a llamar a esta hija. Haga clic. De acuerdo, esto recortado, podemos definir la forma que queramos. Yo solo quería que me hicieran click porque obviamente se va a activar cuando el usuario haga clic en él. Y quería valorar para ser broma, pero quiero sumar identificaciones, que verás más adelante, razón por la que estoy haciendo esto. Entonces por eso voy a convertirlo en la broma de hashtag. Y vamos a darle una clase para que podamos darle estilo en nuestro CSS. Podemos decir, ya sabes, por defecto queremos que algo esté activo. Smith, dice, va a ser para divertirse. Y luego en el segundo aliado, quiero alterar otro panel entero. Por lo que quiero volver a agregar algo a su atributo hija. Voy a llamarlo de nuevo clicado. Y en este caso, vamos a darle una identificación de hechos o un valor de efectos de identificación. Ya verás cómo usamos esto. No se asuste, por favor. Volveré a ello. Entonces ahí vamos. Estos son elemento UL. Lo siguiente que quiero hacer es que quiero crear dos paneles. Y estos paneles van a ser producto total. Al hacer clic en el que golpea en el panel uno para mostrar cuando tomaste que están golpeando los otros paneles van a mostrar. Y vamos a replicar panel dentro de una etiqueta div. Y la primera con la que quiero lidiar es esta broma, ¿la comida se masturba? Entonces démosle una identificación de broma y una clase de panel. ¿ Eso tiene sentido? ¿ Y cuál es la broma? ¿ Cómo se llama fideos falsos? Nosotros guardamos esto. Puedes ver que estos son párrafo y no te preocupes por peinarlo. Nos vamos a meter en eso y contestar. Podemos poner en un párrafo abajo aquí está en pasta. Y es ruta brillante. Esa es una broma de papá. Entonces ahí vamos. Ese es nuestro primero de me pregunto entonces hacer un segundo div para nuestro segundo panel. Ese segundo panel va a tener identificación de hechos. Y también va a tener una clase de panel. Y vamos a darle un párrafo diciendo, esto es lo que aprendí de la comida esta semana. Y debajo de eso, sólo podemos tener otro párrafo con texto Lorem Ipsum, no importa lo que sea todavía, guardamos esto. Se puede ver a nuestros científicos luciendo terribles, Cool. Entonces con el fin de mejorar, tipo de aspecto y sensación de esto, Vamos a entrar en nuestro CSS. Y dejó de espaciarlo un poco. Entonces, vamos a entrar en nuestros estilos aquí. Vayamos al fondo. ¿ Quién ha hecho mucho celestial. Y vamos a tratar ahora sin pestañas, deberíamos empezar bien, si vamos a nuestro archivo de índice y me desplazamos hacia arriba, hemos clasificado todas nuestras pestañas en este div con un ID de tab rep. Entonces vamos a nuestra hoja de estilo. Y lo que quiero hacer es que quiero acceder a nuestro elemento UL de envoltura de puntas. Pero ahora quiero que definamos lo que sucede cuando pasamos por encima de cada uno de esos artículos. Bueno, en primer lugar, quiero que nuestros antecedentes sean los mismos que esos otros colores que hemos conseguido. Se puede ver mi idea realmente me ayuda. Tenemos da 43, 43. Y el interminable cambia el color del texto a blanco. Si pasamos el cursor sobre cada uno de esos ítems, cambia el fondo y su color de fuente a blanco. Un bastante cool. Y no te preocupes, vamos a estar haciendo que esto se vea mejor. Vamos a acceder de nuevo a nuestra pestaña, no rasgar brca. Y vamos a afectar cada etiqueta LI. Sed. Yo quiero que cada uno sea un bloque en línea. Y lo siento si voy rápido, pero quiero que seamos muy rápidos. Y porque este no es un curso sobre CSS. A continuación, agreguemos un poco de relleno de odiarlo. En los hombres, es increíble lo rápido que estas cosas simplemente pueden verse mucho mejor en un corto espacio de tiempo. Muy, muy cool. Cambiemos el color de fondo. Démosle un ligero radio de frontera. Tres píxeles. ¿Cómo se ve eso? Se ve bastante guay. Vamos a asegurarnos de que tenemos un cursor puntos de nuevo. Y entonces vamos a darle un poco de derechos de margen. Digamos en píxeles. Ahí lo tienes. Tienes que admitir que eso se ve bastante limpio. Ahora trabajemos en nuestros paneles. Entonces, de nuevo, solo quiero que seamos específicos por las reglas de cascada CSS. Yo quiero que agarremos este repre tab, luego quiero que agarremos nuestros divs con clase de panel y esta estrella estornando notas. En primer lugar, no mostremos nada. Consideran a Sheila encendido. Démosle un poco de margen. Sabemos lo que no vamos a ver lo que estamos haciendo. Sí, solo, hagámoslo al final. Entonces vamos a ver lo que estamos haciendo. Ellos lo consideran 0 a m Démosle una frontera. Un píxel, sólido, triple D. ¿Cómo se ve? Aquí vamos. Es como que me hace pausar. Necesita relleno. Eso se ve terrible. Ahí vamos. Y vamos a darle una curva, bordes, border-radio, tres píxeles. Aquí vamos. Son todos estos pequeños toques los que nos hacen quedar mucho mejor, ¿verdad? Esa pequeña curva ligera en la frontera sólo hace que se vea mucho mejor. De acuerdo, ahora, ocultemos todo. Ahí vamos, se ha ido. Quién, de nuevo, desde una perspectiva de estilo con casi hecho. Pero estas dos cosas que quiero hacer, una, una unidad a cuando hacemos clic ya sea broma de comida o sabías en quiere que lo peinemos un poco diferente para que lo sepas, se borra. Entonces llamemos a eso un acto de estilo. El segundo que quiero hacer es cuando se abren los paneles, necesitamos un tipo de agregarle dinámicamente una clase para mostrarla u ocultarla. Entonces vamos a añadir un poco más de CSS a este archivo ahora mismo. Como mencioné, quiero sumar un poco más. Accedamos a nuestro envoltorio de pestañas. Me pregunto entonces sale del panel con el panel de clase. Y como mencioné, vamos a estar alterando esta clase activa, ¿verdad? Y el, todo lo que va a hacer cuando está activo es que lo va a mostrar. Vamos a exhibirlo como una cuadra. Lo último que quiero hacer es que quiero acceder a nuestra mesa. Y como mencioné, quiero agregar un Selected Class 2, que si se selecciona una pestaña y se cambia su color de fondo back ground a otro 139. 139, 139. Piensa que esto debería funcionar. Entonces ahí vamos. Hemos hecho nuestro CSS. Creo que si vemos errores, los encontraremos en el camino y los arreglaremos. Si obtenemos nuestro archivo índice, recuerda, déjame simplemente expandir esto. Recuerda lo que hemos hecho. Agregamos un envoltorio para todos nuestros paneles dentro de la retina. Tenemos una sección de encabezamiento el cual hemos escrito esta etiqueta UL. Le hemos dado una clase de bateo, y tenemos dos pestañas. Y editamos este atributo de hija clicado. ¿ Qué es esto? Voy a meterme en ello en breve. Dentro definido nuestros dos paneles con lo oculto por ahora. Eso es lo que queremos agregar cláusulas. Nosotros queremos agregarlos dinámicamente para que se muestre uno y cuando un usuario hace clic en uno de esos paneles que lo muestra, cuando hace clic en el otro panel en oculta el anterior y muestra el nuevo. Piensa en cómo podemos hacerlo. Pero antes de que nos metamos en eso, sólo déjame tener una conferencia rápida sobre este atributo de hija ticulcado. ¿ Cómo funciona y por qué lo tenemos? Nos vemos ahora. 29. ¿Qué se usa el atributo de datos?: Muy bien, ¿de qué se trata este atributo hija? Bueno, en primer lugar, HTML5 introdujo el atributo hija, y nos permite almacenar alguna información extra en nuestro elemento HTML sin ningún significado en particular. reunirnos con, podemos tipo de almacenar información en mí y podemos hacer con esa información como nos gusta esto ninguna regla dura y rápida de que solo debamos usarla en una circunstancia. Por lo que siempre que quieras agregar datos a HTML, esta es una gran manera de hacerlo. Y no te preocupes, la sintaxis es súper fácil. Todo lo que necesitamos hacer es incluir un atributo con un nombre que empiece por hija. Recuerda en nuestro ejemplo, recuerda el guión de datos en el que se hizo clic, ese era nuestro nombre de atributo. Y muy importante, recuerda, para poder acceder a ella dentro de necesidad de usar JavaScript para leer el valor de este atributo. Javascript y el uso del atributo van mucho de la mano. Imágenes se deshacen de este tobogán, volador Verde. Y permítanme decir que leer los valores con JavaScript cuando queremos acceder a ese atributo de datos también es muy fácil. Todo lo que necesitamos hacer es usar la notación de puntos era la palabra clave, hija Seat, objeto. Eso es todo. Entonces todo lo que hacemos es agarrar a nuestros elementos. Usa la notación de puntos. Utilizamos la palabra clave hijas. Se. Después usa de nuevo la notación de puntos. Y luego para acceder a ese valor, insertamos el nombre de nuestra hija. Recuerda en nuestro ejemplo que acabamos de ver, ponemos el nombre recortado. ¿ Eso tiene sentido? Por lo que sólo quería tomarme este momento muy breve para discutir este atributo de la hija sentada con un poco más de detalle porque tal vez no lo hubieras visto antes. Pero como verás en la próxima conferencia, tiene un atributo muy, muy útil para acceder a Cold Harbor como tiene sentido. Si no, no te preocupes, vamos a estar cortando en los próximos minutos. Nos vemos en la próxima conferencia. 30. Añadir la clase seleccionada: Entonces aquí estamos. Estamos ocupados empezando a agregar estas pestañas en la parte inferior. Como puedes ver, el usuario hace clic, no pasa nada. Así que saltemos a nuestro editor de texto y empecemos a escribir este JavaScript. No quiero que pienses en cómo puedes hacerlo. En primer lugar, necesitamos escuchar a un oyente de eventos. No necesitamos determinar en qué pestaña hizo clic el usuario. E incluso podemos usar o utilizar incluso balbuceando aquí. Sabemos que todo va a burbujear hoy. Te acuerdas que leímos a estos dos bateador. Yo lo haré, yo las etiquetas en un elemento UL padre. Por lo tanto, utiliza burbujeo de eventos. Y por supuesto cuando se hace clic, necesitamos una forma de tipo del navegador, el DOM para mostrar esa sanción apropiada. Por lo que necesitamos agregar cláusulas dinámicamente. ¿ Y cómo hacemos eso? Hay algunas maneras, pero quiero que uses la API de lista de clases. Y recuerda que hay un método llamado toggle en eso, que quiero que uses también. Así que pausa el video aquí y en los próximos cinco segundos, empezaré a cortar la solución contigo. Buena suerte. De acuerdo, escuché que le diste una oportunidad. Eso es bueno. Escribiré los datos como nuestro archivo de índice. Saquemos el archivo dot js. Y empecemos a codificar. Entonces vamos aquí y tal vez al fondo, podría ponerlo de todos modos en nuestro expediente. Vamos a copiar este encabezado. Por lo que es bueno estructurar tu código así. De lo contrario te vas a olvidar. Y es un sitio muy sencillo, por lo que no necesitamos múltiples archivos JavaScript. Normalmente tendrías un montón de diferentes. De acuerdo, entonces, ¿por dónde empezamos? Bueno, en primer lugar, quiero ocuparme de nuestros rubros y listas. Sólo di, vamos a agarrar nuestro golpear a nuestra etiqueta UL de padres. Recuerda que tenemos nuestro archivo de índice. Aquí podemos ver que hemos leído nuestros encabezamientos en este elemento. Volvamos a nuestro JavaScript aquí y primero agarremos nuestros encabezados. Sabemos cómo hacer esto por ahora todos ustedes pros en esto. Usemos QuerySelector. Y queremos agarrar artículo con clase de golpearme, ve aquí con AQL dado, esa clase de bateo. Entonces ahí vamos. No es difícil, ¿verdad? Lo siguiente que quiero hacer es que también quiero definir nuestros paneles. Describa nuestros encabezamientos y los medios de comunicación. Vamos a agarrar nuestros paneles y se define una nueva variable JavaScript llamada paneles. Y sí, sabemos hacer eso también. Selector de consultas, todo porque recuerda aquí hay más de un panel. Y le dimos un cada clase de panel para obtener nuestro archivo de índice. Damos a cada div, cada panel su propia clase llamada panel. Y de nuevo, no es difícil. Nosotros sólo vamos paso a paso. De acuerdo, lo siguiente que quiero hacer es querer alterar entre qué pestaña hicieron clic los usuarios porque quiero darle un estilo diferente. Por lo que esto solo diga definir una variable de elemento seleccionada. Alternar entre clases. Y voy un poco más rápido ahora porque ya hemos hecho este tipo de cosas antes en retos y ejercicios anteriores. Por lo que debes tener una muy buena idea de cómo funciona esto. Pero definamos una variable llamada panel seleccionado. Y empieza definiendo eso como nulo. Ahora, como mencioné en la introducción a esto, quiero aprovechar el burbujeo de eventos. Vamos a adjuntar el oyente de eventos en el elemento padre UL. ¿ Cómo hacemos eso? Bueno, sabemos que lo hemos definido en una variable JavaScript llamada hitting, um, que hay un método llamado adDeventListener. Probablemente te vas a deslizar esto es tan fácil que tú conmigo, aguanta conmigo. Se va a complicar un poco más. Estamos escuchando el evento click sobre mí. Y por supuesto queremos ejecutar nuestra función de manejador es solo usar la sintaxis de flecha. Muy, muy sencillo. Lo primero que quiero hacer ahora es que quiero que encontremos, que lo haré, activé el CBT. Recuerda nuestro archivo índice, consideramos con estos dos tanques aliados. Y cuando el usuario toma uno, queremos averiguar en cuál se hizo clic y queremos agregar un clúster dinámicamente. Aquí vamos. Averigüemos qué aliado desencadenó el evento y ¿cómo hacemos eso? ¿ Te acuerdas? Bueno, muy sencillo. Definimos una variable llamada target. Accedemos a nuestro evento, ejecutaremos esto, solo mantenernos al día con la norma y no lo definimos como evento, lo acabamos de definir como E. Y cada evento que se emite tiene una propiedad objetivo y eso nos dice qué elemento en realidad desencadenó ese evento. Y ahora, usemos a nuestra hija establece valor hija. Esto va a determinar qué panel mostramos al usuario. Recuerda, hemos llamado a Alice, clicé. Puedes llamarlo como quieras. Y recuerden, tuvimos esa breve conferencia explicando de qué se trata este atributo de datos. Entonces sí, vamos a conseguirlo. Voy hija va a ser el objetivo del evento. Y tiene una propiedad de conjunto hija. Recuerda que tenemos que usar esta palabra clave y llamamos a la nuestra clicked. Tenemos que, realmente es así de fácil. Enfriar. De acuerdo, ahora quiero que agreguemos una cláusula dinámicamente a cada una de esas etiquetas LI. Entonces para hacer eso, quiero usar la declaración IF de JavaScript. Quiero que digamos, bueno, si el objetivo, correcto, Es una de esas etiquetas LI. En primer lugar, su nombre de etiqueta tiene que ser igual a un aliado. Si el usuario hace clic entre los botones o a la derecha del botón y espacio vacío, quiero que no pase nada. Entonces es sólo si el usuario hace clic en una de esas etiquetas LI. Si ese es el caso, eliminemos el elemento seleccionado actualmente. ¿ Y cómo hacemos esto? Bueno, si el panel líquido, que encontraríamos lo anterior como nulo, si ese panel seleccionado no es igual a nulo, entonces sabemos que está activo. Sabemos que una de esas etiquetas está activa. Y en ese caso, lo que queremos hacer es querer acceder a nuestro panel. Fuimos a afectar su varilla garras. Y queremos hacerlo accediendo a esta API de lista de clases. Y ya hemos pasado por esto antes, pero tiene una propiedad llamada Toggle, que es muy, muy útil. Y queremos alterar una cláusula que acabamos de seleccionar aleatoriamente. De acuerdo, entonces ahora hemos eliminado el elemento seleccionado actualmente. El siguiente paso es terminar en el elemento actual que seleccionó. Queremos agregar la clase seleccionada. Entonces fuimos a agarrar nuestro lápiz. Y queremos definir eso como la tecnología aliada recién cliqueada. Y entonces lo último que queremos hacer es querer acceder a este panel líquido. Queremos acceder a la lista de clases API x es una propiedad llamada total. Y por supuesto queremos agregarle esto seleccionado. ¿ Eso tiene sentido? Vamos a nuestro navegador. Vamos a dar click en uno y mover nuestro ratón. Y se puede ver nuestro estilo CSS ha aplicado. Literalmente hemos editado esto dinámicamente y pinchamos en el otro cambia. Y para demostrártelo, lo que puedo hacer es abrir aquí la consola, y ahora pinchemos en este botón degenerado. Podemos ver y editar esa clase llamada seleccionada dinámicamente. Si hacemos click en la broma de comida ahora, Es editar el seleccionado cerca de eso y se lo quita de la otra. ¿ Qué tan impresionante es esto? Bien hecho? Y espero que estén siguiendo. Espero que estés encontrando fue más intuitivo. Perdón, sé que me estoy apresurando. Pero ya lo hemos hecho antes. Si tienes alguna pregunta, estoy muy, muy contenta de ayudar. Entonces, por favor, publíquelas en Q&A Pero espero que tenga sentido. Hemos recorrido un camino increíblemente largo. Pero ya sabes lo que esta conferencia es cada vez más larga, quiero que solo paren, pasen por lo que acabamos de aprender juntos. Y luego en la siguiente conferencia, ¿por qué lo terminamos? Va a ser épico. Ya te veo. 31. Mostrar y esconderle nuestros paneles al la pestaña de la hoja de la partida se hace:: De acuerdo, sigamos con nuestro código. Me estoy divirtiendo toneladas. Espero que debas hacerlo. El siguiente paso que queremos hacer ahora es que queremos encontrar el penal que queremos mostrar, ¿verdad? Porque estamos haciendo tictac en las pestañas de golpeo, pero nada se muestra debajo de ella. ¿ Cómo hacemos eso? Bueno, aún queremos estar dentro de la cuadra if, ¿no? Porque sólo queremos que esto suceda, Hay paneles para mostrar si realmente hemos hecho clic en un elemento aliado. Pero ahora es el momento de encontrar el panel que queremos mostrar. Y esta estudiantes de Medea es exactamente la razón por la que necesitábamos esa hija atributos. Es así como lo vamos a usar, sí define una variable JavaScript llamada panel de destino. Porque este es el penal objetivo. Si queremos mostrar al usuario, queremos acceder a nuestro objeto de documento en red. Queremos acceder a un selector de consultas. Y la consulta seleccionada el ítem que queremos buscar es el atributo hija. Y recuerda cuál es el atributo de datos. Es el artículo en el que hemos hecho clic. Recuerda, lo hemos definido como el blanco. Tenemos nuestro archivo de índice. Va a ser o la primera mesa aliada, segunda etiqueta LI. Hemos definido un atributo de datos llamado clicked, y o va a tener un valor de ID de gioco, hechos ideales. Y hemos dado el primer panel y ID de broma en el segundo panel, id de hechos. Entonces espero que eso tenga sentido por qué lo necesitábamos. Literalmente estamos encontrando su panel ahora que tiene el ID de su atributo de datos. A quien no te preocupes si no entiendes del todo, vamos a meternos en ello ahora. Lo siguiente que quiero hacer es que queremos recorrer esos paneles, ¿verdad? Y queremos asegurarnos de que el panel objetivo sea la penalización clara en. Y luego queremos editar cerca de ella. Y la clase que queremos agregar se llama activa y Bueno, si vamos a nuestro CSS y nos desplazamos aquí abajo, la clase de activo le da una propiedad display de bloque. Eso es lo que queremos hacer. Y si nos desplazamos hacia arriba en nuestro archivo JavaScript, recuerda en la parte superior definimos nuestros paneles en una variable llamada paneles. Acabamos de consultar a todos esos divs con una clase de panel. No te pierdas con todo el detalle. Todo lo que estamos haciendo en este momento, necesitamos determinar si el panel seleccionado actualmente es el que se muestra y permitirlo. Probablemente estás pensando que probablemente piensas cliente, si necesitamos empezar a recorrer los paneles, necesitamos convertir nuestra lista en una matriz. Por lo que tenemos acceso al para cada método. Si incluso empezaste a pensar en esas líneas, en serio, Bien hecho. Empezando a demostrarme que realmente te estás convirtiendo en un codificador muy, muy bueno. Murciélagos en esta instancia, es un poco único. Si vamos a desplazarnos hacia arriba aquí en nuestro archivo JavaScript y miramos la variable de este panel. Utilizamos un método de acceso llamado selector de consultas todos. Y la palabra clave aquí es todo. Cuando usamos esto, no devolvemos una HtmlCollection. Nos devuelven novelista. Y ninguna lista es bastante única porque aunque no es una matriz fuera de la caja, nos da acceso a la para cada función, que es realmente, realmente impresionante. Simplemente significa que podemos pasar por alto la conversión de nuestra lista a una matriz. Tendría sentido, pero volvamos a saltar de nuevo a nuestro código. De acuerdo, Entonces, ¿qué hacemos? Bueno, déjame decir aquí para ver que recuerdas, podemos usar el para cada función porque selector de consultas todo devuelve una lista de nodos. De acuerdo, Esperanza eso tiene sentido. Todo lo que necesitamos hacer entonces esta X es nuestra lista de nodos de paneles. Recuerda, sobre mí, sí tenemos acceso a esto para cada método directamente de la caja. Y pasemos por cada panel. Y no puede terminar su uso la nueva sintaxis de error para definir nuestro código. Todo lo que estamos queriendo hacer es que queremos chequear sin penalización es lo mismo que el panel objetivo. Y resta el panel de destino es el elemento que queremos mostrar al usuario. Si ese es el caso, lo que queremos hacer es querer acceder a nuestro panel con A1 para acceder a la API de lista de clases. Y queremos editar la pérdida. Y el costo que queremos agregar como activo. ¿ Verdad? ¿ Puedes creer que sea tan simple? ¿ De lo contrario? ¿Qué queremos que suceda? Eso es rocoso, probablemente lo adivinó. Todavía queremos acceder a la API de lista de clases, pero esta vez queremos eliminar la clase de activo. Espero que esto funcione porque de lo contrario me voy a quedar como tal mapeo. Entonces aquí vamos, aquí voy a pestañas. Hagamos click en broma de comida. Wow, ahí vamos. Vamos a dar click en Dino. Y bueno, sí, entonces, tan genial. Por favor celebre sus éxitos. Salta arriba y abajo, bombea algo de música. Hemos hecho mucho, mucho trabajo y esto se está haciendo bastante avanzado también. ¿ Qué tan impresionante es esto? Murciélagos? ¿ Sabes qué? Yo quería hacer una cosa más. No quiero que la respuesta se muestre así. ¿ Cómo se llama fideos falsos? Y en pasta, solo está mostrando lo que es un 12. ¿ Por qué no conviertes eso, intentas convertirlo o respondes a la porra. Y cuando el usuario hace clic en el botón, sólo nombrado como la pantalla de inicio. Piensa en cómo puedes hacer esto y por qué no sólo rápidamente tenemos una conferencia más. Y te mostraré cómo la escribía nuestra palabra y es muy, muy rápido. Ya verás, eso es rápido y asignación. Nos vemos en la próxima conferencia. 32. Añade un botón dinámico: Como mencioné, quiero que ahora no lo mostremos directamente. Quiero que agreguemos un botón cuando el usuario haga clic en un botón en un Hahn dice que se muestra en el SCADA HTML aquí, y vamos a desplazarnos hacia abajo para llamarlo fideos falsos es eliminar este párrafo. Yo quiero agregar ahora un bastón y esto nos da botón y ID de extranjeros muestran en televisores lo que hace. Y sólo podemos tener aquí la palabra respuesta. Y tengamos nuestra respuesta por debajo de nosotros. Esto se lo pone en una etiqueta de párrafo y le da una identificación de inicio. ¿ Cómo es que esa escorrentía puede estar vacía si vamos a nuestro navegador y hacemos click en broma de comida, ahí vamos. Ahí está nuestro botón. Es muy sencillo, pero obviamente ahora cuando entramos, no pasa nada. Entonces, ¿cómo íbamos a hacer esto? Bueno, esto es un JavaScript entra en la imagen. Volvamos a nuestro editor de codificación. Vamos a nuestro archivo JavaScript y lleva ahora. ¿Dónde estoy? Simplemente desplácese hasta aquí. Sí, ya no tenemos que estar con el evento inet click. Por lo que descarta todo este código y ahora es tratar con botón para mostrar el inicio. Va a ser muy sencillo. Lo primero que quiero hacer es, agarremos nuestro botón. Vamos a llamarlo Botón de inicio. Sabemos hacer esto. Documento. Obtener elemento por ID. Y la identificación que le dimos fue show onset. Entonces ahí vamos. Tenemos nuestro botón. Todo lo que necesitamos hacer ahora es añadir un oyente de eventos directamente, para que sepamos cómo hacerlo también. Accedemos a ATD llamado AdDeventListener. Con sobre eso, queremos escuchar los eventos de click. Y cuando se dispara el evento click, disparemos un manejador que llamamos inicio es definirlo mediante el uso de la palabra clave de función de JavaScript, que llamamos ahora inicio. Nos va a dar el evento. En realidad no lo necesitamos en esta instancia. Entonces déjame realmente borrar esto. ¿ Qué queremos hacer en este manejador? Piénsalo. Bueno, en primer lugar, queremos agregar una clase a este párrafo. De acuerdo, quiero editar dinámicamente, y también querré cambiar su contenido de texto. Yo quiero dar la respuesta, y luego quiero ocultar el botón. Entonces volvamos a nuestro archivo JavaScript y hagamos eso. Entonces, en primer lugar, acceda a nuestro documento, obtenga elemento por ID. Eso es bueno. Ese párrafo al que dimos una idea de inicio. Y agreguemos una cláusula más listas. Dentro de esa API tenemos una propiedad o método add y queremos darle una clase de azúcar. Y no te preocupes, vamos a darle estilo ahora. Hagamos lo mismo, pero ahora lo que quiero hacer es que quiero cambiar esto toma contenido. Por lo que consigue elemento por ID. Nosotros queremos conseguir el párrafo. Queremos cambiar su contenido toma. Y queremos que ese sea el inicio, que es un IM, pasta en tiempo pasado. Aquí vamos. Entonces, por último, agarremos nuestro botón de respuesta. Vamos a salir de la propiedad de estilo, su propiedad de visualización, y establecerla en ninguna. Entonces si vamos a nuestro navegador ahora, hacemos clic en broma de comida. Tenemos un botón, le damos click y obtenemos el inicio, woohoo. Es decir, vamos a marcarlo solo para que se vea un poco más bonito. Sabemos que hemos añadido esta lista de clases. Nos limitaremos a cláusula llamada más corta. Entonces todo lo que tenemos que hacer es entrar en nuestro styles.css. Sí. Y podemos salir del show. Es así de fácil. Podemos cambiar su color de fondo. Hagamos un bonito color amarillento. Esperemos que eso se vea bien. Podemos definir su ancho, un 100 pixeles. Podemos darle algo de relleno. Y vamos a darle una frontera sólo para rematarlo. Amarillo sólido. Yo lo quiero un poco más oscuro, la frontera. Esto, vamos a nuestro navegador. Y ahí vamos. Se ve bastante bien. Entonces si refrescamos broma de comida, ¿qué hacer fresco efecto fideos. Si el usuario hace clic en respuesta, nos devuelven a nosotros, un impostor. No puedo creer lo lejos que hemos llegado con un árbol. Simplemente sigue mejorando nuestra página paso a paso, en serio, y realmente tan divertido, espero que te estés divirtiendo porque realmente has aprendido mucha información útil que puedes usar para aplicar a tus aplicaciones web. Estoy súper emocionado, Walden, gracias por quedarse conmigo. Espero que hayan disfrutado de este curso una tonelada. Si tienes alguna pregunta, publblalas en Q&A, estoy aquí para ayudarte y seguir adelante, mantenerte motivado. Y nos vemos en la próxima conferencia. 33. Outro de clase y serie: BIEN SE DIDO: ¿ Quién podría ser esto realmente? ¿Es? Todas las cosas buenas llegan a su fin, ¿verdad? Sera. Sera, lo has hecho tan bien, lidera y tarde. ¿ Cuál es la versión femenina de las piernas? El derecho. Señoras y señores, muchas gracias, queridos alumnos. Nos estamos quedando conmigo a toda esta serie. Si esta es la primera clase que has oído hablar de la mía. Gracias. Gracias por los deportes. Yo me divertiría mucho porque en esta pérdida, construimos toda una lógica juntos. De verdad estaba bien. Y aplica muchas, si no todas, de las técnicas que te he enseñado en clases anteriores sobre esta serie DOM. Bueno, de verdad ha sido genial, ¿no? Y no den por sentado. Ya sabes lo que es la cúpula. Sabemos lo que es la bomba, no ahí un poco al hablar de la BOM, la bomba, ya sabes cómo el DOM es diferente a JavaScript y Python. Ya sabes acceder al DOM. ¿ Recuerdas esos métodos de x? Ya sabes atravesar en movimiento en el DOM. Recuerda usar las relaciones de padres, hijos, hermanos de nodos, ya sabes cómo funcionan los eventos, de dónde vienen. Ya sabes adjuntar oyentes de eventos a la página. Ya sabes escribir JavaScript con el fin de reaccionar a esas venas sin duda. Y por supuesto, en esta clase ahora sabes construir un proyecto. Entonces realmente espero que hayas aprendido una tonelada en este curso, pero me llevó mucho tiempo aprender lo que sentí en este circuito. ¿ De verdad Hubbard te propone un hub? Realmente hace que tu proceso de aprendizaje en la industria del desarrollo web sea mucho, mucho más rápido. Muchas gracias por todo su apoyo. Muchísimas gracias. Por favor deja una opinión si has disfrutado del curso, si no lo has hecho, avísame también y voy a tratar de mejorar. No estoy perfecto lejos de ello. Y antes de que terminemos, solo recuerda probar tu mano en la asignación. De esta manera escribe alguna asignación, esta fue una asignación. Diviértete mucho y espero verte algún día en una futura clase mía. Gracias. Gracias. Gracias. Y audios.