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úmeros múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,...</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 = [], a = 7, c = 1;
            while(c <= n){
                if(a % 7 == 0){
                    t.push(a);
                    c++;
                }
                a++;
            }
            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 modulo ( % ) devuelve el resto de la división.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
++ --> 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:

Este programa solicita al usuario un número n. Luego calcula y muestra los n primeros múltiplos de 7. Por ejemplo, si el usuario escribe 5, el programa mostrará:

7, 14, 21, 28, 35

1. Estructura principal del documento

Código	Explicación
`<!DOCTYPE html>`	Indica que el documento está escrito en HTML5.
`<html>`	Es el elemento principal donde se encuentra todo el contenido de la página.
`<head>`	Contiene información del documento, como el título y la configuración de caracteres.
`<body>`	Contiene todos los elementos que verá el usuario en la página web.

2. Título del ejercicio

Código	Explicación
`<h3>`	Muestra el título que explica el objetivo del programa.

El usuario entiende que el programa mostrará los primeros múltiplos de 7.

3. Formulario

Código	Función
`<form>`	Agrupa todos los controles del formulario.
`<label>`	Muestra el texto "Número".
`<input type="number">`	Permite ingresar la cantidad de múltiplos que se desea mostrar.
`<input type="button">`	Ejecuta la función `mostrar()`.
`<input type="reset">`	Limpia el formulario.
`<textarea>`	Presenta el resultado generado por el programa.

4. Función mostrar()

Toda la lógica del programa se encuentra dentro de esta función.

Código	Explicación
`let n = parseInt(document.getElementById('numero').value);`	Obtiene el número ingresado por el usuario y lo convierte en un número entero.
`let t = [];`	Crea un arreglo vacío donde se almacenarán los múltiplos encontrados.
`let a = 7;`	La búsqueda comienza desde el número 7.
`let c = 1;`	Es un contador que indica cuántos múltiplos ya fueron encontrados.

5. Ciclo while

Código	Explicación
`while(c <= n)`	El ciclo continúa hasta encontrar la cantidad de múltiplos solicitados por el usuario.
`if(a % 7 == 0)`	Comprueba si el número actual es múltiplo de 7 usando el operador módulo (%).
`t.push(a);`	Guarda el múltiplo encontrado dentro del arreglo.
`c++;`	Aumenta el contador porque ya se encontró un nuevo múltiplo.
`a++;`	Pasa al siguiente número para seguir buscando.

6. Mostrar el resultado

Código	Explicación
`document.getElementById('resultado').value = t;`	Muestra todos los múltiplos almacenados en el área de texto.

7. Funcionamiento paso a paso

Si el usuario escribe el número 5, el programa realiza las siguientes acciones:

Paso	Resultado
1	Lee el número 5.
2	Empieza desde el número 7.
3	Verifica si cada número es múltiplo de 7.
4	Guarda: 7, 14, 21, 28 y 35.
5	Cuando encuentra los 5 múltiplos, termina el ciclo.
6	Los muestra en el área de resultados.

8. Resumen

Este programa utiliza un ciclo while para recorrer números consecutivos a partir del 7. Cada número se verifica con el operador %. Cuando el residuo de dividir entre 7 es igual a 0, significa que el número es múltiplo de 7 y se guarda en un arreglo. El proceso continúa hasta obtener la cantidad de múltiplos solicitada y finalmente todos ellos se muestran en el cuadro de resultados.

Ejercicios de programación

Páginas

lunes, 29 de junio de 2026

Mostrar los n primeros números múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... en HTML y JavaScript