Fin sección 7

assets/js/classes/class.js

@@ -0,0 +1,78 @@
+class Persona {
+
+    static _conteo = 0;
+    static get conteo(){
+        return Persona._conteo + ' instancias';
+    }
+
+    static mensaje(){
+        console.log(this.nombre); // undefined
+        console.log('Hola a todos, soy un método estático');
+    }
+
+    nombre = '';
+    codigo = '';
+    frase  = '';
+    comida = '';
+
+    constructor(nombre = 'Sin nombre', codigo = 'Sin código', frase = 'Sin frase'){
+        // if (!nombre) throw Error('Necesitamos el nombre');
+
+        this.nombre = nombre;
+        this.codigo = codigo;
+        this.frase  = frase;
+
+        Persona._conteo++;
+    }
+
+    set setComidaFavorita(comida){
+        this.comida = comida.toUpperCase();
+    }
+
+    get getComidaFavorita(){
+        return `La comida favorita de ${this.nombre} es ${this.comida}`;
+    }
+
+    quienSoy(){
+        console.log(`Soy ${this.nombre} y mi identidad es ${this.codigo}`);
+    }
+
+    miFrase(){
+        this.quienSoy();
+        console.log(`${this.codigo} dice: ${this.frase}`);
+    }
+
+}
+
+
+const spiderman = new Persona('Peter Parker','Spiderman','Te atraparé!');
+const ironman = new Persona('Tony Stark','Ironman','Yo soy Ironman');
+
+
+// console.log(spiderman);
+// console.log(ironman);
+
+// spiderman.quienSoy();
+// ironman.quienSoy();
+
+spiderman.miFrase();
+// ironman.miFrase();
+
+spiderman.setComidaFavorita = 'El pie de cereza de la tía May';
+// spiderman.nemesis = 'Duende Verde';
+
+console.log(spiderman.getComidaFavorita);
+
+console.log(spiderman);
+
+
+console.log('-----------------------');
+
+// Persona._conteo = 2;
+console.log('Conteo estático:', Persona._conteo);
+console.log('Conteo con un Get Estático:', Persona.conteo);
+Persona.mensaje();
+
+Persona.propiedadExterna = 'Hola Mundo';
+console.log(Persona.propiedadExterna);
+console.log(Persona);

assets/js/classes/constructores-multiples.js

@@ -0,0 +1,33 @@
+class Persona {
+
+    static porObjeto({nombre, apellido, pais}){
+        return new Persona(nombre, apellido, pais);
+    }
+
+    constructor(nombre, apellido, pais){
+        this.nombre = nombre;
+        this.apellido = apellido;
+        this.pais = pais;
+    }
+
+    getInfo(){
+        console.log(`info: ${this.nombre}, ${this.apellido}, ${this.pais}`);
+    }
+}
+
+
+const nombre1   = 'Melissa',
+      apellido1 = 'Flores',
+      pais1     = 'Honduras';
+
+const fher = {
+    nombre:   'Fernando',
+    apellido: 'Herrera',
+    pais:     'Costa Rica'
+}
+
+const persona1 = new Persona(nombre1,apellido1, pais1);
+const persona2 = Persona.porObjeto(fher)
+
+persona1.getInfo();
+persona2.getInfo();

assets/js/classes/esnext.js

@@ -0,0 +1,31 @@
+class Rectangulo {
+
+    #area = 0;
+
+    constructor(base = 0, altura = 0){
+        this.base = base;
+        this.altura = altura;
+
+        this.#area = base * altura;
+    }
+
+    #calcularArea(){
+        return console.log(this.#area * 2);
+    }
+
+    get calcular(){
+        return this.#calcularArea;
+    }
+
+}
+
+const rectangulo = new Rectangulo(10,15);
+// rectangulo.area = 100; // No deberia poder hacer esto, por eso usaremos propiedades privadas
+rectangulo.calcular()
+
+console.log(rectangulo);
+
+const numeroString = '40'
+
+console.log('Numero',numeroString)
+console.log('Numero',numeroString * 1)

assets/js/classes/problema.js

@@ -0,0 +1,37 @@
+const alex = {
+    nombre: 'Alejandro',
+    edad: 28,
+    imprimir(){
+        console.log(`Nombre: ${this.nombre} - Edad: ${this.edad}`)
+    }
+}
+
+const pedro = {
+    nombre: 'Pedro',
+    edad: 15,
+    imprimir(){
+        console.log(`Nombre: ${this.nombre} - Edad: ${this.edad}`)
+    }
+}
+
+// alex.imprimir();
+
+
+// OK esto se debe de crear con la palabra new
+// No es recomendable usar este tipo de "clases", esto se usaba en navegadores mas viejos
+function Persona(nombre, edad) {
+    console.log('Se ejecutó esta línea');
+
+    this.nombre = nombre;
+    this.edad = edad;
+
+    this.imprimir = function(){
+        console.log(`Nombre: ${this.nombre} - Edad: ${this.edad}`);
+    }
+}
+
+const maria = new Persona('María', 18);
+const melissa = new Persona('Melissa', 35);
+console.log(maria);
+maria.imprimir();
+melissa.imprimir();

assets/js/classes/singleton.js

@@ -0,0 +1,32 @@
+class Singleton {
+
+    static instancia; // undefined
+    nombre = '';
+
+    constructor(nombre = ''){
+
+        // const a = undefined; 
+        // console.log(a);   // undefined
+        // console.log(!a);  // true
+        // console.log(!!a); // false
+
+        console.log(Singleton.instancia)
+
+        if (!!Singleton.instancia){  // if (Singleton.instance) no seria lo mismo? -- !Singleton.instance negaria el valor en caso de que no hubiera nada  -- !!Singleton.instance volveria a negar la negación, produciendo un true 
+            return Singleton.instancia;
+        }
+
+        Singleton.instancia = this;
+        this.nombre = nombre;
+
+        // return this;
+    }
+
+}
+
+const instancia1 = new Singleton('Ironman');
+const instancia2 = new Singleton('Spiderman');
+const instancia3 = new Singleton('Black Panther');
+console.log(`Nombre en la instancia1 es: ${instancia1.nombre}`)
+console.log(`Nombre en la instancia2 es: ${instancia2.nombre}`)
+console.log(`Nombre en la instancia3 es: ${instancia3.nombre}`)

assets/js/classes/sub-classes.js

@@ -0,0 +1,70 @@
+class Persona {
+
+    static _conteo = 0;
+    static get conteo(){
+        return Persona._conteo + ' instancias';
+    }
+
+    static mensaje(){
+        console.log(this.nombre); // undefined
+        console.log('Hola a todos, soy un método estático');
+    }
+
+    nombre = '';
+    codigo = '';
+    frase  = '';
+    comida = '';
+
+    constructor(nombre = 'Sin nombre', codigo = 'Sin código', frase = 'Sin frase'){
+        // if (!nombre) throw Error('Necesitamos el nombre');
+
+        this.nombre = nombre;
+        this.codigo = codigo;
+        this.frase  = frase;
+
+        Persona._conteo++;
+    }
+
+    set setComidaFavorita(comida){
+        this.comida = comida.toUpperCase();
+    }
+
+    get getComidaFavorita(){
+        return `La comida favorita de ${this.nombre} es ${this.comida}`;
+    }
+
+    quienSoy(){
+        console.log(`Soy ${this.nombre} y mi identidad es ${this.codigo}`);
+    }
+
+    miFrase(){
+        this.quienSoy();
+        console.log(`${this.codigo} dice: ${this.frase}`);
+    }
+
+}
+
+class Heroe extends Persona{
+
+    clan = 'Sin clan';
+
+    constructor(nombre, codigo, frase){
+
+        super(nombre, codigo, frase);
+
+        this.clan = 'Los Avengers';
+
+    }
+
+    quienSoy(){
+        console.log(`Soy ${this.nombre}, ${this.clan}`);
+        super.quienSoy();
+    }
+
+}
+
+const spiderman = new Heroe('Peter Parker','Spiderman','Te atraparé!');
+// const spiderman = new Heroe('Pepe');
+
+console.log(spiderman);
+spiderman.quienSoy();

index.html

@@ -34,6 +34,12 @@ <h1>Hola Mundo</h1>
     <!-- <script src="assets/js/bases/protip-ternario.js"></script> -->
     <!-- <script src="assets/js/bases/switch.js"></script> -->
     <!-- <script src="assets/js/ciclos/while-do-while.js"></script> -->
-    <script src="assets/js/ciclos/for.js"></script>
+    <!-- <script src="assets/js/ciclos/for.js"></script> -->
+    <!-- <script src="assets/js/classes/problema.js"></script> -->
+    <!-- <script src="assets/js/classes/class.js"></script> -->
+    <!-- <script src="assets/js/classes/sub-classes.js"></script> -->
+    <!-- <script src="assets/js/classes/esnext.js"></script> -->
+    <!-- <script src="assets/js/classes/singleton.js"></script> -->
+    <script src="assets/js/classes/constructores-multiples.js"></script>
 </body>
 </html>