Отправьте свой первый скрипт в браузер

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

Приготовьтесь…

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

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

Заголовок раздела Создание компонента Hamburger

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

1. Создайте файл с именем Hamburger.astro в src/components/.

2. Скопируйте следующий код в ваш компонент. Он будет представлять собой 3-строчное меню “гамбургер” для открытия и закрытия навигационных ссылок на мобильных устройствах. (Вы добавите новые CSS-стили в global.css позже).

   src/components/Hamburger.astro

   ---
   ---
   <div class="hamburger">
     <span class="line"></span>
     <span class="line"></span>
     <span class="line"></span>
   </div>

3. Поместите этот новый компонент <Hamburger /> непосредственно перед компонентом <Navigation /> в файле Header.astro.

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

   src/components/Header.astro

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

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

   src/styles/global.css

   /* стили для навигации */
   .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 на стороне клиента, чтобы “слушать” события пользователя и реагировать соответствующим образом.

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

   src/pages/index.astro

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

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

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

Заголовок раздела Импорт файла .js

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

1. Создайте папку src/scripts/menu.js (вам придется создать новую папку /scripts/`) и перенесите в нее ваш JavaScript.

   src/scripts/menu.js

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

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

   src/pages/index.astro

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

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

4. Добавьте тот же <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> отправляется в браузер и доступен для выполнения при взаимодействии с пользователем, например при обновлении страницы или переключении ввода.

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

Заголовок раздела Проверьте свои знания

1. Когда Astro выполняет JavaScript, написанный во frontmatter компонента?

   1. Astro никогда не выполняет JavaScript

   2. во время сборки

   3. Когда посетитель нажимает на кнопку

   Отправить

2. Дополнительно, Astro может отправить JavaScript в браузер, чтобы разрешить:

   1. пользователям переходить по ссылкам на странице

   2. ускорение загрузки

   3. интерактивность на стороне клиента

   Отправить

3. JavaScript на стороне клиента будет отправлен в браузер пользователя, когда он будет написан или импортирован:

   1. в тегах <script>

   2. между кодовым забором файла .astro

   3. в global.css

   Отправить

Чек-лист

Заголовок раздела Чек-лист

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

Ресурсы

Заголовок раздела Ресурсы

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