Skip to content

Commit 23a500f

Browse files
sarah11918sarah11918
authored
Merge branch 'main' into docs/github
2 parents 492f2ae + 233846f commit 23a500f

63 files changed

Lines changed: 3783 additions & 484 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎public/logos/markdoc.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/content/docs/de/guides/client-side-scripts.mdx‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
---
2+
title: Skripte und Ereignisbehandlung
3+
description: >-
4+
Hinzufügen von clientseitiger Interaktivität zu Astro-Komponenten mit nativen Browser
5+
JavaScript-APIs.
6+
i18nReady: true
7+
---
8+
9+
Du kannst deinen Astro-Komponenten Interaktivität hinzufügen, [ohne ein UI-Framework](/de/core-concepts/framework-components/) wie React, Svelte, Vue usw. zu verwenden, indem du standardmäßige HTML-`<script>`-Tags verwendest. So kannst du JavaScript im Browser ausführen lassen und deinen Astro-Komponenten Funktionen hinzufügen.
10+
11+
## Client-seitige Skripte
12+
13+
Skripte können verwendet werden, um Event-Listener hinzuzufügen, Analysedaten zu senden, Animationen abzuspielen und alles andere, was JavaScript im Web ermöglicht.
14+
15+
```astro
16+
// src/components/ConfettiButton.astro
17+
<button data-confetti-button>Zelebrieren!</button>
18+
19+
<script>
20+
// Importiere npm-Module.
21+
import confetti from 'canvas-confetti';
22+
23+
// Finde unser Komponenten-DOM auf der Seite.
24+
const buttons = document.querySelectorAll('[data-confetti-button]');
25+
26+
// Füge Event-Listener hinzu, um Konfetti zu werfen, wenn eine Schaltfläche angeklickt wird.
27+
buttons.forEach((button) => {
28+
button.addEventListener('click', () => confetti());
29+
});
30+
</script>
31+
```
32+
33+
Standardmäßig verarbeitet und bündelt Astro `<script>`-Tags und unterstützt damit den Import von npm-Modulen, das Schreiben von TypeScript und mehr.
34+
35+
## Verwendung von `<script>` in Astro
36+
37+
In `.astro`-Dateien kannst du clientseitiges JavaScript hinzufügen, indem du ein (oder mehrere) `<script>`-Tags hinzufügst.
38+
39+
In diesem Beispiel wird durch das Hinzufügen der Komponente `<Hello />` zu einer Seite eine Nachricht auf der Browserkonsole aufgezeichnet.
40+
41+
```astro title="src/components/Hello.astro"
42+
<h1>Willkommen, Welt!</h1>
43+
44+
<script>
45+
console.log('Willkommen, Browser-Konsole!');
46+
</script>
47+
```
48+
49+
### Script bundling
50+
51+
`<script>`-Tags werden standardmäßig von Astro verarbeitet.
52+
53+
- Alle Importe werden gebündelt, sodass du lokale Dateien oder Node-Module importieren kannst.
54+
- Das verarbeitete Skript wird in den `<head>`-Block deiner Seite mit [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) eingefügt.
55+
- TypeScript wird vollständig unterstützt, einschließlich des Imports von TypeScript-Dateien.
56+
- Wenn deine Komponente mehrmals auf einer Seite verwendet wird, wird das Skript nur einmal eingebunden.
57+
58+
```astro title="src/components/Example.astro"
59+
<script>
60+
// Verarbeitet! Gebündelt! TypeScript-unterstützt!
61+
// Der Import von lokalen Skripten und Node-Modulen funktioniert.
62+
</script>
63+
```
64+
65+
Um die Bündelung des Skripts zu vermeiden, kannst du die Direktive `is:inline` verwenden.
66+
67+
```astro title="src/components/InlineScript.astro" "is:inline"
68+
<script is:inline>
69+
// Wird genau wie geschrieben in das HTML gerendert!
70+
// Lokale Importe werden nicht aufgelöst und funktionieren nicht.
71+
// Wenn es in einer Komponente enthalten ist, wird es jedes Mal wiederholt, wenn die Komponente verwendet wird.
72+
</script>
73+
```
74+
75+
:::note
76+
Das Hinzufügen von `type="module"` oder eines anderen Attributs als `src` zu einem `<script>`-Tag deaktiviert das Standard-Bündelungsverhalten von Astro und behandelt den Tag so, als hätte er eine `is:inline`-Direktive.
77+
:::
78+
79+
📚 Auf unserer Seite [directives reference](/de/reference/directives-reference/#script--style-directives) findest du weitere Informationen über die Direktiven, die für `<script>`-Tags verfügbar sind.
80+
81+
### Skripte laden
82+
83+
Vielleicht möchtest du deine Skripte als separate `.js`/`.ts`-Dateien schreiben oder du musst auf ein externes Skript auf einem anderen Server verweisen. Das kannst du tun, indem du im Attribut `src` eines `<script>`-Tags auf diese Dateien verweist.
84+
85+
#### Lokale Skripte importieren
86+
87+
**Wann sollte man das verwenden:** Wenn dein Skript innerhalb von `src/` liegt.
88+
89+
Astro erstellt und optimiert diese Skripte für dich und fügt sie der Seite hinzu, indem es die [Skriptbündelungsregeln](#script-bundling) befolgt.
90+
91+
```astro title="src/components/LocalScripts.astro"
92+
<!-- relativer Pfad zum Skript unter `src/scripts/local.js` -->
93+
<script src="../scripts/local.js"></script>
94+
95+
<!-- funktioniert auch für lokale TypeScript-Dateien -->
96+
<script src="./script-with-types.ts"></script>
97+
```
98+
99+
#### Externe Skripte laden
100+
101+
**Wann sollte man das verwenden:** Wenn deine JavaScript-Datei in `public/` oder in einem CDN liegt.
102+
103+
Um Skripte außerhalb des Ordners `src/` deines Projekts zu laden, füge die Direktive `is:inline` ein. Dieser Ansatz überspringt die Verarbeitung, Bündelung und Optimierung von JavaScript, die Astro beim Import von Skripten wie oben beschrieben vornimmt.
104+
105+
```astro title="src/components/ExternalScripts.astro" "is:inline"
106+
<!-- absoluter Pfad zu einem Skript unter `public/my-script.js` -->
107+
<script is:inline src="/my-script.js"></script>
108+
109+
<!-- vollständige URL zu einem Skript auf einem anderen Server -->
110+
<script is:inline src="https://my-analytics.com/script.js"></script>
111+
```
112+
113+
## Gemeinsame Skript-Pattern
114+
115+
### `onclick` und andere Ereignisse verarbeiten
116+
117+
Einige UI-Frameworks verwenden eine eigene Syntax für die Ereignisbehandlung wie `onClick={...}` (React/Preact) oder `@click="..."` (Vue). Astro hält sich enger an den HTML-Standard und verwendet keine eigene Syntax für Ereignisse.
118+
119+
Stattdessen kannst du [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) in einem `<script>` Tag verwenden, um Benutzerinteraktionen zu verarbeiten.
120+
121+
```astro title="src/components/AlertButton.astro"
122+
<button class="alert">Klick mich!</button>
123+
124+
<script>
125+
// Finde alle Buttons mit der Klasse `alert` auf der Seite.
126+
const buttons = document.querySelectorAll('button.alert');
127+
128+
// Verarbeite Klicks auf allen Buttons.
129+
buttons.forEach((button) => {
130+
button.addEventListener('click', () => {
131+
alert('Button wurde angeklickt!');
132+
});
133+
});
134+
</script>
135+
```
136+
137+
:::note
138+
Wenn du mehrere `<AlertButton />`-Komponenten auf einer Seite hast, führt Astro das Skript nicht mehrfach aus. Skripte werden gebündelt und nur einmal pro Seite eingebunden. Die Verwendung von `querySelectorAll` stellt sicher, dass dieses Skript den Event-Listener an jede Schaltfläche mit der Klasse `alert` auf der Seite anhängt.
139+
:::
140+
141+
### Webkomponenten mit benutzerdefinierten Elementen
142+
143+
Du kannst deine eigenen HTML-Elemente mit benutzerdefiniertem Verhalten mithilfe des Webkomponenten-Standards erstellen. Wenn du ein [benutzerdefiniertes Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) in einer `.astro`-Komponente definierst, kannst du interaktive Komponenten erstellen, ohne ein UI-Framework zu benötigen.
144+
145+
In diesem Beispiel definieren wir ein neues `<astro-heart>` HTML-Element, das aufzeichnet, wie oft du auf den Herz-Button klickst und das `<span>` mit der Anzahl aktualisiert.
146+
147+
```astro title="src/components/AstroHeart.astro"
148+
<!-- Schließe die Komponentenelemente in unser benutzerdefiniertes Element "astro-heart" ein. -->
149+
<astro-heart>
150+
<button aria-label="Heart">💜</button> × <span>0</span>
151+
</astro-heart>
152+
153+
<script>
154+
// Definiere das Verhalten für unseren neuen Typ von HTML-Element.
155+
class AstroHeart extends HTMLElement {
156+
constructor() {
157+
super();
158+
let count = 0;
159+
160+
const heartButton = this.querySelector('button');
161+
const countSpan = this.querySelector('span');
162+
163+
// Jedes Mal, wenn die Schaltfläche angeklickt wird, aktualisiere die Anzahl.
164+
heartButton.addEventListener('click', () => {
165+
count++;
166+
countSpan.textContent = count;
167+
});
168+
}
169+
}
170+
171+
// Teile dem Browser mit, dass er unsere AstroHeart-Klasse für <astro-heart>-Elemente verwenden soll.
172+
customElements.define('astro-heart', AstroHeart);
173+
</script>
174+
```
175+
176+
Die Verwendung eines benutzerdefinierten Elements hat hier zwei Vorteile:
177+
178+
1. Anstatt die gesamte Seite mit `document.querySelector()` zu durchsuchen, kannst du `this.querySelector()` verwenden, das nur innerhalb der aktuellen benutzerdefinierten Elementinstanz sucht. Das macht es einfacher, jeweils nur mit den Children einer Komponenteninstanz zu arbeiten.
179+
180+
2. Obwohl ein `<script>` nur einmal ausgeführt wird, führt der Browser die Methode `constructor()` unseres benutzerdefinierten Elements jedes Mal aus, wenn er `<astro-heart>` auf der Seite findet. Das bedeutet, dass du gefahrlos Code für jeweils eine Komponente schreiben kannst, auch wenn du diese Komponente mehrmals auf einer Seite verwenden willst.
181+
182+
📚 Mehr über benutzerdefinierte Elemente erfährst du in [web.dev's Reusable Web Components guide](https://web.dev/custom-elements-v1/) und [MDN's introduction to custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
183+
184+
### Übergabe von Frontmatter-Variablen an Skripte
185+
186+
In Astro-Komponenten läuft der Code in [Frontmatter](/de/core-concepts/astro-components/#das-komponentenskript) zwischen den `---`-Zeichen auf dem Server und ist im Browser nicht verfügbar. Um Variablen vom Server an den Client zu senden, brauchen wir eine Möglichkeit, unsere Variablen zu speichern und sie dann zu lesen, wenn JavaScript im Browser läuft.
187+
188+
Eine Möglichkeit, dies zu tun, ist die Verwendung von [`data-*`-Attributen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), um den Wert von Variablen in deiner HTML-Ausgabe zu speichern. Skripte, einschließlich benutzerdefinierter Elemente, können diese Attribute dann mit der Eigenschaft `dataset` eines Elements lesen, sobald dein HTML im Browser geladen ist.
189+
190+
In dieser Beispielkomponente wird eine `message`-Eigenschaft in einem `data-message`-Attribut gespeichert, sodass das benutzerdefinierte Element `this.dataset.message` lesen und den Wert der Eigenschaft im Browser abrufen kann.
191+
192+
```astro title="src/components/AstroGreet.astro" {2} /data-message={.+}/ "this.dataset.message"
193+
---
194+
const { message = 'Willkommen, Welt!' } = Astro.props;
195+
---
196+
197+
<!-- Speichere die Nachrichten-Props als Datenattribut. -->
198+
<astro-greet data-message={message}>
199+
<button>Sag Hallo!</button>
200+
</astro-greet>
201+
202+
<script>
203+
class AstroGreet extends HTMLElement {
204+
constructor() {
205+
super();
206+
207+
// Lies die Nachricht aus dem Datenattribut.
208+
const message = this.dataset.message;
209+
const button = this.querySelector('button');
210+
button.addEventListener('click', () => {
211+
alert(message);
212+
});
213+
}
214+
}
215+
216+
customElements.define('astro-greet', AstroGreet);
217+
</script>
218+
```
219+
220+
Jetzt können wir unsere Komponente mehrmals verwenden und werden jedes Mal mit einer anderen Nachricht begrüßt.
221+
222+
```astro title="src/pages/example.astro"
223+
---
224+
import AstroGreet from '../components/AstroGreet.astro';
225+
---
226+
227+
<!-- Verwende die Standardnachricht: "Willkommen, Welt!" -->
228+
<AstroGreet />
229+
230+
<!-- Verwende benutzerdefinierte Nachrichten, die als Props übergeben werden. -->
231+
<AstroGreet message="Schöner Tag, um Bauteile zu bauen!" />
232+
<AstroGreet message="Schön, dass du es geschafft hast! 👋" />
233+
```
234+
235+
:::tip[Wusstest du schon?]
236+
Genau das macht Astro hinter den Kulissen, wenn du Props an eine Komponente übergibst, die mit einem UI-Framework wie React geschrieben wurde! Für Komponenten mit einer `client:*`-Direktive erstellt Astro ein benutzerdefiniertes `<astro-island>`-Element mit einem `props`-Attribut, das deine serverseitigen Props in der HTML-Ausgabe speichert.
237+
:::

0 commit comments

Comments
 (0)