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 la vocal "e" en una cadena dada por teclado</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><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.toLowerCase();
            let c = 0, i = 0;
            while(i < s.length){
                if(s[i] == "e"){
                    c++;
                }
                i++;
            }
            document.getElementById('resultado').value = `El texto tiene ${c} vocales "e"`;
        }
    </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.
< --> 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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
== --> 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:

Este programa permite que el usuario escriba un texto en un cuadro de entrada. Cuando presiona el botón Mostrar, JavaScript recorre cada letra del texto y cuenta cuántas veces aparece la vocal "e". Finalmente, muestra el resultado en otro cuadro de texto.

1. Declaración del documento HTML

<!DOCTYPE html>: Indica que el documento utiliza HTML5.
<html lang="es">: Define que el idioma de la página es español.
<head>: Contiene la información de configuración del documento.
<meta charset="UTF-8">: Permite utilizar caracteres especiales como la ñ y las vocales con tilde.
<meta name="viewport">: Hace que la página se adapte correctamente a dispositivos móviles.
<title>: Define el título que aparece en la pestaña del navegador.

2. Título del ejercicio

La etiqueta <h3> muestra el nombre del ejercicio: "Contar la vocal 'e' en una cadena dada por teclado".

3. Formulario

<form> agrupa todos los controles del formulario.
<label> muestra el texto "Ingresar texto:".
<input type="text" id="s"> crea el cuadro donde el usuario escribe el texto.
<input type="button"> crea el botón Mostrar, que ejecuta la función mostrar().
<input type="reset"> limpia todos los datos del formulario.
<input type="text" id="resultado"> muestra el resultado final del programa.

4. Función mostrar()

La función mostrar() se ejecuta cuando el usuario hace clic en el botón Mostrar.

let s = document.getElementById('s').value.toLowerCase();
Obtiene el texto escrito por el usuario y lo convierte a minúsculas para que las letras E y e sean tratadas de la misma manera.
let c = 0, i = 0;
Se crean dos variables:
- c: almacena la cantidad de vocales "e" encontradas.
- i: controla la posición de cada carácter del texto.
while(i < s.length)
Recorre el texto letra por letra hasta llegar al final de la cadena.
if(s[i] == "e")
Comprueba si la letra actual es una vocal "e".
c++;
Si la condición es verdadera, incrementa en uno el contador de vocales.
i++;
Avanza a la siguiente letra del texto.
document.getElementById('resultado').value = ...
Muestra el mensaje con la cantidad de vocales "e" encontradas.

5. Funcionamiento del algoritmo

El usuario escribe un texto.
Hace clic en el botón Mostrar.
El programa convierte el texto a minúsculas.
Recorre todas las letras utilizando un ciclo while.
Cada vez que encuentra una letra "e", aumenta el contador.
Al finalizar el recorrido, muestra la cantidad de vocales "e" encontradas.

6. Ejemplo de ejecución

Entrada:

Excelente ejercicio

Proceso:

El programa revisa cada carácter y encuentra seis letras "e".

Salida:

El texto tiene 6 vocales "e"

Conclusión

Este ejercicio enseña cómo leer un dato ingresado por el usuario, recorrer una cadena utilizando un ciclo while, comparar caracteres mediante una estructura if, contar ocurrencias de un carácter específico y mostrar el resultado en un cuadro de texto utilizando JavaScript.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

Contar la vocal "e" en una cadena dada por teclado en HTML y JavaScript