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>Diseñar un algoritmo que cuente de 1 a N número</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 = [], c = 1;
            while(c <= n){
                t.push(c);
                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 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 muestra todos los números desde 1 hasta el número ingresado (N). Para lograrlo utiliza HTML para crear la interfaz y JavaScript para realizar el conteo.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

<html lang="es">

Define el inicio del documento y especifica que el idioma es español.

2. Sección <head>

<meta charset="UTF-8">

Permite utilizar caracteres especiales como la ñ y las vocales con tilde.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Hace que el navegador utilice la versión más moderna disponible.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hace que la página sea adaptable a celulares, tabletas y computadoras.

<title>Ejercicio HTML y JavaScript</title>

Define el título que aparece en la pestaña del navegador.

3. Título del ejercicio

<h3>Diseñar un algoritmo que cuente de 1 a N número</h3>

Muestra el nombre del ejercicio en la página.

4. Formulario

<form>

Contiene todos los controles que utilizará el usuario.

Una etiqueta para indicar que se debe ingresar un número.
Una caja de texto de tipo number para escribir el valor.
Un botón Mostrar que ejecuta la función mostrar().
Un botón Limpiar que borra los datos del formulario.
Un área de texto donde se mostrará el resultado.

5. Función mostrar()

function mostrar(){

Crea una función llamada mostrar, la cual se ejecuta cuando el usuario hace clic en el botón Mostrar.

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

Obtiene el número escrito por el usuario y lo convierte a un número entero mediante parseInt().

let t = [], c = 1;

Se crean dos variables:

t: un arreglo vacío donde se guardarán los números.
c: un contador que inicia en 1.

while(c <= n){

El ciclo while se repite mientras el contador sea menor o igual al número ingresado.

t.push(c);

Guarda el valor actual del contador dentro del arreglo.

c++;

Incrementa el contador en una unidad para continuar con el siguiente número.

}

Finaliza el ciclo cuando el contador supera el valor de N.

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

Muestra todos los números almacenados en el arreglo dentro del área de texto.

}

Finaliza la función.

6. Funcionamiento del algoritmo

El usuario escribe un número.
Al presionar Mostrar, se ejecuta la función mostrar().
Se lee el número ingresado.
El contador comienza en 1.
El ciclo while agrega cada número al arreglo.
El contador aumenta de uno en uno hasta llegar al número ingresado.
Finalmente, todos los números se muestran en el área de texto.

Ejemplo de ejecución

Entrada: 5

Proceso:

1 → 2 → 3 → 4 → 5

Salida:

1,2,3,4,5

Resumen

Este programa utiliza un ciclo while para contar desde 1 hasta un número N ingresado por el usuario. Cada número se guarda en un arreglo mediante push() y, al finalizar el ciclo, el contenido del arreglo se muestra dentro del textarea.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

Diseñar un algoritmo que cuente de 1 a N número en HTML y JavaScript