✨ Una clase nos permite definir una colección de objetos permitiendo que estos posean los mismos atributos y métodos.
Empieza por acá
Mi primera línea de código
Fundamentos de Programación
¿Qué es HTML/CSS/JS?
JavaScript no es Java
Primeros pasos en el navegador con alert
HTML, CSS, JavaScript de verdad
Los apuntes de Freddy en PDF
Primer proyecto: Peso en otro planeta
Peso en otro planeta
Obteniendo datos del usuario
Flujo y condicionales
Segundo proyecto: Dibujando con Canvas
Cómo funcionan Window y Document
El DOM: nuestro lugar de trabajo en la web
Dibujando en el DOM
Qué son las Funciones en JavaScript
Ciclos while y for en JavaScript
Eventos y Formularios en HTML y JavaScript
Detectar eventos del teclado con JavaScript
Dibujar en canvas con las flechas del teclado
Tercer proyecto: Villa platzi
Funciones matemáticas y números aleatorios en JavaScript
Uso y carga de imágenes en Canvas
Cuarto proyecto: Pakimanes
División, módulo y residuo en JavaScript
Clases y Arrays en JavaScript
Quinto proyecto: Cajero automático
Diagrama de Flujo del Cajero Automático
Implementación del Cajero Automático
Sexto proyecto: Cliente/Servidor
Modelo Cliente/Servidor
Primer servidor web con express
Programación de Hardware y Electrónica con Arduino
¿Cómo funciona un circuito electrónico?
¿Cómo programar un Arduino?
Programación de circuitos con C, Arduino y Sketch
Cómo programar un Arduino con Javascript y Node
Construye un Robot con JavaScript
Robot para riego de plantas en Arduino, Javascript y Node
Materiales de apoyo
Las mejores notas de los estudiantes
¿Cuál lenguaje de programación aprender primero?
La Web con Visión Profesional
Contenido Bonus
Qué son tablas de verdad y compuertas lógicas
Recap Curso Gratis de Programación Básica
Recap Programación básica
Recap Programación básica ENG
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Clases y Arrays en JavaScript
21/37Recursos
Javascript es uno de los lenguajes en los que se aplica la programación orientada a objetos (OOP en sus siglas en inglés), la cual se crea a partir de una clase. En esta clase se definen las características del objeto o atributos y sus capacidades o métodos.
Elementos de las clases en JavaScript
Así como otros lenguajes, este concepto conlleva lo siguiente:
Objeto
Una instancia de una Clase.
Propiedad
Una característica del Objeto, como el color.
Método
Una capacidad del Objeto, como caminar.
Constructor
Es un método llamado en el momento de la creación de instancias.
Herencia
Una Clase puede heredar características de otra Clase.
Encapsulamiento
Una Clase solo define las características del Objeto, un Método solo define cómo se ejecuta el Método.
Abstracción
La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.
Polimorfismo
Diferentes Clases podrían definir el mismo método o propiedad.
Contribución creada por: Manuel Bojato
Aportes 1076
Preguntas 272
Ordenar por:
Después de un día de trabajo, pude mejorar el ejercicio:
Aprendí a implementar clases, bucles con arrays, y a añadir elementos HTML mediante código JS.
De paso aprendí algo de CSS.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pokemon de inicio</title>
<link rel="stylesheet"type="text/css" href="pokemon.css">
</head>
<h1>¿A quién elegirías si pikachu no es alternativa?</h1>
<body>
<script type="text/javascript"src="pokemonClases.js">
</script>
<script type="text/javascript"src="pokemon.js">
</script>
</body>
</html>
JAVASCRIPT CLASES
// DEFINIENDO LA CLASE POKEMON
class Pokemon {
constructor(nombre,vida,ataque,defensa,ataqueEspecial,
defensaEspecial,velocidad){
this.imagen = new Image(); /*
Importante que en esta línea se guarda como atributo
de la clase pókemon un elemento imagen HTML.*/
this.nombre = nombre;
this.vida = vida;
this.ataque = ataque;
this.defensa = defensa;
this.ataqueEspecial = ataqueEspecial;
this.defensaEspecial = defensaEspecial;
this.velocidad = velocidad;
this.imagen.src = imagenes[this.nombre];/*
En esta línea se guarda la ruta en la propiedad src del
elemento imagen HTML*/
}
hablar (){
alert (this.nombre);
}
mostrar(){
var nuevaDiv= document.createElement('div');/*
En esta línea se crea una división (etiqueta Div).
A esta etiqueta por medio del método appendChild()
agregaré un título, saltos de línea, la imagen, y
ésta será anexada al body, el tronco principal. Las
Div´s serían como las ramas.
*/
var divCabecera = document.createElement('h2')
divCabecera.innerHTML = this.nombre +'<br> Stats';
divCabecera.setAttribute("class","cabeceraCajas")
var saltoLinea = document.createElement('br')
nuevaDiv.appendChild(this.imagen);
nuevaDiv.appendChild(saltoLinea);
nuevaDiv.appendChild(divCabecera);
document.body.appendChild(nuevaDiv);
// creando tabla
var coleccion = {
'Vida': this.vida,
'Ataque': this.ataque,
'Defensa': this.defensa,
'Ataque Especial': this.ataqueEspecial,
'Defensa Especial': this.defensaEspecial,
'Velocidad': this.velocidad,
}; /*
Este array solo sirve para disminuir las líneas de código
más adelante. Es más fácil utilizar un "for-in" que siete
líneas de texto añadiendo texto de las celdas "tr" y "td",
y también es más fácil de leer.
El método es sencillo:
a) se crea la etiqueta HTML tabla
b) se crea la etiqueta HTML tbody
c) se crean un bucle dónde se crean las etiquetas TR y
TD con los datos que necesitamos que presenten,
auxilíandonos de la CLASE y el Array
d) Anexar las etiquetas TR y TD al tbody, y el tbody a
a la etiqueta tabla.
*/
var tabla = document.createElement('table');
var tbody = document.createElement('tbody');
for (var stat in coleccion) {
var filaTexto = '<tr><td> '+stat+' </tr></td><tr><td>\
'+coleccion[stat]+' </tr></td>';
var fila = document.createElement('tr');
fila.innerHTML = filaTexto;
tbody.appendChild(fila);
};
tabla.appendChild(tbody);
nuevaDiv.appendChild(tabla);
}
};
JAVASCRIPT CÓDIGO
// Colección de imágenes, se indexó la ubicación
var imagenes=[];
imagenes["Bulbasaur"] = "Bulbasaur.png";
imagenes["Charmander"]= "Charmander.png";
imagenes["Squirtle"]= "Squirtle.png";
// array que sirve para correr el ciclo "for-in".
var pokedex = [];
pokedex.push(new Pokemon("Bulbasaur",45,49,49,65,65,45));
pokedex.push(new Pokemon('Charmander',39,52,43,60,50,65));
pokedex.push(new Pokemon('Squirtle',44,48,65,50,64,43));
// bucle para mostrar todos los objetos de la clase Pókemon
for (var i in pokedex){
pokedex[i].mostrar();
}
CSS
body {
background: url(Pokemon_background.png);
background-size: cover;
}
h1 {
text-align: center;
text-shadow: 1px 1px 1px black;
-webkit-text-stroke: 1px blue;
font-size: 4.3em;
color: #fdd666;
}
div {
background: rgba(255, 255, 255, 0.5);
color: black;
height: 500px;
width: 400px;
font-size: 20px;
float: left;
margin-left: 50px;
margin-top: 0px;
margin-bottom: 50px;
text-align: center;
}
table{
border-collapse: collapse;
width: auto;
margin: auto;
}
td, th {
border: 1px black;
padding:2px;
text-align: left;
}
img {
width: 200px;
height: 200px;
}
h2.cabeceraCajas {
font-weight: bold;
}
};
creo que soy el único que mira 2 horas el vídeo, y la duración es de 45 minutos :p
No es en si el ejercicio, pero queria comentar que la primera vez que vi esta clase hace ya varios meses, me inspiro a hacer mi propia Pokedex y hoy puedo decir que esta casi terminada (Salvo el cross-browser) y queria compartirla con ustedes. Todos podemos aprender y crear cosas increibles. Pokedex ^^
Hago mi aporte de los animales modificados con los poderes y nombre que inventé:
Lobolbasaur:
Vacuartle:
Pollormander:
Y…
Cerdachu:
Cuando te salió el código y no sabes ni como
De pequeño jugaba el Pokemon Red así que no pude evitar las ganas recrear el diseño del juego original 😄
Todo lo armé con Tablas (la vieja confiable xD). Creé una Clase que maneja la interface (La navegación es con las flechas del teclado para subir y bajar. Enter y Esc para entrar y salir). Reemplacé las imágenes .webp por .gifs de internet. También agregué efectos de sonidos. Acá les dejo el link para que lo vean en vivo:
www. alain .pro/lab/pokemon_pokedex_interface/
Unos screens del código, seguro verán algunos espaciados extraños que le he dado para ayudar a la legibilidad. Creen que esté bien o debería dejarlos como viene por defecto?
Aquí les pongo todo el código en GitHub
github .com/alainrodriguezz/pokemon_simple_html_interface
Hola. Si a alguien no le quedó claro por qué se coloca this.variable ; se coloca así por que, como dijo Freddy, si tienes 2 variables, una dentro y otra fuera de una clase, las dos tienen el mismo nombre, Js las podría confundir (por que tienen el mismo nombre), entonces lo que hace el this es especificar que esa variable que se encuentra dentro de la clase (con this) es una clase distinta a la que está por fuera y por lo tanto tienen valores distintos y son para diferentes cosas.
this es la forma de declarar una variable dentro de una clase, al igual que var es para declarar una variable fuera de una clase.
Espero haberles ayudando 😄, muchos éxitos!
Aquí mi aporte, agregándole mas personajes y un poco de diseño. Agregué el botón de seleccionar un pakiman, y al hacerle click, manda un mensaje diciendo cuál personaje es el que elegiste.
Al seleccionar un pakiman:
Código:
HTML:
Clase pakiman JS:
Pakiman app JS:
CSS:
Apuntes de clase:
- clase: es la definicion de un objeto (es un tipo de dato que define un conjunto de variables y metodos para un objeto declarado).
- objeto: Un objeto es un entidad concreta basada en una clase, y aveces se la denomina instancia de una clase.
- constructor: Métodos especiales que se utilizan para inicializar objetos y se invocan en el momento de la creación del objeto.
- this: es un indicador de la instancia de donde estoy.
- Array: es como si una varialble tuviera cajitas, podemos tener cuantas cajitas queramos y cada una de ellas puede tener un valor diferente.
- otra definicion de array: Un array es una estructura de datos que es utilizado para almacenar una colección de datos. Puedes imaginarlo como una colección de variables del mismo tipo.
- aray asociativo: cuando la posicion de la cajita no es un numero sino un string (una cadena de texto).
Recuerda: - in itera en el indice.
- of itera sobre el objeto.
- Dentro de una clase podemos hacer funciones pero ya no escribimos la palabra function solo el nombre y los pararentesis ejem: miFuncion();
Aquí os dejo mi aporte, aplicando los mismos elementos, pero desde otro enfoque:
Se trata de un generador de personajes de fantasía épica. Hay 6 clases distintas de personajes, cada una con su imagen y sus bonificadores de características. Podremos seleccionar y cambiar entre las distintas clases con las flechas de “ANTERIOR” y “SIGUIENTE”. Podremos establecer el nombre de nuestro personaje. Podremos también generar puntuaciones aleatorias para las características de nuestro personaje (FUERZA, DESTREZA, CONSTITUCION, INTELIGENCIA) que irán cada una desde 1 hasta 10, + los bonos de cada característica de cada clase (ejemplo: mago +4 inteligencia y +1 destreza); finalmente la suma de todas las características SIEMPRE SUMARÁN 25 para que los personajes estén equilibrados. Podremos volver a generar las puntuaciones de un personaje cuantas veces queramos. Una vez que tengamos unas características que nos gusten podremos guardar a nuestro personaje para que no se nos pierda y crear otro distinto de la clase que queramos. Podremos crear y guardar TODOS LOS PERSONAJES QUE QUERAMOS, y cuando queramos ver nuestros personajes guardados solo tendremos que darle a “CARGAR” y se mostraran en orden con todas sus características debajo del creador. Podremos seguir creando y añadiendo personajes a la lista y mostrándolos cuanto queramos sin perder los anteriores. Por último, si queremos eliminar los personajes guardados y empezar de 0 solo tendremos que pulsar la tecla “LIMPIAR”, lo cual eliminará todos los personajes guardados y limpiará la pantalla.
TENGASE EN CUENTA QUE TODAS ESTAS ACCIONES ANTERIORMENTE MENCIONADAS SE REALIZAN SIN RECARGAR LA PAGINA.
PD: el método “document.write” no sirve para páginas ya cargadas, pues por defecto ejecuta la recarga de un nuevo documento en blanco, por los que para cargar tanto los textos como los las imágenes hay que utilizar “parent.appendChild”.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Generador de personajes</title>
<style media="screen">
body
{
background-color: grey;
}
canvas
{
background-color: white;
}
</style>
</head>
<body>
<h1><strong>Generador de personajes</strong></h1>
<p>Vamos a generar personajes en función a su clase</p>
<p><strong>Nombre : <input type="text" id="nombreHtml" value=""></strong></p>
<p><strong>Clase : <input type="button" id="botonAnteriorHtml" value="ANTERIOR"> <input type="text" id="claseHtml" value=""> <input type="button" id="botonSiguienteHtml" value="SIGUIENTE"></strong></p>
<p><input type="button" id="botonGenerarHtml" value="GENERAR"> <input type="button" id="botonGuardarHtml" value="GUARDAR"> <input type="button" id="botonCargarHtml" value="CARGAR"> <input type="button" id="botonLimpiarHtml" value="LIMPIAR"></p>
<canvas id="canvasImagenHtml" width="500" height="500"></canvas>
<p><strong>FUERZA : </strong><input type="text" id="fuerzaHtml" value="0"></p>
<p><strong>DESTREZA : </strong><input type="text" id="destrezaHtml" value="0"></p>
<p><strong>CONSTITUCIÓN : </strong><input type="text" id="constitucionHtml" value="0"></p>
<p><strong>INTELIGENCIA : </strong><input type="text" id="inteligenciaHtml" value="0"></p>
<script type="text/javascript" src="generadorPersonajesJava.js"></script>
</body>
</html>
alert("Funciona");
var nombreTexto = document.getElementById("nombreHtml");
var claseTexto = document.getElementById("claseHtml");
var botonAnterior = document.getElementById("botonAnteriorHtml");
var botonSiguiente = document.getElementById("botonSiguienteHtml");
var botonGenerar = document.getElementById("botonGenerarHtml");
var botonGuardar = document.getElementById("botonGuardarHtml");
var botonCargar = document.getElementById("botonCargarHtml");
var botonLimpiar = document.getElementById("botonLimpiarHtml");
var canvasImagen = document.getElementById("canvasImagenHtml");
var lienzo = canvasImagen.getContext("2d");
var fuerzaTexto = document.getElementById("fuerzaHtml");
var destrezaTexto = document.getElementById("destrezaHtml");
var constitucionTexto = document.getElementById("constitucionHtml");
var inteligenciaTexto = document.getElementById("inteligenciaHtml");
class Clase
{
constructor(nom,url,fue,des,con,int)
{
this.nombre = nom;
this.imagen = new Image;
this.imagen.src = url;
this.imagen.cargado = false;
this.bonoFuerza = fue;
this.bonoDestreza = des;
this.bonoConstitucion = con;
this.bonoInteligencia = int;
}
}
var bardo = new Clase("BARDO","Bardo.png",0,3,0,2);
var picaro = new Clase("PICARO","Picaro.png",0,4,0,1);
var enano = new Clase("ENANO","Enano.png",2,0,3,0);
var explorador = new Clase("EXPLORADOR","Explorador.png",1,3,1,0);
var guerrero = new Clase("GUERRERO","Guerrero.png",2,1,2,0);
var mago = new Clase("MAGO","Mago.png",0,1,0,4);
var clases = [];
clases[0] = bardo;
clases[1] = picaro;
clases[2] = enano;
clases[3] = explorador;
clases[4] = guerrero;
clases[5] = mago;
bardo.imagen.addEventListener("load",cargarImagenBardo);
picaro.imagen.addEventListener("load",cargarImagenPicaro);
enano.imagen.addEventListener("load",cargarImagenEnano);
explorador.imagen.addEventListener("load",cargarImagenExplorador);
guerrero.imagen.addEventListener("load",cargarImagenGuerrero);
mago.imagen.addEventListener("load",cargarImagenMago);
function cargarImagenBardo()
{
bardo.imagen.cargado = true;
}
function cargarImagenPicaro()
{
picaro.imagen.cargado = true;
}
function cargarImagenEnano()
{
enano.imagen.cargado = true;
}
function cargarImagenExplorador()
{
explorador.imagen.cargado = true;
}
function cargarImagenGuerrero()
{
guerrero.imagen.cargado = true;
}
function cargarImagenMago()
{
mago.imagen.cargado = true;
}
var claseActual = 0;
clases[claseActual].imagen.addEventListener("load",seleccionarClase);
function seleccionarClase()
{
claseTexto.value = clases[claseActual].nombre;
if (clases[claseActual].imagen.cargado == true)
{
lienzo.drawImage(clases[claseActual].imagen,0,0);
}
}
botonAnterior.addEventListener("click",claseAnterior);
botonSiguiente.addEventListener("click",claseSiguiente);
function claseAnterior()
{
if (claseActual > 0)
{
claseActual = claseActual - 1;
lienzo.clearRect(0,0,canvasImagen.width,canvasImagen.height);
seleccionarClase();
}
}
function claseSiguiente()
{
if (claseActual < 5)
{
claseActual = claseActual + 1;
lienzo.clearRect(0,0,canvasImagen.width,canvasImagen.height);
seleccionarClase();
}
}
botonGenerar.addEventListener("click",generarCaracteristicas);
function generarCaracteristicas()
{
var fuerzaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoFuerza;
var destrezaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoDestreza;
var constitucionProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoConstitucion;
var inteligenciaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoInteligencia;
var totalCaracteristicas = fuerzaProvisional + destrezaProvisional + constitucionProvisional + inteligenciaProvisional;
if (totalCaracteristicas == 25)
{
fuerzaTexto.value = fuerzaProvisional;
destrezaTexto.value = destrezaProvisional;
constitucionTexto.value = constitucionProvisional;
inteligenciaTexto.value = inteligenciaProvisional;
}
else
{
generarCaracteristicas();
}
}
class Personaje
{
constructor(nom,clas,img,fue,des,con,int)
{
this.nombre = nom;
this.clase = clas;
this.imagen = img;
this.fuerza = fue;
this.destreza = des;
this.constitucion = con;
this.inteligencia = int;
}
}
var personajes = [];
var personajesGuardados = 0;
botonGuardar.addEventListener("click",guardarPersonaje);
function guardarPersonaje()
{
personajes.push(new Personaje(nombreTexto.value,clases[claseActual].nombre,clases[claseActual].imagen,fuerzaTexto.value,destrezaTexto.value,constitucionTexto.value,inteligenciaTexto.value));
personajesGuardados = personajesGuardados + 1;
}
var parrafos = [];
var imagenesInsertadas = [];
botonCargar.addEventListener("click",cargarPersonajes);
function cargarPersonajes()
{
if (personajesGuardados > 0)
{
for(var posicion in personajes)
{
parrafos.push(document.createElement("p"));
parrafos[posicion].innerHTML = "<strong>NOMBRE : </strong>" + personajes[posicion].nombre + "<br>" + "<strong>FUERZA : </strong>" + personajes[posicion].fuerza + "<br>" + "<strong>DESTREZA : </strong>" + personajes[posicion].destreza + "<br>" + "<strong>CONSTITUCION : </strong>" + personajes[posicion].constitucion + "<br>" +"<strong>INTELIGENCIA : </strong>" + personajes[posicion].inteligencia;
imagenesInsertadas.push(personajes[posicion].imagen);
document.body.appendChild(imagenesInsertadas[posicion]);
document.body.appendChild(parrafos[posicion]);
}
}
}
botonLimpiar.addEventListener("click",limpiarPantalla);
function limpiarPersonajes()
{
var partida = 0;
var numeroBorrar = personajesGuardados;
personajes.splice(partida,numeroBorrar);
parrafos.splice(partida,numeroBorrar);
imagenesInsertadas.splice(partida,numeroBorrar);
personajesGuardados = 0;
}
function limpiarPantalla()
{
var padre = document.body;
for (var i = 0; i < personajesGuardados; i++)
{
var hijoParrafos = padre.getElementsByTagName("p")[8];
var hijoImagenes = padre.getElementsByTagName("img")[0];
padre.removeChild(hijoImagenes);
padre.removeChild(hijoParrafos);
}
limpiarPersonajes();
}
Les dejo mi trabajo
var imagenes= [];
imagenes["Goku Niño"] = "Goku_niño.png";
imagenes["Goku Adolescente"] = "Goku_adolescente.png";
imagenes["Goku (contra Vegeta)"] = "Goku(contra_Vegeta).png";
imagenes["Goku Super Sajayin Fase 1"] = "Goku_super_sajayin_1.png";
class Goku{
constructor(n, v, ki, at){
this.imagen = new Image();
this.nombre = n;
this.vida = v;
this.KI = ki;
this.AtaqueEspecial = at;
this.imagen.src = imagenes[this.nombre];
}
mostrar(){
document.body.appendChild(this.imagen);
document.write("<br /><strong>" + this.nombre + "</strong> <br />");
document.write("<strong> Vida: </strong>" + this.vida + "<br />");
document.write("<strong> Ki: </strong>" + this.KI + "<br />");
document.write("<strong> Ataque Especial: </strong>" + this.AtaqueEspecial + "<hr />");
}
}
var colección = [];
colección.push(new Goku("Goku Niño", 100, 110, "Kame Hame Ha"));
colección.push(new Goku("Goku Adolescente", 200, 325, "Kame Hame Ha"));
colección.push(new Goku("Goku (contra Vegeta)", 2000, "8.000", "Kame Hame Ha"));
colección.push(new Goku("Goku Super Sajayin Fase 1", 6000, "150.000.000", "Kame Hame Ha"));
for(var Fases of colección){
Fases.mostrar();
}
Les dejo las imágenes
Tengo que ser ... Programador!
Con Platzi voy a programar.
Programarlos mi meta es
diseñarlos mi ideal!
¡Pakiman!
Programarlos ya!!
/* Un array es un Vecto, puede ser array Sencillo [],
array Bidimenional [][], array Tridimensional [][][],
array Multidimensional [][][][] */
// Este es un array asociativo
var imagenes = [];
imagenes ["Cauchin"] = "img/vaca.png";
imagenes ["Pokacho"] = "img/pollo.png";
imagenes ["Tocinauro"] = "img/cerdo.png";
// Con la clase packiman se crea la definicion de un objeto
class packiman
{
/*Esto se dispara cuando se
crea el objeto, parece una funcion no lo es funcion*/
constructor(nombre, tipo, ataque)
{
this.imagen = new Image();
this.nombre = nombre;
this.tipo = tipo;
this.ataque = ataque;
this.imagen.src = imagenes[this.nombre];
}
/*Todo bloque de codigo dentro de una clase
es una funcion*/
hablar ()
{
alert(this.nombre);
}
//Aqui se va a agregar la imagen
mostrar ()
{
document.write("<h2><strong style='color: purple; font-family:Helvetica;'> "+ this.nombre +" </strong></h2>");
document.body.appendChild(this.imagen);
document.write("<br/> <strong style='font-family:Helvetica;'> Tipo: </strong> <strong style='color: blue; font-family:Helvetica;'>" + this.tipo + "</strong><br/ >");
document.write("<br/> <strong style='font-family:Helvetica;'> Ataque: </strong> <strong style='color: blue; font-family:Helvetica;'>" + this.ataque + "</strong><br/ ><hr />");
}
}
var coleccion = [];
// Cada push indica un indice
coleccion.push(new packiman ("Cauchin", 100, 30));
coleccion.push(new packiman ("Pokacho", 80, 50));
coleccion.push(new packiman ("Tocinauro", 120, 40));
console.log(coleccion);
// Este ciclo solo opera la cantidad de objetos que esta dentro del array. En este caso el array Coleccion[]
// Of solo itera en el objeto
for(var packimanes of coleccion)
{
packimanes.mostrar();
}
// In itera en el indice
for(var paki in coleccion[0])
{
console.log(paki);
}```
Que tal a todos. Solo quisiera dar un pequeño comentario de apoyo, ya que he visto comentarios negativos respecto a las clases.
En 20 videos (o menos) enseñaron lo que dentro de mi preparatoria te enseñaban en la carrera de programación dentro de un semestre.
Si no fuera por que yo ya tengo conocimientos del tema, me costaría demasiado procesar esta información.
No es fácil, es verdad, pero, que tema completamente nuevo que hayan aprendido, fue fácil para ustedes?
No se rindan. Si no entienden algo pregunten, para eso estamos la comunidad de usuarios. Vuelvan a ver los videos tanto como sea necesario, pero, sobre todo, hay que leer mas! (me incluyo).
Si no le entienden a la forma en como explica este men, busquen algún otro libro, texto o documentación, que lo explique de forma diferente. Incluso no estaría mal apoyarse con tutoriales de youtube.
ANIMO A TODOS!
En definitiva no hay mejor compañero para tomar esta clase
Like si te reíste con “TENGO UN POLLO, TENGO UN POLLO”
voy a confesar que estoy un poco confundida u.u y al ver los códigos tan excelentes de mis compañeros me quedo impresionada 😄
veré ésta clase las veces que sea necesario para entenderla y poder publicar mi código como ustedes antes de continuar con Diagrama de flujo para cajero automático
Me gustaría que añadan un pdf de la teoría con ejemplos simples. Haría de este curso algo mejor.
Le recomende a mis compañeros de universidad este curso, es impresionante como esto es mejor que 4 semestres de universidad
este curso es mi primera experiencia con programación, algunas cosas las entiendo muchas otras no, se que requiere mucha practica y dedicación, pero en algunos temas quedo perdido casi al 100% y me crea dudas si realmente puedo o no con esto.(ya que esto es lo "basico)
*debería dominar todos los temas vistos hasta este punto?
*o puedo avanzar a otras clases y cursos sin dominar 100% lo que ya vimos?
algún consejo, ruta, método, motivación.
Aquí está, le agregué un menú que me lleve a mi galería.
for-in y for-of in 39:23
Este es un curso muy completo, pero cuando uno esta empezando de 0, hay muchas cosas que no se cogen de una, uno se hace bolas con cualquier cosa y a veces hasta dan ganas de rendirse por no entender.
Por eso es bueno complementar la información con investigación
Hola amigos! a la vez que veo la clase, hago el mismo ejercicio que fredy pero con mis propios nombres e imágenes, resulta que al buscar imágenes en Internet que me gusten, eran de distintos tamaños, para solucionar este problema, dentro de la función mostrar, agrego el tamaño en px que deseo, dejo el código
por si alguien quiere verlo o quiere hacer lo mismo!
mostrar()
{
document.body.appendChild(this.imagen);
this.imagen.width = 150;
this.imagen.height = 150;
}
Freddy: "No se compliquen por ahora"
Yo: “Quiero que en vez de salir solo como elementos uno arriba del otro, los Pakimones sí aparezcan como tarjetitas del Pokedex”
.
Y así fue como me pasé varias horas rompiéndome la cabeza para hacer esto con HTML, CSS y Javascript:
.
.
Básicamente modifiqué algunas propiedades y la función mostrar(); para que en vez de poner los elementos en el body directamente, generase un div, y dentro de este añadiera los datos del Pakimon.
No sé si vayamos a ver esto más adelante en este curso, pero a lo mejor le sirve a alguien. En definitiva a mí me sirvió.
.
Les voy contando qué hice y cuál fue mi razonamiento en los comentarios del código
// Antes que otra cosa:
// Mucho texto :v
var imagenes = [];
imagenes["Cauchin"] = "vaca.webp";
imagenes["Pokacho"] = "pollo.webp";
imagenes["Tocinauro"] = "cerdo.webp";
imagenes["Kiobolobo"] = "lobo.png";
class Pakiman{
constructor(n, t, v, a){
this.imagen = new Image();
this.nombre = n;
this.tipo = t;
this.vida = v;
this.ataque = a;
/*
Cada Pakimon va a presentarse dentro de un DIV que será su tarjeta en el
Pakidex.
Para ello:
1. Creamos un DIV en blanco dentro de la propiedad "this.div"
2. Usando setAttribute le asignamos al DIV la clase html .pakimon, que usaremos
para definir el estilo de todas las tarjetas en CSS.
3. Usando setAttribute le asignamos como ID, this.nombre lo cual hará
que el DIV se llame como el Pakimon, pudiendo así hacer hacer appendChild al
DIV preciso del Pakimon, en vez de al document o al body en general.
*/
this.div = document.createElement('div');
this.div.setAttribute("class", "pakimon");
this.div.setAttribute("id", this.nombre);
/*
Para insertar las propiedades del Pakimon dentro de la tarjeta (el DIV que
armamos recién arriba) necesitamos usar appendChild, ya que no podemos
hacer write directamente en el DIV. Peeero, por lo que pude entender
mientras me golpeaba la cabeza contra el escritorio a la vez que leía cosas
aun incomprensibles para mí en StackOverflow, no podemos hacer appendChild
a un STRING, por lo que necesitamos crear un elemento tipo NODE, que por
lo que entendí, es como se le llama a un elemento de HTML.
Para ello:
1. Se usa "createElement" para generar la etiqueta html que va a añadirse
a la tarjeta (ya sea "strong" o "P") para mostrar la propiedad del Pakiman.
Este elemento NODE se genera dentro de la clase Pakiman como una nueva
propiedad con la nomenclatura "this.[propiedadOriginal]Display"
2.Al crearla este es un <p></p> vacío (o strong vacío). Su contenido es
modificado definiendo this.[propiedadOriginal]Display.innerHTML
innerHTML nos inserta lo que le pongamos, dentro de la etiqueta HTML
que hayamos elegido en el paso 1. de esta sección.
*/
this.nombreDisplay = document.createElement('strong');
this.nombreDisplay.innerHTML = this.nombre;
this.tipoDisplay = document.createElement('p');
this.tipoDisplay.innerHTML = "Tipo: " + this.tipo;
this.vidaDisplay = document.createElement('p');
this.vidaDisplay.innerHTML = "Vida: " + this.vida;
this.ataqueDisplay = document.createElement('p');
this.ataqueDisplay.innerHTML = "Ataque: " + this.ataque;
/*
además de definir la src de la imagen, vamos a darle la class .imagenPakimon
la cual será usada para definir su estilo en CSS
*/
this.imagen.src = imagenes[this.nombre];
this.imagen.setAttribute("class", "imagenPakimon");
}
hablar(){
alert("¡" + this.nombre + "!")
}
mostrar(){
//GENERA LA TARJETA DEL PAKIMON DENTRO DEL PAKIDEX
/*Busca el DIV llamado #pakidex dentro del documento (abajo pongo el html) y le inserta
el DIV que armamos arriba
(El que tiene class=.pakimon, y con ID igual al nombre del Pakimon)
*/
document.getElementById("pakidex").appendChild(this.div);
/*
Busca la tarjeta (el elemento cuyo ID es igual al nombre del Pakimon) y, usando
appendChild, le inserta la imagen y el resto de propiedades del pakimon.
(usando las propiedades Display que definimos arriba, que son nodos en vez
de strings)
*/
document.getElementById(this.nombre).appendChild(this.imagen);
document.getElementById(this.nombre).appendChild(this.nombreDisplay);
document.getElementById(this.nombre).appendChild(this.tipoDisplay);
document.getElementById(this.nombre).appendChild(this.vidaDisplay);
document.getElementById(this.nombre).appendChild(this.ataqueDisplay);
}
}
var coleccion = [];
//Pakiman( NOMBRE , TIPO, VIDA, ATAQUE)
coleccion.push( new Pakiman("Cauchin","Tierra",100,30) );
coleccion.push( new Pakiman("Pokacho","Electrico",80,50) );
coleccion.push( new Pakiman("Tocinauro","Normal",120,40) );
/*Gracias al proceso que hicimos, con añadir una linea de código
(+ la linea que nos importa la imagen) podemos añadir una tarjeta de
pakimon nueva a nuestro pokedex.
*/
coleccion.push( new Pakiman("Kiobolobo","Perreo",90,65) );
for(var pakimonDisplay of coleccion){
pakimonDisplay.mostrar();
}
.
El html solamente contiene:
Dentro del head, los vínculos al CSS y el script de pakimanes.js.
Dentro del body, un <h1> que es el título “Mi pakidex” y el <div> con id=“pakidex”. Este Div es el el Javascript va a buscar para insertarle dentro las tarjetas de cada Pakimon cuando llamamos a la función mostrar();
.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pokimanes: Tengo ke atraparlos</title>
<link rel="stylesheet" type="text/css" href="styles/style_pakimon.css">
<script src="pakimanes.js" defer></script>
</head>
<body>
<h1>Mi pakidex:</h1>
<div id="pakidex">
</div>
</body>
</html>
.
El CSS define colores, tamaños, sombras y esas cosas.
.
body{
display: block;
background-color: #21252b;
color: #FFFFFF;
height: auto;
width: auto;
vertical-align: middle;
text-align: center;
}
#pakidex{
width: 50%;
margin:0 25% 0 25%;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px 20px 20px 20px;
min-width: 150px;
background-color: #2a2c36;
box-shadow: 0px 1px 11px #21252b;
box-shadow: 0px 2px 8px #21252b;
border-radius: 15px
}
.pakimon{
flex-grow:1;
min-width: 170px;
max-width: 250px;
display: inline-block;
margin: 10px 5px 10px 5px;
padding: 5px;
text-align: center;
box-shadow: 0px 6px 15px #21252b;
box-shadow: 0px 2px 7px #21252b;
background-color: #f7fff9;
color: #21252b;
border-radius: 15px;
}
/*Para que la imagen se muestre sobre el nombre del Pakimon en vez de al lado*/
.imagenPakimon{
margin: auto;
display: block;
}
.
No sé tanto de CSS así que estuve jugando un poco, y encontré una guía online de flexbox bastante buena y muy visual en google (Si buscas “flexbox guide” es lo primero que sale) que fue lo que usé para que las tarjetas hicieran esto cuando la pantalla está muy chiquita:
.
.
.
(Esto es indispensable, ya que, como todos sabemos, la Pantalla del Pakidex es muy chiquita: Ash Mustard no puede ir por la vida cargando una pantalla de computadora normal)
Y pues básicamente fue eso en lo que he estado desde que salí del trabajo hasta ahora que termino de escribir esto a las 2am.
Sí se puede, mis panas, nunca dejen de aprender.
Acá dejo algunos datos importantes:
-
Al momento de crear una funcion dentro del bloque de codigo de una clase no se debe especificar la sintaxis “Function”, ya que, se entiende implícitamente que es una funcion
-
El objeto “this” se usa como indicador de una instacia (clases), mientras que en funciones se usa para indicar que esa variable forma parte solo de la funcion.
-
Los arrays o arreglos, son zonas de almacenamiento contiguo que contienen una serie de datos.
-
El objeto “appendChild” agrega un “hijo” al arbol HTML.
Recomiendo vean este vídeo, dónde explican breve y claramente la diferencia entre un objeto y una clase.
Ver
Hola compañeros! Les comparto mi trabajo con algunas modificaciones jeje. Juego con eso para tratar de entenderlo mejor.
Bitacora : hoy es mi segundo dia repasando el video para poder entender jaja
A ver el video por segunda vez
Cuando veia comentarios de personas que tenian el ejemplo que hizo fredy mejorado x100 caia en desmotivacion. Sin embargo tienen que saber…ESAS PERSONAS NO ESTAN EMPEZANDO CON LA PROGRAMACION!!. Ya tienen tiempo de estar empapados de este mundo, si ustedes apenas comienzan no pretendan correr cuando apenas estan aprendiendo como es caminar, este curso te da un panorama de que es la programacion, los demas cursos te enseñan a programar, este simplemente te empalaga un poco de las mieles del conocimiento, los otros cursos te enseñaran a crear tu propia miel.
Observo muchos comentarios negativos. Sé que al principio todo parece confuso, pero ey ¡Si les gusta, no se rindan! Se los dice una Contadora que no tenia ni idea de la programación.
Solo es de bromita no se enojen
Yo leyendo los comentarios:
yo: por que la gente no entiende el curso?
mi subconsciente: al parecer a partir de aquí las cosas se ponen feas! xD
Después de ver todo parece mucha información, cuando se está empezando es un poco abrumador.
Vaya, llevo 6 semestres en la universidad y ni de chiste se comparan a todo lo que he aprendido aquí en cuanto a programación
decidí crear un proyecto muy parecido al de los pakimanes pero con las clasificación de los poliedros regulares, insertando en el body imágenes desde javascript y dando la cantidad de caras vértices y aristas.
Nunca pares de programar 💚
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
font-size: 25px;
}
p {
font-size: 18px;
}
</style>
<title>Poliedros Regulares</title>
</head>
<body>
<h1>Los Poliedros regulares</h1>
<script src="figuras.js"></script>
</body>
</html>
JS
class Poliedro {
constructor(n, c, a, v) {
this.nombre = n;
this.caras = c;
this.aristas = a;
this.vertices = v;
this.imagen = new Image();
this.imagen.src = imagenes[this.nombre];
}
mostrar() {
document.body.appendChild(this.imagen);
document.write("<p>");
document.write("<strong>" +this.nombre + "</strong><br />");
document.write("Caras: " +this.caras + "<br />");
document.write("Aristas: " +this.aristas + "<br />");
document.write("Vertices: " +this.vertices + "<br />");
document.write("</p>");
}
}
var imagenes = [];
imagenes ["tetraedro"] = "tetraedro.png";
imagenes ["cubo"] = "cubo.png";
imagenes ["octaedro"] = "octaedro.png";
imagenes ["dodecaedro"] = "dodecaedro.png";
imagenes ["icosaedro"] = "icosaedro.png";
var figuras_tridimensionales = [];
figuras_tridimensionales.push(new Poliedro("tetraedro", 4, 6, 4));
figuras_tridimensionales.push(new Poliedro("cubo", 6, 12, 8));
figuras_tridimensionales.push(new Poliedro("octaedro", 8, 12, 6));
figuras_tridimensionales.push(new Poliedro("dodecaedro", 12, 30, 20));
figuras_tridimensionales.push(new Poliedro("icosaedro", 20, 30, 12));
for (var i of figuras_tridimensionales) {
i.mostrar();
}
y yo como estupido buscando en google “que es pakiman?”
Animo compa;eros a este punto todo esta muy complejo yo lo se, pero de a poco vamos aprendiendo y a salir adelante.
El video dice 45:07 minutos pero en realidad es:
20 min de desesperacion y sufrimiento por que no da nada
5 minutos de celebración por que si dio
30 minutos de descanso por que me siento achicopalado
50 min de codigo
10 minutos chismeando en aportes
2 horas considerando si la programacion es para mi
10 minutos de chale ya que mejor termino esto de una vez
Para un total de casi 4 horas
😂
El dominio tocinauro.com esta disponible por si alguien está interesado en montar un restaurante u otra cosa. 😄
jajaja aun no supero lo del pollo agresivo xd
Bueno… este fue mi intento, quedo un poco feo pero ahi vamos aprendiendo 😄
Aquí os dejo mis apuntes. Cortos pero valiosos. Espero os sirvan. 😄
Gracias maestro!
vean el vídeo dos veces para comprender de mejor forma todas las definiciones, les dejo como recomendación.
Viendo algunos comentarios, donde dice que no entiende. no es fácil para el que esta comenzando entender con rapidez, todo lo hace la practica, y me encanto esta parte de curso porque me motiva mas, a buscar y aprender mas.
También le recomiendo que imprima los cogidos. o lo escriba y escriba que hace cada cosa. así entenderá y se lo aseguro que se van a enamorar mas de la programación.
Clase: La clase es la definición de un objeto.
class Pakiman
{
} = Creación de una clase llamada Pkiman.
class Pakiman
{
constructor()
{
alert(“mensaje flotante”);
}
} = Dentro de las clases existen unas funciones que se disparan en el momento en el que se hace una nueva imagen, esta imagen que se dispara cuando se crea un objeto se llama constructores, estas se crean con “constructor” esto es como escribir “function” pero no tiene nombre y esta funciona igual que una función
var cauchin = new Pakiman(); = cauchin Es una instancia de la clase Pakiman
class Pakiman
{
constructor()
{
this.tipo = “tierra”;
}
} = Para agregar una variable dentro de las clases se tiene que agregar dentro del constructor, this es un indicador de la instancia de donde estoy es decir una instancia de la clase, pero también si solo se tiene una función que no fuera una clase this se referiría a todas las variables que fueron creadas dentro del bloque de código dentro de las {}, en una función las variables creadas dentro de las llaves solo viven dentro de esas llaves y viven mientras a función viva, fuera de la función es imposible acceder a esas variables, el this es eso y funciona por ejemplo cuando una variable dentro de la función se llama igual a una variable por fuera de la función, la que esta por fuera no se le coloca this y la que esta por dentro si.
class Pakiman
{
constructor(n)
{
this.nombre = n;
this.tipo = “tierra”;
}
}
var cauchin = new Pakiman(“Cauchin”); = this se refiera a las variables dentro de la clase, mientras que las variables que no son parte de la clase que pueden venir por parámetro o por fuera como una variable global la cual la pueda ver todo el código tiene otro nombre y no se le coloca this, this se vuelve un indicador de la instancia de la clase en este caso de cauchin.
class Pakiman
{
constructor(n, v, a)
{
this.nombre = n;
this.vida = v;
this.ataque = a;
}
}
var cauchin = new Pakiman(“Cauchin”, 100, 30); = Se le agregan distintos atributos a los Pakimanes como el nombre, vida y ataque.
console.log(cauchin, pokacho, tocinauro); =Para imprimir múltiples cosas en la consola solo se separan por comas, esto nos ahorra lineas de codigo.
class Pakiman
{
constructor(n, v, a)
{
this.nombre = n;
this.vida = v;
this.ataque = a;
}
hablar()
{
alert(this.nombre);
}
} = Para crear funciones dentro de las clases no se tiene que escribir function porque se entiende manera implícita que todo bloque de código dentro de una clase es una función y solo se elige el nombre en este caso hablar.
pokacho.hablar(); = Así funcionan las funciones dentro de una clase, se invoco la función hablar que estaba dentro de una clase.
var imagenes = [];
imagenes[“Cauchin”] = “vaca.png”;
imagenes[“Pokacho”] = “pollo.png”;
imagenes[“Tocinauro”] = “cerdo.png”; = Un array es como si una variable tuviera cajitas, para crear un array vació se abren llaves cuadradas [], los array funcionan indexados a 0, 1, 2, …, cajitas [0] = “Hola”; para agregar letras o números en las cajitas de los arrays, para consultar lo que esta dentro del array se consulta por números del 0, 1, …, cajitas [2]; para consultar la cajita, cajita 0 = 1, 1 = 2, …, tambien se les puede empujar un nuevo dato con cajitas.push(“ultimo”), esto agrega lo que esta dentro de los paracentesis al ultimo valor del array, se pude hacer que en los arrays en ves de que las posiciones sean números estas sean texto cajitas[“nombre”] = “Platzi”; esto agrego la palabra Platzi en sub nombre lo que esta dentro de las llaves cuadradas se le llama sub.
En JS un array asociativo es cuando la posición de la cajita no es un numero sino un string.
Se puede limpiar la consola con ctrl + l
mostrar()
{
document.body.appendChild(this.imagen);
} = Para agregar un elemento imagen al documento es por medio de la función appendChild el cual agrega un nuevo hijo al árbol html en la etiqueta body en este caso una imagen.
La opción Elements en la consola muestra como esta el html incluso después de que el JS lo ha manipulado con la opción del ratón se coloreara las opciones conforme vallamos navegando en el html.
<hr /> = La etiqueta hr agrega una raya entre lo que esta debajo y lo que esta arribo en el html, hace un salto de linea con una ralla.
Para hacer mas profesional el código se puede aislar la clase Pakiman en un archivo JS aparte.
<script src=“pakiman.js”></script>
<script src=“paki.js”></script> = Y en el html antes de llamar el script primario se manda a llamar el script con la clase que se corto del .js primario, esto funciona porque html al final se va a traer todos los archivos y no importa de donde los sustraiga porque se van al final se van a juntar y tambien porque las clases al igual que las funciones JS los carga primero en la memoria RAM y después ejecuta lo demás linea por linea.
var coleccion = [];
coleccion.push(new Pakiman(“Cauchin”, 100, 30));
coleccion.push(new Pakiman(“Pokacho”, 80, 50));
coleccion.push(new Pakiman(“Tocinauro”, 120, 40));
for(var freddito in coleccion)
{
console.log(coleccion[freddito]);
} = Para cada freddito dentro del array (colección), es un ciclo especial que recorre la cantidad de veces que un objeto existe, con el in pone en la variable freddito lo que resulte del ciclo for y es una buena practica declarar la variable.
var coleccion = [];
coleccion.push(new Pakiman(“Cauchin”, 100, 30));
coleccion.push(new Pakiman(“Pokacho”, 80, 50));
coleccion.push(new Pakiman(“Tocinauro”, 120, 40));
for(var freddito of coleccion)
{
freddito.sostrar();
} = En la nueva version de JS que se llama emnascript 2015, en esa versión de JS existe un cambio en el ciclo for que hace el ciclo mas sencillo, el cambio es cambiar in por of esto muestra directamente la instancia en vez del indice, van a ver casaos en donde se necesite usar el indice y en esos casos se va a utilizar in y en los casos donde funciona el objeto se usa of.
in itera en el indice.
of en ocaciones funciona e itera en el objeto.
Desde aquí empieza lo interesante, porque la clase esta muy densa, y empiezas a apoyarte en otros recursos. OOP es algo complejo de entender, hablé con alguien que trabaja en esto y me dijo que no me preocupara tanto, por que él demoró alrededor de 3 meses en entenderlo.
les recomiendo este link, que te da una buena introducción al OOP.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animales</title>
</head>
<body>
<h1>Animales </h1>
<script src="animal.js"></script>
<script src="anim.js"></script>
</body>
</html>
var imagenes = [], coleccion = [], carpeta = "imagen/";
var nom = [["Abeja","Granja y casa","Polen y miel","Miel"], ["Ardilla","Campo","Semillas, frutas y vegetales","Carne"], ["Burro", "Granja", "Paja, pasto y heno","Carne, Leche y Queso"], ["Caballo", "Granja", "Paja, pasto y heno", "Carne"], ["Cabra", "Granja", "Paja, pasto y heno", "Carne y leche"], ["Cerdo", "Granja", "Paja, pasto y heno", "Carne y leche"], ["Conejito", "Granja", "Paja, pasto y heno", "Carne"], ["Elefante", "Selva", "Paja, pasto y heno", "Colmillos y piel"], ["Gallina", "Granja", "Vegetales, hierba, hojas, ortigas, frutos y semillas", "Carne"], ["Gato", "Casa y Rancho", "Carne y croquetas", "Nada"], ["Hipopotamo", "Selva", "Pasto", "Nada"], ["Jirafa", "Selva", "Hojas del arbol", "Nada"], ["Langosta", "Mar", "plantas", "Carne"], ["Oveja", "Granja", "Paja, pasto y heno", "Carne y piel"], ["Pato", "Granja", "Vegetales, frutos y semillas", "Carne y plumas"], ["Perro", "Casa y Granja", "Carne y croquetas", "Nada"], ["Pez", "Mar", "Carne y plantas", "Carne"], ["Vaca", "Granja", "Paja, pasto y heno", "Carne y leche"]];
document.body.style.backgroundImage = "url(" + carpeta + "5073414.jpg)";
for (i = 0; i < nom.length; i++) {
imagenes[nom[i][0]] = carpeta + nom[i][0] + ".png";
coleccion.push(new Animal(nom[i][0], nom[i][1], nom[i][2], nom[i][3]));
}
for(var anima of coleccion) {
anima.mostrar();
}
for(var x in coleccion[0]) {
console.log(x);
}
class Animal {
constructor(n, o, a, d) {
this.imagen = new Image();
this.nombre = n;
this.origen = o;
this.alimentacion = a;
this.derivado = d;
this.imagen.src = imagenes[this.nombre];
}
hablar() {
alert(this.nombre);
}
mostrar() {
var nuevaDiv= document.createElement('div'), titulo = document.createElement('h2'), texto_1 = document.createElement('p');
var texto_2 = document.createElement('p'), texto_3 = document.createElement('p');
nuevaDiv.setAttribute("class", "cuadro");
titulo.innerHTML = this.nombre;
texto_1.innerHTML = "<Strong>Origen: </Strong>" + this.origen;
texto_2.innerHTML = "<Strong>Alimentacion: </Strong> " + this.alimentacion;
texto_3.innerHTML = "<Strong>Derivado: </Strong> " + this.derivado;
nuevaDiv.appendChild(this.imagen);
nuevaDiv.appendChild(titulo);
nuevaDiv.appendChild(texto_1);
nuevaDiv.appendChild(texto_2);
nuevaDiv.appendChild(texto_3);
document.body.appendChild(nuevaDiv);
}
}
h1 {
text-align: center;
color: cornsilk;
}
p {
margin: 0 0 5px 0;
}
.cuadro {
width: 200px;
height: 280px;
border: 1px solid rgb(148, 146, 146);
border-radius: 15px;
box-shadow: 5px 5px 5px grey;
background: rgba(255, 255, 255, 0.678);
padding: 10px;
margin: 10px;
text-align: center;
float: left;
}
jajaja me encantan las aclaraciones para los puristas del codigo jajaaj
Me dio demasiada risa Freddy con: Que tiene un ataque de 50 porque es un pollo…agresivo.
Es decir que un Array asociativo funciona practicamente igual a JSON… Es decir que con la clave puedo obtener el valor, asi sea un Array o un objeto JSON… de la forma “variable.nombre” donde variable puede ser el nombre del Array o del objeto JSON y el nombre puede ser un String usado como índice o la clave del objeto JSON… ¿Es así, cierto?
literalmente llevo 2 dias literalmente sin poder dormir tratando de digerir todo este contenido. Realmente me esta gustando mucho lo que estoy aprendiendo.
Os comparto mi código:
pakiman.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 7;
background-color: #7d5fff;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>PAKIMANES ATRAPADOS</h1>
<h2>Presiona la imagen para que hablen:</h2>
<script src="pakiman.js"> </script>
<script type="text/javascript" src="paki.js"></script>
</body>
</html>
pakiman.js
//Código donde está definida la clase Pakiman
class Pakiman{
constructor(nombre, vida, ataque, audio){
this.nombre = nombre;
this.vida = vida;
this.ataque = ataque;
this.image = new Image();
this.sound = new Audio(audio);
this.image.src = imagenes[this.nombre];
}
hablar(){
alert(this.nombre);
}
mostrar(){
document.body.appendChild(this.image);
document.write("<p>");
document.write("<strong>" + this.nombre + "</strong> <br/>");
document.write("Vida: " + this.vida + "<br/>");
document.write("Ataque: " + this.ataque+ "<hr>");
document.write("</p>");
}
}
paki.js
//Código de funcionalidad del html
var imagenes = [] ;
imagenes["Cauchin"] = "vaca.png";
imagenes["Pokacho"] = "pollo.png";
imagenes["Tocinauro"] = "cerdo.png";
var audios = {
cauchin: "sonidoVaca.mp3",
pokacho: "sonidoRana.mp3",
tocinauro: "oink.ogg"
}
var coleccion = [];
coleccion.push( new Pakiman("Cauchin", 100, 30, audios.cauchin) );
coleccion.push( new Pakiman("Pokacho", 80, 50, audios.pokacho) );
coleccion.push( new Pakiman("Tocinauro", 120, 40, audios.tocinauro) );
//Itera sobre el objeto o el value
for( const o of coleccion){ //iterador que regresa cada objeto o variable del arreglo directamente
o.image.addEventListener("click", function(){
o.sound.play();
});
o.mostrar();
}
/*
Itera sobre el índice o key
for( var i in coleccion){ //iterador de todos los elementos regresando el índice
//coleccion[i].mostrar();
}
*/
Es cierto que el curso abarca muchos temas diferentes, que ni si quiera vimos con anterioridad, y que es largo, pero no se olviden que es un curso gratuito, creo que esta hecho así al propósito, Freddy tiene que mostrar todo lo que pueden aprender si son estudiantes expert. Yo seguí con otros cursos y cada tanto vuelvo a este, no se si esta bien hacerlo así, pero a mi , por ahora, me funciona. Solo un pequeño aporte.
Solo quería compartir mi felicidad, me siento más apto cad di
Cada proyecto y clase que termino, me doy cuenta de lo mucho que aún me falta por aprender. Lo bueno es que de algún modo eso me motiva.
¡ Clases y Arrays en JavaScript !
Las clases son “funciones especiales”, la sintaxis de una clase tiene dos componentes: expresiones de clases y declaraciones de clases.
Una expresión de clase es otra manera de definir una clase.
Las expresiones de clase pueden ser nombradas o anónimas.
El nombre dado a la expresión de clase nombrada es local y se ubican dentro del cuerpo de la misma.
Una manera de definir una clase es mediante una declaración de clase. Para declarar una clase, utilizamos la palabra reservada class y un nombre para la clase, ej: “Pakiman”.
Los arrays (Array o matrices) son objetos de tipo lista cuyo prototipo tiene métodos para realizar operaciones de recorrido y mutación. pero ni la longitud o los tipos de los elementos del array son fijos. La longitud de un array puede cambiar en cualquier momento, y los datos pueden almacenarse en ubicaciones, no se garantiza que los arrays en JavaScript sean densos, esto depende de cómo el programador quiera usarlos.
Les Comparto mi aporte. xD
HTML
Clase
Código
Comprendo a las personas que dicen que esta clase es confuso o que no están comprendiendo, porque me pasó lo mismo. No lo entendí a la primera pero trate de hacerlo a mi manera, volví a repetir el vídeo y ahora me queda más claro. Los ánimo a que lo hagan a su modo y sobre todo no se den por vencidos!
Les comparto lo que llevo del proyecto, aún quedan varias cosas por hacer, pero creo que en este punto enamorarse del proceso es importante.
wow espectacular esta clase. Confieso que al principio no entendía es NA´ y regresaba una y varias veces hasta que logre entenderlo (recuerda que si es necesario repítelo una y mil veces hasta que lo entiendas). SUERTE Y MUCHAS GANAS
Paso la versión mejorada del proyecto:
var rutaImagenes =
{
Pikachu: "pollo.png",
Bolbasor: "cerdo.png",
Charmander: "vaca.png"
}
var Pikachu = new Pakiman("Pikachu", "Electrico", 10, 10);
var Bolbasor = new Pakiman("Bolbasor", "Planta", 10, 5);
var Charmander = new Pakiman("Charmander", "Fuego", 5, 20);
Pikachu.mostrar();
Bolbasor.mostrar();
Charmander.mostrar();
Aquí adjunto el archivo donde defino la clase:
class Pakiman
{
constructor(Nombre, Tipo, Vida, Ataque)
{
this.nombre = Nombre;
this.tipo = Tipo;
this.vida = Vida;
this.ataque = Ataque;
this.imagen = new Image();
this.imagen.src = rutaImagenes[this.nombre];
console.log(this.imagen.src);
}
mostrar()
{
document.body.appendChild(this.imagen);
document.write("<br/>");
document.write("-Nombre: " + this.nombre + "<br/>");
document.write("-Tipo: " + this.tipo + "<br/>");
document.write("-Vida: " + this.vida + "<br/>");
document.write("-Ataque: " + this.ataque + "<br/> <hr/>");
}
/*
Como "document.write" escribe sobre un documento HTML, debemos
pasarle tambien codigo HTML. Por eso se utilizan las siguientes
etiquetas:
- <br/> -> Salto de linea en HTML.
- <hr/> -> Linea horizontal.
*/
}
Código de un mini juego (inutil) en el cual podemos seleccionar al animal y moverlo por la pantalla. Las imagenes con ‘r’ al principio son solo los mismos .png volteados.
var d = document.getElementById('papel');
var papel = d.getContext('2d');
var teclas = {
left: 37,
up: 38,
right: 39,
down: 40
};
var imagenes = {
fondo: 'fondo.png',
pollo: 'pollo.png',
cerdo: 'cerdo.png',
vaca: 'vaca.png',
rpollo: 'rpollo.png',
rcerdo: 'rcerdo.png',
rvaca: 'rvaca.png'
};
class Animal{
constructor(nombre, vida, ataque){
this.imagen = new Image();
this.nombre = nombre;
this.imagen.src = imagenes[this.nombre];
this.vida = vida;
this.ataque = ataque;
this.cargaOk = false;
this.selected = false;
this.sentido = false;
this.x = aleatorio(0, 5)*60;
this.y = aleatorio(0, 5)*60;
}
}
var animales = [];
animales.push(new Animal('fondo', 0, 0));
animales.push(new Animal('vaca', 50, 50));
animales.push(new Animal('cerdo', 25, 75));
animales.push(new Animal('pollo', 75, 25));
animales[1].selected = true;
function dibujar(){
for(var i in animales){
if(animales[i].cargaOk){
if(i==0) papel.drawImage(animales[i].imagen, 0, 0);
else papel.drawImage(animales[i].imagen, animales[i].x, animales[i].y);
}
}
}
function cargar(){
for(var i in animales){
if(animales[i].imagen.src.localeCompare(event.path[0].src)==0){
animales[i].cargaOk = true;
}
}
dibujar();
}
function seleccionar(){
console.log(event);
}
for(var i in animales){
animales[i].imagen.addEventListener('load', cargar);
}
function mover(){
for(var i in animales){
if(animales[i].selected){
switch(event.keyCode){
case teclas.left:
if(!animales[i].sentido) animales[i].sentido=true;
animales[i].x -= 10;
break;
case teclas.up:
animales[i].y -= 10;
break;
case teclas.right:
if(animales[i].sentido) animales[i].sentido=false;
animales[i].x += 10;
break;
case teclas.down:
animales[i].y += 10;
break;
}
if(animales[i].x<0) animales[i].x=420;
if(animales[i].x>420) animales[i].x=0;
if(animales[i].y<0) animales[i].y=420;
if(animales[i].y>420) animales[i].y=0;
if(!animales[i].sentido) animales[i].imagen.src = imagenes['r' + animales[i].nombre];
else animales[i].imagen.src = imagenes[animales[i].nombre];
dibujar();
}
}
}
function mostrar(){
for(var i in animales){
if(i!=0){
if(event.clientX>=animales[i].x && event.clientX<=animales[i].x+80
&& event.clientY>=animales[i].y && event.clientY<=animales[i].y+80){
for(var j in animales){
if(j!=i) animales[j].selected = false;
else animales[j].selected = true;
}
}
}
}
}
document.addEventListener('keydown', mover);
document.addEventListener('click', mostrar);
Por fin entendí que significa y como utilizar correctamente el this y crear una clase.
var imagenes = [];
imagenes["Cauchin"] = "img/vaca.png";
imagenes["Pokacho"] = "img/pollo.png";
imagenes["Tocinauro"] = "img/cerdo.png";
colPakimanes = [];
colPakimanes.push(new Pakiman("Cauchin", 100, 30));
colPakimanes.push(new Pakiman("Pokacho", 80, 50));
colPakimanes.push(new Pakiman("Tocinauro", 120, 40));
for (var pakimCapt of colPakimanes)
{
pakimCapt.mostrar();
}```
¿Soy el único que no supera los nombres de los Pakimanes?😆
Mencanta que Pakiman no infrinja los derechos de autor de nadie , deberían registrarlo 😏
Pregunta compañeros, solo ven estas clases o aparte leen algunos libros??, si lo hacen me gustaría que me compartieran sus libros para aprender y comprender mejor…
He durado unas 6 horas con esta clase, pero me voy sintiendo que ahora si interioricé mejor estos conceptos en mi cabeza.
Les recomiendo ir dibujando y tomando nota de la forma en la que funciona y se enlaza la clase con los objetos , las funciones, los arrays y los ciclos, eso me ayudó a comprender mejor
ya había visto videos tratando de explicar que es el famosísimo “objeto” en la programación orientada a objetos…
Este video de una manera diferente y a mi parecer clara.
Lo que al final quiero decir es que: si no entiendes la explicación, no te desanimes o te apresures a pensar que este o cualquier video de programación es confuso; en ves de eso, mira otros videos, lee otros artículos, practica otros ejercicios y vas a ver como este o cualquier otro concepto se va aclarando en tu mente.
Nos vemos en un futuro proyecto… =)
conecta el cargador que estas sin bateria @freddier
Hay alguien más aquí que sienta que si esta clase es básica necesita una clase de programación para dummies?
La clase Pakiman con algunos comentarios
class Pakiman {
//Definicion de un objeto
constructor(n, v ,a )
{
//this es el indicador de la instancia de la clase
//this tambien refiere a las variables dentro de la clase
this.imagen = new Image();
this.nombre = n;
this.vida = v;
this.ataque = a;
//obtiene el valor del nombre que es igual a el valor del array asociativo en imagenes
//en ese array estan las direcciones de las imagenes y con src las asigno como su valor a la imagen
this.imagen.src = imagenes[this.nombre];
}
hablar(){
alert(this.nombre);
}
mostrar()
{
//agrega un hijo al árbol q empieza con document q contiene el body q va a contener la imagen
document.body.appendChild(this.imagen);
//agrego elementos html
document.write("<p>");
document.write("<strong>" + this.nombre + "</strong><br>");
document.write("Vida" + this.vida + "<br>");
document.write("Ataque" + this.ataque);
document.write("<hr></p>");
}
}```
Cómo método de conquista le hice un Pakiman a mi novia y a mí. Lastimosamente ella es más fuerte que yo, es cool jugar con el código de esta forma.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>El caza pakimanes</title>
<link rel="shortcut icon" href="imagenes/pokepelota.ico">
</head>
<body>
<h1>PAKIDEX</h1>
<p>Lo que he encontrado</p>
<script src="javascript/clase_pakiman.js"></script>
<script src="javascript/pakiscript.js"></script>
</body>
</html>
CLASE
class Pakiman
{
constructor(nombre, vida, ataque, tipo)
{
this.imagen =new Image();
this.name = nombre;
this.tipo = tipo;
this.vida = vida;
this.ataque = ataque;
this.imagen.src=imag[this.name];
}
hablar()
{
alert(this.name + " esta vivo");
}
mostrar()
{
document.body.appendChild(this.imagen);
document.write("<p>");
document.write("<br /><strong>" + this.name + "</strong><br />");
document.write("Tipo: " + this.tipo + " <br />");
document.write("Vida: " + this.vida + " <br />");
document.write("Ataque: " + this.ataque + " <hr />");
document.write("</p>");
}
}
PAKISCRIPT
var imag = [];
imag["cauchin"]="imagenes/vaca.png";
imag["pocacho"]="imagenes/pollo.png";
imag["tocinauro"]="imagenes/cerdo.png";
var coleccion =[];
// ---metodo de llenado de arrays con objetos, primero instanciando fuera del array----
/* var cauchin = new Pakiman("cauchin", 100, 30, "tierra");
var pocacho =new Pakiman("pocacho", 80, 50, "tierra-aire");
var tocinauro =new Pakiman("tocinauro", 120, 40, "tierra-agua"); */
/* coleccion.push(cauchin);
coleccion.push(pocacho);
coleccion.push(tocinauro); */
// ---metodo de llenado de arrays con objetos, instanciando directamente en la ultima posicion del array---
coleccion.push(new Pakiman("cauchin", 100, 30, "tierra"));
coleccion.push(new Pakiman("pocacho", 80, 50, "tierra-aire"));
coleccion.push(new Pakiman("tocinauro", 120, 40, "tierra-agua"));
// ---listado para mostrar el indice---
for(var integrantes in coleccion)
{
console.log(integrantes + "A"); // ---listado para mostrar el indice---
}
for(var integrantes in imag)
{
console.log(integrantes + "B"); // ---listado para mostrar el indice---
}
for(var integrantes in coleccion[2])
{
console.log(integrantes); // ---listado para mostrar el indice---
}
//---listado para mostrar el objeto---
for(var integrantes of coleccion)
{
integrantes.mostrar(); //---listado para mostrar el objeto---
}
Esto cada vez se pone más complicado, me da algo de miedo la verdad…
Mi actividad de esta clase
Chicos, este curso es muy util, no se desanimen.
les recomiendo que vean esta clase con calma y la **repitan de ser necesario **
Un pequeño cambio en la función “mostrar”
mostrar(){
//document.body.appendChild(this.imagen);
document.write("<table border=1 bgcolor=cian><td>");//crea tabla de color cian y columna
document.write("<strong>" + this.nombre + "</strong><br />");//nombre
document.write("Vida: " + this.vida + "<br />");//vida
document.write("Ataque: " + this.ataque+"<td>");//ataque
document.write("<img src="+imagenes[this.nombre]+">");//hace nueva columna para las imgns
document.write("</td></td></table><br />");//cierra las 2 columnas y la tabla + salto de linea
}
En el minutos 29:09 se explica que se va agregar un nuevo hijo img utilizando la función appendChild();
¿eso quiere decir que dentro de javascript se crea un <img> como hijo del body sin que este se presente en el html?
Para los que no entendieron la explicación de Freddy sobre “this”:
creo que a lo que “this” se refiere es que cuando lo usas dentro de una función (de forma local por así decirlo) este se estará refiriendo a la variable que está dentro de la función, mientras que si no lo usas, la función buscara las variables que pusiste dentro de ellas por fuera, osea buscara las variables de forma global e ignorara las que están dentro de ella, y si no encuentra la variable por fuera de ella te dirá que la variable no esta definida
Por que cuando decimos document.write no lo hacemos de manera document.body.write?
Este es un buen punto para pausar el video y ponerse a internalizar lo enseñado, es indispensable amaestrar lo que hasta ahora en este video se ha explicado para escribir codigo con conciencia de lo que se escribe y tranquilidad de lo que se hace, no es necesario ser un programador pecho de oro para continuar viendo el video, solo me digo a mismo que hasta aqui es un buen punto para irse a la cama con la informacion dada para luego seguir aprendiendo. ¿que recomiendo? que para este punto puedas saber las diferencias entre una variable, un objeto, una clase, un atributo, una funcion, y que al verlas en un codigo puedas diferenciarlas tranquilamente una de la otra
Para qué sirven los puntos que te da platzi?
Yo 🐢
Freddy: 🐇
Nerfeen a Tocinauro 😮
jajajajaja pokacho es un pollo excesivamente agresivo!!! jajjajajasoy yooo!!! XD
con control + l puedes limpiar la consola
Hize el ejercicio pero con coches
class Coches {
constructor (nombre,marca,velocidad,potencia,torque)
{
this.coche = nombre;
this.fabricante = marca;
this.topspeed = velocidad;
this.potencia = potencia;
this.nm = torque;
this.foto = new Image(300);
this.foto.src = imagenes[this.coche];
}
mostrar()
{
document.body.appendChild(this.foto);
document.write("<br><strong>" + this.coche + "</strong><br>");
document.write("Marca: " + this.fabricante + "<br>");
document.write("Velocidad Max: " + this.topspeed + " km/h" + "<br>");
document.write("CV: " + this.potencia + "<br>");
document.write("Nm: " + this.nm + "<br>");
document.write("</p>");
}
}
let titulo = document.createElement('h2');
titulo.innerHTML = ("Los 5 coches más rápidos del mundo");
document.body.appendChild(titulo);
var imagenes = [];
imagenes["Valkyrie"] = "https://media.revistagq.com/photos/60a3907c5afdf213ad9efc33/master/w_1600,c_limit/aston_martin_valkyrie_apertura.jpg";
imagenes["Huayra"] = "https://media.revistagq.com/photos/60a390f95afdf213ad9efc35/master/w_1600,c_limit/1366_2000.jpg";
imagenes["Agera"] = "https://media.revistagq.com/photos/60a3942aa845decdd92aee83/master/w_1600,c_limit/koenigsegg-agera-rs-refinement-front.jpg";
imagenes["Chiron"] = "https://media.revistagq.com/photos/5d89c85a261a8f000878665d/master/w_1600,c_limit/bugatti_chiron_sport_0318_009_1440x655c.jpg";
imagenes["Tuatara"] = "https://media.revistagq.com/photos/5f92eacd721a385494d1273f/master/w_1600,c_limit/1366_2000.jpg";
var Valkyrie = new Coches("Valkyrie","Aston Martin",362,1000,740);
var Huayra = new Coches("Huayra","Pagani",388,755,1100);
var Agera = new Coches("Agera","Koenigsegg",447,1155,1100);
var Chiron = new Coches("Chiron","Bugatti",420,1479,1600);
var Tuatara = new Coches("Tuatara","SSC North America",508.73,1750,1735);
var coleccion = [];
coleccion.push(Valkyrie);
coleccion.push(Huayra);
coleccion.push(Agera);
coleccion.push(Chiron);
coleccion.push(Tuatara);
for(auto in coleccion) {
coleccion[auto].mostrar();
}
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.