Autor: clubprogramador

20 ejercicios resueltos de arrays en JavaScript

20 ejercicios resueltos de arrays en JavaScript: recorridos, búsquedas, filtros, map, find, reduce, ordenamiento, duplicados y más, explicados paso a paso.

Los arrays en JavaScript aparecen constantemente en aplicaciones reales: listas de usuarios, productos, tareas, resultados de APIs y muchos otros datos. En esta guía vas a practicar sus operaciones más comunes con 20 ejercicios resueltos.

Si necesitás repasar la teoría primero, consultá Arrays en JavaScript: métodos, recorridos, map, filter, find y reduce. También podés empezar por 20 ejercicios resueltos de JavaScript para principiantes.

Índice de ejercicios

  1. Mostrar todos los elementos de un array
  2. Obtener la cantidad de elementos
  3. Sumar todos los elementos
  4. Calcular el promedio
  5. Encontrar el mayor valor
  6. Encontrar el menor valor
  7. Contar números pares
  8. Buscar un elemento con includes()
  9. Buscar la posición con indexOf()
  10. Filtrar números mayores a 10
  11. Duplicar todos los valores con map()
  12. Buscar un objeto con find()
  13. Comprobar si algún elemento cumple una condición
  14. Comprobar si todos cumplen una condición
  15. Eliminar duplicados
  16. Ordenar números de menor a mayor
  17. Invertir el orden de un array
  18. Sumar con reduce()
  19. Contar frecuencia de valores
  20. Agrupar objetos por una propiedad

1. Mostrar todos los elementos de un array

Enunciado: Recorrer un array y mostrar cada elemento.

const frutas = ["manzana", "pera", "banana"];

for (const fruta of frutas) {
    console.log(fruta);
}

for...of recorre directamente los valores del array, por lo que resulta claro cuando sólo necesitamos leerlos.

2. Obtener la cantidad de elementos

Enunciado: Mostrar cuántos elementos contiene un array.

const numeros = [10, 20, 30, 40];

console.log(numeros.length);

La propiedad length devuelve la cantidad de elementos del array.

3. Sumar todos los elementos

Enunciado: Calcular la suma total de un array numérico.

const numeros = [4, 7, 10, 3];
let suma = 0;

for (const numero of numeros) {
    suma += numero;
}

console.log(suma);

La variable suma funciona como acumulador y recibe cada valor durante el recorrido.

4. Calcular el promedio

Enunciado: Obtener el promedio de los números de un array.

const numeros = [8, 6, 9, 7];
let suma = 0;

for (const numero of numeros) {
    suma += numero;
}

const promedio = suma / numeros.length;

console.log(promedio);

El promedio se obtiene dividiendo la suma por length. Conviene comprobar que el array no esté vacío antes de dividir en una aplicación real.

5. Encontrar el mayor valor

Enunciado: Buscar el número más grande del array.

const numeros = [12, 5, 31, 18, 9];
let mayor = numeros[0];

for (const numero of numeros) {
    if (numero > mayor) {
        mayor = numero;
    }
}

console.log(mayor);

Inicializar mayor con el primer elemento evita errores cuando todos los valores son negativos.

6. Encontrar el menor valor

Enunciado: Buscar el número más pequeño del array.

const numeros = [12, 5, 31, 18, 9];
let menor = numeros[0];

for (const numero of numeros) {
    if (numero < menor) {
        menor = numero;
    }
}

console.log(menor);

El procedimiento es igual al del máximo, cambiando la comparación.

7. Contar números pares

Enunciado: Contar cuántos valores pares tiene el array.

const numeros = [3, 8, 10, 7, 12, 5];
let cantidad = 0;

for (const numero of numeros) {
    if (numero % 2 === 0) {
        cantidad++;
    }
}

console.log(cantidad);

El operador % permite comprobar si el resto de dividir por 2 es cero.

8. Buscar un elemento con includes()

Enunciado: Comprobar si un valor existe dentro del array.

const lenguajes = ["JavaScript", "Python", "PHP"];

console.log(lenguajes.includes("Python"));

includes() devuelve true o false y no modifica el array.

9. Buscar la posición con indexOf()

Enunciado: Obtener el índice de un elemento.

const colores = ["rojo", "verde", "azul"];

const posicion = colores.indexOf("verde");

console.log(posicion);

indexOf() devuelve el índice de la primera coincidencia. Si no encuentra el valor devuelve -1.

10. Filtrar números mayores a 10

Enunciado: Crear un nuevo array sólo con valores mayores a 10.

const numeros = [4, 18, 7, 25, 10, 31];

const mayores = numeros.filter(function (numero) {
    return numero > 10;
});

console.log(mayores);

filter() crea un nuevo array con los elementos que cumplen la condición. El array original no se modifica.

11. Duplicar todos los valores con map()

Enunciado: Crear un nuevo array multiplicando cada número por 2.

const numeros = [1, 2, 3, 4];

const dobles = numeros.map(function (numero) {
    return numero * 2;
});

console.log(dobles);

map() transforma cada elemento y devuelve un nuevo array con la misma cantidad de posiciones.

12. Buscar un objeto con find()

Enunciado: Encontrar el primer objeto que cumpla una condición.

const usuarios = [
    { id: 1, nombre: "Ana" },
    { id: 2, nombre: "Luis" },
    { id: 3, nombre: "Marta" }
];

const usuario = usuarios.find(function (item) {
    return item.id === 2;
});

console.log(usuario);

find() devuelve el primer elemento que cumple la condición. Si no encuentra ninguno devuelve undefined.

13. Comprobar si algún elemento cumple una condición

Enunciado: Determinar si existe al menos un número negativo.

const numeros = [5, 8, -2, 10];

const hayNegativos = numeros.some(function (numero) {
    return numero < 0;
});

console.log(hayNegativos);

some() devuelve true apenas encuentra un elemento que cumpla la condición.

14. Comprobar si todos cumplen una condición

Enunciado: Verificar si todos los números son positivos.

const numeros = [5, 8, 2, 10];

const todosPositivos = numeros.every(function (numero) {
    return numero > 0;
});

console.log(todosPositivos);

every() devuelve true sólo si todos los elementos cumplen la condición.

15. Eliminar duplicados

Enunciado: Crear un nuevo array con valores únicos.

const numeros = [1, 2, 2, 3, 4, 4, 5];

const unicos = [...new Set(numeros)];

console.log(unicos);

Set conserva valores únicos. El operador spread ... los copia dentro de un nuevo array.

16. Ordenar números de menor a mayor

Enunciado: Ordenar un array numérico correctamente.

const numeros = [20, 3, 100, 8, 1];

numeros.sort(function (a, b) {
    return a - b;
});

console.log(numeros);

sort() modifica el array original. La función a - b fuerza un orden numérico ascendente.

17. Invertir el orden de un array

Enunciado: Dar vuelta el orden de los elementos.

const letras = ["a", "b", "c", "d"];

letras.reverse();

console.log(letras);

reverse() modifica el array original. Si necesitás conservarlo, conviene copiarlo antes.

18. Sumar con reduce()

Enunciado: Calcular la suma utilizando reduce().

const numeros = [4, 7, 10, 3];

const suma = numeros.reduce(function (acumulador, numero) {
    return acumulador + numero;
}, 0);

console.log(suma);

reduce() combina todos los elementos en un único resultado. El segundo argumento, 0, es el valor inicial del acumulador.

19. Contar frecuencia de valores

Enunciado: Crear un objeto indicando cuántas veces aparece cada elemento.

const frutas = ["pera", "manzana", "pera", "banana", "pera"];
const frecuencia = {};

for (const fruta of frutas) {
    frecuencia[fruta] = (frecuencia[fruta] || 0) + 1;
}

console.log(frecuencia);

El objeto usa cada fruta como clave y acumula la cantidad de apariciones.

20. Agrupar objetos por una propiedad

Enunciado: Agrupar productos según su categoría.

const productos = [
    { nombre: "Mouse", categoria: "tecnologia" },
    { nombre: "Teclado", categoria: "tecnologia" },
    { nombre: "Silla", categoria: "muebles" },
    { nombre: "Mesa", categoria: "muebles" }
];

const grupos = {};

for (const producto of productos) {
    const categoria = producto.categoria;

    if (!grupos[categoria]) {
        grupos[categoria] = [];
    }

    grupos[categoria].push(producto);
}

console.log(grupos);

Se crea una propiedad por categoría y dentro de cada una se guarda un array. push() agrega el producto al final del grupo correspondiente y modifica ese array.

Métodos que practicamos

A lo largo de los ejercicios usamos length, includes(), indexOf(), filter(), map(), find(), some(), every(), sort(), reverse(), reduce(), push() y Set. Algunos crean un nuevo array y otros modifican el original, una diferencia importante cuando trabajás con datos reales.

Seguí aprendiendo JavaScript

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender JavaScript, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

20 ejercicios resueltos de JavaScript para principiantes

20 ejercicios resueltos de JavaScript para principiantes: condicionales, ciclos, cadenas, arrays, funciones y más, con código y explicaciones paso a paso.

Practicar con ejercicios cortos es una de las mejores formas de afianzar JavaScript. En esta guía vas a encontrar 20 ejercicios resueltos de JavaScript para principiantes, ordenados desde operaciones básicas hasta arrays, cadenas y funciones.

Si recién empezás, podés complementar estos ejemplos con la guía completa de JavaScript. También te pueden servir las guías de condicionales, ciclos, funciones y arrays.

Índice de ejercicios

  1. Mostrar “Hola mundo”
  2. Sumar dos números
  3. Determinar si un número es par o impar
  4. Encontrar el mayor de dos números
  5. Encontrar el mayor de tres números
  6. Positivo, negativo o cero
  7. Tabla de multiplicar
  8. Sumar los números del 1 al N
  9. Calcular el factorial
  10. Contar vocales en una cadena
  11. Invertir una cadena
  12. Comprobar si una palabra es palíndromo
  13. Encontrar el mayor valor de un array
  14. Calcular el promedio de un array
  15. Contar números pares en un array
  16. Buscar un elemento en un array
  17. Eliminar elementos duplicados
  18. Ordenar números de menor a mayor
  19. Contar la frecuencia de cada elemento
  20. Crear una calculadora con funciones

1. Mostrar “Hola mundo”

Enunciado: Mostrar un mensaje en la consola.

console.log("Hola mundo");

El método console.log() muestra información en la consola del navegador. Es una de las formas más simples de comprobar qué está haciendo un programa.

2. Sumar dos números

Enunciado: Guardar dos números, sumarlos y mostrar el resultado.

const a = 8;
const b = 5;
const suma = a + b;

console.log(suma);

El operador + realiza la suma cuando ambos valores son numéricos. El resultado se guarda en una nueva constante.

3. Determinar si un número es par o impar

Enunciado: Indicar si un número es par o impar.

const numero = 17;

if (numero % 2 === 0) {
    console.log("Es par");
} else {
    console.log("Es impar");
}

El operador % devuelve el resto de una división. Si el resto de dividir por 2 es cero, el número es par.

4. Encontrar el mayor de dos números

Enunciado: Comparar dos valores y mostrar cuál es mayor.

const a = 12;
const b = 20;

if (a > b) {
    console.log(a);
} else if (b > a) {
    console.log(b);
} else {
    console.log("Son iguales");
}

Se usan if y else if para evaluar las distintas posibilidades, incluyendo el caso en que ambos valores sean iguales.

5. Encontrar el mayor de tres números

Enunciado: Obtener el valor más alto entre tres números.

const a = 18;
const b = 42;
const c = 27;

const mayor = Math.max(a, b, c);

console.log(mayor);

Math.max() recibe uno o más números y devuelve el mayor. No modifica los valores originales.

6. Positivo, negativo o cero

Enunciado: Determinar el signo de un número.

const numero = -7;

if (numero > 0) {
    console.log("Positivo");
} else if (numero < 0) {
    console.log("Negativo");
} else {
    console.log("Es cero");
}

El orden de las condiciones permite separar claramente los tres casos posibles.

7. Tabla de multiplicar

Enunciado: Mostrar la tabla de multiplicar de un número del 1 al 10.

const numero = 7;

for (let i = 1; i <= 10; i++) {
    console.log(numero + " x " + i + " = " + numero * i);
}

El ciclo for repite el bloque diez veces. La variable i funciona como contador.

8. Sumar los números del 1 al N

Enunciado: Calcular la suma de todos los enteros desde 1 hasta un valor dado.

const n = 10;
let suma = 0;

for (let i = 1; i <= n; i++) {
    suma += i;
}

console.log(suma);

suma funciona como acumulador: en cada vuelta del ciclo recibe su valor anterior más el número actual.

9. Calcular el factorial

Enunciado: Calcular el factorial de un número positivo.

const numero = 5;
let factorial = 1;

for (let i = 1; i <= numero; i++) {
    factorial *= i;
}

console.log(factorial);

El factorial de 5 es 1 × 2 × 3 × 4 × 5. Por eso el acumulador comienza en 1 y se multiplica en cada iteración.

10. Contar vocales en una cadena

Enunciado: Contar cuántas vocales aparecen en un texto.

const texto = "JavaScript";
let cantidad = 0;

for (const letra of texto.toLowerCase()) {
    if ("aeiou".includes(letra)) {
        cantidad++;
    }
}

console.log(cantidad);

toLowerCase() devuelve una nueva cadena en minúsculas. includes() devuelve true si encuentra el carácter buscado.

11. Invertir una cadena

Enunciado: Mostrar un texto con sus caracteres en orden inverso.

const texto = "programar";

const invertido = texto
    .split("")
    .reverse()
    .join("");

console.log(invertido);

split("") convierte la cadena en un array de caracteres, reverse() invierte ese array y join("") vuelve a unirlo. reverse() modifica el array sobre el que trabaja.

12. Comprobar si una palabra es palíndromo

Enunciado: Determinar si una palabra se lee igual de izquierda a derecha que de derecha a izquierda.

const palabra = "reconocer";
const normalizada = palabra.toLowerCase();

const invertida = normalizada
    .split("")
    .reverse()
    .join("");

if (normalizada === invertida) {
    console.log("Es palíndromo");
} else {
    console.log("No es palíndromo");
}

Primero se normaliza el texto y después se compara con su versión invertida. Este ejemplo trabaja con una sola palabra y no elimina espacios ni signos.

13. Encontrar el mayor valor de un array

Enunciado: Obtener el número más alto de un array.

const numeros = [4, 18, 7, 31, 12];
let mayor = numeros[0];

for (const numero of numeros) {
    if (numero > mayor) {
        mayor = numero;
    }
}

console.log(mayor);

Se inicializa mayor con un valor real del array y luego se compara cada elemento. Esto funciona correctamente incluso si todos los números son negativos.

14. Calcular el promedio de un array

Enunciado: Obtener el promedio de varios números.

const numeros = [8, 6, 10, 9, 7];
let suma = 0;

for (const numero of numeros) {
    suma += numero;
}

const promedio = suma / numeros.length;

console.log(promedio);

La propiedad length indica cuántos elementos contiene el array. El promedio se obtiene dividiendo la suma total por esa cantidad.

15. Contar números pares en un array

Enunciado: Contar cuántos elementos pares contiene un array.

const numeros = [3, 8, 12, 5, 7, 20];
let cantidad = 0;

for (const numero of numeros) {
    if (numero % 2 === 0) {
        cantidad++;
    }
}

console.log(cantidad);

El procedimiento combina un recorrido con for...of, una condición y un contador.

16. Buscar un elemento en un array

Enunciado: Comprobar si un valor existe dentro de un array.

const lenguajes = ["JavaScript", "Python", "PHP"];
const buscado = "Python";

if (lenguajes.includes(buscado)) {
    console.log("Encontrado");
} else {
    console.log("No encontrado");
}

includes() devuelve un booleano: true si el array contiene el valor y false en caso contrario.

17. Eliminar elementos duplicados

Enunciado: Crear un nuevo array sin valores repetidos.

const numeros = [1, 2, 2, 3, 4, 4, 5];

const sinDuplicados = [...new Set(numeros)];

console.log(sinDuplicados);

Set almacena valores únicos. El operador ... expande esos valores dentro de un nuevo array, por lo que el array original no se modifica.

18. Ordenar números de menor a mayor

Enunciado: Ordenar correctamente un array numérico.

const numeros = [20, 3, 100, 8, 1];

numeros.sort(function (a, b) {
    return a - b;
});

console.log(numeros);

sort() modifica el array original. La función a - b indica que queremos un orden numérico ascendente; sin esa función, JavaScript ordenaría los valores como texto.

19. Contar la frecuencia de cada elemento

Enunciado: Contar cuántas veces aparece cada número dentro de un array.

const numeros = [1, 2, 2, 3, 3, 3];
const frecuencias = {};

for (const numero of numeros) {
    frecuencias[numero] = (frecuencias[numero] || 0) + 1;
}

console.log(frecuencias);

El objeto frecuencias usa cada número como propiedad. Si todavía no existe se toma 0; si ya existe, se incrementa su contador.

20. Crear una calculadora con funciones

Enunciado: Crear una función que pueda sumar, restar, multiplicar o dividir dos números.

function calcular(a, b, operacion) {
    if (operacion === "sumar") {
        return a + b;
    }

    if (operacion === "restar") {
        return a - b;
    }

    if (operacion === "multiplicar") {
        return a * b;
    }

    if (operacion === "dividir") {
        if (b === 0) {
            return "No se puede dividir por cero";
        }

        return a / b;
    }

    return "Operación no válida";
}

console.log(calcular(10, 5, "sumar"));
console.log(calcular(10, 5, "dividir"));

La función recibe los valores y la operación como parámetros. return finaliza la función y devuelve el resultado. También se valida la división por cero.

Cómo aprovechar estos ejercicios

No te limites a copiar las soluciones. Probá cambiar los valores, agregar validaciones, resolver el mismo problema de otra manera o convertir algunos ejercicios en funciones reutilizables. La práctica gana mucho valor cuando modificás el código y observás qué cambia.

Seguí aprendiendo JavaScript

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender JavaScript, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Proyecto final jQuery: aplicación de tareas con DOM, filtros y AJAX

Proyecto final de jQuery: construí una aplicación de tareas con formularios, DOM dinámico, filtros, eventos y AJAX.

En este proyecto vamos a integrar los conceptos principales de jQuery construyendo una aplicación sencilla de tareas.

La aplicación permitirá cargar tareas, filtrarlas, marcarlas como completadas y eliminarlas. Además veremos dónde encajaría AJAX si los datos provinieran de un backend.

Qué vamos a practicar

  • selectores;
  • val();
  • eventos con on();
  • manipulación del DOM;
  • clases CSS;
  • delegación de eventos;
  • each();
  • filtros;
  • estructura preparada para AJAX.

HTML

<main class="app">
    <h1>Mis tareas con jQuery</h1>

    <form id="form-tarea">
        <input
            id="titulo"
            type="text"
            placeholder="Nueva tarea"
            required
        >

        <button type="submit">Agregar</button>
    </form>

    <div class="filtros">
        <button data-filtro="todas">Todas</button>
        <button data-filtro="pendientes">Pendientes</button>
        <button data-filtro="completadas">Completadas</button>
    </div>

    <p id="resumen"></p>

    <ul id="lista"></ul>
</main>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>

Estado de la aplicación

let tareas = [];
let filtroActual = "todas";

El array tareas contiene los datos y filtroActual determina qué elementos mostrar.

Crear una tarea

function crearTarea(titulo) {
    return {
        id: Date.now(),
        titulo: titulo,
        completada: false
    };
}

Filtrar

function obtenerVisibles() {
    if (filtroActual === "pendientes") {
        return tareas.filter(function (tarea) {
            return !tarea.completada;
        });
    }

    if (filtroActual === "completadas") {
        return tareas.filter(function (tarea) {
            return tarea.completada;
        });
    }

    return tareas;
}

Renderizar las tareas

function renderizar() {
    const lista = $("#lista");

    lista.empty();

    obtenerVisibles().forEach(function (tarea) {

        const item = $("<li>")
            .attr("data-id", tarea.id);

        const texto = $("<span>")
            .text(tarea.titulo);

        if (tarea.completada) {
            item.addClass("completada");
        }

        const completar = $("<button>")
            .attr("type", "button")
            .attr("data-accion", "completar")
            .text(
                tarea.completada
                    ? "Desmarcar"
                    : "Completar"
            );

        const eliminar = $("<button>")
            .attr("type", "button")
            .attr("data-accion", "eliminar")
            .text("Eliminar");

        item.append(texto, completar, eliminar);

        lista.append(item);
    });

    const pendientes = tareas.filter(function (tarea) {
        return !tarea.completada;
    }).length;

    $("#resumen").text(
        pendientes + " tarea(s) pendiente(s)"
    );
}

Agregar desde el formulario

$("#form-tarea").on("submit", function (event) {
    event.preventDefault();

    const titulo = $("#titulo").val().trim();

    if (titulo === "") {
        return;
    }

    tareas.push(
        crearTarea(titulo)
    );

    $("#titulo").val("");

    renderizar();
});

Completar y eliminar

Usamos delegación porque los botones se crean dinámicamente al renderizar.

$("#lista").on("click", "button", function () {

    const item = $(this).closest("li");
    const id = Number(item.attr("data-id"));
    const accion = $(this).attr("data-accion");

    if (accion === "completar") {

        tareas = tareas.map(function (tarea) {

            if (tarea.id === id) {
                return {
                    ...tarea,
                    completada: !tarea.completada
                };
            }

            return tarea;
        });

    }

    if (accion === "eliminar") {

        tareas = tareas.filter(function (tarea) {
            return tarea.id !== id;
        });

    }

    renderizar();
});

Cambiar filtros

$(".filtros").on("click", "button", function () {
    filtroActual = $(this).attr("data-filtro");

    renderizar();
});

Inicializar

$(function () {
    renderizar();
});

¿Dónde entraría AJAX?

En una aplicación real podríamos reemplazar el array local por peticiones al backend. Por ejemplo, cargar tareas con GET:

$.get("/api/tareas")
    .done(function (datos) {
        tareas = datos;
        renderizar();
    });

Y crear una tarea con POST:

$.post("/api/tareas", {
    titulo: "Nueva tarea"
})
.done(function (tarea) {
    tareas.push(tarea);
    renderizar();
});

Qué aprendimos

  • seleccionar y modificar elementos;
  • leer formularios;
  • manejar eventos;
  • crear contenido dinámico;
  • usar delegación;
  • trabajar con arrays y filtros;
  • preparar una interfaz para conectarla con un backend.

Después de jQuery

Con esta base ya podés mantener proyectos existentes que utilicen jQuery y comprender integraciones con plugins como DataTables. El siguiente paso natural para una ruta web completa puede ser comenzar con backend mediante PHP y bases de datos.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← jQuery y APIs: trabajar con JSON y renderizar datos dinámicos

Con este proyecto completás la ruta inicial de jQuery.

jQuery y APIs: trabajar con JSON y renderizar datos dinámicos

Aprendé a consumir APIs con jQuery, trabajar con JSON y renderizar respuestas dinámicamente en el DOM.

Una de las aplicaciones más comunes de AJAX es consultar una API y mostrar sus datos en la interfaz.

JSON y objetos JavaScript

Muchas APIs responden con JSON. jQuery puede interpretar automáticamente esa respuesta y entregarnos objetos o arrays de JavaScript.

¿Qué es una API?

Una API (Application Programming Interface, o interfaz de programación de aplicaciones) es una forma estandarizada para que dos sistemas puedan comunicarse entre sí.

Desde una página web podemos enviar una petición a una API y recibir información para utilizarla en nuestra aplicación. En aplicaciones web modernas, esos datos suelen llegar en formato JSON.

Nuestra página
      ↓
GET /usuarios
      ↓
API
      ↓
JSON
      ↓
jQuery procesa los datos
      ↓
Mostramos los usuarios en el HTML

Ejemplos de APIs reales

Existen miles de APIs disponibles en Internet. Algunas son públicas y otras requieren registrarse o utilizar una clave de acceso.

  • GitHub API: permite consultar usuarios, repositorios, issues, commits y otros datos de GitHub.
  • OpenWeather API: permite consultar información meteorológica, como temperatura y condiciones del clima. Generalmente requiere una API key.
  • REST Countries: permite consultar información de países, capitales, monedas, idiomas y banderas.
  • JSONPlaceholder: es una API pensada para practicar. Ofrece datos ficticios de usuarios, publicaciones, comentarios y tareas.

Importante: no todas las APIs son completamente abiertas. Algunas requieren autenticación, API keys, tienen límites de uso o aplican restricciones de seguridad como CORS.

Consultar una API

$.get("https://jsonplaceholder.typicode.com/users")
    .done(function (usuarios) {
        console.log(usuarios);
    });

Renderizar resultados

$.get("https://jsonplaceholder.typicode.com/users")
    .done(function (usuarios) {

        $("#usuarios").empty();

        usuarios.forEach(function (usuario) {
            $("#usuarios").append(
                "<li>" + usuario.name + "</li>"
            );
        });

    });

empty() limpia el contenido anterior y append() agrega cada nuevo elemento.

Evitar insertar HTML no confiable

Si los datos vienen de usuarios o fuentes externas, es mejor evitar construir HTML directamente con texto sin controlar.

$.get("/api/usuarios")
    .done(function (usuarios) {

        const lista = $("#usuarios");

        lista.empty();

        usuarios.forEach(function (usuario) {
            $("<li>")
                .text(usuario.name)
                .appendTo(lista);
        });

    });

.text() trata el contenido como texto en lugar de interpretarlo como HTML.

dataType

Podemos indicar explícitamente que esperamos JSON:

$.ajax({
    url: "/api/usuarios",
    method: "GET",
    dataType: "json"
});

Enviar JSON

$.ajax({
    url: "/api/tareas",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({
        titulo: "Practicar AJAX"
    })
})
.done(function (tarea) {
    console.log(tarea);
});

Estado de carga y errores

$("#estado").text("Cargando...");

$.get("/api/usuarios")
    .done(function (usuarios) {
        $("#estado").text(
            usuarios.length + " usuarios encontrados"
        );
    })
    .fail(function () {
        $("#estado").text(
            "No se pudieron cargar los usuarios"
        );
    });

Ejercicio

Consumí una API pública de publicaciones y mostrá título y contenido de cada resultado dentro de tarjetas creadas dinámicamente.

Errores comunes

  • suponer una estructura JSON sin revisarla;
  • concatenar HTML con datos no confiables;
  • no limpiar resultados anteriores;
  • no mostrar estados de carga o error;
  • confundir JSON con un objeto JavaScript aunque estén relacionados.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← AJAX con jQuery: $.ajax(), $.get() y $.post() paso a paso

Proyecto final jQuery: aplicación de tareas con DOM, filtros y AJAX →

AJAX con jQuery: $.ajax(), $.get() y $.post() paso a paso

Aprendé AJAX con jQuery usando $.ajax, $.get y $.post para consultar y enviar datos sin recargar la página.

AJAX permite comunicarnos con un servidor sin recargar toda la página. jQuery popularizó una API sencilla para realizar estas peticiones.

¿Qué significa AJAX?

AJAX significa Asynchronous JavaScript and XML. Aunque el nombre menciona XML, hoy es muy común trabajar con JSON.

GET con $.get()

$.get() se utiliza para realizar una petición GET de forma abreviada.

$.get("https://jsonplaceholder.typicode.com/users")
    .done(function (usuarios) {
        console.log(usuarios);
    });

GET se usa habitualmente para consultar información sin modificarla.

POST con $.post()

$.post() permite enviar datos mediante POST.

$.post(
    "https://jsonplaceholder.typicode.com/posts",
    {
        title: "Aprender jQuery",
        body: "Ejemplo de POST"
    }
)
.done(function (respuesta) {
    console.log(respuesta);
});

$.ajax()

$.ajax() ofrece más control sobre la petición: URL, método, datos, headers, formato y manejo de errores.

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({
        title: "Nueva publicación",
        body: "Contenido"
    })
})
.done(function (respuesta) {
    console.log(respuesta);
})
.fail(function (xhr) {
    console.log("Error", xhr.status);
});

done(), fail() y always()

done() se ejecuta si la petición termina correctamente, fail() si falla y always() en ambos casos.

$.get("/api/usuarios")
    .done(function (datos) {
        console.log(datos);
    })
    .fail(function () {
        console.log("No se pudieron cargar los datos");
    })
    .always(function () {
        console.log("Petición finalizada");
    });

Enviar parámetros en GET

$.get("/api/productos", {
    categoria: "tecnologia",
    pagina: 2
});

jQuery convierte ese objeto en parámetros de consulta de la URL.

Mostrar un indicador de carga

$("#cargando").show();

$.get("/api/usuarios")
    .done(function (usuarios) {
        console.log(usuarios);
    })
    .always(function () {
        $("#cargando").hide();
    });

AJAX no significa backend inexistente

jQuery realiza la petición desde el navegador, pero del otro lado debe existir una API o endpoint que reciba y procese la solicitud.

Ejercicio

Consultá una API pública, mostrá “Cargando…”, listá los resultados y mostrale al usuario un mensaje si ocurre un error.

Errores comunes

  • confundir AJAX con una base de datos;
  • no manejar errores;
  • enviar JSON sin indicar correctamente el tipo de contenido;
  • ignorar problemas de CORS;
  • exponer secretos o credenciales en el frontend.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Formularios y validaciones con jQuery

jQuery y APIs: trabajar con JSON y renderizar datos dinámicos →

Formularios y validaciones con jQuery

Aprendé a leer, validar y procesar formularios con jQuery usando val, submit, prop y mensajes de error.

jQuery puede simplificar la lectura de campos, la validación visual y el procesamiento de formularios.

Leer valores con val()

const nombre = $("#nombre").val();
const email = $("#email").val();

val() devuelve el valor actual de inputs, selects y otros controles de formulario.

Interceptar submit

$("#formulario").on("submit", function (event) {
    event.preventDefault();

    console.log("Validando...");
});

preventDefault() evita el envío tradicional mientras revisamos los datos.

Validar campos vacíos

const nombre = $("#nombre").val().trim();

if (nombre === "") {
    $("#error-nombre").text("El nombre es obligatorio");
}

Agregar clases según el resultado

if (nombre === "") {
    $("#nombre").addClass("campo-error");
} else {
    $("#nombre").removeClass("campo-error");
}

Separar la lógica de validación de los estilos facilita mantener el formulario.

Checkboxes con prop()

const acepta = $("#terminos").prop("checked");

if (!acepta) {
    console.log("Debe aceptar los términos");
}

Selects

const provincia = $("#provincia").val();

if (!provincia) {
    console.log("Seleccione una provincia");
}

Validación completa

$("#formulario").on("submit", function (event) {
    event.preventDefault();

    const nombre = $("#nombre").val().trim();
    const email = $("#email").val().trim();

    let valido = true;

    $(".error").text("");

    if (nombre === "") {
        $("#error-nombre").text("Ingrese su nombre");
        valido = false;
    }

    if (email === "") {
        $("#error-email").text("Ingrese su correo");
        valido = false;
    }

    if (!valido) {
        return;
    }

    console.log("Formulario válido");
});

Validación del navegador y jQuery

Conviene aprovechar atributos HTML como required, type="email" o minlength. jQuery puede complementar esas reglas cuando necesitamos validaciones de negocio o mensajes personalizados.

Importante: validar también en backend

La validación del navegador mejora la experiencia del usuario, pero no reemplaza la validación del servidor cuando los datos se envían a un backend.

Ejercicio

Creá un formulario con nombre, email, provincia y aceptación de términos. Mostrá mensajes debajo de cada campo cuando haya errores.

Errores comunes

  • validar sólo en frontend cuando existe backend;
  • no limpiar mensajes anteriores;
  • olvidar trim();
  • usar attr("checked") en lugar de prop("checked").

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Recorrer elementos con jQuery: each(), index() y trabajo con colecciones

AJAX con jQuery: $.ajax(), $.get() y $.post() paso a paso →

Recorrer elementos con jQuery: each(), index() y trabajo con colecciones

Aprendé a recorrer colecciones en jQuery con each(), obtener índices y trabajar con múltiples elementos seleccionados.

Cuando un selector encuentra varios elementos, jQuery los trata como una colección. Podemos aplicar métodos a toda la colección o recorrer cada elemento individualmente.

each()

each() ejecuta una función una vez por cada elemento seleccionado.

$(".item").each(function () {
    console.log($(this).text());
});

Dentro de una función tradicional, this representa el elemento actual. Lo envolvemos con $(this) para usar métodos jQuery.

Índice y elemento

$(".item").each(function (indice, elemento) {
    console.log(indice);
    console.log(elemento);
});

El primer argumento es el índice y el segundo es el elemento DOM nativo.

Modificar cada elemento

$(".item").each(function (indice) {
    $(this).text("Elemento " + (indice + 1));
});

index()

index() permite conocer la posición de un elemento dentro de una colección.

$(".item").on("click", function () {
    const posicion = $(".item").index(this);

    console.log(posicion);
});

Aplicar un método a toda la selección

No siempre necesitamos each(). Muchos métodos jQuery se aplican directamente a todos los elementos seleccionados.

$(".item").addClass("activo");

En este caso, jQuery agrega la clase a todos los elementos sin necesidad de recorrerlos manualmente.

Cuándo usar each()

Conviene usarlo cuando cada elemento necesita una lógica distinta, cuando debemos leer datos individuales o cuando necesitamos el índice.

Ejercicio

Creá cinco tarjetas. Recorrelas con each(), numeralas y agregá una clase diferente a las posiciones pares.

Errores comunes

  • usar each() cuando un método jQuery ya trabaja con toda la colección;
  • usar una arrow function cuando necesitamos this;
  • confundir el elemento DOM con el objeto jQuery;
  • olvidar que los índices comienzan en 0.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Efectos y animaciones en jQuery: show, hide, fade y slide

Formularios y validaciones con jQuery →

Efectos y animaciones en jQuery: show, hide, fade y slide

Aprendé efectos en jQuery con show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown y animate.

jQuery incluye efectos visuales simples que permiten mostrar, ocultar o animar elementos sin escribir manualmente toda la lógica CSS.

show() y hide()

show() muestra un elemento oculto y hide() lo oculta.

$("#panel").hide();
$("#panel").show();

toggle()

toggle() alterna entre visible y oculto.

$("#boton").on("click", function () {
    $("#panel").toggle();
});

fadeIn() y fadeOut()

Realizan una transición modificando gradualmente la opacidad.

$("#mensaje").fadeIn();
$("#mensaje").fadeOut();

fadeToggle()

$("#mensaje").fadeToggle();

Alterna automáticamente entre aparecer y desaparecer.

slideUp() y slideDown()

Ocultan o muestran un elemento mediante un movimiento vertical.

$("#detalle").slideUp();
$("#detalle").slideDown();

slideToggle()

$("#titulo").on("click", function () {
    $("#contenido").slideToggle();
});

Este patrón fue muy utilizado para acordeones y paneles desplegables.

Duración

Podemos indicar la duración en milisegundos.

$("#panel").fadeOut(500);

Callback al finalizar

Muchos efectos permiten ejecutar una función cuando terminan.

$("#panel").fadeOut(400, function () {
    console.log("Animación terminada");
});

animate()

animate() permite interpolar algunas propiedades CSS numéricas.

$("#caja").animate({
    width: "300px",
    opacity: 0.5
}, 600);

¿Conviene usar estos efectos hoy?

Son útiles en proyectos jQuery existentes y para interacciones simples. En proyectos modernos muchas animaciones se resuelven mejor con CSS mediante transition y animation.

Ejercicio

Creá una sección de preguntas frecuentes donde cada respuesta aparezca y desaparezca usando slideToggle().

Errores comunes

  • abusar de animaciones;
  • encadenar efectos demasiado largos;
  • animar propiedades que CSS resuelve mejor;
  • no considerar accesibilidad y usuarios sensibles al movimiento.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Eventos en jQuery: click, change, submit, keyup y on()

Recorrer elementos con jQuery: each(), index() y trabajo con colecciones →

Eventos en jQuery: click, change, submit, keyup y on()

Aprendé a trabajar con eventos en jQuery usando on, click, change, submit, keyup y delegación de eventos.

Los eventos permiten ejecutar código cuando el usuario interactúa con la página.

on()

on() es el método general para registrar eventos en jQuery.

$("#boton").on("click", function () {
    console.log("Clic");
});

this dentro del evento

Dentro de una función tradicional, this hace referencia al elemento que disparó el evento. Para usar métodos jQuery lo envolvemos con $(this).

$(".boton").on("click", function () {
    $(this).addClass("activo");
});

change

change es útil para detectar cambios confirmados en inputs, selects o checkboxes.

$("#provincia").on("change", function () {
    console.log($(this).val());
});

keyup

keyup se dispara cuando el usuario libera una tecla. Puede usarse para búsquedas simples o respuestas mientras escribe.

$("#buscar").on("keyup", function () {
    console.log($(this).val());
});

submit

El evento submit pertenece al formulario y nos permite interceptar su envío.

$("#formulario").on("submit", function (event) {
    event.preventDefault();

    console.log("Formulario procesado");
});

preventDefault()

Evita la acción por defecto del navegador. En un formulario impide el envío tradicional mientras validamos o enviamos datos con JavaScript.

Delegación de eventos

Si los elementos se crean dinámicamente, conviene escuchar el evento en un contenedor existente.

$("#lista").on("click", ".eliminar", function () {
    $(this).closest("li").remove();
});

El listener está en #lista, pero sólo actúa cuando el clic proviene de un elemento .eliminar.

off()

off() elimina listeners registrados previamente. Puede ser útil para evitar eventos duplicados.

$("#boton").off("click");

Ejercicio

Creá una lista dinámica. Permití agregar elementos desde un formulario y eliminarlos mediante delegación de eventos.

Errores comunes

  • usar funciones flecha cuando necesitamos this del elemento;
  • registrar eventos varias veces sin querer;
  • escuchar el evento sobre el elemento equivocado;
  • olvidar preventDefault() en formularios procesados con JavaScript.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Modificar HTML, texto, atributos y clases con jQuery

Efectos y animaciones en jQuery: show, hide, fade y slide →

Modificar HTML, texto, atributos y clases con jQuery

Aprendé a modificar contenido, atributos, clases y estilos con text, html, attr, prop, addClass y css en jQuery.

Después de seleccionar elementos, jQuery ofrece métodos simples para leer o modificar su contenido y apariencia.

text()

text() trabaja con texto plano. No interpreta etiquetas HTML.

$("#mensaje").text("Hola");

También puede leer el valor actual:

const texto = $("#mensaje").text();

html()

html() permite leer o reemplazar el HTML interno de un elemento.

$("#contenedor").html("<strong>Importante</strong>");

No conviene insertar contenido no confiable porque podría introducir código HTML peligroso.

val()

val() obtiene o modifica el valor de campos de formulario.

const nombre = $("#nombre").val();

$("#nombre").val("Ana");

attr()

attr() lee o cambia atributos HTML.

const url = $("a").attr("href");

$("a").attr("title", "Ir al sitio");

prop()

prop() suele usarse para propiedades booleanas de controles, por ejemplo checked o disabled.

$("#acepto").prop("checked", true);

const marcado = $("#acepto").prop("checked");

Clases CSS

$("#panel").addClass("activo");
$("#panel").removeClass("oculto");
$("#panel").toggleClass("destacado");

addClass() agrega, removeClass() elimina y toggleClass() alterna una clase.

hasClass()

Permite comprobar si un elemento tiene una clase determinada.

if ($("#panel").hasClass("activo")) {
    console.log("El panel está activo");
}

css()

css() permite modificar estilos directamente, aunque para cambios complejos suele ser mejor alternar clases CSS.

$("#mensaje").css("color", "red");

append() y prepend()

append() agrega contenido al final y prepend() al principio.

$("#lista").append("<li>Nuevo</li>");
$("#lista").prepend("<li>Primero</li>");

remove()

remove() elimina el elemento seleccionado del DOM.

$(".mensaje-error").remove();

Ejercicio

Creá una tarjeta con título, texto y botón. Al hacer clic, modificá el texto, agregá una clase y cambiá un atributo.

Errores comunes

  • usar html() cuando sólo necesitamos texto;
  • usar attr() para propiedades booleanas que funcionan mejor con prop();
  • aplicar muchos estilos inline en lugar de clases;
  • olvidar que val() se usa principalmente con formularios.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Selectores en jQuery: buscar y recorrer elementos del DOM

Eventos en jQuery: click, change, submit, keyup y on() →