Sende dein erstes Skript an den Browser

Fügen wir ein Hamburger-Menü hinzu, um deine Links auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!

Mach dich bereit, …

• Erstelle eine Hamburger-Menü-Komponente
• Schreibe ein <script>, das es deinen Seitenbesuchern erlaubt, das Navigationsmenü zu öffnen und zu schließen
• Verschiebe dein JavaScript in eine .js-Datei

Baue eine Hamburger-Komponente

Abschnitt betitelt Baue eine Hamburger-Komponente

Erstelle eine <Hamburger />-Komponente, um dein mobiles Menü zu öffnen und zu schließen.

1. Erstelle eine Datei namens Hamburger.astro in src/components/

2. Kopiere den folgenden Code in deine Komponente. Dies wird dein “Hamburger”-Menü mit 3 Linien darstellen, um deine Navigationslinks auf mobilen Geräten anzuzeigen und zu verstecken. (Die neuen CSS-Styles fügst du später in global.css hinzu.)

   src/components/Hamburger.astro

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

3. Platziere diese neue <Hamburger />-Komponente direkt vor deiner <Navigation />-Komponente in Header.astro.

   Zeige mir den Code!

   src/components/Header.astro

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

4. Füge die folgenden Styles für deine Hamburger-Komponente hinzu:

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

Schreibe dein erstes Skript-Tag

Abschnitt betitelt Schreibe dein erstes Skript-Tag

Dein Header ist noch nicht interaktiv, da er nicht auf Benutzereingaben reagieren kann, wie das Klicken auf das Hamburger-Menü, um die Navigationslinks anzuzeigen oder zu verstecken.

Das Hinzufügen eines <script>-Tags ermöglicht es clientseitigem JavaScript, auf ein Benutzerereignis zu “hören” und entsprechend zu reagieren.

1. Füge das folgende <script>-Tag zu index.astro, kurz vor dem schließenden </body>-Tag hinzu.

   src/pages/index.astro

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

2. Überprüfe deine Browser-Vorschau erneut in verschiedenen Größen und stelle sicher, dass du ein funktionierendes Navigationsmenü hast, das sowohl auf die Bildschirmgröße als auch auf Benutzereingaben auf dieser Seite reagiert.

Eine .js-Datei importieren

Abschnitt betitelt Eine .js-Datei importieren

Anstatt dein JavaScript direkt auf jeder Seite zu schreiben, kannst du den Inhalt deines <script>-Tags in seine eigene .js-Datei in deinem Projekt verschieben.

1. Erstelle src/scripts/menu.js (du musst einen neuen /scripts/-Ordner erstellen) und verschiebe dein JavaScript dorthin.

   src/scripts/menu.js

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

2. Ersetze den Inhalt des <script>-Tags auf index.astro durch den folgenden Dateiimport:

   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. Überprüfe deine Browser-Vorschau erneut bei kleineren Größen und bestätige, dass das Hamburger-Menü deine Navigationslinks weiterhin öffnet und schließt.

4. Füge dasselbe <script> mit Import auf deinen anderen zwei Seiten, about.astro und blog.astro, hinzu und überprüfe, ob du eine responsive, interaktive Kopfzeile auf jeder Seite hast.

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

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

Kerngedanke

Du hast bereits etwas JavaScript verwendet, um Teile deiner Website zu bauen:

• Dynamische Definition deines Seitentitels und der Überschriften
• Durchlaufen einer Liste von Fähigkeiten auf der “Über mich”-Seite
• Bedingtes Anzeigen von HTML-Elementen

Diese Befehle werden alle beim Erstellen ausgeführt, um statisches HTML für deine Website zu erstellen, und dann wird der Code “weggeworfen”.

Das JavaScript in einem <script>-Tag wird an den Browser gesendet und steht zur Verfügung, um basierend auf Benutzerinteraktionen wie dem Aktualisieren einer Seite oder dem Umschalten eines Eingabefeldes ausgeführt zu werden.

Teste dein Wissen

Abschnitt betitelt Teste dein Wissen

1. Wann führt Astro JavaScript aus, das im Frontmatter einer Komponente geschrieben ist?

   1. Astro führt niemals JavaScript aus

   2. beim Build-Zeitpunkt

   3. Wenn ein Besucher einen Button klickt

   Absenden

2. Optional kann Astro JavaScript an den Browser senden, um:

   1. Benutzern zu ermöglichen, Seitenlinks zu klicken

   2. schnellere Ladezeiten zu erreichen

   3. clientseitige Interaktivität zu ermöglichen

   Absenden

3. Das clientseitige JavaScript wird an den Browser des Benutzers gesendet, wenn es […]geschrieben oder importiert wird:

   1. in <script>-Tags

   2. zwischen den Codezäunen einer .astro-Datei

   3. in global.css

   Absenden

Checkliste

Abschnitt betitelt Checkliste

• Ich kann clientseitige Interaktivität mit JavaScript in einem <script>-Tag hinzufügen.
• Ich kann eine .js-Datei in ein <script>-Tag importieren.

Ressourcen

Abschnitt betitelt Ressourcen

Client-seitige Skripte in Astro