viernes, 26 de junio de 2026

Contar los primeros N números impares de la serie de números naturales 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>Contar los primeros N números impares de la serie de números naturales</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 = [], i = 1, c = 0;
            while(c < n){
                if(i % 2 != 0){
                    t.push(i);
                    c++;
                }
                i++;
            }
            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.
< --> el operador menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
% --> el operador de modulo ( % ) devuelve el resto de la división.
!= --> el operador de desigualdad ( != ) comprueba si sus dos operandos no son iguales y devuelve un resultado booleano.
++ --> 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 los primeros N números impares de la serie de números naturales. Por ejemplo, si el usuario escribe 5, el programa mostrará:

1, 3, 5, 7, 9

Explicación de cada parte del código

Código Función
<!DOCTYPE html> Indica que el documento está escrito en HTML5.
<html lang="es"> Define el inicio del documento HTML y especifica que el idioma es español.
<head> Contiene la información del documento, como el título y la configuración de la página.
<meta charset="UTF-8"> Permite mostrar correctamente letras, acentos y caracteres especiales.
<meta name="viewport"...> Hace que la página sea adaptable a celulares, tablets y computadoras.
<title> Especifica el nombre que aparecerá en la pestaña del navegador.
<body> Contiene todo el contenido visible de la página.
<h3> Muestra el título del ejercicio.
<form> Agrupa todos los controles del formulario.
<label> Muestra el texto que describe el cuadro de entrada.
<input type="number"> Permite ingresar el valor de N.
<input type="button"> Ejecuta la función mostrar() al hacer clic en el botón.
<input type="reset"> Limpia todos los datos del formulario.
<textarea> Muestra el resultado generado por el programa.
function mostrar() Es la función que realiza todo el proceso para encontrar los números impares.
let n = parseInt(...) Obtiene el número escrito por el usuario y lo convierte en un número entero.
let t = [] Crea un arreglo donde se almacenarán los números impares encontrados.
let i = 1 Inicializa la variable que recorrerá los números naturales comenzando desde 1.
let c = 0 Cuenta cuántos números impares se han encontrado.
while(c < n) Repite el proceso hasta encontrar la cantidad de números impares solicitada.
if(i % 2 != 0) Verifica si el número es impar. Si el residuo de dividir entre 2 es diferente de 0, el número es impar.
t.push(i) Guarda el número impar dentro del arreglo.
c++ Aumenta el contador de números impares encontrados.
i++ Pasa al siguiente número natural.
document.getElementById("resultado").value = t; Muestra en el área de texto todos los números impares encontrados.

¿Cómo funciona el programa?

1. El usuario escribe un número entero (N).

2. El programa comienza a revisar los números naturales desde el número 1.

3. Cada vez que encuentra un número impar, lo guarda en un arreglo.

4. El proceso continúa hasta completar la cantidad de números impares solicitada.

5. Finalmente, todos los números impares se muestran en el área de resultados.

Ejemplo de ejecución

Entrada:

Número: 6

Proceso:

Se encuentran los siguientes números impares:

1, 3, 5, 7, 9 y 11

Salida:

Resultado: 1,3,5,7,9,11

Resumen

Este programa utiliza un ciclo while para recorrer los números naturales. Mediante una condición verifica cuáles son impares usando el operador módulo (%). Cada número impar encontrado se guarda en un arreglo y, cuando se alcanza la cantidad solicitada por el usuario, todos los valores se muestran en el área de texto.

No hay comentarios.:

Publicar un comentario

Mostrar los N primeros números de la siguiente serie: 1,2,4,8,16,32,64,128,... 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. ❤️