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 cuántas veces se repite una vocal en una cadena dada por teclado</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingrese una vocal:</label>
        <input type="text" id="v"><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 v = document.getElementById('v').value;
            let c = 0, i = 0;
            while(i < s.length){
                if(s[i] == v){
                    c++;
                }
                i++;
            }
            document.getElementById('resultado').value = `El texto tiene ${c} vocales ${v}`;
        }
    </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.
< --> 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 escribir un texto y una vocal. Luego, al presionar el botón Mostrar, el programa cuenta cuántas veces aparece esa vocal dentro del texto ingresado y muestra el resultado.

1. Estructura principal del documento

<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

Esta parte crea la estructura básica de una página web.

<!DOCTYPE html> indica que el documento utiliza HTML5.
<html> contiene toda la página.
<head> guarda información como el título y la codificación.
<body> contiene todo lo que el usuario puede ver.

2. Título del ejercicio

<h3> Contar cuántas veces se repite una vocal en una cadena dada por teclado </h3>

Muestra el nombre del ejercicio en la página.

3. Formulario

El formulario contiene todos los controles con los que interactúa el usuario.

Una caja para escribir el texto.
Una caja para escribir la vocal.
Un botón para ejecutar el programa.
Un botón para limpiar los datos.
Una caja donde aparecerá el resultado.

4. Caja para ingresar el texto

Aquí el usuario escribe la cadena o frase que desea analizar.

5. Caja para ingresar la vocal

Aquí se escribe la vocal que se quiere buscar dentro del texto.

6. Botón Mostrar

onclick="mostrar()"

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

7. Función mostrar()

function mostrar(){ }

Esta función realiza todo el trabajo del programa: obtiene los datos, recorre el texto, cuenta las vocales y muestra el resultado.

8. Leer el texto y la vocal

let s = document.getElementById("s").value; let v = document.getElementById("v").value;

Estas instrucciones leen lo que escribió el usuario.

s guarda el texto.
v guarda la vocal que se desea buscar.

9. Crear las variables

let c = 0; let i = 0;

c almacena la cantidad de veces que aparece la vocal.
i indica la posición de cada letra del texto.

10. Recorrer el texto

while(i < s.length){ ... i++; }

El ciclo while revisa una por una todas las letras del texto.

s.length indica la cantidad de caracteres del texto.
Mientras existan letras por revisar, el ciclo continúa.

11. Comparar cada letra

if(s[i] == v){ c++; }

En cada repetición se compara la letra actual del texto con la vocal ingresada por el usuario.

Si son iguales, el contador aumenta en uno.
Si son diferentes, continúa revisando la siguiente letra.

12. Mostrar el resultado

document.getElementById("resultado").value = `El texto tiene ${c} vocales ${v}`;

Después de revisar todo el texto, el programa muestra cuántas veces se repitió la vocal.

Ejemplo:

Texto: computadora
Vocal: o
Resultado: El texto tiene 2 vocales o.

Resumen del funcionamiento

El usuario escribe un texto.
Escribe una vocal.
Hace clic en el botón Mostrar.
JavaScript lee ambos datos.
El ciclo while revisa todas las letras del texto.
Cada vez que encuentra la vocal, incrementa el contador.
Al finalizar, muestra cuántas veces apareció esa vocal.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

Contar cuántas veces se repite una vocal en una cadena dada por teclado en HTML y JavaScript