Отправка первого скрипта в браузер

Добавим гамбургер-меню для открытия и закрытия ваших ссылок на устройствах с мобильными экранами, требующие некоторой интерактивности на стороне клиента!

Приготовьтесь к...

Создать компонент гамбургер-меню
Написать <script>, чтобы позволить посетителям вашего сайта открывать и закрывать меню навигации
Перенесите свой JavaScript в .js файл

Создание компонента «Hamburger»

Создайте компонент <Hamburger />, чтобы открывать и закрывать мобильное меню.

Создайте файл с именем Hamburger.astro в src/components/
Скопируйте следующий код в ваш компонент. Этот код будет представлять ваше 3-линийное «гамбургер-меню», чтобы открывать и закрывать ваши ссылки навигации на мобильных устройствах. (Новые стили CSS будут добавлены позже в global.css.)
src/components/Hamburger.astro
```
---
---
<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
```
Разместите этот новый компонент <Hamburger /> прямо перед компонентом <Navigation /> в Header.astro.

Покажите мне код!

---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Hamburger />
    <Navigation />
  </nav>
</header>

Добавьте следующие стили для вашего компонента Hamburger:

/* nav styles */
.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: #ff9776;
}

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover, a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}

Напишите свой первый тег скрипта

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

Добавление тега <script> обеспечивает клиентскую JavaScript, которая «слушает» событие пользователя, а затем реагирует соответствующим образом.

Добавьте следующий тег <script> в index.astro, прямо перед закрывающим тегом </body>.

  <Footer />
  <script>
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
  </script>
</body>

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

Импорт `.js` файла

Вместо того, чтобы писать свой JavaScript непосредственно на каждой странице, вы можете переместить содержимое вашего тега <script> в отдельный .js файл в вашем проекте.

Создайте файл src/scripts/menu.js (вам придется создать новую папку /scripts/) и переместите свой JavaScript в него.
src/scripts/menu.js
```
document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('expanded');
});
```

Замените содержимое тега <script> в index.astro следующим импортом файла:

  <Footer />
  <script>
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });

    import "../scripts/menu.js";
  </script>
</body>

Проверьте предварительный просмотр в браузере еще раз в более маленьком размере и убедитесь, что меню гамбургеров по-прежнему открывает и закрывает ваши навигационные ссылки.
Добавьте тот же самый <script> с импортом на две другие страницы, about.astro и blog.astro, и убедитесь, что на каждой странице у вас есть адаптивный и интерактивный заголовок.
src/pages/about.astro & src/pages/blog.astro
```
 <Footer />
 <script>
   import "../scripts/menu.js";
 </script>
</body>
```

Ранее вы использовали некоторый JavaScript для создания частей своего сайта:

Динамическое определение заголовка и заголовка страницы
Сопоставление списка навыков на странице «Обо мне»
Условное отображение элементов HTML

Все эти команды выполняются во время сборки для создания статического HTML для вашего сайта, а затем код «выбрасывается».

JavaScript в теге <script> отправляется в браузер и может быть запущен на основе действий пользователя, таких как обновление страницы или переключение ввода.

Проверьте свои знания

Когда Astro запускает любой JavaScript, написанный в frontmatter компонента?
1. Astro никогда не запускает JavaScript
2. во время сборки
3. когда посетитель нажимает кнопку
Дополнительно, Astro может отправлять JavaScript в браузер, чтобы позволить:
1. пользователям щелкать по ссылкам страницы
2. более быстрое время загрузки
3. интерактивность на стороне клиента
JavaScript на стороне клиента будет отправлен в браузер пользователя, когда он будет написан или импортирован:
1. в тегах <script>
2. между кодовыми заборами файла .astro
3. в global.css

Чек-лист

Я могу добавить интерактивность на стороне клиента с помощью JavaScript в теге <script>.
Я могу импортировать файл .js в тег <script>.

Ресурсы

Клиентские скрипты Astro