Тернарная визуализация поиска с использованием JavaScript

Опубликовано: 26 Августа, 2022

GUI (графический интерфейс пользователя) помогает лучше понять, чем программы. В этой статье мы визуализируем тернарный поиск с помощью JavaScript. Мы увидим, как элементы перебираются в троичном поиске, пока не будет найден данный элемент. Мы также визуализируем временную сложность троичного поиска.

Ссылаться:

Тернарный поиск
Асинхронная функция в JavaScript

Подход:

Сначала мы сгенерируем случайный массив с помощью функции Math.random(), а затем отсортируем его с помощью функции sort().
Другой цвет используется для обозначения того, какой элемент проходится в текущий момент времени.
Поскольку алгоритм выполняет операцию очень быстро, функция setTimeout() используется для замедления процесса.
Новый массив можно создать, нажав клавишу «Ctrl+R» .
Поиск осуществляется с помощью функции TernarySearch() .

Перед поиском

После поиска

Ниже представлена программа для визуализации алгоритма троичного поиска.

index.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">Ternary 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="TernarySearch()">
        Search
      </button>
        <br />
        <br />
        <div id="text"></div>
    </div>
  
    <script src="script.js"></script>
</body>
  
</html>

style.css: Ниже приведено содержимое «style.css», используемого в приведенном выше файле.

style.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;
}

script.js: Ниже приведено содержимое файла «script.js», используемого в приведенном выше HTML-коде.

script.js

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 TernarySearch function
async function TernarySearch(delay = 700) {
    var blocks = document.querySelectorAll(".block");
    var output = document.getElementById("text");
  
    // Extracting the value entered by the user
    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 = "";
  
    // TernarySearch Algorithm
    var start = 0;
    var end = 19;
    var flag = 0;
    while (start <= end) {
        var mid1 = Math.floor(start + (end - start) / 3);
        var mid2 = Math.floor(end - (end - start) / 3);
  
        // Extracting values of mid1 and mid2 blocks
        var value1 = Number(blocks[mid1].childNodes[0].innerHTML);
        var value2 = Number(blocks[mid2].childNodes[0].innerHTML);
  
        // Changing color to red
        blocks[mid1].style.backgroundColor = "#FF4949";
        blocks[mid2].style.backgroundColor = "#FF4949";
  
        // To wait for .1 sec
        await new Promise((resolve) =>
            setTimeout(() => {
                resolve();
            }, delay)
        );
  
        // Number entered by the user equals to
        // element at mid1
        if (value1 == num) {
            output.innerText = "Element Found";
            blocks[mid1].style.backgroundColor = "#13CE66";
            flag = 1;
            break;
        }
  
        // Number entered by the user equals to
        // element at mid2
        if (value2 == num) {
            output.innerText = "Element Found";
            blocks[mid2].style.backgroundColor = "#13CE66";
            flag = 1;
            break;
        }
  
        if (num < value1) {
            end = mid1 - 1;
        } else if (num > value2) {
            start = mid2 + 1;
        } else {
            start = mid1 + 1;
            end = mid2 - 1;
        }
    }
  
    if (flag === 0) {
        output.innerText = "Element Not Found";
    }
}
  
// Calling generatearray function
generatearray();

Выход:

Technical Scripter JavaScript HTML CSS

Тернарная визуализация поиска с использованием JavaScript

index.html

style.css

script.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ