lunes, 29 de junio de 2026

Mostrar los números de N número hasta 1 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úmeros de N número hasta 1</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 = [];
            while(n > 0){
                t.push(n); 
                n--;
            }
            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.
for --> el ciclo for recorre un bloque de código varias veces.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
-- --> el operador de decremento (--) disminuye (o resta de a uno) su operando y retorna 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 entero positivo. Después, utilizando JavaScript, muestra todos los números desde ese valor hasta llegar a 1. Por ejemplo, si el usuario escribe 5, el resultado será: 5,4,3,2,1.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5. Esto permite que el navegador interprete correctamente la página.

2. Etiqueta HTML

<html lang="es">

Es la etiqueta principal del documento. El atributo lang="es" indica que el contenido está en español.

3. Sección <head>

<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>

Función de cada línea:

  • meta charset="UTF-8": permite escribir correctamente letras, tildes y símbolos.
  • meta http-equiv="X-UA-Compatible": mejora la compatibilidad con algunos navegadores.
  • meta viewport: hace que la página sea adaptable a celulares y tablets.
  • title: establece el título que aparece en la pestaña del navegador.

4. Título del ejercicio

<h3>Mostrar los números de N número hasta 1</h3>

Muestra el nombre del ejercicio en la página.

5. Formulario

<form>
...
</form>

Contiene todos los controles que utilizará el usuario para ingresar el número y visualizar el resultado.

6. Etiqueta del número

<label>número:</label>

Muestra el texto que indica qué dato debe ingresar el usuario.

7. Caja de entrada

<input type="number" id="numero">

Permite escribir únicamente números. El identificador id="numero" sirve para que JavaScript pueda obtener el valor ingresado.

8. Botón Mostrar

<input type="button"
value="Mostrar"
onclick="mostrar()">

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

9. Botón Limpiar

<input type="reset" value="Limpiar">

Borra los datos escritos en el formulario y permite comenzar nuevamente.

10. Área de resultado

<textarea id="resultado"></textarea>

Aquí se muestran los números generados por el programa.

11. Inicio del código JavaScript

<script>

</script>

Dentro de esta sección se escribe el código que realiza el funcionamiento del programa.

12. Función mostrar()

function mostrar(){

}

Esta función se ejecuta cuando el usuario presiona el botón Mostrar.

13. Obtener el número ingresado

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

Explicación:

  • document.getElementById('numero'): busca la caja de texto.
  • .value: obtiene el número escrito por el usuario.
  • parseInt(): convierte el dato en un número entero.
  • let n: guarda el número para trabajar con él.

14. Crear un arreglo vacío

let t = [];

Se crea un arreglo donde se irán almacenando todos los números desde N hasta 1.

15. Ciclo while

while(n > 0){
    t.push(n);
    n--;
}

¿Cómo funciona?

  • Mientras n sea mayor que cero, el ciclo continúa.
  • t.push(n) guarda el número dentro del arreglo.
  • n-- disminuye el valor de n en una unidad.

Ejemplo:

Si el usuario escribe 5, el ciclo realiza lo siguiente:

Valor de n Se guarda
5 5
4 4
3 3
2 2
1 1

Al finalizar el ciclo, el arreglo contiene: 

[5,4,3,2,1]

16. Mostrar el resultado

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

Busca el área de texto con el identificador resultado y muestra todos los números almacenados en el arreglo.

Resultado final

Si el usuario escribe: 

7

El programa mostrará: 

7,6,5,4,3,2,1

Resumen del funcionamiento

  1. El usuario escribe un número.
  2. JavaScript obtiene ese número.
  3. Se crea un arreglo vacío.
  4. El ciclo while guarda los números desde N hasta 1.
  5. Los números almacenados se muestran en el área de resultado.

Código del ejercicio: Otra forma de hacer

<!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 de N número hasta 1</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 = [];
            for (let i = 0; n > i; n--) {
                t.push(n);
            }
            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.
for --> el ciclo for recorre un bloque de código varias veces.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
-- --> el operador de decremento (--) disminuye (o resta de a uno) su operando y retorna 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 entero. Después, mediante un ciclo for, muestra todos los números desde el valor ingresado hasta llegar al número 1. Para realizar este ejercicio se utiliza HTML para crear la interfaz y JavaScript para realizar el proceso.

Objetivo del ejercicio:
Ingresar un número y mostrar una secuencia descendente desde ese número hasta llegar al 1.

1. Declaración del tipo de documento 

<!DOCTYPE html>

Esta línea indica al navegador que el documento está escrito utilizando la versión HTML5.

Código Función
<!DOCTYPE html> Indica que el documento utiliza HTML5.

2. Etiqueta HTML 

<html lang="es">

Es la etiqueta principal del documento. El atributo lang="es" indica que el contenido está escrito en español.

Parte Descripción
html Contiene toda la página web.
lang="es" Indica que el idioma del documento es español.

3. La sección <head> 

<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>

La etiqueta head contiene información del documento que no se muestra directamente al usuario.

Código Explicación sencilla
meta charset="UTF-8" Permite mostrar correctamente letras, tildes, ñ y símbolos.
meta http-equiv="X-UA-Compatible" Hace que Internet Explorer utilice su versión más reciente.
meta viewport Hace que la página sea adaptable a celulares y tabletas.
title Es el texto que aparece en la pestaña del navegador.

4. La etiqueta <body> 

<body>

...

</body>

Dentro de la etiqueta body se encuentra todo el contenido visible de la página web.

Etiqueta Función
body Contiene todo lo que el usuario puede ver en la página.

5. Título del ejercicio 

<h3>

Mostrar los números de N número hasta 1

</h3>

La etiqueta h3 muestra el título del ejercicio para que el usuario sepa cuál es el propósito del programa.

Etiqueta Función
h3 Muestra el título del ejercicio.

6. Formulario 

<form>

...

</form>

El formulario agrupa todos los controles que utilizará el usuario, como la caja de texto, los botones y el área donde aparecerá el resultado.

Etiqueta Función
form Agrupa todos los elementos del formulario.

7. Etiqueta label 

<label>

Número:

</label>

La etiqueta label muestra un texto descriptivo para indicar al usuario qué dato debe escribir.

Etiqueta Función
label Muestra un texto descriptivo junto al campo de entrada.

8. Caja para ingresar el número 

<input type="number" id="numero">

Esta caja permite ingresar únicamente números. Además, tiene un identificador llamado numero, el cual será utilizado por JavaScript para obtener el dato escrito por el usuario.

Parte Explicación
input Crea un campo de entrada.
type="number" Permite escribir solamente números.
id="numero" Identificador utilizado por JavaScript.

9. Botón Mostrar 

<input type="button" value="Mostrar" onclick="mostrar()">

Este botón ejecuta el programa cuando el usuario hace clic sobre él. Al presionarlo, se llama a la función mostrar(), que es la encargada de realizar todo el proceso.

Parte Explicación
input Crea un botón.
type="button" Indica que el elemento es un botón.
value="Mostrar" Es el texto que aparece dentro del botón.
onclick="mostrar()" Ejecuta la función mostrar() cuando el usuario hace clic.

10. Botón Limpiar 

<input type="reset" value="Limpiar">

Este botón elimina el contenido escrito en el formulario y deja todos los controles con sus valores iniciales.

Parte Explicación
type="reset" Limpia el formulario automáticamente.
value="Limpiar" Texto que aparece en el botón.

11. Área de resultado 

<textarea id="resultado" cols="30" rows="10"></textarea>

El área de texto sirve para mostrar los números generados por el programa. JavaScript escribe el resultado dentro de este elemento.

Parte Explicación
textarea Permite mostrar varias líneas de texto.
id="resultado" Identificador utilizado por JavaScript.
cols="30" Ancho aproximado del área de texto.
rows="10" Cantidad aproximada de filas visibles.

12. Inicio del código JavaScript 

<script>

...

</script>

Todo el código JavaScript se escribe entre las etiquetas <script> y </script>. Allí se encuentran las instrucciones que hacen funcionar el programa.

13. Declaración de la función 

function mostrar(){

}

Se crea una función llamada mostrar(). Una función es un conjunto de instrucciones que se ejecutan cuando son llamadas.

En este programa, la función mostrar() se ejecuta cuando el usuario hace clic en el botón Mostrar.

14. Obtener el número ingresado 

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

Esta línea obtiene el número que el usuario escribió en la caja de texto y lo guarda en la variable n.

Explicación paso a paso

Parte Función
let Declara una variable.
n Variable donde se almacenará el número.
document Representa toda la página web.
getElementById() Busca un elemento utilizando su identificador.
'numero' Es el id de la caja donde el usuario escribe el número.
.value Obtiene el valor escrito por el usuario.
parseInt() Convierte el texto en un número entero.

15. Crear un arreglo vacío 

let t = [];

Se crea un arreglo vacío llamado t. En este arreglo se irán almacenando todos los números desde N hasta 1.

Parte Explicación
let Declara una variable.
t Nombre del arreglo.
[] Indica que el arreglo inicia vacío.

16. El ciclo for 

for (let i = 0; n > i; n--) {

    t.push(n);

}

El ciclo for repite un conjunto de instrucciones varias veces.

En este ejercicio, el ciclo comienza con el número ingresado por el usuario y continúa disminuyendo ese número hasta llegar a 1.

Parte Explicación
let i = 0 Se crea una variable de control llamada i.
n > i Mientras esta condición sea verdadera, el ciclo continúa.
n-- En cada repetición, el valor de n disminuye en uno.
Si el usuario escribe: 
5
El ciclo realizará las siguientes repeticiones: 

Primera vuelta  → 5
Segunda vuelta  → 4
Tercera vuelta  → 3
Cuarta vuelta   → 2
Quinta vuelta   → 1

17. Agregar los números al arreglo 

t.push(n);

El método push() agrega un nuevo elemento al final de un arreglo. En este programa, en cada repetición del ciclo for, el valor actual de la variable n se almacena dentro del arreglo t.

Parte Explicación
t Es el arreglo donde se guardan los números.
push() Agrega un elemento al final del arreglo.
n Es el número que se almacena en cada repetición.

Ejemplo

Si el usuario escribe el número 5, el arreglo se llenará de la siguiente manera: 


Inicio

t = []

Primera vuelta

t = [5]

Segunda vuelta

t = [5,4]

Tercera vuelta

t = [5,4,3]

Cuarta vuelta

t = [5,4,3,2]

Quinta vuelta

t = [5,4,3,2,1]

18. Mostrar el resultado 

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

Después de terminar el ciclo, el contenido del arreglo se muestra dentro del textarea para que el usuario pueda visualizar el resultado.

Parte Función
document Representa toda la página web.
getElementById() Busca un elemento mediante su identificador.
'resultado' Es el id del área de texto.
.value Coloca el contenido dentro del textarea.
= t Muestra todos los números almacenados en el arreglo.
El arreglo se mostrará separado por comas porque JavaScript convierte automáticamente el arreglo en una cadena de texto. 

5,4,3,2,1

19. Funcionamiento paso a paso

  1. El usuario escribe un número en la caja de texto.
  2. Hace clic en el botón Mostrar.
  3. Se ejecuta la función mostrar().
  4. JavaScript obtiene el número ingresado.
  5. Se crea un arreglo vacío llamado t.
  6. El ciclo for comienza con el número ingresado.
  7. En cada repetición se guarda el número dentro del arreglo.
  8. El valor de n disminuye en uno mediante n--.
  9. El proceso continúa hasta que el número llega a 1.
  10. Finalmente, el contenido del arreglo se muestra en el área de resultado.

20. Diagrama del proceso 


                Inicio
                   │
                   │
                   ▼
      El usuario ingresa un número
                   │
                   ▼
        Se ejecuta mostrar()
                   │
                   ▼
      Obtener el valor del input
                   │
                   ▼
       Crear el arreglo vacío t
                   │
                   ▼
      ¿n es mayor que 0?
            │            │
           Sí           No
            │            │
            ▼            ▼
   Guardar n en el     Mostrar
       arreglo t      el resultado
            │
            ▼
      Disminuir n (n--)
            │
            └───────────────┐
                            │
                            ▼
                   Repetir el ciclo

21. Ejemplo de ejecución

Supongamos que el usuario escribe: 


8

El programa realizará el siguiente proceso: 


8

7

6

5

4

3

2

1

Finalmente, el contenido del arreglo será: 


[8,7,6,5,4,3,2,1]

Y el resultado mostrado en el textarea será: 


8,7,6,5,4,3,2,1

22. Resumen del programa

Este ejercicio combina HTML y JavaScript para mostrar una secuencia descendente de números.

HTML se encarga de crear la interfaz donde el usuario escribe el número, mientras que JavaScript obtiene ese valor, utiliza un ciclo for para contar hacia atrás y almacena cada número en un arreglo mediante el método push().

Finalmente, todos los números almacenados se muestran en el textarea, permitiendo al usuario visualizar la secuencia desde el número ingresado hasta el número 1.

Resultado esperado:

Si el usuario ingresa 10, el programa mostrará: 

10,9,8,7,6,5,4,3,2,1
a la/s
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)

Ingresar dos números y determinar si el primer número ingresado es mayor o menor 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. ❤️