domingo, 28 de junio de 2026

Pedir un número y determinar si un número es perfecto 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>Pedir un número y determinar si un número es perfecto</h3>
    <form action="">
        <label for="">número:</label>
        <input type="number" id="n"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function mostrar(){
            let n = parseInt(document.getElementById('n').value);
            let ac = 0, i = n - 1;
            while(i > 0){
                r = n % i;
                if(r == 0){
                    ac += i;
                }
                i--;
            }
            if(n == ac){
                document.getElementById('resultado').value = "El número es perfecto.";
            }else{
                document.getElementById('resultado').value = "El número no es perfecto.";
            }
        }
    </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.
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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
% --> el operador de modulo ( % ) devuelve el resto de la división.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
+= --> el operador de asignación de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
-- --> 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 y determina si dicho número es perfecto.

¿Qué es un número perfecto?

Un número perfecto es aquel cuya suma de todos sus divisores positivos, excepto el mismo número, es igual al número original.

Ejemplo:

  • Divisores de 6: 1, 2 y 3.
  • 1 + 2 + 3 = 6.
  • Como la suma es igual al número, 6 es un número perfecto.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica que el documento está escrito utilizando HTML5. Siempre debe ser la primera línea del documento.

2. Etiqueta HTML

<html lang="es">

Contiene toda la página web y el atributo lang="es" indica que el idioma del documento es español.

3. Sección <head>

Dentro de esta sección se configura la página.

  • <meta charset="UTF-8">
    Permite utilizar correctamente caracteres especiales como la ñ y las vocales con tilde.
  • <meta http-equiv="X-UA-Compatible">
    Mejora la compatibilidad con algunos navegadores antiguos.
  • <meta name="viewport">
    Hace que la página sea adaptable a teléfonos móviles y tablets.
  • <title>
    Define el nombre que aparece en la pestaña del navegador.

4. Encabezado

<h3>Pedir un número y determinar si un número es perfecto</h3>

Muestra el título principal del ejercicio.

5. Formulario

El formulario contiene todos los elementos que utilizará el usuario.

  • Label
    Muestra el texto "Número:" indicando qué dato debe ingresar el usuario.
  • Input tipo number
    Permite ingresar únicamente números.
  • Botón Mostrar
    Ejecuta la función mostrar().
  • Botón Limpiar
    Borra todos los datos del formulario.
  • Caja Resultado
    Muestra si el número es perfecto o no.

6. Función mostrar()

function mostrar(){ }

Es la función principal del programa. Se ejecuta cuando el usuario presiona el botón Mostrar.

7. Obtener el número

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

Esta instrucción obtiene el número escrito por el usuario, lo convierte de texto a un número entero mediante parseInt() y lo almacena en la variable n.

8. Declarar variables

let ac = 0, i = n - 1;
  • ac: almacena la suma de los divisores encontrados.
  • i: comienza en un número menor que n, ya que un número perfecto no se suma a sí mismo.

9. Ciclo while

while(i > 0){ ... }

Recorre todos los números desde n - 1 hasta 1, buscando cuáles son divisores del número ingresado.

10. Obtener el residuo

r = n % i;

El operador % calcula el residuo de una división.

  • Si el residuo es 0, significa que el número divide exactamente a n.
  • Por lo tanto, ese número es un divisor.

11. Verificar si es divisor

if(r == 0){ ac += i; }

Si el residuo es igual a cero, el valor de i es un divisor y se suma a la variable ac.

12. Disminuir el contador

i--;

Reduce el valor de i en una unidad para continuar revisando los siguientes posibles divisores.

13. Comparar la suma

if(n == ac)

Al finalizar el ciclo, compara el número ingresado con la suma de sus divisores.

  • Si ambos son iguales, el número es perfecto.
  • Si son diferentes, el número no es perfecto.

14. Mostrar el resultado

document.getElementById('resultado').value = "El número es perfecto.";

Muestra el mensaje indicando que el número es perfecto.

document.getElementById('resultado').value = "El número no es perfecto.";

Si la condición no se cumple, muestra que el número no es perfecto.

Resumen del funcionamiento del programa

  1. El usuario escribe un número.
  2. Al presionar el botón Mostrar se ejecuta la función mostrar().
  3. El programa busca todos los divisores del número.
  4. Suma únicamente los divisores propios.
  5. Compara la suma con el número ingresado.
  6. Si ambos valores son iguales, informa que el número es perfecto.
  7. Si son diferentes, indica que el número no es perfecto.

No hay comentarios.:

Publicar un comentario

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