lunes, 22 de junio de 2026

Mostrar los números: 10,20,30,40,50,60,70,80,90,100,... 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: 10,20,30,40,50,60,70,80,90,100,...</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 = 10;
            while(n1 <= n){
                t.push(n1); 
                n1 += 10;
            }
            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.
.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.
+= --> el operador de asignación de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
+ --> se usa para concatenar cadenas, cadenas a constantes o a variables.

Explicación del Código:

Este programa permite mostrar los números múltiplos de 10 desde 10 hasta el número que escriba el usuario. Por ejemplo, si el usuario ingresa 80, el programa mostrará: 

10,20,30,40,50,60,70,80

Explicación del código HTML

Código Función
<form> Contiene todos los controles del formulario.
<label>Número:</label> Muestra el texto que indica dónde debe escribir el número.
<input type="number" id="numero"> Permite al usuario ingresar un número.
<input type="button"> Llama a la función mostrar() cuando se hace clic en el botón Mostrar.
<input type="reset"> Limpia los datos del formulario.
<textarea id="resultado"> Muestra los números generados por el programa.

Explicación del código JavaScript

1. Declaración de la función

function mostrar(){

Se crea la función llamada mostrar(), que se ejecuta cuando el usuario presiona el botón Mostrar.

2. Leer el número ingresado

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

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

3. Crear las variables

let t = [], n1 = 10;

Aquí se crean dos variables:

  • t: almacena los números generados.
  • n1: comienza en 10 porque el primer múltiplo de 10 es 10.

4. Repetir mientras el número sea menor o igual al límite

while(n1 <= n){

El ciclo while continúa ejecutándose mientras n1 sea menor o igual al número ingresado.

5. Guardar el número

t.push(n1);

Agrega el número actual dentro del arreglo t.

6. Aumentar de diez en diez

n1 += 10;

Incrementa el valor de n1 en 10 para obtener el siguiente múltiplo.

Ejemplo:


10
20
30
40
50
...

7. Mostrar el resultado

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

Finalmente, el contenido del arreglo se muestra dentro del área de texto (textarea).

Funcionamiento paso a paso

  1. El usuario escribe un número.
  2. Hace clic en el botón Mostrar.
  3. La función mostrar() obtiene el número.
  4. El ciclo while genera los múltiplos de 10.
  5. Los números se guardan en un arreglo.
  6. El arreglo se muestra en el textarea.

Ejemplo de ejecución

Entrada:

100

Proceso:


10
20
30
40
50
60
70
80
90
100

Salida:

10,20,30,40,50,60,70,80,90,100

Resumen

Este programa utiliza un ciclo while para generar los múltiplos de 10 desde el número 10 hasta el valor ingresado por el usuario. Cada número se almacena en un arreglo mediante push() y, al finalizar, todos los valores se muestran en el área de texto del formulario.

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: 10,20,30,40,50,60,70,80,90,100,...</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 = 10; n1 <= n; n1 += 10) {
                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.
.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.
+= --> el operador de asignación de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
+ --> se usa para concatenar cadenas, cadenas a constantes o a variables.

Explicación del Código:

Este programa muestra los números de 10 en 10 hasta el número que el usuario ingrese. Por ejemplo, si se escribe 100, el resultado será: 10, 20, 30, 40, ... 100.

HTML (Estructura)

El HTML crea un formulario con un campo de entrada, botones y un área donde se muestra el resultado.

<input type="number" id="numero"> <input type="button" value="Mostrar" onclick="mostrar()"> <textarea id="resultado"></textarea>

JavaScript (Función)

La función mostrar() toma el número ingresado y genera una lista de múltiplos de 10.

function mostrar(){ let n = parseInt(document.getElementById('numero').value); let t = []; for (let i = 10; i <= n; i += 10) { t.push(i); } document.getElementById('resultado').value = t; }

Funcionamiento

  • El usuario escribe un número.
  • Hace clic en “Mostrar”.
  • El programa genera números de 10 en 10.
  • Se muestran en el área de resultado.
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. ❤️