tres ejercicios pero con HTML + JavaScript

agosto 10, 2025

Te voy a preparar los mismos tres ejercicios pero con HTML + JavaScript, para que tus alumnos puedan interactuar directamente desde el navegador y ver resultados en pantalla sin usar la consola.

🌟 Versión interactiva para el navegador

Guárdalo como un archivo .html y ábrelo en el navegador.

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicios de Arreglos en JavaScript</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background: #f7f7f7;
        padding: 20px;
    }
    h2 {
        color: #333;
    }
    button {
        padding: 8px 15px;
        margin: 5px 0;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background: #45a049;
    }
    .resultado {
        background: white;
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
</style>
</head>
<body>

<h1>Ejercicios con Arreglos en JavaScript</h1>

<!-- EJERCICIO 1 -->
<h2>1️⃣ Lista de superhéroes favoritos</h2>
<button onclick="mostrarHeroes()">Mostrar Héroes</button>
<div id="heroes" class="resultado"></div>

<!-- EJERCICIO 2 -->
<h2>2️⃣ Puntajes en un videojuego</h2>
<button onclick="mostrarPuntajes()">Mostrar Puntajes</button>
<div id="puntajes" class="resultado"></div>

<!-- EJERCICIO 3 -->
<h2>3️⃣ Animales en peligro</h2>
<button onclick="mostrarAnimales()">Mostrar Animales</button>
<div id="animales" class="resultado"></div>

<script>
// =======================
// EJERCICIO 1
// =======================
let heroes = ["Spider-Man", "Iron Man", "Wonder Woman", "Batman", "Hulk"];

function mostrarHeroes() {
    let texto = "Mis superhéroes favoritos son:<br>" + heroes.join(", ");
    texto += "<br>El primero es: " + heroes[0];
    texto += "<br>El último es: " + heroes[heroes.length - 1];
    document.getElementById("heroes").innerHTML = texto;
}

// =======================
// EJERCICIO 2
// =======================
let puntajes = [150, 200, 300, 250, 400];
puntajes.push(350); // Agregamos uno nuevo

function mostrarPuntajes() {
    let maximo = Math.max(...puntajes);
    let minimo = Math.min(...puntajes);
    let texto = "Puntajes: " + puntajes.join(", ");
    texto += "<br>Puntaje más alto: " + maximo;
    texto += "<br>Puntaje más bajo: " + minimo;
    document.getElementById("puntajes").innerHTML = texto;
}

// =======================
// EJERCICIO 3
// =======================
let animales = ["Tigre de Bengala", "Oso Polar", "Águila Real", "Panda Gigante", "Delfín Rosado"];

function mostrarAnimales() {
    let texto = "Animales en peligro de extinción:<br>";
    for (let i = 0; i < animales.length; i++) {
        texto += (i+1) + ". " + animales[i] + "<br>";
    }
    texto += "<br>Total de animales: " + animales.length;
    document.getElementById("animales").innerHTML = texto;
}
</script>

</body>
</html>

📌 Cómo funciona:

Cada ejercicio tiene un botón que al presionarlo ejecuta una función de JavaScript.
Los resultados se muestran en un div (resultado) dentro de la misma página.
Incluí .join() para mostrar los arreglos como texto y for para recorrerlos.
Usamos .length para contar elementos, .push() para agregar datos y Math.max() / Math.min() para encontrar valores extremos.

Si quieres, puedo mejorarlo para que los alumnos puedan escribir datos nuevos (por ejemplo: agregar su superhéroe o animal favorito) y que se actualice automáticamente la lista.
Así se vuelve más interactivo y divertido para ellos.

¿Quieres que te lo haga así también?

Buscar este blog

SOTELO-javascript