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 Sí, 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

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

Ingresar un número máximo de 2 dígitos, si ingresa un número de 1 dígito que muestre mensaje "Tiene 1 dígito" y si tiene 2 dígitos que muestre mensaje "Tiene 2 dígitos" 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>Ingresar un número máximo de 2 dígitos, si ingresa un número de 1 dígito que muestre mensaje "Tiene 1 dígito" y si tiene 2 dígitos que muestre mensaje "Tiene 2 dígitos"</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" size="40">
    </form>
    <script>
        function mostrar(){
            let n = parseInt(document.getElementById('numero').value);
            let c = 0;
            while(n >= 1){
                c += 1;
                n /= 10;
            }
            if(c == 1){
                document.getElementById('resultado').value = "Tiene 1 dígito";
            }else if(c == 2){
                document.getElementById('resultado').value = "Tiene 2 dígitos";
            }else{
                document.getElementById('resultado').value = "Por favor ingresar número máximo de 2 dígitos";
            }
        }
    </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 if --> se usa para especificar una nueva condición para probar, si la primera condición es falsa.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
>= --> el operador mayor que o igual ( >= ) devuelve true si el operando izquierdo es mayor o igual que el operando derecho, y en false caso contrario.
+= --> 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 asignación de división ( /= ) divide el valor del operando derecho de una variable y asigna el resultado a la variable.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
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 permite ingresar un número entero de hasta 2 dígitos. Luego cuenta cuántos dígitos tiene el número y muestra uno de los siguientes mensajes:

Si tiene 1 dígito, muestra: "Tiene 1 dígito".
Si tiene 2 dígitos, muestra: "Tiene 2 dígitos".
Si tiene más de 2 dígitos, muestra un mensaje indicando que el número es demasiado grande.

1. Estructura HTML

Título del ejercicio

<h3>
Ingresar un número máximo de 2 dígitos...
</h3>

Muestra las instrucciones para que el usuario sepa qué debe hacer.

Campo para ingresar el número

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

Permite escribir únicamente números. El identificador id="numero" sirve para que JavaScript pueda obtener el valor ingresado.

Botón Mostrar

<input type="button"
value="Mostrar"
onclick="mostrar()">

Cuando el usuario hace clic en este botón, se ejecuta la función mostrar().

Botón Limpiar

<input type="reset" value="Limpiar">

Borra el contenido del formulario y deja los campos vacíos.

Campo Resultado

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

Aquí aparece el mensaje indicando cuántos dígitos tiene el número.

2. Función mostrar()

Declaración de la función

function mostrar(){

Se crea una función llamada mostrar() que se ejecuta al presionar el botón.

Leer el número

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

Esta línea realiza tres tareas:

Obtiene el contenido del cuadro de texto.
Convierte ese contenido a un número entero usando parseInt().
Guarda el número en la variable n.

Variable contador

let c = 0;

Se crea una variable llamada c que servirá para contar la cantidad de dígitos. Comienza en cero porque todavía no se ha contado ningún dígito.

Ciclo while

while(n >= 1){
    c += 1;
    n /= 10;
}

Este ciclo cuenta los dígitos del número.

Su funcionamiento es el siguiente:

Mientras el número sea mayor o igual a 1, el ciclo continúa.
En cada vuelta aumenta el contador en 1.
Después divide el número entre 10 para eliminar un dígito.
Cuando el número es menor que 1, el ciclo termina.

Ejemplo:

n = 58

Primera vuelta:
58 / 10 = 5.8
c = 1

Segunda vuelta:
5.8 / 10 = 0.58
c = 2

Como 0.58 ya no es mayor o igual a 1,
el ciclo termina.

Resultado: el número tiene 2 dígitos.

Si tiene un dígito

if(c == 1){
    document.getElementById('resultado').value =
    "Tiene 1 dígito";
}

Si el contador vale 1, significa que el número tiene un solo dígito y muestra ese mensaje.

Si tiene dos dígitos

else if(c == 2){
    document.getElementById('resultado').value =
    "Tiene 2 dígitos";
}

Si el contador vale 2, significa que el número tiene dos dígitos y muestra el mensaje correspondiente.

Si tiene más de dos dígitos

else{
    document.getElementById('resultado').value =
    "Por favor ingresar número máximo de 2 dígitos";
}

Si el contador es mayor que 2, significa que el usuario ingresó un número demasiado grande y se muestra un mensaje de advertencia.

3. Resumen del funcionamiento

El programa realiza los siguientes pasos:

El usuario escribe un número.
Al presionar Mostrar, se ejecuta la función mostrar().
El programa obtiene el número ingresado.
Utiliza un ciclo while para contar los dígitos.
Según la cantidad de dígitos, muestra el mensaje correspondiente.
Si el número tiene más de dos dígitos, informa que solo se permiten números de hasta dos dígitos.

Mostrar los n primeros números de la siguiente serie: 1,6,36,216,1296,7776,46656,... 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 primeros números de la siguiente serie: 1,6,36,216,1296,7776,46656,...</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 i = 1, c = 1, t = [];
            while(c <= n){
                t.push(i);
                i *= 6;
                c++;
            }
            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 asignación de multiplicación ( *= ) multiplica el valor del operando derecho de una variable y asigna el resultado a la variable.
++ --> 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 al usuario un número entero n. Después genera los primeros n elementos de la serie:

1, 6, 36, 216, 1296, 7776, 46656...

La serie se forma multiplicando cada número por 6. Por ejemplo:

Número actual	Operación	Siguiente número
1	1 × 6	6
6	6 × 6	36
36	36 × 6	216
216	216 × 6	1296

Ahora veremos la función de cada parte del código HTML.

1. Declaración del documento HTML

<!DOCTYPE html>

Explicación:

Indica que el documento está escrito utilizando la versión HTML5. Gracias a esta línea, el navegador interpreta correctamente todas las etiquetas modernas de HTML.

2. Inicio del documento HTML

<html lang="es">

Explicación:

La etiqueta <html> contiene todo el contenido de la página.
El atributo lang="es" indica que el idioma principal es español.
Esto ayuda a los navegadores y motores de búsqueda a reconocer correctamente el idioma.

3. La sección <head>

<head>

...

</head>

La sección head contiene la información de configuración de la página. Todo lo que se encuentra aquí normalmente no aparece visible para el usuario.

4. Configuración de caracteres

<meta charset="UTF-8">

¿Para qué sirve?

Permite mostrar correctamente caracteres especiales como:

Sin esta línea algunos caracteres podrían aparecer con símbolos extraños.

5. Compatibilidad con navegadores

<meta http-equiv="X-UA-Compatible"
content="IE=edge">

Indica que el navegador debe utilizar su versión más moderna para interpretar la página.

Actualmente casi todos los navegadores modernos ya trabajan de esta forma, pero esta línea sigue siendo compatible con versiones antiguas.

6. Diseño adaptable (Responsive)

<meta name="viewport"
content="width=device-width,
initial-scale=1.0">

Explicación:

Hace que la página se adapte automáticamente al tamaño de la pantalla.
Permite visualizar correctamente el contenido desde un teléfono celular.
También mejora la visualización en tablets y computadoras.

7. Título de la página

<title>
Ejercicio HTML y JavaScript
</title>

El texto escrito dentro de <title> aparece en la pestaña del navegador.

No forma parte del contenido visible de la página.

8. Inicio del contenido visible

<body>

...

</body>

Dentro de la etiqueta <body> se coloca todo lo que el usuario puede ver, como textos, botones, cuadros de entrada y resultados.

9. Título del ejercicio

<h3>

Mostrar los n primeros números
de la siguiente serie:

1,6,36,216,1296,7776,46656,...

</h3>

Función:

Muestra el nombre del ejercicio.
Indica al usuario cuál será la serie que generará el programa.
Es un encabezado de nivel 3.

10. Inicio del formulario

<form>

...

</form>

El formulario agrupa todos los controles que utilizará el usuario, como cajas de texto, botones y áreas de resultados.

En este ejercicio el formulario solamente organiza los elementos de la interfaz.

11. Etiqueta del campo número

<label>Número:</label>

Explicación:

La etiqueta <label> muestra un texto descriptivo para indicar al usuario qué dato debe escribir en la caja de entrada.

En este caso informa que debe ingresar la cantidad de números que desea mostrar de la serie.

12. Caja para ingresar el número

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

Explicación:

input crea una caja donde el usuario puede escribir información.
type="number" indica que únicamente se pueden ingresar números.
id="numero" asigna un identificador para que JavaScript pueda obtener el valor escrito.

Ejemplo:

Dato ingresado	Significado
5	Mostrar los primeros cinco números de la serie.
8	Mostrar los primeros ocho números de la serie.

13. Botón Mostrar

<input
type="button"
value="Mostrar"
onclick="mostrar()">

Explicación:

type="button" crea un botón.
value="Mostrar" es el texto que aparece sobre el botón.
onclick="mostrar()" ejecuta la función mostrar() cuando el usuario hace clic.

Es decir, este botón inicia todo el proceso para calcular la serie.

14. Botón Limpiar

<input
type="reset"
value="Limpiar">

Explicación:

Este botón restaura el formulario a su estado inicial.

Elimina el número escrito.
Borra el resultado mostrado.

15. Etiqueta del resultado

<label>Resultado:</label>

Informa al usuario que debajo aparecerán los números generados por el programa.

16. Área de resultados

<textarea
id="resultado"
cols="30"
rows="10">
</textarea>

Explicación:

textarea crea un cuadro de texto grande.
Aquí aparecerán todos los números de la serie.
id="resultado" permite que JavaScript escriba el resultado.
cols="30" define el ancho inicial.
rows="10" define la altura inicial.

17. Inicio del código JavaScript

<script>

...

</script>

Explicación:

Todo el código JavaScript se escribe dentro de la etiqueta <script>.

JavaScript es el lenguaje encargado de realizar los cálculos y controlar el comportamiento de la página.

18. Declaración de la función

function mostrar(){

}

Explicación:

Se crea una función llamada mostrar().

Esta función contiene todas las instrucciones necesarias para generar la serie.

La función solamente se ejecuta cuando el usuario presiona el botón Mostrar.

19. Leer el número ingresado

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

Explicación paso a paso:

Parte	Función
document	Hace referencia al documento HTML.
getElementById("numero")	Busca el elemento cuyo id es numero.
.value	Obtiene el contenido escrito por el usuario.
parseInt()	Convierte el texto en un número entero.
let n	Guarda ese número en la variable n.

Ejemplo:

Usuario escribe	Valor almacenado en n
6	6
10	10

20. Declaración de variables

let i = 1,
    c = 1,
    t = [];

Después de obtener el valor de n, el programa crea tres variables que serán utilizadas para generar la serie.

Variable	Valor inicial	Función
i	1	Guarda el número actual de la serie.
c	1	Cuenta cuántos números se han generado.
t	[ ]	Arreglo donde se almacenan todos los resultados.

21. Ciclo while

while(c <= n){

    ...

}

Explicación:

El ciclo while repite un conjunto de instrucciones mientras la condición sea verdadera.

En este ejercicio, el ciclo continúa ejecutándose mientras el contador c sea menor o igual al número ingresado por el usuario.

Cuando el contador supera el valor de n, el ciclo termina.

22. Guardar el número actual

t.push(i);

Explicación:

El método push() agrega un nuevo elemento al final del arreglo.

Cada vez que el ciclo se ejecuta, el número actual de la serie se guarda dentro del arreglo t.

Ejemplo:

Valor de i	Contenido del arreglo t
1	[1]
6	[1, 6]
36	[1, 6, 36]
216	[1, 6, 36, 216]

23. Calcular el siguiente número

i *= 6;

Explicación:

Esta instrucción multiplica el valor actual por 6.

Es exactamente igual a escribir:

i = i * 6;

Valor anterior	Operación	Nuevo valor
1	1 × 6	6
6	6 × 6	36
36	36 × 6	216
216	216 × 6	1296

Gracias a esta instrucción se genera la serie correctamente.

24. Incrementar el contador

c++;

Explicación:

El operador ++ incrementa el valor de la variable en una unidad.

c++;

Es equivalente a escribir:

c = c + 1;

Esto permite contar cuántos números ya fueron generados.

25. Mostrar el resultado

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

Explicación:

Busca el elemento cuyo id es resultado.
Accede a su propiedad value.
Coloca dentro del textarea todos los números almacenados en el arreglo.

Ejemplo:

1,6,36,216,1296

26. Funcionamiento paso a paso

Supongamos que el usuario escribe el número 5.

Iteración	Valor de i	Se guarda en t	Nuevo valor de i
1	1	1	6
2	6	1, 6	36
3	36	1, 6, 36	216
4	216	1, 6, 36, 216	1296
5	1296	1, 6, 36, 216, 1296	7776

Al finalizar el ciclo, el programa muestra:

1,6,36,216,1296

27. Resumen del algoritmo

El usuario escribe un número n.
El programa lee ese número.
La variable i inicia con el valor 1.
Se crea un arreglo vacío para almacenar la serie.
El ciclo while se ejecuta n veces.
En cada repetición se guarda el número actual.
Luego ese número se multiplica por 6.
El contador aumenta en una unidad.
Al finalizar el ciclo, todos los números se muestran en el área de resultados.

28. Conclusión

Este programa utiliza un ciclo while para generar una serie geométrica, donde cada término se obtiene multiplicando el anterior por 6.

Los valores generados se almacenan en un arreglo mediante el método push(). Una vez finalizado el ciclo, el contenido del arreglo se muestra en un textarea, permitiendo al usuario visualizar los primeros n números de la serie de forma sencilla.

Este ejercicio ayuda a comprender el uso de variables, arreglos, ciclos while, operadores de asignación y la interacción entre HTML y JavaScript para crear programas dinámicos.

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 primeros números de la siguiente serie: 1,6,36,216,1296,7776,46656,...</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 i = 1, t = [];
            for(let c = 1; c <= n; c++){
                t.push(i);
                i *= 6;
            }
            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 asignación de multiplicación ( *= ) multiplica el valor del operando derecho de una variable y asigna el resultado a la variable.
++ --> 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:

El objetivo del programa es mostrar los n primeros números de la siguiente serie matemática:

1, 6, 36, 216, 1296, 7776, 46656, ...

Cada número de la serie se obtiene multiplicando el número anterior por 6.


1 × 6 = 6

6 × 6 = 36

36 × 6 = 216

216 × 6 = 1296

1296 × 6 = 7776

El usuario escribe la cantidad de números que desea mostrar y el programa genera automáticamente la serie utilizando JavaScript.

1. Explicación de la estructura HTML

La parte HTML es la encargada de crear todos los elementos que el usuario ve en la página, como el título, las cajas de texto, los botones y el área donde aparece el resultado.

<!DOCTYPE html>


<!DOCTYPE html>

Indica al navegador que el documento está escrito utilizando la versión HTML5. Gracias a esta línea el navegador interpreta correctamente todo el código de la página.

<html lang="es">


<html lang="es">

Esta etiqueta indica que todo el documento está escrito en español. Esto ayuda a los navegadores, traductores automáticos y lectores de pantalla.

<head>


<head>
...
</head>

Dentro de esta etiqueta se coloca la información del documento. Aquí se encuentran las configuraciones necesarias para que la página funcione correctamente.

<meta charset="UTF-8">


<meta charset="UTF-8">

Permite mostrar correctamente caracteres especiales como:

Sin esta línea algunos caracteres podrían mostrarse incorrectamente.

<meta name="viewport">


<meta name="viewport"
content="width=device-width, initial-scale=1.0">

Hace que la página sea adaptable a celulares, tablets y computadoras. Gracias a esta etiqueta el contenido cambia de tamaño automáticamente dependiendo del dispositivo.

<title>


<title>
Ejercicio HTML y JavaScript
</title>

El texto colocado dentro de la etiqueta title aparece en la pestaña del navegador. No se muestra dentro de la página.

2. Explicación del contenido del <body>

Dentro del body se encuentran todos los elementos visibles para el usuario. En este ejercicio existen cinco elementos principales.

El título del ejercicio.
La caja para ingresar el número.
El botón Mostrar.
El botón Limpiar.
El área donde aparece el resultado.

Título del ejercicio


<h3>

Mostrar los n primeros números de la siguiente serie:

1,6,36,216,1296,7776,46656,...

</h3>

Esta etiqueta muestra el enunciado del ejercicio para que el usuario conozca cuál es la serie que el programa generará.

Etiqueta label


<label>
Número:
</label>

La etiqueta label sirve para mostrar un texto descriptivo junto al cuadro de entrada. En este caso informa al usuario que debe escribir un número.

Caja de entrada


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

Esta caja permite ingresar únicamente números. El atributo id="numero" identifica la caja para que JavaScript pueda leer el valor que escribe el usuario.

Por ejemplo:


Si el usuario escribe:

5

Entonces el programa generará:

1
6
36
216
1296

Explicación del código (Parte 2)

3. Botón Mostrar


<input type="button"
value="Mostrar"
onclick="mostrar()">

Este botón ejecuta la función mostrar() cuando el usuario hace clic sobre él. La palabra onclick significa que al hacer un clic se llamará a la función de JavaScript.

Al presionar el botón, el programa comienza a generar la serie automáticamente.

4. Botón Limpiar


<input type="reset"
value="Limpiar">

Este botón borra el contenido del formulario. Si el usuario escribió un número, al hacer clic en Limpiar la caja volverá a quedar vacía.

5. Área de resultado


<textarea
id="resultado"
cols="30"
rows="10">
</textarea>

El elemento textarea sirve para mostrar el resultado generado por el programa. Aquí aparecerán todos los números de la serie.

Explicación del código JavaScript

6. Crear la función


function mostrar(){

}

Se crea una función llamada mostrar(). Todo el código encargado de generar la serie se encuentra dentro de esta función. La función solamente se ejecuta cuando el usuario presiona el botón Mostrar.

7. Leer el número ingresado


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

Esta línea obtiene el número que escribió el usuario.

Parte	Función
document	Hace referencia al documento HTML.
getElementById()	Busca un elemento por su id.
value	Obtiene el valor escrito por el usuario.
parseInt()	Convierte el texto en un número entero.

Si el usuario escribe:

Entonces la variable n tendrá el valor:


n = 5

8. Declarar las variables


let i = 1,
    t = [];

Aquí se crean dos variables importantes.

Variable	Función
i	Guarda el número actual de la serie.
t	Almacena todos los números generados.

Inicialmente:


i = 1

t = []

El arreglo está vacío porque todavía no se ha generado ningún número.

9. Ciclo for


for(let c = 1; c <= n; c++){

}

El ciclo for repite el mismo proceso varias veces. La cantidad de repeticiones depende del número que escribió el usuario.

Si el usuario escribe:

El ciclo se repetirá tres veces. Si escribe:

El ciclo se repetirá siete veces.

10. Guardar cada número


t.push(i);

El método push() agrega el número actual al arreglo. Cada vez que el ciclo se repite, un nuevo número se almacena dentro del arreglo.

Repetición	Contenido del arreglo
1	[1]
2	[1, 6]
3	[1, 6, 36]
4	[1, 6, 36, 216]

Explicación del código JavaScript (Parte 3)

11. Multiplicar por 6


i *= 6;

Esta línea multiplica el valor actual de la variable i por 6. El resultado será el siguiente número de la serie.

La instrucción:


i *= 6;

es una forma abreviada de escribir:


i = i * 6;

Es decir, el valor de i se multiplica por 6 y el resultado vuelve a guardarse en la misma variable.

Valor actual	Operación	Nuevo valor
1	1 × 6	6
6	6 × 6	36
36	36 × 6	216
216	216 × 6	1296
1296	1296 × 6	7776

Gracias a esta multiplicación, la serie continúa creciendo automáticamente.

12. Mostrar el resultado


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

Después de que el ciclo termina, todos los números ya se encuentran almacenados en el arreglo t.

Esta línea coloca el contenido del arreglo dentro del textarea.

Por ejemplo, si el usuario escribe:

El arreglo contiene:


[1,6,36,216,1296]

Y eso es lo que aparece en la caja de resultado.

13. Fin de la función

La llave de cierre indica que la función mostrar() ha terminado. Una vez finalizada, el programa espera que el usuario vuelva a presionar el botón Mostrar para generar otra serie.

Funcionamiento completo del algoritmo

El siguiente cuadro resume todo el proceso que realiza el programa.

Paso	Acción
1	El usuario escribe la cantidad de números que desea generar.
2	Al hacer clic en Mostrar, se ejecuta la función mostrar().
3	Se obtiene el número ingresado y se guarda en la variable n.
4	La variable i comienza con el valor 1.
5	Se crea un arreglo vacío llamado t.
6	El ciclo for se repite exactamente n veces.
7	En cada repetición se guarda el valor de i en el arreglo.
8	Después se multiplica i por 6 para obtener el siguiente número de la serie.
9	Al finalizar el ciclo, todos los números están almacenados en el arreglo.
10	Finalmente, el arreglo se muestra en el textarea.

Ejemplo de ejecución

Supongamos que el usuario escribe el número 5.

Repetición	Valor de i	Contenido del arreglo
1	1	1
2	6	1, 6
3	36	1, 6, 36
4	216	1, 6, 36, 216
5	1296	1, 6, 36, 216, 1296

Resultado final:


1, 6, 36, 216, 1296

El programa genera correctamente los primeros cinco números de la serie multiplicando cada término por 6 y mostrando el resultado en el área de texto.

Conclusión

Este ejercicio permite practicar conceptos fundamentales de JavaScript, como el uso de variables, arreglos, ciclos for, funciones, operadores de multiplicación y la manipulación de elementos HTML mediante el DOM. Además, muestra cómo generar una serie matemática de forma automática a partir de un patrón de multiplicación constante.

Páginas

lunes, 29 de junio de 2026

Comprobar si un número es primo en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura HTML

2. Contenido del formulario

3. Función mostrar()

4. Ciclo while

5. Condición if

6. Incrementar el divisor

7. Verificar si es primo

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

9. Resumen del funcionamiento

Ingresar un número máximo de 2 dígitos, si ingresa un número de 1 dígito que muestre mensaje "Tiene 1 dígito" y si tiene 2 dígitos que muestre mensaje "Tiene 2 dígitos" en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura HTML

Título del ejercicio

Campo para ingresar el número

Botón Mostrar

Botón Limpiar

Campo Resultado

2. Función mostrar()

Declaración de la función

Leer el número

Variable contador

Ciclo while

Si tiene un dígito

Si tiene dos dígitos

Si tiene más de dos dígitos

3. Resumen del funcionamiento

Mostrar los n primeros números de la siguiente serie: 1,6,36,216,1296,7776,46656,... en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Declaración del documento HTML

2. Inicio del documento HTML

3. La sección <head>

4. Configuración de caracteres

5. Compatibilidad con navegadores

6. Diseño adaptable (Responsive)

7. Título de la página

8. Inicio del contenido visible

9. Título del ejercicio

10. Inicio del formulario

11. Etiqueta del campo número

12. Caja para ingresar el número

13. Botón Mostrar

14. Botón Limpiar

15. Etiqueta del resultado

16. Área de resultados

17. Inicio del código JavaScript

18. Declaración de la función

19. Leer el número ingresado

20. Declaración de variables

21. Ciclo while

22. Guardar el número actual

23. Calcular el siguiente número

24. Incrementar el contador

25. Mostrar el resultado

26. Funcionamiento paso a paso

27. Resumen del algoritmo

28. Conclusión

Código del ejercicio: Otra forma de hacer

Definición de los códigos del ejercicio:

Explicación del Código:

1. Explicación de la estructura HTML

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport">

<title>

2. Explicación del contenido del <body>

Título del ejercicio

Etiqueta label

Caja de entrada