También se puede negar una función, ejemplo
let caja = () => {
console.log("Regresa falso");
return false;
}
console.log(!caja());
OJO: si Javascript nota que el primer resultado dará false, ya no seguirá revisando más cosas, por eso primero pon el true, se usa mucho cuando quieres ejecutar funciones de manera condicional
let box = () => {
console.log("Regresa true");
return true;
}
let caja = () => {
console.log("Regresa falso");
return false;
}
console.log(caja() && box());
Ejercicio capcioso con AND y OR
const soyUndifined = undefined;
const soyNull = null;
const soyFalso = false;
const a1 = true && 'Hola mundo';
//evalua primero que sea true y como si es true, pasa al segundo valor y lo imprime,osea se le asigna ese valor, EL UÚLTIMO VALOR
const a2 = true && 'Hola mundo' && 150;
//Se le asigna el último valor, que no sea negativo
const a3 = true && 'hola mundo' && 150 && soyNull;
const a4 = true && 'hola mundo' && 150 && soyUndifined;
//Pero si hay un valor falso, lo imprime aunque no sea el último
const a5 = true && 'hola mundo' && soyFalso && 150 && soyUndifined;
//Pero si es con OR, buscará al menos un true o un valor sin detenerse en el primer valor aunque sea false, e imprimira el último valor
const a6 = soyFalso || 'Ya no soy falso';
//Imprime el último valor aunque sea un null o undifined
const a7 = soyFalso || soyUndifined;
const a8 = soyFalso || soyUndifined || soyNull;
//Pero si encuentra un valor anterior al true, DISTINTO de null o undifined, pondrá ese valor
const a9 = soyFalso || "texto" || true;
console.log(a9);
Deestructuración con un objeto RESUMIDO
const persona = (nombre, apellido) =>
({ nombre, apellido })
const { nombre: nombreNuevo } = persona('Ricardo', 'Garrido');
console.log({ nombreNuevo });
Deestructuración con un objeto imprimiendo con una función
let usuario = {
nombre: 'Ric',
apellido: 'gARRido',
edad: 33,
pais: 'mexaland'
}
let { nombre, apellido } = usuario;
let imprimir = ({ nombre, profesion = 'developer' }) => {
console.log(`Mi nombres es ${nombre} y soy ${profesion}`);
}
imprimir(usuario);
Esto sobre escribe el valor en ambos objetos, esto es un problema
let juan = { nombre: 'Juan' };
let ana = juan;
ana.nombre = 'Ana';
console.log(juan, ana);
Aquí lo resolvemos apuntando a otro espacio en memoria
let juan = { nombre: 'Juan' };
let ana = {...juan };
ana.nombre = 'Ana';
console.log(juan, ana);
Esto sobre escribe el valor en ambos objetos, esto es un problema
const cambiarNombre = (persona) => {
persona.nombre = 'Tony'
return persona;
}
let peter = { nombre: 'Peter' };
let tony = cambiarNombre(peter);
console.log(peter, tony);
Esto sobre escribe el valor en ambos objetos, esto es un problema
const cambiarNombre = ({...persona }) => {
persona.nombre = 'Tony'
return persona;
}
let peter = { nombre: 'Peter' };
let tony = cambiarNombre(peter);
console.log(peter, tony);
Esto sobre escribe el valor en ambos arreglos, esto es un problema
const frutas = ['Manzana', 'Pera', 'Piña'];
const otrasFrutas = frutas;
otrasFrutas.push('Mango');
console.table({ frutas, otrasFrutas });
Aquí ya no sobreescribe el valor
const frutas = ['Manzana', 'Pera', 'Piña'];
const otrasFrutas = [...frutas];
otrasFrutas.push('Mango');
console.table({ frutas, otrasFrutas });
Definicion sencilla de un callback Es una función que nos permite recibir como parametro otra función, es una función que se pasa a otra función como argumento, son una forma de asegurarnos que un determinado codigo no se ejecute hasta que un determinado codigo allá terminado de ejecutarse
Crea una promesa
const promesa = new Promise((resolve, reject) => {
$caja = false;
if ($caja) {
resolve();
} else {
reject();
}
});
promesa.then(() => {
alert("Exito!");
}).catch(() => {
alert("No funciono!");
});
console.log('%c mis variables','color:blue;');
console.table({a,b,c});
puedes imprimir los valores en una tabla en la consolalet nombre = (nombre) => {
console.log(nombre);
return [1, 2];
}
const almacen = nombre("Ricardo");
console.log(almacen[0], almacen[1]);
let perro = 'firulais';
perro = 'solovino';
let meses = new Array('Enero', 'Febrero', 'Marzo');
console.log(meses);
let perro = 'firulais';
perro = 'solovino';
funcionDentroDeVariable();
pero solo se pueden ejecutar debajo de donde comenzaste a escribir la funciónlet cadena = Array.of("hola", 2, true, [1, 2, "mundo"]);
let eresMayor=(edad >= 18) ? "eres mayor de edad" : "Eres menor de edad";
let objeto = {
nombre: "Ric",
apellido: "Garrido",
Edad: 33
}
for (const propiedad in objeto) {
console.log(`Key: ${propiedad} --- Value: ${objeto[propiedad]}`);
}
let texto = "ric";
let cadena = [1, 2, 3, 4, 5];
for (const iterator of cadena) {
console.log(iterator);
}
const perro = {
nombre: "kenai",
ladrar: () => {
console.log(this);
}
}
let nombre = (nombre) => {
console.log(nombre);
return [1, 2];
}
const almacen = nombre("Ricardo");
console.log(almacen[0], almacen[1]);
let persona = (nombre, ...args) => {
return [nombre, args];
}
console.log(persona("Ricardo", true, 32, ["Perro", "Canada"]));
Esto sobre escribe el valor en ambos objetos, esto es un problema
let juan = { nombre: 'Juan' };
let ana = juan;
ana.nombre = 'Ana';
console.log(juan, ana);
Aquí lo resolvemos apuntando a otro espacio en memoria
let juan = { nombre: 'Juan' };
let ana = {...juan };
ana.nombre = 'Ana';
console.log(juan, ana);
let perro = 'firulais';
perro = 'solovino';
Valores boleanos
0 = false
-7 = true
"" = false
" " = true
null = false
undifined = false
= true
{} = true
[] = true
infinite = true
-infinite = true
new Date() = true
NaN = false
const producto = 'Monitor 20 Pulgadas';
const precio = '38USD'
console.log(producto.concat(precio));
const producto = 'Monitor 20 Pulgadas';
console.log(producto.length);
const producto = 'Monitor 20 Pulgadas';
console.log(producto.indexOf('Pulgadas'));
const producto = 'Monitor 20 Pulgadas';
console.log(producto.includes('Pulgadas'));
let caja = 4;
caja += 3;
console.log(caja);
let caja = 4;
caja -= 3;
console.log(caja);
let eresMayor=(edad >= 18) ? "eres mayor de edad" : "Eres menor de edad";
let nombre = "Ricardo";
console.log(nombre);
let nombre = "Fulano";
console.log(nombre);
let perro = 'firulais';
perro = 'solovino';
let nombre = (nombre) => {
console.log(nombre);
return [1, 2];
}
const almacen = nombre("Ricardo");
console.log(almacen[0], almacen[1]);
let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];
console.log(`¿ ${amigos} incluye la palabra "Lau"?`, amigos.includes('Lau'));
//clasica
(function() {
console.log("Soy una función anónima autoejecutable CLASICA");
})();
//Crockford
((function() {
console.log("Soy una función anónima autoejecutable CROCKFORD");
})());
//UNARIA
+function() {
console.log("Soy una función anónima autoejecutable UNARIA");
}();
! function() {
console.log("Soy una función anónima autoejecutable ESTILO FACEBOOK");
}
console.log(typeof nombreDeLaVariable);
Ejemplo de pasando datos por valor
let a = 20;
let b = 10;
a = 30;
console.log(juan, ana);
Ejemplo de pasando datos por referencia
let juan = { nombre: 'Juan' };
let ana = juan;
ana.nombre = 'Ana';
const cambiarNombre = (persona) => {
persona.nombre = 'Tony'
return persona;
}
let tony = cambiarNombre(peter);
console.log(peter, tony);
let perro = 'firulais';
perro = 'solovino';
let hoy = new Date(); console.log(hoy);
let hoy = new Date(); let dia = hoy.getDay(); console.log(dia);
let fecha = new Date().getFullYear();console.log(fecha);
let dia = new Date(); let dato = dia.getMinutes(); console.log(dato);
let dia = new Date(); let dato = dia.getHours(); console.log(dato);
console.log(fecha.getSeconds());
console.log(fecha.toDateString);
console.log(fecha.toLocalString);
console.log(fecha.toLocalTimeString);
let navidad2019 = new Date('2019-25-12'); console.log(navidad2019);
let dia = new Date(); let dato = dia.setFullYear(2016); dato = dia.getFullYear(); console.log(dato);
let cadena = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum";
let expReg = new RegExp("lorem", "ig");
//g representa que debe de buscar en todo el texto y la i , que ignore si es mayuscula o minuscula
let expReg2 = /lorem{2}/ig
//el de arriba es el formato más usado de las expresions regulares
//Las llaves es para indicar cuantas veces debe estar repetida en el texto la palabra que se está buscando
console.log(expReg.test(cadena));
console.log(expReg.exec(cadena));
console.log(expReg2.test(cadena));
console.log(expReg2.exec(cadena));
let persona = (nombre, ...args) => {
return [nombre, args];
}
console.log(persona("Ricardo", true, 32, ["Perro", "Canada"]));
Esto sobre escribe el valor en ambos objetos, esto es un problema
let juan = { nombre: 'Juan' };
let ana = juan;
ana.nombre = 'Ana';
console.log(juan, ana);
Aquí lo resolvemos apuntando a otro espacio en memoria
let juan = { nombre: 'Juan' };
let ana = {...juan };
ana.nombre = 'Ana';
console.log(juan, ana);
const perro = {
nombre: "kenai",
ladrar: () => {
console.log(this);
}
}
Esto sobre escribe el valor en ambos objetos, esto es un problema
const cambiarNombre = (persona) => {
persona.nombre = 'Tony'
return persona;
}
let peter = { nombre: 'Peter' };
let tony = cambiarNombre(peter);
console.log(peter, tony);
Esto sobre escribe el valor en ambos objetos, esto es un problema
const cambiarNombre = ({...persona }) => {
persona.nombre = 'Tony'
return persona;
}
let peter = { nombre: 'Peter' };
let tony = cambiarNombre(peter);
console.log(peter, tony);
Esto sobre escribe el valor en ambos arreglos, esto es un problema
const frutas = ['Manzana', 'Pera', 'Piña'];
const otrasFrutas = frutas;
otrasFrutas.push('Mango');
console.table({ frutas, otrasFrutas });
Aquí ya no sobreescribe el valor
const frutas = ['Manzana', 'Pera', 'Piña'];
const otrasFrutas = [...frutas];
otrasFrutas.push('Mango');
console.table({ frutas, otrasFrutas });
Los objetos de manera antigua en Javascript
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
//Metodos
this.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
console.log(snoopy);
PROTOTYPE:Metodos agregados desde afuera, esto evita la duplicidad de metodos
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
HERENCIA PROTOTIPICA:Heredar las propiedades y metodos de otra funcion constructora
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
-----------------------------------
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene
HERENCIA PROTOTIPICA:Heredar las propiedades y metodos de otra funcion constructora
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
-----------------------------------
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene
SOBREESCRIBIENDO UN METODO HEREDADO DE UNA FUNCION(JAVASCRIPT VIEJITO)
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
-----------------------------------
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene
AGREGANDO UN METODO A UNA FUNCION HEREDADA
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
-----------------------------------
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro incluso los prototipos, como el .sonar que tiene
Propiedades y metodos estaticos: sirven para agregarle un valor a la clase fuera de una clase sin necesidad de instanciar la clase para crear un objeto. Ejemplo
class Animal {
//El constructor es un metodo especial que se ejecuta en el momento de instancia de la clase
constructor(nombre, genero) {
this.nombre = nombre;
this.genero = genero;
}
//Metodos
sonar() {
console.log("Hago sonidos porque estoy vivo");
}
saludar() {
console.log(`HOla me llamo ${this.nombre}`);
}
}
class Perro extends Animal {
constructor(nombre, genero, tamanio) {
//Con el metodo super() se manda llamar al constructor de la clase padre
super(nombre, genero);
this.tamanio = tamanio;
}
sonar() {
console.log("Soy un perro y mi sonido es un ladrido");
}
ladrar() {
console.log("GUa gua");
}
static queEres() {
console.log("Soy el mejor amigo del hombre");
}
}
Perro.queEres();
Getters y Setters son metodos especiales que nos permiten establecer y obtener los valores y atributos de nuestra clase. Los sets se acostumbra recibir un valor y no deben tener el mismo nombre que la propiedad que quieres modificar
Ejemplo de Set:
class Persona {
nombre = '';
codigo = '';
codigo = '';
frase = '';
comida = '';
constructor(nombre = 'sin nombre', codigo = 'sin codigo', frase = 'sin frase') {
this.nombre = nombre;
this.codigo = codigo;
this.frase = frase;
}
//los sets se acostumbra recibir un valor y no deben tener el mismo nombre que la propiedad que quieres modificar
set setComidaFavorita(comida) {
this.comida = comida;
}
quienSoy() {
return `soy ${this.nombre} y mi identidad es ${this.codigo}`;
}
otraFuncion() {
return this.quienSoy();
}
}
const spiderman = new Persona('ric', 'asd', 'hurra!');
spiderman.setComidaFavorita= 'Los chilaquiles';
console.log(spiderman);
Ejemplo de Get:
class Persona {
nombre = '';
codigo = '';
codigo = '';
frase = '';
comida = '';
constructor(nombre = 'sin nombre', codigo = 'sin codigo', frase = 'sin frase') {
this.nombre = nombre;
this.codigo = codigo;
this.frase = frase;
}
//los sets se acostumbra recibir un valor y no deben tener el mismo nombre que la propiedad que quieres modificar
set setComidaFavorita(comida) {
this.comida = comida.toUpperCase();
}
//El get es para recuperar un valor
get getComidaFavorita() {
return `La comida favorita de ${this.nombre} es ${this.comida}`;
}
quienSoy() {
return `soy ${this.nombre} y mi identidad es ${this.codigo}`;
}
otraFuncion() {
return this.quienSoy();
}
}
const spiderman = new Persona('ric', 'asd', 'hurra!');
spiderman.setComidaFavorita = 'una jericalla';
console.log(spiderman.getComidaFavorita);
let nombre = prompt('¿Cómo te llamas?');
document.getElementById('app').innerHTML = `Mi nombre es ${nombre}`;
Menor a mayor
let meses = new Array(1, 2, 44, 56, 78, 98, 90, 9);
meses.sort(function(x, y) {
return x - y;
});
console.log(meses);
Mayor a menor
let meses = new Array(1, 2, 44, 56, 78, 98, 90, 9);
meses.sort(function(x, y) {
return y - x;
});
console.log(meses);
Mayor a menor
setTimeout(function() {
spinnerGif.style.display = 'none';
//AppendChild necesita el id de un elemento padre
document.querySelector('#loaders').appendChild(enviado);
}, 2000);
const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];
const numero_caracteres = nombres.map((nombre) => {
console.log(`${nombre} tiene ${nombre.length} letras`);
})
let texto = "Hola mundo";
console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));
let texto = "Hola mundo";
console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));
let texto = "Hola mundo";
console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));
let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];
console.log(`¿ ${amigos} incluye la palabra "Lau"?`, amigos.includes('Lau'));
let texto = "Hola mundo";
console.log(`¿'${texto}' empieza con la letra 'p'?`, texto.startsWith('p'));
let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];
console.log(amigos.find((amigo) => {
return amigo.length > 6;
}));
let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];
console.log(amigos.find(amigo => amigo.length > 6));
let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];
console.log(amigos.findIndex((amigo) => {
return amigo === 'Jessica';
}));
let amigos = "Francisco Javier Topiltzin";
console.log(amigos.substring(2,6))
let amigos = "Francisco Javier Topiltzin";
console.log(amigos.substring(2,6))
let amigos = "Francisco, Javier, Topiltzin";
console.log(amigos.split(','))
let amigos = "Francisco Javier Topiltzin";
console.log(amigos.replace('Francisco', 'Pancho'))
let amigos = "Francisco Javier Topiltzin";
console.log(amigos.repeat(10))
let amigos = ['Nacho', 'Urrutia', 'Jessica', 'Lau'];
console.log(amigos.findIndex(amigo => amigo === 'Jessica'));
let resultado = Math.PI;
console.log(resultado);
let resultado1 = Math.round(2.49);
console.log(resultado1);
let resultado1 = Math.ceil(2.49);
console.log(resultado1);
let resultado1 = Math.floor(2.49);
console.log(resultado1);
let resultado1 = Math.sqrt(144);
console.log(resultado1);
let resultado1 = Math.abs(-3);
console.log(resultado1);
let resultado1 = Math.pow(144);
console.log(resultado1);
let resultado1 = Math.min(2,4,5,6,78,9);
console.log(resultado1);
let resultado1 = Math.max(2,4,5,6,78,9);
console.log(resultado1);
let resultado1 = Math.random();
console.log(resultado1);
let caja = 4;
let caja1 = '4';
console.log(typeof Number(caja1));
let caja = 4;
let caja1 = '4';
console.log(typeof parseInt(caja1));
let caja = 2;
console.log(typeof String(caja));
let caja = 2435;
console.log(typeof caja.toString());
let meses = new Array('Enero', 'Febrero', 'Marzo');
let numeros = [1, 2, 3];
console.log(meses.concat(numeros));
let meses = new Array('Enero', 'Febrero', 'Marzo');
let numeros = [1, 2, 3];
let numeros1 = [4, 5, 6];
let numeros2 = [7, 8, 9];
console.log(meses.concat(numeros, numeros1, numeros2));
Mayor a menor
let c = 7.19;
console.log(c.toFixed(1));
let hoy = new Date(); console.log(hoy);
let hoy = new Date(); let dia = hoy.getDay(); console.log(dia);
throw "No hay cartas en el deck";
console.log(Object.keys(ric));
console.log("Mi nombre es %s",nombre)
console.group("Titulo del grupo")
console.log("Un nombre");
console.log("Otro nombre");
console.groupEnd();
const numeros = [1,2,3,4,5];
console.log(numeros);
const vocales = ["a","e","i","o","u"];
console.log(vocales);
const gato = {nombre: "Alvin",color: "albinegro",raza:"mestizo"};
console.log(gato);
console.time("Cuanto tiempo tarda");
const arreglo = Array(1000000);
for(let i = 0; arreglo.length; i++);{
arreglo[i] = i;
}
console.timeEnd("Cuanto tiempo tarda");
for(let i = 0; arreglo.length; i++);{
console.count("Codigo for");
console.log(i);
}
let x = 3;
let y = 2;
pruebaXY = "Se espera que X siempre sea mayor";
console.assets(x < y (x,y,pruebaXY));
Una función que se coloca como argumento a otra función(Explicacion FH) Es un función que se pasa como argumento a un operación asincrona, con la espectativa de que dicha función sea ejecutada una vez esta termine(Explicacion Uriel CF)
Definicion sencilla de un callback Es una función que nos permite recibir como parametro otra función, es una función que se pasa a otra función como argumento, son una forma de asegurarnos que un determinado codigo no se ejecute hasta que un determinado codigo allá terminado de ejecutarse, es muy útil cuando los tiempos de respuesta ó carga del servidor tienen una demora
es un objeto que puede producir un valor único en algún momento en el futuro: un valor resuelto o una razón por la que no se resuelve. Ejemplo:
Crea una promesa
const promesa = new Promise((resolve, reject) => {
$caja = false;
if ($caja) {
resolve();
} else {
reject();
}
});
promesa.then(() => {
alert("Exito!");
}).catch(() => {
alert("No funciono!");
});
const divBotones = document.querySelector('#divBotones');
const botonNuevo = document.createElement('button');
altura = window.outerHeight
altura = window.outerWidth
altura = window.outerHeight
altura = window.outerWidth
window.location.port
window.location.href='https://twitter.com'
window.navigator.appName
document.all
te dice cuantos elemtos tiene tu document(etiquetas html y con que ids y clases)document.all[119]
seleccionas la etiqueta de tu documento en específicodocument.URL
: te da la urldocument.forms
te da los formulariosdocument.forms[0]
seleccionas el primer formulariodocument.forms[0].id
selecciona el id del formulario y te lo muestradocument.forms[0].className
selecciona la clase del formulario y te la muestradocument.forms[0].classList
te muestra las clases que tenga el formulario o cualquier clasedocument.forms[0].classList[0]
te muestra la clase según el número que le pongas en el arraydocument.images
te muestra cuantas imagenes hay y cuales tienen id y clase document.images[2]
te muestra la imagen su src, como se llama la imagen y si tiene ancho o altura etcdocument.images[2].src
te da el src de la imagenconsole.log('caja.nodeName');
la consola te regresa la etiqueta que este guardada en la variable cajaconst navegacion = document.querySelector('#principal');
console.log('navegacion.children')
console.log('cursos[0].childElementCount');
te cuenta el número de elementos hijos const cursos = document.querySelectorAll('.card'); console.log('cursos[0].parentElement.parentElement.parentElement');
te da el padre o la etiqueta mayor al padre, puedes ir
tan afuera como quieras, a esto se le llama transversinTRANSVERSINGconst enlaces = document.querySelectorAll('.enlace'); console.log('enlaces[0].previousElementSibling');
te SELECCIONA el elemento previo
nuevoEncabezado.appendChild(document.createTextNode('Otro titulo'));
todo puede ser agregado al DOMconst enlaces = document.querySelectorAll('.enlace'); enlaces[0].remove();
remueveconst navegacion = document.querySelector('#principal'); navegacion.removeChild(enlaces[0]);
Otra manera de borrarelemento = primerLi.classList.add('nueva-clase');
Te dice todas las clases que contenga tu elemento seleccionadoelemento = primerLi.getAttribute('href');
CONSIGUE los atributos del htmlprimeLi.setAttribute('href','http://facebook.com');
REDECLARA el atributo del HTMLprimerLi.hasAttribute('data-id');
comprueba si tienes un atributoprimerLi.removeAttribute('data-id');
remueve el atributolet imagenes = document.images; let imagenesArr = Array.from(imagenes) console.log(imagenesArr);
Ejemplo de document.images con función Array que convierte un HtmlCollection en un array
let imagenes = document.images;
let imagenesArr = Array.from(imagenes);
console.log(imagenesArr);
Ejemplo donde usa forEach para mostrar cada imagen
imagenesArr.forEach(function(imagen){
console.log(imagen);
});
let encabezado;
encabezado = document.getElementById('encabezado');
encabezado.style.background='#333'
encabezado.style.color='#fff'
encabezado.style.padding='20px'
encabezado.textContent='Los mejores cursos'
encabezado.innerText='Los mejores cursos'
console.log(encabezado);
Ejemplo creando elementos con createElement
const enlace = document.createElement('a');
//agregamos una clase
enlace.className='enlace';
//añadir id
enlace.id = 'nuevo-id';
//agregamos el atributo href
enlace.setAttribute('href','#')
//Añadir el texto
enlace.textContent = 'Nuevo Enlace';
//Otra manera de agregar texto
enlace.appenChild(document.createTextNode('Nuevo enlace'))
//agregando todo esto en el id que le estás indicando de tu proyecto
document.querySelector('#secundaria').appendChild(enlace);
Ejemplo reemplazando elementos con replaceChild
const nuevoEncabezado = document.createElement('h2');
//agregamos una id
nuevoEncabezado.id ='encabezado';
//agregar nuevo texto
nuevoEncabezado.appendChild(document.createTextNode('Los mejores cursos'));
//elemento que sera reemplazado
const anterior = document.querySelector('#encabezado');
//Elemento padre
const elPadre = document.querySelector('#lista-Cursos');
//Reemplazando
elPadre.replaceChild(nuevoEncabezado,anterior)
Agregando y quitando clases
const primerLi = document.querySelector('.enlace');
let elemento;
//Obtener una clase de CSS: Ejemplo 1
elemento = primerLi.className;
elemento = primerLi.classList.add('nueva-clase');
elemento = primerLi.classList.remove('vieja-clase');
elemento = primerLi.classList;
//Modificar atributos: Ejemplo 2
elemento = primerLi.getAttribute('href');
primeLi.setAttribute('href','http://facebook.com');
Evento click
document.querySelector('#buscador').addEventListener('click',function(e){)
//para que no te lleve a la página # al dar el click
e.preventDefault();
alert('Buscando cursos');
});
Si no ponemos el e.preventDefault(); nos lleva a la url con #, esto es por que en nuestro form tenemos un action"#" , a esto se le conoce como la acción por defalt, no solo se le puede poner function(e), también se le puede poner function(event) ó function(evt), son convenciones que a la gente le gusta usar, el e.preventDefault(); suele usarse para comprobar que todos los campos tengan ciertos datos, realizar algún calculo ó comprobar disponibilidad
Evento click (Otra forma de ejecutarlo)
//OJO, la funcion que llamas, no debe llevar parentesis(me refiero a la funcion ejecturar)
document.getElementById('submit-buscador').addEventListener('click', ejecutar);
//La e y el e.preventDefault van aquí en la función
function ejecutar(e) {
e.preventDefault();
alert("Ejecutando desde una funcion");
}
Con esto puedes ver la información que almacena el event, como las coordenadas de los pixeles donde diste click, el tamaño del navegador ó el elemento al que le diste click
document.querySelector('#submit-buscador').addEventListener('click',ejecutar)
function ejecutar(e) {
e.preventDefault();
let elemento;
elemento = e;
elemento = e.target;
console.log(elemento);
}
También puedes imprimir en consola cualquier cosa a lo que le des click
document.querySelector('#encabezado').addEventListener('click',function(e)){
console.log(e.target.innerText);
)};
O modificar un texto en el DOM
document.querySelector('#encabezado').addEventListener('click',function(e)){
e.target.innerText = "Nuevo Encabezado";
)};
mouseenter solo pasar por encima el cursor del mouse
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('mouseenter',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
mouseleave salir del boton con el cursor del mouse
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('mouseleave',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
mouseover ejecuta el codigo cada vez que pases por encima del boton
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('mouseover',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
mouseup Se ejecuta cuando das click pero hasta que sueltes el click
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('mouseup',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
keydown Es un evento que se ejecuta cada que estás escribiendo
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('keydown',obtenerEvento)
function obtenerEvento(e){
console.log(busqueda.value)
console.log(`EVENTO: ${e.type}`);
}
Puede ser bueno si realizas un buscador en una empresa, si comienzas a escribir un apellido, que te vaya filtrando los nombres con ese apellido
keypress Es lo mismo que keydown
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('keypress',obtenerEvento)
function obtenerEvento(e){
document.querySelector('#encabezado').innerText = encabezado.value;
console.log(`EVENTO: ${e.type}`);
}
En este ejemplo imprime lo que escribes como si fuera ANgular o React
focus se ejecuta cada que das click en el formulario
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('focus',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
blur se ejecuta cada que das click fuera del formulario
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('blur',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
Normalmente se utiliza para cuando validas un formulario, cuando el usuario de click fuera del formulario, comprobar cuantos caracteres escribió el usuario, y decir si el campo es obligatorio
copy se ejecuta cada que el usuario copia texto
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('copy',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
paste se ejecuta cada que el usuario pega texto
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('paste',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
input se ejecuta cada que el usuario haga alguno de las cosas que he puesto en los ejemplos pasados
const boton = document.querySelector('#vaciar-carrito');
boton.addEventListener('input',obtenerEvento)
function obtenerEvento(e){
console.log(`EVENTO: ${e.type}`);
}
event bubbling cuanddo se propaga un evento click porque hay varios hijos dentro de un padre
//Asi se detiene el evento bubbling con e.stopPropagation
const card = document.querySelector(.card);
const infoCursos = document.querySelector('.info-card')
const agregarCarrito = document.querySelector('.agregar-carrito');
card.addEventListener('click',function(e){
console.log('Click en Card');
e.stopPropagation
});
infoCurso.addEventListener('click',function(e){
console.log('Click en Info Curso');
});
agregarCarrito.addEventListener('click',function(e){
console.log('click en agregar a Carrito')
});
ELiminar elementos del DOM
//Asi se detiene el evento bubbling con e.stopPropagation
document.body.addEventListener('click',eliminarElemento);
function eliminarElemento(e){
e.preventDefault();
if(e.target.classList.contains('borrar-curso')){
console.log(e.target.parentElement.parentElement.remove());
}
}
En el local storage se puede guardar solo texto, si quieres guardar varias cosas, tendras que guardarlo en un arreglo
localStorage.setItem('nombre', 'Ricardo');
sessionStorage.setItem('pais', 'Canada');
localStorage.removeItem('nombre');
const nombre = localStorage.getItem('nombre');
localStorage.clear();
Acostumbrate a trabajar con document.querySelector('') porque con el puedes hacer todo y así no te tienes que acordar de lo demás como, .ElementsByClassName etc
const divBotones = document.querySelector('#divBotones');
const botonNuevo = document.createElement('button');
botonNuevo.innerText = "Texto y más texto";
divBotones.append(botonNuevo)
botonNuevo.classList.add('btn-success');
import { pi } from './constantes.js';
import { aritmetica } from './aritmetica.js';
console.log(pi);
console.log(aritmetica.sumar(3, 4));
export const pi = Math.PI;
export let usuario = "Ric";
let password = 123;
export default function saludar() {
console.log("Hola Modulos +ES6");
}
ARCHIVO constants.js
export default function saludar() {
console.log("Hola Modulos +ES6");
}
Archivo modulos.js
import saludar, { pi } from './constantes.js';
saludar();
El export default sirve también en las variables y funciones pero se tiene que declarar en un renglon distinto a donde declaramos la variable o constante. Ejemplo:
ARCHIVO constants.js
let password = 123;
export default password;
Archivo modulo.js
import password, { pi, saludar } from './constantes.js';
console.log(password);
Archivo constantes.js
export default class padre {
constructor() {
console.log("Hola hijo");
}
}
Archivo modulos.js
import padre, { pi, password, saludar } from './constantes.js';
let hijo = new padre;
hijo;
Archivo aritmetica.js
function sumar(a, b) {
return a + b;
}
function restar(a, b) {
return a - b;
}
export const aritmetica = {
sumar,
restar
}
Archivo modulos.js
import { aritmetica as calculos } from './aritmetica.js';
console.log(calculos.sumar(3, 4));
The last three and the first are the best
Ejercicio 1
Array que tenga strings
let animales = ['Perro', 'Gato', 'Pez'];
console.log(animales[2]);
Ejercicio 2
Array que tenga strings y números
let datos = [19, 'Gato', 22];
console.log(datos[0]);
Ejercicio 3
Array que tenga strings, números y boleanos
let datos = [19, 'Gato', true];
console.log(datos[2]);
Ejercicio 4
Array que tenga strings, números, boleanos y nulos
let datos = [19, 'Gato', true, null];
console.log(datos[3]);
Ejercicio 5
Array que tenga strings, números, boleanos, nulos y funciones
let datos = [19, 'Gato', true, null, function name() {}];
console.log(datos[4]);
Ejercicio 6
Array que tenga strings, números, boleanos, nulos, funciones y un array con datos anteriores
let datos = [19,
'Gato',
true,
null,
function name() {},
["Canada ", "Suiza ", "Germany "]
];
console.log(datos[3]);
Ejercicio 7
El metodo length te muestra cuantos cupos tiene un array
let mascotas = ["perro", "gato", "perico"];
console.log(mascotas.length);
Ejercicio 8
El metodo .push() Te agrega un nuevo dato a tu array al final
let mascotas = ["perro", "gato", "perico"];
mascotas.push("Pez");
console.log(mascotas.length);
console.log(mascotas);
Ejercicio 9
El metodo .unshift("dato") Te agrega un nuevo dato a tu array pero al inicio
let mascotas = ["perro", "gato", "perico"];
mascotas.unshift("Caracol");
console.log(mascotas.length);
console.log(mascotas);
Ejercicio 10
El metodo .pop(); Borrar el último dato de tu array
let mascotas = ["perro", "gato", "perico"];
let borrado = mascotas.pop();
console.log(mascotas.length);
console.log(mascotas);
console.log("La mascota que se borro fue: " + borrado);
Ejercicio 11
El metodo .splice(1, 4); Elimina el rango de elementos que tu le digas, dentro de un array
let mascotas = ["perro", "gato", "perico", "pez", "hamster", "mapache"];
let elementosBorrados = mascotas.splice(1, 4);
console.log(mascotas.length);
console.log(mascotas);
console.log(elementosBorrados);
Ejercicio 12
El metodo length Te dice el lugar en donde se encuentra el dato que buscas, OJO: debes ponerlo exacto, mayúsculas y minúsculas
let mascotas = ["perro", "gato", "perico", "pez", "hamster", "mapache"];
let indice = mascotas.indexOf("pez");
console.log(indice);
Ejercicio 13
Crear un objeto y mostrar su contenido
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
Ejercicio 14
Crear un objeto y mostrar su contenido Y BORRAR una propiedad del objeto
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
delete persona.vivo;
console.log(persona);
Ejercicio 15
Convertir todo un objeto en un array
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
delete persona.vivo;
const entriesPares = Object.entries(persona);
console.log(entriesPares);
Ejercicio 16
Agregar una nueva propiedad al objeto
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
persona.casado = false;
console.log(persona);
Ejercicio 17
Crea un objeto y bloquea una modificación usando el metodo Object.freeze, que sirve para congelar tu objeto y se quede como lo dejaste
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
Object.freeze(persona);
Object.freeze(persona.amigos);
persona.amigos[0] = "Andres";
persona.edad = 18;
console.log(persona);
Ejercicio 18
Usa el metodo Object.getOwnPropertyNames(); que te muestra las propiedades que le pusiste a tu objeto, pero en un Array
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
const propiedades = Object.getOwnPropertyNames(persona);
console.log(propiedades);
Ejercicio 19
Muestra en un array los valores que tengas dentro de las propiedades que están dentro de tu objeto, usando Object.value()
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
const valores = Object.values(persona);
console.log(valores);
Cuando no quieres que se detenga la ejecución de tu programa
Usalo cuando las funciones no sabes si vayan a tener datos, si llegan vacias, no llenes tu codigo de try catch
Normalmente se usa cuando descargas un listado de clientes, NO LO USES para agregar una clase o algo en el html
Esto solo se puede con las funciones antiguas de JS, con las flechas primero se declara la funcion
Ejercicio 1: Imprimir con template strings
let name = "Ricardo";
let age = 33;
let country = "Mexico";
console.log(`My name is ${name} I am ${age} and I am from ${country}`);
EJERCICIO 1.01: Imprime las 3 maneras de escribir un String
const producto1 = "Monitos 20 pulgadas";
const producto2 = String("Monitor 24 pulgadas");
const producto3 = new String('Monitor 27 pulgadas');
console.log(producto1);
console.log(producto2);
console.log(producto3);
console.log(typeof(producto3));
EJERCICIO 2: Declarar constantes e imprimirlas
const caja = 21;
console.log(caja);
EJERCICIO 3: declara un array e imprimelo
let cadena = ["Mexico", "USA", "Canada"];
console.log(cadena);
EJERCICIO 4: declara un objeto e imprimelo
let unPinshiObjeto = {
nombre: 'Pedro',
apellido: "Martinez",
edad: 24
}
console.log(unPinshiObjeto);
EJERCICIO 5: agrega datos a un array usando la funcion PUSH
let cadena = ["Mexico", "USA", "Canada"];
cadena.push("Greenland");
console.log(cadena);
Agrega datos a un array constante
const cadena = ["Mexico", "USA", "Canada"];
cadena.push("Greenland");
console.log(cadena);
EJERCICIO 7: Agrega datos a una constante objeto
const unPinshiObjeto = {
nombre: 'Pedro',
apellido: "Martinez",
edad: 24
}
unPinshiObjeto.correo = "correo@correo.com";
console.log(unPinshiObjeto);
Agregar datos a un objeto desde una variable
let nombre = "ric";
let edad = 33;
const persona = {
nombre: nombre,
edad: edad,
frase: function() {
console.log("Eres un crack!");
}
}
console.log(persona.edad);
Ejercicio 9: Resumir la escritura del ejercicio anterior
let nombre = "ric";
let edad = 33;
const persona = {
nombre,
edad,
frase() {
console.log("Eres un crack!");
}
}
console.log(persona.nombre);
Ejercicio 1, hacer los días de la semana con if-else-else if
let dia = 6;
if (dia === 0) {
console.log(`Es Lunes`);
} else if (dia === 1) {
console.log(`Es Martes`);
} else if (dia === 2) {
console.log(`Es Miércoles`);
} else if (dia === 3) {
console.log(`Es Jueves`);
} else if (dia === 4) {
console.log(`Es Viernes`);
} else if (dia === 5) {
console.log(`Es Sábado`);
} else if (dia === 6) {
console.log(`Es Domingo`);
}
conseguir la fecha
let day = new Date();
console.log(day);
Ejercicio 3, conseguir el día de la fecha
const hoy = new Date();
let dia = hoy.getDay();
console.log(dia);
Ejercicio 4, programa que imprima si es fin de semana ó entre semana Y si está abierto o cerrado
dia = 0;
apertura = 9;
if (dia === 6 || dia === 0) {
console.log(`It's weekend!`);
} else {
console.log(`It's weekday!`);
}
if (apertura >= 8 || apertura <= 21) {
console.log(`It's open`);
} else {
console.log(`It's close!`);
}
Ejercicio 5, hacer el ejercicio 4 con el metodo "includes"
dia = 1;
apertura = 7;
if ([0, 6].includes(dia)) { //metodo que tienen los arreglos para preguntar si algo existe dentro de ese arreglo
console.log(`It's weekend!`);
} else {
console.log(`It's weekday!`);
}
if (apertura >= 8 && apertura <= 21) {
console.log(`It's open`);
} else {
console.log(`It's close!`);
}
Ejercicio 6, resumir el ejercicio 4 y 5 con if corto(se llama en si, operador condicional ternario)
const dia = 5;
const horaActual = 7;
let mensaje;
// '?' es 'if' ,':' es el 'else'
horaApertura = ([0, 6].includes(dia)) ? 9 : 11;
mensaje = (horaActual >= horaApertura) ? "Esta abierto" : `Esta cerrado, hoy abrimos a las ${horaApertura}`;
console.log(horaApertura, mensaje);
Ejercicio 7, imprime el número mayor con el operador ternario(if-else corto)
const numeroMayor = (a, b) => {
return (a > b) ? a : b;
}
console.log(numeroMayor(7, 5));
Ejercicio 8, reducir el código del ejercicio 7
const numeroMayor = (a, b) => (a > b) ? a : b;
console.log(numeroMayor(7, 9));
Ejercicio 9, un programa que te diga si la persona es miembro o no con un valor booleano
const tieneMembresia = (miembro) => (miembro) ? '2usd' : "cobrele 10usd por puto";
console.log(tieneMembresia(true));
Ejercicio 10, crear un array que dentro tenga un if corto.
let compa = false;
const amigos = [
'Urrutia',
'fulano',
'sutano',
'mengano',
compa ? 'perengano' : "el capi"
];
console.log(amigos);
Ejercicio 11, imprimir la calificación usando el operador ternario(if-else corto)
let calificacion = 65;
const grado = calificacion >= 95 ? "A+" :
calificacion >= 90 ? "A" :
calificacion >= 85 ? "B+" :
calificacion >= 80 ? "B" :
calificacion >= 75 ? "C+" :
calificacion >= 70 ? "C" :
calificacion >= 65 ? "D+" :
calificacion >= 60 ? "D" : "F";
console.log(calificacion, grado);
Ejercicio 12 Manera distinta de hacer un IF-else
let saludo = (nombre) => {
if (nombre === undefined) { nombre = "visitante" }
return `Hola ${nombre}`;
}
console.log(saludo());
EJERCICIO 13 Un programa con if que te salude dependiendo la hora
let hora = "q";
if (hora < 12 && hora >= 5) {
console.log("BUenos días!");
} else if (hora >= 12 && hora < 19) {
console.log("BUenas tardes!");
} else if (hora >= 19 && hora <= 24 || hora < 5 && hora > 0) {
console.log("BUenas noches!");
} else {
console.log("Hora no valida");
}
EJERCICIO 14Cuando las 2 opciones son ciertas, se ejecuta la primera solamente
let puntaje = 100;
if (puntaje > 50) {
console.log("el puntaje es mayor a 50");
} else if (puntaje > 75) {
console.log("el puntaje es mayor a 75");
}
EJERCICIO 15 Checa si puedes pagar en efecto ó efectivo + crédito o no puedes pagarlo utilizando if
let efectivo = 300;
let credito = 300;
let pago = 200;
let total = efectivo + credito;
let cambio0 = efectivo - pago;
let cambio = (efectivo + credito) - pago;
if (efectivo >= pago) {
console.log(`Puedo pagar y me sobra de cambio en efectivo ${cambio0}`);
} else if (efectivo < pago && total >= pago) {
console.log(`No me alcanza, usaré crédito y me sobran ${cambio} de crédito`);
} else if (pago > total) {
console.log("No puedo comprarlo =/");
} else {
console.log("Dato no valido");
}
EJERCICIO 16 Ejercicio con if-corto
let logueado = true;
console.log(logueado === true ? "SI se logueo" : "NO se logueo");
EJERCICIO 17: Cualquier edad puede entrar menos 18
let edad = 17;
if (edad != 18) {
console.log("Puede entrar");
} else {
console.log("NO Puede entrar!");
}
EJERCICIO 18: Comparar las cantidades y decidir si puedes pagar o no
let efectivo = 500;
let carritoCompras = 300;
if (efectivo > carritoCompras) {
console.log("Puedes pagar");
} else {
console.log("Te falt dinero para la compra");
}
EJERCICIO 19: Resumir el código del ejercicio 22 NO SE RECOMIENDA ESTA SINTAXIS
let efectivo = 500;
let carritoCompras = 300;
if (efectivo > carritoCompras)
console.log("Puedes pagar");
else
console.log("Te falt dinero para la compra");
EJERCICIO 20: Ejericio scope global y bloque(dentro de un if)
var a = 'a';
let b = 'b';
const c = 'c';
if (true) {
var a = 'AA';
let b = 'BB';
const c = 'CC';
console.log('BLOQUE: ', a, b, c);
}
console.log('GLOBALES: ', a, b, c);
Ejercicio 1
Imprimir mi nombre con una función flecha
let nombre = () => {
console.log("Ricardo");
}
nombre();
Ejercicio 2
Imprimir mi nombre en una función flecha, asignandole el nombre en los parentesis
let nombre = (nombre1) => {
console.log(nombre1);
}
nombre("Ricardo");
Ejercicio 3
Imprimir mi nombre en una función flecha, asignandole el nombre en los parentesis
let operacion = (num1, num2) => {
console.log(num1 + num2);
}
Ejercicio 4
Hace una suma de 2 números asignandoselos en el parentesis, con una función flecha PERO usando return
let operacion = (num1, num2) => {
return num1 + num2;
}
console.log(operacion(2, 3));
Ejercicio 5
Hace una suma de 2 números asignandoselos en el parentesis, con una función flecha PERO resumiendo la sintaxis
let operacion = (num1, num2) => num1 + num2;
console.log(operacion(2, 3));
Ejercicio 6
Toda función devuelve "UNDIFINED", porque todas las funciones tienen un "return aunque no este escrito" cuando se tiene una función y no tiene un return "específico", devolverá "undifined"
let nombre = (nombre) => {
console.log(nombre);
return 1000;
}
const almacen = nombre("Ricardo");
console.log(almacen);
Ejercicio 7
Regresar 2 valores en un return, primero la manera mala y luego la buena
MALA
let nombre = (nombre) => {
console.log(nombre);
return 1, 2;
}
const almacen = nombre("Ricardo");
console.log(almacen);
BUENA(volverlo un array)
let nombre = (nombre) => {
console.log(nombre);
return [1, 2];
}
const almacen = nombre("Ricardo");
console.log(almacen[0], almacen[1]);
Ejercicio 8
Crea una función con un número aleatorio del 0 al 1, con funciones flechas y resumidas
let numero = () => Math.random();
console.log(numero());
Ejercicio 9
Crear una funcion flecha con "return" que retorne un objeto y luego resume ese objeto
const persona = (nombre, apellido) => {
return {
nombre: nombre,
apellido: apellido
}
}
const caja = persona('Ricardo', 'Garrido');
console.log(caja);
RESUMIDA
const persona = (nombre, apellido) =>
({ nombre, apellido })
const caja = persona('Ricardo', 'Garrido');
console.log(caja);
Ejercicio 10 PROTIP
Crear una función con parametros REST, el argumento rest no puede llevar nada despues de el, solo antes
let persona = (nombre, ...args) => {
return [nombre, args];
}
console.log(persona("Ricardo", true, 32, ["Perro", "Canada"]));
Ejercicio 11 PROTIP
Deestructuración: sirve para darle nombres a los valores que tiene un arreglo, en vez de crear una variable por cada posicion del arreglo. Ejemplo
let persona = (...args) => {
return args;
}
const [nombre, soltero, edad, aficiones] = persona("Ricardo", true, 32, ["Perro", "Canada"]);
console.log(aficiones);
Ejercicio 12 PROTIP
Deestructuración con un objeto RESUMIDO
const persona = (nombre, apellido) =>
({ nombre, apellido })
const { nombre: nombreNuevo } = persona('Ricardo', 'Garrido');
console.log({ nombreNuevo });
Ejercicio 13 PROTIP
Destructuración con un objeto resumido, cambiandole el nombre a la propiedad del objeto
const persona = (nombre, apellido) =>
({ nombre, apellido })
const { nombre: nombreNuevo } = persona('Ricardo', 'Garrido');
console.log({ nombreNuevo });
Ejercicio 14 PROTIP
Reestructuracion de argumentos en un objeto cuando hace falta un valor.
MANERA 1
const persona = {
nombre: 'Ricardo',
apellido: 'Garrido',
//edad: 32,
hobbies: ['ver series', 'no hace nada']
}
const imprimirPropiedades = ({ nombre, apellido, edad, hobbies }) => {
edad = edad || 0;
console.log({ nombre });
console.log({ apellido });
console.log({ edad });
console.log({ hobbies });
}
imprimirPropiedades(persona);
Manera 2 (esto se le llama "asignarle un valor por defecto", es la más viable)
const persona = {
nombre: 'Ricardo',
apellido: 'Garrido',
//edad: 32,
hobbies: ['ver series', 'no hace nada']
}
const imprimirPropiedades = ({ nombre, apellido, edad = 32, hobbies }) => {
console.log({ nombre });
console.log({ apellido });
console.log({ edad });
console.log({ hobbies });
}
imprimirPropiedades(persona);
Ejercicio 15: Cuantos caracteres tiene un array
const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];
const numero_caracteres = nombres.map((nombre) => {
console.log(`${nombre} tiene ${nombre.length} letras`);
})
Ejercicio 16:resumir el ejercicio 15
const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];
const numero_caracteres = nombres.map(nombre => `${nombre} tiene ${nombre.length} letras`)
Ejercicio 17
Crea una función con una variable por default si alguna vez alguien no rellena el dato
let saludar = (nombre = "visitante") => {
return `Hola ${nombre}`;
}
console.log(saludar("Sutano"));
Ejercicio 18:Crea una funcion dentro del valor de un objeto y usala
let saludar = {
accion: function saludar(a) {
return `Hola ${a}`;
},
otraAccion: function hablar(b) {
return `${b}`;
}
}
console.log(saludar.otraAccion("Blablabla"));
Ejercicio 19:Hacer una función que cree un objeto
let crearObjeto = (nombre, edad) => {
return {
name: nombre,
age: edad
};
}
console.log(crearObjeto("Ric", 33));
Ejercicio 20:Resumir el codigo del ejercicio 26
let crearObjeto = (nombre, edad) => {
return {
nombre,
edad
};
}
console.log(crearObjeto("Ric", 33));
Ejercicio 21:Agregar una funcion dentro del objeto del ejercicio 26 y ejecutarla
let crearObjeto = (nombre, edad) => {
return {
nombre,
edad,
imprimir: () => {
return `My name is ${nombre} y tengo ${edad}`;
}
};
}
console.log(crearObjeto("Ric", 33).imprimir());
Ejercicio 22
let crearObjeto = (nombre, edad) => {
return {
nombre,
edad,
imprimir() {
return `My name is ${nombre} y tengo ${edad}`;
}
};
}
console.log(crearObjeto("Ric", 33).imprimir());
Ejercicio 23: try catch cuando no quieres que se detenga la ejecución de tu programa
Usalo cuando las funciones no sabes si vayan a tener datos, si llegan vacias, no llenes tu codigo de try catch
Normalmente se usa cuando descargas un listado de clientes, NO LO USES para agregar una clase o algo en el html
Esto solo se puede con las funciones antiguas de JS, con las flechas primero se declara la funcion.
try {
algo();
} catch (error) {
console.log(error);
}
clientes();
function clientes() {
console.log("Descargando...");
setTimeout(() => {
console.log("Completado!");
}, 3000);
}
Ejercicio 24: TRY-CATCH-FINALLY Finally ejecuta pase lo que pase
try {
clientes();
} catch (error) {
console.log(error);
} finally {
console.log("Ejecuta esto pase lo que pase");
}
function clientes() {
console.log("Descargando...");
setTimeout(() => {
console.log("Completado!");
}, 3000);
}
Ejercicio 25:Escribe un objeto como se hacía de antaño.
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
//Metodos
this.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
console.log(snoopy);
Ejercicio 26: Agrega un metodo a un objeto de antaño usando prototype.
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
Ejercicio 27:Heredar prototipos
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro
incluso los prototipos, como el .sonar que tiene
Ejercicio 28: Sobreescribir, un prototipo heredado, (recuerda que esto es javascript viejito)
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro
incluso los prototipos, como el .sonar que tiene
perro.prototype.sonar = function() {
console.log("Wof!! wof!!");
}
perro.prototype.sonar();
Ejercicio 29: Escribirle un metodo prototipado a la función heredada del javascript viejito
function animal(nombre, genero) {
Propiedades
this.nombre = nombre;
this.genero = genero;
}
Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro
incluso los prototipos, como el .sonar que tiene
perro.prototype.ladrar = function() {
console.log("Wof!! wof!!");
}
perro.prototype.ladrar();
EJERCICIO 30: Crear una funcion anónima autoinvocada
(function() {
console.log("Soy una función autoinvocada");
})()
Ejercicio 31: Crear una funcion anónima autoinvocada que reciba parametros
(function(w, d, c) {
console.log("Soy una función autoinvocada");
console.log(w);
console.log(d);
console.log(c);
c.log("Estoy usando console.log recibiendo el console como un parametro");
})(window, document, console)
Ejercicio 32: Crear las 4 funciones anónimas autoinvocadas
//clasica
(function() {
console.log("Soy una función anónima autoejecutable CLASICA");
})();
//Crockford
((function() {
console.log("Soy una función anónima autoejecutable CROCKFORD");
})());
//UNARIA
+function() {
console.log("Soy una función anónima autoejecutable UNARIA");
}();
!function() {
console.log("Soy una función anónima autoejecutable ESTILO FACEBOOK");
}
Ejercicio 1 : Array que tenga strings
let animales = ['Perro', 'Gato', 'Pez'];
console.log(animales[2]);
Ejercicio 1.01: Array creado de una forma nueva
let cadena = Array.of("hola", 2, true, [1, 2, "mundo"]);
console.log(cadena);
Ejercicio 1.02: Una forma de llenar un array de datos
let cadena = Array(10).fill(false);
console.log(cadena);
Ejercicio 1.03: Otra forma de crear un arreglo.
const e = new Array();
console.log(e);
Ejercicio 1.04: Imprimir un arreglo usando el metodo .forEach();
let colores = ["Azul", "Rojo", "Verde"];
colores.forEach(function(element, index) {
console.log(`
});
Ejercicio 2: Array que tenga strings y números
let datos = [19, 'Gato', 22];
console.log(datos[0]);
Ejercicio 3: Array que tenga strings, números y boleanos
let datos = [19, 'Gato', true];
console.log(datos[2]);
Ejercicio 4: Array que tenga strings, números, boleanos y nulos
let datos = [19, 'Gato', true, null];
console.log(datos[3]);
Ejercicio 5: Array que tenga strings, números, boleanos, nulos y funciones
let datos = [19, 'Gato', true, null, function name() {}];
console.log(datos[4]);
Ejercicio 6: Array que tenga strings, números, boleanos, nulos, funciones y un array con datos anteriores
let datos = [19,
'Gato',
true,
null,
function name() {},
["Canada", "Suiza", "Germany"]
];
console.log(datos[5][1]);
Ejercicio 7: Usa el metodo "length" que te dice cuantos cupos hay en el array
let mascotas = ["perro", "gato", "perico"];
console.log(mascotas.length);
Ejercicio 8 Usa el metodo .push() que te agrega un nuevo dato a tu array al final(agrega un objeto de preferencia)
let mascotas = ["perro", "gato", "perico"];
mascotas.push("Pez");
console.log(mascotas.length);
console.log(mascotas);
Ejercicio 9 Usa el metodo unshift(); que te agrega un nuevo dato a tu array pero al inicio
let mascotas = ["perro", "gato", "perico"];
mascotas.unshift("Caracol");
console.log(mascotas.length);
console.log(mascotas);
Ejercicio 10 Borrar el último dato de tu array y muestra lo que hayas borrado
let mascotas = ["perro", "gato", "perico"];
let borrado = mascotas.pop();
console.log(mascotas.length);
console.log(mascotas);
console.log("La mascota que se borro fue: " + borrado);
Ejercicios 11 Elimina el rango de elementos que tu le digas, dentro de un array
let mascotas = ["perro", "gato", "perico", "pez", "hamster", "mapache"];
let elementosBorrados = mascotas.splice(1, 4);
console.log(mascotas.length);
console.log(mascotas);
console.log(elementosBorrados);
Ejercicio 12 Te dice el lugar en donde se encuentra el dato que buscas, OJO: debes ponerlo exacto, mayúsculas y minúsculas
let mascotas = ["perro", "gato", "perico", "pez", "hamster", "mapache"];
let indice = mascotas.indexOf("pez");
console.log(indice);
Ejercicio 13 Crear un objeto con diferentes tipos de datos y mostrar su contenido
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
console.log(persona.otrosAmigos.unila[1]);
Ejercicio 13.01: Crear un objeto e inicializar un metodo interior que tenga
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
}
}
ric.accion();
Ejercicio 13.02: crear un objeto e imprime una datos que estén dentro usando THIS
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
ric.otraAccion();
EJERCICIO 13.03: Obtener los nombres de las propiedades del objeto
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
console.log(Object.keys(ric));
EJERCICIO 13.04: Obtener los valores de las propiedades del objeto
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
console.log(Object.values(ric));
EJERCICIO 13.05: Usar el metodo .hasOwnProperty para preguntar si existe una propiedad del metodo, imprimira true or false para decirte si existe o no
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
console.log(ric.hasOwnProperty("nombre"));
Ejercicio 14 Crear un objeto y mostrar su contenido Y BORRAR una propiedad del objeto ,Crear un objeto y mostrar su contenido
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
delete persona.vivo;
console.log(persona);
Ejercicio 15 Convertir todo un objeto en un array
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
delete persona.vivo;
const entriesPares = Object.entries(persona);
console.log(entriesPares);
Ejercicio 16 Agregar una nueva propiedad al objeto
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
persona.casado = false;
console.log(persona);
Ejercicio 17 Crea un objeto y bloquea una modificación usando el metodo Object.freeze, que sirve para congelar tu objeto y se quede como lo dejaste
const persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
Object.freeze(persona);
Object.freeze(persona.amigos);
persona.amigos[0] = "Andres";
persona.edad = 18;
console.log(persona);
Ejercicio 18 Usa el metodo Object.getOwnPropertyNames(); que te muestra las propiedades que le pusiste a tu objeto, pero en un Array
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
const propiedades = Object.getOwnPropertyNames(persona);
console.log(propiedades);
Ejercicio 19 Muestra en un array los valores que tengas dentro de las propiedades que están dentro de tu objeto, usando Object.value()
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
const valores = Object.values(persona);
console.log(valores);
Ejercicio 20 Imprimir los objetos dentro de un array usando For
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
for (let i = 0; i < autos.length; i++) {
console.log(autos[i]);
}
EJERCICIO 21 Imprimir los objetos dentro del array con for pero imprimiendo nombre y modelo
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
for (let i = 0; i < autos.length; i++) {
console.log(autos[i].modelo + ' del año ' + autos[i].anio);
}
EJERCICIO 22 Hacer el ejercicio 30 pero imprimiendo con interpolacion
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
for (let i = 0; i < autos.length; i++) {
console.log(`${autos[i].modelo} del año ${autos[i].anio}`);
}
Ejercicio 23 Agregaga un objeto a un array const e imprimelo
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
autos.push({ modelo: "Mercedez Benz", anio: 2016 });
for (let i = 0; i < autos.length; i++) {
console.log(autos[i].modelo + 'del año' + autos[i].anio);
}
EJERCICIO 24 Modifica objeto dentro de un array const desde afuera(es la unica manera en la que se puede).
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
autos[1].modelo = "Mercedez Benz";
console.log(autos[1].modelo);
Ejercicio 1
ANTES
function primero() {
console.log("PRIMERO");
}
function segundo() {
console.log("SEGUNDO");
}
primero();
segundo();
EL ERROR(Por el retrazo de tiempo, se ejecuta después aunque vaya antes)
function primero() {
setTimeout(function() {
console.log("PRIMERO");
}, 3000)
}
function segundo() {
console.log("SEGUNDO");
}
primero(segundo);
DESPUES(La solución)
function primero(segundo) {
setTimeout(function() {
console.log("PRIMERO");
segundo();
}, 3000)
}
function segundo() {
console.log("SEGUNDO");
}
primero(segundo);
what is the difference between var, let and const?
conts const is use to create constans, constans no change. Although(altau) you could modify the value of a constant, if it contains an object.
var add one variable to window’s global object.
letdeclares a locally scoped variable with block scope. You can change the value of the variable by declaring the variable name without using let
console.log(app)
//aquí no existe app
let app = () => {
console.log('Hola')
}
app()
//aqui si existe app
hola()
//aqui si existe app
function hola(){
console.log('hola')
}
hola()
//aqui si existe app
const persona = {
nombre: 'Agustin',
decirNombre(){
console.log(this.name)
}
}
console.log(persona.decirNombre()) // OUTPUT : 'Agustin'
const persona = {
nombre: 'Agustin',
decirNombre(){
console.log(this.name)
}
decirNombreFuncionFlecha: () => {
console.log(this.nombre)
}
}
persona.decirNombreFuncionFlecha();
// OUTPUT : undefined
Lo que ocurre es que las arrow functions, a diferencia de las funciones regulares, no se les asigna un this propio sino que heredan el this del contexto superior, que estando dentro del contexto del objeto persona, this hace referencia al objeto window. Por lo tanto, la propiedad 'nombre' no esta definida en el objeto window, y recibimos el mensaje undefined
Ejercicio 1
Imprimir mi nombre con una función flecha
let nombre = () => {
console.log("Ricardo");
}
nombre();
Ejercicio 2
Imprimir mi nombre en una función flecha, asignandole el nombre en los parentesis
let nombre = (nombre1) => {
console.log(nombre1);
}
nombre("Ricardo");
Ejercicio 3
Imprimir mi nombre en una función flecha, asignandole el nombre en los parentesis
let operacion = (num1, num2) => {
console.log(num1 + num2);
}
Ejercicio 4
Hace una suma de 2 números asignandoselos en el parentesis, con una función flecha PERO usando return
let operacion = (num1, num2) => {
return num1 + num2;
}
console.log(operacion(2, 3));
Ejercicio 5
Hace una suma de 2 números asignandoselos en el parentesis, con una función flecha PERO resumiendo la sintaxis
let operacion = (num1, num2) => num1 + num2;
console.log(operacion(2, 3));
Ejercicio 6
Toda función devuelve "UNDIFINED", porque todas las funciones tienen un "return aunque no este escrito" cuando se tiene una función y no tiene un return "específico", devolverá "undifined"
let nombre = (nombre) => {
console.log(nombre);
return 1000;
}
const almacen = nombre("Ricardo");
console.log(almacen);
Ejercicio 7
Regresar 2 valores en un return, primero la manera mala y luego la buena
MALA
let nombre = (nombre) => {
console.log(nombre);
return 1, 2;
}
const almacen = nombre("Ricardo");
console.log(almacen);
BUENA(volverlo un array)
let nombre = (nombre) => {
console.log(nombre);
return [1, 2];
}
const almacen = nombre("Ricardo");
console.log(almacen[0], almacen[1]);
Ejercicio 8
Crea una función con un número aleatorio del 0 al 1, con funciones flechas y resumidas
let numero = () => Math.random();
console.log(numero());
Ejercicio 9
Crear una funcion flecha con "return" que retorne un objeto y luego resume ese objeto
const persona = (nombre, apellido) => {
return {
nombre: nombre,
apellido: apellido
}
}
const caja = persona('Ricardo', 'Garrido');
console.log(caja);
RESUMIDA
const persona = (nombre, apellido) =>
({ nombre, apellido })
const caja = persona('Ricardo', 'Garrido');
console.log(caja);
Ejercicio 10 PROTIP
Crear una función con parametros REST, el argumento rest no puede llevar nada despues de el, solo antes
let persona = (nombre, ...args) => {
return [nombre, args];
}
console.log(persona("Ricardo", true, 32, ["Perro", "Canada"]));
Ejercicio 11 PROTIP
Deestructuración: sirve para darle nombres a los valores que tiene un arreglo, en vez de crear una variable por cada posicion del arreglo. Ejemplo
let persona = (...args) => {
return args;
}
const [nombre, soltero, edad, aficiones] = persona("Ricardo", true, 32, ["Perro", "Canada"]);
console.log(aficiones);
Ejercicio 12 PROTIP
Deestructuración con un objeto RESUMIDO
const persona = (nombre, apellido) =>
({ nombre, apellido })
const { nombre: nombreNuevo } = persona('Ricardo', 'Garrido');
console.log({ nombreNuevo });
Ejercicio 13 PROTIP
Destructuración con un objeto resumido, cambiandole el nombre a la propiedad del objeto
const persona = (nombre, apellido) =>
({ nombre, apellido })
const { nombre: nombreNuevo } = persona('Ricardo', 'Garrido');
console.log({ nombreNuevo });
Ejercicio 14 PROTIP
Reestructuracion de argumentos en un objeto cuando hace falta un valor.
MANERA 1
const persona = {
nombre: 'Ricardo',
apellido: 'Garrido',
//edad: 32,
hobbies: ['ver series', 'no hace nada']
}
const imprimirPropiedades = ({ nombre, apellido, edad, hobbies }) => {
edad = edad || 0;
console.log({ nombre });
console.log({ apellido });
console.log({ edad });
console.log({ hobbies });
}
imprimirPropiedades(persona);
Manera 2 (esto se le llama "asignarle un valor por defecto", es la más viable)
const persona = {
nombre: 'Ricardo',
apellido: 'Garrido',
//edad: 32,
hobbies: ['ver series', 'no hace nada']
}
const imprimirPropiedades = ({ nombre, apellido, edad = 32, hobbies }) => {
console.log({ nombre });
console.log({ apellido });
console.log({ edad });
console.log({ hobbies });
}
imprimirPropiedades(persona);
Ejercicio 15: Cuantos caracteres tiene un array
const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];
const numero_caracteres = nombres.map((nombre) => {
console.log(`${nombre} tiene ${nombre.length} letras`);
})
Ejercicio 16:resumir el ejercicio 15
const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];
const numero_caracteres = nombres.map(nombre => `${nombre} tiene ${nombre.length} letras`)
Ejercicio 17
Crea una función con una variable por default si alguna vez alguien no rellena el dato
let saludar = (nombre = "visitante") => {
return `Hola ${nombre}`;
}
console.log(saludar("Sutano"));
Ejercicio 18:Crea una funcion dentro del valor de un objeto y usala
let saludar = {
accion: function saludar(a) {
return `Hola ${a}`;
},
otraAccion: function hablar(b) {
return `${b}`;
}
}
console.log(saludar.otraAccion("Blablabla"));
Ejercicio 19:Hacer una función que cree un objeto
let crearObjeto = (nombre, edad) => {
return {
name: nombre,
age: edad
};
}
console.log(crearObjeto("Ric", 33));
Ejercicio 20:Resumir el codigo del ejercicio 26
let crearObjeto = (nombre, edad) => {
return {
nombre,
edad
};
}
console.log(crearObjeto("Ric", 33));
Ejercicio 21:Agregar una funcion dentro del objeto del ejercicio 26 y ejecutarla
let crearObjeto = (nombre, edad) => {
return {
nombre,
edad,
imprimir: () => {
return `My name is ${nombre} y tengo ${edad}`;
}
};
}
console.log(crearObjeto("Ric", 33).imprimir());
Ejercicio 22
let crearObjeto = (nombre, edad) => {
return {
nombre,
edad,
imprimir() {
return `My name is ${nombre} y tengo ${edad}`;
}
};
}
console.log(crearObjeto("Ric", 33).imprimir());
Ejercicio 23: try catch cuando no quieres que se detenga la ejecución de tu programa
Usalo cuando las funciones no sabes si vayan a tener datos, si llegan vacias, no llenes tu codigo de try catch
Normalmente se usa cuando descargas un listado de clientes, NO LO USES para agregar una clase o algo en el html
Esto solo se puede con las funciones antiguas de JS, con las flechas primero se declara la funcion.
try {
algo();
} catch (error) {
console.log(error);
}
clientes();
function clientes() {
console.log("Descargando...");
setTimeout(() => {
console.log("Completado!");
}, 3000);
}
Ejercicio 24: TRY-CATCH-FINALLY Finally ejecuta pase lo que pase
try {
clientes();
} catch (error) {
console.log(error);
} finally {
console.log("Ejecuta esto pase lo que pase");
}
function clientes() {
console.log("Descargando...");
setTimeout(() => {
console.log("Completado!");
}, 3000);
}
Ejercicio 25:Escribe un objeto como se hacía de antaño.
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
//Metodos
this.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
console.log(snoopy);
Ejercicio 26: Agrega un metodo a un objeto de antaño usando prototype.
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
const snoopy = new animal("Snoopy", "Macho");
const lolaBunny = new animal("Lola Bunny", "Hembra");
lolaBunny.sonar();
Ejercicio 27:Heredar prototipos
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro
incluso los prototipos, como el .sonar que tiene
Ejercicio 28: Sobreescribir, un prototipo heredado, (recuerda que esto es javascript viejito)
function animal(nombre, genero) {
//Propiedades
this.nombre = nombre;
this.genero = genero;
}
//Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro
incluso los prototipos, como el .sonar que tiene
perro.prototype.sonar = function() {
console.log("Wof!! wof!!");
}
perro.prototype.sonar();
Ejercicio 29: Escribirle un metodo prototipado a la función heredada del javascript viejito
function animal(nombre, genero) {
Propiedades
this.nombre = nombre;
this.genero = genero;
}
Metodos agregados desde afuera, esto evita la duplicidad de metodos en la función constructora
animal.prototype.sonar = function() {
console.log("Hago sonidos porque estoy vivo");
}
function perro(nombre, genero, tamanio) {
//super sirve para invocar al constructor padre
this.super = animal;
this.super(nombre, genero);
this.tamanio = tamanio;
}
perro.prototype = new animal();
perro.prototype.constructor = perro;
al igualarlo al mismo constructor, obtendra todo lo que hay en la funcion perro
incluso los prototipos, como el .sonar que tiene
perro.prototype.ladrar = function() {
console.log("Wof!! wof!!");
}
perro.prototype.ladrar();
EJERCICIO 30: Crear una funcion anónima autoinvocada
(function() {
console.log("Soy una función autoinvocada");
})()
Ejercicio 31: Crear una funcion anónima autoinvocada que reciba parametros
(function(w, d, c) {
console.log("Soy una función autoinvocada");
console.log(w);
console.log(d);
console.log(c);
c.log("Estoy usando console.log recibiendo el console como un parametro");
})(window, document, console)
Ejercicio 32: Crear las 4 funciones anónimas autoinvocadas
//clasica
(function() {
console.log("Soy una función anónima autoejecutable CLASICA");
})();
//Crockford
((function() {
console.log("Soy una función anónima autoejecutable CROCKFORD");
})());
//UNARIA
+function() {
console.log("Soy una función anónima autoejecutable UNARIA");
}();
!function() {
console.log("Soy una función anónima autoejecutable ESTILO FACEBOOK");
}
Ejercicio 1 : Array que tenga strings
let animales = ['Perro', 'Gato', 'Pez'];
console.log(animales[2]);
Ejercicio 1.01: Array creado de una forma nueva
let cadena = Array.of("hola", 2, true, [1, 2, "mundo"]);
console.log(cadena);
Ejercicio 1.02: Una forma de llenar un array de datos
let cadena = Array(10).fill(false);
console.log(cadena);
Ejercicio 1.03: Otra forma de crear un arreglo.
const e = new Array();
console.log(e);
Ejercicio 1.04: Imprimir un arreglo usando el metodo .forEach();
let colores = ["Azul", "Rojo", "Verde"];
colores.forEach(function(element, index) {
console.log(`
});
Ejercicio 2: Array que tenga strings y números
let datos = [19, 'Gato', 22];
console.log(datos[0]);
Ejercicio 3: Array que tenga strings, números y boleanos
let datos = [19, 'Gato', true];
console.log(datos[2]);
Ejercicio 4: Array que tenga strings, números, boleanos y nulos
let datos = [19, 'Gato', true, null];
console.log(datos[3]);
Ejercicio 5: Array que tenga strings, números, boleanos, nulos y funciones
let datos = [19, 'Gato', true, null, function name() {}];
console.log(datos[4]);
Ejercicio 6: Array que tenga strings, números, boleanos, nulos, funciones y un array con datos anteriores
let datos = [19,
'Gato',
true,
null,
function name() {},
["Canada", "Suiza", "Germany"]
];
console.log(datos[5][1]);
Ejercicio 7: Usa el metodo "length" que te dice cuantos cupos hay en el array
let mascotas = ["perro", "gato", "perico"];
console.log(mascotas.length);
Ejercicio 8 Usa el metodo .push() que te agrega un nuevo dato a tu array al final(agrega un objeto de preferencia)
let mascotas = ["perro", "gato", "perico"];
mascotas.push("Pez");
console.log(mascotas.length);
console.log(mascotas);
Ejercicio 9 Usa el metodo unshift(); que te agrega un nuevo dato a tu array pero al inicio
let mascotas = ["perro", "gato", "perico"];
mascotas.unshift("Caracol");
console.log(mascotas.length);
console.log(mascotas);
Ejercicio 10 Borrar el último dato de tu array y muestra lo que hayas borrado
let mascotas = ["perro", "gato", "perico"];
let borrado = mascotas.pop();
console.log(mascotas.length);
console.log(mascotas);
console.log("La mascota que se borro fue: " + borrado);
Ejercicios 11 Elimina el rango de elementos que tu le digas, dentro de un array
let mascotas = ["perro", "gato", "perico", "pez", "hamster", "mapache"];
let elementosBorrados = mascotas.splice(1, 4);
console.log(mascotas.length);
console.log(mascotas);
console.log(elementosBorrados);
Ejercicio 12 Te dice el lugar en donde se encuentra el dato que buscas, OJO: debes ponerlo exacto, mayúsculas y minúsculas
let mascotas = ["perro", "gato", "perico", "pez", "hamster", "mapache"];
let indice = mascotas.indexOf("pez");
console.log(indice);
Ejercicio 13 Crear un objeto con diferentes tipos de datos y mostrar su contenido
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
console.log(persona.otrosAmigos.unila[1]);
Ejercicio 13.01: Crear un objeto e inicializar un metodo interior que tenga
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
}
}
ric.accion();
Ejercicio 13.02: crear un objeto e imprime una datos que estén dentro usando THIS
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
ric.otraAccion();
EJERCICIO 13.03: Obtener los nombres de las propiedades del objeto
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
console.log(Object.keys(ric));
EJERCICIO 13.04: Obtener los valores de las propiedades del objeto
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
console.log(Object.values(ric));
EJERCICIO 13.05: Usar el metodo .hasOwnProperty para preguntar si existe una propiedad del metodo, imprimira true or false para decirte si existe o no
let ric = {
nombre: "Ricardo",
edad: 33,
redes: ["Twitter", "Instagram", "GitHub"],
amigos: {
secu: "Urrutia",
prepa: "Nacho",
uni: "Lau",
vida: "Diego"
},
accion: function saludar() {
console.log("Hello World");
},
otraAccion: function() {
console.log(`MI nombre es ${this.nombre} y tengo ${this.edad} años`);
}
}
console.log(ric.hasOwnProperty("nombre"));
Ejercicio 14 Crear un objeto y mostrar su contenido Y BORRAR una propiedad del objeto ,Crear un objeto y mostrar su contenido
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
delete persona.vivo;
console.log(persona);
Ejercicio 15 Convertir todo un objeto en un array
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
delete persona.vivo;
const entriesPares = Object.entries(persona);
console.log(entriesPares);
Ejercicio 16 Agregar una nueva propiedad al objeto
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
persona.casado = false;
console.log(persona);
Ejercicio 17 Crea un objeto y bloquea una modificación usando el metodo Object.freeze, que sirve para congelar tu objeto y se quede como lo dejaste
const persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
Object.freeze(persona);
Object.freeze(persona.amigos);
persona.amigos[0] = "Andres";
persona.edad = 18;
console.log(persona);
Ejercicio 18 Usa el metodo Object.getOwnPropertyNames(); que te muestra las propiedades que le pusiste a tu objeto, pero en un Array
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
const propiedades = Object.getOwnPropertyNames(persona);
console.log(propiedades);
Ejercicio 19 Muestra en un array los valores que tengas dentro de las propiedades que están dentro de tu objeto, usando Object.value()
let persona = {
nombre: "Ricardo",
edad: 33,
vivo: true,
amigos: ["El capi",
"Luis",
"Nacho"
],
otrosAmigos: {
unila: ["Ruben",
"Jessica"
],
secu1: "Urrutia",
uni: {
elMorro: "Samuel",
yuri: "Yuriliana",
Laurrirrichan: "Laura"
}
}
}
const valores = Object.values(persona);
console.log(valores);
Ejercicio 20 Imprimir los objetos dentro de un array usando For
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
for (let i = 0; i < autos.length; i++) {
console.log(autos[i]);
}
EJERCICIO 21 Imprimir los objetos dentro del array con for pero imprimiendo nombre y modelo
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
for (let i = 0; i < autos.length; i++) {
console.log(autos[i].modelo + ' del año ' + autos[i].anio);
}
EJERCICIO 22 Hacer el ejercicio 30 pero imprimiendo con interpolacion
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
for (let i = 0; i < autos.length; i++) {
console.log(`${autos[i].modelo} del año ${autos[i].anio}`);
}
Ejercicio 23 Agregaga un objeto a un array const e imprimelo
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
autos.push({ modelo: "Mercedez Benz", anio: 2016 });
for (let i = 0; i < autos.length; i++) {
console.log(autos[i].modelo + 'del año' + autos[i].anio);
}
EJERCICIO 24 Modifica objeto dentro de un array const desde afuera(es la unica manera en la que se puede).
const autos = [
{ modelo: "Mustang", anio: 1962 },
{ modelo: "360z", anio: 2010 },
{ modelo: "Civic", anio: 2007 }
];
autos[1].modelo = "Mercedez Benz";
console.log(autos[1].modelo);
Ejercicio 1
ANTES
function primero() {
console.log("PRIMERO");
}
function segundo() {
console.log("SEGUNDO");
}
primero();
segundo();
EL ERROR(Por el retrazo de tiempo, se ejecuta después aunque vaya antes)
function primero() {
setTimeout(function() {
console.log("PRIMERO");
}, 3000)
}
function segundo() {
console.log("SEGUNDO");
}
primero(segundo);
DESPUES(La solución)
function primero(segundo) {
setTimeout(function() {
console.log("PRIMERO");
segundo();
}, 3000)
}
function segundo() {
console.log("SEGUNDO");
}
primero(segundo);