Интерактивность с помощью JavaScript

Открывается меню, но его кнопка по-прежнему указывает на то, что оно закрыто

• Видимая панель и её состояние доступности могут не совпадать. Надёжное взаимодействие обновляет как содержимое, так и элемент управления, описывающий его.
• JavaScript браузера реагирует на действия пользователя. Не помещайте приватные учетные данные в клиентский код; посетители могут просматривать и изменять то, что выполняется на их машинах.

Найдите распознанные элементы

• DOM представляет документ в виде узлов при парсинге HTML. Код может запросить существующий узел и изменить его свойства.
• Скрипт, запускаемый до того, как будет распознан его целевой элемент, может получить null. Отложенный внешний скрипт запускается после парсинга; скрипт в конце тега body также работает для элементов, расположенных выше него.

Зарегистрируйте ответовку один раз

• Событие фиксирует действие, например клик или отправку формы. addEventListener регистрирует функцию для выполнения при генерации этого события.
• Найдите кнопку и панель, зарегистрируйте обработчик, затем обновляйте состояние при каждом клике. Не вызывайте функцию во время регистрации, если intend передать её в качестве обработчика.

Сохраняйте рабочий вариант fallback

• Сохраните это как HTML-файл. Ссылки изначально видимы; кнопка переключения появляется только после готовности её обработчика.
• Дважды нажмите кнопку. Убедитесь, что панель и aria-expanded изменяются одновременно. Нативная кнопка также реагирует на активацию с клавиатуры.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
  <button id="menu-button" type="button" hidden
          aria-controls="menu-panel" aria-expanded="true">Menu</button>
  <nav id="menu-panel" aria-label="Club">
    <a href="#meeting">Meeting details</a>
  </nav>
  <main id="meeting"><h1>Meet Thursday in room 12</h1></main>
  <script>
    const button = document.querySelector('#menu-button');
    const panel = document.querySelector('#menu-panel');
    button.addEventListener('click', () => {
      panel.hidden = !panel.hidden;
      button.setAttribute('aria-expanded', String(!panel.hidden));
    });
    button.hidden = false;
  </script>
</body>
</html>

Разделите полезные проверки от доверенных проверок

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

Проследите два действия и отказ

• Запишите начальное состояние и состояние после двух активаций. Повторите с использованием клавиатуры, затем проверьте, остается ли доступной основная навигация без скрипта.
• Объясните, что выполняется в браузере, а что требует проверки на сервере. Протестируйте этот локальный пример без отправки реальных данных формы.