lunes, 29 de junio de 2026

Comprobar si un número es primo 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>Comprobar si un número es primo</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>
        <input type="text" id="resultado">
    </form>
    <script>
        function mostrar(){
            let numero = parseInt(document.getElementById('numero').value);
            let divisor = 1, contador = 0;
            while(divisor <= numero){
                if(numero % divisor == 0){
                    contador++;
                }
                divisor++;
            }
            contador == 2 ? document.getElementById('resultado').value = "El número es primo" : document.getElementById('resultado').value = "El número no es primo";
        }
    </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.
<= --> 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 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 incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
condición ? expr1 : expr2 --> el operador condicional ( ternario ) es el único operador en JavaScript que tiene tres operadores. Este operador se usa con frecuencia como atajo para la instrucción if. Si la condición es true, el operador retorna el valor de la expr1; de lo contrario, devuelve el valor de expr2.
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. Estructura HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

<html lang="es">

Define que la página está escrita en español.

<head>

Contiene información de la página, como el título y la configuración del navegador.

<meta charset="UTF-8">

Permite mostrar correctamente caracteres como á, é, í, ó, ú y ñ.

<meta name="viewport">

Hace que la página se adapte correctamente a celulares y tabletas.

<title>

Es el nombre que aparece en la pestaña del navegador.

2. Contenido del formulario

<h3>

Muestra el título "Comprobar si un número es primo".

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

Permite ingresar únicamente números.

<input type="button">

Cuando se presiona el botón Mostrar, se ejecuta la función mostrar().

<input type="reset">

Limpia todos los campos del formulario.

<input type="text" id="resultado">

Aquí se muestra el resultado indicando si el número es primo o no.

3. Función mostrar()

function mostrar(){

Crea una función que se ejecuta al hacer clic en el botón Mostrar.

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

  • document.getElementById('numero') obtiene el campo donde el usuario escribe el número.
  • .value obtiene el valor escrito.
  • parseInt() convierte ese valor en un número entero.

Ejemplo:

  • El usuario escribe 17.
  • La variable numero guarda el valor 17.

let divisor = 1, contador = 0;

  • divisor comienza en 1 y servirá para dividir el número.
  • contador inicia en 0 y contará cuántos divisores tiene el número.

4. Ciclo while

while(divisor <= numero)

El ciclo recorre todos los números desde 1 hasta el número ingresado.

Por ejemplo, si el usuario escribe 7, el ciclo prueba:

  • 7 ÷ 1
  • 7 ÷ 2
  • 7 ÷ 3
  • 7 ÷ 4
  • 7 ÷ 5
  • 7 ÷ 6
  • 7 ÷ 7

Así verifica cuáles divisiones son exactas.

5. Condición if

if(numero % divisor == 0)

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

  • Si el residuo es 0, significa que la división es exacta.
  • Entonces ese número sí es un divisor.

Ejemplo:

  • 7 % 1 = 0 ✔
  • 7 % 2 = 1 ✘
  • 7 % 3 = 1 ✘
  • 7 % 7 = 0 ✔

Cada vez que encuentra un divisor exacto, ejecuta:

contador++;

Esto aumenta el contador en uno.

6. Incrementar el divisor

divisor++;

Aumenta el divisor de uno en uno para seguir comprobando todas las divisiones posibles.

Ejemplo:

  • 1 → 2 → 3 → 4 → 5 → 6 → 7

7. Verificar si es primo

contador == 2 ? ... : ...

Es un operador ternario que funciona como un if...else corto.

Pregunta:

¿El número tiene exactamente dos divisores?

  • Si la respuesta es , muestra:

El número es primo

  • Si la respuesta es No, muestra:

El número no es primo

8. ¿Qué es un número primo?

Un número primo es aquel que únicamente tiene dos divisores:

  • El número 1.
  • Él mismo.

Ejemplos:

  • 2 ✔ Primo
  • 3 ✔ Primo
  • 5 ✔ Primo
  • 7 ✔ Primo
  • 11 ✔ Primo

No son primos:

  • 4 ✘ (1, 2 y 4)
  • 6 ✘ (1, 2, 3 y 6)
  • 8 ✘ (1, 2, 4 y 8)
  • 9 ✘ (1, 3 y 9)

9. Resumen del funcionamiento

  1. El usuario escribe un número.
  2. JavaScript obtiene ese número.
  3. Empieza a dividirlo desde 1 hasta el mismo número.
  4. Cada división exacta aumenta el contador.
  5. Si el contador termina valiendo 2, el número es primo.
  6. En caso contrario, el número no es primo.
  7. El resultado se muestra en la caja de texto.

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