
APLICACIONES CON JAVASCRIPT
GUIÍA DOMINA JAVASCRIPT
GUÍA JAVASCRIPT
EJERCICIOS Y EJEMPLOS PRÁCTICOS

LA MEJOR MANERA DE APRENDER ES HACIENDO PROYECTOS REALES
ENVIO DE MAIL Y VALIDACION CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html>
<head>
<link href=»https://fonts.googleapis.com/icon?family=Material+Icons» rel=»stylesheet»>
<link href=»https://fonts.googleapis.com/css?family=Raleway:100,300″ rel=»stylesheet»>
<link type=»text/css» rel=»stylesheet» href=»css/tailwind.min.css» media=»screen,projection»/>
<link rel=»stylesheet» href=»css/custom.css»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>
<title>Enviar Email</title>
</head>
<body>
<div class=»container mx-auto mt-20 bg-white»>
<header id=»header» class=»bg-pink-800 p-3 font-bold»>
Enviar Nuevo Mail
</header>
<form id=»enviar-mail» class=»py-10 px-5 max-w-lg mx-auto»>
<div class=»mb-10″>
<label for=»email»>Para:</label>
<input class=»bg-gray-100 border shadow p-3 w-full» id=»email» type=»email»>
</div>
<div class=»mb-10″>
<label for=»asunto»>Asunto</label>
<input class=»bg-gray-100 border shadow p-3 w-full» id=»asunto» type=»text»>
</div>
<div class=»mb-10″>
<label for=»mensaje»>Mensaje</label>
<textarea class=»bg-gray-100 border shadow p-3 w-full» id=»mensaje»></textarea>
</div>
<div id=»spinner»>
<div class=»sk-chase»>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
</div>
</div>
<div class=»flex justify-between»>
<button
id=»enviar» class=»w-full bg-blue-600 px-2 py-5 text-white items-center mr-5 uppercase font-bold items-center flex justify-center»
type=»submit»
>Enviar
<i class=»material-icons right text-white ml-3″>send</i>
</button>
<button
id=»resetBtn»
class=»w-full bg-green-600 px-2 py-5 text-white items-center uppercase font-bold items-center flex justify-center»
type=»button»
>Resetear Form
<i class=»material-icons right ml-3″>delete</i>
</button>
</div>
</form>
</div>
<script src=»js/app.js»></script>
</body>
</html>
Javascript
// Variables
const btnEnviar = document.querySelector(‘#enviar’);
const btnReset = document.querySelector(‘#resetBtn’);
const formulario = document.querySelector(‘#enviar-mail’);
// Variables para campos
const email = document.querySelector(‘#email’);
const asunto = document.querySelector(‘#asunto’);
const mensaje = document.querySelector(‘#mensaje’);
const er = /^(([^<>()\[\]\\.,;:\s@»]+(\.[^<>()\[\]\\.,;:\s@»]+)*)|(«.+»))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
eventListeners();
function eventListeners() {
// Cuando la app arranca
document.addEventListener(‘DOMContentLoaded’, iniciarApp);
// Campos del formulario
email.addEventListener(‘blur’, validarFormulario);
asunto.addEventListener(‘blur’, validarFormulario);
mensaje.addEventListener(‘blur’, validarFormulario);
// Reinicia el formulario
btnReset.addEventListener(‘click’, resetearFormulario);
// Enviar email
formulario.addEventListener(‘submit’, enviarEmail);
}
// Funciones
function iniciarApp() {
btnEnviar.disabled = true;
btnEnviar.classList.add(‘cursor-not-allowed’, ‘opacity-50’)
}
// Valida el formulario
function validarFormulario(e) {
if(e.target.value.length > 0 ) {
// Elimina los errores…
const error = document.querySelector(‘p.error’);
if(error) {
error.remove();
}
e.target.classList.remove(‘border’, ‘border-red-500’);
e.target.classList.add(‘border’, ‘border-green-500’);
} else {
e.target.classList.remove(‘border’, ‘border-green-500’);
e.target.classList.add(‘border’, ‘border-red-500’);
mostrarError(‘Todos los campos son obligatorios’);
}
if(e.target.type === ‘email’) {
if( er.test( e.target.value ) ) {
// Elimina los errores…
const error = document.querySelector(‘p.error’);
if(error) {
error.remove();
}
e.target.classList.remove(‘border’, ‘border-red-500’);
e.target.classList.add(‘border’, ‘border-green-500’);
} else {
e.target.classList.remove(‘border’, ‘border-green-500’);
e.target.classList.add(‘border’, ‘border-red-500’);
mostrarError(‘Email no válido’);
}
}
if( er.test( email.value ) && asunto.value !== » && mensaje.value !== ») {
btnEnviar.disabled = false;
btnEnviar.classList.remove(‘cursor-not-allowed’, ‘opacity-50’)
}
}
function mostrarError(mensaje) {
const mensajeError = document.createElement(‘p’);
mensajeError.textContent = mensaje;
mensajeError.classList.add(‘border’, ‘border-red-500’, ‘background-red-100’, ‘text-red-500’, ‘p-3’, ‘mt-5’, ‘text-center’, ‘error’);
const errores = document.querySelectorAll(‘.error’);
if(errores.length === 0) {
formulario.appendChild(mensajeError);
}
}
// Envia el email
function enviarEmail(e) {
e.preventDefault();
// Mostrar el spinner
const spinner = document.querySelector(‘#spinner’);
spinner.style.display = ‘flex’;
// Después de 3 segundos ocultar el spinner y mostrar el mensaje
setTimeout( () => {
spinner.style.display = ‘none’;
// Mensaje que dice que se envió correctamente
const parrafo = document.createElement(‘p’);
parrafo.textContent = ‘El mensaje se envió correctamente’;
parrafo.classList.add(‘text-center’, ‘my-10’, ‘p-2’, ‘bg-green-500’, ‘text-white’, ‘font-bold’, ‘uppercase’)
// Inserta el parrafo antes del spinner
formulario.insertBefore(parrafo, spinner);
setTimeout(() => {
parrafo.remove(); // Eliminar el mensaje de éxito
resetearFormulario();
}, 5000);
}, 3000 );
}
// Función que resetea el formulario
function resetearFormulario() {
formulario.reset();
iniciarApp();
}
API COTIZADOR DE CRYPTONOMEDAS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Cotizar Criptomonedas</title>
<link rel=»stylesheet» href=»css/normalize.css»>
<link rel=»stylesheet» href=»css/skeleton.css»>
<link rel=»stylesheet» href=»css/app.css»>
</head>
<body>
<div class=»container»>
<div class=»row»>
<div class=»one-half column»>
<img src=»img/cryptomonedas.png»>
</div>
<div class=»one-half column»>
<form id=»formulario»>
<div class=»row»>
<label>Elige tu Moneda</label>
<select
class=»u-full-width»
id=»moneda»
name=»moneda»
>
<option value=»»>Elige tu moneda</option>
<option value=»USD»>Dolar Estadounidense</option>
<option value=»MXN»>Peso Mexicano</option>
<option value=»GBP»>Libras</option>
<option value=»EUR»>Euros</option>
</select>
</div>
<div class=»row»>
<div>
<label>Elige tu Criptomoneda</label>
<select
class=»u-full-width»
id=»criptomonedas»
name=»criptomoneda»
>
<option value=»» disabled selected>Elige tu criptomoneda</option>
</select>
</div>
</div>
<input class=»button-primary u-full-width» type=»submit» value=»Cotizar» />
<div id=»resultado» class=»resultado»></div>
</form>
</div>
</div>
</div>
<script src=»js/app.js»></script>
</body>
</html>
Javascript
const criptomonedasSelect = document.querySelector(‘#criptomonedas’);
const monedaSelect = document.querySelector(‘#moneda’);
const formulario = document.querySelector(‘#formulario’);
const resultado = document.querySelector(‘#resultado’);
const objBusqueda = {
moneda: »,
criptomoneda : »
}
// Crear un Promise
const obtenerCriptomonedas = criptomonedas => new Promise( resolve => {
resolve(criptomonedas);
});
document.addEventListener(‘DOMContentLoaded’, () => {
consultarCriptomonedas();
formulario.addEventListener(‘submit’, submitFormulario);
criptomonedasSelect.addEventListener(‘change’, leerValor);
monedaSelect.addEventListener(‘change’, leerValor);
})
function consultarCriptomonedas() {
const url = ‘https://min-api.cryptocompare.com/data/top/mktcapfull?limit=10&tsym=USD’;
fetch(url)
.then( respuesta => respuesta.json() )
.then( resultado => obtenerCriptomonedas(resultado.Data))
.then( criptomonedas => selectCriptomonedas(criptomonedas) )
}
function selectCriptomonedas(criptomonedas) {
criptomonedas.forEach( cripto => {
const { FullName, Name } = cripto.CoinInfo;
const option = document.createElement(‘option’);
option.value = Name;
option.textContent = FullName;
criptomonedasSelect.appendChild(option);
})
}
function leerValor(e) {
objBusqueda[e.target.name] = e.target.value;
}
function submitFormulario(e) {
e.preventDefault();
// validar
const { moneda, criptomoneda } = objBusqueda;
if(moneda === » || criptomoneda === » ) {
mostrarAlerta(‘Ambos campos son obligatorios’);
return;
}
// Consultar la API con los resultados
consultarAPI();
}
function mostrarAlerta(msg) {
const existeError = document.querySelector(‘.error’);
if(!existeError) {
const divMensaje = document.createElement(‘div’);
divMensaje.classList.add(‘error’);
// mensaje de eror
divMensaje.textContent = msg;
formulario.appendChild(divMensaje);
setTimeout(() => {
divMensaje.remove();
}, 3000);
}
}
function consultarAPI() {
const { moneda, criptomoneda } = objBusqueda;
const url = `https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${criptomoneda}&tsyms=${moneda}`;
mostrarSpinner();
fetch(url)
.then( respuesta => respuesta.json())
.then( cotizacion => {
mostrarCotizacionHTML(cotizacion.DISPLAY[criptomoneda][moneda]);
})
}
function mostrarCotizacionHTML(cotizacion) {
limpiarHTML();
const { PRICE, HIGHDAY, LOWDAY, CHANGEPCT24HOUR, LASTUPDATE} = cotizacion;
const precio = document.createElement(‘p’);
precio.classList.add(‘precio’);
precio.innerHTML = `El Precio es: <span>${PRICE}</span>`;
const precioAlto = document.createElement(‘p’);
precioAlto.innerHTML = `<p>Precio más alto del día <span>${HIGHDAY}</span>`;
const precioBajo = document.createElement(‘p’);
precioBajo.innerHTML = `<p>Precio más bajo del día <span>${LOWDAY}</span>`;
const ultimasHoras = document.createElement(‘p’);
ultimasHoras.innerHTML = `<p>Variación últimas 24 horas <span>${CHANGEPCT24HOUR}%</span>`;
const ultimaActualización = document.createElement(‘p’);
ultimaActualización.innerHTML = `<p>Última Actualización <span>${LASTUPDATE}</span>`;
resultado.appendChild(precio);
resultado.appendChild(precioAlto);
resultado.appendChild(precioBajo);
resultado.appendChild(ultimasHoras);
resultado.appendChild(ultimaActualización);
}
function limpiarHTML() {
while(resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}
}
function mostrarSpinner() {
limpiarHTML();
const spinner = document.createElement(‘div’);
spinner.classList.add(‘spinner’);
spinner.innerHTML = `
<div class=»bounce1″></div>
<div class=»bounce2″></div>
<div class=»bounce3″></div>
`;
resultado.appendChild(spinner);
}
API BUSCADOR DE TRABAJOS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github Jobs</title>
<link rel="stylesheet" href="css/tailwind.css">
</head>
<body class="bg-gray-200"><h1 class="mt-10 text-center text-4xl font-bold">Buscador Github Jobs</h1>
<form id="formulario" class="bg-teal-500 max-w-lg mx-auto mt-10 rounded p-6">
<div>
<input
type="text"
class="w-full p-3 rounded placeholder-gray-900 "
id="busqueda"
placeholder="Búsqueda por tecnología: ej. Node.js Java o C#"
><input
type="submit"
value="Buscar Vacantes"
class="bg-gray-800 text-white font-bold w-full uppercase mt-5 p-3 hover:bg-gray-700 cursor-pointer"
></div>
</form><div id="resultado" class="mt-10 container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg==" crossorigin="anonymous"></script>
<script src="js/app.js"></script></body>
</html>
Javascript
const formulario = document.querySelector(‘#formulario’);
const resultado = document.querySelector(‘#resultado’);
document.addEventListener(‘DOMContentLoaded’, () => {
formulario.addEventListener(‘submit’, validarBusqueda);
})
function validarBusqueda(e) {
e.preventDefault();
const busqueda = document.querySelector(‘#busqueda’).value;
if(busqueda.length < 3) {
mostrarMensaje(‘Búsqueda muy corta… Añade más información’);
return;
}
consultarAPI(busqueda);
}
function consultarAPI(busqueda) {
const githubUrl = `https://jobs.github.com/positions.json?search=${busqueda}`;
const url = `https://api.allorigins.win/get?url=${ encodeURIComponent(githubUrl) }`;
axios.get(url)
.then( respuesta => mostrarVacantes(JSON.parse( respuesta.data.contents)) );
}
function mostrarMensaje(msg) {
const alertaPrevia = document.querySelector(‘.alerta’);
if(!alertaPrevia) {
const alerta = document.createElement(‘div’);
alerta.classList.add(‘bg-gray-100’, ‘p-3’, ‘text-center’, ‘mt-3’, ‘alerta’);
alerta.textContent = msg;
formulario.appendChild(alerta);
setTimeout(() => {
alerta.remove();
}, 3000);
}
}
function mostrarVacantes(vacantes) {
while( resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}
if(vacantes.length > 0 ) {
resultado.classList.add(‘grid’);
vacantes.forEach(vacante => {
const { company, title, type, url } = vacante;
resultado.innerHTML += `
<div class=»shadow bg-white p-6 rounded»>
<h2 class=»text-2xl font-light mb-4″>${title}</h2>
<p class=»font-bold uppercase»>Compañia: <span class=»font-light normal-case»>${company} </span></p>
<p class=»font-bold uppercase»>Tipo de Contrato: <span class=»font-light normal-case»>${type} </span></p>
<a class=»bg-teal-500 max-w-lg mx-auto mt-3 rounded p-2 block uppercase font-xl font-bold text-white text-center» href=»${url}»>Ver Vacante</a>
</div>
`;
});
} else {
const noResultado = document.createElement(‘p’);
noResultado.classList.add(‘text-center’, ‘mt-10’, ‘text-gray-600’, ‘w-full’);
resultado.classList.remove(‘grid’);
noResultado.textContent = ‘No hay vacantes, intenta con otro término de búsqueda’;
resultado.appendChild(noResultado);
}
}
API BUSCADOR DE LETRAS DE CANCIONES CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Buscador de Letras - JSModerno</title>
<link
rel="stylesheet"
href="https://necolas.github.io/normalize.css/8.0.0/normalize.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main id="contenido" class="contenido">
<h1>Letras de Canciones</h1>
<div class="contenedor">
<div id="buscar" class="buscar">
<h2>Búsqueda</h2>
<p>Busca por artista y nombre:</p>
<p><span> * </span>Obligatorio</p>
<form action="#" id="formulario-buscar">
<div class="input">
<label for="artista">Artista: <span>*</span></label>
<input type="text" id="artista" placeholder="Artista" />
</div>
<div class="input">
<label for="cancion">Canción: <span>*</span></label>
<input type="text" id="cancion" placeholder="Nombre Canción" />
</div><div class="input enviar">
<input type="submit" value="Buscar" />
</div>
</form>
</div><div class="letra-resultado">
<h2></h2>
<div id="resultado"></div>
</div>
<div id="mensajes"></div>
</div>
</main><script src="js/app.js" type="module"></script>
</body>
</html>
Javascript
API.JS
import * as UI from «./interfaz.js»;
class API { constructor(artista, cancion) { this.artista = artista; this.cancion = cancion; }
consultarAPI() { console.log(«desde consultar api»);
//const url = `https://private-anon-fe04dde1a6-lyricsovh.apiary-mock.com/v1/${this.artista}/${this.cancion}`;
const url_ = `https://api.lyrics.ovh/v1/${this.artista}/${this.cancion}`; fetch(url_) .then((respuesta) => respuesta.json()) .then((resultado) => { const Lyrics = resultado; let prueba = JSON.stringify(Lyrics); prueba = JSON.parse(prueba);
UI.divResultado.textContent = `<p>${prueba.lyrics} a ver k sale</p>`; UI.headdingResultado.innerHTML = `<h2>LETRA DE LA CANCION DE ${this.artista} </h2> <pre>${prueba.lyrics}</pre>`; console.log(prueba); console.log(prueba.lyrics); }); } } export default API;
//////////////////
APP.JS
import * as UI from «./interfaz.js»;
import API from «./api.js»;
UI.formularioBuscar.addEventListener(«submit», buscarCancion);
function buscarCancion(e) {
e.preventDefault();
//leer formulario
const artista = document.querySelector(«#artista»).value;
const cancion = document.querySelector(«#cancion»).value;
if (artista == «» || cancion == «») {
UI.divMensajes.textContent = «Todos los campos son obligarorios»;
UI.divMensajes.classList.add(«error»);
setTimeout(() => {
UI.divMensajes.textContent = «»;
UI.divMensajes.classList.remove(«error»);
}, 2000);
return;
}
//consultar api
const busqueda = new API(artista, cancion);
busqueda.consultarAPI();
console.log(busqueda);
}
import * as UI from «./interfaz.js»;
import API from «./api.js»;
UI.formularioBuscar.addEventListener(«submit», buscarCancion);
function buscarCancion(e) {
e.preventDefault();
//leer formulario
const artista = document.querySelector(«#artista»).value;
const cancion = document.querySelector(«#cancion»).value;
if (artista == «» || cancion == «») {
UI.divMensajes.textContent = «Todos los campos son obligarorios»;
UI.divMensajes.classList.add(«error»);
setTimeout(() => {
UI.divMensajes.textContent = «»;
UI.divMensajes.classList.remove(«error»);
}, 2000);
return;
}
//consultar api
const busqueda = new API(artista, cancion);
busqueda.consultarAPI();
console.log(busqueda);
}
///////////////
INTERFAZ.JS
//selectores
export const formularioBuscar = document.querySelector(«#formulario-buscar»),
divBuscar = document.querySelector(«#buscar»),
divMensajes = document.querySelector(«#mensajes»),
divResultado = document.querySelector(«#resultado»),
headdingResultado = document.querySelector(«.letra-resultado»);
API VER EL TIEMPO EN TU CIUDADCON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clima - JavaScript Moderno</title><link href="css/styles.css" rel="stylesheet">
<link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body><div class="container mx-auto ">
<h1 id="titulo" class="text-4xl mt-5 text-white font-bold uppercase text-center">Busca el Clima</h1>
<div class="max-w-lg mx-auto "><div class="p-6 mt-10">
<div id="resultado">
<p class="text-center text-white mt-6">Agrega tu ciudad y país, el resultado se mostrará aquí</p>
</div>
</div><form id="formulario" class="mt-10 " action="#" method="POST">
<div class="mt-5">
<input
type="text"
name="ciudad"
id="ciudad"
placeholder="Escribe tu Ciudad"
class="w-full p-2 rounded"
/>
</div>
<div class="mt-5">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="pais"
>
<option disabled selected value="">-- Seleccione --</option>
<option value="AR">Argentina</option>
<option value="CO">Colombia</option>
<option value="CR">Costa Rica</option>
<option value="ES">España</option>
<option value="US">Estados Unidos</option>
<option value="MX">México</option>
<option value="PE">Perú</option>
</select>
</div><input
type="submit"
class="mt-5 w-full bg-yellow-500 p-3 uppercase font-bold cursor-pointer rounded"
value="Obtener Clima"
/></form>
</div>
</div><script src="js/app.js"></script>
</body>
</html>
Javascript
/*
API key:
– Your API key is 3df1a637908a5b6f63ff5228fba76a4e
– Within the next couple of hours, it will be activated and ready to use
– You can later create more API keys on your account page
– Please, always use your API key in each API call
*/
const container = document.querySelector(«.container»);
const resultado = document.querySelector(«#resultado»);
const formulario = document.querySelector(«#formulario»);
window.addEventListener(«load», () => {
formulario.addEventListener(«submit», bucarClima);
});
function bucarClima(e) {
e.preventDefault();
//validar
const ciudad = document.querySelector(«#ciudad»).value;
const pais = document.querySelector(«#pais»).value;
console.log(ciudad);
console.log(pais);
if (ciudad == «» || pais == «») {
mostrarError(«Ambos campos son obligatorios»);
return;
}
// consultar api
cunsultarAPI(ciudad, pais);
console.log(«Buscando el clima…»);
}
function mostrarError(mensaje) {
console.log(mensaje);
const alerta = document.querySelector(«.bg-red-100»);
if (!alerta) {
//crear alerta
const alerta = document.createElement(«div»);
alerta.classList.add(
«bg-red-100»,
«border-red-400»,
«text-red-700»,
«px-4»,
«py-3»,
«rounded»,
«masx-w-md»,
«mx-auto»,
«mt-6»,
«text-center»
);
alerta.innerHTML = `
<strong class=»font-bold»>Error</strong>
<span class=»block»>${mensaje}</span>
`;
container.appendChild(alerta);
// se elimine la alerta despues de unos segundos
setTimeout(() => {
alerta.remove();
}, 1500);
}
}
function cunsultarAPI(ciudad, pais) {
//REQUIERE APIKEY
const appId = «3df1a637908a5b6f63ff5228fba76a4e»;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${appId}`;
console.log(url);
fetch(url)
.then((respuesta) => respuesta.json())
.then((datos) => {
limpiarHTML();
console.log(datos.main);
if (datos.cod === «404») {
mostrarError(«Ciudad no encontrada»);
return;
}
//imprime la respuesta en el html
mostrarClima(datos);
});
}
function mostrarClima(datos) {
const {
name,
main: { temp, temp_max, temp_min },
} = datos;
const nombreCiudad = name;
const centigrados = parseInt(temp – 273.15);
const max = parseInt(temp_max – 273.15);
const min = parseInt(temp_min – 273.15);
const actual = document.createElement(«p»);
actual.innerHTML = `Temperatura actual de ${name} ${centigrados} ºC`;
actual.classList.add(«font-bold», «text-6xl»);
const tempMaxima = document.createElement(«p»);
tempMaxima.innerHTML = `Máxima: ${max} ºC`;
tempMaxima.classList.add(«text-hl»);
const tempMin = document.createElement(«p»);
tempMin.innerHTML = `Mínima: ${min} ºC`;
tempMaxima.classList.add(«text-hl»);
const resultadoDiv = document.createElement(«div»);
resultadoDiv.classList.add(«text-center», «text-white»);
resultadoDiv.appendChild(actual);
resultadoDiv.appendChild(tempMaxima);
resultadoDiv.appendChild(tempMin);
resultado.appendChild(resultadoDiv);
console.log(temp – 273.15);
}
function limpiarHTML() {
while (resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}
}
API DESCARGAR IMAGENES GRATIS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscador Imágenes Pixabay</title>
<link rel="stylesheet" href="css/tailwind.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body><h1 class="text-center text-3xl text-white my-10 font-bold uppercase">Buscador de Imágenes Pixabay</h1>
<div class="buscador max-w-lg mx-auto ">
<form id="formulario" class="">
<div>
<label
class="block text-white font-bold uppercase"
>Término Búsqueda</label>
<input
type="text"
class="mt-3 rounded w-full p-2 "
placeholder="Término de búsqueda. Ejemplo: Café o Futbol"
id="termino"
/><input
type="submit"
value="Buscar Imágenes"
class="mt-5 w-full py-2 bg-yellow-400 cursor-pointer font-bold uppercase hover:bg-yellow-500 rounded"
>
</div>
</form>
</div><div id="resultado" class="container mx-auto mt-10 flex flex-wrap"></div>
<div id="paginacion" class="container mx-auto mb-10 text-center flex flex-wrap mx-auto justify-center"></div>
<script src="js/app.js"></script>
</body>
</html>
Javascript
const resultado = document.querySelector(«#resultado»);
const formulario = document.querySelector(«#formulario»);
const paginacionDiv = document.querySelector(«#paginacion»);
const registrosPorPagina = 40;
let totalPaginas;
let iterador;
let paginaActual = 1;
window.onload = () => {
formulario.addEventListener(«submit», validarFormulario);
};
function validarFormulario(e) {
e.preventDefault();
const terminoBusqueda = document.querySelector(«#termino»).value;
if (terminoBusqueda === «») {
mostrarAlerta(«Agrega un término de búsqueda»);
return;
}
buscarImagenes();
}
function mostrarAlerta(mensaje) {
const existeAlerta = document.querySelector(«.bg-red-100»);
if (!existeAlerta) {
const alerta = document.createElement(«p»);
alerta.classList.add(
«bg-red-100»,
«border-red-400»,
«text-red-700»,
«px-4»,
«py-3»,
«rounded»,
«max-w-lg»,
«mx-auto»,
«mt-6»,
«text-center»
);
alerta.innerHTML = `
<strong class=»font-bold»>Error!</strong>
<span class=»block sm:inline»>${mensaje}</span>
`;
formulario.appendChild(alerta);
setTimeout(() => {
alerta.remove();
}, 3000);
}
}
function buscarImagenes() {
const termino = document.querySelector(«#termino»).value;
const key = «18298951-22c50c68b6badcf1017c195d7»;
const url = `https://pixabay.com/api/?key=${key}&q=${termino}&per_page=${registrosPorPagina}&page=${paginaActual}`;
fetch(url)
.then((respuesta) => respuesta.json())
.then((resultado) => {
totalPaginas = calcularPaginas(resultado.totalHits);
mostrarImagenes(resultado.hits);
});
}
// Generador que va a registrar la cantidad de elementos de acuerdo a las paginas
function* crearPaginador(total) {
for (let i = 1; i <= total; i++) {
yield i;
}
}
function calcularPaginas(total) {
return parseInt(Math.ceil(total / registrosPorPagina));
}
function mostrarImagenes(imagenes) {
// console.log(imagenes);
while (resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}
// Iterar sobre el arreglo de imagenes y construir el HTML
imagenes.forEach((imagen) => {
const { previewURL, likes, views, largeImageURL } = imagen;
resultado.innerHTML += `
<div class=»w-1/2 md:w-1/3 lg:w-1/4 p-3 mb-4″>
<div class=»bg-white»>
<img class=»w-full» src=»${previewURL}» >
<div class=»p-4″>
<p class=»font-bold»> ${likes} <span class=»font-light»> Me Gusta </span> </p>
<p class=»font-bold»> ${views} <span class=»font-light»> Veces Vista </span> </p>
<a
class=»block w-full bg-blue-800 hover:bg-blue-500 text-white uppercase font-bold text-center rounded mt-5 p-1″
href=»${largeImageURL}» target=»_blank» rel=»noopener noreferrer»
>
Ver Imagen
</a>
</div>
</div>
</div>
`;
});
// Limpiar el paginador previo
while (paginacionDiv.firstChild) {
paginacionDiv.removeChild(paginacionDiv.firstChild);
}
// Generamos el nuevo HTML
imprimirPaginador();
}
function imprimirPaginador() {
iterador = crearPaginador(totalPaginas);
while (true) {
const { value, done } = iterador.next();
if (done) return;
// Caso contrario, genera un botón por cada elemento en el generador
const boton = document.createElement(«a»);
boton.href = «#»;
boton.dataset.pagina = value;
boton.textContent = value;
boton.classList.add(
«siguiente»,
«bg-yellow-400»,
«px-4»,
«py-1»,
«mr-2»,
«font-bold»,
«mb-4»,
«rounded»
);
boton.onclick = () => {
paginaActual = value;
buscarImagenes();
};
paginacionDiv.appendChild(boton);
}
}
API RECONOCIMIENTO DE VOZ CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body><button type="button" id="notificar">
Notificarme!!
</button><button type="button" id="verNotificacion">
Ver Notificación
</button><br><br><br>
<button type="button" id="abrir-pantalla-completa">
Full Screen
</button><button type="button" id="salir-pantalla-completa">
Salir de Full Screen
</button><br><br><br>
<button type="button" id="microfono">
Speech Recognition API
</button><div id="salida" class="ocultar"></div>
<script src="js/01-app.js"></script>
<script src="js/03-app.js"></script>
<script src="js/04-app.js"></script>
<script src="js/05-app.js"></script>
<script src="js/06-app.js"></script></body>
</html>
Javascript
const salida = document.querySelector(‘#salida’);
const microfono = document.querySelector(‘#microfono’);
microfono.addEventListener(‘click’, ejecutarSpeechAPI);
function ejecutarSpeechAPI() {
const SpeechRecognition = webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.start();
recognition.onstart = function() {
salida.classList.add(‘mostrar’);
salida.textContent = ‘Escuchando…’;
};
recognition.onspeechend = function() {
salida.textContent = ‘Se dejo de grabar…’;
recognition.stop();
};
recognition.onresult = function(e) {
console.log(e.results[0][0]);
const {confidence, transcript} = e.results[0][0];
const speech = document.createElement(‘p’);
speech.innerHTML = `Grabado: ${transcript}`;
const seguridad = document.createElement(‘p’);
seguridad.innerHTML = `Seguridad: ${ parseInt( confidence * 100 ) } %`;
salida.appendChild(speech);
salida.appendChild(seguridad);
}
}
ALMACENAMIENTO EN LOCALSTORAGE CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body><div id="contenido">
<div class="container"><h1>Local Storage</h1>
<div class="row">
<div class="six columns">
<label for="tweet">Tweet:</label>
<form id="formulario">
<label for="tweet"></label>
<textarea id="tweet" class="u-full-width"></textarea>
<input type="submit" class="button u-full-width button-primary" value="Agregar">
</form>
</div>
<div class="six columns">
<h2>Mis Tweets</h2>
<div id="lista-tweets"></div>
</div>
</div></div>
</div> <!--#contenido--><script src="js/app.js"></script>
</body>
</html>
Javascript
// Variables
const formulario = document.querySelector(‘#formulario’);
const listaTweets = document.querySelector(‘#lista-tweets’);
let tweets = [];
// Event Listeners
eventListeners();
function eventListeners() {
// Cuando el usuario agrega un nuevo tweet
formulario.addEventListener(‘submit’, agregarTweet);
// Cuando el documento esta listo
document.addEventListener(‘DOMContentLoaded’, () => {
tweets = JSON.parse( localStorage.getItem(‘tweets’)) || [];
console.log(tweets);
crearHTML();
});
}
// Funciones
function agregarTweet(e) {
e.preventDefault();
// Textarea donde el usuario escribe
const tweet = document.querySelector(‘#tweet’).value;
// validación…
if(tweet === ») {
mostrarError(‘Un mensaje no puede ir vacio’);
return; // evita que se ejecuten más lineas de código
}
const tweetObj = {
id: Date.now(),
tweet
}
// Añadir al arreglo de tweets
tweets = […tweets, tweetObj];
// Una vez agregado vamos a crear el HTML
crearHTML();
// Reiniciar el formulario
formulario.reset();
}
// Mostrar Mensaje de error
function mostrarError(error) {
const mensajeError = document.createElement(‘p’);
mensajeError.textContent = error;
mensajeError.classList.add(‘error’);
// Insertarlo en el Contenido
const contenido = document.querySelector(‘#contenido’);
contenido.appendChild(mensajeError);
// Elimina la alerta después de 3 segundos
setTimeout(() => {
mensajeError.remove();
}, 3000);
}
// Muestra un listado de los tweets
function crearHTML() {
limpiarHTML();
if(tweets.length > 0 ) {
tweets.forEach( tweet => {
// Agregar un boton de eliminar
const btnEliminar = document.createElement(‘a’);
btnEliminar.classList.add(‘borrar-tweet’);
btnEliminar.innerText = ‘X’;
// Añadir la función de eliminar
btnEliminar.onclick = () => {
borrarTweet(tweet.id);
}
// Crear el HTML
const li = document.createElement(‘li’);
// añadir el texto
li.innerText = tweet.tweet;
// Asignar el botón
li.appendChild(btnEliminar);
// insertarlo en el html
listaTweets.appendChild(li);
});
}
sincronizarStorage();
}
// Agrega los Tweets actuales a Localstorage
function sincronizarStorage() {
localStorage.setItem(‘tweets’, JSON.stringify(tweets));
}
// Elimina un tweet
function borrarTweet(id) {
tweets = tweets.filter( tweet => tweet.id !== id);
crearHTML();
}
// Limpiar el HTML
function limpiarHTML() {
while( listaTweets.firstChild) {
listaTweets.removeChild(listaTweets.firstChild);
}
}
COTIZADOR DE SEGUROS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container mx-auto">
<div id="contenido" class="pb-10">
<header class="bg-teal-500 text-white py-3 font-bold uppercase">
<h1 class="text-center">Cotiza tu seguro de Auto</h1>
</header>
<form class="mt-10 max-w-lg mx-auto" action="#" id="cotizar-seguro">
<div class="flex items-center mb-5">
<label
class="font-bold uppercase mr-2 w-20"
for="marca"
>Marca:</label>
<select class="flex-1 bg-gray-100 p-3 appearance-none" id="marca">
<option value="">- Seleccionar -</option>
<option value="1">Americano</option>
<option value="2">Asiatico</option>
<option value="3">Europeo</option>
</select>
</div>
<div class="flex items-center mb-5">
<label
class="font-bold uppercase mr-2 w-20"
for="year"
>Año:</label>
<select class="flex-1 bg-gray-100 p-3 appearance-none" id="year"></select>
</div>
<fieldset>
<legend class="font-bold uppercase text-2xl text-center w-full">Tipo Seguro</legend><div class="flex justify-around mt-5">
<div>
<label class="font-bold uppercase mr-2">Básico</label>
<input type="radio" name="tipo" value="basico" checked>
</label>
</div>
<div>
<label class="font-bold uppercase mr-2">Completo</label>
<input type="radio" name="tipo" value="completo">
</label>
</div>
</div>
</fieldset><div id="cargando" class="hidden">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div id="resultado"></div>
<div class="flex justify-center py-4">
<button
type="submit"
class="mx-auto bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-20 rounded"
>Cotizar Seguro
</button>
</div></form>
</div> <!--#contenido-->
</div><script src="js/app.js"></script>
</body>
</html>
Javascript
// Constructores
function Seguro(marca, year, tipo) {
this.marca = marca;
this.year = year;
this.tipo = tipo;
}
// Realiza la cotización con los datos
Seguro.prototype.cotizarSeguro = function() {
/*
1 = Americano 1.15
2 = Asiatico 1.05
3 = Europeo 1.35
*/
let cantidad;
const base = 2000;
switch(this.marca) {
case ‘1’:
cantidad = base * 1.15;
break;
case ‘2’:
cantidad = base * 1.05;
break;
case ‘3’:
cantidad = base * 1.35;
break;
default:
break;
}
// Leer el año
const diferencia = new Date().getFullYear() – this.year;
// Cada año que la diferencia es mayor, el costo va a reducirse un 3%
cantidad -= ((diferencia * 3) * cantidad ) / 100;
/*
Si el seguro es básico se multiplica por un 30% más
Si el seguro es completo se multiplica por un 50% más
*/
if(this.tipo === ‘basico’) {
cantidad *= 1.30;
} else {
cantidad *= 1.50;
}
return cantidad;
}
function UI() {}
// Llena las opciones de los años
UI.prototype.llenarOpciones = () => {
const max = new Date().getFullYear(),
min = max – 20;
const selectYear = document.querySelector(‘#year’);
for(let i = max; i > min; i– ) {
let option = document.createElement(‘option’);
option.value = i;
option.textContent = i;
selectYear.appendChild(option);
}
}
// Muestra alertas en pantalla
UI.prototype.mostrarMensaje = (mensaje, tipo) => {
const div = document.createElement(‘div’);
if(tipo === ‘error’) {
div.classList.add(‘error’);
} else {
div.classList.add(‘correcto’);
}
div.classList.add(‘mensaje’, ‘mt-10’);
div.textContent = mensaje;
// Insertar en el HTML
const formulario = document.querySelector(‘#cotizar-seguro’);
formulario.insertBefore(div, document.querySelector(‘#resultado’));
setTimeout(() => {
div.remove();
}, 3000);
}
UI.prototype.mostrarResultado = (total, seguro) => {
const { marca, year, tipo } = seguro;
let textoMarca;
switch(marca) {
case ‘1’:
textoMarca = ‘Americano’;
break;
case ‘2’:
textoMarca = ‘Asiatico’;
break;
case ‘3’:
textoMarca = ‘Europeo’;
break;
default:
break;
}
// Crear el resultado
const div = document.createElement(‘div’);
div.classList.add(‘mt-10’);
div.innerHTML = `
<p class=»header»>Tu Resumen</p>
<p class=»font-bold»>Marca: <span class=»font-normal»> ${textoMarca} </span></p>
<p class=»font-bold»>Año: <span class=»font-normal»> ${year} </span></p>
<p class=»font-bold»>Tipo: <span class=»font-normal capitalize»> ${tipo} </span></p>
<p class=»font-bold»>Total: <span class=»font-normal»> $ ${total} </span></p>
`;
const resultadoDiv = document.querySelector(‘#resultado’);
// Mostrar el spinner
const spinner = document.querySelector(‘#cargando’);
spinner.style.display = ‘block’;
setTimeout(() => {
spinner.style.display = ‘none’; // Se borra el spinner
resultadoDiv.appendChild(div); // se muestra el resultado
}, 3000);
}
// instanciar UI
const ui = new UI();
document.addEventListener(‘DOMContentLoaded’, () => {
ui.llenarOpciones(); // Llena el select con los años…
})
eventListeners();
function eventListeners() {
const formulario = document.querySelector(‘#cotizar-seguro’);
formulario.addEventListener(‘submit’, cotizarSeguro);
}
function cotizarSeguro(e) {
e.preventDefault();
// Leer la marca seleccionada
const marca = document.querySelector(‘#marca’).value;
// leer el año seleccionado
const year = document.querySelector(‘#year’).value;
// leer el tipo de cobertura
const tipo = document.querySelector(‘input[name=»tipo»]:checked’).value;
if(marca === » || year === » || tipo === ») {
ui.mostrarMensaje(‘Todos los campos son obligatorios’, ‘error’);
return;
}
ui.mostrarMensaje(‘Cotizando…’, ‘exito’);
// Ocultar las cotizaciones previas
const resultados = document.querySelector(‘#resultado div’);
if(resultados != null) {
resultados.remove();
}
// Instanciar el seguro
const seguro = new Seguro(marca, year, tipo);
const total = seguro.cotizarSeguro();
// Utilizar el prototype que va a cotizar.
ui.mostrarResultado(total, seguro);
}
APLICACION DE CONTROL DE GASTO CON JAVASCRIPT

CODIFICACIÓN
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,400" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<title>Gasto Semanal</title></head>
<body>
<div class="container">
<header>
<h1 class="text-center">Gasto Semanal</h1>
</header>
<section class="contenido-principal">
<div class="row">
<div class="col ">
<div class="contenido primario">
<h2 class="text-center">Añade tus gastos aqui</h2>
<form id="agregar-gasto" action="#">
<div class="form-group">
<label for="gasto">Gasto:</label>
<input type="text" class="form-control" id="gasto" placeholder="Nombre Gasto">
</div>
<div class="form-group">
<label for="cantidad">Cantidad:</label>
<input type="text" class="form-control" id="cantidad" placeholder="Cantidad en $">
</div><button type="submit" class="btn btn-primary">Agregar</button>
</form></div> <!--.contenido-->
</div> <!--.col--><div class="col">
<div class="contenido secundario"><h2 class="text-center">Listado</h2>
<div id="gastos">
<ul class="list-group"></ul>
</div>
<div id="presupuesto" class="presupuesto">
<div class="alert alert-primary">
<p>Presupuesto: $ <span id="total"></span> </p>
</div>
<div class="restante alert alert-success">
<p>Restante: $ <span id="restante"></span></p>
</div>
</div> <!--.presupuesto-->
</div> <!--.contenido-->
</div><!--.col-->
</div> <!--.row-->
</section>
</div><script src="js/app.js"></script>
</body>
</html>
Javascript
// Variables y Selectores
const formulario = document.querySelector(‘#agregar-gasto’);
const gastoListado = document.querySelector(‘#gastos ul’);
// Eventos
eventListeners();
function eventListeners() {
document.addEventListener(‘DOMContentLoaded’, preguntarPresupuesto );
formulario.addEventListener(‘submit’, agregarGasto);
}
// Classes
class Presupuesto {
constructor(presupuesto) {
this.presupuesto = Number(presupuesto);
this.restante = Number(presupuesto);
this.gastos = [];
}
nuevoGasto(gasto) {
this.gastos = […this.gastos, gasto];
this.calcularRestante();
}
calcularRestante() {
const gastado = this.gastos.reduce( (total, gasto ) => total + gasto.cantidad, 0 );
this.restante = this.presupuesto – gastado;
}
eliminarGasto(id) {
this.gastos = this.gastos.filter( gasto => gasto.id !== id );
this.calcularRestante();
}
}
class UI {
insertarPresupuesto( cantidad ) {
// Extrayendo los valores
const { presupuesto, restante } = cantidad;
// Agregar al HTML
document.querySelector(‘#total’).textContent = presupuesto;
document.querySelector(‘#restante’).textContent = restante;
}
imprimirAlerta(mensaje, tipo) {
// crear el div
const divMensaje = document.createElement(‘div’);
divMensaje.classList.add(‘text-center’, ‘alert’);
if(tipo === ‘error’) {
divMensaje.classList.add(‘alert-danger’);
} else {
divMensaje.classList.add(‘alert-success’);
}
// Mensaje de error
divMensaje.textContent = mensaje;
// Insertar en el HTML
document.querySelector(‘.primario’).insertBefore( divMensaje, formulario );
// Quitar del HTML
setTimeout(() => {
divMensaje.remove();
}, 3000);
}
mostrarGastos(gastos) {
this.limpiarHTML(); // Elimina el HTML previo
// Iterar sobre los gastos
gastos.forEach( gasto => {
const { cantidad, nombre, id } = gasto;
// Crear un LI
const nuevoGasto = document.createElement(‘li’);
nuevoGasto.className = ‘list-group-item d-flex justify-content-between align-items-center’;
nuevoGasto.dataset.id = id;
// Agregar el HTML del gasto
nuevoGasto.innerHTML = `${nombre} <span class=»badge badge-primary badge-pill»> $ ${cantidad} </span>`;
// Boton para borrar el gasto
const btnBorrar = document.createElement(‘button’);
btnBorrar.classList.add(‘btn’, ‘btn-danger’, ‘borrar-gasto’);
btnBorrar.innerHTML = ‘Borrar ×’
btnBorrar.onclick = () => {
eliminarGasto(id);
}
nuevoGasto.appendChild(btnBorrar);
// Agregar al HTML
gastoListado.appendChild(nuevoGasto);
})
}
limpiarHTML() {
while( gastoListado.firstChild ) {
gastoListado.removeChild(gastoListado.firstChild);
}
}
actualizarRestante(restante) {
document.querySelector(‘#restante’).textContent = restante;
}
comprobarPresupuesto(presupuestObj) {
const { presupuesto, restante } = presupuestObj;
const restanteDiv = document.querySelector(‘.restante’);
// Comprobar 25%
if( ( presupuesto / 4 ) > restante ) {
restanteDiv.classList.remove(‘alert-success’, ‘alert-warning’);
restanteDiv.classList.add(‘alert-danger’);
} else if ((presupuesto / 2) > restante ) {
restanteDiv.classList.remove(‘alert-success’);
restanteDiv.classList.add(‘alert-warning’);
} else {
restanteDiv.classList.remove(‘alert-danger’, ‘alert-warning’);
restanteDiv.classList.add(‘alert-success’);
}
// Si el total es 0 o menor
if(restante <= 0) {
ui.imprimirAlerta(‘El presupuesto se ha agotado’, ‘error’);
formulario.querySelector(‘button[type=»submit»]’).disabled = true;
}
}
}
// Instanciar
const ui = new UI();
let presupuesto;
// Funciones
function preguntarPresupuesto() {
const presupuestoUsuario = prompt(‘¿Cual es tu presupuesto?’);
// console.log( Number( presupuestoUsuario) );
if(presupuestoUsuario === » || presupuestoUsuario === null || isNaN(presupuestoUsuario) || presupuestoUsuario <= 0 ) {
window.location.reload();
}
// Presupuesto valido
presupuesto = new Presupuesto(presupuestoUsuario);
console.log(presupuesto);
ui.insertarPresupuesto(presupuesto);
}
// Añade gastos
function agregarGasto(e) {
e.preventDefault();
// Leer los datos del formulario
const nombre = document.querySelector(‘#gasto’).value;
const cantidad = Number(document.querySelector(‘#cantidad’).value);
// Validar
if(nombre === » || cantidad === ») {
ui.imprimirAlerta(‘Ambos campos son obligatorios’, ‘error’);
return;
} else if ( cantidad <= 0 || isNaN(cantidad) ) {
ui.imprimirAlerta(‘Cantidad no válida’, ‘error’);
return;
}
// Generar un objeto con el gasto
const gasto = { nombre, cantidad, id: Date.now() }
// añade un nuevo gasto
presupuesto.nuevoGasto( gasto );
// Mensaje de todo bien!
ui.imprimirAlerta(‘Gasto agregado Correctamente’)
// Imprimir los gastos
const { gastos, restante} = presupuesto;
ui.mostrarGastos(gastos);
ui.actualizarRestante(restante);
ui.comprobarPresupuesto(presupuesto);
// Reinicia el formulario
formulario.reset();
}
function eliminarGasto(id) {
// Elimina del objeto
presupuesto.eliminarGasto(id);
// Elimina los gastos del HTML
const { gastos, restante } = presupuesto;
ui.mostrarGastos(gastos);
ui.actualizarRestante(restante);
ui.comprobarPresupuesto(presupuesto);
}
APLICACION DE BUSQUEDA DE COCHES CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Buscador múltiples campos - JS Moderno </title>
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body><h1>Buscador de Autos</h1>
<div class="contenedor">
<form id="buscador">
<div class="row">
<div class="three columns">
<label for="marca">Marca</label>
<select class="u-full-width" id="marca">
<option value="">Seleccione</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes Benz">Mercedes Benz</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Ford">Ford</option>
<option value="Dodge">Dodge</option>
</select>
</div>
<div class="three columns">
<label for="year">Año</label>
<select class="u-full-width" id="year">
<option value="">Seleccione</option>
</select>
</div>
<div class="three columns">
<label for="minimo">Precio Min</label>
<select class="u-full-width" id="minimo">
<option value="">Seleccione</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
<option value="50000">50,000</option>
<option value="60000">60,000</option>
<option value="70000">70,000</option>
<option value="80000">80,000</option>
<option value="90000">90,000</option>
</select>
</div>
<div class="three columns">
<label for="maximo">Precio Max</label>
<select class="u-full-width" id="maximo">
<option value="">Seleccione</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
<option value="50000">50,000</option>
<option value="60000">60,000</option>
<option value="70000">70,000</option>
<option value="80000">80,000</option>
<option value="90000">90,000</option>
</select>
</div>
<div class="row">
<div class="four columns">
<label for="puertas">Puertas</label>
<select class="u-full-width" id="puertas">
<option value="">Seleccione</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
<div class="four columns">
<label for="transmision">Transmisión</label>
<select class="u-full-width" id="transmision">
<option value="">Seleccione</option>
<option value="automatico">Automática</option>
<option value="manual">Manual</option>
</select>
</div>
<div class="four columns">
<label for="color">Color</label>
<select class="u-full-width" id="color">
<option value="">Seleccione</option>
<option value="Negro">Negro</option>
<option value="Azul">Azul</option>
<option value="Blanco">Blanco</option>
<option value="Rojo">Rojo</option>
</select>
</div>
</div>
</div>
</form><h1>Resultados</h1>
<div id="resultado"></div>
</div><a class="sitio-web" href="https://www.codigoconjuan.com" rel="nofollow noopener noreferrer" >Código Con Juan</a>
<script src="js/db.js"></script>
<script src="js/app.js"></script></body>
</html>
Javascript
// Variables const marca = document.querySelector('#marca'); const year = document.querySelector('#year'); const minimo = document.querySelector('#minimo'); const maximo = document.querySelector('#maximo'); const puertas = document.querySelector('#puertas'); const transmision = document.querySelector('#transmision'); const color = document.querySelector('#color'); // Contenedor para los resultados const resultado = document.querySelector('#resultado'); const max = new Date().getFullYear(); const min = max - 10; // Generar un objeto con la búsqueda const datosBusqueda = { marca : '', year : '', minimo : '', maximo : '', puertas : '', transmision : '', color : '', } // eventos document.addEventListener('DOMContentLoaded', () => { mostrarAutos(autos); // muestra los autos al cargar // Llena las opciones de años llenarSelect() }) // Event listener para los select de búsqueda marca.addEventListener('change', e => { datosBusqueda.marca = e.target.value; filtrarAuto(); }); year.addEventListener('change', e => { datosBusqueda.year = parseInt( e.target.value ); filtrarAuto(); }); minimo.addEventListener('change', e => { datosBusqueda.minimo = e.target.value; filtrarAuto(); }); maximo.addEventListener('change', e => { datosBusqueda.maximo = e.target.value; filtrarAuto(); }); puertas.addEventListener('change', e => { datosBusqueda.puertas = parseInt( e.target.value ); filtrarAuto(); }); transmision.addEventListener('change', e => { datosBusqueda.transmision = e.target.value; filtrarAuto(); }); color.addEventListener('change', e => { datosBusqueda.color = e.target.value; filtrarAuto(); }); // Funciones function mostrarAutos(autos) { limpiarHTML(); // Elimina el HTML previo autos.forEach( auto => { const { marca, modelo, year, puertas, transmision, precio, color } = auto; const autoHTML = document.createElement('p'); autoHTML.textContent = ` ${marca} ${modelo} - ${year} - ${puertas} Puertas - Transmisión: ${transmision} - Precio: ${precio} - Color: ${color} `; // insertar en el html resultado.appendChild(autoHTML) }) } // Limpiar HTML function limpiarHTML() { while(resultado.firstChild) { resultado.removeChild(resultado.firstChild); } } // Genera los años del select function llenarSelect() { for( let i = max; i >= min; i-- ) { const opcion = document.createElement('option'); opcion.value = i; opcion.textContent = i; year.appendChild(opcion); // Agrega las opciones de año al select } } // Función que filtra en base a la búsqueda function filtrarAuto() { const resultado = autos.filter( filtrarMarca ).filter( filtrarYear ).filter( filtrarMinimo ).filter( filtrarMaximo ).filter( filtrarPuertas ).filter( filtrarTransmision ).filter(filtrarColor ) if( resultado.length ) { mostrarAutos(resultado); } else { noResultado(); } } function noResultado() { limpiarHTML(); const noResultado = document.createElement('div'); noResultado.classList.add('alerta', 'error'); noResultado.textContent = 'No Hay Resultados, Intenta con otros términos de búsqueda'; resultado.appendChild(noResultado) } function filtrarMarca(auto) { const { marca } = datosBusqueda; if( marca ) { return auto.marca === marca; } return auto; } function filtrarYear(auto) { const { year } = datosBusqueda; if( year ) { return auto.year === year; } return auto; } function filtrarMinimo(auto) { const { minimo } = datosBusqueda; if( minimo ) { return auto.precio >= minimo; } return auto; } function filtrarMaximo(auto) { const { maximo } = datosBusqueda; if( maximo ) { return auto.precio <= maximo; } return auto; } function filtrarPuertas(auto) { const { puertas } = datosBusqueda; if( puertas ) { return auto.puertas === puertas; } return auto; } function filtrarTransmision(auto) { const { transmision } = datosBusqueda; if( transmision ) { return auto.transmision === transmision; } return auto; } function filtrarColor(auto) { const { color } = datosBusqueda; if( color ) { return auto.color === color; } return auto; }/////////////////////
DB.JSconst autos = [
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2020,
precio: 30000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2020,
precio: 40000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2015,
precio: 20000,
puertas: 2,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A6',
year: 2020,
precio: 35000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2016,
precio: 70000,
puertas: 4,
color: 'Rojo',
transmision: 'automatico'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2015,
precio: 25000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Chevrolet',
modelo: 'Camaro',
year: 2018,
precio: 60000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2019,
precio: 80000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2020,
precio: 40000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A3',
year: 2017,
precio: 55000,
puertas: 2,
color: 'Negro',
transmision:
'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2020,
precio: 25000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2018,
precio: 45000,
puertas: 4,
color: 'Azul',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2019,
precio: 90000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2017,
precio: 60000,
puertas: 2,
color: 'Negro',
transmision: 'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2015,
precio: 35000,
puertas: 2,
color: 'Azul',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2018,
precio: 50000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2017,
precio: 80000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2018,
precio: 40000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2016,
precio: 30000,
puertas: 4,
color: 'Azul',
transmision: 'automatico'
}
];
GUIÍA DOMINA JAVASCRIPT
con ejemplos
GUIA DE JAVASCRIPT
VARIABLES
// Inicializar una variable con un valor
var producto = "Monitor de 24 Pulgadas";
console.log(producto);
// Las variables se puede resasignar
producto = "Monitor de 19 Pulgadas";
console.log(producto);
// JavaScript es un lenguaje de tipo dinamico,
no se especifica
tipo de dato
producto = 20;
console.log(producto);
// Se pueden inicializar sin valor y asignarlo
después
var disponible;
disponible = true;
disponible = false;
// Inicializar múltiples variables.
var categoria = 'Computadoras',
marca = "Marca Famosa",
calificacion = 5;
// // Las variables no pueden iniciar con
números
// var 99dias;
// var dias99;
// var 01_;
// var _01;
// var _usuario;
// var __usuario;
// var nombreProductoCategoriaPrecio;
// var nombre_producto_categoria_precio;
// var nombre producto
let producto = 'Tablet';
// Reasignar el valor
producto = "Monitor";
producto = 20;
producto = true;
producto = null
console.log(producto);
let precio;
precio = 300;
console.log(precio);
const producto = 'Tablet';
// No se pueden reasignar
// producto = "Monitor";
console.log(producto);
const precio = 20;
console.log(precio);
////////////////////////////////
STRINGS
const producto = "Monitor 20\"";
const producto2 = String('Monitor 24 "');
const producto3 = new String('Monitor 27 Pulgadas');
console.log(producto);
console.log(producto2);
console.log(producto3);
const producto = 'Monitor 20 Pulgadas';
console.log(producto);
// Conocer la cantidad de letras de la cadena
de texto
console.log(producto.length);
// console.log(producto.indexOf('Tablet'));
console.log(producto.includes('Tablet'));
console.log(producto.includes('Monitor'));
console.log(producto.includes('monitor'));
const producto = 'Monitor 20 Pulgadas ';
const precio = '30 USD ';
// console.log(producto.concat(precio));
// console.log(producto.concat('En descuento'));
console.log( producto + " Con un precio de: " +
precio);
console.log("El producto " + producto + "tiene un
precio de " + precio );
console.log("El producto ", producto , "tiene un
precio de " , precio );
console.log(`El Producto ${producto} tiene un
precio de $ ${precio}`);
const producto = ' Monitor 20 Pulgadas ';
console.log(producto);
console.log(producto.length);
// Eliminar del inicio...
console.log( producto.trimStart() );
console.log( producto.trimEnd() );
console.log( producto.trimStart().trimEnd() );
console.log( producto.trim() )
const producto = 'Monitor 20 Pulgadas';
// .replace para reemplazar
console.log(producto);
console.log(producto.replace('Pulgadas', '"'));
console.log(producto.replace('Monitor', 'Monitor
Curvo '));
// .slice para cortar
console.log(producto.slice(0, 10) );
// console.log(producto.slice(8) );
console.log(producto.slice(2, 1) );
// Alternativa a slice
console.log(producto.substring(0,10));
console.log(producto.substring(2,1));
const usuario = "Juan";
console.log(usuario.substring(0,1));
console.log(usuario.charAt(0));
const producto = 'Monitor 20 Pulgadas ';
// .repetear te va a permitir repetir una cadena
de texto...
const texto = ' en Promoción'.repeat(2.4);
console.log(texto);
console.log(`${producto} ${texto} !!!`);
// Split, dividir un string
const actividad = "Estoy aprendiendo JavaScript
Moderno";
console.log(actividad.split(" "));
const hobbies = 'Leer, caminar, escuchar música,
escribir,
aprender a programar';
console.log(hobbies.split(", "));
const tweet = "Aprendiendo JavaScript ";
console.log(tweet.split('#'))
const producto = 'Monitor 20 Pulgadas ';
console.log(producto.toUpperCase());
console.log(producto.toLowerCase());
const email = "CORREO@CORREO.COM";
console.log(email.toLowerCase());
const precio = 300;
console.log(precio);
console.log(precio.toString());
NUMEROS///////////////////////////////
// Creación de números
const numero1 = 30;
const numero2 = 20;
const numero3 = 20.20;
const numero4 = .102030;
const numero5 = -20;
console.log(numero1);
console.log(numero2);
console.log(numero3);
console.log(numero4);
console.log(numero5);
const numero1 = 30;
const numero2 = 20;
let resultado;
// Suma
resultado = numero1 + numero2;
// Resta
resultado = numero1 - numero2;
// Multiplicación
resultado = numero1 * numero2;
// División
resultado = numero1 / numero2;
// Modulo
resultado = numero1 % numero2;
console.log(resultado);
let resultado;
// PI
resultado = Math.PI;
// Redondear
resultado = Math.round(2.8);
resultado = Math.round(2.2);
resultado = Math.round(2.6);
resultado = Math.round(2.5);
resultado = Math.round(2.4);
// Redondear hacia arriba
resultado = Math.ceil(2.1);
// Redondear hacia abajo
resultado = Math.floor(2.9);
// Raiz Cuadrada
resultado = Math.sqrt(144);
// Absoluto
resultado = Math.abs(-500);
// Potencia
resultado = Math.pow(2, 4);
// Minimo
resultado = Math.min(3,5, 1, 12, -3);
// Maximo
resultado = Math.max(3,5, 1, 12, -3);
// Aleatorio
// resultado = Math.random() * 20 ;
// Aleatorio dentro de un rango...
resultado = Math.floor( Math.random() * 30 );
console.log(resultado);
let resultado;
resultado = 20 + 30 * 2;
resultado = ( 20 + 30 ) * 2;
// 20% de descuento en tu carrito de compras
resultado = (20 + 30 + 40 + 50 + 60 ) * .2;
resultado = (20 + 30) * 1.16;
console.log(resultado);
let resultado;
resultado = 20 + 30 * 2;
resultado = ( 20 + 30 ) * 2;
// 20% de descuento en tu carrito de compras
resultado = (20 + 30 + 40 + 50 + 60 ) * .2;
resultado = (20 + 30) * 1.16;
console.log(resultado);
const numero1 = 20;
const numero2 = "20";
const numero3 = "Uno";
const numero4 = 20.2;
console.log(numero1);
console.log(Number.parseInt(numero1));
console.log(Number.parseFloat(numero2));
console.log(Number.parseInt(numero3));
// Revisar si un número es entero o no
console.log(Number.isInteger(numero4));
console.log(Number.isInteger(numero3));
OPERADORES
const numero1 = 20;
const numero2 = "20";
const numero3 = 30;
// Operador mayor a...
console.log(numero1 > numero3);
console.log(numero3 > numero1);
// operador menor a
console.log( numero1 < numero3 )
const numero1 = 20;
const numero2 = "20";
const numero3 = 30;
// Revisar si 2 números son iguales
console.log(numero1 == numero3);
console.log(numero1 == numero2);
// Comparador estricto
console.log(numero1 === numero2);
console.log(numero1 === parseInt(numero2));
console.log(typeof numero1 );
console.log(typeof numero2 );
// Diferente
const password1 = "admin";
const password2 = "Admin";
console.log(password1 != password2);
console.log(numero1 != numero2);
console.log(numero1 !== parseInt(numero2));
// Undefined
let numero;
console.log(numero);
// console.log(typeof numero);
// Null
let numero2 = null;
console.log(numero2);
// console.log(typeof numero2);
console.log(numero === numero2);
BOOLEANOS
const boolean1 = true;
const boolean2 = false;
const boolean3 = "true";
// console.log(boolean1);
// console.log(boolean2);
// console.log(typeof boolean1);
console.log(boolean1 === boolean3);
const boolean4 = new Boolean(true);
console.log(typeof boolean4);
const boolean1 = true;
const boolean2 = false;
console.log(boolean1 === boolean2);
console.log(boolean1 === true);
console.log(boolean1 === "true");
const autenticado = true;
// if(autenticado) {
// console.log('Si puedes ver netflix')
// } else {
// console.log('No no puedes verlo')
// }
// Operador ternario
console.log( autenticado ? 'Si esta autenticado' :
'No esta autenticado');
OBJETOS
const nombre = "Monitor 20 Pulgadas";
const precio = 300;
const disponible = true;
// Un objeto agrupa todo en una sola variable...
// Object literal
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
}
console.log(producto);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
}
console.log(producto);
console.log(producto.nombre);
console.log(producto.precio);
console.log(producto.disponible);
console.log(producto['nombre']);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true
}
// Agregar nuevas propiedades al objeto
producto.imagen = "imagen.jpg";
// Eliminar propiedades del objeto
delete producto.disponible;
console.log(producto);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true
}
// const nombre = producto.nombre;
// console.log(nombre);
// Destructuring
const { nombre, precio, disponible } = producto;
console.log(nombre);
console.log(precio);
console.log(disponible);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
informacion : {
medidas : {
peso: '1kg',
medida: '1m'
},
fabricacion: {
pais: 'China'
}
}
}
// console.log(producto);
console.log(producto.informacion.fabricacion.pais);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
informacion : {
medidas : {
peso: '1kg',
medida: '1m'
},
fabricacion: {
pais: 'China'
}
}
}
const { nombre, informacion, informacion:
{fabricacion, fabricacion: { pais } } } =
producto;
console.log(nombre);
console.log(informacion);
console.log(fabricacion);
console.log(pais);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
}
producto.disponible = false;
delete producto.precio;
console.log(producto);
"use strict";
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
}
Object.freeze( producto );
// producto.disponible = false;
// producto.imagen = "imagen.jpg";
// delete producto.precio;
console.log(producto);
console.log(Object.isFrozen(producto));
"use strict";
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
}
Object.seal( producto );
producto.disponible = false;
// producto.imagen = "imagen.jpg";
// delete producto.precio;
console.log(producto);
console.log(Object.isSealed(producto));
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
}
const medidas = {
peso: '1kg',
medida: '1m'
}
console.log(producto)
console.log(medidas)
const resultado = Object.assign(producto, medidas);
// Spread Operator o Rest Operator
const resultado2 = { ...producto, ...medidas }
console.log(resultado);
console.log(resultado2);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true,
mostrarInfo: function() {
console.log(`El Producto: ${this.nombre}
tiene un precio de: ${this.precio} `)
}
}
const producto2 = {
nombre: "Tablet",
precio: 3000,
disponible: true,
mostrarInfo: function() {
console.log(`El Producto: ${this.nombre}
tiene un precio de: ${this.precio} `)
}
}
producto.mostrarInfo();
producto2.mostrarInfo();
// Object Literal
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true
}
// Object Constructor
function Producto(nombre, precio) {
this.nombre = nombre;
this.precio = precio;
this.disponible = true;
}
const producto2 = new Producto('Monitor
24 Pulgadas', 500);
console.log(producto2);
const producto3 = new Producto('Television',
100);
console.log(producto3);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true
}
console.log( Object.keys( producto ) );
console.log( Object.values( producto ));
console.log(Object.entries(producto));
ARRAYS
const numeros = [10];
const meses = new Array('Enero', 'Febrero',
'Marzo');
console.log(numeros);
console.log(meses);
// Un arreglo que contiene datos de todo tipo
const deTodo = ["Hola", 10, true, "si", null,
{ nombre: 'Juan', trabajo: 'Programador'},
[1,2,3]];
console.log(deTodo);
const numeros = [10,20,30,40,50, [1,2,3]];
console.log(numeros);
console.table(numeros);
// Acceder al arreglo
console.log(numeros[2]);
console.log(numeros[0]);
console.log(numeros[20]);
console.log(numeros[5][1]);
const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio'];
console.table(meses);
console.table(meses[0]);
console.table(meses[1]);
console.table(meses[2]);
// Cuanto mide el arreglo
console.log(meses.length);
for(let i = 0; i < meses.length; i++ ) {
console.log( meses[i] );
}
const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio'];
meses[0] = 'Nuevo Mes';
meses[10] = 'Ultimo mes';
console.table(meses);
const carrito = [];
// Definir un producto
const producto = {
nombre: "Monitor 32 Pulgadas",
precio: 400
}
const producto2 = {
nombre: 'Celular',
precio: 800
}
// .push agrega al final de un arreglo
carrito.push(producto2);
carrito.push(producto);
const producto3 = {
nombre: 'Teclado',
precio: 50
}
carrito.unshift(producto3);
console.table(carrito);
const carrito = [];
// Definir un producto
const producto = {
nombre: "Monitor 32 Pulgadas",
precio: 400
}
const producto2 = {
nombre: 'Celular',
precio: 800
}
const producto3 = {
nombre: 'Teclado',
precio: 50
}
let resultado;
resultado = [...carrito, producto];
resultado = [...resultado, producto2];
resultado = [producto3, ...resultado ];
console.table(resultado);
const carrito = [];
// Definir un producto
const producto = {
nombre: "Monitor 32 Pulgadas",
precio: 400
}
const producto2 = {
nombre: 'Celular',
precio: 800
}
const producto4 = {
nombre: 'Celular 2',
precio: 100
}
// .push agrega al final de un arreglo
carrito.push(producto2);
carrito.push(producto);
carrito.push(producto4);
const producto3 = {
nombre: 'Teclado',
precio: 50
}
carrito.unshift(producto3);
console.table(carrito);
// // Eliminar último elemento de un arreglo...
// carrito.pop();
// console.table(carrito);
// // Eliminar del inicio del arreglo
// carrito.shift();
// console.table(carrito);
carrito.splice(3, 1);
console.table(carrito);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true
}
// const nombre = producto.nombre;
// console.log(nombre);
// Destructuring
const { disponible } = producto;
console.log(disponible);
// Destructuring con Arreglos
const numeros = [10,20,30,40,50];
const [ primero, ...tercero ] = numeros;
console.log(tercero);
const producto = {
nombre: "Monitor 20 Pulgadas",
precio: 300,
disponible: true
}
// const nombre = producto.nombre;
// console.log(nombre);
// Destructuring
const { disponible } = producto;
console.log(disponible);
// Destructuring con Arreglos
const numeros = [10,20,30,40,50];
const [ primero, ...tercero ] = numeros;
console.log(tercero);
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
for(let i = 0; i < carrito.length; i++ ) {
console.log(`${carrito[i].nombre} -
Precio: ${carrito[i].precio }` );
}
carrito.forEach( function(producto) {
console.log(`${producto.nombre} -
Precio: ${producto.precio }` );
} )
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
const nuevoArreglo = carrito.map( function(producto)
{
return `${producto.nombre} - Precio:
${producto.precio }` ;
} )
const nuevoArreglo2 = carrito.forEach( function
(producto) {
return `${producto.nombre} - Precio:
${producto.precio }` ;
} )
console.log(nuevoArreglo);
console.log(nuevoArreglo2);
FUNCIONES
// Declaración de Función ( Function Declaration )
function sumar() {
console.log( 2 + 2);
}
sumar();
sumar();
sumar();
// Expresión de Función (Function Expression)
const sumar2 = function() {
console.log( 3 + 3);
}
sumar2();
// Declaración de Función ( Function Declaration )
sumar();
function sumar() {
console.log( 2 + 2);
}
// Expresión de Función (Function Expression)
sumar2();
const sumar2 = function() {
console.log( 3 + 3);
}
// alert('hubo un error...');
// prompt('Cual es tu edad??');
console.log( parseInt('20') );
const numero1 = 20;
const numero2 = "20";
console.log( parseInt(numero2) ) // Esto es
una función
console.log( numero1.toString() ) // esto es
un método
function sumar() {
console.log( 2 + 2);
}
sumar();
function sumar(a, b) { // a y b son parametros
console.log( a + b );
}
sumar(2, 3); // 2 y 3 son argumentos
sumar(200, 184);
sumar(124, 321);
function saludar(nombre, apellido) {
console.log(`Hola ${nombre} ${apellido}`);
}
saludar('Juan', 'De la torre');
saludar();
function saludar(nombre = 'Desconocido',
apellido = '') {
console.log(`Hola ${nombre} ${apellido}`);
}
saludar('Juan');
iniciarApp();
function iniciarApp() {
console.log('Iniciando app...');
segundaFuncion();
}
function segundaFuncion() {
console.log('Desde la segunda función');
usuarioAutenticado('Pablo');
}
function usuarioAutenticado(usuario) {
console.log('Autenticando usuario... espere...');
console.log(`Usuario autenticado exitosamente:
${usuario} `);
}
function sumar(a, b) {
return a + b ;
}
const resultado = sumar(2, 3);
console.log(resultado);
// Ejemplo más avanzado
let total = 0;
function agregarCarrito(precio) {
return total += precio;
}
function calcularImpuesto(total) {
return total * 1.15;
}
total = agregarCarrito(300);
total = agregarCarrito(100);
total = agregarCarrito(600);
const totalPagar = calcularImpuesto(total);
console.log(`El total a pagar es de ${totalPagar}`);
console.log(total);
const reproductor = {
reproducir: function(id) {
console.log(`Reproduciendo canción id ${id}`);
},
pausar: function() {
console.log('pausando...')
},
borrar: function(id) {
console.log(`Borrando canción... ${id}`)
},
crearPlaylist: function(nombre) {
console.log(`Creando la playlist de ${nombre}`)
},
reproducirPlaylist: function(nombre) {
console.log(`Reproduciendo playlist ${nombre}`)
}
}
reproductor.reproducir(30)
reproductor.reproducir(20)
reproductor.pausar();
reproductor.borrar(30)
reproductor.crearPlaylist('Heavy Metal');
reproductor.crearPlaylist('Rock 90s');
reproductor.reproducirPlaylist('Heavy Metal')
const aprendiendo = function() {
console.log('Aprendiendo JavaScript');
}
const aprendiendo2 = () => 'Aprendiendo JavaScript';
console.log(aprendiendo2());
const aprendiendo = function(tecnologia,
tecnologia2) {
console.log(`Aprendiendo ${tecnologia} y
${tecnologia2}`);
}
aprendiendo('JavaScript', 'Node.js')
const aprendiendo2 = (tecnologia, tecnologia2) =>
`Aprendiendo ${tecnologia} y ${tecnologia2}`;
console.log(aprendiendo2('JavaScript', 'Node.js'));
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
const nuevoArreglo = carrito.map( producto =>
`${producto.nombre} - Precio: ${producto.precio }` )
carrito.forEach( producto =>
console.log( `${producto.nombre} -
Precio: ${producto.precio }` ) );
console.log(nuevoArreglo);
const reproductor = {
cancion: '',
reproducir: id => console.log(`Reproduciendo
canción con el id ${id}`),
pausar: () =>console.log('pausando...'),
borrar: id => console.log(`Borrando canción...
${id}`),
crearPlaylist: nombre => console.log(`Creando la
playlist de ${nombre}`),
reproducirPlaylist: nombre =>
console.log(`Reproduciendo la playlist ${nombre}`),
set nuevaCancion(cancion) {
this.cancion = cancion;
console.log(`Añadiendo ${cancion}`);
},
get obtenerCancion() {
console.log(`${this.cancion}`)
}
}
reproductor.nuevaCancion = 'Enter Sandman';
reproductor.obtenerCancion;
reproductor.reproducir(30)
reproductor.reproducir(20)
reproductor.pausar();
reproductor.borrar(30)
reproductor.crearPlaylist('Heavy Metal');
reproductor.crearPlaylist('Rock 90s');
reproductor.reproducirPlaylist('Heavy Metal')
ESTRUCTURAS
const puntaje = 1001;
if(puntaje == 1000) {
console.log('si es igual...')
}
const puntaje = 1000;
const puntaje2 = "1000";
console.log(typeof puntaje)
console.log(typeof puntaje2)
// if(puntaje != 1000) {
// != diferente == igual a
// console.log('si! es diferente')
// }
if(puntaje !== "1000") {
// != diferente == igual a
console.log('Si es diferente!')
} else {
console.log('No no es diferente')
}
// == Operador que no es estrictor
// === Operador Estricto
// Operador Mayor que y menor que
const dinero = 300;
const totalAPagar = 300;
if( dinero >= totalAPagar ) {
console.log('Si podemos pagar');
} else {
console.log('Fondos Insuficientes');
}
// Operador Mayor que y menor que
const dinero = 100;
const totalAPagar = 500;
const tarjeta = false;
const cheque = false;
if( dinero >= totalAPagar ) {
console.log('Si podemos pagar');
} else if(cheque) {
console.log('Si tengo un cheque');
} else if(tarjeta) {
console.log('Si puedo pagar porque tengo tarjeta')
} else {
console.log('Fondos Insuficientes');
}
// Switch case
const metodoPago = 'efectivo';
switch(metodoPago) {
case 'efectivo':
pagar();
break;
case 'cheque':
console.log(`Pagaste con ${metodoPago}`);
break;
case 'tarjeta':
console.log(`Pagaste con ${metodoPago}`);
break;
default:
console.log('Aún no has seleccionado un
método de pago o método de pago no soportado');
break;
}
function pagar() {
console.log('Pagando...');
}
const usuario = false;
const puedePagar = false;
if(usuario && puedePagar) {
console.log('Si puedes comprar')
} else if(!puedePagar && !usuario) {
console.log('No no puedes comprar')
} else if(!usuario) {
console.log('Inicia sesión o saca una cuenta');
} else if(!puedePagar) {
console.log('Fondos Insuficientes')
}
const efectivo = 300;
const credito = 400;
const disponible = efectivo + credito;
const totalPagar = 600;
if( efectivo > totalPagar || credito >
totalPagar || disponible > totalPagar ) {
console.log('Si podemos pagar')
} else {
console.log('Fondos Insuficientes');
}
const autenticado = true;
if(autenticado) {
console.log('El usuario esta autenticado')
}
const puntaje = 450;
function revisarPuntaje() {
if( puntaje > 400 ) {
console.log('Excelente!!');
return;
}
if (puntaje > 300) {
console.log('Buen puntaje... felicidades');
return;
}
}
revisarPuntaje();
const autenticado = false;
const puedePagar = false;
console.log( autenticado ? puedePagar ?
'Si esta autenticado y puede pagar' :
'Si autenticado, no puede pagar' :
'No no esta autenticado' );
ITERADORES Y BUCLES
// for( let i = 0; i <= 10; i++ ) {
// console.log(`Numero: ${i}`)
// }
// for(let i = 1; i <= 20; i++ ) {
// if( i % 2 === 0 ) {
// console.log(`El número ${i} es PAR`);
// } else {
// console.log(`El número ${i} es IMPAR`);
// }
// }
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
console.log( carrito.length );
for(let i = 0; i < carrito.length; i++ ) {
console.log(carrito[i].nombre);
}
// for( let i = 0; i <= 10; i++ ) {
// if(i === 5) {
// console.log('CINCO');
// continue;
// }
// console.log(`Numero: ${i}`)
// }
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200, descuento: true },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
for(let i = 0; i < carrito.length; i++ ) {
if(carrito[i].descuento) {
console.log(`El articulo ${carrito[i].nombre}
Tiene descuento `);
continue;
}
console.log(carrito[i].nombre)
}
// Fizz buzz - 100 Números
// 3 6 9 12 ... fizz
// 5 10 15 20 ... buzz
// 15 30 45 ... FIZZBUZZ!
for(let i = 1; i < 100; i++ ) {
if (i % 15 === 0) {
console.log(`${i} FIZZ BUZZ!!!`)
} else if( i % 3 === 0 ) {
console.log(`${i} fizz`)
} else if (i % 5 === 0) {
console.log(`${i} buzz`)
}
}
let i = 100; // Inicializar el While
while(i < 10) { // Condición
console.log(`Número ${i}`)
i++; // Incremento
}
let i = 1; // Inicio
do {
if (i % 15 === 0) {
console.log(`${i} FIZZ BUZZ!!!`)
} else if( i % 3 === 0 ) {
console.log(`${i} fizz`)
} else if (i % 5 === 0) {
console.log(`${i} buzz`)
}
i++; // Incremento
} while ( i < 100); // Condición
// forEach
const pendientes = ['Tarea', 'Comer', 'Proyecto',
'Estudiar JavaScript'];
pendientes.forEach( (pendiente, indice) => {
console.log(`${indice} : ${pendiente}`)
})
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
const nuevoArreglo = carrito.forEach(
producto => producto.nombre);
const nuevoArreglo2 = carrito.map(
(producto) => producto.nombre);
console.log(nuevoArreglo);
console.log(nuevoArreglo2);
const pendientes = ['Tarea', 'Comer', 'Proyecto',
'Estudiar JavaScript'];
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
for( let pendiente of pendientes ) {
console.log(pendiente);
}
for( let producto of carrito) {
console.log(producto.nombre)
}
const automovil = {
modelo: 'Camaro',
year: 1969,
motor: '6.0'
}
// for(let propiedad in automovil) {
// console.log(`${automovil[propiedad]}`)
// }
for( let [llave, valor] of Object.entries
(automovil) ) {
console.log(valor);
console.log(llave);
}
ARRAY METODOS
const meses = ['Enero', 'Febrero', 'Marzo', 'Abril',
'Mayo', 'Junio', 'Julio'];
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
// Comprobar si un valor existe en un arreglo
// meses.forEach( mes => {
// if(mes === 'Enero') {
// console.log('Enero si existe')
// }
// });
// const resultado = meses.includes('Diciembre');
// console.log(resultado)
// En un arreglo de objetos se utiliza .some
const existe = carrito.some(
producto => producto.nombre === 'Monitor Curvo' );
console.log(existe);
// En un arreglo tradicional con .some
const existe2 = meses.some(
mes => mes === 'Febrero' );
console.log(existe2);
const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio'];
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 100 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
meses.forEach( (mes, i) => {
if(mes === 'Abril') {
console.log(`Encontrado en el indice ${i}`)
}
} )
// Encontrar el indice de Abril
const indice = meses.findIndex(
mes => mes === 'Diciembre');
console.log(indice);
// Encontrar un indice de un arreglo de objetos...
const indice2 = carrito.findIndex(
producto => producto.precio === 100 );
console.log(indice2);
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 100 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
// con un foreach
let total = 0;
carrito.forEach(
producto => total += producto.precio );
console.log(total);
// Con un reduce
let resultado = carrito.reduce(
(total, producto) => total + producto.precio, 0);
console.log(resultado);
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 100 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
];
let resultado;
resultado = carrito.filter(
producto => producto.precio > 400 );
resultado = carrito.filter(
producto => producto.precio < 600 );
resultado = carrito.filter(
producto => producto.nombre !== 'Audifonos' )
resultado = carrito.filter(
producto => producto.nombre === 'Audifonos' )
console.log(resultado);
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 100 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
];
// con un foreach
let resultado = '';
carrito.forEach((producto, index) => {
if(producto.nombre === 'Tablet') {
resultado = carrito[index]
}
});
console.log(resultado)
// con .find
const resultado2 = carrito.find(
producto => producto.precio === 1000 );
console.log(resultado2);
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 100 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
];
const resultado = carrito.every(
producto => producto.precio < 500 );
console.log(resultado)
const resultado2 = carrito.some(
producto => producto.precio < 500 );
console.log(resultado2)
const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio'];
const meses2 = ['Agosto', 'Septiembre'];
const meses3 = ['Octubre', 'Noviembre',
'Diciembre'];
// .concat
const resultado = meses.concat(meses3, meses2);
console.log(resultado);
// spread operator
const resultado2 = [...meses3, ...meses, ...meses2];
console.log(resultado2);
const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio'];
const carrito = [
{ nombre: 'Monitor 27 Pulgadas', precio: 500 },
{ nombre: 'Televisión', precio: 100 },
{ nombre: 'Tablet', precio: 200 },
{ nombre: 'Audifonos', precio: 300 },
{ nombre: 'Teclado', precio: 400 },
{ nombre: 'Celular', precio: 700 },
]
// spread operator con arreglo de indices
const meses2 = ['Agosto', ...meses ];
console.log(meses2);
const producto = { nombre: 'Disco Duro',
precio: 300 };
const carrito2 = [producto, ...carrito ];
console.log(carrito2);
DOM DOCUMENT OBJECT MODEL
let elemento;
elemento = document;
elemento = document.all;
elemento = document.head;
elemento = document.body;
elemento = document.domain;
elemento = document.forms;
elemento = document.forms[0];
elemento = document.forms[0].id;
elemento = document.forms[0].method;
elemento = document.forms[0].classList;
elemento = document.forms[0].action;
elemento = document.links;
elemento = document.links[4];
elemento = document.links[4].classList;
elemento = document.links[4].className;
elemento = document.images;
elemento = document.scripts;
console.log(elemento);
// Seleccionar elementos por su clase...
const header = document.getElementsByClassName
('header');
console.log(header);
const hero = document.getElementsByClassName
('hero');
console.log(hero);
// Si las clases existen más de 1 vez
const contenedores = document.getElementsByClassName
('contenedor');
console.log(contenedores);
// Si una clase no existe
const noExiste = document.getElementsByClassName
('no-existe');
console.log(noExiste);
const formulario = document.getElementById
('formulario');
console.log(formulario);
const card = document.querySelector('.card');
console.log(card);
// Podemos tener selectores especificos como en CSS
const info = document.querySelector('.premium
.info');
console.log(info);
// Seleccionar el segundo card de hospedaje
const segundoCard = document.querySelector
('section.hospedaje .card:nth-child(2)');
console.log(segundoCard);
// Seleccionar el formulario
const formulario = document.querySelector
('.contenido-hero #formulario');
console.log(formulario);
// Seleccionar elementos HTML
const navegacion = document.querySelector('nav');
console.log(navegacion);
const card = document.querySelectorAll('.card');
console.log(card);
const formularios = document.querySelectorAll
('#formulario');
console.log(formularios);
// Si un elemento no existe
const noExiste = document.querySelectorAll
('no-existe');
console.log(noExiste)
const encabezado = document.querySelector
('.contenido-hero h1');
console.log(encabezado);
// console.log(encabezado.innerText);
// si en el CSS - visibility: hidden; no lo
va a encontrar
// console.log(encabezado.textContent);
// si lo va a encontrar
// console.log(encabezado.innerHTML);
// se trae el HTML
// const nuevoHeading = 'Nuevo Heading';
// document.querySelector('.contenido-hero h1')
.textContent = nuevoHeading;
const imagen = document.querySelector('.card img');
imagen.src = 'img/hacer2.jpg';
// const encabezado = document.querySelector('h1');
// encabezado.style.backgroundColor = 'red';
// encabezado.style.fontFamily = 'Arial';
// encabezado.style.textTransform = 'uppercase';
const card = document.querySelector('.card');
card.classList.add('nueva-clase', 'segunda-clase');
card.classList.remove('card');
console.log(card.classList);
const navegacion = document.querySelector
('.navegacion');
console.log(navegacion.firstElementChild)
console.log(navegacion.lastElementChild)
// console.log(navegacion.childNodes)
// Los espacios en blanco son considerados elementos
// console.log(navegacion.children)
// Los espacios en blanco son considerados elementos
// console.log(navegacion.children[1].nodeName)
// console.log(navegacion.children[1].nodeType)
const card = document.querySelector('.card');
// card.children[1].children[1].textContent =
'Nuevo heading desde traversing the dom'
// card.children[0].src = 'img/hacer3.jpg';
// console.log(card.children[0]);
// Traversing the Hijo al padre
// console.log(card.parentNode);
// console.log(card.parentElement
.parentElement.parentElement);
// console.log(card);
// console.log(card.nextElementSibling);
// console.log(card.nextElementSibling
.nextElementSibling);
// const ultimoCard = document.querySelector
('.card:nth-child(4)');
// console.log(ultimoCard.previousElementSibling)
// const primerEnlace = document.querySelector('a');
// primerEnlace.remove();
// Eliminar desde el padre...
const navegacion = document.querySelector
('.navegacion');
console.log(navegacion.children);
navegacion.removeChild( navegacion.children[2] );
const enlace = document.createElement('A');
// Agregandole el texto
enlace.textContent = 'Nuevo Enlace';
// añadiendo href
enlace.href = '/nuevo-enlace';
console.log(enlace);
enlace.target = "_blank";
enlace.setAttribute('data-enlace', 'nuevo-enlace')
enlace.classList.add('alguna-clase')
// Seleccionar la navegacion
const navegacion = document.querySelector
('.navegacion');
// console.log(navegacion.children);
navegacion.insertBefore(enlace,
navegacion.children[1]);
// Crear un CARD
const parrafo1 = document.createElement('P');
parrafo1.textContent = 'Concierto';
parrafo1.classList.add('categoria', 'concierto');
const parrafo2 = document.createElement('P');
parrafo2.textContent = 'Concierto de Rock';
parrafo2.classList.add('titulo');
const parrafo3 = document.createElement('P');
parrafo3.textContent = '$800 por persona';
parrafo3.classList.add('precio');
// Crear div con la clase de info
const info = document.createElement('div');
info.classList.add('info');
info.appendChild(parrafo1)
info.appendChild(parrafo2)
info.appendChild(parrafo3)
// Crear la imagen
const imagen = document.createElement('img');
imagen.src = 'img/hacer2.jpg';
// Crear el card
const card = document.createElement('div');
card.classList.add('card');
// Asignar la imagen
card.appendChild(imagen);
// asignar info
card.appendChild(info);
// Insertar en el HTML
const contenedor = document.querySelector
('.hacer .contenedor-cards');
contenedor.insertBefore(card,
contenedor.children[0]);
const btnFlotante = document.querySelector
('.btn-flotante');
const footer = document.querySelector('.footer');
btnFlotante.addEventListener('click',
mostrarOcultarFooter);
function mostrarOcultarFooter() {
if( footer.classList.contains('activo') ) {
footer.classList.remove('activo');
this.classList.remove('activo');
this.textContent = 'Idioma y Moneda'
} else {
footer.classList.add('activo');
this.classList.add('activo');
this.textContent = 'X Cerrar';
}
}
EVENTOS /
console.log(1);
document.addEventListener('DOMContentLoaded', () => {
console.log(2);
})
console.log(3);
const nav = document.querySelector('.navegacion');
// registrar un evento
nav.addEventListener('mouseout', () => {
console.log('saliendo de la navegacion');
nav.style.backgroundColor = 'transparent';
})
nav.addEventListener('dblclick', () => {
console.log('Entrando en la navegacion');
nav.style.backgroundColor = 'white';
})
// mousedown - similar al click
// click
// dblclick = doble click
// mouseup - cuando sueltas el mouse
const busqueda = document.querySelector('.busqueda');
busqueda.addEventListener('input', (e) => {
if(e.target.value === '') {
console.log('fallo la validación')
}
})
const formulario = document.querySelector
('#formulario');
formulario.addEventListener('submit',
validarFormulario);
function validarFormulario(e) {
e.preventDefault();
console.log('Consultar una api')
console.log(e.target.action);
}
window.addEventListener('scroll', () => {
const premium = document.querySelector('.premium');
const ubicacion = premium.getBoundingClientRect();
if(ubicacion.top < 784) {
console.log('El elemento ya esta visible');
} else {
console.log('Aún no, da mas scroll');
}
})
// Event Bubbling
const cardDiv = document.querySelector('.card');
const infoDiv = document.querySelector('.info');
const titulo = document.querySelector('.titulo');
cardDiv.addEventListener('click', e => {
e.stopPropagation()
console.log('click en card');
});
infoDiv.addEventListener('click', e => {
e.stopPropagation()
console.log('click en info');
});
titulo.addEventListener('click', e => {
e.stopPropagation()
console.log('click en titulo');
});
const cardDiv = document.querySelector('.card');
cardDiv.addEventListener('click', e => {
if(e.target.classList.contains('titulo')) {
console.log('Diste click en titulo')
}
if(e.target.classList.contains('precio')) {
console.log('Diste click en precio')
}
if(e.target.classList.contains('card')) {
console.log('Diste click en card')
}
});
// Evitar la propagación con contenido creado...
const parrafo1 = document.createElement('P');
parrafo1.textContent = 'Concierto';
parrafo1.classList.add('categoria');
parrafo1.classList.add('concierto');
// Segundo parrafo
const parrafo2 = document.createElement('P');
parrafo2.textContent = 'Concierto de Rock';
parrafo2.classList.add('titulo');
// 3er parrafo...
const parrafo3 = document.createElement('p');
parrafo3.textContent = '$800 por persona';
parrafo3.classList.add('precio');
parrafo3.onclick = function() {
nuevaFuncion(1)
}
// crear el div...
const info = document.createElement('div');
info.classList.add('info');
info.appendChild(parrafo1)
info.appendChild(parrafo2)
info.appendChild(parrafo3);
// Vamos a crear la imagen
const imagen = document.createElement('img');
imagen.src = 'img/hacer2.jpg';
// Crear el Card..
const contenedorCard = document.createElement('div');
contenedorCard.classList.add('contenedorCard');
// Vamos a asignar la imagen al card...
contenedorCard.appendChild(imagen);
// y el info
contenedorCard.appendChild(info);
// Insertarlo en el HTML...
const contenedor = document.querySelector
('.hacer .contenedor-cards');
contenedor.appendChild(contenedorCard);
// al inicio info
function nuevaFuncion(id) {
console.log('desde nueva función', id)
}
LOCAL STORAGE
localStorage.setItem('nombre', 1);
const producto = {
nombre : "Monitor 24 Pulgadas",
precio: 300
}
const productoString = JSON.stringify( producto );
localStorage.setItem('producto', productoString);
const meses = ['Enero', 'Febrero', 'Marzo'];
localStorage.setItem('meses', JSON.stringify
( meses ));
const nombre = localStorage.getItem('nombre');
console.log(nombre);
const productoJSON = localStorage.getItem
('producto');
console.log(JSON.parse( productoJSON) );
const meses = localStorage.getItem('meses');
const mesesArray = JSON.parse(meses);
console.log(mesesArray);
localStorage.removeItem('nombre');
// Actualizar un registro
const mesesArray = JSON.parse( localStorage.getItem
('meses') );
console.log(mesesArray);
mesesArray.push('Nuevo Mes');
console.log(mesesArray);
localStorage.setItem('meses', JSON.stringify
(mesesArray));
localStorage.clear();
FECHAS /////////////////////
const diaHoy = new Date();
let valor;
valor = diaHoy;
valor = diaHoy.getFullYear();
valor = diaHoy.getMonth();
valor = diaHoy.getMinutes();
valor = diaHoy.getHours();
valor = diaHoy.getTime();
valor = diaHoy.setFullYear(2010);
console.log(diaHoy);
const diaHoy = new Date();
moment.locale('es');
console.log( moment().format('MMMM Do YYYY h:mm:ss a') )
console.log( moment().format('LLLL', diaHoy) );
console.log( moment().add(3, 'days').calendar() )
PROTOTYPES
const cliente = {
nombre: 'Juan',
saldo: 500
}
console.log(cliente);
function Cliente(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
const juan = new Cliente('Juan', 500);
console.log(juan);
function Cliente(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
const juan = new Cliente('Juan', 500);
function formatearCliente(cliente) {
const {nombre, saldo} = cliente;
return `El Cliente ${nombre} tiene un saldo de
${saldo}`;
}
function formatearEmpresa(empresa) {
const {nombre, saldo, categoria} = empresa;
return `El Cliente ${nombre} tiene un saldo de
${saldo} y pertenecea la categoría ${categoria}`;
}
console.log( formatearCliente(juan) );
function Empresa(nombre, saldo, categoria) {
this.nombre = nombre;
this.saldo = saldo;
this.categoria = categoria;
}
const CCJ = new Empresa('Código con Juan', 4000,
'Cursos en Línea');
console.log(formatearEmpresa(CCJ));
function Cliente(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
Cliente.prototype.tipoCliente = function() {
let tipo;
if(this.saldo > 10000) {
tipo = 'Gold';
} else if(this.saldo > 5000) {
tipo = 'Platinum';
} else {
tipo = 'Normal';
}
return tipo;
}
Cliente.prototype.nombreClienteSaldo = function() {
return `Nombre: ${this.nombre}, Saldo: ${this.saldo}
, Tipo Cliente: ${this.tipoCliente() }`
}
Cliente.prototype.retiraSaldo = function(retira) {
this.saldo -= retira
}
// Instanciarlo
const pedro = new Cliente('Pedro', 6000);
console.log( pedro.tipoCliente() );
console.log( pedro.nombreClienteSaldo() );
pedro.retiraSaldo(1000);
console.log( pedro.nombreClienteSaldo() );
console.log(pedro);
function Cliente(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
Cliente.prototype.tipoCliente = function() {
let tipo;
if(this.saldo > 10000) {
tipo = 'Gold';
} else if(this.saldo > 5000) {
tipo = 'Platinum';
} else {
tipo = 'Normal';
}
return tipo;
}
Cliente.prototype.nombreClienteSaldo = function() {
return `Nombre: ${this.nombre}, Saldo:
${this.saldo}, Tipo Cliente: ${this.tipoCliente() }`
}
Cliente.prototype.retiraSaldo = function(retira) {
this.saldo -= retira
}
function Persona(nombre, saldo, telefono) {
Cliente.call(this, nombre, saldo);
this.telefono = telefono;
}
Persona.prototype = Object.create
(Cliente.prototype );
Persona.prototype.constructor = Cliente;
// Instanciarlo
const juan = new Persona('Juan', 5000, 10920192);
console.log(juan);
console.log(juan.nombreClienteSaldo());
Persona.prototype.mostrarTelefono = function() {
return `El teléfono de esta persona es
${this.telefono}`
}
console.log(juan.mostrarTelefono() )
PROGRAMACION ORIENTADA
A OBJETOS
class Cliente {
constructor(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
mostrarInformacion() {
return `Cliente: ${this.nombre}, tu saldo es de
${this.saldo}`;
}
static bienvenida() {
return `Bienvenido al cajero`
}
}
const juan = new Cliente('Juan', 400);
console.log(juan.mostrarInformacion());
console.log(juan);
console.log(juan.bienvenida());
console.log( Cliente.bienvenida() )
const Cliente2 = class {
constructor(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
mostrarInformacion() {
return `Cliente: ${this.nombre}, tu saldo es de
${this.saldo}`;
}
}
const juan2 = new Cliente2('Juan', 400);
console.log(juan2.mostrarInformacion())
console.log(juan2);
class Cliente {
constructor(nombre, saldo) {
this.nombre = nombre;
this.saldo = saldo;
}
mostrarInformacion() {
return `Cliente: ${this.nombre}, tu saldo es de
${this.saldo}`;
}
static bienvenida() {
return `Bienvenido al cajero`
}
}
// Herencia
class Empresa extends Cliente {
constructor(nombre, saldo, telefono, categoria) {
super( nombre, saldo );
this.telefono = telefono;
this.categoria = categoria;
}
static bienvenida() { // reescribir un método
return `Bienvenido al cajero de empresas`
}
}
const juan = new Cliente('Juan', 400);
const empresa = new Empresa('Código con Luis',
500, 1091391, 'Aprendizaje en Línea');
console.log(empresa);
console.log(empresa.mostrarInformacion())
console.log(Cliente.bienvenida());
console.log(Empresa.bienvenida());
class Cliente {
#nombre;
setNombre(nombre) {
this.#nombre = nombre;
}
getNombre() {
return this.#nombre;
}
}
const juan = new Cliente();
juan.setNombre('Juan');
console.log(juan.getNombre() );
SETS MAPS Y SYMBOL
const carrito = new Set();
carrito.add('Camisa');
carrito.add('Disco #1');
carrito.add('Disco #2');
carrito.add('Disco #3');
console.log( carrito.delete('Guitarra') );
// console.log( carrito.has('Guitarra') );
console.log(carrito.size);
carrito.forEach( (producto, index, pertenece) => {
// console.log(producto);
// console.log(index);
console.log(pertenece);
} )
console.log(carrito);
// Del siguiente arreglo, eliminar los duplicados
const numeros = [10,20,30,40,50,10,20];
const noDuplicados = new Set(numeros);
console.log(noDuplicados);
// WeakSet
const weakset = new WeakSet();
const cliente = {
nombre: 'Juan',
saldo: 100
}
weakset.add(cliente);
// console.log(weakset.has(cliente2));
// weakset.delete(cliente);
console.log(cliente.size);
console.log(weakset);
const cliente = new Map();
cliente.set('nombre', 'Karen');
cliente.set('tipo', 'Premium');
cliente.set('saldo', 3000);
console.log(cliente.size);
console.log(cliente.has('nombre2'));
console.log(cliente.get('nombre'));
cliente.delete('saldo');
console.log(cliente.has('saldo'));
console.log(cliente.get('saldo'));
cliente.clear();
console.log(cliente);
const paciente = new Map([ ['nombre', 'paciente'],
['cuarto', 'no definido'] ]);
paciente.set('dr', 'Dr Asignado');
paciente.set('nombre', 'Antonio');
console.log(paciente);
paciente.forEach( (datos, index) => {
console.log(index);
} )
const producto = {
idProducto : 10
}
const weakmap = new WeakMap();
weakmap.set(producto, 'Monitor');
console.log( weakmap.has(producto) );
console.log( weakmap.get(producto) );
console.log( weakmap.delete(producto) );
// console.log( weakmap.size );
console.log(weakmap)
const sym = Symbol('1');
const sym2 = Symbol('1');
// console.log( Symbol() === Symbol() );
const nombre = Symbol();
const apellido = Symbol();
const persona = {}
// Agregar nombre y apellido como llaves del objeto
persona[nombre] = 'Juan';
persona[apellido] = 'De la torre';
persona.tipoCliente = 'Premium';
persona.saldo = 500
console.log(persona);
// console.log(persona[nombre]);
// Las propiedades que utilizan un symbol no son
iterables
for(let i in persona) {
console.log(i);
}
// Definir una descripción del symbol
const nombreCliente = Symbol('Nombre del Cliente');
const cliente = {};
cliente[nombreCliente] = 'Pedro';
console.log(cliente);
console.log(cliente[nombreCliente]);
console.log(nombreCliente);
function crearIterador(carrito) {
let i = 0;
return {
siguiente: () => {
const fin = ( i >= carrito.length );
const valor = !fin ? carrito[i++] : undefined ;
return {
fin,
valor
}
}
}
}
const carrito = ['Producto 1', 'Producto 2',
'Producto 3', 'Producto Nuevo'];
// Utilizar el iterador
const recorrerCarrito = crearIterador(carrito);
console.log(recorrerCarrito.siguiente());
console.log(recorrerCarrito.siguiente());
console.log(recorrerCarrito.siguiente());
console.log(recorrerCarrito.siguiente());
console.log(recorrerCarrito.siguiente());
function *crearGenerador() {
yield 1;
yield 'Juan';
yield 3+3;
yield true;
}
// const iterador = crearGenerador();
// console.log(iterador);
// console.log(iterador.next().value);
// console.log(iterador.next());
// console.log(iterador.next().value);
// console.log(iterador.next());
// console.log(iterador.next());
// console.log(iterador);
// Generador para carrito de compras
function *generadorCarrito( carrito ) {
for(let i = 0; i < carrito.length; i++ ) {
yield carrito[i];
}
}
const carrito = ['Producto 1', 'Producto 2',
'Producto 3'];
const iterador = generadorCarrito(carrito);
console.log( iterador.next() );
console.log( iterador.next() );
console.log( iterador.next() );
console.log( iterador.next() );
const ciudades = ['Londres', 'New York', 'Madrid',
'Paris'];
const ordenes = new Set([123, 231, 131, 102]);
const datos = new Map();
datos.set('nombre', 'Juan');
datos.set('profesion', 'Desarrollador Web');
// Default
for(let ciudad of ciudades) {
console.log(ciudad);
}
for(let orden of ordenes) {
console.log(orden);
}
for(let dato of datos) {
console.log(dato);
}
// Keys Iterator
// for( let keys of ciudades.keys() ) {
// console.log(keys);
// }
// for( let keys of ordenes.keys() ) {
// console.log(keys);
// }
// for( let keys of datos.keys() ) {
// console.log(keys);
// }
// // Values Iterator
// for( let value of ciudades.values()) {
// console.log(value);
// }
// for( let value of ordenes.values()) {
// console.log(value);
// }
// for( let value of datos.values()) {
// console.log(value);
// }
// Entries Iterator
// for (let entry of ciudades.entries() ) {
// console.log(entry);
// }
// for (let entry of ordenes.entries() ) {
// console.log(entry);
// }
// for (let entry of datos.entries() ) {
// console.log(entry);
// }
MODULOS
EN EL HTML HAY QUE PONER : <script src="js/app.js"
type="module"></script>
APP.JS
import nuevaFuncion, { nombreCliente, ahorro,
mostrarInformacion, tieneSaldo, Cliente }
from './cliente.js';
import { Empresa } from './empresa.js';
nuevaFuncion();
console.log( nombreCliente );
console.log( ahorro );
console.log( mostrarInformacion(nombreCliente,
ahorro) );
tieneSaldo(ahorro);
const cliente = new Cliente( nombreCliente, ahorro );
console.log(cliente.mostrarInformacion());
// Importar empresa
const empresa = new Empresa('Código Con Juan',
100, 'Aprendizaje en Línea');
console.log(empresa.mostrarInformacion());
CLIENTE.JS
export const nombreCliente = 'Juan';
export const ahorro = 200;
export function mostrarInformacion(nombre, ahorro) {
return `Cliente: ${nombre} - Ahorro: ${ahorro}`;
}
export function tieneSaldo(ahorro) {
if(ahorro > 0) {
console.log('Si tiene saldo')
} else {
console.log('El Cliente no tiene saldo')
}
}
export class Cliente {
constructor(nombre, ahorro) {
this.nombre = nombre;
this.ahorro = ahorro;
}
mostrarInformacion() {
return `Cliente: ${this.nombre} - Ahorro:
${this.ahorro}`;
}
}
export default function nuevaFuncion() {
console.log('Este es el export default');
}
EMPRESA.JS
import { Cliente } from './cliente.js';
export class Empresa extends Cliente {
constructor(nombre, ahorro, categoria) {
super(nombre, ahorro);
this.categoria = categoria;
}
mostrarInformacion() {
return `Cliente: ${this.nombre} - Ahorro:
${this.ahorro} - Categoria: ${this.categoria}`;
}
}
INDEX DB
let DB;
document.addEventListener('DOMContentLoaded', () => {
crmDB();
setTimeout(() => {
crearCliente();
}, 5000);
})
function crmDB() {
// Crear base de datos version 1.0
let crmDB = window.indexedDB.open('crm', 1);
// Si hay un error
crmDB.onerror = function() {
console.log('Hubo error a la hora de crear la BD');
}
// si se creo bien
crmDB.onsuccess = function() {
console.log('Base de datos Creada!');
DB = crmDB.result;
}
// Configuración de la base de datos
crmDB.onupgradeneeded = function(e) {
const db = e.target.result;
const objectStore = db.createObjectStore('crm', {
keyPath: 'crm',
autoIncrement: true
});
// Definir las columnas
objectStore.createIndex('nombre', 'nombre',
{ unique: false });
objectStore.createIndex('email', 'email',
{ unique: true });
objectStore.createIndex('telefono', 'telefono',
{ unique: false });
console.log('Columnas Creadas');
}
}
function crearCliente() {
let transaction = DB.transaction(['crm'],
'readwrite');
transaction.oncomplete = function() {
console.log('Transacción Completada');
}
transaction.onerror = function() {
console.log('Hubo un error en la transacción');
}
const objectStore = transaction.objectStore('crm');
const nuevoCliente = {
telefono: 19009120,
nombre: 'Juan',
email: 'correo@correo.com'
}
const peticion = objectStore.put(nuevoCliente);
console.log(peticion);
}
PROMISES
const paises = ['Francia', 'España', 'Portugal',
'Australia', 'Inglaterra'];
function nuevoPais(pais, callback) {
setTimeout(() => {
paises.push(pais);
callback();
}, 2000);
}
function mostrarPaises() {
setTimeout(() => {
paises.forEach(pais => {
console.log(pais);
});
}, 1000);
}
mostrarPaises();
nuevoPais('Alemania', mostrarPaises);
const paises = [];
function nuevoPais(pais, callback) {
paises.push(pais);
console.log(`Agregado: ${pais}`);
callback();
}
function mostrarPaises() {
console.log(paises);
}
function iniciarCallbackHell() {
setTimeout(() => {
nuevoPais('Alemania', mostrarPaises);
setTimeout(() => {
nuevoPais('Francia', mostrarPaises);
setTimeout(() => {
nuevoPais('Inglaterra', mostrarPaises);
}, 3000);
}, 3000);
}, 3000);
}
iniciarCallbackHell();
const aplicarDescuento = new Promise( (resolve,
reject) => {
const descuento = true;
if(descuento) {
resolve('Descuento Aplicado');
} else {
reject('No se pudo aplicar')
}
} )
aplicarDescuento
.then( resultado => descuento(resultado))
.catch(error => console.log(error))
// Hay 3 valores posibles...
// fulfilled - El promise se cumplió
// rejected - El Promise no se cumplió
// pending - No se ha cumplido y tampoco fue
rechazado
function descuento(mensaje) {
console.log(mensaje);
}
const paises = [];
const nuevoPais = pais => new Promise( resolve => {
setTimeout(() => {
paises.push(pais);
resolve('El resultado del Resolve')
}, 3000);
} )
nuevoPais('Alemania')
.then( resultado => {
console.log(resultado);
console.log(paises);
return nuevoPais('Francia')
})
.then( resultado => {
console.log(resultado)
console.log(paises);
return nuevoPais('Inglaterra')
} )
.then( resultado => {
console.log(resultado);
})
FETCH API
const cargarTxtBtn = document.querySelector
('#cargarTxt');
cargarTxtBtn.addEventListener('click', obtenerDatos);
function obtenerDatos() {
const url = 'data/datos.txt';
fetch(url)
.then( respuesta => {
console.log(respuesta);
console.log(respuesta.status);
console.log(respuesta.statusText);
console.log(respuesta.url);
console.log(respuesta.type);
return respuesta.text()
})
.then( datos => {
console.log(datos)
} )
.catch( error => {
console.log(error);
})
}
const cargarJSONBtn = document.querySelector
('#cargarJSON');
cargarJSONBtn.addEventListener('click',
obtenerDatos);
function obtenerDatos() {
const url = 'data/empleado.json';
fetch(url)
.then( respuesta => respuesta.json() )
.then( resultado => mostrarHTML(resultado) )
}
function mostrarHTML({ empresa, id, nombre,
trabajo }) {
const contenido = document.querySelector
('.contenido');
contenido.innerHTML = `
<p>Empleado: ${nombre}</p>
<p>ID: ${id}</p>
<p>Empresa: ${empresa}</p>
<p>Trabajo: ${trabajo}</p>
`;
}
const cargarJSONArrayBtn = document.querySelector
('#cargarJSONArray');
cargarJSONArrayBtn.addEventListener('click',
obtenerDatos);
function obtenerDatos() {
const url = 'data/empleados.json';
fetch(url)
.then(respuesta => respuesta.json() )
.then(resultado => mostrarHTML(resultado))
}
function mostrarHTML(empleados) {
const contenido = document.querySelector
('.contenido');
let html = '';
empleados.forEach( empleado => {
const { id, nombre, empresa, trabajo } = empleado;
html += `
<p>Empleado: ${nombre}</p>
<p>ID: ${id}</p>
<p>Empresa: ${empresa}</p>
<p>Trabajo: ${trabajo}</p>
`;
} );
contenido.innerHTML = html;
}
const cargarAPIBtn = document.querySelector
('#cargarAPI');
cargarAPIBtn.addEventListener('click',
obtenerDatos);
function obtenerDatos() {
const url = 'https://picsum.photos/list';
fetch(url)
.then(respuesta => respuesta.json())
.then( resultado => mostrarHTML( resultado ));
}
function mostrarHTML(datos) {
const contenido = document.querySelector
('.contenido');
let html = '';
datos.forEach( perfil => {
const { author, post_url } = perfil;
html += `
<p>Autor: ${author}</p>
<a href="${post_url}" target="_blank">Ver Imagen</a>
`
});
contenido.innerHTML = html;
}
ARCHIVOS:
DATOS.TXT
Informacion desde un archivo .txt
EMPLEADO.JSON
{
"id" : 1,
"nombre" : "Juan",
"empresa" : "Código Con Juan",
"trabajo" : "Desarrollador Web"
}
EMPLEADOS.JSON
[
{
"id" : 1,
"nombre" : "Juan",
"empresa" : "Código con Juan",
"trabajo" : "Desarrollador Web"
},
{
"id" : 2,
"nombre" : "Alejandra",
"empresa" : "Código con Juan",
"trabajo" : "Diseñadora"
},
{
"id" : 3,
"nombre" : "Pedro",
"empresa" : "Código con Juan",
"trabajo" : "Aplicaciones Móviles"
}
]
ASYNC AWAIT
console.log(1 + 1);
try {
autenticarUsuario();
} catch (error) {
console.log(error);
}
console.log(2 + 2);
function descargarClientes() {
return new Promise((resolve, reject) => {
const error = true;
setTimeout(() => {
if(!error) {
resolve('El Listado de Clientes se descargo
correctamente');
} else {
reject('Error en la conexión');
}
}, 3000);
})
}
// Async await
async function ejecutar() {
try {
console.log(1 + 1);
const respuesta = await descargarClientes();
console.log( 2 + 2);
console.log(respuesta);
} catch (error) {
console.log(error);
}
}
ejecutar();
function descargarClientes() {
return new Promise((resolve, reject) => {
const error = false;
setTimeout(() => {
if(!error) {
resolve('El Listado de Clientes se descargo
correctamente');
} else {
reject('Error en la conexión');
}
}, 3000);
})
}
async function ejecutar() {
}
// Async await
const ejecutar = async () => {
try {
console.log(1 + 1);
const respuesta = await descargarClientes();
console.log( 2 + 2);
console.log(respuesta);
} catch (error) {
console.log(error);
}
}
ejecutar();
function descargarNuevosClientes() {
return new Promise( resolve => {
console.log('Descargando clientes....');
setTimeout(() => {
resolve('Los clientes fueron descargados');
}, 5000);
})
}
function descargarNuevosPedidos() {
return new Promise( resolve => {
console.log('Descargando pedidos....');
setTimeout(() => {
resolve('Los pedidos fueron descargados');
}, 3000);
})
}
const app = async () => {
try {
const respuesta = await Promise.all
([ descargarNuevosClientes(),
descargarNuevosPedidos()]);
console.log(respuesta[0]);
console.log(respuesta[1]);
} catch (error) {
console.log(error);
}
}
app();
const url = 'https://picsum.photos/list';
document.addEventListener('DOMContentLoaded',
obtenerDatos);
function obtenerDatos() {
fetch(url)
.then(respuesta => respuesta.json())
.then(resultado => console.log(resultado))
.catch(error => console.log(error));
}
async function obtenerDatos() {
try {
const respuesta = await fetch(url);
const resultado = await respuesta.json();
console.log(resultado);
} catch (error) {
console.log(error);
}
}
FUNCTIONAL JS
const suma = function(a, b) {
return a + b;
}
const resultado = suma;
console.log(resultado(10, 20));
const suma = (a, b) => a + b;
const multiplicar = (a, b) => a * b;
const sumarOMultiplicar = fn => fn(10, 20);
console.log( sumarOMultiplicar( suma ) );
console.log( sumarOMultiplicar( multiplicar ) );
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet', precio: 300},
{ nombre: 'Audifonos', precio: 200},
{ nombre: 'Teclado', precio: 50},
{ nombre: 'Celular', precio: 500},
{ nombre: 'Bocinas', precio: 300},
{ nombre: 'Laptop', precio: 800},
];
const mayor400 = producto => {
return producto.precio > 400;
}
const resultado = carrito.filter(mayor400);
console.log(carrito);
console.log(resultado);
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet', precio: 300},
{ nombre: 'Audifonos', precio: 200},
{ nombre: 'Teclado', precio: 50},
{ nombre: 'Celular', precio: 500},
{ nombre: 'Bocinas', precio: 300},
{ nombre: 'Laptop', precio: 800},
];
const obtenerNombres = producto => {
return producto.nombre;
}
const resultado = carrito.map( obtenerNombres );
console.log(resultado);
const carrito = [
{ nombre: 'Monitor 20 Pulgadas', precio: 500},
{ nombre: 'Televisión 50 Pulgadas', precio: 700},
{ nombre: 'Tablet', precio: 300},
{ nombre: 'Audifonos', precio: 200},
{ nombre: 'Teclado', precio: 50},
{ nombre: 'Celular', precio: 500},
{ nombre: 'Bocinas', precio: 300},
{ nombre: 'Laptop', precio: 800},
];
const obtenerNombres = p => p.nombre;
const resultado = carrito.map( obtenerNombres );
console.log(resultado);
const mayor400 = p => p.precio > 400;
const resultado2 = carrito.filter(mayor400);
console.log(resultado2);
// Funciones Puras o Pure Functions
const numero1 = 20;
const duplicar = numero => numero * 2;
const resultado = duplicar(numero1);
console.log(resultado);
console.log(numero1);
const obtenerCliente = () => () => console.log
('Juan Pablo');
const fn = obtenerCliente();
fn();
const obtenerCliente = () => {
const nombre = "Juan";
function muestraNombre() {
console.log(nombre);
}
return muestraNombre;
}
const cliente = obtenerCliente();
cliente();
const suma = (a,b,c) => a + b + c;
const parcial = a => b => c => suma(a,b,c);
const resultadoParcial = parcial(5)(4)(3);
console.log(resultadoParcial);
const obtenerNombre = info => ({
mostrarNombre() {
console.log(`Nombre: ${info.nombre}`);
}
});
const guardarEmail = info => ({
agregarEmail(email) {
console.log(`Guardando email en: ${info.nombre}`);
info.email = email;
}
})
const obtenerEmail = info => ({
mostrarEmail() {
console.log(`Correo: ${info.email}`);
}
})
const obtenerEmpresa = info => ({
mostrarEmpresa() {
console.log(`Empresa: ${info.empresa}`);
}
})
const obtenerPuesto = info => ({
mostrarPuesto() {
console.log(`Empresa: ${info.puesto}`);
}
})
function Cliente(nombre, email, empresa) {
let info = {
nombre,
email,
empresa
}
return Object.assign(
info,
obtenerNombre(info),
guardarEmail(info),
obtenerEmail(info),
obtenerEmpresa(info)
)
}
function Empleado(nombre, email, puesto) {
let info = {
nombre,
email,
puesto
}
return Object.assign(
info,
obtenerNombre(info),
guardarEmail(info),
obtenerEmail(info),
obtenerPuesto(info)
)
}
const cliente = Cliente('Juan', null, 'Código
Con luis');
cliente.mostrarNombre();
cliente.agregarEmail('cliente@cliente.com');
cliente.mostrarEmail();
cliente.mostrarEmpresa();
console.log('==========')
const empleado = Empleado('Pedro', null,
'Programador');
empleado.mostrarNombre();
empleado.agregarEmail('empleado@empleado.com');
empleado.mostrarEmail();
empleado.mostrarPuesto();
DOMINANDO JAVASCRIPT
const login = true;
const cliente = 'Juan';
function clienteLogueado() {
}
function funcion2() {
console.log(cliente);
}
funcion2();
clienteLogueado();
obtenerCliente('Juan');
function obtenerCliente(nombre) {
console.log(`El nombre del cliente es ${nombre}`);
}
const obtenerCliente2 = function(nombre) {
console.log(`El nombre del cliente es ${nombre}`);
}
obtenerCliente2('Pablo');
const numero1 = 20;
const numero2 = "40";
console.log(numero1 + numero2); // Implicita
console.log(Number(numero2)); // explicita
console.log(numero1.toString());
const pedido = [1,2,3,4];
console.log(pedido.toString());
console.log(JSON.stringify(pedido));
// Implicit Binding
const usuario = {
nombre: 'Juan',
edad: 20,
informacion() {
console.log(`Mi Nombre es ${this.nombre} y mi
edad es ${this.edad}`)
},
mascota: {
nombre: 'Hook',
edad: 1,
informacion() {
console.log(`Mi Nombre es ${this.nombre} y mi
edad es ${this.edad}`)
}
}
}
usuario.informacion();
usuario.mascota.informacion();
// Explicit Binding...
function persona(el1, el2) {
console.log(`Mi Nombre es ${this.nombre} y Escucho
${el1} y ${el2}`);
}
const informacion = {
nombre: 'Juan'
}
const musicaFavorita = ['Heavy Metal', 'Rock'];
persona.call(informacion, musicaFavorita[0],
musicaFavorita[1] );
persona.apply(informacion, musicaFavorita);
const nuevaFn = persona.bind(informacion,
musicaFavorita[0], musicaFavorita[1]);
nuevaFn();
// New binding
function Auto(modelo, color) {
this.modelo = modelo;
this.color = color;
}
const auto = new Auto('Camaro', 'Negro');
console.log(auto);
// Window binding
window.color = 'negro';
function hola() {
console.log(color);
}
hola();
console.log('Primero');
setTimeout(() => {
console.log('Segundo');
}, 0);
console.log('Tercero');
setTimeout(() => {
console.log('Cuarto');
}, 0);
new Promise(function(resolve) {
resolve('Desconocido...')
}).then(console.log)
console.log('Ultimo')
function hola() {
console.log('hola')
}
hola();
self.onload = () => {
console.log('Ventana Lista');
}
window.nombre = 'Monitor 20 Pulgadas';
const producto = {
precio: 30,
disponible: true,
mostrarInfo: function() {
return `El Producto: ${self.nombre} `
}
}
console.log(producto.mostrarInfo());
SERVICEWORKERS
if( 'serviceWorker' in navigator ) {
navigator.serviceWorker.register('./sw.js')
.then( registrado => console.log('Se instalo
correctamente... ', registrado) )
.catch( error => console.log('Falló la
instalación... ', error));
} else {
console.log('Service Workers no soportados');
}
DESIGN PATTERNS
// Class Pattern
class Persona {
constructor(nombre, email) {
this.nombre = nombre;
this.email = email;
}
}
const persona = new Persona('Juan',
'correo@correo.com');
console.log(persona);
// Constructor Pattern
class Persona {
constructor(nombre, email) {
this.nombre = nombre;
this.email = email;
}
}
class Cliente extends Persona {
constructor(nombre, email, empresa) {
super(nombre, email);
this.empresa = empresa;
}
}
const persona = new Persona('Juan',
'correo@correo.com');
console.log(persona);
const cliente = new Cliente('Miguel',
'cliente@cliente.com', 'Código Con Luis');
console.log(cliente);
// Singleton
let instancia = null;
class Persona {
constructor(nombre, email){
if(!instancia) {
this.nombre = nombre;
this.email = email;
instancia = this;
} else {
return instancia;
}
}
}
const persona = new Persona('Juan',
'correo@correo.com');
console.log(persona);
const persona2 = new Persona('Karen',
'karen@karen.com');
console.log(persona2);
// Factory - Crea objetos basados en ciertas
condiciones
class InputHTML {
constructor(type, nombre) {
this.type = type;
this.nombre = nombre;
}
crearInput() {
return `<input type="${this.type}" name="$
{this.nombre}" id="${this.nombre}">`;
}
}
class HTMLFactory {
crearElemento(tipo, nombre) {
switch(tipo) {
case 'text':
return new InputHTML('text', nombre)
case 'tel':
return new InputHTML('tel', nombre)
case 'email':
return new InputHTML('email', nombre)
default:
return;
}
}
}
const elemento = new HTMLFactory();
const inputText = elemento.crearElemento('text',
'nombre-cliente');
console.log(inputText.crearInput());
const elemento2 = new HTMLFactory();
const inputText2 = elemento2.crearElemento('tel',
'telefono-cliente');
console.log(inputText2.crearInput());
const elemento3 = new HTMLFactory();
const inputText3 = elemento3.crearElemento('email',
'email-cliente');
console.log(inputText3.crearInput());
// Module Pattern
const modulo1 = (function() {
const nombre = 'Juan';
function hola() {
console.log('hola')
}
return {
nombre,
hola
}
})();
class Persona {
constructor(nombre, email) {
this.nombre = nombre;
this.email = email;
}
}
class Cliente {
constructor(nombre, email) {
this.nombre = nombre;
this.email = email;
}
}
const funcionesPersona = {
mostrarInformacion() {
console.log(`Nombre Persona: ${this.nombre}
Email: ${this.email}`)
},
mostrarNombre() {
console.log(`Mi nombre es ${this.nombre}`)
}
}
// Añadir funcionesPersona a la clase de Persona
Object.assign(Persona.prototype, funcionesPersona);
Object.assign(Cliente.prototype, funcionesPersona);
const cliente = new Persona('Juan',
'correo@correo.com');
console.log(cliente);
cliente.mostrarInformacion()
cliente.mostrarNombre()
const cliente2 = new Cliente('Cliente',
'cliente@cliente.com');
console.log(cliente2);
cliente2.mostrarInformacion()
cliente2.mostrarNombre()
const restaurantApp = {};
restaurantApp.platillos = [
{
platillo: 'Pizza',
precio: 25
},
{
platillo: 'Hamburguesa',
precio: 20
},
{
platillo: 'Hot Dog',
precio: 20
}
];
restaurantApp.funciones = {
mostrarMenu: platillos => {
console.log(`Bienvenidos a nuestro menú`);
platillos.forEach((platillo, index) => {
console.log(`${index} : ${platillo.platillo} $
${platillo.precio}`)
});
},
ordenar: id => {
console.log(`Tu Platillo: ${restaurantApp
.platillos[id].platillo} se esta preparando`)
},
agregarPlatillo: (platillo, precio) => {
const nuevo = {
platillo,
precio
};
restaurantApp.platillos.push(nuevo);
}
}
restaurantApp.funciones.ordenar(1);
restaurantApp.funciones.agregarPlatillo('Taco', 20);
const { platillos } = restaurantApp;
restaurantApp.funciones.mostrarMenu( platillos );
function Vendedor(nombre) {
this.nombre = nombre;
this.sala = null;
}
Vendedor.prototype = {
oferta: (articulo, precio) => {
console.log(`Tenemos el siguiente artículo
${articulo}, iniciamos con precio de ${precio}`);
},
vendido: comprador => {
console.log(`Vendido a ${comprador}`);
}
}
function Comprador(nombre) {
this.nombre = nombre;
this.sala = null;
}
Comprador.prototype = {
oferta: (cantidad, comprador) => {
console.log(`${comprador.nombre} : ${cantidad}`)
}
}
function Subasta() {
let compradores = {};
return {
registrar: usuario => {
compradores[usuario.nombre] = usuario;
usuario.sala = this;
}
}
}
// Crear objetos
const juan = new Comprador('Juan');
const pablo = new Comprador('Pablo');
const vendedor = new Vendedor('Vendedor de Autos');
const subasta = new Subasta();
// Tienes que registrarlos
subasta.registrar(juan);
subasta.registrar(pablo);
subasta.registrar(vendedor);
vendedor.oferta('Mustang 66', 300);
juan.oferta(350, juan);
pablo.oferta(450, pablo);
juan.oferta(500,juan);
pablo.oferta(700,pablo);
vendedor.vendido('Pablo');
SEGURIDAD PERFORMANCE RENDIMIENTO
function consultarAPI() {
const inicio = performance.now();
const { moneda, criptomoneda} = objBusqueda;
const url = `https://min-api.cryptocompare.com/
data/pricemultifull?fsyms=${criptomoneda}&
tsyms=${moneda}`;
mostrarSpinner();
fetch(url)
.then(respuesta => respuesta.json())
.then(cotizacion => {
mostrarCotizacionHTML(cotizacion.DISPLAY
[criptomoneda][moneda]);
});
const fin = performance.now();
console.log( fin - inicio);
}