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 "a" 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] == "a"){
                    c++;
                }
                i++;
            }
            document.getElementById('resultado').value = `El texto tiene ${c} vocales "a"`;
        }
    </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:

¿Qué hace este programa?

Este programa permite al usuario escribir un texto. Luego, al presionar el botón Mostrar, el programa cuenta cuántas veces aparece la vocal "a" y muestra el resultado en una caja de texto.

Explicación de cada parte del código

1. Declaración del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

2. Etiqueta HTML

Informa que la página está escrita en español.

3. Sección <head>

Contiene información de la página que el usuario normalmente no ve.

UTF-8: Permite mostrar correctamente letras como ñ y acentos.
Viewport: Hace que la página sea adaptable a celulares y computadoras.
Title: Es el nombre que aparece en la pestaña del navegador.

4. Título de la página

<h3>Contar la vocal "a" en una cadena dada por teclado</h3>

Muestra el nombre del ejercicio al usuario.

5. Formulario

Agrupa todos los controles del ejercicio.

6. Caja para ingresar el texto

Aquí el usuario escribe la cadena de texto.

7. Botón Mostrar

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

8. Botón Limpiar

Borra el contenido de las cajas de texto.

9. Caja del resultado

Aquí se muestra la cantidad de vocales "a" encontradas.

Explicación de la función JavaScript

10. Función mostrar()

function mostrar(){

Es la función que realiza todo el trabajo cuando se presiona el botón Mostrar.

11. Obtener el texto

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

Obtiene el texto escrito por el usuario y lo convierte a minúsculas para contar correctamente tanto la "A" como la "a".

12. Variables

let c = 0, i = 0;

c: Guarda la cantidad de vocales "a".
i: Indica la posición de cada letra del texto.

13. Recorrer el texto

while(i < s.length){

El ciclo while revisa una por una todas las letras del texto hasta llegar al final.

14. Verificar si la letra es "a"

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

Si la letra actual es una "a", el contador aumenta en uno.

15. Pasar a la siguiente letra

i++;

Incrementa la posición para revisar la siguiente letra de la cadena.

16. Mostrar el resultado

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

Finalmente, muestra en la caja de resultado cuántas veces aparece la vocal "a" en el texto ingresado.

Resumen

El programa solicita un texto al usuario, lo convierte a minúsculas, recorre cada uno de sus caracteres utilizando un ciclo while, cuenta cuántas veces aparece la vocal "a" y muestra el total encontrado en la caja de resultado.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

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