lunes, 22 de junio de 2026

Mostrar los números del 1 al 10 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 del 1 al 10</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 = 1;
            while(n1 <= n){
                t.push(n1); 
                n1++;
            }
            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 menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
++ --> 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 permite ingresar un número y mostrar todos los números desde 1 hasta el número escrito por el usuario utilizando HTML y JavaScript.

1. Declaración del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

2. Etiqueta HTML

<html lang="es">

Contiene todo el contenido de la página e indica que el idioma es español.

3. Sección <head>

<meta charset="UTF-8">

Permite escribir correctamente letras como ñ, tildes y otros caracteres especiales.

<meta name="viewport">

Hace que la página se adapte correctamente a celulares, tablets y computadoras.

<title>

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

4. Título del ejercicio

<h3>Mostrar los números del 1 al 10</h3>

Muestra el nombre del ejercicio en la página.

5. Formulario

<form>

Agrupa todos los controles del formulario.

6. Etiqueta y caja de texto

<label>Número:</label>

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

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

Permite ingresar únicamente números.

El atributo id="numero" sirve para que JavaScript pueda obtener el valor escrito.

7. Botón Mostrar

<input type="button">

Crea el botón Mostrar.

onclick="mostrar()"

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

8. Botón Limpiar

<input type="reset">

Borra los datos ingresados en el formulario.

9. Área de resultado

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

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

10. Inicio de JavaScript

<script>

Contiene el código JavaScript que realiza el funcionamiento del programa.

11. Función mostrar()

function mostrar(){ }

Es la función que se ejecuta cuando se presiona el botón Mostrar.

12. Obtener el número ingresado

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

Obtiene el número escrito por el usuario y lo convierte a un número entero.

  • document.getElementById(): busca el control por su id.
  • .value: obtiene el valor escrito.
  • parseInt(): convierte el texto en un número entero.

13. Crear las variables

let t = [], n1 = 1;

  • t = []: crea un arreglo vacío donde se guardarán los números.
  • n1 = 1: inicia el contador en el número 1.

14. Ciclo while

while(n1 <= n)

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

Si el usuario escribe 10, el ciclo mostrará los números del 1 al 10.

15. Guardar los números

t.push(n1);

Agrega el número actual al arreglo.

Por ejemplo:

1 → 2 → 3 → 4 → ... → 10

16. Incrementar el contador

n1++;

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

17. Mostrar el resultado

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

Coloca todos los números almacenados en el área de texto para que el usuario pueda verlos.

18. Funcionamiento general

  1. El usuario escribe un número.
  2. Hace clic en Mostrar.
  3. JavaScript inicia un contador en 1.
  4. El ciclo while va aumentando el contador hasta llegar al número ingresado.
  5. Cada número se guarda en un arreglo.
  6. Finalmente, todos los números se muestran en el cuadro de resultado.

19. Ejemplo

Entrada: 10

Salida:

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

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 del 1 al 10</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 n1 = 1; n1 <= n; n1++) {
                t.push(n1);
            }
            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 menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
++ --> 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 permite ingresar un número y muestra todos los números desde el 1 hasta el número ingresado utilizando HTML para la interfaz y JavaScript para realizar el proceso.

1. Declaración del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

2. Etiqueta HTML

<html lang="es">

Contiene todo el contenido de la página web y especifica que el idioma es español.

3. Sección <head>

<head>
...
</head>

Contiene la configuración de la página, como la codificación de caracteres, la adaptación a dispositivos móviles y el título que aparece en la pestaña del navegador.

4. Título del ejercicio

<h3>Mostrar los números del 1 al 10</h3>

Muestra el nombre del ejercicio en la página.

5. Formulario

<form>
...
</form>

Agrupa todos los controles del programa como etiquetas, cajas de texto, botones y el área donde se muestran los resultados.

6. Etiqueta del número

<label>número:</label>

Muestra el texto que indica al usuario que debe ingresar un número.

7. Caja de entrada

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

Permite escribir únicamente números. El identificador numero sirve para acceder a este control desde JavaScript.

8. Botón Mostrar

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

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

9. Botón Limpiar

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

Borra los datos escritos en el formulario y deja los controles vacíos.

10. Área de resultados

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

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

11. Inicio de JavaScript

<script>
...
</script>

Dentro de esta etiqueta se escribe el código JavaScript que realiza el funcionamiento del programa.

12. Función mostrar()

function mostrar(){

}

Es la función que se ejecuta cuando el usuario presiona el botón Mostrar.

13. Leer el número

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

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

14. Crear un arreglo

let t = [];

Se crea un arreglo vacío llamado t donde se almacenarán los números.

15. Bucle for

for (let n1 = 1; n1 <= n; n1++) {
    t.push(n1);
}

El ciclo comienza en el número 1 y continúa hasta llegar al número ingresado por el usuario. En cada repetición, el número se guarda dentro del arreglo utilizando push().

16. Mostrar el resultado

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

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

Resultado final

Si el usuario escribe el número 10, el programa mostrará: 

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

En resumen, este programa solicita un número, utiliza un ciclo for para generar todos los números desde 1 hasta el valor ingresado, los guarda en un arreglo y finalmente los muestra en el área de resultados.

a la/s
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)

Determinar si un número es par o impar 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. ❤️