La GUI (interfaz gráfica de usuario) ayuda a comprender mejor que los programas. En este artículo, visualizaremos la búsqueda binaria usando JavaScript. Veremos cómo se recorren los elementos en la búsqueda binaria hasta que se encuentra el elemento dado. También visualizaremos la complejidad temporal de la búsqueda binaria.
Referencia:
Acercarse:
- Primero, generaremos una array aleatoria usando la función Math.random() y luego la ordenaremos usando la función sort() .
- Se utiliza un color diferente para indicar qué elemento se está atravesando en el momento actual.
- Dado que el algoritmo realiza la operación muy rápido, se ha utilizado la función setTimeout() para ralentizar el proceso.
- Se puede generar una nueva array presionando la tecla «Ctrl + R» .
- La búsqueda se realiza mediante la función BinarySearch().
Ejemplo:
Antes de buscar
Después de buscar
A continuación se muestra el programa para visualizar el algoritmo de búsqueda binaria .
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <br /> <p class="header">Binary Search</p> <div id="array"></div> <br /><br /> <div style="text-align: center"> <label for="fname"> Number to be Searched: </label> <input type="text" id="fname" name="fname" /> <br /><br /> <button id="btn" onclick="BinarySearch()">Search</button> <br /> <br /> <div id="text"></div> </div> <script src="script.js"></script> </body> </html>
Nombre de archivo: estilo.css
CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
font-size: 35px;
text-align: center;
}
#array {
background-color: white;
height: 305px;
width: 598px;
margin: auto;
position: relative;
margin-top: 64px;
}
.block {
width: 28px;
background-color: #6b5b95;
position: absolute;
bottom: 0px;
transition: 0.2s all ease;
}
.block_id {
position: absolute;
color: black;
margin-top: -20px;
width: 100%;
text-align: center;
}
Nombre de archivo: script.js
Javascript
var container = document.getElementById("array");
// Function to generate the array of blocks
function generatearray() {
// Creating an array
var arr = [];
// Filling array with random values
for (var i = 0; i < 20; i++) {
// Return a value from 1 to 100 (both inclusive)
var val = Number(Math.ceil(Math.random() * 100));
arr.push(val);
}
// Sorting Array in ascending order
arr.sort(function (a, b) {
return a - b;
});
for (var i = 0; i < 20; i++) {
var value = arr[i];
// Creating element div
var array_ele = document.createElement("div");
// Adding class 'block' to div
array_ele.classList.add("block");
// Adding style to div
array_ele.style.height = `${value * 3}px`;
array_ele.style.transform = `translate(${i * 30}px)`;
// Creating label element for displaying
// size of particular block
var array_ele_label = document.createElement("label");
array_ele_label.classList.add("block_id");
array_ele_label.innerText = value;
// Appending created elements to index.html
array_ele.appendChild(array_ele_label);
container.appendChild(array_ele);
}
}
// Asynchronous BinarySearch function
async function BinarySearch(delay = 300) {
var blocks = document.querySelectorAll(".block");
var output = document.getElementById("text");
//Extracting the value of the element to be searched
var num = document.getElementById("fname").value;
//Colouring all the blocks violet
for (var i = 0; i < blocks.length; i += 1) {
blocks[i].style.backgroundColor = "#6b5b95";
}
output.innerText = "";
// BinarySearch Algorithm
var start = 0;
var end = 19;
var flag = 0;
while (start <= end) {
//Middle index
var mid = Math.floor((start + end) / 2);
blocks[mid].style.backgroundColor = "#FF4949";
//Value at mid index
var value = Number(blocks[mid].childNodes[0].innerHTML);
// To wait for .1 sec
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
//Current element is equal to the element
//entered by the user
if (value == num) {
output.innerText = "Element Found";
blocks[mid].style.backgroundColor = "#13CE66";
flag = 1;
break;
}
//Current element is greater than the element
//entered by the user
if (value > num) {
end = mid - 1;
blocks[mid].style.backgroundColor = "#6b5b95";
} else {
start = mid + 1;
blocks[mid].style.backgroundColor = "#6b5b95";
}
}
if (flag === 0) {
output.innerText = "Element Not Found";
}
}
// Calling generatearray function
generatearray();
Producción:
