Веб

Вывод элементов массива в DOM: создание домашней библиотеки

Пошаговое руководство по созданию веб-приложения 'Домашняя библиотека' с выводом массива книг, добавлением новых книг и поиском с выделением результатов.

5 ответов• 1 просмотр

Как вывести элементы массива на экран в веб-приложении? Нужно создать приложение «Домашняя библиотека» с функционалом: вывод списка книг из массива на страницу, добавление новых книг через кнопку с проверкой ввода, и поиск книг с выделением результата. Как реализовать отображение массива в DOM и добавить интерактивные функции?

Для вывода элементов массива на экран в веб-приложении “Домашняя библиотека” необходимо использовать методы JavaScript для работы с DOM, такие как createElement, innerHTML или textContent для отображения данных, а также реализовать интерактивные функции с помощью обработчиков событий. Основные методы массивов, включая map для преобразования данных в HTML, push для добавления новых книг, и filter для поиска позволят создать полнофункциональное приложение с динамическим обновлением интерфейса.

MDN Web Docs - авторитетная документация по веб-разработке

Содержание

Основы вывода элементов массива в DOM

Для вывода элементов массива на экран в веб-приложении необходимо сначала преобразовать массив данных в HTML-элементы, а затем вставить их в DOM. Основной принцип работы заключается в использовании методов JavaScript для создания и управления элементами DOM на основе данных из массива.

Массивы JavaScript предоставляют мощные методы для работы с данными. Когда мы говорим о “выводе элементов массива на экран”, обычно имеется в виду преобразование каждого элемента массива в HTML-элемент и последующее отображение этих элементов на веб-странице. Для этого можно использовать различные подходы в зависимости от требований к производительности и интерактивности.

Ключевые методы массивов, которые полезны для работы с DOM:

  • forEach() - перебирает все элементы массива
  • map() - создает новый массив на основе существующего
  • filter() - отбирает элементы по условию
  • push() - добавляет элементы в конец массива
  • splice() - удаляет или заменяет элементы

Как отмечено в документации MDN Web Docs, эти методы позволяют эффективно управлять данными о книгах и динамически обновлять интерфейс приложения.

Структура приложения “Домашняя библиотека”

Приложение “Домашняя библиотека” будет состоять из нескольких основных компонентов:

  1. Массив данных о книгах - хранит информацию о каждой книге (название, автор, год издания и т.д.)
  2. HTML-разметка - структура страницы с контейнерами для отображения книг и формы добавления
  3. CSS-стили - оформление интерфейса, включая стили для выделения результатов поиска
  4. JavaScript-код - логика работы приложения
html
<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Домашняя библиотека</title>
 <style>
 body {
 font-family: Arial, sans-serif;
 max-width: 800px;
 margin: 0 auto;
 padding: 20px;
 background-color: #f5f5f5;
 }
 
 .container {
 background-color: white;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .book-item {
 border: 1px solid #ddd;
 padding: 10px;
 margin: 10px 0;
 border-radius: 4px;
 transition: background-color 0.3s;
 }
 
 .book-item.highlighted {
 background-color: #fff3cd;
 border-color: #ffeaa7;
 }
 
 .form-group {
 margin: 15px 0;
 }
 
 label {
 display: block;
 margin-bottom: 5px;
 font-weight: bold;
 }
 
 input[type="text"] {
 width: 100%;
 padding: 8px;
 border: 1px solid #ddd;
 border-radius: 4px;
 }
 
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 15px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 margin: 5px;
 }
 
 button:hover {
 background-color: #45a049;
 }
 
 .error {
 color: red;
 margin-top: 5px;
 display: none;
 }
 
 .search-container {
 margin: 20px 0;
 }
 </style>
</head>
<body>
 <div class="container">
 <h1>Домашняя библиотека</h1>
 
 <div class="search-container">
 <input type="text" id="searchInput" placeholder="Поиск книг...">
 <button id="searchButton">Найти</button>
 <button id="clearSearchButton">Очистить</button>
 </div>
 
 <div class="form-group">
 <label for="bookTitle">Название книги:</label>
 <input type="text" id="bookTitle" placeholder="Введите название">
 <div id="titleError" class="error">Пожалуйста, введите название книги</div>
 </div>
 
 <div class="form-group">
 <label for="bookAuthor">Автор:</label>
 <input type="text" id="bookAuthor" placeholder="Введите автора">
 <div id="authorError" class="error">Пожалуйста, введите автора</div>
 </div>
 
 <div class="form-group">
 <label for="bookYear">Год издания:</label>
 <input type="text" id="bookYear" placeholder="Введите год">
 <div id="yearError" class="error">Пожалуйста, введите корректный год</div>
 </div>
 
 <button id="addBookButton">Добавить книгу</button>
 
 <h2>Список книг:</h2>
 <div id="booksContainer"></div>
 </div>
 
 <script>
 // JavaScript код будет здесь
 </script>
</body>
</html>

Отображение списка книг из массива

Для отображения книг из массива на странице мы должны сначала создать массив с данными о книгах, а затем преобразовать каждый объект книги в HTML-элемент и вставить его в DOM.

javascript
// Инициализация массива книг
const books = [
 { title: "Преступление и наказание", author: "Ф.М. Достоевский", year: 1866 },
 { title: "Война и мир", author: "Л.Н. Толстой", year: 1869 },
 { title: "Анна Каренина", author: "Л.Н. Толстой", year: 1877 },
 { title: "Мастер и Маргарита", author: "М.А. Булгаков", year: 1967 }
];

// Функция для отображения всех книг
function displayBooks(booksToDisplay = books) {
 const container = document.getElementById('booksContainer');
 container.innerHTML = ''; // Очищаем контейнер
 
 // Используем метод map для преобразования массива книг в HTML-строку
 const booksHTML = booksToDisplay.map(book => `
 <div class="book-item">
 <h3>${book.title}</h3>
 <p><strong>Автор:</strong> ${book.author}</p>
 <p><strong>Год:</strong> ${book.year}</p>
 </div>
 `).join('');
 
 // Вставляем HTML в контейнер
 container.innerHTML = booksHTML;
}

// Первоначальное отображение книг
displayBooks();

Как объясняется в JavaScript.info, метод map() идеально подходит для преобразования массива объектов книг в HTML-разметку. Этот метод создает новый массив на основе существующего, применяя функцию к каждому элементу.

Важно отметить, что для вставки HTML-кода в DOM можно использовать свойство innerHTML, как показано в примере. Однако следует быть осторожным с XSS-атаками и экранировать пользовательский ввод, особенно если приложение будет использоваться в продакшене. В нашем случае мы используем шаблонные строки с безопасной интерпретацией.

Добавление новых книг с проверкой ввода

Для добавления новых книг через кнопку с проверкой ввода нам нужно:

  1. Получить значения из полей ввода
  2. Проверить валидность данных
  3. Добавить новую книгу в массив
  4. Обновить отображение на странице
javascript
// Функция для валидации данных книги
function validateBook(title, author, year) {
 let isValid = true;
 
 // Проверка названия
 if (!title.trim()) {
 document.getElementById('titleError').style.display = 'block';
 isValid = false;
 } else {
 document.getElementById('titleError').style.display = 'none';
 }
 
 // Проверка автора
 if (!author.trim()) {
 document.getElementById('authorError').style.display = 'block';
 isValid = false;
 } else {
 document.getElementById('authorError').style.display = 'none';
 }
 
 // Проверка года
 const yearValue = parseInt(year);
 if (!year || isNaN(yearValue) || yearValue < 0 || yearValue > new Date().getFullYear()) {
 document.getElementById('yearError').style.display = 'block';
 isValid = false;
 } else {
 document.getElementById('yearError').style.display = 'none';
 }
 
 return isValid;
}

// Обработчик нажатия кнопки "Добавить книгу"
document.getElementById('addBookButton').addEventListener('click', function() {
 const title = document.getElementById('bookTitle').value;
 const author = document.getElementById('bookAuthor').value;
 const year = document.getElementById('bookYear').value;
 
 // Проверка данных
 if (validateBook(title, author, year)) {
 // Добавление новой книги в массив с помощью метода push
 books.push({
 title: title.trim(),
 author: author.trim(),
 year: parseInt(year)
 });
 
 // Очистка полей ввода
 document.getElementById('bookTitle').value = '';
 document.getElementById('bookAuthor').value = '';
 document.getElementById('bookYear').value = '';
 
 // Обновление отображения
 displayBooks();
 
 // Сообщение об успешном добавлении (можно добавить всплывающее уведомление)
 alert('Книга успешно добавлена!');
 }
});

Как описано в документации MDN Web Docs, метод push() добавляет один или несколько элементов в конец массива и возвращает новую длину массива. Это идеально подходит для добавления новых книг в наш массив.

Валидация ввода включает проверку:

  • Ненулевое значение названия и автора
  • Корректный год издания (число и разумный диапазон)
  • Удаление лишних пробелов с помощью метода trim()

Поиск книг с выделением результатов

Для реализации поиска книг с выделением результатов нам нужно создать функцию, которая будет:

  1. Получать текст поиска
  2. Фильтровать массив книг по введенному тексту
  3. Обновлять отображение с выделением найденных книг
  4. Обеспечивать возможность очистки поиска
javascript
// Функция для поиска книг
function searchBooks(searchText) {
 if (!searchText.trim()) {
 // Если текст поиска пустой, отображаем все книги без выделения
 displayBooks();
 return;
 }
 
 // Фильтруем книги по тексту поиска (без учета регистра)
 const searchResults = books.filter(book => 
 book.title.toLowerCase().includes(searchText.toLowerCase()) ||
 book.author.toLowerCase().includes(searchText.toLowerCase()) ||
 book.year.toString().includes(searchText)
 );
 
 // Отображаем результаты поиска
 displayBooks(searchResults);
 
 // Выделяем найденные элементы
 highlightSearchResults(searchText);
}

// Функция для выделения результатов поиска
function highlightSearchResults(searchText) {
 const bookItems = document.querySelectorAll('.book-item');
 
 bookItems.forEach(item => {
 if (item.textContent.toLowerCase().includes(searchText.toLowerCase())) {
 item.classList.add('highlighted');
 } else {
 item.classList.remove('highlighted');
 }
 });
}

// Обработчик нажатия кнопки поиска
document.getElementById('searchButton').addEventListener('click', function() {
 const searchText = document.getElementById('searchInput').value;
 searchBooks(searchText);
});

// Обработчик ввода текста в поле поиска (реактивный поиск)
document.getElementById('searchInput').addEventListener('input', function() {
 const searchText = this.value;
 searchBooks(searchText);
});

// Обработчик нажатия кнопки очистки поиска
document.getElementById('clearSearchButton').addEventListener('click', function() {
 document.getElementById('searchInput').value = '';
 searchBooks('');
});

Как объясняется в JavaScript.info, метод filter() создает новый массив со всеми элементами, прошедшими проверку, реализованную в предоставленной функции. Это идеально подходит для поиска книг по заданным критериям.

Выделение результатов поиска достигается с помощью CSS-класса highlighted, который добавляется к элементам, содержащим искомый текст. Это позволяет визуально выделить найденные книги на странице.

Полный пример кода приложения

javascript
// Полный JavaScript код для приложения "Домашняя библиотека"

// Инициализация массива книг
const books = [
 { title: "Преступление и наказание", author: "Ф.М. Достоевский", year: 1866 },
 { title: "Война и мир", author: "Л.Н. Толстой", year: 1869 },
 { title: "Анна Каренина", author: "Л.Н. Толстой", year: 1877 },
 { title: "Мастер и Маргарита", author: "М.А. Булгаков", year: 1967 }
];

// Функция для отображения всех книг
function displayBooks(booksToDisplay = books) {
 const container = document.getElementById('booksContainer');
 container.innerHTML = ''; // Очищаем контейнер
 
 // Используем метод map для преобразования массива книг в HTML-строку
 const booksHTML = booksToDisplay.map(book => `
 <div class="book-item">
 <h3>${book.title}</h3>
 <p><strong>Автор:</strong> ${book.author}</p>
 <p><strong>Год:</strong> ${book.year}</p>
 </div>
 `).join('');
 
 // Вставляем HTML в контейнер
 container.innerHTML = booksHTML;
 
 // Если это результат поиска, выделяем элементы
 const searchText = document.getElementById('searchInput').value;
 if (searchText.trim()) {
 highlightSearchResults(searchText);
 }
}

// Функция для валидации данных книги
function validateBook(title, author, year) {
 let isValid = true;
 
 // Проверка названия
 if (!title.trim()) {
 document.getElementById('titleError').style.display = 'block';
 isValid = false;
 } else {
 document.getElementById('titleError').style.display = 'none';
 }
 
 // Проверка автора
 if (!author.trim()) {
 document.getElementById('authorError').style.display = 'block';
 isValid = false;
 } else {
 document.getElementById('authorError').style.display = 'none';
 }
 
 // Проверка года
 const yearValue = parseInt(year);
 if (!year || isNaN(yearValue) || yearValue < 0 || yearValue > new Date().getFullYear()) {
 document.getElementById('yearError').style.display = 'block';
 isValid = false;
 } else {
 document.getElementById('yearError').style.display = 'none';
 }
 
 return isValid;
}

// Функция для поиска книг
function searchBooks(searchText) {
 if (!searchText.trim()) {
 // Если текст поиска пустой, отображаем все книги без выделения
 displayBooks();
 return;
 }
 
 // Фильтруем книги по тексту поиска (без учета регистра)
 const searchResults = books.filter(book => 
 book.title.toLowerCase().includes(searchText.toLowerCase()) ||
 book.author.toLowerCase().includes(searchText.toLowerCase()) ||
 book.year.toString().includes(searchText)
 );
 
 // Отображаем результаты поиска
 displayBooks(searchResults);
}

// Функция для выделения результатов поиска
function highlightSearchResults(searchText) {
 const bookItems = document.querySelectorAll('.book-item');
 
 bookItems.forEach(item => {
 if (item.textContent.toLowerCase().includes(searchText.toLowerCase())) {
 item.classList.add('highlighted');
 } else {
 item.classList.remove('highlighted');
 }
 });
}

// Обработчики событий
document.getElementById('addBookButton').addEventListener('click', function() {
 const title = document.getElementById('bookTitle').value;
 const author = document.getElementById('bookAuthor').value;
 const year = document.getElementById('bookYear').value;
 
 // Проверка данных
 if (validateBook(title, author, year)) {
 // Добавление новой книги в массив с помощью метода push
 books.push({
 title: title.trim(),
 author: author.trim(),
 year: parseInt(year)
 });
 
 // Очистка полей ввода
 document.getElementById('bookTitle').value = '';
 document.getElementById('bookAuthor').value = '';
 document.getElementById('bookYear').value = '';
 
 // Обновление отображения
 displayBooks();
 
 // Сообщение об успешном добавлении
 alert('Книга успешно добавлена!');
 }
});

document.getElementById('searchButton').addEventListener('click', function() {
 const searchText = document.getElementById('searchInput').value;
 searchBooks(searchText);
});

document.getElementById('searchInput').addEventListener('input', function() {
 const searchText = this.value;
 searchBooks(searchText);
});

document.getElementById('clearSearchButton').addEventListener('click', function() {
 document.getElementById('searchInput').value = '';
 searchBooks('');
});

// Первоначальное отображение книг
displayBooks();

Этот полный пример кода реализует все запрошенные функции: вывод списка книг из массива на страницу, добавление новых книг через кнопку с проверкой ввода, и поиск книг с выделением результатов. Код использует современные методы JavaScript для работы с массивами и DOM, что делает его эффективным и легко расширяемым.

Источники

  1. MDN Web Docs — Документация по методам массивов JavaScript и работе с DOM: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array
  2. JavaScript.info — Руководство по методам массивов и их применению в веб-разработке: https://javascript.info/array-methods
  3. MDN Web Docs — Документация по методу createElement для создания DOM-элементов: https://developer.mozilla.org/ru/docs/Web/API/Document/createElement
  4. MDN Web Docs — Документация по свойству innerHTML для вставки HTML-кода: https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML

Заключение

Реализация вывода элементов массива на экран в веб-приложении “Домашняя библиотека” требует сочетания знаний JavaScript, DOM-манипуляций и методов массивов. Основные этапы включают создание структуры HTML и CSS, инициализацию данных в массиве, реализацию функций отображения книг, добавления новых записей с валидацией и поиска с выделением результатов. Использование методов таких как map для преобразования данных в HTML, push для добавления новых элементов и filter для поиска позволяет создать динамическое и интерактивное приложение. Важно помнить о безопасности данных и валидации пользовательского ввода, особенно при работе с DOM и пользовательскими данными.

M
MDN contributors

Для работы с массивом в JavaScript можно использовать различные методы. Для вывода элементов массива на экран в DOM, сначала необходимо преобразовать массив в HTML-разметку, а затем вставить её в нужный элемент страницы. Методы массива, такие как forEach, map, filter, push и splice, помогут управлять данными о книгах. Метод push() добавляет новые книги в массив, splice() удаляет элементы, а filter() и find() позволяют искать нужные книги по заданным критериям.

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array
Илья Кантор / Автор, тренер, JS-разработчик
Илья Кантор

При создании приложения “Домашняя библиотека” важно правильно использовать методы массивов. Для отображения книг на странице можно использовать метод map() для преобразования массива объектов книг в HTML-элементы. Метод forEach() позволяет перебрать все элементы массива и отобразить их. Для поиска книг с выделением результатов подойдёт комбинация filter() для поиска и изменения стилей CSS для выделения найденных элементов. Важно помнить о валидации данных при добавлении новых книг через форму.

https://javascript.info/array-methods
M
MDN contributors

Для создания элементов DOM, которые будут отображать книги из массива, используйте метод document.createElement(). Этот метод создаёт новый HTML-элемент, который затем можно наполнить содержанием с помощью свойства innerHTML или textContent. Например, для каждой книги можно создать элемент

, заполнить его информацией о книге и добавить в контейнер на странице. Это позволяет динамически генерировать интерфейс домашней библиотеки на основе данных из массива.

https://developer.mozilla.org/ru/docs/Web/API/Document/createElement
M
MDN contributors

Свойство innerHTML позволяет вставлять HTML-код непосредственно в элементы DOM. При работе с массивом книг можно сгенерировать HTML-разметку для всех элементов массива и затем вставить её в контейнер с помощью innerHTML. Например, можно создать строку с HTML-кодом для всех книг и присвоить её значение innerHTML элемента-контейнера. Это быстрый способ отобразить все элементы массива на странице, но важно помнить о безопасности и экранировании данных для предотвращения XSS-атак.

https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML
Авторы
M
MDN contributors
Разработчики документации
Илья Кантор / Автор, тренер, JS-разработчик
Илья Кантор
Автор, тренер, JS-разработчик
Источники
MDN Web Docs / Портал документации
MDN Web Docs
Портал документации
JavaScript.info / Образовательный портал
JavaScript.info
Образовательный портал
Проверено модерацией
НейроОтветы
НейроОтветы
Модерация
Вывод элементов массива в DOM: создание домашней библиотеки