From 9651b8b5b25f699e3de24296c6d8bf9033b9bd72 Mon Sep 17 00:00:00 2001
From: Alex Ortigosa <alexortigosa179@gmail.com>
Date: Wed, 15 Sep 2021 19:12:40 +0200
Subject: [PATCH] =?UTF-8?q?Fin=20secci=C3=B3n=207?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/classes/class.js                   | 78 ++++++++++++++++++++
 assets/js/classes/constructores-multiples.js | 33 +++++++++
 assets/js/classes/esnext.js                  | 31 ++++++++
 assets/js/classes/problema.js                | 37 ++++++++++
 assets/js/classes/singleton.js               | 32 ++++++++
 assets/js/classes/sub-classes.js             | 70 ++++++++++++++++++
 index.html                                   |  8 +-
 7 files changed, 288 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/classes/class.js
 create mode 100644 assets/js/classes/constructores-multiples.js
 create mode 100644 assets/js/classes/esnext.js
 create mode 100644 assets/js/classes/problema.js
 create mode 100644 assets/js/classes/singleton.js
 create mode 100644 assets/js/classes/sub-classes.js

diff --git a/assets/js/classes/class.js b/assets/js/classes/class.js
new file mode 100644
index 0000000..03087ff
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/assets/js/classes/constructores-multiples.js b/assets/js/classes/constructores-multiples.js
new file mode 100644
index 0000000..72e0c23
--- /dev/null
+++ b/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();
\ No newline at end of file
diff --git a/assets/js/classes/esnext.js b/assets/js/classes/esnext.js
new file mode 100644
index 0000000..b8e4324
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/assets/js/classes/problema.js b/assets/js/classes/problema.js
new file mode 100644
index 0000000..b492ee5
--- /dev/null
+++ b/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();
\ No newline at end of file
diff --git a/assets/js/classes/singleton.js b/assets/js/classes/singleton.js
new file mode 100644
index 0000000..761d967
--- /dev/null
+++ b/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}`)
\ No newline at end of file
diff --git a/assets/js/classes/sub-classes.js b/assets/js/classes/sub-classes.js
new file mode 100644
index 0000000..a74b69f
--- /dev/null
+++ b/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();
\ No newline at end of file
diff --git a/index.html b/index.html
index 08e3536..a67f267 100644
--- a/index.html
+++ b/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>
\ No newline at end of file