<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Фильтр товаров на JavaScript

Фильтр товаров на JavaScript

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

Как работает фильтр товаров на JS?

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

Список товаров на HTML

Создадим поле для ввода товара input и список товаров - тег ul.

<input type="text" id="input" placeholder="Введите продукт.">
<ul id="list">
    <li>масло</li>
    <li>сметана</li>
    <li>творог</li>
    <li>кефир</li>
    <li>молоко</li>
    <li>сыр</li>
    <li>ряженка</li>
    <li>брынза</li>
</ul>

JavaScript код

Объявим переменную filter и поместим туда функцию.

let filter = function () {

Получим из документа поле для ввода по его идентификатору и поместим в переменную input.

let input = document.getElementById('input');

Повесим на инпут обработчик событие addEventListener, который будет отлавливать нажатие клавиши (событие keyup) в этом поле. После отлова события, запустится callback функция.

input.addEventListener('keyup', function () {

В теле функции пропишем действия, что должно происходить. Положим в переменную filter значение, вводимое пользователем в поле для поиска и приведем его к нижнему регистру. Метод toLowerCase() преобразует текст в нижний регистр, что сделает поиск нечувствительным к регистру (можно искать "кефир", "Кефир" и даже "КЕФИР").

let filter = input.value.toLowerCase(),

Создадим ещё одну переменную filterItems. Найдем все элементы списка list и присвоим этой переменной.

filterItems = document.querySelectorAll('#list li');

Пройдемся по всем элементам в цикле forEach и на каждом из них будем вызывать стрелочную функцию, внутри которой пропишем условие.

filterItems.forEach(item => {

С помощью метода indexOf проверяем, есть ли в строке данные из переменной filter. Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в списке или -1, если такого индекса нет. Если значение у item больше -1, то ничего не скрывается. В противном случае, если у нас -1, то item скрывается через свойство display: none.

if (item.innerHTML.toLowerCase().indexOf(filter) > -1) {
    item.style.display = '';
} else {
    item.style.display = 'none';
}
        })
    })
};

Иными словами, мы сопоставляет введенные значения (первые буквы) пользователем с товарами в списке. Все строки не соответствующие поиску скрываются, а все найденные совпадения возвращаются в список.

// Вызываем функцию. filter();

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.