La GUI (interfaz gráfica de usuario) ayuda a comprender mejor que los programas. En este artículo, visualizaremos Bubble Sort usando JavaScript. Veremos cómo se intercambian los elementos en Bubble Sort y cómo obtenemos la array ordenada final. También visualizaremos la complejidad temporal de Bubble Sort.
Referirse:
Acercarse:
- Primero, generaremos una array aleatoria usando la función Math.random() .
- Se utilizan diferentes colores para indicar qué elementos se comparan, ordenan y ordenan .
- 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 clasificación se realiza usando la función BubbleSort() usando la función swap ()
Ejemplo:
A continuación se muestra el programa para visualizar el algoritmo Bubble Sort .
índice.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">Bubble Sort</p> <div id="array"></div> <script src="script.js"></script> </body> </html>
style.css: El siguiente es el contenido de «style.css» utilizado en el archivo anterior.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
font-size: 20px;
text-align: center;
}
#array {
background-color: white;
height: 413px;
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;
}
script.js: el siguiente es el contenido del archivo «script.js» utilizado en el código HTML anterior.
var container = document.getElementById("array");
// Function to generate the array of blocks
function generatearray() {
for (var i = 0; i < 20; i++) {
// Return a value from 1 to 100 (both inclusive)
var value = Math.ceil(Math.random() * 100);
// 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);
}
}
// Promise to swap two blocks
function swap(el1, el2) {
return new Promise((resolve) => {
// For exchanging styles of two blocks
var temp = el1.style.transform;
el1.style.transform = el2.style.transform;
el2.style.transform = temp;
window.requestAnimationFrame(function() {
// For waiting for .25 sec
setTimeout(() => {
container.insertBefore(el2, el1);
resolve();
}, 250);
});
});
}
// Asynchronous BubbleSort function
async function BubbleSort(delay = 100) {
var blocks = document.querySelectorAll(".block");
// BubbleSort Algorithm
for (var i = 0; i < blocks.length; i += 1) {
for (var j = 0; j < blocks.length - i - 1; j += 1) {
// To change background-color of the
// blocks to be compared
blocks[j].style.backgroundColor = "#FF4949";
blocks[j + 1].style.backgroundColor = "#FF4949";
// To wait for .1 sec
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
console.log("run");
var value1 = Number(blocks[j].childNodes[0].innerHTML);
var value2 = Number(blocks[j + 1]
.childNodes[0].innerHTML);
// To compare value of two blocks
if (value1 > value2) {
await swap(blocks[j], blocks[j + 1]);
blocks = document.querySelectorAll(".block");
}
// Changing the color to the previous one
blocks[j].style.backgroundColor = "#6b5b95";
blocks[j + 1].style.backgroundColor = "#6b5b95";
}
//changing the color of greatest element
//found in the above traversal
blocks[blocks.length - i - 1]
.style.backgroundColor = "#13CE66";
}
}
// Calling generatearray function
generatearray();
// Calling BubbleSort function
BubbleSort();
Producción: