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>Invertir una cadena ingresado 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;
            let aux = "", i = s.length -1;
            while(i >= 0){
                aux = aux + s[i];
                i--;
            }
            document.getElementById('resultado').value = aux;
        }
    </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.
length --> la propiedad length devuelve la longitud de una cadena.
>= --> el operador mayor que o igual ( >= ) devuelve true si el operando izquierdo es mayor o igual que el operando derecho, y en false caso contrario.
-- --> el operador de decremento (--) disminuye (o resta de a uno) su operando y retorna 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.

Explicación del Código:

Este programa permite escribir un texto en una caja y, al presionar el botón Mostrar, el sistema invierte el orden de los caracteres y muestra el resultado en otra caja de texto.

1. Encabezado del documento

<!DOCTYPE html> <html lang="es"> <head> ... </head>

Esta parte define que el documento utiliza HTML5, establece el idioma español, configura la codificación UTF-8 para admitir caracteres especiales y adapta la página a dispositivos móviles mediante la etiqueta viewport.

2. Título del ejercicio

<h3>Invertir una cadena ingresado por teclado</h3>

Muestra el título del ejercicio en la página.

3. Formulario

Agrupa todos los controles que utilizará el usuario.

4. Caja de texto de entrada

Permite ingresar la cadena que se desea invertir. El identificador s sirve para acceder a esta caja desde JavaScript.

5. Botón Mostrar

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

6. Botón Limpiar

Borra el contenido de todas las cajas del formulario.

7. Caja de resultado

Aquí se mostrará la cadena invertida.

Explicación de la función JavaScript

Función mostrar()

function mostrar(){

Define la función que realiza todo el proceso de invertir la cadena.

Obtener el texto

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

Obtiene el contenido de la caja de texto cuyo identificador es s y lo guarda en la variable s.

Crear variables

let aux = "", i = s.length - 1;

Se crean dos variables:

aux: almacenará la cadena invertida.
i: guarda la posición del último carácter del texto.

Recorrer la cadena

while(i >= 0){

El ciclo comienza desde el último carácter y continúa hasta llegar al primero.

Agregar caracteres

aux = aux + s[i];

En cada repetición se agrega un carácter a la variable aux, formando la cadena invertida.

Retroceder una posición

i--;

Disminuye el valor de i para leer el carácter anterior.

Mostrar el resultado

document.getElementById('resultado').value = aux;

Cuando el ciclo termina, la cadena ya está invertida y se muestra en la caja de texto llamada resultado.

Ejemplo de funcionamiento

Paso	Contenido de aux
Texto ingresado	HOLA
1	A
2	AL
3	ALO
4	ALOH

Resumen

La función mostrar() obtiene el texto ingresado por el usuario, comienza desde el último carácter utilizando un ciclo while, va agregando cada letra a una nueva cadena y finalmente muestra el texto invertido en la caja de resultado.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

Invertir una cadena ingresado por teclado en HTML y JavaScript