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

让我们添加一个按钮，用于在移动设备屏幕上打开和关闭导航菜单，这需要一些客户端交互！

¥Let’s add a button to open and close your navigation menu on mobile screen sizes, requiring some client-side interactivity!

准备好……

• 创建菜单组件

• 编写 <script> 以允许你的网站访问者打开和关闭导航菜单

• 将 JavaScript 移至 .js 文件

构建菜单组件

¥Build a Menu component

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

¥Create a <Menu /> component to open and close your mobile menu.

1. Create a file named Menu.astro in src/components/

2. Copy the following code into your component. It creates a button that will be used to toggle the visibility of the navigation links on mobile devices. (You will add the new CSS styles to global.css later.)

   src/components/Menu.astro

   ---
   ---
   <button aria-expanded="false" aria-controls="main-menu" class="menu">
     Menu
   </button>

3. Place this new <Menu /> component just before your <Navigation /> component in Header.astro.

   Show me the code!

   src/components/Header.astro

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

4. Add the following styles for your Menu component, including some responsive styles:

   src/styles/global.css

   /* nav styles */
   .menu {
     background-color: #0d0950;
     border: none;
     color: #fff;
     font-size: 1.2rem;
     font-weight: bold;
     padding: 5px 10px;
   }
   
   .nav-links {
     width: 100%;
     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;
     color: #0d0950;
   }
   
   .nav-links a:hover,
   .nav-links a:focus{
     background-color: #ff9776;
   }
   
   :has(.menu[aria-expanded="true"]) .nav-links {
     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;
     }
   
     .menu {
       display: none;
     }
   }

编写你的第一个脚本标签

¥Write your first script tag

你的头部目前还不具备交互功能，因为它无法响应用户输入，例如点击菜单来显示或隐藏导航链接。

¥Your header is not yet interactive because it can’t respond to user input, like clicking on the menu to show or hide the navigation links.

添加 <script> 标签可为 “listen” 提供客户端 JavaScript 以处理用户事件，然后做出相应响应。

¥Adding a <script> tag provides client-side JavaScript to “listen” for a user event and then respond accordingly.

1. Add the following <script> tag, using Astro’s built-in TypeScript support, to index.astro, just before the closing </body> tag.

   src/pages/index.astro

     <Footer />
     <script>
       const menu = document.querySelector('.menu');
   
       menu?.addEventListener('click', () => {
         const isExpanded = menu.getAttribute('aria-expanded') === 'true';
         menu.setAttribute('aria-expanded', `${!isExpanded}`);
       });
     </script>
   </body>

2. Check your browser preview again at various sizes, and verify that you have a working navigation menu that is both responsive to screen size and responds to user input on this page.

导入 .js 文件

¥Importing a .js file

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

¥Instead of writing your JavaScript directly on each page, you can move the contents of your <script> tag into its own .js file in your project.

1. Create src/scripts/menu.js (you will have to create a new /scripts/ folder) and move your JavaScript into it.

   src/scripts/menu.js

   const menu = document.querySelector('.menu');
   
   menu?.addEventListener('click', () => {
     const isExpanded = menu.getAttribute('aria-expanded') === 'true';
     menu.setAttribute('aria-expanded', `${!isExpanded}`);
   });

2. Replace the contents of the <script> tag on index.astro with the following file import:

   src/pages/index.astro

     <Footer />
     <script>
       const menu = document.querySelector('.menu');
   
       menu?.addEventListener('click', () => {
         const isExpanded = menu.getAttribute('aria-expanded') === 'true';
         menu.setAttribute('aria-expanded', `${!isExpanded}`);
       });
   
       import "../scripts/menu.js";
     </script>
   </body>

3. Check your browser preview again at a smaller size and verify that the menu still opens and closes your navigation links.

4. Add the same <script> with import to your other two pages, about.astro and blog.astro and verify that you have a responsive, interactive header on each page.

   src/pages/about.astro & src/pages/blog.astro

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

Takeaway

You had previously used some JavaScript to build parts of your site:

• Defining your page title and heading dynamically
• Mapping through a list of skills on the About page
• Conditionally displaying HTML elements

Those commands are all executed at build time to create static HTML for your site, and then the code is “thrown away.”

The JavaScript in a <script> tag is sent to the browser, and is available to run, based on user interactions like refreshing a page or toggling an input.

测试你的知识

¥Test your knowledge

1. Astro 什么时候运行在组件的 frontmatter 中编写的任何 JavaScript？

1. Astro never runs JavaScript

2. at build-time

3. When a visitor clicks a button

提交

2. Astro 可以选择将 JavaScript 发送到浏览器以允许：

1. users to click page links

2. faster load times

3. client-side interactivity

提交

3. 客户端 JavaScript 在编写或导入时将被发送到用户的浏览器：

1. in <script> tags

2. between a .astro file’s code fences

3. in global.css

提交

清单

¥Checklist

• 我可以在 <script> 标签中使用 JavaScript 添加客户端交互性。

• 我可以将 .js 文件导入 <script> 标签。

资源

¥Resources

Astro 中的客户端脚本

¥Client-side scripts in Astro