向浏览器发送你的第一个脚本

让我们添加一个汉堡菜单，用于在移动设备屏幕尺寸上打开和关闭链接，这需要一些客户端交互！

准备好去……

创建一个汉堡菜单组件
编写一个 <script> 标签，让你的网站访问者可以打开和关闭导航菜单
将你的 JavaScript 移动到其 .js 文件中

构建一个汉堡包组件

创建一个 <Hamburger /> 组件来打开和关闭你的移动端菜单。

在 src/components/ 中创建一个名为 Hamburger.astro 的文件
将以下代码复制到你的组件中。它将代表你的三条线的“汉堡”菜单，用于在移动设备上打开和关闭导航链接。（稍后你将把新的 CSS 样式添加到 global.css 中。）
src/components/Hamburger.astro
```
---
---
<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
```

将这个新的 <Hamburger /> 组件放在 Header.astro 文件中 <Navigation /> 组件的正前方。

显示代码！

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

为你的汉堡包组件添加以下样式

/* 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 标签

你的页眉还不是交互式的，因为它无法响应用户输入，例如点击汉堡菜单来显示或隐藏导航链接。

添加 <script> 标签可以提供客户端 JavaScript 来“监听”用户事件，然后相应地做出反应。

将以下 <script> 标签添加到 index.astro 中，就在 </body> 结束标签之前。

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

在不同尺寸下再次检查你的浏览器预览，并验证你有一个可用的导航菜单，它既能响应屏幕尺寸，也能响应此页面上的用户输入。

导入一个 `.js` 文件

你可以将 <script> 标签的内容移动到项目中的独立 .js 文件中，而不是直接在每个页面上编写 JavaScript。

创建 src/scripts/menu.js（你将需要创建一个新的 /scripts/ 文件夹），并将你的 JavaScript 移入其中。

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

用以下文件导入替换 index.astro 页面上 <script> 标签的内容

  <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>
```

知识测验

Astro 何时运行写在组件 frontmatter 中的 JavaScript？
1. Astro 从不运行 JavaScript
2. 在构建时
3. 当访问者点击按钮时
Astro 可以选择性地将 JavaScript 发送到浏览器，以允许
1. 用户点击页面链接
2. 更快的加载速度
3. 客户端交互性
客户端 JavaScript 在编写或导入到以下位置时，将被发送到用户的浏览器
1. 在 <script> 标签中
2. 在 .astro 文件的代码围栏之间
3. 在 global.css 中

清单

我可以在 <script> 标签中用 JavaScript 添加客户端交互性。
我可以将 .js 文件导入到 <script> 标签中。