Vamos a crear una función cargar imagen a la que le pasemos una url e intente cargar la imagen, si existe la url y es una imagen que la ponga en un div. Si no hay imagen que ponga un mensaje de imagen no encontrada.
Con promesas.
Sitios con APIs
Fetch ejemplo
<script>
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(
function (response) {
console.log(response);
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function (data) {
console.log(data);
});
}
)
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(
function (response) {
return response.json()
// Examine the text in the response
}
).then(function (data) {
console.log(data);
})
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(response => response.json())
.then(data => console.log(data))
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
let data = {
title: 'foo',
body: 'bar',
userId: 1
};
let params = {
method: 'POST',
body: JSON.stringify(data),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
};
fetch('https://jsonplaceholder.typicode.com/posts',params)
.then(response => response.json())
.then(json => console.log(json))
</script>
Peticiones Ajax con fetch
¿Por qué es tan raro CSS?
Nos lo explican en Microsiervos:
https://www.microsiervos.com/archivo/internet/por-que-raro-css-como-funciona-resuelve-problemas.html
JS promises otro ejemplo
const apuestas = new Promise((resolve, reject) => {
let total = 0;
let veces = 10000;
for (let i = 0; i < veces; i++) {
for (let j = 0; j < veces; j++) {
total += Math.random() * 10;
}
}
console.log(total);
total = total / (veces ** 2);
if (total >= 5) {
let win = 'Hemos ganado';
resolve(win);
} else {
let loose = 'Hemos perdido';
reject(loose);
}
})
apuestas.then((result)=>{
console.log(result);
}).catch((error)=>{
console.log(error);
})
console.log("Fin programa");
JS Promises
Enlaces:
https://developers.google.com/web/fundamentals/primers/promises?hl=es
https://scotch.io/tutorials/javascript-promises-for-dummies
https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/your-first-code-with-promises
https://flaviocopes.com/javascript-promises/
https://exploringjs.com/es6/ch_promises.html#sec_examples-promises
let pagaExtra = false;
// Generación de la promesa
let nuevoTelefono = new Promise(
function (resolve, reject) {
if (pagaExtra) {
var telefono = {
marca: 'Samsung',
color: 'black'
};
resolve(telefono); // fulfilled
} else {
var razon = new Error('Sin paga extra');
reject(razon); // reject
}
}
);
//Consumir la promesa
let comprar=function(){
nuevoTelefono.then(
//La promesa se ha cumplido
function(fulfilled){
console.log(fulfilled);
}
).catch(
//La promesa no se ha cumplido
function(error){
console.log(error);
}
)
}
comprar();
Añadimos console.log:
let pagaExtra = true;
// Generación de la promesa
let nuevoTelefono = new Promise(
function (resolve, reject) {
if (pagaExtra) {
var telefono = {
marca: 'Samsung',
color: 'black'
};
resolve(telefono); // fulfilled
} else {
var razon = new Error('Sin paga extra');
reject(razon); // reject
}
}
);
//Consumir la promesa
let comprar=function(){
console.log("inicio");
nuevoTelefono.then(
//La promesa se ha cumplido
function(fulfilled){
console.log(fulfilled);
}
).catch(
//La promesa no se ha cumplido
function(error){
console.log(error);
}
)
console.log("fin");
}
comprar();
Resultado:
inicio
fin
{marca: “Samsung”, color: “black”}
Con parámetros:
let comprar = function (pagaExtra) {
let nuevoTelefono = new Promise(
function (resolve, reject) {
if (pagaExtra) {
var telefono = {
marca: 'Samsung',
color: 'black'
};
resolve(telefono); // fulfilled
} else {
var razon = new Error('Sin paga extra');
reject(razon); // reject
}
}
);
nuevoTelefono.then(
//La promesa se ha cumplido
function (fulfilled) {
console.log(fulfilled);
}
).catch(
//La promesa no se ha cumplido
function (error) {
console.log(error);
}
)
}
comprar(true);
comprar(false);
JS array find y findIndex
Enlaces:
https://www.w3schools.com/jsref/jsref_find.asp
https://www.w3schools.com/jsref/jsref_findindex.asp
https://appdividend.com/2018/12/17/javascript-array-find-example-array-prototype-find-tutorial/
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num.find(valor => valor > 5)); //Devuelve 6
console.log(num.findIndex(valor => valor > 5)); //Devuelve 5
let cad = "hola que tal";
console.log(cad.split(" ").find(valor => valor.length <= 3)); //Devuelve que
console.log(cad.split(" ").findIndex(valor => valor.length <= 3)); //Devuelve 1
let libros = [{ titulo: "Quijote", paginas: 400 },
{ titulo: "El buscón", paginas: 300 },
{ titulo: "Orestiada", paginas: 200 }]
console.log(libros.find(valor=>valor.paginas<250));// Devuelve {titulo: "Orestiada", paginas: 200}
console.log(libros.findIndex(valor=>valor.paginas<250));// Devuelve 2
//Ejercicio: crear una función que pasándole una cadena nos devuelva la primera palabra que tenga una longitud mayor de 8
//Ejemplo: primeraLarga("hola que tal")->undefined primeraLarga("en un lugar de la mancha arquetípica y lustrosa")->arquetípica
JS array indexOf
Enlaces:
https://www.w3schools.com/jsref/jsref_indexof_array.asp
https://www.jquery-az.com/javascript-indexof-method-explained-with-6-examples-to-search-in-arrays/
console.log(num.indexOf(5)); //Devuelve 4
console.log(num.indexOf(5,7)); //Devuelve -1
//Ejercicio: Crear una función que pasándole una cadena y una palabra nos devuelva un array con las posiciones de esa palabra en la cadena y vacío si no está
//Ejemplo posPalabra("la tía de la pepa va a la casa","la")->[0,3,7] porque 'la' está en la primera posición (0) de las palabras, en la 3 y en la 7
JS array every y some
Enlaces:
https://www.w3schools.com/jsref/jsref_every.asp
https://www.w3schools.com/jsref/jsref_some.asp
https://www.geeksforgeeks.org/javascript-array-prototype-every-function/
https://mariusschulz.com/blog/the-some-and-every-array-methods-in-javascript
let todosPares=num.every((valor)=>valor%2==0);
console.log(todosPares);
let algunPares=num.some((valor)=>valor%2==0);
console.log(algunPares);
let positivos=num.every((valor)=>valor>0);
console.log(positivos);
//Ejercicio: crear una función que le pasemos una cadena y nos devuelva true si todas las palabras tienen una longitud mayor o igual a 3
//Ejemplo: masDeTres("hola que tal")->true masDeTres("Enun lugar de la mancha")->false
//Ejercicio: crear una función que le pasemos una cadena y nos devuelva true si hay alguna palabra con una longitud mayor de 10
//Ejemplo: masDeDiez("hola que tal")->false masDeDiez("Mi tía es otorrinolaringóloga")->true