Conociendo los conceptos básicos de la programación orientada a objetos, es momento de implementarlo en el código fuente de Javascript. Veamos cómo puedes crear clases y objetos a partir de estas.
Sintaxis de las clases y objetos
La mayoría de los lenguajes de programación poseen una sintaxis muy similar e intuitiva cuando se trata de crear clases y objetos. Los conceptos que aprendas sobre POO en Javascript, el día de mañana, te servirán para trabajar con otros lenguajes de programación.
Clases en Javascript
Crear tu primera clase en Javascript para luego crear objetos es muy sencillo. Basta con utilizar la palabra reservada class, seguido del nombre de la clase, comenzando siempre con mayúscula para seguir las buenas prácticas.
classMokepon{}
Dentro de la clase, implementamos una función especial llamada constructor() que nos permitirá, justamente, construir objetos a partir de esta clase. El constructor recibe como parámetro los atributos o la información que la clase necesita para crear el objeto.
El constructor recibe por parámetro la información que necesita, en el orden indicado, y guardamos la misma dentro de las propiedades que llevan el mismo nombre.
Observa otra palabra muy importante en la programación orientada a objetos: this. La misma hace referencia al objeto actual donde te encuentras. Siempre que quieras acceder a un atributo o método dentro de la clase, lo harás con this.
Objetos en Javascript
La acción de crear un objeto a partir de una clase, lo conocemos con el nombre técnico de ""Instanciar"". Siempre que tengas que crear un objeto, te encuentras instanciando una clase y creando el mismo.
Para crear una instancia de tu clase en Javascript, tienes que utilizar la palabra reservada new seguido del nombre de la clase que quieres intanciar.
let hipodoge =newMokepon('Hipodoge','./assets/hipodoge.jpg',5);
Al usar la clase como una función y pasándole la información propia del objeto, internamente te encuentras llamando al constructor de la clase que devolverá como resultado el objeto y lo guardamos en la variable del tipo let para utilizar el objeto posteriormente.
De esta manera puedes tener N cantidad de instancias de una clase y crear un objeto nuevo por cada Mokepon en tu videojuego.
Si haces un log de esta variable en la consola del navegador, observarás como toda la información del objeto se encuentra agrupada.
console.log(hipodoge);
Si no conocías aún la función console.log() te servirá muchísimo de ahora en adelante para visualizar los datos de tu aplicación y corroborar que sean correctos.
Conclusión
Hasta este punto, ya conoces los conceptos básicos tanto teóricos como prácticos sobre la programación orientada a objetos. Suficiente para optimizar el código de tu software y volver lo más profesional, escalable y comprensible.
Yo por fin entendiendo cuando Juan David dijo que LUEGO crearíamos las demás mascotas del juego y que realmente nunca se le olvidaron los otros tres
AHI VIENE LA MIEL PAPU
ya yo no sabia si seguir dejando esas líneas comentadas o borrarlas :)
Resumen:
Usamos la palabra reservada class para crear una clase (que debe iniciar con Mayuscula) y la palabra reservada constructor para definir los atributos que tendrán nuestros futuros objetos.
Con this.atributo + atributo vamos ligando cada uno de los atributos y finalmente podemos crear variables = new 'Clase' y los valores de sus atributos
Ejemplo
classNerd{constructor(nombre, foto, vida){this.nombre+ nombre
this.foto+ foto
this.vida+ vida
}}let rajesh =newNerd('Rajesh','./assets/rajesh.png',3)
Pro tip: Con el portapapeles de windows 11 se facilita la tarea de copiar y pegar del html al js sin tener que andar cambiando constantemente de archivo
Duda: Por qué los nuevos objetos se declararon con let y no con const cómo aprendimos en la clase anterior???
Muy divertido tu proyecto Erick, enhorabuena 💪🏼
Las variables let pueden ser modificadas, pero no re-declaradas mientras que las variables const no pueden ser modificadas ni re-declaradas
Para quienes les guste, en visual studio code hay un theme de platzi muy bueno
)
gracias, está genial.
ïncreible, no sabía eso, graciasssss
Las clases inician con mayúsculas.
god
Si quieren sacar algo de las cosas copiadas sin tener que copiarlo nuevamente, pueden usar el atajo win + v (en Windows [además se debe activar en la configuración])
Activado! Gracias por el tip.
gracias por el dato, sirvio muchisimo
class = Es la palabra reservada para generar una clase.
class “Mokepon” – Mokepon es el nombre de la clase, la única regla es que todos los nombres de las clases tienen que iniciar en mayúsculas.
constructor = Es la palabra reservada para construir un objeto, aquí van integradas las propiedades que tienen los objetos, como nombre, imagen, etc.;
Class Mokepom {
Constructor (nombre, foto, vida)
}
this = es una palabra reservada para indicar “esto mismo – algo inherente”. Ejemplo:
this.nombre = nombre
this.foto = foto
this.vida = vida
Ya que tenemos lo anterior podemos iniciar a construir los objetos (en este caso, los mokepones), para esto tenemos que generar una variable con el nombre del mokepon, por ejemplo:
Let hipodoge = new Mokepon
new = es una palabra reservada que indica la creación de un nuevo objeto de una clase que ya existe o hemos creado, en nuestro caso sería la clase Mokepon
let hipodoge = new Mokepon (“Hipodoge”, “url-link-imagen.png”, 5)
excelente resumen. Gracias!
Sumaría una herramienta muy útil:]
Console.log() = nota personal para identificar de forma destacable
Tengo todo mi script con comillas dobles excepto el link a la foto de cada mascota. Esto me va a traer algún problema? Porque el profe dijo que para el link de la imagen hay usar comillas simples y creo haber escuchado en una clase anterior que no hay problema con usar uno u otro tipo de comilla siempre y cuando se use el mismo tipo a lo largo de todo el archivo
Nah, para nada. Puedes usar comillas dobles o sencillas sin problemas. Lo recomendable es que uses siempre las mismas eso sí. :D
Si estás programando con textos (strings) en inglés, es recomendable usar comillas dobles para los strings, ya que en inglés tendrás palabras con apostrofe, por ejemplo
const x ="What's your name?"
console.log (hipodoge)
esta funcion sirve para visualizar los objetos de una variable, en nuestra consola.
En este ejemplo, seria visualizar los objetos de hipodoge.
no me queda claro la utilidad del "this"
leí el mdn reference y aun no acabo de entenderlo
Imagina que hablas de ti mismo. Por ejemplo, vas a usar tu edad para darle un mensaje a alguien. Lo que dirías es "yo tengo X años de experiencia trabajando en Z". Ese "yo tengo" es una referencia a ti mismo. Tú como humano tienes información relacionada a ti a la que puedes acceder diciendo "yo tengo" (e.j. yo tengo 2 brazos, yo tengo una hija?, yo tengo el nombre David, etc.).
El this es eso mismo pero en programación. Usando this.loquesea desde una clase puedes acceder a los métodos y atributos "de ti mismo", es decir, puedes hacer referencia a la información de una clase estando dentro de esa misma clase.
creo que lo tengo un poco mas claro, ahora es cosa de practicarlo para internalizarlo, gracias
Me gusta la forma de enseñanza que tiene el profe Diego, ademas que es muy adecuado que nos deje abajo del video el recurso muy bien explicado y con ejemplos, ojala en todos los cursos realizaran un buen resumen como estos.
Qué genial! Excelente curso, ya veía hace un sobre " clases " y " objetos " y ya lo entiendo mucho mejor
Así es, el profe lo explica super bien, y hace mucho mas fácil el aprenderlo.
no pude avanzar, una vez creo la clase y trato de usarla en la variable, no me aparece para poderla colocar después del new y solo me queda como un texto (abc) y en el código me envía el error que no está definido. alguien podría darme una sugerencia de dónde estoy cometiendo el error
class Mokepon {
constructor(nombre, foto, vida) {
this.nombre = nombre
this.foto = foto
this.vida = vida
}
}
let hipo = new Mokepon ("hipo", "./ima/hipodoge_1.png", 5)
buenas... podes publicar el codigo tal como lo tenes escrito ? no se entiende mucho asi
Me pasa exactamente lo mismo. Si pudiste resolver, sería genial que lo compartieras por acá. Gracias. Cuídate.
Una de las formas de agregarle la imagen es inyectarlo en html desde el mismo js de la misma integración del nombre aleatorio, dejo la función de la selección del enemigo aleatorio con su imagen
el truco es agregar "+" y lo que inyectaras en el html en este caso la imagen desde la misma variable
con esto va a ser mas facil programar!!
Excelente explicación, aunque siento que me confunde un poco JS.
Las clases, objetos, constructores en Javascript, son dificiles de entender si NO se muestra de manera mas comun, asi que aqui les dejo un ejemplo de como puede ser
// El MOLDE para hacer pizzasclassPizza{// CONSTRUCTOR = Los ingredientes básicosconstructor(tipo, tamaño){// "esta pizza" tiene un tipothis.tipo= tipo;// "esta pizza" tiene un tamañothis.tamaño= tamaño;// "esta pizza" tiene un preciothis.precio=0;}// MÉTODOS = Lo que la pizza puede HACERcalcularPrecio(){if(this.tamaño==="grande"){this.precio=20;}else{// Si no es grandethis.precio=15;}returnthis.precio;}describir(){return`Pizza ${this.tipo}${this.tamaño} - $${this.precio}`;}}
Usa clases cuando tengas "COSAS" que:
Tienen PROPIEDADES (datos)
Y pueden HACER COSAS (acciones)
gran aporte
consulta como ligo las clases que creamos al html para poder seguir agregando campeones ?
Arriba de todo se crearon 3 variables:
let inputHipodoge
let inputCapipepo
let inputRatigueya
Puedes meter más variables para otras mascotas.
En esta parte de la clase Mokepon, ya está listo, no se ocupa meter más.
classMokepon{constructor(nombre, foto, vida, fotoMapa, id =0){this.id= id
this.nombre= nombre
this.foto= foto
this.vida= vida
this.ataques=[]this.ancho=40this.alto=40this.x=aleatorio(0, mapa.width-this.ancho)this.y=aleatorio(0, mapa.height-this.alto)this.mapaFoto=newImage()this.mapaFoto.src= fotoMapa
this.velocidadX=0this.velocidadY=0}pintarMokepon(){ lienzo.drawImage(this.mapaFoto,this.x,this.y,this.ancho,this.alto)}}
Abajo de esta clase mandas a llamar a meter un nuevo Mokepon con el nombre de la mascota y luego su imagen:
let hipodoge =newMokepon('Hipodoge','./assets/mokepons_mokepon_hipodoge_attack.png',5,'./assets/hipodoge.png')
Abajo de esto, se agregan unas variables tipo const para definir los ataques de las mascotas y también de los enemigos:
Puedes también crear otros para tus nuevas mascotas.
muchas gracias, lo pruebo como dices!!
++tengo un problema un error no se que pasa++
****
mira que no hayas repetido una variable en el js
HOLAA!!! tengo un error que no lo puedo encontrar hace dos días.
No me responde el ataque . LLEGO HASTA FUEGO, AGUA y TIERRA!!! Respondían bien.
++ESTO MARCA:++:
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at crearMensaje (mokepon.js:122:31)
at combate (mokepon.js:106:9)
at ataqueAleatorioEnemigo (mokepon.js:88:9)
at HTMLButtonElement.ataqueAgua (mokepon.js:72:9)