День 18 | Верстаем теги и создаем фильтр на JS — Продвинутый курс по верстке сайтов

Введение в JavaScript

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

Что такое JavaScript? JavaScript — это язык программирования, который работает в браузере. Он может:

Изменять содержимое страницы
Реагировать на действия пользователя (клики, наведение, ввод текста)
Выполнять вычисления
Загружать данные с сервера
Создавать анимации

Где писать JavaScript? JavaScript можно писать:

В отдельном файле .js (рекомендуется)
Внутри тега <script> в HTML
В атрибутах HTML (не рекомендуется, устаревший способ)

Основы JavaScript

Прежде чем создавать фильтр, давайте изучим основы JavaScript.

Переменные

Переменная — это "коробка" для хранения данных. В JavaScript переменные объявляются через let, const или var (старый способ, не рекомендуется).

// let — переменная, которую можно изменить
let name = "Иван";
name = "Петр"; // Можно изменить

// const — константа, нельзя изменить
const age = 25;
// age = 30; // Ошибка! Нельзя изменить константу

// var — старый способ (не рекомендуется)
var oldWay = "не используйте";

Когда использовать let, а когда const?

const — если значение не будет меняться (рекомендуется по умолчанию)
let — если значение будет меняться

Функции

Функция — это блок кода, который можно выполнить многократно. Функции помогают не повторять один и тот же код.

// Объявление функции
function sayHello() {
  console.log("Привет!");
}

// Вызов функции
sayHello(); // Выведет "Привет!" в консоль

// Функция с параметрами
function greet(name) {
  console.log("Привет, " + name + "!");
}

greet("Иван"); // Выведет "Привет, Иван!"

// Функция, которая возвращает значение
function add(a, b) {
  return a + b;
}

let result = add(5, 3); // result будет равен 8

Что такое console.log? console.log() — это функция для вывода информации в консоль браузера. Очень полезно для отладки (поиска ошибок).

Как открыть консоль?

Chrome/Edge: F12 или Ctrl+Shift+I (Windows), Cmd+Option+I (Mac)
Firefox: F12 или Ctrl+Shift+K (Windows), Cmd+Option+K (Mac)
Safari: Cmd+Option+C (нужно включить меню разработчика в настройках)

Стрелочные функции (современный способ)

Современный способ объявления функций:

// Вместо этого:
function add(a, b) {
  return a + b;
}

// Можно писать так:
const add = (a, b) => {
  return a + b;
}

// Или ещё короче (если одна строка):
const add = (a, b) => a + b;

Стрелочные функции короче и удобнее. Мы будем использовать их в курсе.

Работа с DOM

Что такое DOM? DOM (Document Object Model) — это представление HTML страницы в виде объектов JavaScript. Через DOM мы можем получать элементы страницы и изменять их.

Получение элементов

Есть несколько способов получить элемент со страницы:

// Получить элемент по ID
const element = document.getElementById("myId");

// Получить элемент по классу (первый найденный)
const element = document.querySelector(".myClass");

// Получить элемент по селектору (первый найденный)
const element = document.querySelector("#myId .myClass");

// Получить все элементы по классу
const elements = document.querySelectorAll(".myClass");

// Получить элемент по тегу
const element = document.querySelector("button");

Разница между querySelector и querySelectorAll:

querySelector — возвращает один элемент (первый найденный) или null, если ничего не найдено
querySelectorAll — возвращает массив (NodeList) всех найденных элементов

Что такое селектор? Селектор — это способ выбрать элемент. Те же селекторы, что используются в CSS:

#id — по ID
.class — по классу
tag — по тегу
.parent .child — вложенный элемент

Работа с классами

Через JavaScript можно добавлять, удалять и переключать классы:

const element = document.querySelector(".myElement");

// Добавить класс
element.classList.add("active");

// Удалить класс
element.classList.remove("active");

// Переключить класс (если есть — удалить, если нет — добавить)
element.classList.toggle("active");

// Проверить, есть ли класс
if (element.classList.contains("active")) {
  console.log("Элемент активен");
}

Работа с атрибутами

Можно получать и устанавливать атрибуты элементов:

const element = document.querySelector(".myElement");

// Получить атрибут
const value = element.getAttribute("data-filter");

// Установить атрибут
element.setAttribute("data-filter", "new-value");

// Получить data-атрибут (специальный способ)
const value = element.dataset.filter; // Для data-filter
// или
const value = element.dataset.myValue; // Для data-my-value

События

События — это действия пользователя или браузера (клик, наведение, загрузка страницы и т.д.). JavaScript может "слушать" события и реагировать на них.

const button = document.querySelector(".myButton");

// Добавить обработчик события
button.addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

// Или с именованной функцией
function handleClick() {
  console.log("Кнопка нажата!");
}

button.addEventListener("click", handleClick);

Основные события:

click — клик мышью
mouseenter — наведение курсора
mouseleave — уход курсора
input — ввод текста в поле
change — изменение значения
submit — отправка формы
load — загрузка элемента

Создание фильтра

Теперь, когда мы знаем основы, создадим фильтр. Фильтр позволяет показывать/скрывать элементы по категориям.

HTML структура

<div class="filter-container">
  <div class="filter-tags">
    <button class="filter-tag active" data-filter="all">Все</button>
    <button class="filter-tag" data-filter="web">Веб</button>
    <button class="filter-tag" data-filter="mobile">Мобильные</button>
    <button class="filter-tag" data-filter="design">Дизайн</button>
  </div>
  
  <div class="filter-items">
    <div class="filter-item" data-category="web">Веб-сайт 1</div>
    <div class="filter-item" data-category="mobile">Мобильное приложение</div>
    <div class="filter-item" data-category="design">Дизайн проект</div>
    <div class="filter-item" data-category="web">Веб-сайт 2</div>
    <div class="filter-item" data-category="mobile">iOS приложение</div>
  </div>
</div>

Разберём структуру:

data-filter — атрибут, который хранит значение фильтра (какую категорию показывать)
data-category — атрибут, который хранит категорию элемента
class="active" — класс для активной кнопки фильтра

Разбор JavaScript кода фильтра

Давайте разберём код построчно:

// Получаем все кнопки фильтра и элементы
const filterTags = document.querySelectorAll('.filter-tag');
const filterItems = document.querySelectorAll('.filter-item');

Что происходит:

document.querySelectorAll('.filter-tag') — находит все элементы с классом filter-tag
Результат сохраняется в переменную filterTags
То же самое для элементов фильтрации

// Обработчик клика на тег
filterTags.forEach(tag => {
  tag.addEventListener('click', () => {
    // ...
  });
});

Что такое forEach? forEach — это метод массива, который выполняет функцию для каждого элемента. В нашем случае — добавляет обработчик клика к каждой кнопке фильтра.

Синтаксис: массив.forEach(элемент => { код })

// Убираем активный класс со всех тегов
filterTags.forEach(t => t.classList.remove('active'));
// Добавляем активный класс к нажатому тегу
tag.classList.add('active');

Что происходит:

Проходим по всем кнопкам и убираем класс active
Добавляем класс active к нажатой кнопке

// Получаем значение фильтра
const filterValue = tag.getAttribute('data-filter');

Получаем значение атрибута data-filter нажатой кнопки. Это будет "all", "web", "mobile" или "design".

// Фильтруем элементы
filterItems.forEach(item => {
  const category = item.getAttribute('data-category');
  
  if (filterValue === 'all' || category === filterValue) {
    item.classList.remove('hidden');
  } else {
    item.classList.add('hidden');
  }
});

Логика фильтрации:

Проходим по всем элементам
Получаем категорию каждого элемента
Если фильтр = "all" ИЛИ категория совпадает с фильтром — показываем элемент (убираем класс hidden)
Иначе — скрываем элемент (добавляем класс hidden)

Что такое if/else? Это условный оператор. Если условие в скобках истинно, выполняется код после if, иначе — код после else.

Операторы сравнения:

=== — строгое равенство (проверяет и значение, и тип)
== — нестрогое равенство (не рекомендуется)
!== — не равно
|| — логическое ИЛИ (хотя бы одно условие должно быть истинно)
&& — логическое И (оба условия должны быть истинны)

Практическое задание

Создайте HTML структуру с тегами фильтра и элементами
Стилизуйте теги и элементы
Напишите JavaScript код для фильтрации
Добавьте плавную анимацию при переключении (используйте transition в CSS)
Добавьте счётчик количества видимых элементов
Попробуйте добавить несколько категорий к одному элементу (через пробел: data-category="web design")

Что дальше?

Отлично! Вы создали свой первый интерактивный элемент на JavaScript. В следующем уроке мы создадим слайдер — один из самых популярных компонентов на сайтах.

Материалы по теме

Глоссарий digital-терминов Глоссарий
Статьи блога по разработке и SEO Блог
Практические чеклисты по внедрению Чеклисты
Ваш сайт тормозит? Вот сколько денег вы теряете каждый день Статья
Мета-теги Термин
Ретаргетинг: стратегия возврата посетителей Статья

День 18 | Верстаем теги и создаем фильтр на JS

Введение в JavaScript

Основы JavaScript

Переменные

Функции

Стрелочные функции (современный способ)

Работа с DOM

Получение элементов

Работа с классами

Работа с атрибутами

События

Создание фильтра

HTML структура

Разбор JavaScript кода фильтра

Практическое задание

Что дальше?

Материалы по теме

Оставить заявку