domingo, 28 de junio de 2026

Mostrar los n primeros números de la siguiente serie: 0,5,10,15,20,25,30,35,40,... en HTML y JavaScript

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 los n primeros números de 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, c = 1;
            while(c <= n){
                t.push(n1);
                n1 += 5;
                c++;
            }
            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.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
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:

1. Estructura HTML

El formulario permite al usuario ingresar la cantidad de números que desea mostrar de la serie.

  • Label: Indica que se debe ingresar un número.
  • Input type="number": Permite escribir la cantidad de términos.
  • Botón Mostrar: Ejecuta la función mostrar().
  • Botón Limpiar: Borra los datos del formulario.
  • Textarea: Muestra la serie generada.

2. Función mostrar()

Esta función se ejecuta cuando el usuario hace clic en el botón Mostrar. Su trabajo es generar los primeros números de la serie que aumenta de cinco en cinco.

3. Obtener el número ingresado

let n = parseInt(document.getElementById('numero').value);

Se obtiene el valor escrito por el usuario y se convierte a un número entero mediante parseInt().

Si el usuario escribe 6, el programa generará los primeros seis números de la serie.

4. Declaración de variables

let t = [], n1 = 0, c = 1;
Variable Función
t Arreglo donde se almacenan los números de la serie.
n1 Guarda el número actual de la serie. Inicia en 0.
c Contador que controla cuántos números se generan.

5. Ciclo while

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

El ciclo se ejecuta hasta completar la cantidad de números indicada por el usuario.

  1. Guarda el número actual en el arreglo.
  2. Suma 5 para obtener el siguiente número.
  3. Aumenta el contador.
  4. Repite el proceso.
Iteración Número guardado Siguiente valor
1 0 5
2 5 10
3 10 15
4 15 20

6. Mostrar el resultado

document.getElementById('resultado').value = t;

Cuando termina el ciclo, el arreglo contiene todos los números de la serie y se muestran dentro del textarea.

Ejemplo:
Si el usuario escribe 8, el resultado será:

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

Resumen

  1. El usuario ingresa un número.
  2. Se lee el valor ingresado.
  3. La serie comienza en 0.
  4. Se guarda cada número en un arreglo.
  5. Después de cada número se suma 5.
  6. El proceso se repite hasta completar la cantidad solicitada.
  7. Finalmente la serie se muestra en el área de resultados.

No hay comentarios.:

Publicar un comentario

Calcular el radio de un círculo en HTML y JavaScript

Código del ejercicio: <! DOCTYPE html > < html lang = "es" > < head >     < meta charset = ...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️