lunes, 22 de junio de 2026

Generar los números impares: 1,3,5,7,9,11,13,15,17,19,21,... 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>Generar los números impares: 1,3,5,7,9,11,13,15,17,19,21,...</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 += 2;
            }
            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 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.

Explicación del Código:

1. ¿Qué hace el programa?

Este ejercicio genera números impares (1, 3, 5, 7, 9...) hasta un número ingresado por el usuario.

2. Parte HTML

El HTML crea la interfaz donde el usuario ingresa un número y ve el resultado.

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

El input recibe el número, el botón ejecuta la función y el textarea muestra el resultado.

3. Parte JavaScript

function mostrar(){
  let n = parseInt(document.getElementById('numero').value);
  let t = [], n1 = 1;

  while(n1 <= n){
    t.push(n1);
    n1 += 2;
  }

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

Primero se obtiene el número ingresado. Luego se genera una lista de impares empezando en 1 y sumando 2 en cada ciclo hasta llegar al número indicado.

4. Resultado

El resultado muestra los números impares separados por comas dentro del área de texto.

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>Generar los números impares: 1,3,5,7,9,11,13,15,17,19,21,...</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 += 2) {
                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 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.

Explicación del Código:

📌 ¿Qué hace este programa?
Este programa genera números impares (1, 3, 5, 7, 9...) hasta un número ingresado por el usuario. El resultado se muestra en pantalla dentro de un área de texto.
📌 Parte HTML
El HTML crea la estructura del formulario:
  • Un campo para ingresar el número.
  • Un botón para ejecutar la función.
  • Un área de texto para mostrar el resultado.
📌 Parte JavaScript
El JavaScript realiza la lógica del programa:
  • Toma el número ingresado por el usuario.
  • Crea un arreglo vacío para guardar los números impares.
  • Usa un ciclo que inicia en 1 y suma de 2 en 2 (solo impares).
  • Guarda cada número en el arreglo.
  • Muestra el resultado en pantalla.
📌 Resumen
El programa convierte un número ingresado en una lista de números impares, usando un ciclo sencillo en JavaScript y mostrando el resultado en HTML.

No hay comentarios.:

Publicar un comentario

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. ❤️