# 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()`