Código del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio HTML y JavaScript</title>
</head>
<body>
    <h3>Mostrar la siguiente serie: 0,5,10,15,20,25,30,35,40,...</h3>
    <form action="">
        <label for="">número:</label>
        <input type="number" id="numero"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label><br>
        <textarea name="" id="resultado" cols="30" rows="10"></textarea>
    </form>
    <script>
        function mostrar(){
            let n = parseInt(document.getElementById('numero').value);
            let t = [], n1 = 0;
            while(n1 <= n){
                t.push(n1);
                n1 += 5;
            }
            document.getElementById('resultado').value = t;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
+= --> el operador de asignación de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicación del Código:

Este programa solicita al usuario un número y genera una serie de números que comienza en 0 y aumenta de 5 en 5 hasta llegar al número ingresado o al múltiplo más cercano menor que él.

1. Estructura del documento HTML

<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

Esta parte crea la estructura básica de la página web.

<!DOCTYPE html> indica que el documento utiliza HTML5.
<html> contiene todo el contenido de la página.
<head> guarda la configuración de la página.
<body> contiene todo lo que verá el usuario.

2. Título del ejercicio

<h3>Mostrar la siguiente serie: 0,5,10,15,20,25...</h3>

Muestra el nombre del ejercicio para indicar qué realizará el programa.

3. Entrada del número

Permite que el usuario escriba un número entero que servirá como límite para generar la serie.

4. Botón Mostrar

Cuando el usuario hace clic en este botón, se ejecuta la función mostrar().

5. Botón Limpiar

Borra el número ingresado y el resultado mostrado en el formulario.

6. Área de resultados

Aquí se muestran todos los números de la serie generada.

7. Función mostrar()

function mostrar(){

  let n = parseInt(document.getElementById("numero").value);
  let t = [], n1 = 0;

  while(n1 <= n){
    t.push(n1);
    n1 += 5;
  }

  document.getElementById("resultado").value = t;
}

Explicación de cada línea del JavaScript

let n = parseInt(document.getElementById("numero").value);
Obtiene el número que escribió el usuario y lo convierte en un número entero.
let t = [];
Crea un arreglo vacío donde se guardarán todos los números de la serie.
let n1 = 0;
Inicializa la variable con el valor 0, que será el primer número de la serie.
while(n1 <= n)
Mientras el valor de n1 sea menor o igual al número ingresado, el ciclo continuará ejecutándose.
t.push(n1);
Agrega el número actual al arreglo.
n1 += 5;
Incrementa el valor de la variable en 5 unidades para obtener el siguiente múltiplo de cinco.
document.getElementById("resultado").value = t;
Muestra todos los números almacenados en el arreglo dentro del área de resultados.

Resumen del funcionamiento

El programa realiza los siguientes pasos:

El usuario escribe un número.
La función comienza la serie desde 0.
Un ciclo while aumenta el valor de cinco en cinco.
Cada número se guarda dentro de un arreglo.
Cuando se alcanza el límite indicado por el usuario, la serie completa se muestra en el cuadro de resultados.

Ejemplo:

Si el usuario escribe 40, el resultado será:

0, 5, 10, 15, 20, 25, 30, 35, 40

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Mostrar la siguiente serie: 0,5,10,15,20,25,30,35,40,... en HTML y JavaScript