La clasificación por selección es el algoritmo de clasificación más simple que funciona encontrando repetidamente el elemento mínimo (considerando el orden ascendente) de la parte no clasificada y colocándolo al principio.
Para saber más al respecto. Consulte Clasificación de selección
Un algoritmo como Selection Sort se puede entender fácilmente visualizando en lugar de códigos largos. En este artículo, Selection Sort Visualizer se implementa utilizando HTML , CSS y JavaScript.
Requisitos previos:
- Clasificación de selección .
- HTML básico , CSS y JavaScript .
- Promesas de JavaScript .
- Función asincrónica/espera de JavaScript .
Acercarse:
- El botón Generar nueva array genera una array de valores aleatorios usando la función Math.random() y una barra correspondiente a ese valor en términos de altura.
- Se utilizan diferentes colores para indicar qué elementos no están ordenados (azul cielo), comparados (azul oscuro y rojo) y ordenados (verde claro).
- Botón Selección Ordene los elementos utilizando el algoritmo de ordenación por selección.
- Finalmente, se ordenan los elementos.
Ejemplo: Haga clic en el botón Generar nueva array para generar una nueva array aleatoria. Haga clic en el botón Ordenar selección para realizar la visualización.
HTML
<!DOCTYPE html> <html lang="en"> <!-- head --> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- title --> <title>Sorting Visualizer</title> <!-- linking style.css --> <link href="style.css" rel="stylesheet" /> </head> <!-- body --> <body > <section class="head">Selection Sort Visualizer</section> <section class="data-container"></section> <!-- "Generate New Array" button --> <button class="btn1" onclick="generate()" id="Button1" > Generate New Array</button> <!-- "Selection Sort" button --> <button class="btn2" onclick="SelectionSort(),disable()" id="Button2" > Selection Sort</button> </body> <!-- linking index.js --> <script src="index.js"></script> </html>
CSS
.mySlides {
display: none;
}
body {
background-color: rgb(255, 235, 211);
font-family: Verdana, sans-serif;
}
.head {
margin-top: 20px;
margin-right: 20vw;
margin-left: 20vw;
text-align: center;
font-size: 30px;
background-color: #6f459e;
color: white;
border-radius: 19px;
font-weight: bolder;
}
.data-container {
width: 600px;
height: 384px;
position: relative;
margin: 0 auto;
}
.bar {
width: 28px;
position: absolute;
left: 0;
bottom: 0;
background-color: rgb(0, 183, 255);
transition: 0.2s all ease;
}
.bar__id {
position: absolute;
top: -24px;
width: 100%;
text-align: center;
}
.btn1 {
padding: 12px;
font-weight: bolder;
background-color: #6f459e;
border-radius: 10px;
color: white;
font-size: 16px;
border: white;
margin-left: 37vw;
margin-top: 4vw;
margin-right: 1vw;
}
.btn2 {
padding: 12px;
font-weight: bolder;
background-color: #6f459e;
border-radius: 10px;
color: white;
font-size: 16px;
border: white;
}
Javascript
const container = document.querySelector(".data-container");
// function to generate bars
function generatebars(num = 20) {
//for loop to generate 20 bars
for (let i = 0; i < num; i += 1) {
// To generate random values from 1 to 100
const value = Math.floor(Math.random() * 100) + 1;
// To create element "div"
const bar = document.createElement("div");
// To add class "bar" to "div"
bar.classList.add("bar");
// Provide height to the bar
bar.style.height = `${value * 3}px`;
// Translate the bar towards positive X axis
bar.style.transform = `translateX(${i * 30}px)`;
// To create element "label"
const barLabel = document.createElement("label");
// To add class "bar_id" to "label"
barLabel.classList.add("bar_id");
// Assign value to "label"
barLabel.innerHTML = value;
// Append "Label" to "div"
bar.appendChild(barLabel);
// Append "div" to "data-container div"
container.appendChild(bar);
}
}
// asynchronous function to perform "Selection Sort"
async function SelectionSort(delay = 300) {
let bars = document.querySelectorAll(".bar");
// Assign 0 to min_idx
var min_idx = 0;
for (var i = 0; i < bars.length; i += 1) {
// Assign i to min_idx
min_idx = i;
// Provide darkblue color to the ith bar
bars[i].style.backgroundColor = "darkblue";
for (var j = i + 1; j < bars.length; j += 1) {
// Provide red color to the jth bar
bars[j].style.backgroundColor = "red";
// To pause the execution of code for 300 milliseconds
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 300)
);
// To store the integer value of jth bar to var1
var val1 = parseInt(bars[j].childNodes[0].innerHTML);
// To store the integer value of (min_idx)th bar to var2
var val2 = parseInt(bars[min_idx].childNodes[0].innerHTML);
// Compare val1 & val2
if (val1 < val2) {
if (min_idx !== i) {
// Provide skyblue color to the (min-idx)th bar
bars[min_idx].style.backgroundColor = " rgb(24, 190, 255)";
}
min_idx = j;
} else {
// Provide skyblue color to the jth bar
bars[j].style.backgroundColor = " rgb(24, 190, 255)";
}
}
// To swap ith and (min_idx)th bar
var temp1 = bars[min_idx].style.height;
var temp2 = bars[min_idx].childNodes[0].innerText;
bars[min_idx].style.height = bars[i].style.height;
bars[i].style.height = temp1;
bars[min_idx].childNodes[0].innerText = bars[i].childNodes[0].innerText;
bars[i].childNodes[0].innerText = temp2;
// To pause the execution of code for 300 milliseconds
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 300)
);
// Provide skyblue color to the (min-idx)th bar
bars[min_idx].style.backgroundColor = " rgb(24, 190, 255)";
// Provide lightgreen color to the ith bar
bars[i].style.backgroundColor = " rgb(49, 226, 13)";
}
// To enable the button "Generate New Array" after final(sorted)
document.getElementById("Button1").disabled = false;
document.getElementById("Button1").style.backgroundColor = "#6f459e";
// To enable the button "Selection Sort" after final(sorted)
document.getElementById("Button2").disabled = false;
document.getElementById("Button2").style.backgroundColor = "#6f459e";
}
// Call "generatebars" function
generatebars();
// function to generate new random array
function generate()
{
window.location.reload();
}
// function to disable the button
function disable()
{
// To disable the button "Generate New Array"
document.getElementById("Button1").disabled = true;
document.getElementById("Button1").style.backgroundColor = "#d8b6ff";
// To disable the button "Selection Sort"
document.getElementById("Button2").disabled = true;
document.getElementById("Button2").style.backgroundColor = "#d8b6ff";
}
Producción:
- Nueva array generada:
- Después de la clasificación:
Publicación traducida automáticamente
Artículo escrito por shivammahajancse y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA