GUÍA JAVASCRIPT

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);

}