Búsqueda Binaria con Números: Una Experiencia Visual
El desarrollo de aplicaciones web eficientes es esencial en el mundo moderno de la programación. Este tutorial tiene como objetivo explorar la optimización algorítmica mediante la implementación de la búsqueda binaria y lineal en JavaScript para estudiantes y desarrolladores principiantes. Aprenderemos sobre la importancia de los algoritmos de búsqueda eficientes y cómo la búsqueda binaria destaca en la eficiencia y la velocidad.
La búsqueda binaria es un algoritmo eficiente para encontrar un elemento en una lista ordenada. Sin embargo, entender cómo funciona puede resultar desafiante para algunos, exploraremos un ejemplo de búsqueda binaria y lineal mplementado de manera visual y interactiva mediante HTML, CSS y JavaScript.
Introducción
Los algoritmos son conjuntos de pasos ordenados y definidos que resuelven un problema o realizan una tarea específica. Están presentes en todas las áreas de la informática y las matemáticas, y su función es encontrar una solución a un problema de manera eficiente.
La búsqueda binaria es un algoritmo eficiente utilizado para encontrar un elemento particular dentro de una lista ordenada. Funciona dividiendo repetidamente a la mitad la porción de la lista donde podría encontrarse el elemento deseado. Esto se hace comparando el elemento con el valor en el medio de la lista y descartando la mitad en la que seguramente no se encuentra el elemento.
En términos prácticos, la búsqueda binaria se utiliza en situaciones donde tenemos una gran cantidad de datos y queremos encontrar uno específico de manera rápida, siempre y cuando la lista esté ordenada. Por ejemplo, en bases de datos, en sistemas de gestión de inventario, en directorios telefónicos, o en listas ordenadas de nombres.
Desde la perspectiva de la programación, la búsqueda binaria se puede implementar en diversos lenguajes, incluyendo JavaScript. Utilizando arrays ordenados, se puede escribir una función que aplique el algoritmo de búsqueda binaria para encontrar un elemento específico dentro de esa lista de manera eficiente.
La ventaja de la búsqueda binaria radica en su eficiencia en comparación con otros métodos de búsqueda, especialmente cuando se trata de grandes conjuntos de datos. En lugar de recorrer linealmente toda la lista, la búsqueda binaria reduce significativamente el número de pasos necesarios para encontrar un elemento, ya que divide el espacio de búsqueda a la mitad en cada paso.
Ejemplos Fundamentales
La búsqueda binaria es fundamental en diversas aplicaciones y sistemas para agilizar la búsqueda de elementos en conjuntos de datos ordenados. Aquí tienes algunos ejemplos destacados:
Bases de Datos: En bases de datos que almacenan información ordenada, la búsqueda binaria se utiliza para encontrar registros específicos de manera rápida, mejorando la eficiencia de las consultas.
Sistemas de Gestión de Inventarios: En aplicaciones empresariales o de comercio electrónico, la búsqueda binaria se emplea para encontrar productos específicos dentro de inventarios que se mantienen ordenados.
Directorios Telefónicos o Listas de Contactos: En aplicaciones de contactos o directorios telefónicos digitales, la búsqueda binaria permite encontrar contactos por nombre de manera eficiente.
Aplicaciones de Búsqueda en la Web: Motores de búsqueda utilizan variantes de la búsqueda binaria para indexar y recuperar información en grandes volúmenes de datos de manera rápida y precisa.
Juegos y Aplicaciones Interactivas: En aplicaciones de juegos o sistemas interactivos con grandes conjuntos de datos (por ejemplo, búsquedas en mapas, filtrado de elementos en listas), la búsqueda binaria es útil para acceder a datos específicos de forma rápida.
Sistemas de Autenticación y Control de Acceso: En sistemas de autenticación, como la verificación de nombres de usuario en orden alfabético, la búsqueda binaria permite encontrar nombres de usuario en listas ordenadas de manera eficiente.
La fórmula básica matemática para la búsqueda binaria es
La búsqueda binaria se basa en dividir repetidamente un conjunto de datos en mitades y verificar si el elemento buscado está en la mitad superior o inferior, descartando la mitad en la que no se encuentra el elemento hasta que se encuentra o se determina que no está presente.
Siendo n el tamaño del arreglo.
inicio = 0
fin = n – 1
mientras inicio <= fin:
medio = (inicio + fin) / 2
si arreglo[medio] == valor_buscado:
return medio
si no:
si arreglo[medio] < valor_buscado:
inicio = medio + 1
si no:
fin = medio – 1
return -1 // Si el elemento no está en el arreglo
Como vemos, la búsqueda binaria es como un juego de «adivina el número» donde intentas adivinar un número entre 1 y 100, y tu amigo te da pistas sobre si estás por encima o por debajo del número correcto.
En JavaScript, imagina que tienes una lista ordenada de números del 1 al 100. Con la búsqueda binaria, puedes encontrar un número más rápido. Comienzas mirando el número en la mitad de la lista. Si ese número es mayor que el que buscas, sabes que tu número está en la mitad inferior. Si es menor, está en la mitad superior.
Luego, vuelves a hacer lo mismo en la mitad donde podría estar tu número. Este proceso continúa hasta que encuentras el número correcto. Cada vez, descartas la mitad de la lista en la que no puede estar tu número.
Implementando Búsqueda Binaria con HTML, CSS y JS
HTML (HyperText Markup Language): HTML es el lenguaje fundamental para la construcción de páginas web. Se encarga de definir la estructura y el contenido de una página mediante etiquetas. Estas etiquetas representan elementos como encabezados, párrafos, imágenes, enlaces y más. Utilizar HTML es como crear un esqueleto para tu página web, definiendo qué elementos contiene y cómo se organizan.
CSS (Cascading Style Sheets): CSS es un lenguaje que complementa a HTML y se utiliza para estilizar y diseñar páginas web. Permite definir la apariencia visual de los elementos HTML, como colores, fuentes, márgenes, tamaños y posicionamiento. Con CSS, puedes mejorar el aspecto estético y la presentación de tu sitio web, dando estilo y personalidad a la estructura creada con HTML.
JavaScript: JavaScript es un lenguaje de programación que agrega interactividad y dinamismo a las páginas web. A través de JavaScript, puedes realizar acciones como validar formularios, crear efectos visuales, modificar el contenido de la página en respuesta a eventos (como clics o desplazamientos) y comunicarte con servidores para obtener o enviar datos sin recargar la página. Es esencial para crear experiencias web interactivas y fluidas.
Estos tres lenguajes, cuando se combinan, permiten crear sitios web completos y funcionales, donde HTML define la estructura, CSS controla el diseño visual y JavaScript añade la interactividad. Comprender los fundamentos de cada uno te brinda la base necesaria para comenzar a construir y desarrollar proyectos web.
Tecnologías Utilizadas:
HTML: Estructurando la Búsqueda Binaria
El código HTML es la base de nuestra aplicación de Búsqueda Binaria. Define elementos clave como el contenedor principal, el título que indica la funcionalidad de búsqueda y el espacio para que los usuarios ingresen el número a buscar. Además, muestra la lista de números del 5 al 80, proporcionando una representación visual del conjunto de datos.
CSS: Diseño y Estilo para la Experiencia del Usuario
La hoja de estilos CSS agrega la capa visual a nuestra aplicación. Define la apariencia de los elementos, asegurándose de que la interfaz sea atractiva y fácil de usar. Los colores, tamaños y disposición se ajustan a diferentes dispositivos, brindando una experiencia receptiva tanto para dispositivos móviles como de escritorio. Los estilos proporcionan un ambiente agradable para la interacción del usuario.
JavaScript: Funcionalidad Dinámica de la Búsqueda
El código JavaScript es el motor de nuestra aplicación. Maneja la lógica detrás de la búsqueda binaria. Al recibir el número ingresado por el usuario, realiza la búsqueda binaria en el arreglo predefinido, actualizando dinámicamente la interfaz con resultados en tiempo real. Esta funcionalidad proporciona una experiencia interactiva y fluida para los usuarios, mostrando el poder de los algoritmos de búsqueda eficientes en acción.
Espacio de Trabajo y Configuración Inicial
Estableceremos un espacio de trabajo limpio para nuestro proyecto, mostrando cómo organizar archivos, configurar repositorios Git y desplegar el proyecto en GitHub Pages para compartirlo con el mundo.
Paso 1: Descargar Visual Studio Code
- Sitio web oficial: Dirígete al sitio web oficial de Visual Studio Code.
- Descarga: Haz clic en el botón de descarga. Dependiendo de tu sistema operativo, se seleccionará automáticamente el instalador adecuado (Windows, macOS o Linux).
Paso 2: Instalar Visual Studio Code
Windows
- Archivo descargado: Una vez que se complete la descarga, haz doble clic en el archivo de instalación (
.exe) que se descargó. - Instalación: Sigue las instrucciones del instalador. Puedes elegir las configuraciones predeterminadas o personalizarlas según tus preferencias.
macOS
- Archivo descargado: En macOS, el archivo descargado suele estar en la carpeta «Descargas». Haz doble clic en el archivo
.dmgdescargado. - Instalación: Arrastra el icono de Visual Studio Code a la carpeta de Aplicaciones. Una vez allí, puedes abrir Visual Studio Code desde Launchpad o buscándolo en Spotlight.
Linux
- Archivo descargado: Dependiendo de tu distribución de Linux, el archivo descargado se guardará en una ubicación específica (generalmente la carpeta «Descargas»).
- Terminal: Abre la terminal y navega hasta la ubicación del archivo descargado.
- Descomprimir: Ejecuta comandos como
tarodpkgsegún el tipo de archivo que hayas descargado para descomprimir e instalar Visual Studio Code.
Paso 3: Ejecutar Visual Studio Code
Una vez completada la instalación:
- Windows: Puedes encontrar Visual Studio Code en el menú de inicio o la barra de búsqueda. Haz clic para abrirlo.
- macOS: Encuentra Visual Studio Code en la carpeta de Aplicaciones y ábrelo desde allí.
- Linux: Si instalaste desde el administrador de paquetes, busca Visual Studio Code en el menú de aplicaciones o ejecútalo desde la terminal con el comando correspondiente.
Paso 4: Actualizaciones
Visual Studio Code se actualiza automáticamente, pero también puedes verificar manualmente si hay actualizaciones desde el menú de configuración (icono de engranaje) en la esquina inferior izquierda del editor.
¡Y eso es todo! Ahora deberías tener Visual Studio Code listo para usar en tu sistema.
Implementación del Frontend (HTML)
El código HTML proporciona la estructura de la aplicación web. Define los elementos visuales y de entrada para los usuarios. En el contexto de una aplicación meteorológica, podríamos tener:
- Input para la Ciudad: Un elemento
inputdonde los usuarios pueden ingresar el nombre de la ciudad. - Menú Desplegable: Un
selectque contiene una lista de ciudades de todo el mundo o lugares específicos. - Áreas de Visualización: Elementos
divospanpara mostrar la información meteorológica.
En Visual Studio Code, estos elementos se codifican dentro de archivos HTML, y es aquí donde se definen y organizan.
Crea un Archivo inde.html y pega este codigo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Búsqueda Binaria con Números</title>
</head>
<body>
<div id="contenedor">
<h2>Búsqueda Binaria con Números del 5 al 80</h2>
<input type="number" id="numeroBusqueda" placeholder="Ingrese el número a buscar">
<!-- Lista de números -->
<p>5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80 </p>
<!-- Botón para realizar la búsqueda -->
<button onclick="buscarNumero()">Buscar</button>
<div id="resultado"></div>
</div>
<!-- JavaScript -->
<script src="app.js"></script>
</body>
</html>
Implementación del Frontend (CSS)
El código CSS aplicado a esta aplicación de búsqueda binaria se encarga de estilizar los diferentes elementos HTML para asegurar una presentación visualmente atractiva y legible.
El CSS define reglas para el cuerpo de la página, el contenedor principal, el título, los elementos de entrada como el cuadro de texto y el botón, así como las áreas de resultado. Se utilizan diferentes propiedades como display, align-items, background-color, padding, border, font-weight, y text-align para darle estilo a los elementos y organizarlos adecuadamente en la interfaz.
Por ejemplo, se utiliza display: flex para alinear y distribuir los elementos del cuerpo y justify-content: center para centrarlos horizontalmente. Las propiedades padding y margin se emplean para ajustar los espacios alrededor de los elementos y mejorar la legibilidad visual. Además, se usan colores específicos (#faffcd, #fff, #4caf50, #333, entre otros) para definir el esquema de colores de la interfaz.
crea un archivo style.css y Pega este Codigo (CSS)
/* Estilos para el cuerpo */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #faffcd;
/* Fondo amarillo limón claro */
}
/* Estilos para el contenedor */
#contenedor {
border: 2px solid black;
padding: 20px;
width: 70%;
background-color: #fff;
/* Fondo blanco */
}
/* Estilos para el título */
h2 {
text-align: center;
color: #333;
/* Texto oscuro */
}
/* Estilos para el input */
input {
width: calc(80% - 16px);
/* Ancho del 80% y teniendo en cuenta el relleno */
padding: 8px;
margin-bottom: 10px;
display: block;
margin: 0 auto;
/* Centrado horizontal */
text-align: center;
font-weight: 700;
font-size: 20px;
}
/* Estilos para el botón */
button {
width: calc(85% - 16px);
/* Ancho del 80% y teniendo en cuenta el relleno */
padding: 10px;
background-color: #4caf50;
/* Verde */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
display: block;
margin: 0 auto;
/* Centrado horizontal */
}
/* Estilos para el resultado */
#resultado {
font-weight: bold;
text-align: center;
/* Centrado horizontal */
font-weight: 700;
font-size: 20px;
height: 200px;
}
/* Estilos para los números en el arreglo */
.numero-arreglo {
background-color: #ffff66;
/* Amarillo */
padding: 5px;
margin: 2px;
padding-bottom: 5px;
text-align: center;
font-weight: 700;
font-size: 20px;
padding-top: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
/* Estilos para los párrafos */
p {
display: block;
margin: 0;
padding: 10px 0;
line-height: 1.5; /* Ajusta el valor según sea necesario */
/* Resalta el número buscado en verde */
.resaltado {
background-color: #4caf50;
/* Verde */
color: white;
padding: 5px;
border-radius: 4px;
/* Ajustado a 4px */
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
/* Corregido: Cambiado a "padding-bottom" */
margin-top: 10px;
margin-bottom: 10px;
}
Implementación del Frontend (JS)
Generación del arreglo ordenado de números del 5 al 80:
- Utiliza
Array.frompara crear un arreglo llamadonumerosque contiene valores del 5 al 84. - Esta línea:
const numeros = Array.from({ length: 80 }, (_, index) => index + 5);asigna valores al arreglonumerosdel 5 al 84, utilizando una función que suma 5 al índice.
Implementación de la función de búsqueda binaria:
- La función
busquedaBinarialleva a cabo una búsqueda binaria en un arreglo ordenado. - Toma como argumentos el arreglo
arry el númerotargetque se está buscando. - Utiliza un algoritmo de búsqueda binaria: divide repetidamente el arreglo en mitades y compara el valor medio con el
target, reduciendo el rango hasta encontrar el número o determinar que no está presente.
Lógica de la función buscarNumero:
- La función
buscarNumeroes activada por un evento de clic en un botón. - Captura el número ingresado por el usuario desde un campo de entrada HTML (
<input>) con el idnumeroBusqueda. - Utiliza este número para buscar en el arreglo
numerosusando la funciónbusquedaBinaria. - Luego, muestra en un elemento HTML (
resultadoElemento) la lista de números del arreglo, resaltando el número buscado y muestra el resultado de la búsqueda binaria.
Crea un Archivo script.js y pega este Coidigo Javascript
// Generar un arreglo ordenado de números del 5 al 80
const numeros = Array.from({ length: 80 }, (_, index) => index + 5);
// Función de búsqueda binaria
function busquedaBinaria(arr, target) {
let inicio = 0;
let fin = arr.length - 1;
while (inicio <= fin) {
const medio = Math.floor((inicio + fin) / 2);
if (arr[medio] === target) {
return `Número ${target} encontrado en la posición ${medio}.`;
} else if (arr[medio] < target) {
inicio = medio + 1;
} else {
fin = medio - 1;
}
}
return `Número ${target} no encontrado en el arreglo.`;
}
// Función para buscar el número ingresado por el usuario
function buscarNumero() {
const numeroIngresado = parseInt(document.getElementById("numeroBusqueda").value);
const resultadoElemento = document.getElementById("resultado");
resultadoElemento.innerHTML = `<p>Arreglo: ${numeros.map(numero => `<span class="numero-arreglo${numero === numeroIngresado ? ' resaltado' : ''}">${numero}</span>`).join(", ")}</p>`;
resultadoElemento.innerHTML += `<p>Número a buscar: ${numeroIngresado}</p>`;
resultadoElemento.innerHTML += `<p>${busquedaBinaria([...numeros], numeroIngresado)}</p>`;
}
Vemos como se ve:
Resultados:
Esta combinación de código define un arreglo predefinido, un algoritmo de búsqueda binaria y una función para buscar un número ingresado por el usuario en ese arreglo. Cuando se ejecuta buscarNumero(), muestra visualmente el arreglo completo, resaltando el número buscado y proporciona información sobre si se encontró o no utilizando el algoritmo de búsqueda binaria.
Búsqueda Binaria con Rango de Datos
A continuacion te presento este código HTML, es una nueva aplicacion, te la dejo como plantilla la misma utiliza JavaScript para llevar a cabo una búsqueda binaria dentro de un rango de números ingresados por el usuario, es decir a diferencia del anterior, aqui lo vamos hacer es pedirle al usuario que indique el primer rango de busqueda y el ultimo, y diga dentro de esos cual de desea buscar. Se compone de elementos HTML para la entrada de datos y un contenedor para mostrar los resultados. Es el mismo proceso de Busqueda pero ahora con los limites.
🌐 HTML
El HTML define los elementos visuales y de entrada para el usuario:
- Inputs: Permiten al usuario ingresar el rango inicial, el rango final y el número que desea buscar.
- Botón: Genera el arreglo de números dentro del rango y realiza la búsqueda.
- Contenedor de resultados: Muestra la lista de números y el resultado de la búsqueda.
🎨 CSS
El CSS proporciona estilos visuales para mejorar la apariencia y el diseño de los elementos HTML. Define reglas para el cuerpo, títulos, inputs, botón y resultados, entre otros.
🧮 JavaScript
generarArregloYBuscar(): Esta función obtiene el rango inicial y final, genera un arreglo de números dentro del rango y realiza la búsqueda binaria.busquedaBinaria(): Implementa el algoritmo de búsqueda binaria en el arreglo generado y devuelve el resultado.- Los resultados se actualizan en el contenedor de resultados para mostrar la lista de números y el resultado de la búsqueda, resaltando el número buscado si se encuentra.
Crea un Archivo index.html y pega este Codigo Completo HTML, CSS Y JS
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Búsqueda Binaria con Números</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #faffcd; /* Fondo amarillo limón claro */
}
#contenedor {
border: 2px solid black;
padding: 20px;
width: 70%;
background-color: #fff; /* Fondo blanco */
}
h2 {
text-align: center;
color: #333; /* Texto oscuro */
}
input {
width: calc(80% - 16px); /* Ancho del 80% y teniendo en cuenta el relleno */
padding: 8px;
margin-bottom: 10px;
display: block;
margin: 0 auto; /* Centrado horizontal */
text-align: center;
font-weight: 700;
font-size: 20px;
}
button {
width: calc(85% - 16px); /* Ancho del 80% y teniendo en cuenta el relleno */
padding: 10px;
background-color: #4caf50; /* Verde */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
display: block;
margin: 0 auto; /* Centrado horizontal */
}
#resultado {
font-weight: bold;
text-align: center; /* Centrado horizontal */
font-weight: 700;
font-size: 20px;
}
.numero-arreglo {
display: inline-block;
background-color: #ffff66; /* Amarillo */
padding: 5px;
margin: 2px;
padding-bottom: 5px;
text-align: center;
font-weight: 700;
font-size: 20px;
padding-top: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.resaltado {
background-color: #4caf50; /* Verde */
color: white;
border-radius: 4px; /* Ajustado a 4px */
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-top: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="contenedor">
<h2>Búsqueda Binaria con Números</h2>
<!-- Caja de texto para ingresar el rango de números -->
<input type="text" id="rangoInicial" placeholder="Ingrese el primer valor del rango">
<br>
<input type="text" id="rangoFinal" placeholder="Ingrese el último valor del rango">
<br>
<!-- Caja de texto para ingresar el número a buscar -->
<input type="text" id="numeroBusqueda" placeholder="Ingrese el número a buscar">
<br>
<!-- Botón para generar el nuevo arreglo y realizar la búsqueda -->
<button onclick="generarArregloYBuscar()">Generar Arreglo y Buscar</button>
<br>
<div id="resultado"></div>
</div>
<script>
// Variables para almacenar el rango y el arreglo generado
let rangoInicial, rangoFinal, arregloGenerado;
// Función de búsqueda binaria
function busquedaBinaria(arr, target) {
let inicio = 0;
let fin = arr.length - 1;
while (inicio <= fin) {
const medio = Math.floor((inicio + fin) / 2);
if (arr[medio] === target) {
return `Número <span class="resaltado">${target}</span> encontrado en la posición ${medio}.`;
} else if (arr[medio] < target) {
inicio = medio + 1;
} else {
fin = medio - 1;
}
}
return `Número ${target} no encontrado en el arreglo.`;
}
// Función para generar un nuevo arreglo y realizar la búsqueda
function generarArregloYBuscar() {
// Obtener los valores del rango inicial y final
rangoInicial = parseInt(document.getElementById("rangoInicial").value);
rangoFinal = parseInt(document.getElementById("rangoFinal").value);
// Generar un nuevo arreglo ordenado de números dentro del rango
arregloGenerado = Array.from({ length: rangoFinal - rangoInicial + 1 }, (_, index) => index + rangoInicial);
// Obtener el contenedor para mostrar los resultados
const contenedor = document.getElementById("contenedor");
// Crear un elemento para mostrar la lista y resultados
const resultadoElemento = document.getElementById("resultado");
// Resaltar el número buscado en verde
resultadoElemento.innerHTML = `<p>Arreglo: ${arregloGenerado.map(numero => `<span class="numero-arreglo${numero === parseInt(document.getElementById("numeroBusqueda").value) ? ' resaltado' : ''}">${numero}</span>`).join(", ")}</p>`;
// Obtener el número a buscar
const numeroBusqueda = parseInt(document.getElementById("numeroBusqueda").value);
// Realizar la búsqueda en el nuevo arreglo
resultadoElemento.innerHTML += `<p>Número a buscar: ${numeroBusqueda}</p>`;
resultadoElemento.innerHTML += `<p>${busquedaBinaria([...arregloGenerado], numeroBusqueda)}</p>`;
}
</script>
</body>
</html>
<script type="module" src="script.js"></script>
</body>
</html>
En este ejemplo como vez se ofrece una mayor flexibilidad y dinamismo al permitir al usuario definir el rango de números a analizar, generando así un arreglo dinámico y ejecutando la búsqueda binaria en función de esos parámetros específicos. Esto lo hace más versátil y adaptable a diferentes contextos y necesidades del usuario en comparación con el primer código, que está más limitado a una lista estática predefinida.
Búsqueda Lineal:
Búsqueda Lineal:
La búsqueda lineal es un algoritmo simple que recorre secuencialmente cada elemento de una lista para encontrar un valor específico. Comienza desde el primer elemento y avanza uno por uno hasta encontrar la coincidencia o llegar al final de la lista.
Contextualización del Ejercicio:
- En este caso, la página HTML proporciona una lista predefinida de palabras. Cuando un usuario ingresa una palabra en el campo de búsqueda y presiona el botón, el algoritmo recorre la lista una por una para encontrar esa palabra. Si se encuentra, se muestra la posición de esa palabra en la lista y se resalta visualmente en la interfaz.
Uso del Algoritmo:
Ventajas:
- Simplicidad: Es fácil de entender e implementar, ideal para listas pequeñas o cuando no se necesita una búsqueda altamente optimizada.
- Implementación rápida: Para pequeñas cantidades de datos, la búsqueda lineal puede ser suficientemente eficiente.
Desventajas:
- Eficiencia: Su complejidad es lineal (O(n)), lo que significa que a medida que la lista crece, el tiempo de búsqueda aumenta proporcionalmente.
- Ineficiencia para grandes conjuntos de datos: No es óptimo para listas muy grandes, ya que la búsqueda puede ser lenta.
Ejemplos y Casos de Uso:
- Ejemplos de Uso: La búsqueda lineal se puede aplicar en escenarios donde la lista de elementos es limitada o cuando la eficiencia no es crítica.
- Casos de Uso Efectivos: Puede ser útil en aplicaciones sencillas donde la lista de búsqueda es pequeña, como filtros de búsqueda en sitios web con una cantidad moderada de datos.
Alternativas y Métodos Más Eficientes:
- Búsqueda Binaria: Para listas ordenadas, la búsqueda binaria es mucho más eficiente, reduciendo el tiempo de búsqueda a O(log n).
- Estructuras de Datos Avanzadas: En conjuntos de datos grandes y dinámicos, se usan estructuras de datos como árboles de búsqueda, hash tables o índices optimizados para agilizar la búsqueda.
La estructura principal del código es:
- Un contenedor (#contenedor) que alberga toda la interfaz de búsqueda de palabras.
- Una lista fija de palabras (representadas como elementos <span>) dentro del contenedor.
- Un campo de entrada (<input>) para ingresar la palabra que se quiere buscar.
- Un botón (<button>) que inicia la búsqueda al hacer clic.
- Un área (<div>) para mostrar el resultado de la búsqueda (#resultado).
- La función buscarPalabra() realiza la búsqueda de la palabra ingresada por el usuario dentro de la lista de palabras predefinidas. Luego, muestra si la palabra está en la lista y resalta visualmente la palabra encontrada en la lista.
Script JavaScript:
- Se define una lista de palabras en JavaScript llamada
palabras. - La función
buscarPalabra()se activa al hacer clic en el botón de búsqueda. - La función busca la palabra ingresada por el usuario en la lista predefinida.
- Si la palabra se encuentra, muestra un mensaje indicando la posición y resalta la palabra en la lista.
- Si no se encuentra, muestra un mensaje indicando que la palabra no está en la lista.
Crea un Archivo index.html y pega este Codigo Completo HTML, CSS Y JS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Búsqueda de Palabras</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #faffcd; /* Fondo amarillo limón claro */
}
#contenedor {
border: 2px solid black;
padding: 20px;
width: 70%;
background-color: #fff; /* Fondo blanco */
text-align: center;
}
h2 {
color: #333; /* Texto oscuro */
}
input {
width: calc(80% - 16px);
padding: 8px;
margin-bottom: 10px;
display: block;
margin: 0 auto;
text-align: center;
font-weight: 700;
font-size: 20px;
}
button {
width: calc(85% - 16px);
padding: 10px;
background-color: #4caf50; /* Verde */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
display: block;
margin: 0 auto;
}
#listaPalabras {
border: 2px solid #ddd; /* Borde gris */
padding: 10px;
background-color: #f9f9f9; /* Fondo gris claro */
max-height: 150px; /* Altura máxima para permitir desplazamiento */
overflow-y: auto; /* Habilitar desplazamiento vertical si es necesario */
margin-bottom: 20px; /* Margen inferior para separar la lista del resto del contenido */
}
.palabra-lista {
display: inline-block;
padding: 5px;
margin: 2px;
background-color: #ffff66; /* Amarillo */
text-align: center;
font-weight: 700;
font-size: 16px;
}
.resaltado {
background-color: #4caf50; /* Verde */
color: white;
border-radius: 4px; /* Ajustado a 4px */
}
#resultado {
font-weight: bold;
text-align: center;
font-weight: 700;
font-size: 20px;
}
p {
margin: 10px 0;
}
</style>
</head>
<body>
<div id="contenedor">
<h2>Búsqueda de Palabras</h2>
<!-- Lista fija de palabras -->
<div id="listaPalabras">
<!-- Lista de palabras -->
<p>
<span class="palabra-lista">ciencia de datos</span>
<span class="palabra-lista">análisis de datos</span>
<span class="palabra-lista">programación web</span>
<span class="palabra-lista">móvil</span>
<span class="palabra-lista">desktop</span>
<span class="palabra-lista">temas informáticos</span>
<span class="palabra-lista">Python</span>
<span class="palabra-lista">JavaScript</span>
<span class="palabra-lista">SQL</span>
<span class="palabra-lista">machine learning</span>
<span class="palabra-lista">big data</span>
<span class="palabra-lista">API</span>
<span class="palabra-lista">HTML</span>
<span class="palabra-lista">CSS</span>
<span class="palabra-lista">React</span>
<span class="palabra-lista">Angular</span>
<span class="palabra-lista">Node.js</span>
<span class="palabra-lista">Java</span>
<span class="palabra-lista">Swift</span>
<span class="palabra-lista">Android</span>
<span class="palabra-lista">iOS</span>
<span class="palabra-lista">data science</span>
<span class="palabra-lista">data analysis</span>
<span class="palabra-lista">web development</span>
<span class="palabra-lista">software engineering</span>
<span class="palabra-lista">data visualization</span>
<span class="palabra-lista">cloud computing</span>
<span class="palabra-lista">database</span>
<span class="palabra-lista">front-end</span>
<span class="palabra-lista">back-end</span>
</p>
</div>
<!-- Caja de texto para ingresar la palabra a buscar -->
<input type="text" id="palabraBusqueda" placeholder="Ingrese la palabra a buscar">
<br>
<!-- Botón para realizar la búsqueda -->
<button onclick="buscarPalabra()">Buscar</button>
<br>
<div id="resultado"></div>
</div>
<script>
// Lista fija de palabras
const palabras = [
"ciencia de datos", "análisis de datos", "programación web", "móvil", "desktop",
"temas informáticos", "Python", "JavaScript", "SQL", "machine learning", "big data",
"API", "HTML", "CSS", "React", "Angular", "Node.js", "Java", "Swift", "Android", "iOS",
"data science", "data analysis", "web development", "software engineering", "data visualization",
"cloud computing", "database", "front-end", "back-end"
];
// Función para buscar la palabra ingresada por el usuario
function buscarPalabra() {
const palabraIngresada = document.getElementById("palabraBusqueda").value;
// Obtener el contenedor para mostrar los resultados
const contenedor = document.getElementById("contenedor");
// Crear un elemento para mostrar la lista y resultados
const resultadoElemento = document.getElementById("resultado");
let encontrado = false;
let posicion = -1;
for (let i = 0; i < palabras.length; i++) {
if (palabras[i].toLowerCase().includes(palabraIngresada.toLowerCase())) {
encontrado = true;
posicion = i + 1; // Sumamos 1 para mostrar la posición empezando desde 1
break;
}
}
if (encontrado) {
resultadoElemento.innerHTML = `<p>Palabra "${palabraIngresada}" encontrada en la posición ${posicion}.</p>`;
// Resaltar la palabra encontrada
const listaPalabras = document.getElementById("listaPalabras").getElementsByTagName("span");
for (let i = 0; i < listaPalabras.length; i++) {
listaPalabras[i].classList.remove("resaltado");
}
listaPalabras[posicion - 1].classList.add("resaltado");
} else {
resultadoElemento.innerHTML = `<p>Palabra "${palabraIngresada}" no encontrada en la lista.</p>`;
}
}
</script>
</body>
</html>
Como hemos podido ver, el ejemplo de búsqueda de palabras ofrece una introducción clara a un método básico de búsqueda llamado «búsqueda lineal». Probamos que a través de una lista predefinida de palabras, permite al usuario buscar una palabra específica y muestra su posición si se encuentra en la lista.
Conclusiones Clave:
Simplicidad y Claridad: Este ejercicio demuestra la lógica simple de la búsqueda lineal, ideal para comprender los fundamentos de la búsqueda en listas.
Limitaciones de Eficiencia: Aunque es fácil de implementar, su eficiencia disminuye a medida que la lista de búsqueda crece. Para conjuntos de datos grandes, puede no ser la mejor opción debido a su tiempo de ejecución lineal.
Contexto de Uso: Es adecuado para casos simples o listas de tamaño moderado donde la velocidad de búsqueda no es crítica. Sin embargo, en aplicaciones más complejas o con conjuntos de datos extensos, se necesitan enfoques más eficientes.
Puerta de Entrada: Sirve como una puerta de entrada para comprender algoritmos de búsqueda más avanzados, como la búsqueda binaria o el uso de estructuras de datos optimizadas.
Retos:
Este tutorial es solo el comienzo de tu viaje en el mundo de la programación. Te desafiamos a practicar estos conceptos, explorar más algoritmos y aplicaciones reales. Te dejo algunos retos para continuar tu aprendizaje:
- Implementa una interfaz más interactiva para esta búsqueda binaria y lineal
- Expande el rango de números para buscar y realiza pruebas con diferentes conjuntos de datos.
- Investiga otros algoritmos de búsqueda y compáralos con la búsqueda binaria y lineal.
Motivaciones
- «La práctica lleva a la perfección. ¡Sigue practicando!»
- «Cada error es un paso más hacia el éxito. No te rindas.»
- «El aprendizaje es un viaje continuo. Disfruta cada paso.»
- «La persistencia es la clave. Sigue avanzando, incluso cuando sea difícil.»
Conclusión
En este tutorial, hemos explorado la búsqueda binaria y lineal y su implementación en JavaScript. Recuerda, la programación es un campo donde la práctica y la curiosidad son tus mejores aliados. Te alentamos a aplicar estos conocimientos en proyectos personales y a desafiarte a ti mismo día a día. Únete a nuestra comunidad para compartir ideas, aprender más y ayudar a otros a crecer en este emocionante viaje de desarrollo de software. Juntos, podemos crear un entorno colaborativo y enriquecedor para todos los apasionados por la programación. ¡Sigue aprendiendo, sigue explorando y nunca dejes de codificar!
Y recuerda, ¡nuestro equipo te apoya en cada paso del camino!