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

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

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

准备好……

• 创建汉堡菜单组件

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

• 将 JavaScript 移至 .js 文件

构建汉堡组件

标题部分 构建汉堡组件

¥Build a Hamburger component

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

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

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

2. Copy the following code into your component. This will represent your 3-line “hamburger” menu to open and close your navigation links on mobile. (You will add the new CSS styles to global.css later.)

   src/components/Hamburger.astro

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

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

   Show me the code!

   src/components/Header.astro

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

4. Add the following styles for your Hamburger component:

   src/styles/global.css

   /* 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;
     }
   }

编写你的第一个脚本标签

标题部分 编写你的第一个脚本标签

¥Write your first script tag

你的标题尚未交互，因为它无法响应用户输入，例如单击汉堡菜单以显示或隐藏导航链接。

¥Your header is not yet interactive because it can’t respond to user input, like clicking on the hamburger 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 to index.astro, just before the closing </body> tag.

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburger')?.addEventListener('click', () => {
         document.querySelector('.nav-links')?.classList.toggle('expanded');
       });
     </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 文件

标题部分 导入 .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

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

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

   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. Check your browser preview again at a smaller size and verify that the hamburger 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