Zum Inhalt springen

Sende dein erstes Skript an den Browser

Fügen wir ein Button hinzu, um dein Navigationsmenü auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!

Mach dich bereit, …

  • Erstelle eine 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 Menü-Komponente

Abschnitt betitelt „Baue eine Menü-Komponente“

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

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

  2. Kopiere den folgenden Code in deine Komponente. Es erstellt eine Schaltfläche, die dazu dient, die Sichtbarkeit der Navigationslinks auf mobilen Geräten ein- und auszublenden. (Die neuen CSS-Styles fügst du später in global.css hinzu.)

    src/components/Menu.astro
    ---
    ---
    <button aria-expanded="false" aria-controls="main-menu" class="menu">
      Menü
    </button>

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

    Zeige mir den Code!
    src/components/Header.astro
    ---
    import Menu from './Menu.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Menu />
        <Navigation />
      </nav>
    </header>

  4. Füge die folgenden Styles für deine Menü-Komponente hinzu, einschließlich einiger responsiver Styles:

    src/styles/global.css
    /* Navigation-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;
      }
    }

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 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>
        const menu = document.querySelector('.menu');
    

        menu.addEventListener('click', () => {
          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
          menu.setAttribute('aria-expanded', !isExpanded);
        });
      </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
    const menu = document.querySelector('.menu');
    

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

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

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

Teste dein Wissen

Abschnitt betitelt „Teste dein Wissen“

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

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

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

Checkliste

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“

Client-seitige Skripte in Astro

Wirke mit Community Sponsor