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>Generar la siguiente serie 1,1,1,2,2,2,3,3,3,4,4,4,...</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 = 1, sw = 1, stop = 3;
            while(a <= n){
                t.push(a);
                if(sw < stop){
                    sw++;
                }else{
                    a++;
                    sw = 1;
                }
            }
            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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
.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 menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
++ --> 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 un número al usuario y genera una serie donde cada número se repite tres veces consecutivas. Por ejemplo, si el usuario ingresa el número 4, el programa mostrará:

1,1,1,2,2,2,3,3,3,4,4,4

Explicación del HTML

<form>
Agrupa todos los elementos del formulario, como las cajas de texto, botones y el área donde se mostrará el resultado.
<input type="number">
Permite que el usuario escriba el número hasta donde desea generar la serie.
<input type="button">
Al hacer clic en el botón Mostrar, se ejecuta la función mostrar().
<input type="reset">
Limpia el formulario y elimina los datos ingresados.
<textarea>
Muestra la serie generada por el programa.

Explicación del JavaScript

1. Crear la función

function mostrar(){ }

Se crea la función mostrar(), que contiene todo el algoritmo encargado de generar la serie.

2. Leer el número ingresado

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

Obtiene el número escrito por el usuario y lo convierte en un número entero para poder realizar las comparaciones.

3. Declarar las variables

let t = [], a = 1, sw = 1, stop = 3;

t: almacena todos los números de la serie.
a: representa el número que se repetirá.
sw: cuenta cuántas veces se ha repetido el número actual.
stop: indica que cada número debe repetirse tres veces.

4. Iniciar el ciclo while

while(a <= n){

El ciclo continúa ejecutándose mientras el valor de a sea menor o igual al número ingresado por el usuario.

5. Agregar el número al arreglo

t.push(a);

Cada vez que se ejecuta el ciclo, el número actual se agrega al arreglo que almacenará toda la serie.

6. Verificar cuántas veces se repitió el número

if(sw < stop){ sw++; }

Si el número todavía no se ha repetido tres veces, simplemente aumenta el contador sw.

7. Cambiar al siguiente número

else{ a++; sw = 1; }

Cuando el número ya apareció tres veces, el programa incrementa a para comenzar a repetir el siguiente número y reinicia el contador.

8. Mostrar el resultado

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

Finalmente, el arreglo se muestra dentro del textarea. JavaScript convierte automáticamente el arreglo en una lista separada por comas.

Funcionamiento paso a paso

El usuario escribe un número.
El programa comienza con el número 1.
El número se agrega tres veces al arreglo.
Después continúa con el siguiente número.
El proceso se repite hasta llegar al número indicado por el usuario.
Finalmente, la serie completa aparece en el cuadro de resultado.

Ejemplo

Entrada:

Salida:

1,1,1,2,2,2,3,3,3,4,4,4

Conclusión

Este algoritmo utiliza un ciclo while junto con un contador para repetir cada número exactamente tres veces antes de pasar al siguiente. Los valores se almacenan en un arreglo y luego se muestran en el área de texto, generando correctamente la serie solicitada.

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Generar la siguiente serie 1,1,1,2,2,2,3,3,3,4,4,4,... en HTML y JavaScript