Skip to content

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

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

Get ready to…

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

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

Section titled Создание компонента 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;
      }
    }

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

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

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

Добавление тега <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

Section titled Импортируйте файл .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>

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

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

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

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

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

Контрольный список

Section titled Контрольный список

Ресурсы

Section titled Ресурсы

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

Contribute Community Sponsor