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 palabras de una cadena</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;
            let i = 0, c = 1;
            while(i < s.length){
                if(s[i] == " "){
                    c++;
                }
                i++;
            }
            document.getElementById('resultado').value = `El texto tiene ${c} palabras.`;
        }
    </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.
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 un formulario con un campo de entrada donde el usuario escribe un texto, un botón para ejecutar la función y un campo para mostrar el resultado.

2. Campo de entrada

El input permite ingresar la cadena de texto que será analizada por JavaScript.

3. Botón de acción

Al presionar el botón "Mostrar", se ejecuta la función mostrar().

4. Código JavaScript

function mostrar(){
    let s = document.getElementById('s').value;
    let i = 0, c = 1;

    while(i < s.length){
        if(s[i] == " "){
            c++;
        }
        i++;
    }

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

5. Explicación del algoritmo

El programa recorre el texto carácter por carácter. Cada vez que encuentra un espacio, incrementa el contador de palabras. Al final muestra el resultado en pantalla.

6. Resultado

El sistema muestra cuántas palabras tiene el texto ingresado por el usuario.

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Contar las palabras de una cadena en HTML y JavaScript