Cacher is the code snippet organizer for pro developers

Class Cliente{
  constructor(nombre, apellido, saldo){
    this.nombre=nombre;
    this.apellido=apellido;
    this.saldo=saldo;
  }
}

var oscar= new Cliente('oscar','valenzuela','1000000');

Class Persona extends Cliente{
  constructor(rut){
  super(nombre, apellido, saldo);
  this.rut=rut;
  }
}
/////////////////////////////////////////////////////////////////
                            CALLBACKS
/////////////////////////////////////////////////////////////////
function callback(ciudad) {
   console.log(ciudad);
}
ciudades.forEach(callback);

// Listado de paises
const paises = ['Francia', 'España', 'Portugal', 'Australia', 'Inglaterra', 'Irlanda'];

// Un nuevo pais se agrega despues de 2 segundos...
function nuevoPais(pais, callback) {
    setTimeout(function() {
        paises.push(pais);
        callback();
    }, 2000  );
}
// Los paises se muestran despues de 1 segundo
function mostrarPaises() {
    setTimeout(function() {
        let html = '';
        paises.forEach(function(pais) {
            html += `${pais}`;
        });
        document.body.innerHTML = html;
    }, 1000 );
}

console.log("")//Muestra por consola un valor

typeof()//Muestra el tipo que esla variable

parseInt("")//convierte en int un string

parseFloat("")//convierte en un flotante

toString()//convierte en un string un atributo

variable.length//muestra la cantidad de caracteres de un string

variable.toUpperCase()//convierte en mayusculas

variable.toLowerCase()/convierte en minusculas

variable.substring(1,10)//saca un substring

variable.replace('enter sandman', 'Nothing else matters')//reemplaza una cadena por otra

alert()// Da un alert

prompt("ingrese el valor")// un cuadro de dialogo para ingresar algo

confirm()// confirmas, devuelve true or false

switch(valor){
case "valor": hace algo; 
break;
case "valor2": hace algo; 
break;
}

continue// sirve para pasar lo que viene despues del continue en un for,

break // sirve para salir de una iteracion

elemento.indexOf('@');//devuelve un -1 si no encuentra

/////////////////////////////////////////////////ARREGLOS//////////////////////////////////////////////

arreglo.push("variable")// agrega un valor AL FINAL

arreglo.unshift("variable")//agrega un valor al PRINCIPIO

arreglo.pop()//Elimina el de AL FINAL

arreglo.shift()//Elimina el del PRINCIPIO

arreglo.reverse()//te da vuelta el arreglo

arreglo.sort();//lo ordena

arreglo.splice(0,2) //quita elementos en un rango, del indice 0 y quita 2 elementos

arreglo.join('separador')//"separador" toma el valor de la coma

arreglo.forEach(function(arreglo) {
    console.log(`${arreglo}`);
});

for(let cosa in arreglo) {console.log(`${cosa} : ${arreglo[cosa]}`);}

for(let cosa of cosas){console.log(cosa)};//se puede recorrer los nodos

arreglo.find(el=> el>3);

/////////////////////////////////////OBJETOS/////////////////////////////////////////////////////
let yo={
  nombre:"oscar",
  edad:22,
  pais:"chile"
}

delete yo.nombre;//elimina un atributo del objeto

let a="hola", b="mundo2";
let myObj={
  a,b
}

let estudiantesNew=estudiantes.map(estudiante=>estudiante.nombre);//recorre el areglo de estudiantes y saca solo el nombre

let estudiantesNew=estudiantes.filter(estudiante=>estudiante.calificacion >10);//recorre el areglo de estudiantes y saca solo los que tengan nota mayor a 10 pero solod evuelve los objetos que lo contienen, si lo combinas con un map buscando nombres te arroja los nombres de las personas

//////////////////////////////////////FUNCIONES///////////////////////////////////////////////////////////
function restar(a){
  return function(b){
    return a-b;
  }
}
let miResta=restar(5)(3);

(function(a,b){return a*b})(5,2);//funcion autoinvocada

let suma=(a,b)}=>a+b;

function Boy(edad){
  this.edad=0;
  setInterval(()=>{
    edad++
  },1000)
}
let Oscar=new Boy();//instanciar la funcion, porque ocupa un this.

const cargarPosts = document.querySelector('#cargar').addEventListener('click', cargarAPI);



function cargarAPI() {
     // crear el objeto
    const xhr = new XMLHttpRequest();
     // abrir la conexion
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
     // Carga y leer datos
    xhr.onload = function() {
         if(this.status === 200) {
             const respuesta = JSON.parse( this.responseText );//Se convierten los datos a JSON y se entregan a una variable
            //se crea el template
             let contenido = '';
             //con un forEach se toma cada objeto json y se agrega al template
             respuesta.forEach(function(post) {
               contenido += `
                    <h3>${post.title}</h3>
                    <p>${post.body}</p>
               `;
             });
             //se agrega el template al HTML Listado
             document.getElementById('listado').innerHTML = contenido;
         }
    }
    // enviar la conexion
    xhr.send();
}

/////////////////////////////////////////////////////////////////////////////////////////////////////
                                            Fetch API
/////////////////////////////////////////////////////////////////////////////////////////////////////
document.getElementById('txtBtn').addEventListener('click', cargarTXT);
document.getElementById('jsonBtn').addEventListener('click', cargarJSON);
document.getElementById('apiBTN').addEventListener('click', cargarREST);

function cargarTXT() {
    fetch('datos.txt')
        .then(function(res) {
            return res.text();
        })
        .then(function(empleados) {
            console.log(empleados);
            document.getElementById('resultado').innerHTML = empleados;
        })
        .catch(function(error) {
            console.log(error);
        });
}

function cargarJSON() {
    fetch('empleados.json')
        .then(function(res) {
            return res.json();
        })
        .then(function(data){
            let html = '';
            data.forEach(function(empleado) {
                html += `
                    <li>${empleado.nombre} ${empleado.puesto}</li>
                `;
            })
            document.getElementById('resultado').innerHTML = html;
        })
        .catch(function(error) {
            console.log(error);
        });
}

function cargarREST() {
    fetch('https://picsum.photos/list')
        .then(function(res) {
            return res.json();
        })
        .then(function(imagenes) {
            let html ='';

            imagenes.forEach(function(imagen) {
                    html += `
                        <li>
                            <a target="_blank" href="${imagen.post_url}">Ver Imagen</a>
                            ${imagen.author}
                        </li>
                    `;
            });
            document.getElementById('resultado').innerHTML = html;
        })
}

var elemento=document.getElementById('');//aparece el encabezado

var elemento=document.getElementById('').id;//retorna el id del elemento

var elemento=document.getElementById('').className;//retorna la clase del elemento

var elemento=document.getElementById('').textContent;//retorna el texto del elemento

elemento.style.background = '#333';//cambiamos el estilo del background

elemento.innerText = 'Los Mejores Cursos';//cambiamos el texto

elemento=document.querySelector('#encabezado');//tomamos la ID de un elemento

elemento=document.querySelector('.encabezado');//tomamos la CLASE de un elemento

elemento=document.querySelectorAll('img');//retorna multiples objetos

elemento=document.getElementsByClassName('enlace')[0];//tomamos todos los con la clase enlace y escogemos el de valor 0

elemento=document.querySelector('ul').getElementsByClassName('links');//primero toma una lista y despues los elementos links

elemento=document.getElementsByTagName('li');//toma elementos HTML

elemento=document.querySelectorAll('#id .lista');//retorna la lista con los objetos de .lista que estan en la lista #id

elemento=document.createElement('a');//Crea un elemento de tipo a
elemento.className = 'lista';//se le agrega una clase
elemento.id = 'nuevo-id';//se le agrega un id
elemento.setAttribute('href','#');//se le agregan atributos
elemento.textContent='nuevo enlace';//se le agrega un texto
elemento.ClassList.toggle('lista');//el togle añade o quita algo, si esta no lo pone sino lo pone lo que esta en el parentsis
document.querySelector('#id_atributo').appendChild(enlace);//se selecciona al padre y se le agrega el hijo pero siempre va a alfinal

elPadre.replaceChild(nuevoEncabezado,anterior);//reemplaza un elemento, se pone el nuevo y despues el anterior, pero tiene que haber un padre

elemento.remove();//remueve un objeto que estaen el dom

elemento.innerHTML='
<td>
<img src="${curso.imagen}">
</td>
';//agregar contenido html a un elemento

document.querySelector('#vaciar-carrito').addEventListener('click',funcion);//boton buscar

function funcion(e){
  e.preventDefault();//para que no se envie de inmediato
  console.log('aqui vamos');
}

document.querySelector('#encabezado').addEventListener('click',cambiarTitulo);//funcion para un encabezado 

function cambiarTitulo(e){
  if(e.target.innerText!='nuevo encabezado'){
		e.target.innerText='nuevo encabezado';
	}else{
		e.target.innerText='esta wea es nueva';}
}

// click
boton.addEventListener('click', obtenerEvento);

// Doble CLick
boton.addEventListener('dblclick', obtenerEvento);

// Mouse Enter
boton.addEventListener('mouseenter', obtenerEvento);

// mouse Leave
boton.addEventListener('mouseleave', obtenerEvento);

// Mouse over
boton.addEventListener('mouseover', obtenerEvento);

// mouse Out
boton.addEventListener('mouseout', obtenerEvento);

// MouseDown (click y mantener presionado)
boton.addEventListener('mousedown', obtenerEvento);

// Mouse Up (al soltar)
boton.addEventListener('mouseup', obtenerEvento);

// MouseMove
boton.addEventListener('mousemove', obtenerEvento);

// esperar a submit
formulario.addEventListener('submit', obtenerEvento);

// Eventos para el INPUT
busqueda.addEventListener('keydown', obtenerEvento);
busqueda.addEventListener('keyup', obtenerEvento);
busqueda.addEventListener('keypress', obtenerEvento);
busqueda.addEventListener('focus', obtenerEvento);
busqueda.addEventListener('blur', obtenerEvento);//cuando presiona fuera del input 
busqueda.addEventListener('cut', obtenerEvento);
busqueda.addEventListener('copy', obtenerEvento);
busqueda.addEventListener('paste', obtenerEvento);
busqueda.addEventListener('input', obtenerEvento);

button.addEventListener('animationstart',funcion);
button.addEventListener('animationstart',()=>{});

button.addEventListener('animationend',funcion);
button.addEventListener('animationend',()=>{button.classList.remove('animate')});//este lo elimina, para que vuelta a empezar solo pon un evento con click y que agrege la clase para que vuelva a empezar

window.addEventListener('scroll',funcion);

e.stopPropagation();//impide que se ejecuten otros eventListener 

e.target.parentElement.parentElement.remove();//remueve el objeto padre del padre

e.target.classList.contains('nombre_clase');//seleccionamos el objeto con la aclse nombre_clase

e.target.childen[0];//el children da un arreglo con los elementos hijos y con el [] seleccionamos el elemento del array de hijos

document.addEventListener('DOMContentLoaded', inicioApp);//sirve para cuando parte la pagina

function inicioApp(){
  boton.disabled=true;//deja disable un boton o un elemento
}

setTimeout(function(){
    spinnerGif.style.display='none';
  document.querySelector('#loaders').appendChild(enviado);
  setTimeout(function(){
    enviado.remove();
  },5000);
  
}, 3000);//3000 son 3 seg y despues se va.
    

function addDom(e){
  if(e.key==='Enter'){
    let task=this.value;
    this.value='';//lo deja vacio
  }
}