Поиск в Википедии на JavaScript: руководство с примерами

В мире веб-разработки возникают множество ситуаций, когда необходимо реализовать поиск информации на Википедии. Например, вы можете создавать образовательные ресурсы, приложения для чтения новостей или просто желать предоставить пользователям возможность легко получать информацию с Википедии. В этой статье мы расскажем вам, как использовать JavaScript и API Википедии для реализации поиска.

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

API Википедии

API Википедии – это интерфейс программирования приложений, который позволяет получать структурированные данные из Википедии. Этот API позволяет выполнять разнообразные операции, включая поиск статей, получение содержания статей, извлечение информации о категориях и многое другое.

Один из популярных способов взаимодействия с API Википедии – это использование AJAX-запросов в JavaScript. AJAX позволяет асинхронно обмениваться данными между клиентом и сервером, что идеально подходит для реализации поиска в реальном времени.

Настройка окружения

Перед тем как начать программировать, вам потребуется настроить ваше рабочее окружение. Вам понадобится текстовый редактор, веб-браузер и доступ в интернет. Вам также понадобится ключ API Википедии, который вы можете получить, зарегистрировавшись на сайте Wikipedia API.

Создание HTML-разметки

Для начала создадим простую HTML-разметку для нашего поискового приложения. Ниже пример кода для базовой разметки:

«`html

<!DOCTYPE html>

<head>

<title>Поиск в Википедии</title>

</head>

<body>

<h1>Поиск в Википедии</h1>

</body>

</html>

«`

Эта разметка включает в себя поле для ввода запроса (`<input>`), список для отображения результатов (`<ul>`), и подключает внешний файл стилей `styles.css` и скрипт `script.js`.

JavaScript для поиска

Теперь перейдем к JavaScript-части нашего приложения. В этом примере мы будем использовать чистый JavaScript без использования библиотек.

«`javascript

// script.js

const searchInput = document.getElementById(«search-input»);

const searchResults = document.getElementById(«search-results»);

searchInput.addEventListener(«input», () => {

const searchTerm = searchInput.value;

if (searchTerm.trim() === «») {

searchResults.innerHTML = «»;

return;

}

// Отправляем запрос к API Википедии

fetch(`https://ru.wikipedia.org/w/api.php?format=json&action=query&list=search&utf8=1&srsearch=${searchTerm}`)

.then(response => response.json())

.then(data => {

const results = data.query.search;

displayResults(results);

})

.catch(error => console.error(error));

});

function displayResults(results) {

searchResults.innerHTML = «»;

results.forEach(result => {

const listItem = document.createElement(«li»);

const title = document.createElement(«h2»);

title.textContent = result.title;

const snippet = document.createElement(«p»);

snippet.innerHTML = result.snippet;

listItem.appendChild(title);

listItem.appendChild(snippet);

searchResults.appendChild(listItem);

});

}

«`

В этом коде мы прослушиваем событие `input` на поле ввода и отправляем AJAX-запрос к API Википедии при каждом изменении значения. Результаты поиска обрабатываются и отображаются на странице.

Оформление с помощью CSS

Для улучшения внешнего вида приложения, добавим стили с помощью CSS. Создайте файл `styles.css` и добавьте следующие стили:

«`css

/* styles.css */

body {

font-family: Arial, sans-serif;

text-align: center;

}

h1 {

color: #3366cc;

}

#search-input {

width: 80%;

padding: 10px;

font-size: 18px;

border: 1px solid #ccc;

}

#search-results {

list-style-type: none;

padding: 0;

}

li {

border: 1px solid #ccc;

padding: 10px;

margin

: 10px;

border-radius: 5px;

}

h2 {

color: #3366cc;

}

p {

margin: 0;

}

«`

Эти стили улучшат внешний вид нашего поискового приложения.

Заключение

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

Интеграция поиска Википедии в ваше веб-приложение может значительно обогатить опыт пользователей, предоставляя им доступ к огромному объему знаний. Не забудьте удостовериться, что вы соблюдаете условия использования API Википедии и следуете лучшим практикам в области разработки.