viernes, 26 de junio de 2026

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="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,2,4,8,16,32,64,128,...</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 = 1, c = 1;
            while(c <= n){
                t.push(vi);
                if(c >= 1){
                    vi *= 2;
                }
                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.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
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 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 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:

¿Qué hace el programa?
El programa genera los primeros N números de una serie donde cada número es el doble del anterior:

1, 2, 4, 8, 16, 32...
Explicación del HTML
  • input number: permite ingresar la cantidad N.
  • button: ejecuta la función mostrar().
  • reset: limpia el formulario.
  • textarea: muestra el resultado.
Explicación del JavaScript

1. Obtener el valor:

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

Convierte el número ingresado a entero.

2. Variables:

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

t = almacena la serie
vi = valor inicial (1)
c = contador

3. Ciclo:

while(c <= n){ t.push(vi); vi *= 2; c++; }

Se repite hasta generar N números.

4. Mostrar resultado:

document.getElementById('resultado').value = t;
Resumen
El programa genera una serie donde cada número se multiplica por 2 y muestra los primeros N valores ingresados por el usuario.

Contar los primeros N números pares 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 pares 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 = 0, 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 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.
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 N al usuario y muestra los primeros N números pares de la serie de números naturales comenzando desde el 0.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica que el documento utiliza la versión HTML5.

2. Etiqueta HTML

<html lang="es">

Contiene toda la página web e indica que el idioma del documento es español.

3. Sección HEAD

<meta charset="UTF-8">

Permite utilizar caracteres especiales como la letra ñ y las tildes.

<meta name="viewport">

Hace que la página se adapte correctamente a teléfonos, tabletas y computadoras.

<title>

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

4. Encabezado

<h3>

Muestra el título del ejercicio en la página.

5. Formulario

<form>

Agrupa todos los controles que utiliza el usuario.

6. Etiqueta y caja de texto

<label>

Muestra el texto "Número:" para indicar qué dato debe ingresar el usuario.

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

Permite escribir únicamente números.

7. Botones

<input type="button">

Ejecuta la función mostrar() cuando el usuario hace clic en el botón Mostrar.

<input type="reset">

Limpia todos los datos del formulario.

8. Área de resultados

<textarea>

Muestra la lista de números pares encontrados.

9. Función mostrar()

function mostrar()

Es la función que realiza todo el proceso para encontrar los primeros números pares.

10. Leer el número ingresado

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

Obtiene el número escrito por el usuario y lo convierte a un número entero.

11. Declaración de variables

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

  • t: almacena los números pares encontrados.
  • i: representa el número que se está evaluando.
  • c: cuenta cuántos números pares se han encontrado.

12. Ciclo while

while(c < n)

El ciclo continúa ejecutándose mientras todavía no se hayan encontrado los N números pares.

13. Verificar si el número es par

if(i % 2 == 0)

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

Si el residuo de dividir entre 2 es igual a 0, significa que el número es par.

14. Guardar el número par

t.push(i);

Agrega el número par al arreglo.

c++;

Aumenta el contador de números pares encontrados.

15. Pasar al siguiente número

i++;

Incrementa el número que será evaluado en la siguiente repetición.

16. Mostrar el resultado

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

Muestra todos los números pares almacenados en el arreglo dentro del área de texto.

Ejemplo de funcionamiento

Entrada: 5

Proceso:

0 es par ✔
1 no es par ✘
2 es par ✔
3 no es par ✘
4 es par ✔
5 no es par ✘
6 es par ✔
7 no es par ✘
8 es par ✔

Resultado:

0, 2, 4, 6, 8

Resumen

El programa solicita un número N, recorre los números naturales desde 0 utilizando un ciclo while, verifica cuáles son pares mediante el operador %, los guarda en un arreglo y finalmente los muestra en el textarea.

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.

Pedir la edad y determinar si puede o no sacar licencia de conducir 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 la edad y determinar si puede o no sacar licencia de conducir</h3>
    <form action="">
        <label for="">edad:</label>
        <input type="number" id="edad"><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 edad = parseInt(document.getElementById('edad').value);
            if(edad >= 18){
                document.getElementById('resultado').value = "Licencia otorgada.";
            }else{
                document.getElementById('resultado').value = "Licencia negada.";
            }
        }
    </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.
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 o igual ( >= ) devuelve true si el operando izquierdo es mayor o igual que el operando derecho, y en false caso contrario.
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 su edad mediante un formulario. Luego, al presionar el botón Mostrar, JavaScript verifica si la persona tiene la edad suficiente para obtener una licencia de conducir. Finalmente, muestra el resultado en una caja de texto.

Explicación de cada parte del código

  • <!DOCTYPE html>
    Indica que el documento utiliza la versión HTML5.
  • <html lang="es">
    Es la etiqueta principal del documento y especifica que el idioma es español.
  • <head>
    Contiene la configuración de la página, como la codificación de caracteres, el diseño adaptable y el título.
  • <meta charset="UTF-8">
    Permite mostrar correctamente letras con acentos, la letra ñ y otros caracteres especiales.
  • <meta name="viewport">
    Hace que la página se adapte correctamente a celulares, tablets y computadoras.
  • <title>
    Define el nombre que aparece 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 elementos del formulario.
  • <label>
    Muestra el texto "edad:" para indicar qué dato debe ingresar el usuario.
  • <input type="number" id="edad">
    Crea una caja donde el usuario escribe su edad. Solo permite ingresar números.
  • <input type="button">
    Crea el botón Mostrar. Al hacer clic, ejecuta la función mostrar().
  • <input type="reset">
    Crea el botón Limpiar, que borra los datos ingresados en el formulario.
  • <input type="text" id="resultado">
    Es la caja donde se muestra el mensaje indicando si la licencia fue otorgada o negada.

Explicación del código JavaScript

  • function mostrar()
    Declara una función llamada mostrar(), la cual se ejecuta al presionar el botón Mostrar.
  • let edad = parseInt(document.getElementById('edad').value);
    Obtiene el número escrito por el usuario en la caja de texto y lo convierte en un número entero para poder compararlo.
  • if(edad >= 18)
    Comprueba si la edad es mayor o igual a 18 años.
  • document.getElementById('resultado').value = "Licencia otorgada.";
    Si la condición es verdadera, muestra el mensaje "Licencia otorgada.".
  • else
    Se ejecuta cuando la persona tiene menos de 18 años.
  • document.getElementById('resultado').value = "Licencia negada.";
    Muestra el mensaje "Licencia negada." cuando la persona no cumple con la edad mínima.

Funcionamiento del programa

  1. El usuario escribe su edad.
  2. Hace clic en el botón Mostrar.
  3. JavaScript lee la edad ingresada.
  4. Comprueba si la edad es mayor o igual a 18.
  5. Si cumple la condición, muestra "Licencia otorgada.".
  6. Si no cumple la condición, muestra "Licencia negada.".
  7. El botón Limpiar borra todos los datos del formulario.

Resumen

Este ejercicio enseña cómo solicitar un dato al usuario, leerlo con JavaScript, utilizar una estructura condicional if...else para tomar una decisión y mostrar el resultado en un campo del formulario. Es un ejemplo básico del uso de condiciones en HTML y JavaScript.

jueves, 25 de junio de 2026

Eliminar un carácter x de una cadena 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>Eliminar un carácter x de una cadena</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingrese un carácter:</label>
        <input type="text" id="x"><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 s = document.getElementById('s').value;
            let x = document.getElementById('x').value;
            let aux = "", i = 0, sw = 0;
            while(i < s.length){
                if(s[i] == x && sw == 0){
                    sw = 1;
                }else{
                    aux = aux + s[i];
                    sw = 0;
                }
                i++;
            }
            document.getElementById('resultado').value = aux;
        }
    </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.
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 menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
length --> la propiedad length devuelve la longitud de una cadena.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
&& --> el operador lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
++ --> 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:

1. Título de la página

<title>Ejercicio HTML y JavaScript</title>

Define el título que aparecerá en la pestaña del navegador.

2. Encabezado principal

<h3>Eliminar un carácter x de una cadena</h3>

Muestra el nombre del ejercicio en la página web.

3. Campo para ingresar el texto

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

Permite escribir la cadena de texto donde se eliminará un carácter.

4. Campo para ingresar el carácter

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

Permite ingresar el carácter que se desea eliminar de la cadena.

5. Botón Mostrar

onclick="mostrar()"

Ejecuta la función mostrar() cuando el usuario hace clic en el botón.

6. Obtener los datos ingresados

let s = document.getElementById('s').value;
let x = document.getElementById('x').value;

Obtiene la cadena de texto y el carácter ingresados por el usuario.

7. Crear variables auxiliares

let aux = "", i = 0, sw = 0;

aux almacenará la nueva cadena.
i servirá para recorrer la cadena.
sw funcionará como una bandera de control.

8. Recorrer la cadena

while(i < s.length)

Recorre cada carácter de la cadena desde el primero hasta el último.

9. Verificar si el carácter coincide

if(s[i] == x && sw == 0)

Comprueba si el carácter actual es igual al carácter que se desea eliminar.

10. No agregar el carácter encontrado

sw = 1;

Cuando encuentra el carácter indicado, evita que se agregue a la nueva cadena.

11. Agregar los demás caracteres

aux = aux + s[i];

Si el carácter es diferente, se agrega a la nueva cadena almacenada en aux.

12. Avanzar al siguiente carácter

i++;

Incrementa el contador para continuar recorriendo la cadena.

13. Mostrar el resultado

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

Muestra la nueva cadena sin el carácter eliminado en el campo de resultado.

Resumen del ejercicio

El programa solicita una cadena de texto y un carácter. Luego recorre la cadena, elimina las apariciones del carácter indicado y finalmente muestra el texto resultante.

Contar las veces que se repite un carácter x en una frase 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 las veces que se repite un carácter x en una frase</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingrese un carácter:</label>
        <input type="text" id="x"><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="45">
    </form>
    <script>
        function mostrar(){
            let s = document.getElementById('s').value.toLowerCase();
            let x = document.getElementById('x').value.toLowerCase();
            let i = 0, cc = 0;
            while(i < s.length){
                if(s[i] == x){
                    cc++;
                }
                i++;
            }
            document.getElementById('resultado').value = `Las veces que se repite el carácter ${x} es ${cc} veces.`;
        }
    </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.
toLowerCase() --> convierte una cadena en letras minúsculas.
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 que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
length --> la propiedad length devuelve la longitud de una cadena.
== --> 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.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.

Explicación del Código:

1. Estructura HTML

Se crea una página web con un formulario que permite ingresar una frase, escribir un carácter, ejecutar el cálculo y mostrar el resultado.

2. Campo para ingresar la frase

El elemento input con id="s" permite al usuario escribir la frase en la que se buscará el carácter.

3. Campo para ingresar el carácter

El elemento input con id="x" permite escribir el carácter que se desea buscar dentro de la frase.

4. Botón Mostrar

Al hacer clic en el botón Mostrar, se ejecuta la función JavaScript llamada mostrar().

5. Obtener los datos

La función obtiene la frase y el carácter utilizando document.getElementById(). Luego, ambos valores se convierten a minúsculas con toLowerCase() para evitar diferencias entre mayúsculas y minúsculas.

6. Variables de control

La variable i sirve para recorrer la frase carácter por carácter, mientras que cc almacena la cantidad de repeticiones encontradas.

7. Recorrer la frase

El ciclo while recorre toda la frase desde el primer carácter hasta el último.

8. Comparar los caracteres

En cada recorrido se compara el carácter actual de la frase con el carácter ingresado por el usuario. Si son iguales, la variable cc aumenta en uno.

9. Mostrar el resultado

Cuando termina el recorrido, se muestra un mensaje indicando cuántas veces aparece el carácter dentro de la frase.

10. Botón Limpiar

El botón Limpiar elimina los datos del formulario para que el usuario pueda realizar una nueva búsqueda.

Resumen del funcionamiento

El programa solicita una frase y un carácter, recorre toda la frase, cuenta cuántas veces aparece dicho carácter y finalmente muestra el total encontrado.

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