jueves, 25 de junio de 2026

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.

No hay comentarios.:

Publicar un comentario

Eliminar un carácter x de una cadena 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. ❤️