Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Modelo Cliente/Servidor

25

Primer servidor web con express

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Clases y Arrays en JavaScript

21/37
Recursos

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:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

鉁 Una clase nos permite definir una colecci贸n de objetos permitiendo que estos posean los mismos atributos y m茅todos.

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 鈥淎NTERIOR鈥 y 鈥淪IGUIENTE鈥. 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 鈥淐ARGAR鈥 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 鈥淟IMPIAR鈥, 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 鈥渄ocument.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 鈥減arent.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 鈥淭ENGO 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: 鈥淨uiero 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 鈥淢i pakidex鈥 y el <div> con id=鈥減akidex鈥. 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 鈥渇lexbox 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 鈥淔unction鈥, ya que, se entiende impl铆citamente que es una funcion

  • El objeto 鈥渢his鈥 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 鈥渁ppendChild鈥 agrega un 鈥渉ijo鈥 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鈥SAS 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 鈥渜ue 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(鈥渕ensaje 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 鈥渃onstructor鈥 esto es como escribir 鈥渇unction鈥 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 = 鈥渢ierra鈥;
}
} = 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 = 鈥渢ierra鈥;
}
}

var cauchin = new Pakiman(鈥淐auchin鈥); = 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(鈥淐auchin鈥, 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[鈥淐auchin鈥漖 = 鈥渧aca.png鈥;
imagenes[鈥淧okacho鈥漖 = 鈥減ollo.png鈥;
imagenes[鈥淭ocinauro鈥漖 = 鈥渃erdo.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] = 鈥淗ola鈥; 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(鈥渦ltimo鈥), 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[鈥渘ombre鈥漖 = 鈥淧latzi鈥; 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=鈥減akiman.js鈥></script>
<script src=鈥減aki.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(鈥淐auchin鈥, 100, 30));
coleccion.push(new Pakiman(鈥淧okacho鈥, 80, 50));
coleccion.push(new Pakiman(鈥淭ocinauro鈥, 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(鈥淐auchin鈥, 100, 30));
coleccion.push(new Pakiman(鈥淧okacho鈥, 80, 50));
coleccion.push(new Pakiman(鈥淭ocinauro鈥, 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鈥gresivo.

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 鈥渧ariable.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 鈥渇unciones 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: 鈥淧akiman鈥.

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 鈥榬鈥 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 鈥渙bjeto鈥 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?

![](

Me inspira ver este tipo de clases, la imaginaron explota inventando un mundo. Intente romper c贸digo para agregar otras cosas, pero aun no me salen. Espero seguir aprendiendo

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 鈥渕ostrar鈥

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 鈥渢his鈥:
creo que a lo que 鈥渢his鈥 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();
}