Inicio » Cursos » ReactJS Básico

Curso ReactJS Básico

Lección: 3 ➜ Agregando eventos con Javascript

A partir del código dado usaremos Javascript para agregar contenido al carrito, por lo que veremos temas como agregar hijos y eventos a elementos del HTML.

Lección 3: Agregando eventos con Javascript

En la primera lección habíamos agregado un padding alrededor del logo de codea, para entender cómo se puede manejar el dom con javascript, para ir avanzando con la parte visual del sitio he agregado mas codigo a nuestros archivos html y css; son un banner, un buscador, y lo más importante, un carrito, que tendrá la forma de una tabla desplegable en el sitio, dicha tabla está vacía ahora, pero la idea es llenarla, para ello usaremos la etiqueta tbody, junto con el id de la tabla, “lista carrito”; recuerda que puedes descargar el código en el adjunto al final de esta página.

Encontrar un elemento del HTML con querySelector.

En la variable “Todos los cursos” vamos a recuperar un elemento del html, con “document.querySelector”, usando como argumento un string, que será el id que buscamos en el html “#lista-carrito” pero tenemos que seguir con el tbody, porque ese tbody es uno de los hijos de lista-carrito; si ves la imagen a continuación notarás que en la consola, dentro de nuestro carrito, existe una tabla que como toda etiqueta table tiene un tbody que es el que recuperamos en la variable “Todos los cursos”;el tbody no se ve muy grande, esto es porque no tiene nada dentro, no hay ni una sola fila, y justo eso es lo que hay que hacer, empecemos creando una fila para nuestra tabla.

tbody

Crear contenido para el carrito.

En una constante llamada row, (row por “fila” en inglés) vamos a crear la etiqueta , porque recordemos que queremos llenar de contenidos una tabla html, y la etiqueta , tiene etiquetas internas para representar las celdas y las filas, es para las filas, ahora como se imaginaran sigue ponerle las celdas a esas filas, para ello podemos crear un elemento td como hicimos con el tr, para luego poner dicho td como hijo del elemento tr, pero dado que pueden ser muchas celdas, hacer eso con cada fila es engorroso, por ello es mejor simplemente recurrir a la propiedad “innerhtml”.

La propiedad innerHTML y los backticks.

Cada elemento html tiene una etiqueta de apertura y de cierre, hay excepciones como buton, pero la mayoría de elementos puede tener contenido dentro de los límites de sus etiquetas, ese contenido o es puro texto o son más etiquetas, como es nuestro caso, ahora con alt + 96 invocas a los backticks, caracteres especiales que nos permiten hacer un string multilínea, es decir cada enter será un salto de línea, ¿y para qué hacemos esto? pues para poder escribir directamente ahí las etiquetas que queramos; para nuestro caso colocaremos 4 celdas bien tabuladas.

Cada una de las celdas representará un valor importante, img, por ejemplo es la imagen del curso, luego el título del curso, el precio que tiene el curso y así, ojo que mas adelante adelante todo esto deberá ser obtenido dinámicamente, porque la idea es llenar esta tabla con: imagen, nombre y precio; como vimos los TD son las celdas y normalmente respetas la misma cantidad en cada fila, ¿agregar una 4ta columna será un problema? no, porque puede haber filas con distinta cantidad de celdas, y html se encargará de acomodarlas, ahora otra cosa que podemos hacer con los backticks es obtener el valor de una variable, porque en los backticks se leerá su contenido, esto es útil porque no necesitas concatenar la variable como normalmente se haría.

los backtics

Agregar hijos a un elemento con appendChild.

Dentro de todas las cosas que te permite hacer el manejo del dom en javascript, el appendChild es uno de los métodos que más usarás, dicho método está disponible en todos los objetos element, como lo es nuestra variable “todos los cursos”, y permite que le coloquemos un hijo al elemento que lo use, claramente el hijo que le vamos a agregar a “Todos los cursos” será row, (la fila que hicimos con los backticks); recuerda que row está usando su propiedad innerhtml por lo que su contenido será interpretado no como texto, sino como html, entonces en el carrito ya estará nuestra fila, con el nombre del curso, el precio y la equis, pero sin imagen porque deje el src vacío

Agregar eventos con addEventListener.

los event liseners son en pocas palabras, funciones que están registradas a un elemento, para ejemplificarlo, en el video se crea un elemento nuevo, llamado “button vaciar carrito” y se le iguala al botón que tenemos en la tabla desplegable de nuestro carrito, esto con el objetivo de poder borrar todos los cursos que estén dentro del carrito, por ahora el único curso que tenemos es el de nuestra otra constante row, pero la idea es llenar el carrito con los cursos que gustes, y debe haber un botón que borre todos los cursos de golpe, ese es el que vamos a buscar con “getElementById”, y el id que buscamos es “vaciar carrito”; entonces, una vez en el sitio, se marquen dos elementos, el botón que pone “vaciar carrito” es el que acabamos de capturar, pero dicho botón ahora mismo no funciona, aunque lo presionen no va a hacer nada, recuerden que lo capturamos en primer lugar para probar cómo funcionan los event listeners, asi que vamos con eso, voy a borrar este consol log para que solo quede el del botón. ahora, con javascript tenemos que esperar a que ciertos eventos ocurran en tu sitio web para que este empiece a funcionar, en nuestro botón vaciar carrito, vamos a usar el método addEventListener para justamente esperar que suceda un evento, ahora ¿cual evento? el que yo estoy buscando es click, que obviamente saltara cuando el usuario clique sobre el elemento, y ¿a qué me refiero con saltar? pues que debe haber una función que se disparé cuando suceda el evento, y esa función es “vaciar carrito” asi que como segundo parámetro del addeventlisener se pone el nombre de esa función; pero claro dicha función no existe así que tenemos que crearla, entonces escribimos: function, seguido del nombre de la función, que ya lo tenemos, seguido de paréntesis, y el contenido en llaves, lo que quiero hacer es crear un ciclo while que se mantenga constantemente revisando el contenido que hay en todos los cursos, eso se hace con la propiedad first child que nos da la referencia al primer hijo del elemento; mientras haya elementos, entraremos en este bucle, recuerden que la variable “todos los cursos”, es el tbody del carrito y tiene un hijo, row, que será detectado por la propiedad en cuestión, first child, ese primer hijo que tiene la variable todos los cursos se tiene que borrar para que el segundo hijo se convierta en el primero; ¿y como lo borramos? con removeChild() para ello tenemos que darlo como parámetro, pero ¿acaso tenemos su referencia? pues si la tenemos, es justo el elemento que se encuentre referenciado por el bucle en el momento, me refiero a que otra vez usaremos first child; se que no tenemos un segundo elemento, pero de haberlo, se convertiría en el primero como ya dije y ese se termina borrando haciendo que un tercer elemento, de existir se convierta en el primer elemento y así también sea borrado por removeChild(), todo esto es posible porque el bucle va a funcionar hasta que nos quedemos sin elementos hijos; una vez guardado el archivo y recargado el sitio, podemos ver el funcionamiento del botón, y como el botón ya funciona, se borrara todo el contenido del carrito, porque recuerda que gracias a nuestro bucle, si hubieran mas cursos en el carrito, también se borrarán; ahora, no porque la variable todos los cursos se quede sin hijos, deja de existir, no porque borremos su contenido, deja de existir, ahí estará lista para que le pongamos cursos nuevamente, pero eso lo dejaremos ya para la siguiente lección.


146 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023