pochitax/async-await.html

## async-await.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <style>
        .card img {
            object-fit: contain;
            max-height: 250px;
        }
    </style>
</head>
<body>
    <header class="p-4 text-center">
        <h1>Ejemplo de Async/Await con personajes</h1>
    </header>
    <main class="container">
        <h2>Dragon Ball Z</h2>
        <div class="row" id="personajes">

        </div>
    </main>
    <script>
        // debo llamar la ruta de la solicitud
        const personajes = 'https://dragonball-api.com/api/characters';

        async function obtenerPersonajes() {
            // en try revisa si es posible ejecutar la petición
            try {
                const respuesta = await fetch(personajes); // espera a que se resuelva la promesa

                if (!respuesta.ok) {
                    // si hay un error lo refleja el throw
                    throw new Error("Error en la solicitud");
                }

                const data = await respuesta.json(); // parsea la respuesta a JSON
                console.log(data.items); // muestra listado completo en consola

                for (let i = 0; i < data.items.length; i++) {
                    console.log(data.items[i].name);

                    let columna = document.createElement('div')
                    columna.classList.add('col-md-3')

                    columna.innerHTML = '<div class="card mb-4 text-center"><img src="'+ data.items[i].image +'" class="w-100 mb-4 p-4"><h3>'+ data.items[i].name +'</h3></div>'

                    document.getElementById('personajes').appendChild(columna)
                }

            } catch (error) {
                console.error("Hubo un problema:", error);
            } // el catch se ejecuta si no funciona la petición
        }

        // Ejecutar la función
        obtenerPersonajes();
    </script>
</body>
</html>

## callback.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Callback</title>
</head>
<body>
    <h1>Callback</h1>
    <p>Un callback en JavaScript es simplemente una función que se pasa como argumento a otra función para que sea llamada (o “ejecutada”) más adelante</p>
    <script>
        // función que pasa como argumento
        function saludar(persona){
            alert('Hola ' + persona);
        }
        // función que llama al callback y al parámetro
        function setearPersona(usuario,callback){
            callback(usuario)
        }
        // función final
        setearPersona('perrito',saludar);
    </script>
</body>
</html>

## fetch.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <style>
        .card img {
            object-fit: contain;
            max-height: 250px;
        }
    </style>
</head>
<body>
    <header class="p-4 text-center">
        <h1>Ejemplo de Fetch con personajes</h1>
    </header>
    <main class="container">
        <h2>Dragon Ball Z</h2>
        <div class="row" id="personajes">

        </div>
    </main>
    <script>
        // debo llamar la ruta de la solicitud
        const personajes = 'https://dragonball-api.com/api/characters'

        fetch(personajes)

        // primer .then para verificar y retornar la solicitud
        .then(respuesta =>{
            if(respuesta.ok) {
                console.log('se recibe la solicitud')
                return respuesta.json(); // es necesario retornar la respuesta
            } else {
                console.log('error')
            }
        })
        // segundo .then para parsear los datos
        .then(data =>{
            console.log(data.items); // muestra en consola el listado de personajes

            for(i=0;i< data.items.length; i++) {
                console.log(data.items[i].name);

                let columna = document.createElement('div')
                columna.classList.add('col-md-3')
                //columna.textContent = data.items[i].name

                columna.innerHTML = '<div class="card mb-4 text-center"><img src="'+ data.items[i].image +'" class="w-100 mb-4 p-4"><h3>'+ data.items[i].name +'</h3><p class="px-4">Su poder en KI es '+ data.items[i].ki +'</p></div>'

                document.getElementById('personajes').appendChild(columna)

            }

        })
        .catch(error =>{
            console.log(error)
        })

        /* fetch paso a paso

        fetch(url) devuelve una promesa con la respuesta del servidor (un objeto Response).
        👉 Este objeto aún no contiene los datos, solo la respuesta cruda (headers, estado, etc.).

        Para leer los datos (por ejemplo JSON), hay que usar un método del objeto Response, como .json(), que también devuelve una promesa.

        Por eso usamos dos .then():

        El primer .then() maneja la respuesta.

        El segundo .then() maneja los datos procesados (ej: JSON). */
    </script>
</body>
</html>

## promise.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise / Promesa</title>
</head>
<body>
    <h1>Promesa</h1>
    <p>Una promesa en JavaScript es como un “recibo” que te da el programa cuando pides algo que tarda en llegar (por ejemplo, datos de un servidor).</p>
    <ul>
        <li>Al principio está pendiente (todavía no llega la respuesta).</li>
        <li>Si todo va bien, la promesa se cumple (te entrega lo que pediste).</li>
        <li>Si algo falla, la promesa se rechaza (te dice que hubo un error).</li>
    </ul>
    <script>
        // Se declara la promesa
        let promesa = new Promise((resolve, reject) => {
            let exito = true;

            if (exito) {
                // Si se cumple
                resolve("¡La operación fue exitosa!");
            } else {
                // Si no se cumple la promesa
                reject("Ocurrió un error");
            }
        });

        // vuelvo a declarar la variable
        promesa
        // si es correcta, Se ejecuta si la promesa se cumple (es decir, si salió bien).
        // Recibe el resultado que la promesa devolvió con resolve.
        .then((resultado) => {
            console.log(resultado); // "¡La operación fue exitosa!"
        })
        // muestra el error
        // Recibe el mensaje de error que se pasó con reject.
        .catch((error) => {
            console.error(error);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
	<style>
	.card img {
	object-fit: contain;
	max-height: 250px;
	}
	</style>
	</head>
	<body>
	<header class="p-4 text-center">
	<h1>Ejemplo de Async/Await con personajes</h1>
	</header>
	<main class="container">
	<h2>Dragon Ball Z</h2>
	<div class="row" id="personajes">

	</div>
	</main>
	<script>
	// debo llamar la ruta de la solicitud
	const personajes = 'https://dragonball-api.com/api/characters';

	async function obtenerPersonajes() {
	// en try revisa si es posible ejecutar la petición
	try {
	const respuesta = await fetch(personajes); // espera a que se resuelva la promesa

	if (!respuesta.ok) {
	// si hay un error lo refleja el throw
	throw new Error("Error en la solicitud");
	}

	const data = await respuesta.json(); // parsea la respuesta a JSON
	console.log(data.items); // muestra listado completo en consola

	for (let i = 0; i < data.items.length; i++) {
	console.log(data.items[i].name);

	let columna = document.createElement('div')
	columna.classList.add('col-md-3')

	columna.innerHTML = '<div class="card mb-4 text-center"><img src="'+ data.items[i].image +'" class="w-100 mb-4 p-4"><h3>'+ data.items[i].name +'</h3></div>'

	document.getElementById('personajes').appendChild(columna)
	}

	} catch (error) {
	console.error("Hubo un problema:", error);
	} // el catch se ejecuta si no funciona la petición
	}

	// Ejecutar la función
	obtenerPersonajes();
	</script>
	</body>
	</html>
No results found