La información que posean tus variables en el código Javascript, pueden ser procesadas y renderizadas hacia el DOM para visualizar la información en el navegador web y que el usuario pueda interactuar con los datos.
Creando código HTML con Javascript
El término "renderizar" hace referencia al proceso que lleva a cabo el navegador para leer el código HTML y CSS para posteriormente dibujarlo en el navegador. Con Javascript, puedes crear código HTML de forma dinámica y lograr que el navegador muestre esos datos dentro del DOM de una página web.
Una vez tengas los datos preparados en tu código Javascript.
let hipodoge =newMokepon('Hipodoge','./assets/hipodoge.jpg',5);let capipepo =newMokepon('Capipepo','./assets/capipepo.jpg',5);let ratigueya =newMokepon('Ratigueya','./assets/ratigueya.jpg',5);mokepones.push(hipodoge, capipepo, ratigueya);
Define dónde quieres mostrar los mismos en el código HTML. Para eso puedes crear un simple <div> con un ID para poder capturar el elemento con JS.
<divid="contenedorTarjetas"></div>
A continuación, captura el elemento con document.getElementById(). Utilizaremos una nueva función llamada forEach() que todos los arreglos poseen para poder iterar cada elemento del mismo. El término "iterar" hace referencia a recorrer los elementos de un array, uno por uno en el mismo orden en el que se encuentran.
// Capturamos el elemento en el HTMLconst contenedorTarjetas =document.getElementById('contenedorTarjetas');// Recorremos el array de mokeponesmokepones.forEach((mokepon)=>{const opcionDeMokepones =` <input type="radio" name="mascota" id=${mokepon.nombre} />
<label class="tarjeta-de-mokepon" for=${mokepon.nombre}>
<p>${mokepon.nombre}</p>
<img src=${mokepon.foto} alt=${mokepon.nombre}>
</label>
`; contenedorTarjetas.innerHTML+= opcionDeMokepones;});
Observa que dentro del forEach(), estamos declarando una función que recibe como parámetro una variable en singular llamada mokepon. Aquí encontrarás el objeto con sus atributos y la información que renderizaremos al HTML.
Dentro de esta función que se ejecutará una vez por cada iteración, estamos usando las comillas invertidas para escribir código HTML como si fuese texto simple. Este texto es procesado por Javascript y nos permite pasarle valores de variables a través de la sintaxis ${mokepon.nombre}.
De esta manera, puedes concatenar el código HTML generado por Javascript con el valor de las variables que necesites.
Finalmente, utiliza la propiedad innerHTML para insertar el código HTML en el DOM. Presta atención al += que nos permite concatenar cada iteración del array y que todos los datos se muestren correctamente.
Verás en el navegador web, los datos estructurados y renderizados desde el código Javascript.
Conclusión
El código HTML que escribes directamente en tus archivos .html, suele ser estático. Javascript es quién otorga la posibilidad de que la página tenga vida y la información que se muestre cambie a medida que el usuario interactúa con la aplicación, provoca algún evento o realiza la solicitud de nueva información.
Wow!! estuvo intensa esta clase, ¿no?. Fue como ir al gym por primera vez, te sale doliendo todo... pero con la satisfacción de estar mejorando, en este punto me siento tan satisfecho de aprender con grandes personas y de una manera tan clara, espero colocar en alto el nombre de PLATZI cuando esté trabajando en esta área.
Total, me da la impresión de que esta parte del curso te muestra la frontera donde se separa un junior de un senior ¡Muy buen proceso!
Súper! Nunca pares de aprender?
jajajajajaja
jajajaja ánimo 😂
Si no encuentras las comillas invertidas, con Alt 96 las puedes sacar.
maquina
Héroe
Si tienen el error Uncaught TypeError TypeError: Cannot read properties of null (reading 'checked') -> sigan a la siguiente clase 😆
por eso esta bueno primero leer los comentarios de los que ya han estado primero acá me la pase un rato largo tratando de averiguar que paso por que me salía ese error 😅
Jejeje estaba esperando a llegar allá, me hiciste spoiler
Aquí están las comíllas invertidas
`some text`(``)
Pueden copiarla y pegarla en su editor de código.
Tambien pueden crerlas con ALT GR + } 2 veces por alguna razón
Yo trabajo en un mac y las comillas invertidas las puedo poner con (Alt + la tecla encima del enter). Por si le sirve a alguien.
Estuve casi una hora buscando porque rayos no me salia la ratigueya JAJAJAJA. Al llamar el contenedor en lugar de llamarlo por ID lo estaba llamando por claseeeeee. JAJAJAJA toda mensa.
o je jeje
si pasa kajakjak
Seguramente al igual que tu, es mi primera vez aprendiendo todo esto y asi todo la clase no me resultó tan dificil ¿por qué?
Mi consejo:
No estudies unicamente por Platzi, usa otros soportes como cursos gratuitos de SOLOLEARN o documentaciones webs para irte empapando de conceptos que usan aqui escuetamente... como el caso de la declaracion de funciones usando =>
Lee y relee tu codigo, duplicalo y trastea el nuevo, cambialo y mira que sucede. Así puedes entender realmente que significa lo que estas escribiendo
Crea algún proyecto paralelo, muy sencillo, pero por muy fácil que parezca te traerá nuevos problemas que te obligarán a meterte a leer en StackOverFlow y a empaparte de los conceptos más básicos que se tratan aquí
excelente consejo poco a poco busque en youtube proyectos pequeños de css ya que no me salia las anteriores clases y si ahí vas aprendiendo y mejorando
Gracias bro! Yo estoy haciendo justo así, bueno el proyecto paralelo no aún porque llevaba era otro igual a este aparte pero lo dejé por allá muy atrás pausado, pero si todo concepto nuevo que escucho en la clase corro a investigarlo y esclarecerlo tomando apunte en mi cuaderno con ejemplos y todo. Coopilot me ha alludado mucho pero tampoco me quedo siempre con los ejemplos que él da sino que entro a las páginas buscar los ejemplos allí porque el Coopilot a veces falla con la sintaxis al escribir código. Pero si siento que estoy aprendiendo mucho, que voy entendiendo bien y que sino fuera porque me he datado mucho por aparte investigando por otros lados, si que yo creo que estuviera más perdido o iría bien, sin errores pero sin entender bien lo que he hecho ni comprender bien los conceptos. Un truco que me ha ayudado mucho también, es que siempre que aparece un concepto nuevo en la clase, como un nuevo método por ejemplo, lo traduzco al español, esto me ha ayudado mucho a entender bien que función es que hace en realidad. Lo traduzco e inmediatamente también lo investigo y tomo apunte de que trata y para que se usa, y trato de poner un ejemplo de uso.
Espero esto ayude también a otros que se estén sintiendo un poco perdidos. No hay como sentir que uno va aprendiendo entendiendo todo para seguir con más ánimo y sentir como crece más nuestra pasión por la programación como en mi caso.
¿Cuándo utilizar for o forEach?
Este bucle se suele usar en favor del bucle for cuando necesitamos encapsular código ya que pasamos una función como parámetro al bucle foreach.
En el canal de Platzi tienen un video sobre algoritmos hecho por Freddy vega se los recomiendo!
AQUI VIDEO
genial!!
en ves de crear los objetos desde HTML los creamos desde JavaScript, los iteramos para sacar las propiedades y generar la estructura HTML para después colocarla en el div
resumiste todo el video en tres lineas jajaja
Template Literals es un game-changer, es algo demasiado innovador y que cambio y mejoró absolutamente todo la manera en la que usamos JS desde su implementación en ES6.
Te dejo la doc de template literals oficial de la MDN
He tenido que repetir tres o cuatro veces esta clase y la anterior, dándole pausa seguido, para poder entender y tomar mis notas 🙃. Les comparto mis apuntes porque la verdad me costaron mucho y a mí me sirve "narrar" y escribir todo lo que hago, por qué y para qué. Ciclos: manipulando el DOM con iteradores | apunte de Marissa
No te rindas, lo importante es la perseverancia.
Muy buenos apuntes, gracias.
Recién me acabo de percatar que al profe el titulo le quedo Mokepono
jajajjajaj
XD?
Les recomiendo algo que me ha funcionado mucho para ir entendiendo, primero que nada ver las veces que sea necesario, pero por ejemplo en esta clase siento que la explicación de lo de forEach no fue la más clara, entonces siempre copio en mi cuaderno la función, clase o lo que sea que se esté aprendiendo y trato de entenderlo parte por parte, lo señalo, comento y pinto de diferentes colores si es necesario, personalmente me gusta hacerlo en papel pero si a ustedes les gusta pueden hacerlo digital. Eso me da mas claridad. Les dejo un ejemplo.
Tal así hago yo en mi cuaderno, me compré siete lapiceros de colores diferentes, tomo apuntes y paso literalmente el segmento de código del concepto nuevo que se esté explicando y lo trato de pasar al cuaderno cien los mismos colores que me sale en el editor y le voy señalando que es cada parte del segmento con flechas y mensajitos, y a algunos no sólo les pongo que es sino también que realiza en el código.
Este curso va más allá de lo básico!! Es una completa joya. Gracias a todo el equipo de Platzi que hizo realidad este regalo. 🙌💚
gente no se pasen por alto que si editan el html tienen que guardar ahí, igual en el js.
si se les hace mas comodo pueden activar la opcion de autoguardado de VS CODE esta en la pestaña File o Archivo en la esquina superor izquierda Autoguardado o Auto - Save , con esto ya no es necesario estar guardando y si te quivocas solo regresas con CTRL + Z hasta que funcione tu codigo nuevamente.
Saludos!!!
Total, me salía un error y duré un rato el berraco buscando que era lo que lo estaba causando y me frustraba revisando una y otra vez que todas las líneas estaban bien tanto en HTML como en JavaScript, hasta que por fin caí en cuenta y di guardar en las dos ventanas y ahí si se me desapareció el error, todo era porque el último cambio en HTML sino lo había guardado.
Estoy muy perdido, porque la palabra mokepon es usada dentro del forEach? es una nueva variable?
porque antes habia puesto mi clase de objeto y se habia dañado el juego, solo fue cambiar la M por la m y ya funciono
de por si e estado leyendo sobre forEach pero no logro entenderlo
Yep. Es una nueva variable. Utilizando el método forEach creamos una función que recibe a cada elemento del array (en este caso, cada mokepon del array de mokepones). :D
Hola! creo que he llegado a entenderlo de una u otra manera, testeando y leyendo MDN.
,
Esta nueva variable es llamada callback y es la función que se va a ejecutar por cada elemento del array. Es una variable pero a lo que hace referencia es a cada elemento del array, como se puede ver en el siguiente ejemplo:
,
,
Entonces usando una traducción parecida a la del profesor este código sería: 'Por cada elemento de array1 haz un console.log a cada elemento del array).
,
La variable element o como la quieras llamar - en el caso del ejercicio mokepones - siempre tomará como valor el elemento del array que está iterando (en la primera vuelta mokepon = hipodoge, en la segunda mokepon = capipepo, etc.).
,
Esto lo comprobé cambiando el nombre de la variable mokepon al de element y código seguía funcionando (independientemente del problema de la selección de los inputs).
,
,
Cabe aclarar que es mi forma de entenderlo y recién estoy comenzando en el mundo de la programación como ustedes. Cualquier error en mi explicación es más que bienvenida.
,
Saludos!
a mí me da miedo que el profe diga esto tu ya lo sabes hacer y que yo no sepa xd
jajaja me pasa casi todas las clases, "si claro entonces esto como ya lo sabemos hacer" jaja yo 🙄🙄
Mis apuntes de esta clase:
Metodos
.forEach -> Por cada objeto existente en el arreglo haz algo( por cada mokepon que existe en nuestro arreglo de mokepones, haz lo siguiente: tomar la info de cada uno de los objetos para inyectarlo en html)
.innerHTML -> Imprime todos los elementos por la iteración de los objetos
PASOS PARA INYECTAR INFO
Generar variable para guardar la estructura de html que hacemos en javascript
Templates literarios
Comilla invertida (`): Se usa para escribir la estructura de html que deseamos inyectar.
Para inyectar el valor de cada propiedad reemplazar el nombre del mokepon por ${mokepon.nombre}
Generar un id en html, generar const en javascript para llamar el id.
Utilizar metodo .innerHTML
Los template literals, que en español podríamos llamar “plantillas literales”, se encierran en “backticks” o apostrofes ``
Lo que hay dentro de los backticks basicamente es una string, pero esta string nos va a tomar incluso los saltos de linea y absolutamente todo lo que hay dentro de los backticks, tal y como aparece dentro de los backticks, de esta manera podemos dejar de usar las comillas dobles y tener que concatenar cerrando y abriendo comillas dobles, una y otra vez.
Cuando queremos reemplazar algo dentro de la plantilla literal, como por ejemplo concatenar el valor de una variable colocamos el simbolo de dolar y el nombre de la variable dentro de llaves de la siguiente manera: ${nombreDeLaVariable}
Ejemplo al concatenar con comillas dobles:
let pokemon = capipepo;
alert("Hola " + capipepo “, Bienvenido al juego”);
Esto nos va a mostrar una alerta con el siguiente mensaje:
Hola capipepo, Bienvenido al juego
Ejemplo al usar los backticks para crear una plantilla literal:
let pokemon = capipepo;
![](
Esto nos va a mostrar en la una alerta con el siguiente mensaje:
Hola capipepo,
bienvenido al juego
Como explicaba arriba al crear una plantilla literal nos toma el texto tal y como aparece, incluyendo los saltos de línea, espacios etc.
Espero a alguien más le sirva esta explicación para entenderlo ya que tuve que realizar una pequeña investigación.
Excelente explicación! Muchas gracias.
Me lo enseñó bien! En mi siguiente sección de estudio de este video iba a sacar este concepto del "template literal" e investigarlo, ahora cuando busque la información ya sabré exactamente que es y porque se usa.
Que bueno que uno también aprende un montón y entiende muchas más cosas leyendo los comentarios de los compañeros!
porque se pone un innerHTML + ??? porfavor
¡Para que no se borre el contenido de antes, sino que se agregue algo más al final! :D
Juan David, digamos que en este caso da el mismo resultado que un appendChild?
