Создание страницы поиска с возможностью поделиться результатами — практический frontend-проект для тех, кто знаком с основами HTML, CSS и JavaScript. Вы создадите поиск для Fieldnote, вымышленного каталога местных событий: ссылка откроет в другом контексте браузера те же отфильтрованные и упорядоченные результаты на той же странице выдачи.
Две пошаговые лабораторные работы начинаются с готового примера общей ссылки, затем переходят к состоянию поиска в URL и навигации браузера. Самостоятельное задание применяет те же механизмы к другому выпуску событий с новыми категориями и размером страницы. Каждая работа предоставляет собственные исходные файлы и данные.
Чему вы научитесь
После завершения курса вы сможете:
- фильтровать, сортировать и разбивать на страницы подготовленный каталог событий, сохраняя связь содержимого каждой записи с её стабильным ID, в том числе у событий с одинаковым названием;
- читать и нормализовать
q,category,sortиpageс помощьюURLиURLSearchParams, обрабатывая пробелы,&, буквальный символ+, неизвестные значения и недопустимые номера страниц; - согласовывать отправленные фильтры, видимые элементы управления, результаты и ссылку для передачи другим, понятно показывая пустую выдачу и границы страниц;
- использовать
pushState,replaceStateиpopstateдля восстановления подтверждённых представлений при обновлении и настоящих переходах Назад/Вперёд без лишних записей в истории; - открывать настоящую ссылку в чистом контексте браузера и сравнивать те же записи в том же порядке, сохраняя текущий путь, посторонние параметры запроса и фрагмент.
Для кого этот курс
Курс предназначен для тех, кто хочет связать состояние браузера, обработку данных JavaScript и полезный поисковый интерфейс.
Предварительные требования: Элементарная работа с терминалом и путями; формы HTML; CSS-вёрстка и видимый фокус; объекты, массивы, функции, выбор и изменение элементов DOM и события JavaScript. Вы должны уметь редактировать и сохранять файлы проекта. До самостоятельного задания лабораторные работы объясняют кодирование URL, filter/sort/slice, копирование массивов, стабильную идентичность записей и историю браузера. React и программирование backend не требуются.
Учебная среда: LabEx предоставляет готовую среду разработки в браузере, статический сайт и синтетические данные событий. Вы реализуете браузерный JavaScript; сервер только отдаёт файлы. Подписи сайта и вывод во время выполнения остаются на английском.
Часто задаваемые вопросы
Буду ли я создавать поисковый backend или сохранять предпочтения посетителей?
Нет. Фильтрация, сортировка и разбиение на страницы выполняются в браузере на подготовленных локальных данных. URL содержит подтверждённое представление, поэтому другому браузеру не нужны данные, сохранённые первым браузером.
Что происходит с изменениями, которые я ещё не отправил?
Значения элементов управления остаются черновиком до отправки через Search. Обновление восстанавливает подтверждённое состояние из URL. Вы также потренируетесь исправлять слишком узкий поиск и применять описанные значения по умолчанию или исправления номера страницы; отсутствие совпадений — допустимый результат.
Можно ли опубликовать постоянную ссылку в рамках этого курса?
Нет. Обмен ссылками ограничен работающей разрешённой лабораторной средой и доступным маршрутом. Ссылка не продлевает жизнь VM, не гарантирует доступ между отдельными VM лабораторных работ и не публикует страницу в Интернете. Развёртывание в production и полная сертификация доступности не входят в курс.
