sábado, 27 de junio de 2026

Encontrar la primera posición de un carácter x de una cadena 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>Encontrar la primera posición de un carácter x de una cadena</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingresar 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="30">
    </form>
    <script>
        function mostrar(){
            let s = document.getElementById('s').value;
            let x = document.getElementById('x').value;
            let i = 0;
            while(i < s.length){
                if(s[i] != x){
                    i++;
                }else{
                    document.getElementById('resultado').value = `El carácter ${x} está en la posición ${i}`
                    i = s.length;
                }
            }
        }
    </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 lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
< --> el operador menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
!= --> el operador de desigualdad ( != ) comprueba si sus dos operandos no 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 solicita al usuario un texto y un carácter. Después busca la primera vez que ese carácter aparece dentro del texto y muestra la posición donde fue encontrado.

1. Función mostrar()

function mostrar(){ }

La función mostrar() contiene todo el algoritmo del programa. Se ejecuta cuando el usuario hace clic en el botón Mostrar.

2. Obtener el texto ingresado

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

Esta línea obtiene el contenido escrito por el usuario en el cuadro de texto cuyo identificador es s.

  • document representa toda la página HTML.
  • getElementById("s") busca el elemento cuyo id es s.
  • .value obtiene el texto que escribió el usuario.
  • El texto se guarda en la variable s.

3. Obtener el carácter a buscar

let x = document.getElementById("x").value;

Se obtiene el carácter que el usuario desea buscar dentro de la cadena y se almacena en la variable x.

4. Inicializar el contador

let i = 0;

La variable i representa la posición que se está revisando dentro de la cadena. Comienza en cero porque la primera posición de un texto en JavaScript siempre es 0.

5. Recorrer toda la cadena

while(i < s.length)

El ciclo while recorre el texto carácter por carácter.

  • i indica la posición actual.
  • s.length devuelve la cantidad de caracteres que tiene la cadena.
  • Mientras i sea menor que la longitud del texto, el ciclo continuará ejecutándose.

6. Comparar cada carácter

if(s[i] != x)

En cada recorrido se compara el carácter ubicado en la posición i con el carácter que el usuario desea encontrar.

  • Si son diferentes, continúa buscando.
  • Si son iguales, significa que encontró el carácter.

7. Continuar la búsqueda

i++;

Cuando el carácter no coincide, el contador aumenta una posición para revisar el siguiente carácter de la cadena.

8. Mostrar el resultado

document.getElementById("resultado").value = `El carácter ${x} está en la posición ${i}`;

Cuando el carácter es encontrado, se muestra un mensaje indicando la posición donde apareció por primera vez.

9. Finalizar el ciclo

i = s.length;

Esta instrucción hace que i tome el mismo valor que la longitud de la cadena. Como la condición del ciclo ya no se cumple, el while termina inmediatamente y evita seguir recorriendo el texto.

Resumen

El algoritmo comienza leyendo el texto y el carácter ingresados por el usuario. Luego utiliza un ciclo while para recorrer la cadena desde la primera posición hasta la última. En cada recorrido compara el carácter actual con el carácter buscado. Cuando encuentra la primera coincidencia, muestra la posición donde fue encontrada y finaliza el ciclo para no seguir buscando.

Código del ejercicio: Otra forma de hacer

<!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>Encontrar la primera posición de un carácter x de una cadena</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingresar carácter:</label>
        <input type="text" id="l"><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="30">
    </form>
    <script>
        function mostrar(){
            let s = document.getElementById('s').value;
            let l = document.getElementById('l').value;
            let i = 0, p = 0, sw = 0;
            while(i < s.length && sw == 0){
                if(s[i] == l){
                    p = i;
                    sw = 1;
                }
                i++;
            }
            document.getElementById('resultado').value = `El carácter ${l} está en la posición ${p}`;
        }
    </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 lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
< --> el operador menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
!= --> el operador de desigualdad ( != ) comprueba si sus dos operandos no 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

La página contiene un formulario que permite al usuario ingresar un texto y un carácter para realizar la búsqueda.

<form> ... </form>

Dentro del formulario existen los siguientes elementos:

  • Un cuadro de texto para ingresar la cadena.
  • Un cuadro de texto para ingresar el carácter.
  • Un botón Mostrar que ejecuta la función mostrar().
  • Un botón Limpiar que borra los datos del formulario.
  • Un cuadro donde se muestra el resultado.

2. Función mostrar()

function mostrar(){ }

Esta función se ejecuta cuando el usuario hace clic en el botón Mostrar. Su objetivo es buscar la primera posición donde aparece el carácter dentro del texto.

3. Obtener los datos ingresados

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

Estas instrucciones obtienen los datos escritos por el usuario.

  • s almacena la cadena o texto.
  • l almacena el carácter que se desea buscar.

4. Declaración de variables

let i = 0, p = 0, sw = 0;

Se crean tres variables para controlar el proceso de búsqueda.

  • i: indica la posición que se está revisando.
  • p: guarda la posición donde se encontró el carácter.
  • sw: funciona como un indicador. Vale 0 cuando aún no se encuentra el carácter y cambia a 1 cuando ya fue encontrado.

5. Recorrer la cadena

while(i < s.length && sw == 0)

El ciclo while revisa cada carácter del texto.

El ciclo continúa mientras:

  • La posición i sea menor que la longitud de la cadena.
  • El carácter todavía no haya sido encontrado (sw == 0).

6. Comparar el carácter

if(s[i] == l){ p = i; sw = 1; }

En cada recorrido se compara el carácter de la posición actual con el carácter ingresado por el usuario.

Si ambos caracteres son iguales:

  • La posición se guarda en la variable p.
  • La variable sw cambia a 1 para detener la búsqueda.

7. Pasar al siguiente carácter

i++;

Después de revisar una posición, la variable i aumenta en uno para continuar con el siguiente carácter del texto.

8. Mostrar el resultado

document.getElementById('resultado').value = `El carácter ${l} está en la posición ${p}`;

Finalmente, se muestra un mensaje indicando la posición donde se encontró por primera vez el carácter buscado.

Resumen del funcionamiento

El programa permite ingresar una cadena de texto y un carácter. Luego utiliza un ciclo while para recorrer la cadena carácter por carácter. Cuando encuentra la primera coincidencia, guarda la posición, detiene el recorrido y muestra el resultado al usuario.

a la/s
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)

Encontrar la primera posición de 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. ❤️