Lista de librerias https://frostqui.github.io/mejores-librerias-javascript-2017
Liberia recomendada https://michalsnik.github.io/aos/ animaciones https://sarcadass.github.io/granim.js/examples.html Gradientes
Especificacion mas clara de JS https://github.com/airbnb/javascript/blob/master/README.md
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
}
}