Astro-Kurs 23: JavaScript-Grundlagen

Modul 5 – Webseiten erweitern · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du kannst Variablen, Zahlen, Zeichenketten, Funktionen und Ereignisse unterscheiden. Du verstehst außerdem den Unterschied zwischen JavaScript beim Build (im Astro-Frontmatter) und JavaScript im Browser (im <script>-Tag).

1. JavaScript in Astro

Astro erzeugt zunächst HTML. Für interaktive Aufgaben wie eine Berechnung nach einem Klick kann JavaScript im Browser laufen. Ein einfaches Beispiel wird als neue Datei src/pages/rechner.astro angelegt. Unsere Werkstatt berechnet die Masse eines Stücks PLA-Filament.

2. Vollständiges Beispiel

---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Filamentrechner | Modellbau-Werkstatt">
  <h1>Filamentrechner</h1>
  <label for="laenge">Filamentlänge (Meter)</label>
  <input id="laenge" type="number" min="0" step="0.1" value="10" />
  <button id="berechnen" type="button">Berechnen</button>
  <p id="ergebnis" aria-live="polite"></p>
</Layout>
<script>
  const laenge = document.querySelector<HTMLInputElement>('#laenge');
  const ergebnis = document.querySelector<HTMLParagraphElement>('#ergebnis');
  const knopf = document.querySelector<HTMLButtonElement>('#berechnen');
  function masseInGramm(meter: number): number {
    const durchmesserMm = 1.75;
    const dichteGProCm3 = 1.24; // ungefähr PLA
    const radiusCm = (durchmesserMm / 2) / 10;
    const laengeCm = meter * 100;
    return Math.PI * radiusCm ** 2 * laengeCm * dichteGProCm3;
  }
  knopf?.addEventListener('click', () => {
    const meter = Number(laenge?.value);
    if (!Number.isFinite(meter) || meter <= 0) {
      if (ergebnis) ergebnis.textContent = 'Bitte eine positive Länge eingeben.';
      return;
    }
    if (ergebnis) ergebnis.textContent = `Ungefähr ${masseInGramm(meter).toFixed(1)} g PLA`;
  });
</script>

Astro verarbeitet das TypeScript im <script>-Tag. const legt einen Wert fest, function beschreibt einen wiederverwendbaren Rechenweg, und addEventListener reagiert auf das Anklicken. Die Masse ist eine Näherung: Durchmesser und Dichte schwanken.

3. Ausprobieren

Starte npm run dev, rufe /rechner auf, ändere die Länge und klicke auf Berechnen. Öffne bei Fehlern die Entwicklerwerkzeuge deines Browsers (F12 → Konsole).

Übung

Ändere den Vorgabewert auf 25 Meter. Ergänze in der Ausgabe den Hinweis „PLA, Ø 1,75 mm“.