Javascript Avanzado

Clases

​​​​1. ¿Qué es una clase?
​​​​2. Atributos y métodos
​​​​3. Constructor
​​​​4.- this. 
​​​​5. Instancia
​​​​6. Herencia
​​​​7. Polimorfismo 

¿Qué es una clase?

JavaScript no es un lenguaje orientado a objetos, es más un lenguaje de propósito general, pero con el paso del tiempo javascript ha intentado integrar la programación orientada a objetos.
Una clase es un modelo creador a partir de las caracteristicas de una abstracción de un objeto, una clase puede tener caracterísicas (atributos) y puede realizar acciones (métodos).
Ejemplo:

class Persona {

}

El nombre de las clases siempre debe comenzar en mayúsculas, adicionalmente se puede usar camelCase.

Métodos y atributos

Atributos

Los atributos son aquellos que definen las cualidades de algo, por ejemplo los atributos de una persona son:

• Nombre
• Apellidos
• Edad
  Estos atributos son los que definen a una persona.

Métodos

Los métodos son las acciones que se pueden realizar, tomando como ejemplo a una persona, una persona puede:

• Caminar
• Hablar
• Saltar
• Escribir

Los métodos son todo aquello que puede hacer un modelo o clase.

Ejemplo:

class Persona {
    nombre;
    apellidos;
    edad;
    correr(){}
    caminar(){}
    saltar(){}
    escribir(){}
}

Constructor

La tarea de un constructor es inicializar el objeto a partir de una instancia a la clase, a este constructor se le asignan los valores iniciales del nuevo objeto.
Ejemplo:

class Persona {
    nombre;
    apellidos;
    edad;
    
    constructor(nombre, apellido, edad) {
    
    }
    
    correr(){}
    caminar(){}
    saltar(){}
    escribir(){}
}

this

El operado this hace referencia a alguna propiedad dentro de donde se encuentre, esta referencia puede abarcar desde un atributo hasta un método.

class Persona {
    nombre;
    apellidos;
    edad;
    
    constructor(nombre, apellido, edad) {
        this.nombre = nombre;
        this.apellidos = apellido;
        this.edad = edad;
    }
    
    correr(){}
    caminar(){}
    saltar(){}
    escribir() {
        this.nombre = "Jorge";
        this.escribir()M
    }
}

Actividades: Realizar una clase con al menos 4 atributos y 2 métodos

instancia

Una instancia es crear un nuevo objeto de una clase, este nuevo objeto tendrá todas las caracteristicas de la clase.
Ejemplo:
let nuevaPersona = new Persona('John', 'Doe', 30);

Herencia

En el mundo de la programación orientada a objetos (POO) existe algo llamado herencia, la cual tiene ese nombre debido a que una clase padre hereda todas sus características a una nueva clase hija, estas características son tanto métodos como atributos y estos mismos se suman a los nuevos métodos y atributos de la clase hija, para este ejemplo , utilizaremos una nueva clase llamada Alumno la cual heredará los métodos y atributos de la clase Persona, que en este caso actuaría como clase Padre, para afirmar que una clase hereda se usa la palabra reservada extends, esta se colocará después del nombre de la clase.

class Alumno extends Persona {
    boleta;
    escuela; 
    
    constructor(boleta,escuela) {
        this,escuela  = escuela;
        this.boleta = boleta
    }
    
    estudiar() {}
}

Polimorfismo

El polimorfismo se refie a que un objeto pueda actuar de diferentes formas y no solo de una forma.

let p1 = new Persona("Mike", "Williams", 2);
let p2 = new Persona("John", "Doe", 4);
p1.escribir("name");
p2.escribir("another name");

Actividades: Hacer una instancia de la clase que crearon la clase anterior y crear una nueva que reciba herencia de esa clase.

Try catch

Con este bloque de codigo que señala un bloque de instrucciones a intentar (try), y especifica una respuesta si se produce una excepción (catch).
catch solo se ejecuta si dentro del try ocurre un error.
Ejemplo

const numeros = [0,1,2,3,4,5,6]

try{
    numeros.forEach((e) => e>5)
}catch(error){
    console.log(error)
}

Modules

Los módulos son partes de código que se pueden usar en varios archvios , estos modules se usan en proyectos un poco mas grandes que llegan a usar mas de 1 archvio de JS

export function suma (n1,n2){
    return n1+n2
}

Para importar algun modulo que vayamos a usar , usaremos la siguiente syntaxis

import {suma} from './index.js'

Object

​​​​1. keys
​​​​2. values
​​​​3. Entries

Keys

La propiedad del constructor Object "keys" devuelve un arreglo de valores con el indice

const n = ["a","b","c","d"]
console.log(Object.keys(n))

Values

La propiedad del constructor Object "value" devuelve un arreglo de valores de cada indice

const n = ["a","b","c","d"]
console.log(Object.values(n))

Entries

La propiedad del constructor Object "entries" devuelve un arreglo que tiene dos valores en cada casilla , [value,index]

const n = ["a","b","c","d"]
console.log(Object.entries(n))

El DOM (Document Object Model)

El dom son los elenmentos con los que se puede interactuar en el navegador, gracias a este podemos crear aplicaciones reactivas y no solo estáticas.

Actividad: Consumir la API y crear una interfaz con esos mismos datos de la api, utilizando Drag and drop

LocalStorage

​​​​1. ¿Qué es el local Storage?
​​​​2. Guardar valores en el local Storage
​​​​3. Obtener valores del local Storage
​​​​4. Borrar valores de local Storage

¿Qué es local storage?

Local Storage nos permite guardar informacion del momento dentro del navegador.

Guardar valores en local storage

Para guardar valores en local Storage debemos guardarlos con el método localStorage.setItem() dentro de los paréntesis podemos especificar el nombre del item y el otro parámetro es el valor, normalmente se guarda con formato JSON, para eso usamos un convertirdor proporcionado por JSON el método JSON.stringify();
Ejemplo:
localStorage.setItem('item', JSON.stringify(Persona))

Obtener valores de local storage

En caso de tener datos almacenados en local storage podemos extraerlos de esta forma: localStorage.getItem("item")
Así obtendremos los datos previamente almacenados en local storage.

Borrar valores de local Storage

Para borrar elementos del localStorage existen dos métodos, removeItem() y clear().
1.- localStorage.removeItem() Obtiene un elemento apartir de un nombre lo selecciona y a partir del nombre y posteriormente lo borra del local storage.
2.- localStorage.clear() , elimina todos los elementos dentro del local Storage dejándolo completamente vacío.

Actividad: Guardar datos de un usuario en local Storage y obtener los valores con las funciones de getItem()