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 "i" 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] == "i"){
                    c++;
                }
                i++;
            }
            document.getElementById('resultado').value = `El texto tiene ${c} vocales "i"`;
        }
    </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 ingresar un texto desde el teclado y contar cuántas veces aparece la vocal "i". Al presionar el botón Mostrar, el programa analiza el texto y muestra el resultado.

Explicación de cada parte del código

1. Estructura HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

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

<head>

Contiene la información de configuración de la página, como el título y la codificación de caracteres.

<body>

Contiene todo el contenido visible de la página web.

2. Título del ejercicio

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

Muestra el nombre del ejercicio en la página.

3. Formulario

Es el cuadro donde el usuario escribe el texto que desea analizar.

Crea un botón. Cuando se hace clic, ejecuta la función mostrar().

Borra el contenido de las cajas del formulario.

Muestra el resultado del conteo de la vocal "i".

4. Función mostrar()

function mostrar(){

Inicia la función que se ejecuta cuando se presiona 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 "I" e "i" sean tratadas de la misma manera.

let c = 0, i = 0;

Se crean dos variables:

c: almacena la cantidad de vocales "i" encontradas.
i: sirve para recorrer el texto letra por letra.

while(i < s.length){

El ciclo while recorre todo el texto desde el primer hasta el último carácter.

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

Comprueba si la letra actual es una "i". Si lo es, aumenta el contador en uno.

i++;

Avanza a la siguiente letra del texto.

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

Muestra el resultado final indicando cuántas veces apareció la vocal "i" en el texto ingresado.

Resumen del funcionamiento

El usuario escribe un texto.
Presiona el botón Mostrar.
La función mostrar() obtiene el texto.
Convierte todo el texto a minúsculas.
Recorre cada letra utilizando un ciclo while.
Cuenta cada vez que encuentra la vocal "i".
Finalmente muestra el total de vocales encontradas.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

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