JavaScript, который улучшает готовую страницу

Ссылка на статью должна открывать статью. Для этого достаточно HTML. JavaScript может добавить слайдер, спрятать шапку при прокрутке или помочь открыть меню. Но сбой этого кода не должен закрывать человеку доступ к материалу.

Этот подход называют прогрессивным улучшением: сначала создаём работающую основу, затем добавляем удобства. Он полезен при медленной сети, отключённом скрипте и ошибке отдельного компонента. Поисковые и другие автоматизированные системы также получают содержание прямо в ответе сервера.

Сначала создайте понятный HTML

Для перехода используйте ссылку с настоящим адресом. Для действия на текущей странице — кнопку. Не заменяйте их блоками div с обработчиком клика.

<a href="/materials/?article=architecture/reliable-integrations">
  Надёжные интеграции
</a>
<button type="button" hidden data-next>
  Следующий материал
</button>

Ссылка работает сразу. Кнопку управления можно показать после успешного подключения слайдера. Так посетитель не увидит управление, которое ничего не делает. Надпись должна описывать действие; один знак стрелки без доступного названия не объясняет его всем пользователям.

Перед скриптом выведите заголовки, краткие описания и адреса карточек. Если дополнительные слайды скрываются, предусмотрите доступ ко всем материалам через обычный список или каталог. Не загружайте основной текст статьи только после запуска JavaScript.

Используйте современный синтаксис по назначению

Объявляйте переменную через const, когда не собираетесь присваивать ей другое значение. Используйте let для изменяемого состояния, например номера текущего слайда. const не делает содержимое объекта неизменным: его свойства всё ещё можно менять.

Подключайте файл с defer, если он должен работать после разбора HTML. Для нескольких связанных файлов можно применять модули. Модульная система полезна для явных зависимостей; небольшому сайту не обязательно нужна сложная сборка.

<script src="/assets/ui.js" defer></script>

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

Проверяйте наличие компонента

Общий скрипт подключается на разных страницах. На одной есть слайдер, на другой — только статья. Инициализируйте каждый компонент отдельно:

function initSlider() {
  const slider = document.querySelector('[data-slider]');
  if (!slider) return;

  const next = slider.querySelector('[data-next]');
  if (!next) return;

  // Подключаем обработчик, затем показываем управление.
  next.addEventListener('click', showNextSlide);
  next.hidden = false;
}

В примере showNextSlide — функция переключения, которую нужно определить в компоненте. Не копируйте фрагмент как готовый слайдер. Здесь показан порядок: найти элементы, подключить действие, показать кнопку. Отсутствие слайдера не должно прекращать настройку меню и других независимых элементов.

Не мешайте чтению и клавиатуре

Слайдер может переключаться по команде человека. Автоматическая смена сложнее: нужно управление остановкой, обработка фокуса и предпочтения по уменьшению движения. Для подборки статей ручное переключение обычно достаточно.

Скрытая шапка должна возвращаться, когда человек переводит фокус к меню. После закрытия мобильного меню клавишей Escape верните фокус к кнопке открытия. Проверяйте путь клавишами Tab, Shift+Tab и Enter, а не только мышью.

Для прокрутки не пересчитывайте разметку без необходимости. Объединяйте обновления в requestAnimationFrame; обработчик не должен запускать бесконечную анимацию. Отключайте декоративное движение при prefers-reduced-motion.

Когда меняете обычную подпись, используйте textContent. Не вставляйте внешнюю строку через innerHTML: браузер воспринимает её как разметку. Если нужен новый элемент, создайте его через DOM и задайте проверенные атрибуты.

Проверьте то, что увидит человек

Проверьте синтаксис файла командой node --check assets/ui.js. Она не запускает браузер и не проверяет кнопки. Затем откройте страницу, нажмите F12 и выберите вкладку Console: после действий не должно появляться ошибок сайта.

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

Официальные источники

• Стандарт ECMAScript.
• Прогрессивное улучшение, MDN.
• Подключение скриптов, HTML Standard.
• События, DOM Standard.
• Кадры анимации, HTML Standard.
• Свойство textContent, MDN.