Send your first script to the browser
本頁內容尚未翻譯。
Let’s add a hamburger menu to open and close your links on mobile screen sizes, requiring some client-side interactivity!
Get ready to…
- Create a hamburger menu component
- Write a
<script>
to allow your site visitors to open and close the navigation menu - Move your JavaScript to its
.js
file
Build a Hamburger component
Section titled Build a Hamburger componentCreate a <Hamburger />
component to open and close your mobile menu.
-
Create a file named
Hamburger.astro
insrc/components/
-
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.) -
Place this new
<Hamburger />
component just before your<Navigation />
component inHeader.astro
.Show me the code!
-
Add the following styles for your Hamburger component:
Write your first script tag
Section titled Write your first script tagYour 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.
Adding a <script>
tag provides client-side JavaScript to “listen” for a user event and then respond accordingly.
-
Add the following
<script>
tag toindex.astro
, just before the closing</body>
tag. -
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.
Importing a .js
file
Section titled Importing a .js fileInstead 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.
-
Create
src/scripts/menu.js
(you will have to create a new/scripts/
folder) and move your JavaScript into it. -
Replace the contents of the
<script>
tag onindex.astro
with the following file import: -
Check your browser preview again at a smaller size and verify that the hamburger menu still opens and closes your navigation links.
-
Add the same
<script>
with import to your other two pages,about.astro
andblog.astro
and verify that you have a responsive, interactive header on each page.
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
Section titled Test your knowledge-
When does Astro run any JavaScript written in a component’s frontmatter?
-
Optionally, Astro can send JavaScript to the browser to allow:
-
The client-side JavaScript will be sent to a user’s browser when it is written or imported: