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 x primeros números de la siguiente serie: 2,3,6,7,14,15,30,31,62,63,...</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 = [], vi = 2, c = 0, sw = 1;
            while(c != n){
                t.push(vi);
                if(sw == 1){
                    vi++;
                    sw = 0;
                }else{
                    vi *= 2;
                    sw = 1;
                }
                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.
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.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
!= --> el operador de desigualdad ( != ) comprueba si sus dos operandos no son iguales y devuelve un resultado booleano.
== --> 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.
*= --> el operador de asignación de multiplicación ( *= ) multiplica el valor del operando derecho de 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:

Este programa solicita al usuario la cantidad de números que desea mostrar de la serie:

2, 3, 6, 7, 14, 15, 30, 31, 62, 63,...

La serie sigue un patrón muy sencillo:

Primero aumenta 1.
Después multiplica el número por 2.
Este proceso se repite hasta obtener la cantidad de números solicitada.

Función mostrar()

function mostrar(){

Se declara la función mostrar(), la cual se ejecuta cuando el usuario hace clic en el botón Mostrar.

Leer el número ingresado

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

Obtiene el número escrito por el usuario en la caja de texto y lo convierte en un número entero utilizando parseInt().

Declaración de variables

let t = [], vi = 2, c = 0, sw = 1;

Se crean las variables necesarias para generar la serie.

t = [] → Guarda todos los números de la serie.
vi = 2 → Es el primer número de la serie.
c = 0 → Lleva la cuenta de cuántos números se han generado.
sw = 1 → Es un interruptor que decide qué operación realizar.

Repetir el proceso

while(c != n){

El ciclo while se ejecuta mientras todavía no se hayan generado los números solicitados por el usuario.

Guardar el número actual

t.push(vi);

Agrega el número actual (vi) al arreglo donde se almacenan todos los elementos de la serie.

Si el interruptor vale 1

if(sw == 1){ vi++; sw = 0; }

Si el interruptor tiene el valor 1, al número actual se le suma 1. Luego el interruptor cambia a 0 para que la siguiente operación sea diferente.

Ejemplo:

2 → 3 6 → 7 14 → 15 30 → 31

Si el interruptor vale 0

else{ vi *= 2; sw = 1; }

Cuando el interruptor vale 0, el número actual se multiplica por 2. Después el interruptor vuelve a 1 para repetir el patrón.

Ejemplo:

3 × 2 = 6 7 × 2 = 14 15 × 2 = 30 31 × 2 = 62

Contar los números generados

c++;

Incrementa el contador en uno para indicar que ya se generó un nuevo número de la serie.

Mostrar el resultado

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

Finalmente, todos los números almacenados en el arreglo t se muestran dentro del área de texto (textarea).

Resumen del funcionamiento

El usuario ingresa la cantidad de números que desea mostrar.
El programa comienza con el número 2.
Guarda el número en el arreglo.
Alterna entre sumar 1 y multiplicar por 2.
Repite el proceso hasta completar la cantidad solicitada.
Finalmente muestra toda la serie generada.

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Mostrar los x primeros números de la siguiente serie: 2,3,6,7,14,15,30,31,62,63,... en HTML y JavaScript