Hoy vamos a hablar de objetos en javascript, asi como les voy a presentar una forma util de aplicarlo a un pagina web. OK, pero porque vamos a usar objetos para popular una pagina.
Imagina que tienes un sitios web. En ese sitio web tienes paginas que actualizas con frecuencia, agregándole contenido nuevo. O que en tu trabajo, trabajas con paginas web a las que tienes que agregarle contenido y actualizar el contenido ya existente. Debido a tu nivel en la compañía, solo puedes usar HTML, CSS, y JavaScript. Bueno, lo bueno es que con solo eso puedes agregar contenido dinámico a las paginas usando objetos mediante JavaScript y hacer que tus paginas sean mas fáciles de mantener, y mas rápidas de cargar.
Hoy lo que vamos a aprender es sobre objetos.
Que Son los objetos en JavaScript
En JavaScript, un objeto es un entidad independiente con propiedades y tipos. Lo podrías comparar con cualquier cosa en la vida real. Un ejemplo es tu teléfono. Tu teléfono, por ejemplo, tiene un tamaño de pantalla, un color, un fabricante, velocidad, memoria, etc. Todo esto se pueden definir como propiedades de tu teléfono. De la misma forma, un objeto en JavaScript posee propiedades, así como métodos que te permiten iniciar y detener dichas propiedades.
Para no hacer el contenido tan aburrido, voy a presentar las forma en la que pienso usar objetos en este proyecto y continuar con la creación de la pagina. Si deseas conocer un poco mas sobre como trabajar con objetos, puedes hacer una parada w3school.
Crear un objeto
Los objetos en javascript se pueden crear tan simple como crear una variable.
let telefono = "Telefono";Ahora si queremos agregarle propiedades al objeto, lo hacemos de esta forma:
const telefono = {tipo:"smartphone", color:"negro", modelo:"apple 13 pro"};Si deseamos agregar multiples opciones al objeto para tener varia de productos podemos hacer esto:
const telefono = {
{tipo:"smartphone", color:"negro", modelo:"apple 13 pro"},
{tipo:"smartphone", color:"blanco", modelo:"samsung j7"}
};y para acceder a las propiedades, lo podemos hacer con solo llamar la propiedad del objeto:
/*primera forma*/
telefono.tipo;
/*segunda forma*/
telefono["tipo"];Nuestra pagina web
Ahora, como seria en nuestra pagina web para agregar contenido. Estamos creando una lista en nuestra pagina que debemos mantener, eliminar y agregar contenido a la misma. Supongamos que mi pagina tendrá una lista de productos que debemos mantener actualizada. Nuestra lista de productos no es completamente dinámica, es mas como productos que vamos a regalar como premios. Pero dichos productos cambian, se actualizan y también, se agregan nuevos. Con esto en mente crearemos un objeto con ciertas propiedades, Asi como el HTML simple que vamos a utilizar.
HTML
<section>
<h1 style="text-align: center;">titulo</h1>
<div id="wingrid">
<hr>
<div id="windox"></div>
<hr>
</div>
</section>JavaScript
const winproduct = [
{nombreP:"Pintura Labial", imageP:"images/product00.jpg", winnerP:"Jose Perez"},
{nombreP:"Producto 01", imageP:"", winnerP:"Juan Perez"},
{nombreP:"Pintura Labial", imageP:"images/product02.mp4", winnerP:"Jose Perez"},
...
{nombreP:"Pintura Labial", imageP:"images/product02.mp4", winnerP:"Jose Perez"}
];Con nuestro objeto creado, vamos a declarar la variable que incluira todo el contenido. En mi caso llamare a un contenedor «DIV» con clase «bigwinner«.
const wingrid = document.getElementById("wingrid");Lo siguiente sera crear una iteracion por nuestro objeto. Y dentro vamos agregar las propiedades del producto en un contenedor que crearemos. Esto lo haremos usando el metodo forEach. dentro crearemos un contenedor div al que agregaremos html con el contenido de los productos. Luego agregaremos ese contenido a la variable wingrid. Recuerda de cambiar la direccion de las imagenes dentro de la etiqueta <img src=»…» … />.
winproduct.forEach(el => {
const windox = document.getElementById("windox");
const imgBase = '<img src="images/watercolor.jpg" alt="EL Ganador del ' + el.nombreP + ' es ' + el.winnerP + '" width="100%" />';
const imgPro = '<img src="' + el.imageP + '" alt="EL Ganador del ' + el.nombreP + ' es ' + el.winnerP + '" width="100%" />';
const videoPro = '<video src="'+ el.imageP +'" width="100%" autoplay muted loop width="100%"></video>';
mainbox.classList.add('mainbox');
mainbox.innerHTML = '<div class="phead"><h1>Premio ganado '+ el.nombreP +'</h1></div><div class="pbody">'+ mediaP()+'</div><div class="pfooter"><h2>El ganador es '+ el.winnerP +'</h2></div>';
windox.appendChild(mainbox);
}Para generar las imagenes en las cajas agregaremos al forEach la siguiente funciones. Una va a presentar las imagenes. La otra, va a seleccionar cual usar, si es un video o foto.
winproduct.forEach(el => {
...
function mediaP(){
if(el.imageP === ''){
return imgBase;
}else{
return mediaPVal(el.imageP);
}
}
...
}Y la ultima funcion es mediaPVal la cual dejo abajo
winproduct.forEach(el => {
...
function mediaPVal(url){
if(url.endsWith(".jpg") || url.endsWith(".jpeg") || url.endsWith("gif")){
return imgPro;
}else if(url.endsWith(".mp4")){
return videoPro;
}
}
}Para terminar vamos a agregar el estilo y ya tendremos todo listo.
<style>
#windgrid{padding-bottom: 15px;}
#windox{display: block;}
@media screen and (min-width:768px) {
#windox{display: grid; grid-template-columns: 50% 50%;}
}
@media screen and (min-width:1200px) {
#windox{display: grid; grid-template-columns: 33.333% 33.333% 33.333%;}
}
.mainbox{position: relative; text-align: center;border: 1px solid lightgrey;margin: 10px 5px;min-height: 300px;border-radius: 15px;}
.phead{position: absolute;top: 0;left: 0;width: 100%;background-color: blueviolet;color: white;border-radius: 15px 15px 0 0;}
.pbody >img, .pbody >video{border-radius: 15px;}
.pfooter{position: absolute;bottom: 0;width: 100%;background-color: blueviolet;color: white;border-radius: 0 0 15px 15px; min-height: 4rem;}
</style>Y con esto ya tenemos todo lo necesario, espero le guste este post y si tienen alguna duda dejeme un comentario al respecto.
Gracias y hasta el proximo tutorial.
Chao.
