info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-09-25 05:51:44 +02:00
Code Issues Projects Releases Wiki Activity

🌐 Update translations via Co-op Translator

Browse Source
This commit is contained in:
leestott
2025-08-24 13:57:14 +00:00
committed by GitHub
parent c5cbfd388d
commit 9823536d1d
522 changed files with 52041 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md Normal file
View File

@@ -0,0 +1,215 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
"translation_date": "2025-08-24T12:58:43+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "de"
}
-->
# Einführung in Programmiersprachen und Werkzeuge des Handwerks
Diese Lektion behandelt die Grundlagen von Programmiersprachen. Die hier behandelten Themen gelten für die meisten modernen Programmiersprachen. Im Abschnitt "Werkzeuge des Handwerks" lernst du nützliche Software kennen, die dir als Entwickler:in hilft.
![Intro Programmierung](../../../../sketchnotes/webdev101-programming.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## Einführung
In dieser Lektion behandeln wir:
- Was ist Programmieren?
- Arten von Programmiersprachen
- Grundelemente eines Programms
- Nützliche Software und Werkzeuge für professionelle Entwickler:innen
> Du kannst diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) absolvieren!
## Was ist Programmieren?
Programmieren (auch bekannt als Codieren) ist der Prozess, Anweisungen für ein Gerät wie einen Computer oder ein mobiles Gerät zu schreiben. Wir schreiben diese Anweisungen mit einer Programmiersprache, die dann vom Gerät interpretiert wird. Diese Anweisungen können verschiedene Namen haben, aber *Programm*, *Computerprogramm*, *Anwendung (App)* und *ausführbare Datei* sind einige gängige Bezeichnungen.
Ein *Programm* kann alles sein, was mit Code geschrieben wurde; Websites, Spiele und Handy-Apps sind Programme. Auch wenn es möglich ist, ein Programm ohne Code zu erstellen, wird die zugrunde liegende Logik vom Gerät interpretiert, und diese Logik wurde höchstwahrscheinlich mit Code geschrieben. Ein Programm, das *läuft* oder *ausgeführt* wird, führt Anweisungen aus. Das Gerät, mit dem du diese Lektion liest, führt ein Programm aus, um sie auf deinem Bildschirm anzuzeigen.
✅ Recherchiere ein wenig: Wer gilt als der/die erste Computerprogrammierer:in der Welt?
## Programmiersprachen
Programmiersprachen ermöglichen es Entwickler:innen, Anweisungen für ein Gerät zu schreiben. Geräte können nur Binärcode (1en und 0en) verstehen, und für *die meisten* Entwickler:innen ist das keine sehr effiziente Art der Kommunikation. Programmiersprachen sind das Mittel zur Kommunikation zwischen Menschen und Computern.
Programmiersprachen gibt es in verschiedenen Formaten und sie können unterschiedlichen Zwecken dienen. Zum Beispiel wird JavaScript hauptsächlich für Webanwendungen verwendet, während Bash hauptsächlich für Betriebssysteme genutzt wird.
*Low-Level-Sprachen* erfordern in der Regel weniger Schritte als *High-Level-Sprachen*, damit ein Gerät Anweisungen interpretieren kann. Was High-Level-Sprachen jedoch beliebt macht, ist ihre Lesbarkeit und Unterstützung. JavaScript gilt als High-Level-Sprache.
Der folgende Code zeigt den Unterschied zwischen einer High-Level-Sprache wie JavaScript und einer Low-Level-Sprache wie ARM-Assemblercode.
```javascript
let number = 10
let n1 = 0, n2 = 1, nextTerm;
for (let i = 1; i <= number; i++) {
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
```
```c
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
```
Glaub es oder nicht, *sie tun beide dasselbe*: Sie geben eine Fibonacci-Sequenz bis 10 aus.
✅ Eine Fibonacci-Sequenz wird [definiert](https://en.wikipedia.org/wiki/Fibonacci_number) als eine Reihe von Zahlen, bei der jede Zahl die Summe der beiden vorhergehenden ist, beginnend mit 0 und 1. Die ersten 10 Zahlen der Fibonacci-Sequenz sind 0, 1, 1, 2, 3, 5, 8, 13, 21 und 34.
## Elemente eines Programms
Eine einzelne Anweisung in einem Programm wird als *Statement* bezeichnet und hat normalerweise ein Zeichen oder einen Zeilenabstand, der markiert, wo die Anweisung endet oder *terminiert*. Wie ein Programm terminiert, variiert je nach Sprache.
Anweisungen in einem Programm können von Daten abhängen, die von einem Benutzer oder einer anderen Quelle bereitgestellt werden, um Anweisungen auszuführen. Daten können beeinflussen, wie sich ein Programm verhält, daher bieten Programmiersprachen eine Möglichkeit, Daten vorübergehend zu speichern, damit sie später verwendet werden können. Diese werden als *Variablen* bezeichnet. Variablen sind Anweisungen, die ein Gerät anweisen, Daten im Speicher zu speichern. Variablen in Programmen ähneln Variablen in der Algebra, da sie einen eindeutigen Namen haben und sich ihr Wert im Laufe der Zeit ändern kann.
Es besteht die Möglichkeit, dass einige Anweisungen von einem Gerät nicht ausgeführt werden. Dies geschieht in der Regel absichtlich, wenn es vom Entwickler so geschrieben wurde, oder versehentlich, wenn ein unerwarteter Fehler auftritt. Diese Art der Kontrolle über eine Anwendung macht sie robuster und wartbarer. Typischerweise treten diese Kontrolländerungen auf, wenn bestimmte Bedingungen erfüllt sind. Eine gängige Anweisung in modernen Programmiersprachen, um zu steuern, wie ein Programm ausgeführt wird, ist die `if..else`-Anweisung.
✅ Du wirst mehr über diese Art von Anweisungen in späteren Lektionen lernen.
## Werkzeuge des Handwerks
[![Werkzeuge des Handwerks](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Werkzeuge des Handwerks")
> 🎥 Klicke auf das Bild oben, um ein Video über Werkzeuge anzusehen
In diesem Abschnitt lernst du einige Software kennen, die du als nützlich empfinden könntest, wenn du deine Reise als professionelle:r Entwickler:in beginnst.
Eine **Entwicklungsumgebung** ist eine einzigartige Sammlung von Werkzeugen und Funktionen, die ein:e Entwickler:in häufig beim Schreiben von Software verwendet. Einige dieser Werkzeuge wurden speziell auf die Bedürfnisse eines:einer Entwickler:in zugeschnitten und können sich im Laufe der Zeit ändern, wenn sich die Prioritäten in der Arbeit, bei persönlichen Projekten oder bei der Verwendung einer anderen Programmiersprache ändern. Entwicklungsumgebungen sind so einzigartig wie die Entwickler:innen, die sie nutzen.
### Editoren
Eines der wichtigsten Werkzeuge für die Softwareentwicklung ist der Editor. Editoren sind der Ort, an dem du deinen Code schreibst und manchmal auch ausführst.
Entwickler:innen verlassen sich aus mehreren Gründen auf Editoren:
- *Debugging* hilft, Fehler und Probleme aufzudecken, indem der Code Zeile für Zeile durchgegangen wird. Einige Editoren verfügen über Debugging-Funktionen, die für bestimmte Programmiersprachen angepasst und hinzugefügt werden können.
- *Syntaxhervorhebung* fügt Farben und Textformatierungen zum Code hinzu, was ihn leichter lesbar macht. Die meisten Editoren erlauben eine angepasste Syntaxhervorhebung.
- *Erweiterungen und Integrationen* sind spezialisierte Werkzeuge für Entwickler:innen, die von anderen Entwickler:innen erstellt wurden. Diese Werkzeuge sind nicht im Basis-Editor enthalten. Zum Beispiel dokumentieren viele Entwickler:innen ihren Code, um zu erklären, wie er funktioniert. Sie könnten eine Rechtschreibprüfungserweiterung installieren, um Tippfehler in der Dokumentation zu finden. Die meisten Erweiterungen sind für die Verwendung in einem bestimmten Editor gedacht, und die meisten Editoren bieten eine Möglichkeit, nach verfügbaren Erweiterungen zu suchen.
- *Anpassung* ermöglicht es Entwickler:innen, eine einzigartige Entwicklungsumgebung zu schaffen, die ihren Bedürfnissen entspricht. Die meisten Editoren sind extrem anpassbar und erlauben es Entwickler:innen, eigene Erweiterungen zu erstellen.
#### Beliebte Editoren und Webentwicklungs-Erweiterungen
- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Atom](https://atom.io/)
- [spell-check](https://atom.io/packages/spell-check)
- [teletype](https://atom.io/packages/teletype)
- [atom-beautify](https://atom.io/packages/atom-beautify)
- [Sublimetext](https://www.sublimetext.com/)
- [emmet](https://emmet.io/)
- [SublimeLinter](http://www.sublimelinter.com/en/stable/)
### Browser
Ein weiteres wichtiges Werkzeug ist der Browser. Webentwickler:innen verlassen sich auf den Browser, um zu sehen, wie ihr Code im Web ausgeführt wird. Er wird auch verwendet, um die visuellen Elemente einer Webseite anzuzeigen, die im Editor geschrieben wurden, wie HTML.
Viele Browser verfügen über *Entwicklerwerkzeuge* (DevTools), die eine Reihe hilfreicher Funktionen und Informationen enthalten, um Entwickler:innen dabei zu helfen, wichtige Informationen über ihre Anwendung zu sammeln und zu erfassen. Zum Beispiel: Wenn eine Webseite Fehler hat, ist es manchmal hilfreich zu wissen, wann sie aufgetreten sind. DevTools in einem Browser können so konfiguriert werden, dass diese Informationen erfasst werden.
#### Beliebte Browser und DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools)
### Kommandozeilenwerkzeuge
Einige Entwickler:innen bevorzugen eine weniger grafische Ansicht für ihre täglichen Aufgaben und verlassen sich auf die Kommandozeile, um dies zu erreichen. Das Schreiben von Code erfordert eine erhebliche Menge an Tippen, und einige Entwickler:innen bevorzugen es, ihren Arbeitsfluss auf der Tastatur nicht zu unterbrechen. Sie verwenden Tastenkombinationen, um zwischen Desktop-Fenstern zu wechseln, an verschiedenen Dateien zu arbeiten und Werkzeuge zu nutzen. Die meisten Aufgaben können mit einer Maus erledigt werden, aber ein Vorteil der Kommandozeile ist, dass vieles mit Kommandozeilenwerkzeugen erledigt werden kann, ohne zwischen Maus und Tastatur wechseln zu müssen. Ein weiterer Vorteil der Kommandozeile ist, dass sie konfigurierbar ist und du eine benutzerdefinierte Konfiguration speichern, später ändern und auf andere Entwicklungsmaschinen importieren kannst. Da Entwicklungsumgebungen so einzigartig für jede:n Entwickler:in sind, vermeiden einige die Kommandozeile, andere verlassen sich vollständig darauf, und wieder andere bevorzugen eine Mischung aus beidem.
### Beliebte Kommandozeilenoptionen
Die Optionen für die Kommandozeile unterscheiden sich je nach Betriebssystem.
*💻 = ist standardmäßig auf dem Betriebssystem vorinstalliert.*
#### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (auch bekannt als CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
- [mintty](https://mintty.github.io/)
#### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
#### Beliebte Kommandozeilenwerkzeuge
- [Git](https://git-scm.com/) (💻 auf den meisten Betriebssystemen)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
### Dokumentation
Wenn ein:e Entwickler:in etwas Neues lernen möchte, wird er:sie sich höchstwahrscheinlich an die Dokumentation wenden, um zu erfahren, wie man es benutzt. Entwickler:innen verlassen sich oft auf Dokumentationen, um sich darüber zu informieren, wie Werkzeuge und Sprachen richtig verwendet werden, und um ein tieferes Verständnis dafür zu erlangen, wie sie funktionieren.
#### Beliebte Dokumentationen zur Webentwicklung
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), von Mozilla, den Herausgebern des [Firefox](https://www.mozilla.org/firefox/)-Browsers
- [Frontend Masters](https://frontendmasters.com/learn/)
- [Web.dev](https://web.dev), von Google, den Herausgebern von [Chrome](https://www.google.com/chrome/)
- [Microsofts eigene Entwicklerdokumentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), für [Microsoft Edge](https://www.microsoft.com/edge)
- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
✅ Recherchiere: Jetzt, da du die Grundlagen der Umgebung eines Webentwicklers kennst, vergleiche sie mit der Umgebung eines Webdesigners.
---
## 🚀 Herausforderung
Vergleiche einige Programmiersprachen. Was sind einige der einzigartigen Merkmale von JavaScript im Vergleich zu Java? Wie sieht es mit COBOL im Vergleich zu Go aus?
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
## Wiederholung & Selbststudium
Lerne ein wenig über die verschiedenen Programmiersprachen, die einem Programmierer zur Verfügung stehen. Versuche, eine Zeile in einer Sprache zu schreiben, und schreibe sie dann in zwei anderen Sprachen um. Was hast du dabei gelernt?
## Aufgabe
[Die Dokumentation lesen](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
"translation_date": "2025-08-24T13:01:28+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
"language_code": "de"
}
-->
# Lesen der Dokumentation
## Anweisungen
Es gibt viele Werkzeuge, die ein Webentwickler benötigen könnte, die in der [MDN-Dokumentation für clientseitige Tools](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) aufgeführt sind. Wähle 3 Werkzeuge aus, die im Unterricht nicht behandelt wurden, erkläre, warum ein Webentwickler sie verwenden würde, und suche ein Werkzeug, das in diese Kategorie fällt, und teile dessen Dokumentation. Verwende nicht dasselbe Werkzeugbeispiel aus den MDN-Dokumenten.
## Bewertungskriterien
Vorbildlich | Angemessen | Verbesserungswürdig
--- | --- | -- |
| Erklärt, warum ein Webentwickler das Werkzeug verwenden würde | Erklärt, wie, aber nicht warum ein Entwickler das Werkzeug verwenden würde | Hat nicht erwähnt, wie oder warum ein Entwickler das Werkzeug verwenden würde |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

337
translations/de/1-getting-started-lessons/2-github-basics/README.md Normal file
View File

@@ -0,0 +1,337 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
"translation_date": "2025-08-24T12:48:32+00:00",
"source_file": "1-getting-started-lessons/2-github-basics/README.md",
"language_code": "de"
}
-->
# Einführung in GitHub
Diese Lektion behandelt die Grundlagen von GitHub, einer Plattform zum Hosten und Verwalten von Änderungen an deinem Code.
![Einführung in GitHub](../../../../sketchnotes/webdev101-github.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
## Einführung
In dieser Lektion behandeln wir:
- das Nachverfolgen der Arbeit, die du auf deinem Rechner erledigst
- das Arbeiten an Projekten mit anderen
- wie man zu Open-Source-Software beiträgt
### Voraussetzungen
Bevor du beginnst, überprüfe, ob Git installiert ist. Gib im Terminal ein:
`git --version`
Falls Git nicht installiert ist, [lade Git herunter](https://git-scm.com/downloads). Richte anschließend dein lokales Git-Profil im Terminal ein:
* `git config --global user.name "dein-name"`
* `git config --global user.email "deine-email"`
Um zu überprüfen, ob Git bereits konfiguriert ist, kannst du eingeben:
`git config --list`
Du benötigst außerdem ein GitHub-Konto, einen Code-Editor (wie Visual Studio Code) und musst dein Terminal (oder die Eingabeaufforderung) öffnen.
Gehe zu [github.com](https://github.com/) und erstelle ein Konto, falls du noch keines hast, oder melde dich an und vervollständige dein Profil.
✅ GitHub ist nicht das einzige Code-Repository der Welt; es gibt auch andere, aber GitHub ist das bekannteste.
### Vorbereitung
Du benötigst sowohl einen Ordner mit einem Code-Projekt auf deinem lokalen Rechner (Laptop oder PC) als auch ein öffentliches Repository auf GitHub, das als Beispiel dafür dient, wie man zu den Projekten anderer beiträgt.
---
## Code-Verwaltung
Angenommen, du hast lokal einen Ordner mit einem Code-Projekt und möchtest deinen Fortschritt mit Git, dem Versionskontrollsystem, nachverfolgen. Manche Leute vergleichen die Nutzung von Git mit dem Schreiben eines Liebesbriefs an dein zukünftiges Ich. Wenn du deine Commit-Nachrichten Tage, Wochen oder Monate später liest, kannst du dich daran erinnern, warum du eine Entscheidung getroffen hast, oder eine Änderung "rückgängig machen" – vorausgesetzt, du schreibst gute "Commit-Nachrichten".
### Aufgabe: Ein Repository erstellen und Code committen
> Schau dir das Video an
>
> [![Git- und GitHub-Grundlagen-Video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
1. **Repository auf GitHub erstellen**. Auf GitHub.com findest du im Reiter "Repositories" oder in der Navigationsleiste oben rechts den Button **new repo**.
1. Gib deinem Repository (Ordner) einen Namen.
1. Wähle **create repository**.
1. **Zu deinem Arbeitsordner navigieren**. Wechsle im Terminal zu dem Ordner (auch Verzeichnis genannt), den du nachverfolgen möchtest. Gib ein:
```bash
cd [name of your folder]
```
1. **Ein Git-Repository initialisieren**. Gib in deinem Projekt ein:
```bash
git init
```
1. **Status überprüfen**. Um den Status deines Repositories zu überprüfen, gib ein:
```bash
git status
```
Die Ausgabe könnte etwa so aussehen:
```output
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: file.txt
modified: file2.txt
```
Normalerweise zeigt dir der Befehl `git status` Dinge wie Dateien, die bereit sind, im Repository _gespeichert_ zu werden, oder Änderungen, die du möglicherweise beibehalten möchtest.
1. **Alle Dateien zum Nachverfolgen hinzufügen**
Dies wird auch als Staging von Dateien oder Hinzufügen von Dateien zum Staging-Bereich bezeichnet.
```bash
git add .
```
Das Argument `git add` plus `.` bedeutet, dass alle deine Dateien und Änderungen nachverfolgt werden.
1. **Ausgewählte Dateien zum Nachverfolgen hinzufügen**
```bash
git add [file or folder name]
```
Dies hilft uns, nur ausgewählte Dateien zum Staging-Bereich hinzuzufügen, wenn wir nicht alle Dateien auf einmal committen möchten.
1. **Alle Dateien aus dem Staging-Bereich entfernen**
```bash
git reset
```
Dieser Befehl hilft uns, alle Dateien auf einmal aus dem Staging-Bereich zu entfernen.
1. **Eine bestimmte Datei aus dem Staging-Bereich entfernen**
```bash
git reset [file or folder name]
```
Dieser Befehl hilft uns, nur eine bestimmte Datei aus dem Staging-Bereich zu entfernen, die wir nicht in den nächsten Commit aufnehmen möchten.
1. **Deine Arbeit speichern**. An diesem Punkt hast du die Dateien in einen sogenannten _Staging-Bereich_ hinzugefügt. Ein Ort, an dem Git deine Dateien nachverfolgt. Um die Änderung dauerhaft zu machen, musst du die Dateien _committen_. Dazu erstellst du einen _Commit_ mit dem Befehl `git commit`. Ein _Commit_ stellt einen Speicherpunkt in der Historie deines Repositories dar. Gib Folgendes ein, um einen _Commit_ zu erstellen:
```bash
git commit -m "first commit"
```
Dies commitet alle deine Dateien und fügt die Nachricht "first commit" hinzu. Für zukünftige Commit-Nachrichten solltest du eine detailliertere Beschreibung verwenden, um zu vermitteln, welche Art von Änderung du vorgenommen hast.
1. **Dein lokales Git-Repository mit GitHub verbinden**. Ein Git-Repository ist auf deinem Rechner nützlich, aber irgendwann möchtest du ein Backup deiner Dateien an einem anderen Ort haben und auch andere Leute einladen, mit dir an deinem Repository zu arbeiten. Ein großartiger Ort dafür ist GitHub. Wir haben bereits ein Repository auf GitHub erstellt, daher müssen wir nur noch unser lokales Git-Repository mit GitHub verbinden. Der Befehl `git remote add` erledigt genau das. Gib den folgenden Befehl ein:
> Hinweis: Bevor du den Befehl eingibst, gehe zu deiner GitHub-Repository-Seite, um die Repository-URL zu finden. Du wirst sie im folgenden Befehl verwenden. Ersetze ```https://github.com/username/repository_name.git``` durch deine GitHub-URL.
```bash
git remote add origin https://github.com/username/repository_name.git
```
Dies erstellt eine _Remote-Verbindung_, die "origin" genannt wird und auf das GitHub-Repository zeigt, das du zuvor erstellt hast.
1. **Lokale Dateien zu GitHub senden**. Bisher hast du eine _Verbindung_ zwischen dem lokalen Repository und dem GitHub-Repository erstellt. Lass uns diese Dateien mit dem folgenden Befehl `git push` zu GitHub senden:
> Hinweis: Dein Branch-Name könnte standardmäßig anders sein als ```main```.
```bash
git push -u origin main
```
Dies sendet deine Commits in deinem "main"-Branch zu GitHub.
2. **Weitere Änderungen hinzufügen**. Wenn du weiterhin Änderungen vornehmen und sie zu GitHub pushen möchtest, musst du nur die folgenden drei Befehle verwenden:
```bash
git add .
git commit -m "type your commit message here"
git push
```
> Tipp: Du möchtest vielleicht auch eine `.gitignore`-Datei verwenden, um zu verhindern, dass Dateien, die du nicht nachverfolgen möchtest, auf GitHub erscheinen – wie z. B. eine Notizdatei, die du im selben Ordner speicherst, die aber nichts in einem öffentlichen Repository zu suchen hat. Vorlagen für `.gitignore`-Dateien findest du unter [.gitignore templates](https://github.com/github/gitignore).
#### Commit-Nachrichten
Eine großartige Git-Commit-Betreffzeile vervollständigt den folgenden Satz:
Wenn angewendet, wird dieser Commit <deine Betreffzeile hier>.
Für den Betreff verwende die Befehlsform im Präsens: "ändern" statt "geändert" oder "ändert".
Wie im Betreff solltest du auch im optionalen Textkörper die Befehlsform im Präsens verwenden. Der Textkörper sollte die Motivation für die Änderung enthalten und diese mit dem vorherigen Verhalten kontrastieren. Du erklärst das `Warum`, nicht das `Wie`.
✅ Nimm dir ein paar Minuten Zeit, um auf GitHub zu stöbern. Kannst du eine wirklich großartige Commit-Nachricht finden? Kannst du eine sehr minimale finden? Welche Informationen denkst du, sind am wichtigsten und nützlichsten, um sie in einer Commit-Nachricht zu vermitteln?
### Aufgabe: Zusammenarbeit
Der Hauptgrund, Dinge auf GitHub zu stellen, ist die Möglichkeit, mit anderen Entwicklern zusammenzuarbeiten.
## Zusammenarbeit an Projekten mit anderen
> Schau dir das Video an
>
> [![Git- und GitHub-Grundlagen-Video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
Navigiere in deinem Repository zu `Insights > Community`, um zu sehen, wie dein Projekt im Vergleich zu den empfohlenen Community-Standards abschneidet.
Hier sind einige Dinge, die dein GitHub-Repository verbessern können:
- **Beschreibung**. Hast du eine Beschreibung für dein Projekt hinzugefügt?
- **README**. Hast du ein README hinzugefügt? GitHub bietet Anleitungen zum Schreiben eines [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
- **Beitragsrichtlinien**. Hat dein Projekt [Beitragsrichtlinien](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
- **Verhaltenskodex**. Einen [Verhaltenskodex](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
- **Lizenz**. Vielleicht am wichtigsten: eine [Lizenz](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
All diese Ressourcen helfen dabei, neue Teammitglieder einzuarbeiten. Und genau das sind in der Regel die Dinge, die neue Mitwirkende sich ansehen, bevor sie überhaupt deinen Code betrachten, um herauszufinden, ob dein Projekt der richtige Ort für sie ist, um ihre Zeit zu investieren.
✅ README-Dateien werden oft von beschäftigten Maintainer:innen vernachlässigt, obwohl sie Zeit in Anspruch nehmen, um sie vorzubereiten. Kannst du ein Beispiel für ein besonders aussagekräftiges README finden? Hinweis: Es gibt einige [Tools, um gute READMEs zu erstellen](https://www.makeareadme.com/), die du ausprobieren könntest.
### Aufgabe: Code zusammenführen
Beitragsdokumente helfen Menschen, zum Projekt beizutragen. Sie erklären, welche Arten von Beiträgen du suchst und wie der Prozess funktioniert. Mitwirkende müssen eine Reihe von Schritten durchlaufen, um zu deinem Repository auf GitHub beitragen zu können:
1. **Dein Repository forken**. Du wirst wahrscheinlich möchten, dass Leute dein Projekt _forken_. Forken bedeutet, eine Kopie deines Repositories in ihrem GitHub-Profil zu erstellen.
1. **Klonen**. Von dort aus klonen sie das Projekt auf ihren lokalen Rechner.
1. **Einen Branch erstellen**. Du wirst sie bitten, einen _Branch_ für ihre Arbeit zu erstellen.
1. **Änderungen auf einen Bereich konzentrieren**. Bitte Mitwirkende, ihre Beiträge auf eine Sache gleichzeitig zu konzentrieren – so ist die Wahrscheinlichkeit höher, dass du ihre Arbeit _zusammenführen_ kannst. Stell dir vor, sie schreiben einen Bugfix, fügen ein neues Feature hinzu und aktualisieren mehrere Tests – was, wenn du nur 2 von 3 oder 1 von 3 Änderungen implementieren möchtest oder kannst?
✅ Stell dir eine Situation vor, in der Branches besonders wichtig sind, um guten Code zu schreiben und zu veröffentlichen. Welche Anwendungsfälle fallen dir ein?
> Hinweis: Sei die Veränderung, die du in der Welt sehen möchtest, und erstelle auch für deine eigene Arbeit Branches. Alle Commits, die du machst, werden auf dem Branch gemacht, auf dem du dich gerade "befindest". Verwende `git status`, um zu sehen, auf welchem Branch du dich befindest.
Lass uns einen Workflow für Mitwirkende durchgehen. Angenommen, der Mitwirkende hat das Repository bereits _geforkt_ und _geklont_, sodass er ein Git-Repository hat, das auf seinem lokalen Rechner bereit ist:
1. **Einen Branch erstellen**. Verwende den Befehl `git branch`, um einen Branch zu erstellen, der die Änderungen enthält, die sie beitragen möchten:
```bash
git branch [branch-name]
```
1. **Zum Arbeits-Branch wechseln**. Wechsle zum angegebenen Branch und aktualisiere das Arbeitsverzeichnis mit `git switch`:
```bash
git switch [branch-name]
```
1. **Arbeiten durchführen**. An diesem Punkt möchtest du deine Änderungen hinzufügen. Vergiss nicht, Git darüber zu informieren, mit den folgenden Befehlen:
```bash
git add .
git commit -m "my changes"
```
Stelle sicher, dass du deinem Commit einen guten Namen gibst – für dich selbst und für den Maintainer des Repositories, dem du hilfst.
1. **Deine Arbeit mit dem `main`-Branch kombinieren**. Irgendwann bist du mit deiner Arbeit fertig und möchtest sie mit der des `main`-Branches kombinieren. Der `main`-Branch könnte sich inzwischen geändert haben, also stelle sicher, dass du ihn zuerst mit den neuesten Änderungen aktualisierst, indem du die folgenden Befehle ausführst:
```bash
git switch main
git pull
```
An diesem Punkt möchtest du sicherstellen, dass alle _Konflikte_, Situationen, in denen Git die Änderungen nicht einfach _kombinieren_ kann, in deinem Arbeits-Branch auftreten. Führe daher die folgenden Befehle aus:
```bash
git switch [branch_name]
git merge main
```
Dies bringt alle Änderungen von `main` in deinen Branch, und hoffentlich kannst du einfach weitermachen. Falls nicht, zeigt dir VS Code, wo Git _verwirrt_ ist, und du änderst die betroffenen Dateien, um anzugeben, welcher Inhalt am genauesten ist.
1. **Deine Arbeit zu GitHub senden**. Deine Arbeit zu GitHub zu senden bedeutet zwei Dinge: Deinen Branch in dein Repository pushen und dann einen PR (Pull Request) öffnen.
```bash
git push --set-upstream origin [branch-name]
```
Der obige Befehl erstellt den Branch in deinem geforkten Repository.
1. **Einen PR öffnen**. Als Nächstes möchtest du einen PR öffnen. Das machst du, indem du zu deinem geforkten Repository auf GitHub navigierst. Du wirst auf GitHub eine Anzeige sehen, die fragt, ob du einen neuen PR erstellen möchtest. Klicke darauf, und du wirst zu einer Oberfläche weitergeleitet, in der du den Commit-Nachrichtentitel ändern und eine passendere Beschreibung hinzufügen kannst. Jetzt sieht der Maintainer des Repositories, das du geforkt hast, diesen PR, und _Daumen drücken_, sie werden ihn schätzen und _zusammenführen_. Du bist jetzt ein Mitwirkender, yay :)
1. **Aufräumen**. Es gilt als gute Praxis, nach einem erfolgreich zusammengeführten PR aufzuräumen. Du möchtest sowohl deinen lokalen Branch als auch den Branch, den du zu GitHub gepusht hast, bereinigen. Lösche ihn zuerst lokal mit dem folgenden Befehl:
```bash
git branch -d [branch-name]
```
Stellen Sie sicher, dass Sie als Nächstes zur GitHub-Seite des geforkten Repos gehen und den Remote-Branch entfernen, den Sie gerade dorthin gepusht haben.
`Pull request` scheint ein seltsamer Begriff zu sein, da Sie eigentlich Ihre Änderungen in das Projekt pushen möchten. Aber der Maintainer (Projektbesitzer) oder das Kernteam muss Ihre Änderungen prüfen, bevor sie mit dem "main"-Branch des Projekts zusammengeführt werden. Sie bitten also im Grunde um eine Entscheidungsfindung des Maintainers.
Ein Pull Request ist der Ort, an dem die Unterschiede, die auf einem Branch eingeführt wurden, verglichen und diskutiert werden können – mit Reviews, Kommentaren, integrierten Tests und mehr. Ein guter Pull Request folgt in etwa denselben Regeln wie eine Commit-Nachricht. Sie können einen Verweis auf ein Issue im Issue-Tracker hinzufügen, wenn Ihre Arbeit beispielsweise ein Problem löst. Dies geschieht mit einem `#`, gefolgt von der Nummer des Issues. Zum Beispiel `#97`.
🤞Daumen drücken, dass alle Prüfungen bestanden werden und die Projektverantwortlichen Ihre Änderungen in das Projekt übernehmen🤞
Aktualisieren Sie Ihren aktuellen lokalen Arbeits-Branch mit allen neuen Commits vom entsprechenden Remote-Branch auf GitHub:
`git pull`
## Wie man zu Open Source beiträgt
Zuerst suchen wir ein Repository (oder **Repo**) auf GitHub, das Sie interessiert und zu dem Sie eine Änderung beitragen möchten. Sie sollten dessen Inhalte auf Ihren Rechner kopieren.
✅ Eine gute Möglichkeit, 'anfängerfreundliche' Repos zu finden, ist die [Suche nach dem Tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Ein Repo lokal kopieren](../../../../1-getting-started-lessons/2-github-basics/images/clone_repo.png)
Es gibt mehrere Möglichkeiten, Code zu kopieren. Eine Möglichkeit ist, die Inhalte des Repositories zu "klonen", entweder über HTTPS, SSH oder die GitHub CLI (Command Line Interface).
Öffnen Sie Ihr Terminal und klonen Sie das Repository wie folgt:
`git clone https://github.com/ProjectURL`
Um am Projekt zu arbeiten, wechseln Sie in den richtigen Ordner:
`cd ProjectURL`
Sie können das gesamte Projekt auch mit [Codespaces](https://github.com/features/codespaces), dem eingebetteten Code-Editor / Cloud-Entwicklungsumgebung von GitHub, oder [GitHub Desktop](https://desktop.github.com/) öffnen.
Alternativ können Sie den Code in einem gezippten Ordner herunterladen.
### Ein paar weitere interessante Dinge über GitHub
Sie können jedes öffentliche Repository auf GitHub mit einem Stern markieren, beobachten oder "forken". Ihre mit einem Stern markierten Repositories finden Sie im Dropdown-Menü oben rechts. Es ist wie ein Lesezeichen, aber für Code.
Projekte haben einen Issue-Tracker, meistens auf GitHub im Tab "Issues", es sei denn, es wird anders angegeben. Dort diskutieren Menschen über Probleme, die mit dem Projekt zusammenhängen. Im Tab "Pull Requests" werden Änderungen, die in Bearbeitung sind, diskutiert und überprüft.
Projekte können auch Diskussionen in Foren, Mailinglisten oder Chat-Kanälen wie Slack, Discord oder IRC haben.
✅ Schauen Sie sich Ihr neues GitHub-Repo an und probieren Sie ein paar Dinge aus, wie das Bearbeiten von Einstellungen, das Hinzufügen von Informationen zu Ihrem Repo und das Erstellen eines Projekts (wie ein Kanban-Board). Es gibt viel zu entdecken!
---
## 🚀 Herausforderung
Arbeiten Sie mit einem Freund zusammen an den Codes des jeweils anderen. Erstellen Sie gemeinsam ein Projekt, forken Sie Code, erstellen Sie Branches und führen Sie Änderungen zusammen.
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
## Überprüfung & Selbststudium
Lesen Sie mehr über [Beiträge zu Open Source Software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
[Git-Spickzettel](https://training.github.com/downloads/github-git-cheat-sheet/).
Üben, üben, üben. GitHub bietet großartige Lernpfade über [skills.github.com](https://skills.github.com):
- [Erste Woche auf GitHub](https://skills.github.com/#first-week-on-github)
Dort finden Sie auch fortgeschrittene Kurse.
## Aufgabe
Absolvieren Sie [den Kurs "Erste Woche auf GitHub"](https://skills.github.com/#first-week-on-github).
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

241
translations/de/1-getting-started-lessons/3-accessibility/README.md Normal file
View File

@@ -0,0 +1,241 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e4cd5b1faed4adab5acf720f82798003",
"translation_date": "2025-08-24T12:53:27+00:00",
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
"language_code": "de"
}
-->
# Erstellen barrierefreier Webseiten
![Alles über Barrierefreiheit](../../../../sketchnotes/webdev101-a11y.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
> Die Stärke des Webs liegt in seiner Universalität. Der Zugang für alle, unabhängig von Behinderung, ist ein wesentlicher Aspekt.
>
> \- Sir Timothy Berners-Lee, W3C-Direktor und Erfinder des World Wide Web
Dieses Zitat unterstreicht perfekt die Bedeutung der Erstellung barrierefreier Websites. Eine Anwendung, die nicht von allen genutzt werden kann, ist per Definition ausschließend. Als Webentwickler sollten wir Barrierefreiheit immer im Blick haben. Wenn Sie diesen Fokus von Anfang an haben, sind Sie auf dem besten Weg, sicherzustellen, dass jeder Zugang zu den von Ihnen erstellten Seiten hat. In dieser Lektion lernen Sie die Werkzeuge kennen, die Ihnen helfen, sicherzustellen, dass Ihre Webinhalte barrierefrei sind, und wie Sie mit Barrierefreiheit im Hinterkopf entwickeln können.
> Sie können diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) absolvieren!
## Zu verwendende Werkzeuge
### Screenreader
Eines der bekanntesten Barrierefreiheitswerkzeuge sind Screenreader.
[Screenreader](https://en.wikipedia.org/wiki/Screen_reader) sind häufig genutzte Clients für Menschen mit Sehbehinderungen. Während wir Zeit darauf verwenden, sicherzustellen, dass ein Browser die Informationen, die wir teilen möchten, korrekt darstellt, müssen wir auch sicherstellen, dass ein Screenreader dies tut.
Ein Screenreader liest eine Seite von oben nach unten hörbar vor. Wenn Ihre Seite nur aus Text besteht, wird der Reader die Informationen ähnlich wie ein Browser vermitteln. Natürlich sind Webseiten selten rein textbasiert; sie enthalten Links, Grafiken, Farben und andere visuelle Komponenten. Es muss darauf geachtet werden, dass diese Informationen korrekt von einem Screenreader gelesen werden.
Jeder Webentwickler sollte sich mit einem Screenreader vertraut machen. Wie oben hervorgehoben, ist es der Client, den Ihre Nutzer verwenden werden. Genauso wie Sie wissen, wie ein Browser funktioniert, sollten Sie lernen, wie ein Screenreader funktioniert. Glücklicherweise sind Screenreader in den meisten Betriebssystemen integriert.
Einige Browser haben auch integrierte Tools und Erweiterungen, die Text laut vorlesen oder sogar grundlegende Navigationsfunktionen bieten, wie [diese barrierefreiheitsorientierten Edge-Browser-Tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Diese sind ebenfalls wichtige Barrierefreiheitswerkzeuge, funktionieren jedoch ganz anders als Screenreader und sollten nicht mit Screenreader-Testtools verwechselt werden.
✅ Probieren Sie einen Screenreader und einen Browser-Textleser aus. Unter Windows ist [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) standardmäßig enthalten, und [JAWS](https://webaim.org/articles/jaws/) und [NVDA](https://www.nvaccess.org/about-nvda/) können ebenfalls installiert werden. Unter macOS und iOS ist [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standardmäßig installiert.
### Zoom
Ein weiteres Werkzeug, das häufig von Menschen mit Sehbehinderungen verwendet wird, ist das Zoomen. Die einfachste Art des Zoomens ist statisches Zoomen, gesteuert durch `Control + Pluszeichen (+)` oder durch das Verringern der Bildschirmauflösung. Diese Art des Zoomens bewirkt, dass die gesamte Seite vergrößert wird. Daher ist es wichtig, [responsives Design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) zu verwenden, um eine gute Benutzererfahrung bei erhöhten Zoomstufen zu gewährleisten.
Eine andere Art des Zoomens basiert auf spezieller Software, die einen Bereich des Bildschirms vergrößert und schwenkt, ähnlich wie bei der Verwendung einer echten Lupe. Unter Windows ist [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) integriert, und [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ist eine Drittanbieter-Vergrößerungssoftware mit mehr Funktionen und einer größeren Nutzerbasis. Sowohl macOS als auch iOS verfügen über eine integrierte Vergrößerungssoftware namens [Zoom](https://www.apple.com/accessibility/mac/vision/).
### Kontrastprüfer
Farben auf Websites müssen sorgfältig ausgewählt werden, um den Bedürfnissen von farbenblinden Nutzern oder Menschen, die Schwierigkeiten haben, Farben mit geringem Kontrast zu sehen, gerecht zu werden.
✅ Testen Sie eine Website, die Sie gerne nutzen, auf Farbverwendung mit einer Browser-Erweiterung wie [WCAGs Farbprüfer](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Was lernen Sie?
### Lighthouse
Im Entwicklerbereich Ihres Browsers finden Sie das Lighthouse-Tool. Dieses Tool ist wichtig, um einen ersten Überblick über die Barrierefreiheit (sowie andere Analysen) einer Website zu erhalten. Während es wichtig ist, sich nicht ausschließlich auf Lighthouse zu verlassen, ist eine 100%-Bewertung als Ausgangspunkt sehr hilfreich.
✅ Finden Sie Lighthouse im Entwicklerbereich Ihres Browsers und führen Sie eine Analyse auf einer beliebigen Website durch. Was entdecken Sie?
## Gestaltung für Barrierefreiheit
Barrierefreiheit ist ein relativ großes Thema. Um Ihnen zu helfen, stehen zahlreiche Ressourcen zur Verfügung.
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
Während wir nicht jeden Aspekt der Erstellung barrierefreier Websites abdecken können, finden Sie unten einige der Kernprinzipien, die Sie umsetzen sollten. Eine barrierefreie Seite von Anfang an zu gestalten ist **immer** einfacher, als eine bestehende Seite nachträglich barrierefrei zu machen.
## Gute Anzeigeprinzipien
### Farbpaletten, die sicher sind
Menschen sehen die Welt auf unterschiedliche Weise, und dazu gehören auch Farben. Wenn Sie ein Farbschema für Ihre Website auswählen, sollten Sie sicherstellen, dass es für alle zugänglich ist. Ein großartiges [Tool zur Erstellung von Farbpaletten ist Color Safe](http://colorsafe.co/).
✅ Identifizieren Sie eine Website, die in ihrer Farbverwendung sehr problematisch ist. Warum?
### Verwenden Sie das richtige HTML
Mit CSS und JavaScript ist es möglich, jedes Element wie jede Art von Steuerung aussehen zu lassen. `<span>` könnte verwendet werden, um einen `<button>` zu erstellen, und `<b>` könnte zu einem Hyperlink werden. Obwohl dies möglicherweise einfacher zu gestalten ist, vermittelt es einem Screenreader nichts. Verwenden Sie das passende HTML, wenn Sie Steuerungen auf einer Seite erstellen. Wenn Sie einen Hyperlink möchten, verwenden Sie `<a>`. Die Verwendung des richtigen HTML für die richtige Steuerung wird als Nutzung von semantischem HTML bezeichnet.
✅ Gehen Sie zu einer beliebigen Website und prüfen Sie, ob die Designer und Entwickler HTML korrekt verwenden. Können Sie einen Button finden, der ein Link sein sollte? Hinweis: Rechtsklicken Sie und wählen Sie 'Seitenquelltext anzeigen' in Ihrem Browser, um den zugrunde liegenden Code zu sehen.
### Erstellen Sie eine beschreibende Überschriftenhierarchie
Screenreader-Nutzer [verlassen sich stark auf Überschriften](https://webaim.org/projects/screenreadersurvey8/#finding), um Informationen zu finden und durch eine Seite zu navigieren. Das Schreiben beschreibender Überschrifteninhalte und die Verwendung semantischer Überschriften-Tags sind wichtig, um eine leicht navigierbare Seite für Screenreader-Nutzer zu erstellen.
### Verwenden Sie gute visuelle Hinweise
CSS bietet vollständige Kontrolle über das Aussehen jedes Elements auf einer Seite. Sie können Textfelder ohne Umrandung oder Hyperlinks ohne Unterstreichung erstellen. Leider kann das Entfernen dieser Hinweise es für jemanden, der darauf angewiesen ist, schwieriger machen, die Art der Steuerung zu erkennen.
## Die Bedeutung von Linktext
Hyperlinks sind zentral für die Navigation im Web. Daher ist es wichtig, dass ein Screenreader Links korrekt lesen kann, damit alle Nutzer Ihre Website navigieren können.
### Screenreader und Links
Wie Sie erwarten würden, lesen Screenreader Linktext genauso wie jeden anderen Text auf der Seite. Mit diesem Wissen könnte der unten gezeigte Text akzeptabel erscheinen.
> Der kleine Pinguin, manchmal auch als Feenpinguin bekannt, ist der kleinste Pinguin der Welt. [Hier klicken](https://en.wikipedia.org/wiki/Little_penguin) für weitere Informationen.
> Der kleine Pinguin, manchmal auch als Feenpinguin bekannt, ist der kleinste Pinguin der Welt. Besuchen Sie https://en.wikipedia.org/wiki/Little_penguin für weitere Informationen.
> **NOTE** Wie Sie gleich lesen werden, sollten Sie **niemals** Links erstellen, die wie die oben genannten aussehen.
Denken Sie daran, dass Screenreader eine andere Schnittstelle als Browser sind und über ein anderes Set an Funktionen verfügen.
### Das Problem mit der Verwendung der URL
Screenreader lesen den Text. Wenn eine URL im Text erscheint, wird der Screenreader die URL vorlesen. Im Allgemeinen vermittelt die URL keine sinnvollen Informationen und kann störend klingen. Sie haben dies möglicherweise erlebt, wenn Ihr Telefon jemals eine Textnachricht mit einer URL hörbar vorgelesen hat.
### Das Problem mit "Hier klicken"
Screenreader können auch nur die Hyperlinks auf einer Seite vorlesen, ähnlich wie eine sehende Person eine Seite nach Links durchsucht. Wenn der Linktext immer "Hier klicken" lautet, hört der Nutzer nur "Hier klicken, Hier klicken, Hier klicken, Hier klicken, Hier klicken, ..." Alle Links sind jetzt nicht mehr voneinander unterscheidbar.
### Guter Linktext
Guter Linktext beschreibt kurz, was sich hinter dem Link befindet. Im obigen Beispiel über kleine Pinguine führt der Link zur Wikipedia-Seite über die Art. Der Ausdruck *kleine Pinguine* wäre perfekter Linktext, da er klar macht, was jemand erfährt, wenn er auf den Link klickt - kleine Pinguine.
> Der [kleine Pinguin](https://en.wikipedia.org/wiki/Little_penguin), manchmal auch als Feenpinguin bekannt, ist der kleinste Pinguin der Welt.
✅ Surfen Sie ein paar Minuten im Web, um Seiten zu finden, die undurchsichtige Verlinkungsstrategien verwenden. Vergleichen Sie sie mit anderen, besser verlinkten Seiten. Was lernen Sie?
#### Hinweise für Suchmaschinen
Als zusätzlicher Vorteil, wenn Sie sicherstellen, dass Ihre Website für alle zugänglich ist, helfen Sie auch Suchmaschinen, Ihre Website zu navigieren. Suchmaschinen verwenden Linktext, um die Themen von Seiten zu verstehen. Das Verwenden von gutem Linktext hilft also allen!
### ARIA
Stellen Sie sich die folgende Seite vor:
| Produkt | Beschreibung | Bestellung |
| ------------ | ------------------ | ------------ |
| Widget | [Beschreibung](../../../../1-getting-started-lessons/3-accessibility/') | [Bestellen](../../../../1-getting-started-lessons/3-accessibility/') |
| Super Widget | [Beschreibung](../../../../1-getting-started-lessons/3-accessibility/') | [Bestellen](../../../../1-getting-started-lessons/3-accessibility/') |
In diesem Beispiel macht es für jemanden, der einen Browser verwendet, Sinn, den Text von Beschreibung und Bestellung zu duplizieren. Allerdings würde jemand, der einen Screenreader verwendet, nur die Wörter *Beschreibung* und *Bestellung* wiederholt hören, ohne Kontext.
Um solche Szenarien zu unterstützen, unterstützt HTML eine Reihe von Attributen, die als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) bekannt sind. Diese Attribute ermöglichen es Ihnen, Screenreadern zusätzliche Informationen bereitzustellen.
> **NOTE**: Wie viele Aspekte von HTML kann die Unterstützung durch Browser und Screenreader variieren. Die meisten gängigen Clients unterstützen jedoch ARIA-Attribute.
Sie können `aria-label` verwenden, um den Link zu beschreiben, wenn das Format der Seite dies nicht zulässt. Die Beschreibung für Widget könnte wie folgt festgelegt werden:
``` html
<a href="#" aria-label="Widget description">description</a>
```
✅ Im Allgemeinen übertrifft die Verwendung von semantischem Markup wie oben beschrieben die Verwendung von ARIA, aber manchmal gibt es keine semantische Entsprechung für verschiedene HTML-Widgets. Ein gutes Beispiel ist ein Baum. Es gibt keine HTML-Entsprechung für einen Baum, daher identifizieren Sie das generische `<div>` für dieses Element mit einer passenden Rolle und ARIA-Werten. Die [MDN-Dokumentation zu ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) enthält weitere nützliche Informationen.
```html
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
```
## Bilder
Es versteht sich von selbst, dass Screenreader nicht automatisch lesen können, was in einem Bild enthalten ist. Sicherzustellen, dass Bilder barrierefrei sind, erfordert nicht viel Arbeit - dafür ist das `alt`-Attribut da. Alle bedeutungsvollen Bilder sollten ein `alt` haben, um zu beschreiben, was sie sind. Bilder, die rein dekorativ sind, sollten ihr `alt`-Attribut auf einen leeren String setzen: `alt=""`. Dies verhindert, dass Screenreader das dekorative Bild unnötig ankündigen.
✅ Wie Sie vielleicht erwarten, können Suchmaschinen auch nicht verstehen, was in einem Bild enthalten ist. Sie verwenden ebenfalls Alt-Text. Daher bietet das Sicherstellen der Barrierefreiheit Ihrer Seite zusätzliche Vorteile!
## Die Tastatur
Einige Nutzer können keine Maus oder kein Trackpad verwenden und sind stattdessen auf Tastaturinteraktionen angewiesen, um von einem Element zum nächsten zu wechseln. Es ist wichtig, dass Ihre Website Ihre Inhalte in logischer Reihenfolge präsentiert, damit ein Tastaturnutzer jedes interaktive Element erreichen kann, während er ein Dokument durchgeht. Wenn Sie Ihre Webseiten mit semantischem Markup erstellen und CSS verwenden, um deren visuelles Layout zu gestalten, sollte Ihre Website mit der Tastatur navigierbar sein. Es ist jedoch wichtig, diesen Aspekt manuell zu testen. Erfahren Sie mehr über [Strategien zur Tastaturnavigation](https://webaim.org/techniques/keyboard/).
✅ Gehen Sie zu einer beliebigen Website und versuchen Sie, nur mit Ihrer Tastatur durch sie zu navigieren. Was funktioniert, was funktioniert nicht? Warum?
## Zusammenfassung
Ein Web, das nur für einige zugänglich ist, ist kein wirkliches 'World Wide Web'. Der beste Weg, um sicherzustellen, dass die von Ihnen erstellten Seiten barrierefrei sind, besteht darin, Barrierefreiheits-Best Practices von Anfang an zu integrieren. Während zusätzliche Schritte erforderlich sind, bedeutet das Einbinden dieser Fähigkeiten in Ihren Workflow jetzt, dass alle Seiten, die Sie erstellen, barrierefrei sein werden.
---
## 🚀 Herausforderung
Nehmen Sie dieses HTML und schreiben Sie es so um, dass es so barrierefrei wie möglich ist, basierend auf den Strategien, die Sie gelernt haben.
```html
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">&copy; 2016 Instrument</span>
</div>
</body>
</html>
```
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
## Überprüfung & Selbststudium
Viele Regierungen haben Gesetze zu Barrierefreiheitsanforderungen. Informiere dich über die Barrierefreiheitsgesetze in deinem Heimatland. Was wird abgedeckt und was nicht? Ein Beispiel ist [diese Regierungswebseite](https://accessibility.blog.gov.uk/).
## Aufgabe
[Analysiere eine nicht barrierefreie Webseite](assignment.md)
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) von Instrument
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

26
translations/de/1-getting-started-lessons/3-accessibility/assignment.md Normal file
View File

@@ -0,0 +1,26 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a258597a194e77d4fd469b3cd976b29e",
"translation_date": "2025-08-24T12:57:07+00:00",
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
"language_code": "de"
}
-->
# Analysiere eine nicht barrierefreie Website
## Anweisungen
Identifizieren Sie eine Website, von der Sie glauben, dass sie NICHT barrierefrei ist, und erstellen Sie einen Aktionsplan, um ihre Barrierefreiheit zu verbessern. Ihre erste Aufgabe besteht darin, diese Website zu identifizieren, die Gründe für ihre mangelnde Barrierefreiheit ohne analytische Tools zu beschreiben und sie anschließend einer Lighthouse-Analyse zu unterziehen. Erfassen Sie ein PDF der Ergebnisse dieser Analyse und erstellen Sie einen detaillierten Plan mit mindestens zehn Punkten, wie die Website verbessert werden könnte.
## Tabelle zur Überprüfung der Barrierefreiheit der Website
| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
|-----------|-------------|------------|---------------------|
| | weniger als 10 % der Anforderungen fehlen | 20 % der Anforderungen fehlen | 50 % der Anforderungen fehlen |
----
Studentenbericht: enthält Absätze darüber, wie unzugänglich die Website ist, den Lighthouse-Bericht als PDF, eine Liste mit zehn Punkten zur Verbesserung sowie Details, wie diese Verbesserungen umgesetzt werden können
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

29
translations/de/1-getting-started-lessons/README.md Normal file
View File

@@ -0,0 +1,29 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "04683f4cfa46004179b0404b89a3065c",
"translation_date": "2025-08-24T12:46:22+00:00",
"source_file": "1-getting-started-lessons/README.md",
"language_code": "de"
}
-->
# Einstieg in die Webentwicklung
In diesem Abschnitt des Lehrplans wirst du mit nicht projektbezogenen Konzepten vertraut gemacht, die wichtig sind, um ein professioneller Entwickler zu werden.
### Themen
1. [Einführung in Programmiersprachen und Werkzeuge des Handwerks](1-intro-to-programming-languages/README.md)
2. [Einführung in GitHub](2-github-basics/README.md)
3. [Grundlagen der Barrierefreiheit](3-accessibility/README.md)
### Danksagungen
Die Einführung in Programmiersprachen und Werkzeuge des Handwerks wurde mit ♥️ von [Jasmine Greenaway](https://twitter.com/paladique) geschrieben.
Die Einführung in GitHub wurde mit ♥️ von [Floor Drees](https://twitter.com/floordrees) geschrieben.
Die Grundlagen der Barrierefreiheit wurden mit ♥️ von [Christopher Harrison](https://twitter.com/geektrainer) geschrieben.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

213
translations/de/2-js-basics/1-data-types/README.md Normal file
View File

@@ -0,0 +1,213 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
"translation_date": "2025-08-24T12:21:59+00:00",
"source_file": "2-js-basics/1-data-types/README.md",
"language_code": "de"
}
-->
# JavaScript Grundlagen: Datentypen
![JavaScript Grundlagen - Datentypen](../../../../sketchnotes/webdev101-js-datatypes.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web ermöglicht.
> Du kannst diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) absolvieren!
[![Variablen](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variablen in JavaScript")
[![Datentypen in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Datentypen in JavaScript")
> 🎥 Klicke auf die Bilder oben, um Videos über Variablen und Datentypen anzusehen.
Lass uns mit Variablen und den Datentypen beginnen, die sie enthalten können!
## Variablen
Variablen speichern Werte, die in deinem Code verwendet und geändert werden können.
Das Erstellen und **Deklarieren** einer Variablen hat die folgende Syntax **[Schlüsselwort] [Name]**. Es besteht aus zwei Teilen:
- **Schlüsselwort**. Schlüsselwörter können `let` oder `var` sein.
✅ Das Schlüsselwort `let` wurde in ES6 eingeführt und gibt deiner Variablen einen sogenannten _Block Scope_. Es wird empfohlen, `let` anstelle von `var` zu verwenden. Wir werden Block Scopes später ausführlicher behandeln.
- **Der Variablenname**, den du selbst auswählst.
### Aufgabe - Arbeiten mit Variablen
1. **Deklariere eine Variable**. Deklariere eine Variable mit dem Schlüsselwort `let`:
```javascript
let myVariable;
```
`myVariable` wurde nun mit dem Schlüsselwort `let` deklariert. Es hat derzeit keinen Wert.
1. **Weise einen Wert zu**. Speichere einen Wert in einer Variablen mit dem `=`-Operator, gefolgt vom gewünschten Wert.
```javascript
myVariable = 123;
```
> Hinweis: Die Verwendung von `=` in dieser Lektion bedeutet, dass wir einen "Zuweisungsoperator" verwenden, um einer Variablen einen Wert zuzuweisen. Es bedeutet nicht Gleichheit.
`myVariable` wurde nun mit dem Wert 123 *initialisiert*.
1. **Refaktorieren**. Ersetze deinen Code durch die folgende Anweisung.
```javascript
let myVariable = 123;
```
Das oben genannte wird als _explizite Initialisierung_ bezeichnet, wenn eine Variable deklariert und gleichzeitig ein Wert zugewiesen wird.
1. **Ändere den Variablenwert**. Ändere den Variablenwert auf folgende Weise:
```javascript
myVariable = 321;
```
Sobald eine Variable deklariert ist, kannst du ihren Wert jederzeit in deinem Code mit dem `=`-Operator und dem neuen Wert ändern.
✅ Probier es aus! Du kannst JavaScript direkt in deinem Browser schreiben. Öffne ein Browserfenster und navigiere zu den Entwicklertools. Im Konsolenbereich findest du eine Eingabeaufforderung; gib `let myVariable = 123` ein, drücke Enter und gib dann `myVariable` ein. Was passiert? Hinweis: Du wirst mehr über diese Konzepte in den folgenden Lektionen lernen.
## Konstanten
Die Deklaration und Initialisierung einer Konstante folgt denselben Konzepten wie bei einer Variablen, mit der Ausnahme des Schlüsselworts `const`. Konstanten werden typischerweise mit Großbuchstaben deklariert.
```javascript
const MY_VARIABLE = 123;
```
Konstanten sind ähnlich wie Variablen, mit zwei Ausnahmen:
- **Muss einen Wert haben**. Konstanten müssen initialisiert werden, sonst tritt ein Fehler auf, wenn der Code ausgeführt wird.
- **Referenz kann nicht geändert werden**. Die Referenz einer Konstante kann nach der Initialisierung nicht geändert werden, sonst tritt ein Fehler auf, wenn der Code ausgeführt wird. Schauen wir uns zwei Beispiele an:
- **Einfacher Wert**. Das Folgende ist NICHT erlaubt:
```javascript
const PI = 3;
PI = 4; // not allowed
```
- **Objektreferenz ist geschützt**. Das Folgende ist NICHT erlaubt.
```javascript
const obj = { a: 3 };
obj = { b: 5 } // not allowed
```
- **Objektwert ist nicht geschützt**. Das Folgende IST erlaubt:
```javascript
const obj = { a: 3 };
obj.a = 5; // allowed
```
Oben änderst du den Wert des Objekts, aber nicht die Referenz selbst, was erlaubt ist.
> Hinweis: Ein `const` bedeutet, dass die Referenz vor einer Neuzuweisung geschützt ist. Der Wert ist jedoch nicht _unveränderlich_ und kann sich ändern, insbesondere wenn es sich um eine komplexe Struktur wie ein Objekt handelt.
## Datentypen
Variablen können viele verschiedene Arten von Werten speichern, wie Zahlen und Text. Diese verschiedenen Arten von Werten werden als **Datentyp** bezeichnet. Datentypen sind ein wichtiger Bestandteil der Softwareentwicklung, da sie Entwicklern helfen, Entscheidungen darüber zu treffen, wie der Code geschrieben und wie die Software ausgeführt werden soll. Darüber hinaus haben einige Datentypen einzigartige Eigenschaften, die helfen, zusätzliche Informationen aus einem Wert zu extrahieren oder ihn zu transformieren.
✅ Datentypen werden auch als JavaScript-Datenprimitiven bezeichnet, da sie die niedrigsten Datentypen sind, die von der Sprache bereitgestellt werden. Es gibt 7 primitive Datentypen: string, number, bigint, boolean, undefined, null und symbol. Nimm dir einen Moment Zeit, um dir vorzustellen, was jeder dieser Primitiven darstellen könnte. Was ist ein `zebra`? Wie wäre es mit `0`? `true`?
### Zahlen
Im vorherigen Abschnitt war der Wert von `myVariable` ein Zahlendatentyp.
`let myVariable = 123;`
Variablen können alle Arten von Zahlen speichern, einschließlich Dezimalzahlen oder negativer Zahlen. Zahlen können auch mit arithmetischen Operatoren verwendet werden, die im [nächsten Abschnitt](../../../../2-js-basics/1-data-types) behandelt werden.
### Arithmetische Operatoren
Es gibt verschiedene Arten von Operatoren, die bei der Durchführung arithmetischer Funktionen verwendet werden können, und einige sind hier aufgeführt:
| Symbol | Beschreibung | Beispiel |
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
| `+` | **Addition**: Berechnet die Summe von zwei Zahlen | `1 + 2 //erwartete Antwort ist 3` |
| `-` | **Subtraktion**: Berechnet die Differenz von zwei Zahlen | `1 - 2 //erwartete Antwort ist -1` |
| `*` | **Multiplikation**: Berechnet das Produkt von zwei Zahlen | `1 * 2 //erwartete Antwort ist 2` |
| `/` | **Division**: Berechnet den Quotienten von zwei Zahlen | `1 / 2 //erwartete Antwort ist 0.5` |
| `%` | **Rest**: Berechnet den Rest der Division von zwei Zahlen | `1 % 2 //erwartete Antwort ist 1` |
✅ Probier es aus! Probiere eine arithmetische Operation in der Konsole deines Browsers aus. Überraschen dich die Ergebnisse?
### Strings
Strings sind Zeichenfolgen, die zwischen einfachen oder doppelten Anführungszeichen stehen.
- `'Das ist ein String'`
- `"Das ist auch ein String"`
- `let myString = 'Das ist ein Stringwert, der in einer Variablen gespeichert ist';`
Denke daran, Anführungszeichen zu verwenden, wenn du einen String schreibst, sonst nimmt JavaScript an, dass es sich um einen Variablennamen handelt.
### Strings formatieren
Strings sind textuell und müssen von Zeit zu Zeit formatiert werden.
Um zwei oder mehr Strings zu **konkatenieren**, also zusammenzufügen, verwende den `+`-Operator.
```javascript
let myString1 = "Hello";
let myString2 = "World";
myString1 + myString2 + "!"; //HelloWorld!
myString1 + " " + myString2 + "!"; //Hello World!
myString1 + ", " + myString2 + "!"; //Hello, World!
```
✅ Warum ergibt `1 + 1 = 2` in JavaScript, aber `'1' + '1' = 11`? Denk darüber nach. Was ist mit `'1' + 1`?
**Template Literals** sind eine andere Möglichkeit, Strings zu formatieren. Statt Anführungszeichen wird hier das Backtick verwendet. Alles, was kein reiner Text ist, muss in Platzhalter `${ }` gesetzt werden. Dazu gehören auch Variablen, die Strings sein können.
```javascript
let myString1 = "Hello";
let myString2 = "World";
`${myString1} ${myString2}!` //Hello World!
`${myString1}, ${myString2}!` //Hello, World!
```
Du kannst deine Formatierungsziele mit beiden Methoden erreichen, aber Template Literals respektieren alle Leerzeichen und Zeilenumbrüche.
✅ Wann würdest du ein Template Literal gegenüber einem einfachen String verwenden?
### Booleans
Booleans können nur zwei Werte haben: `true` oder `false`. Booleans können helfen, Entscheidungen darüber zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind. In vielen Fällen helfen [Operatoren](../../../../2-js-basics/1-data-types) dabei, den Wert eines Booleans festzulegen, und du wirst oft Variablen bemerken und schreiben, die initialisiert werden oder deren Werte mit einem Operator aktualisiert werden.
- `let myTrueBool = true`
- `let myFalseBool = false`
✅ Eine Variable kann als 'truthy' betrachtet werden, wenn sie zu einem Boolean `true` ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte truthy, es sei denn, sie sind als falsy definiert](https://developer.mozilla.org/docs/Glossary/Truthy).
---
## 🚀 Herausforderung
JavaScript ist berüchtigt für seine gelegentlich überraschenden Arten, Datentypen zu behandeln. Recherchiere ein wenig über diese 'Fallstricke'. Zum Beispiel: Groß- und Kleinschreibung kann problematisch sein! Probiere dies in deiner Konsole: `let age = 1; let Age = 2; age == Age` (ergibt `false` -- warum?). Welche anderen Fallstricke kannst du finden?
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
## Wiederholung & Selbststudium
Schau dir [diese Liste von JavaScript-Übungen](https://css-tricks.com/snippets/javascript/) an und probiere eine aus. Was hast du gelernt?
## Aufgabe
[Übung zu Datentypen](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

23
translations/de/2-js-basics/1-data-types/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3869244ceda606c4969d8cdd82679867",
"translation_date": "2025-08-24T12:24:05+00:00",
"source_file": "2-js-basics/1-data-types/assignment.md",
"language_code": "de"
}
-->
# Übung zu Datentypen
## Anweisungen
Stellen Sie sich vor, Sie erstellen einen Einkaufswagen. Schreiben Sie eine Dokumentation über die Datentypen, die Sie benötigen, um Ihr Einkaufserlebnis abzuschließen. Wie sind Sie zu Ihren Entscheidungen gekommen?
## Bewertungskriterien
Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig
--- | --- | --- | --- |
||Die sechs Datentypen werden aufgelistet und ausführlich untersucht, ihre Verwendung wird dokumentiert|Vier Datentypen werden untersucht|Zwei Datentypen werden untersucht|
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

208
translations/de/2-js-basics/2-functions-methods/README.md Normal file
View File

@@ -0,0 +1,208 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
"translation_date": "2025-08-24T12:16:12+00:00",
"source_file": "2-js-basics/2-functions-methods/README.md",
"language_code": "de"
}
-->
# JavaScript-Grundlagen: Methoden und Funktionen
![JavaScript Basics - Funktionen](../../../../sketchnotes/webdev101-js-functions.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
Wenn wir über das Schreiben von Code nachdenken, möchten wir immer sicherstellen, dass unser Code lesbar ist. Auch wenn das zunächst widersprüchlich klingt, wird Code viel häufiger gelesen als geschrieben. Ein zentrales Werkzeug im Werkzeugkasten eines Entwicklers, um wartbaren Code zu gewährleisten, ist die **Funktion**.
[![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen")
> 🎥 Klicken Sie auf das Bild oben, um ein Video über Methoden und Funktionen anzusehen.
> Sie können diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) absolvieren!
## Funktionen
Im Kern ist eine Funktion ein Codeblock, den wir bei Bedarf ausführen können. Dies ist ideal für Szenarien, in denen wir dieselbe Aufgabe mehrfach ausführen müssen; anstatt die Logik an mehreren Stellen zu duplizieren (was es schwierig machen würde, sie später zu aktualisieren), können wir sie an einem zentralen Ort bündeln und sie aufrufen, wann immer wir die Operation ausführen möchten – Sie können sogar Funktionen aus anderen Funktionen aufrufen!
Ebenso wichtig ist die Möglichkeit, einer Funktion einen Namen zu geben. Auch wenn dies trivial erscheinen mag, bietet der Name eine schnelle Möglichkeit, einen Abschnitt des Codes zu dokumentieren. Sie können dies wie ein Etikett auf einem Knopf betrachten. Wenn ich auf einen Knopf klicke, auf dem „Timer abbrechen“ steht, weiß ich, dass er die Uhr anhalten wird.
## Erstellen und Aufrufen einer Funktion
Die Syntax für eine Funktion sieht wie folgt aus:
```javascript
function nameOfFunction() { // function definition
// function definition/body
}
```
Wenn ich eine Funktion erstellen möchte, um eine Begrüßung anzuzeigen, könnte sie so aussehen:
```javascript
function displayGreeting() {
console.log('Hello, world!');
}
```
Wann immer wir unsere Funktion aufrufen (oder ausführen) möchten, verwenden wir den Namen der Funktion, gefolgt von `()`. Es ist erwähnenswert, dass unsere Funktion vor oder nach ihrem Aufruf definiert werden kann; der JavaScript-Compiler wird sie für Sie finden.
```javascript
// calling our function
displayGreeting();
```
> **NOTE:** Es gibt eine spezielle Art von Funktion, die als **Methode** bekannt ist, die Sie bereits verwendet haben! Tatsächlich haben wir dies in unserem obigen Beispiel gesehen, als wir `console.log` verwendet haben. Der Unterschied zwischen einer Methode und einer Funktion besteht darin, dass eine Methode an ein Objekt angehängt ist (in unserem Beispiel `console`), während eine Funktion frei schwebend ist. Viele Entwickler verwenden diese Begriffe jedoch synonym.
### Best Practices für Funktionen
Es gibt einige bewährte Praktiken, die Sie beim Erstellen von Funktionen beachten sollten:
- Verwenden Sie wie immer aussagekräftige Namen, damit Sie wissen, was die Funktion tun wird.
- Verwenden Sie **camelCasing**, um Wörter zu kombinieren.
- Halten Sie Ihre Funktionen auf eine spezifische Aufgabe fokussiert.
## Informationen an eine Funktion übergeben
Um eine Funktion vielseitiger zu machen, möchten Sie oft Informationen an sie übergeben. Wenn wir unser Beispiel `displayGreeting` oben betrachten, wird es nur **Hello, world!** anzeigen. Nicht die nützlichste Funktion, die man erstellen könnte. Wenn wir sie etwas flexibler gestalten möchten, z. B. jemandem erlauben, den Namen der Person anzugeben, die begrüßt werden soll, können wir einen **Parameter** hinzufügen. Ein Parameter (manchmal auch als **Argument** bezeichnet) ist zusätzliche Information, die an eine Funktion gesendet wird.
Parameter werden im Definitionsabschnitt in Klammern aufgelistet und durch Kommas getrennt, wie folgt:
```javascript
function name(param, param2, param3) {
}
```
Wir können unser `displayGreeting` aktualisieren, um einen Namen zu akzeptieren und diesen anzuzeigen.
```javascript
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
```
Wenn wir unsere Funktion aufrufen und den Parameter übergeben möchten, geben wir ihn in den Klammern an.
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
```
## Standardwerte
Wir können unsere Funktion noch flexibler gestalten, indem wir weitere Parameter hinzufügen. Aber was, wenn wir nicht möchten, dass jeder Wert angegeben werden muss? Bleiben wir bei unserem Begrüßungsbeispiel: Wir könnten den Namen als erforderlich belassen (wir müssen wissen, wen wir begrüßen), aber wir möchten erlauben, dass die Begrüßung selbst nach Wunsch angepasst wird. Wenn jemand sie nicht anpassen möchte, stellen wir stattdessen einen Standardwert bereit. Um einem Parameter einen Standardwert zu geben, setzen wir ihn ähnlich wie bei einer Variablen – `parameterName = 'defaultValue'`. Ein vollständiges Beispiel:
```javascript
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
```
Wenn wir die Funktion aufrufen, können wir dann entscheiden, ob wir einen Wert für `salutation` festlegen möchten.
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
```
## Rückgabewerte
Bis jetzt wird die Funktion, die wir erstellt haben, immer an die [Konsole](https://developer.mozilla.org/docs/Web/API/console) ausgeben. Manchmal kann dies genau das sein, was wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen werden. Aber was, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn anderswo verwenden kann?
Wir können dies tun, indem wir einen **Rückgabewert** verwenden. Ein Rückgabewert wird von der Funktion zurückgegeben und kann genauso in einer Variablen gespeichert werden, wie wir einen Literalwert wie eine Zeichenkette oder Zahl speichern könnten.
Wenn eine Funktion etwas zurückgibt, wird das Schlüsselwort `return` verwendet. Das Schlüsselwort `return` erwartet einen Wert oder eine Referenz dessen, was zurückgegeben wird, wie folgt:
```javascript
return myVariable;
```
Wir könnten eine Funktion erstellen, um eine Begrüßungsnachricht zu erstellen und den Wert an den Aufrufer zurückzugeben.
```javascript
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
```
Wenn wir diese Funktion aufrufen, speichern wir den Wert in einer Variablen. Dies ist ähnlich wie wenn wir eine Variable auf einen statischen Wert setzen (wie `const name = 'Christopher'`).
```javascript
const greetingMessage = createGreetingMessage('Christopher');
```
## Funktionen als Parameter für Funktionen
Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser clevere Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas passieren oder abgeschlossen sein wird, aber wir wissen, dass wir eine Operation als Reaktion ausführen müssen.
Als Beispiel betrachten Sie [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und Code ausführt, wenn er abgeschlossen ist. Wir müssen ihm mitteilen, welchen Code wir ausführen möchten. Klingt nach einem perfekten Job für eine Funktion!
Wenn Sie den untenstehenden Code ausführen, sehen Sie nach 3 Sekunden die Nachricht **3 seconds has elapsed**.
```javascript
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);
```
### Anonyme Funktionen
Schauen wir uns noch einmal an, was wir gebaut haben. Wir erstellen eine Funktion mit einem Namen, die nur einmal verwendet wird. Wenn unsere Anwendung komplexer wird, können wir uns vorstellen, viele Funktionen zu erstellen, die nur einmal aufgerufen werden. Das ist nicht ideal. Wie sich herausstellt, müssen wir nicht immer einen Namen angeben!
Wenn wir eine Funktion als Parameter übergeben, können wir darauf verzichten, sie im Voraus zu erstellen, und stattdessen eine als Teil des Parameters erstellen. Wir verwenden das gleiche Schlüsselwort `function`, aber wir erstellen sie als Parameter.
Lassen Sie uns den obigen Code umschreiben, um eine anonyme Funktion zu verwenden:
```javascript
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
```
Wenn Sie unseren neuen Code ausführen, werden Sie feststellen, dass wir die gleichen Ergebnisse erhalten. Wir haben eine Funktion erstellt, mussten ihr aber keinen Namen geben!
### Fat Arrow-Funktionen
Eine Abkürzung, die in vielen Programmiersprachen (einschließlich JavaScript) üblich ist, ist die Möglichkeit, sogenannte **Arrow**- oder **Fat Arrow**-Funktionen zu verwenden. Sie verwenden einen speziellen Indikator `=>`, der wie ein Pfeil aussieht – daher der Name! Durch die Verwendung von `=>` können wir das Schlüsselwort `function` überspringen.
Lassen Sie uns unseren Code noch einmal umschreiben, um eine Fat Arrow-Funktion zu verwenden:
```javascript
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
```
### Wann welche Strategie verwenden?
Sie haben nun gesehen, dass wir drei Möglichkeiten haben, eine Funktion als Parameter zu übergeben, und fragen sich vielleicht, wann welche verwendet werden sollte. Wenn Sie wissen, dass Sie die Funktion mehr als einmal verwenden werden, erstellen Sie sie wie gewohnt. Wenn Sie sie nur für eine Stelle verwenden, ist es im Allgemeinen am besten, eine anonyme Funktion zu verwenden. Ob Sie eine Fat Arrow-Funktion oder die traditionellere `function`-Syntax verwenden, bleibt Ihnen überlassen, aber Sie werden feststellen, dass die meisten modernen Entwickler `=>` bevorzugen.
---
## 🚀 Herausforderung
Können Sie in einem Satz den Unterschied zwischen Funktionen und Methoden erklären? Versuchen Sie es!
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
## Überprüfung & Selbststudium
Es lohnt sich, [etwas mehr über Arrow-Funktionen zu lesen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da sie zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben, und schreiben Sie sie dann mit dieser Syntax um.
## Aufgabe
[Spaß mit Funktionen](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

25
translations/de/2-js-basics/2-functions-methods/assignment.md Normal file
View File

@@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8973f96157680a13e9446e4bb540ee57",
"translation_date": "2025-08-24T12:18:17+00:00",
"source_file": "2-js-basics/2-functions-methods/assignment.md",
"language_code": "de"
}
-->
# Spaß mit Funktionen
## Anweisungen
Erstelle verschiedene Funktionen, sowohl solche, die etwas zurückgeben, als auch solche, die nichts zurückgeben.
Versuche, eine Funktion zu erstellen, die eine Mischung aus Parametern und Parametern mit Standardwerten enthält.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------- |
| | Es werden zwei oder mehr gut funktionierende Funktionen mit vielfältigen Parametern angeboten | Es wird eine funktionierende Lösung mit einer Funktion und wenigen Parametern angeboten | Die Lösung enthält Fehler |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

230
translations/de/2-js-basics/3-making-decisions/README.md Normal file
View File

@@ -0,0 +1,230 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "888609c48329c280ca2477d2df40f2e5",
"translation_date": "2025-08-24T12:13:08+00:00",
"source_file": "2-js-basics/3-making-decisions/README.md",
"language_code": "de"
}
-->
# JavaScript-Grundlagen: Entscheidungen treffen
![JavaScript Basics - Entscheidungen treffen](../../../../sketchnotes/webdev101-js-decisions.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
Entscheidungen zu treffen und die Reihenfolge zu kontrollieren, in der dein Code ausgeführt wird, macht deinen Code wiederverwendbar und robust. In diesem Abschnitt geht es um die Syntax zur Steuerung des Datenflusses in JavaScript und deren Bedeutung im Zusammenhang mit Booleschen Datentypen.
[![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen")
> 🎥 Klicke auf das Bild oben, um ein Video über das Treffen von Entscheidungen anzusehen.
> Du kannst diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) absolvieren!
## Ein kurzer Rückblick auf Boolesche Werte
Boolesche Werte können nur zwei Zustände haben: `true` oder `false`. Sie helfen dabei, Entscheidungen zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind.
Setze deinen Booleschen Wert auf true oder false wie folgt:
`let myTrueBool = true`
`let myFalseBool = false`
✅ Boolesche Werte sind benannt nach dem englischen Mathematiker, Philosophen und Logiker George Boole (1815–1864).
## Vergleichsoperatoren und Boolesche Werte
Operatoren werden verwendet, um Bedingungen zu bewerten, indem sie Vergleiche anstellen, die einen Booleschen Wert erzeugen. Die folgende Liste zeigt häufig verwendete Operatoren.
| Symbol | Beschreibung | Beispiel |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **Kleiner als**: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite kleiner ist als der auf der rechten Seite | `5 < 6 // true` |
| `<=` | **Kleiner oder gleich**: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite kleiner oder gleich dem auf der rechten Seite ist | `5 <= 6 // true` |
| `>` | **Größer als**: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite größer ist als der auf der rechten Seite | `5 > 6 // false` |
| `>=` | **Größer oder gleich**: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn der Wert auf der linken Seite größer oder gleich dem auf der rechten Seite ist | `5 >= 6 // false` |
| `===` | **Strikte Gleichheit**: Vergleicht zwei Werte und gibt den Booleschen Wert `true` zurück, wenn die Werte auf der rechten und linken Seite gleich sind UND denselben Datentyp haben | `5 === 6 // false` |
| `!==` | **Ungleichheit**: Vergleicht zwei Werte und gibt den entgegengesetzten Booleschen Wert zurück, den ein strikter Gleichheitsoperator zurückgeben würde | `5 !== 6 // true` |
✅ Überprüfe dein Wissen, indem du einige Vergleiche in der Konsole deines Browsers schreibst. Überrascht dich irgendein zurückgegebener Wert?
## If-Anweisung
Die If-Anweisung führt den Code innerhalb ihrer Blöcke aus, wenn die Bedingung wahr ist.
```javascript
if (condition) {
//Condition is true. Code in this block will run.
}
```
Logische Operatoren werden oft verwendet, um die Bedingung zu bilden.
```javascript
let currentMoney;
let laptopPrice;
if (currentMoney >= laptopPrice) {
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
}
```
## If..Else-Anweisung
Die `else`-Anweisung führt den Code innerhalb ihrer Blöcke aus, wenn die Bedingung falsch ist. Sie ist optional bei einer `if`-Anweisung.
```javascript
let currentMoney;
let laptopPrice;
if (currentMoney >= laptopPrice) {
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
//Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```
✅ Teste dein Verständnis dieses Codes und des folgenden Codes, indem du ihn in einer Browser-Konsole ausführst. Ändere die Werte der Variablen `currentMoney` und `laptopPrice`, um die zurückgegebenen `console.log()`-Ausgaben zu ändern.
## Switch-Anweisung
Die `switch`-Anweisung wird verwendet, um verschiedene Aktionen basierend auf unterschiedlichen Bedingungen auszuführen. Mit der `switch`-Anweisung kannst du einen von vielen Codeblöcken auswählen, die ausgeführt werden sollen.
```javascript
switch (expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
```
```javascript
// program using switch statement
let a = 2;
switch (a) {
case 1:
a = "one";
break;
case 2:
a = "two";
break;
default:
a = "not found";
break;
}
console.log(`The value is ${a}`);
```
✅ Teste dein Verständnis dieses Codes und des folgenden Codes, indem du ihn in einer Browser-Konsole ausführst. Ändere die Werte der Variablen `a`, um die zurückgegebenen `console.log()`-Ausgaben zu ändern.
## Logische Operatoren und Boolesche Werte
Entscheidungen können mehr als einen Vergleich erfordern und können mit logischen Operatoren verknüpft werden, um einen Booleschen Wert zu erzeugen.
| Symbol | Beschreibung | Beispiel |
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `&&` | **Logisches UND**: Vergleicht zwei Boolesche Ausdrücke. Gibt true **nur** zurück, wenn beide Seiten wahr sind | `(5 > 6) && (5 < 6 ) //Eine Seite ist falsch, die andere ist wahr. Gibt false zurück` |
| `\|\|` | **Logisches ODER**: Vergleicht zwei Boolesche Ausdrücke. Gibt true zurück, wenn mindestens eine Seite wahr ist | `(5 > 6) \|\| (5 < 6) //Eine Seite ist falsch, die andere ist wahr. Gibt true zurück` |
| `!` | **Logisches NICHT**: Gibt den entgegengesetzten Wert eines Booleschen Ausdrucks zurück | `!(5 > 6) // 5 ist nicht größer als 6, aber "!" gibt true zurück` |
## Bedingungen und Entscheidungen mit logischen Operatoren
Logische Operatoren können verwendet werden, um Bedingungen in If..Else-Anweisungen zu bilden.
```javascript
let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
//Condition is true. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```
### Negationsoperator
Du hast bisher gesehen, wie du eine `if...else`-Anweisung verwenden kannst, um bedingte Logik zu erstellen. Alles, was in ein `if` kommt, muss zu true/false ausgewertet werden. Mit dem `!`-Operator kannst du den Ausdruck _negieren_. Es würde so aussehen:
```javascript
if (!condition) {
// runs if condition is false
} else {
// runs if condition is true
}
```
### Ternäre Ausdrücke
`if...else` ist nicht die einzige Möglichkeit, Entscheidungslogik auszudrücken. Du kannst auch einen sogenannten ternären Operator verwenden. Die Syntax sieht so aus:
```javascript
let variable = condition ? <return this if true> : <return this if false>
```
Unten ist ein greifbareres Beispiel:
```javascript
let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```
✅ Nimm dir eine Minute Zeit, um diesen Code ein paar Mal zu lesen. Verstehst du, wie diese Operatoren funktionieren?
Das oben Gesagte bedeutet:
- Wenn `firstNumber` größer ist als `secondNumber`
- dann weise `firstNumber` der Variablen `biggestNumber` zu
- andernfalls weise `secondNumber` zu.
Der ternäre Ausdruck ist nur eine kompakte Art, den folgenden Code zu schreiben:
```javascript
let biggestNumber;
if (firstNumber > secondNumber) {
biggestNumber = firstNumber;
} else {
biggestNumber = secondNumber;
}
```
---
## 🚀 Herausforderung
Erstelle ein Programm, das zuerst mit logischen Operatoren geschrieben wird und dann mit einem ternären Ausdruck umgeschrieben wird. Welche Syntax bevorzugst du?
---
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
## Überprüfung & Selbststudium
Lies mehr über die vielen Operatoren, die dem Benutzer zur Verfügung stehen, [auf MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
Schau dir Josh Comeaus großartige [Operator-Übersicht](https://joshwcomeau.com/operator-lookup/) an!
## Aufgabe
[Operatoren](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

52
translations/de/2-js-basics/3-making-decisions/assignment.md Normal file
View File

@@ -0,0 +1,52 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
"translation_date": "2025-08-24T12:14:55+00:00",
"source_file": "2-js-basics/3-making-decisions/assignment.md",
"language_code": "de"
}
-->
# Operatoren
## Anweisungen
Experimentiere mit Operatoren. Hier ist ein Vorschlag für ein Programm, das du implementieren kannst:
Du hast eine Gruppe von Schülern aus zwei verschiedenen Notensystemen.
### Erstes Notensystem
Ein Notensystem definiert die Noten von 1-5, wobei 3 und höher bedeutet, dass man den Kurs besteht.
### Zweites Notensystem
Das andere Notensystem hat die folgenden Noten: `A, A-, B, B-, C, C-`, wobei `A` die beste Note ist und `C` die niedrigste Note, mit der man besteht.
### Die Aufgabe
Gegeben ist das folgende Array `allStudents`, das alle Schüler und ihre Noten repräsentiert. Erstelle ein neues Array `studentsWhoPass`, das alle Schüler enthält, die bestehen.
> TIP: Verwende eine for-Schleife, if...else und Vergleichsoperatoren:
```javascript
let allStudents = [
'A',
'B-',
1,
4,
5,
2
]
let studentsWhoPass = [];
```
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ----------------------------- | ----------------------------- | ------------------------------- |
| | Vollständige Lösung wird präsentiert | Teilweise Lösung wird präsentiert | Lösung mit Fehlern wird präsentiert |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

145
translations/de/2-js-basics/4-arrays-loops/README.md Normal file
View File

@@ -0,0 +1,145 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3f7f87871312cf6cc12662da7d973182",
"translation_date": "2025-08-24T12:19:16+00:00",
"source_file": "2-js-basics/4-arrays-loops/README.md",
"language_code": "de"
}
-->
# JavaScript-Grundlagen: Arrays und Schleifen
![JavaScript Basics - Arrays](../../../../sketchnotes/webdev101-js-arrays.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web ermöglicht. In dieser Lektion lernst du Arrays und Schleifen kennen, die zur Datenmanipulation verwendet werden.
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
[![Schleifen](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Schleifen")
> 🎥 Klicke auf die Bilder oben, um Videos über Arrays und Schleifen anzusehen.
> Du kannst diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) absolvieren!
## Arrays
Das Arbeiten mit Daten ist eine häufige Aufgabe in jeder Programmiersprache, und es ist viel einfacher, wenn Daten in einer strukturierten Form wie Arrays organisiert sind. Mit Arrays werden Daten in einer Struktur ähnlich einer Liste gespeichert. Ein großer Vorteil von Arrays ist, dass du verschiedene Datentypen in einem Array speichern kannst.
✅ Arrays sind überall um uns herum! Kannst du ein Beispiel aus dem echten Leben für ein Array nennen, wie etwa ein Solarpanel-Array?
Die Syntax für ein Array besteht aus einem Paar eckiger Klammern.
```javascript
let myArray = [];
```
Dies ist ein leeres Array, aber Arrays können auch direkt mit Daten gefüllt deklariert werden. Mehrere Werte in einem Array werden durch ein Komma getrennt.
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
Die Array-Werte erhalten einen eindeutigen Wert, der **Index** genannt wird, eine ganze Zahl, die basierend auf ihrer Entfernung vom Anfang des Arrays zugewiesen wird. Im obigen Beispiel hat der String-Wert "Chocolate" einen Index von 0, und der Index von "Rocky Road" ist 4. Verwende den Index mit eckigen Klammern, um Array-Werte abzurufen, zu ändern oder einzufügen.
✅ Überrascht es dich, dass Arrays beim Index 0 beginnen? In einigen Programmiersprachen beginnen Indizes bei 1. Es gibt eine interessante Geschichte dazu, die du [auf Wikipedia lesen kannst](https://en.wikipedia.org/wiki/Zero-based_numbering).
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
```
Du kannst den Index nutzen, um einen Wert zu ändern, so wie hier:
```javascript
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
```
Und du kannst einen neuen Wert an einem bestimmten Index einfügen, so wie hier:
```javascript
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
```
✅ Eine häufigere Methode, Werte zu einem Array hinzuzufügen, ist die Verwendung von Array-Operatoren wie array.push()
Um herauszufinden, wie viele Elemente sich in einem Array befinden, verwende die `length`-Eigenschaft.
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
```
✅ Probier es selbst aus! Erstelle und manipuliere ein Array deiner Wahl in der Konsole deines Browsers.
## Schleifen
Schleifen ermöglichen es uns, repetitive oder **iterative** Aufgaben auszuführen, und können viel Zeit und Code sparen. Jede Iteration kann sich in ihren Variablen, Werten und Bedingungen unterscheiden. Es gibt verschiedene Arten von Schleifen in JavaScript, die alle kleine Unterschiede aufweisen, aber im Wesentlichen dasselbe tun: über Daten iterieren.
### For-Schleife
Die `for`-Schleife benötigt 3 Teile, um zu iterieren:
- `counter` Eine Variable, die typischerweise mit einer Zahl initialisiert wird, die die Anzahl der Iterationen zählt
- `condition` Ausdruck, der Vergleichsoperatoren verwendet, um die Schleife zu stoppen, wenn `false`
- `iteration-expression` Wird am Ende jeder Iteration ausgeführt, typischerweise verwendet, um den Zählerwert zu ändern
```javascript
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Führe diesen Code in der Konsole deines Browsers aus. Was passiert, wenn du kleine Änderungen am Zähler, der Bedingung oder dem Iterationsausdruck vornimmst? Kannst du die Schleife rückwärts laufen lassen, um einen Countdown zu erstellen?
### While-Schleife
Im Gegensatz zur Syntax der `for`-Schleife benötigen `while`-Schleifen nur eine Bedingung, die die Schleife stoppt, wenn die Bedingung `false` wird. Bedingungen in Schleifen hängen normalerweise von anderen Werten wie Zählern ab und müssen während der Schleife verwaltet werden. Startwerte für Zähler müssen außerhalb der Schleife erstellt werden, und alle Ausdrücke, die eine Bedingung erfüllen, einschließlich der Änderung des Zählers, müssen innerhalb der Schleife gepflegt werden.
```javascript
//Counting up to 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
```
✅ Warum würdest du eine for-Schleife gegenüber einer while-Schleife wählen? 17.000 Nutzer hatten dieselbe Frage auf StackOverflow, und einige der Meinungen [könnten für dich interessant sein](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
## Schleifen und Arrays
Arrays werden oft mit Schleifen verwendet, da die meisten Bedingungen die Länge des Arrays benötigen, um die Schleife zu stoppen, und der Index auch als Zählerwert dienen kann.
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed
```
✅ Experimentiere mit dem Iterieren über ein Array deiner Wahl in der Konsole deines Browsers.
---
## 🚀 Herausforderung
Es gibt andere Möglichkeiten, über Arrays zu iterieren, außer mit for- und while-Schleifen. Es gibt [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreibe deine Array-Schleife mit einer dieser Techniken um.
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
## Wiederholung & Selbststudium
Arrays in JavaScript haben viele Methoden, die äußerst nützlich für die Datenmanipulation sind. [Lies mehr über diese Methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) und probiere einige davon aus (wie push, pop, slice und splice) an einem Array deiner Wahl.
## Aufgabe
[Iteriere über ein Array](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

25
translations/de/2-js-basics/4-arrays-loops/assignment.md Normal file
View File

@@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8b2381170bd0fd2870f5889bb8620f02",
"translation_date": "2025-08-24T12:20:50+00:00",
"source_file": "2-js-basics/4-arrays-loops/assignment.md",
"language_code": "de"
}
-->
# Ein Array durchlaufen
## Anweisungen
Erstelle ein Programm, das jede 3. Zahl zwischen 1 und 20 auflistet und in der Konsole ausgibt.
> TIP: Verwende eine for-Schleife und passe den Iterationsausdruck an.
## Bewertungskriterien
| Kriterium | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | --------------------------------------- | ------------------------ | ------------------------------ |
| | Programm läuft korrekt und ist kommentiert | Programm ist nicht kommentiert | Programm ist unvollständig oder fehlerhaft |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

26
translations/de/2-js-basics/README.md Normal file
View File

@@ -0,0 +1,26 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cc9e70a2f096c67389c8acff1521fc27",
"translation_date": "2025-08-24T12:11:56+00:00",
"source_file": "2-js-basics/README.md",
"language_code": "de"
}
-->
# Einführung in JavaScript
JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernst du die Grundlagen.
### Themen
1. [Variablen und Datentypen](1-data-types/README.md)
2. [Funktionen und Methoden](2-functions-methods/README.md)
3. [Entscheidungen treffen mit JavaScript](3-making-decisions/README.md)
4. [Arrays und Schleifen](4-arrays-loops/README.md)
### Credits
Diese Lektionen wurden mit ♥️ geschrieben von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

247
translations/de/3-terrarium/1-intro-to-html/README.md Normal file
View File

@@ -0,0 +1,247 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "46a0639e719b9cf1dfd062aa24cad639",
"translation_date": "2025-08-24T12:00:14+00:00",
"source_file": "3-terrarium/1-intro-to-html/README.md",
"language_code": "de"
}
-->
# Terrarium-Projekt Teil 1: Einführung in HTML
![Einführung in HTML](../../../../sketchnotes/webdev101-html.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
> Schau dir das Video an
>
> [![Video zu Git- und GitHub-Grundlagen](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
### Einführung
HTML, oder HyperText Markup Language, ist das 'Skelett' des Webs. Wenn CSS dein HTML 'anzieht' und JavaScript es zum Leben erweckt, dann ist HTML der Körper deiner Webanwendung. Die Syntax von HTML spiegelt diese Idee wider, da sie Tags wie "head", "body" und "footer" enthält.
In dieser Lektion werden wir HTML verwenden, um das 'Skelett' der Benutzeroberfläche unseres virtuellen Terrariums zu erstellen. Es wird einen Titel und drei Spalten haben: eine rechte und eine linke Spalte, in denen die verschiebbaren Pflanzen leben, und einen mittleren Bereich, der das eigentliche gläserne Terrarium darstellt. Am Ende dieser Lektion wirst du die Pflanzen in den Spalten sehen können, aber die Benutzeroberfläche wird noch etwas seltsam aussehen; keine Sorge, im nächsten Abschnitt wirst du CSS-Stile hinzufügen, um die Benutzeroberfläche ansprechender zu gestalten.
### Aufgabe
Erstelle auf deinem Computer einen Ordner namens 'terrarium' und darin eine Datei namens 'index.html'. Du kannst dies in Visual Studio Code tun, nachdem du deinen Terrarium-Ordner erstellt hast, indem du ein neues VS Code-Fenster öffnest, auf 'Ordner öffnen' klickst und zu deinem neuen Ordner navigierst. Klicke im Explorer-Bereich auf die kleine Schaltfläche 'Datei' und erstelle die neue Datei:
![Explorer in VS Code](../../../../3-terrarium/1-intro-to-html/images/vs-code-index.png)
Oder
Verwende diese Befehle in deinem Git Bash:
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` oder `nano index.html`
> index.html-Dateien zeigen einem Browser an, dass es sich um die Standarddatei in einem Ordner handelt; URLs wie `https://anysite.com/test` könnten auf einer Ordnerstruktur basieren, die einen Ordner namens `test` mit einer `index.html`-Datei enthält; `index.html` muss nicht in der URL angezeigt werden.
---
## Der DocType und die html-Tags
Die erste Zeile einer HTML-Datei ist ihr Doctype. Es ist etwas überraschend, dass diese Zeile ganz oben in der Datei stehen muss, aber sie teilt älteren Browsern mit, dass die Seite im Standardmodus gerendert werden soll, der der aktuellen HTML-Spezifikation entspricht.
> Tipp: In VS Code kannst du über ein Tag fahren, um Informationen über dessen Verwendung aus den MDN-Referenzleitfäden zu erhalten.
Die zweite Zeile sollte das öffnende `<html>`-Tag sein, gefolgt von seinem schließenden Tag `</html>`. Diese Tags sind die Wurzelelemente deiner Benutzeroberfläche.
### Aufgabe
Füge diese Zeilen oben in deiner `index.html`-Datei hinzu:
```HTML
<!DOCTYPE html>
<html></html>
```
✅ Es gibt einige verschiedene Modi, die durch das Festlegen des Doctype mit einer Abfragezeichenfolge bestimmt werden können: [Quirks Mode und Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Diese Modi dienten der Unterstützung wirklich alter Browser, die heutzutage normalerweise nicht mehr verwendet werden (Netscape Navigator 4 und Internet Explorer 5). Du kannst bei der Standard-Doctype-Deklaration bleiben.
---
## Der 'head' des Dokuments
Der 'head'-Bereich des HTML-Dokuments enthält wichtige Informationen über deine Webseite, auch bekannt als [Metadaten](https://developer.mozilla.org/docs/Web/HTML/Element/meta). In unserem Fall teilen wir dem Webserver, an den diese Seite gesendet wird, um gerendert zu werden, diese vier Dinge mit:
- den Titel der Seite
- Metadaten der Seite, einschließlich:
- des 'Zeichensatzes', der angibt, welche Zeichenkodierung auf der Seite verwendet wird
- Browserinformationen, einschließlich `x-ua-compatible`, das angibt, dass der IE=edge-Browser unterstützt wird
- Informationen darüber, wie das Viewport beim Laden reagieren soll. Das Festlegen des Viewports auf eine anfängliche Skalierung von 1 steuert den Zoomlevel, wenn die Seite zum ersten Mal geladen wird.
### Aufgabe
Füge einen 'head'-Block zu deinem Dokument zwischen den öffnenden und schließenden `<html>`-Tags hinzu.
```html
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
```
✅ Was würde passieren, wenn du ein Viewport-Meta-Tag wie dieses festlegst: `<meta name="viewport" content="width=600">`? Lies mehr über das [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
---
## Der `body` des Dokuments
### HTML-Tags
In HTML fügst du Tags zu deiner .html-Datei hinzu, um Elemente einer Webseite zu erstellen. Jedes Tag hat normalerweise ein öffnendes und ein schließendes Tag, wie dieses: `<p>hallo</p>`, um einen Absatz anzuzeigen. Erstelle den Body deiner Benutzeroberfläche, indem du ein Paar `<body>`-Tags innerhalb des `<html>`-Tag-Paares hinzufügst; dein Markup sieht jetzt so aus:
### Aufgabe
```html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
```
Jetzt kannst du anfangen, deine Seite zu erstellen. Normalerweise verwendest du `<div>`-Tags, um die separaten Elemente auf einer Seite zu erstellen. Wir werden eine Reihe von `<div>`-Elementen erstellen, die Bilder enthalten.
### Bilder
Ein HTML-Tag, das kein schließendes Tag benötigt, ist das `<img>`-Tag, da es ein `src`-Element hat, das alle Informationen enthält, die die Seite benötigt, um das Element zu rendern.
Erstelle einen Ordner in deiner App namens `images` und füge dort alle Bilder aus dem [Quellcode-Ordner](../../../../3-terrarium/solution/images) hinzu; (es gibt 14 Bilder von Pflanzen).
### Aufgabe
Füge diese Pflanzenbilder in zwei Spalten zwischen den `<body></body>`-Tags ein:
```html
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
```
> Hinweis: Spans vs. Divs. Divs werden als 'Block'-Elemente betrachtet, und Spans sind 'Inline'-Elemente. Was würde passieren, wenn du diese Divs in Spans umwandelst?
Mit diesem Markup erscheinen die Pflanzen jetzt auf dem Bildschirm. Es sieht ziemlich schlecht aus, da sie noch nicht mit CSS gestylt sind, und das werden wir in der nächsten Lektion tun.
Jedes Bild hat einen Alt-Text, der angezeigt wird, auch wenn du ein Bild nicht sehen oder rendern kannst. Dies ist ein wichtiges Attribut, um die Barrierefreiheit zu gewährleisten. Erfahre mehr über Barrierefreiheit in zukünftigen Lektionen; für jetzt merke dir, dass das Alt-Attribut alternative Informationen für ein Bild bereitstellt, falls ein Benutzer das Bild aus irgendeinem Grund nicht sehen kann (aufgrund einer langsamen Verbindung, eines Fehlers im src-Attribut oder wenn der Benutzer einen Screenreader verwendet).
✅ Ist dir aufgefallen, dass jedes Bild denselben Alt-Tag hat? Ist das eine gute Praxis? Warum oder warum nicht? Kannst du diesen Code verbessern?
---
## Semantisches Markup
Im Allgemeinen ist es vorzuziehen, beim Schreiben von HTML sinnvolle 'Semantik' zu verwenden. Was bedeutet das? Es bedeutet, dass du HTML-Tags verwendest, um die Art der Daten oder Interaktionen darzustellen, für die sie entworfen wurden. Zum Beispiel sollte der Haupttiteltext auf einer Seite ein `<h1>`-Tag verwenden.
Füge die folgende Zeile direkt unter deinem öffnenden `<body>`-Tag hinzu:
```html
<h1>My Terrarium</h1>
```
Die Verwendung von semantischem Markup, wie das Verwenden von `<h1>` für Überschriften und `<ul>` für ungeordnete Listen, hilft Screenreadern, sich durch eine Seite zu navigieren. Im Allgemeinen sollten Schaltflächen als `<button>` geschrieben werden und Listen als `<li>`. Während es _möglich_ ist, speziell gestylte `<span>`-Elemente mit Klick-Handlern zu verwenden, um Schaltflächen zu imitieren, ist es für Benutzer mit Behinderungen besser, Technologien zu verwenden, um zu bestimmen, wo sich eine Schaltfläche auf einer Seite befindet, und mit ihr zu interagieren, wenn das Element als Schaltfläche erscheint. Aus diesem Grund solltest du so oft wie möglich semantisches Markup verwenden.
✅ Schau dir einen Screenreader an und [wie er mit einer Webseite interagiert](https://www.youtube.com/watch?v=OUDV1gqs9GA). Kannst du sehen, warum nicht-semantisches Markup den Benutzer frustrieren könnte?
## Das Terrarium
Der letzte Teil dieser Benutzeroberfläche besteht darin, ein Markup zu erstellen, das so gestylt wird, dass es ein Terrarium darstellt.
### Aufgabe:
Füge dieses Markup oberhalb des letzten `</div>`-Tags hinzu:
```html
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
```
✅ Obwohl du dieses Markup auf dem Bildschirm hinzugefügt hast, siehst du absolut nichts gerendert. Warum?
---
## 🚀Herausforderung
Es gibt einige wilde 'ältere' Tags in HTML, die immer noch Spaß machen, obwohl du veraltete Tags wie [diese Tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nicht in deinem Markup verwenden solltest. Kannst du trotzdem das alte `<marquee>`-Tag verwenden, um den h1-Titel horizontal scrollen zu lassen? (Falls du das machst, vergiss nicht, es danach zu entfernen.)
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
## Rückblick & Selbststudium
HTML ist das 'bewährte' Bausteinsystem, das dazu beigetragen hat, das Web zu dem zu machen, was es heute ist. Erfahre ein wenig über seine Geschichte, indem du einige alte und neue Tags studierst. Kannst du herausfinden, warum einige Tags veraltet und andere hinzugefügt wurden? Welche Tags könnten in Zukunft eingeführt werden?
Erfahre mehr über den Aufbau von Websites für das Web und mobile Geräte bei [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
## Aufgabe
[Übe dein HTML: Erstelle ein Blog-Layout](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/3-terrarium/1-intro-to-html/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "970776c81401c9aacb34f365edac6b53",
"translation_date": "2025-08-24T12:02:36+00:00",
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
"language_code": "de"
}
-->
# Übe dein HTML: Erstelle ein Blog-Mockup
## Anweisungen
Stell dir vor, du entwirfst oder gestaltest deine persönliche Website neu. Erstelle ein grafisches Mockup deiner Website und schreibe anschließend das HTML-Markup auf, das du verwenden würdest, um die verschiedenen Elemente der Website zu erstellen. Du kannst dies auf Papier machen und einscannen oder eine Software deiner Wahl verwenden – stelle nur sicher, dass du das HTML-Markup von Hand codierst.
## Bewertungskriterien
| Kriterien | Hervorragend | Angemessen | Verbesserungswürdig |
| --------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| | Ein Blog-Layout wird visuell dargestellt mit mindestens 10 Markup-Elementen | Ein Blog-Layout wird visuell dargestellt mit etwa 5 Markup-Elementen | Ein Blog-Layout wird visuell dargestellt mit höchstens 3 Markup-Elementen |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

282
translations/de/3-terrarium/2-intro-to-css/README.md Normal file
View File

@@ -0,0 +1,282 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e375c2aeb94e2407f2667633d39580bd",
"translation_date": "2025-08-24T12:08:12+00:00",
"source_file": "3-terrarium/2-intro-to-css/README.md",
"language_code": "de"
}
-->
# Terrarium-Projekt Teil 2: Einführung in CSS
![Einführung in CSS](../../../../sketchnotes/webdev101-css.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
### Einführung
CSS, oder Cascading Style Sheets, lösen ein wichtiges Problem der Webentwicklung: Wie man eine Website ansprechend gestaltet. Das Styling deiner Apps macht sie benutzerfreundlicher und optisch ansprechender; außerdem kannst du CSS nutzen, um Responsive Web Design (RWD) zu erstellen – so sehen deine Apps unabhängig von der Bildschirmgröße gut aus. CSS ist nicht nur dafür da, deine App schön aussehen zu lassen; die Spezifikation umfasst auch Animationen und Transformationen, die komplexe Interaktionen für deine Apps ermöglichen können. Die CSS-Arbeitsgruppe hilft dabei, aktuelle CSS-Spezifikationen zu pflegen; du kannst ihre Arbeit auf der [Website des World Wide Web Consortiums](https://www.w3.org/Style/CSS/members) verfolgen.
> Hinweis: CSS ist eine Sprache, die sich wie alles im Web weiterentwickelt, und nicht alle Browser unterstützen neuere Teile der Spezifikation. Überprüfe deine Implementierungen immer, indem du [CanIUse.com](https://caniuse.com) konsultierst.
In dieser Lektion werden wir unserem Online-Terrarium Styles hinzufügen und mehr über verschiedene CSS-Konzepte lernen: die Kaskade, Vererbung, die Verwendung von Selektoren, Positionierung und die Nutzung von CSS für Layouts. Dabei werden wir das Terrarium layouten und das eigentliche Terrarium erstellen.
### Voraussetzung
Du solltest das HTML für dein Terrarium erstellt und bereit zum Stylen haben.
> Schau dir das Video an
>
> [![Git- und GitHub-Grundlagen Video](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### Aufgabe
Erstelle in deinem Terrarium-Ordner eine neue Datei namens `style.css`. Importiere diese Datei im `<head>`-Abschnitt:
```html
<link rel="stylesheet" href="./style.css" />
```
---
## Die Kaskade
Cascading Style Sheets beinhalten die Idee, dass die Styles „kaskadieren“, sodass die Anwendung eines Styles durch seine Priorität gesteuert wird. Styles, die von einem Website-Autor festgelegt werden, haben Vorrang vor denen, die von einem Browser festgelegt werden. Inline-Styles haben Vorrang vor denen, die in einem externen Stylesheet festgelegt sind.
### Aufgabe
Füge dem `<h1>`-Tag den Inline-Style „color: red“ hinzu:
```HTML
<h1 style="color: red">My Terrarium</h1>
```
Füge dann den folgenden Code zu deiner `style.css`-Datei hinzu:
```CSS
h1 {
color: blue;
}
```
✅ Welche Farbe wird in deiner Web-App angezeigt? Warum? Kannst du eine Möglichkeit finden, Styles zu überschreiben? Wann würdest du das tun oder warum nicht?
---
## Vererbung
Styles werden von einem übergeordneten Style an einen untergeordneten weitergegeben, sodass verschachtelte Elemente die Styles ihrer Eltern erben.
### Aufgabe
Setze die Schriftart des Body auf eine bestimmte Schriftart und überprüfe die Schriftart eines verschachtelten Elements:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
```
Öffne die Konsole deines Browsers im Tab „Elemente“ und beobachte die Schriftart des H1. Es erbt seine Schriftart vom Body, wie im Browser angegeben:
![geerbte Schriftart](../../../../3-terrarium/2-intro-to-css/images/1.png)
✅ Kannst du einen verschachtelten Style dazu bringen, eine andere Eigenschaft zu erben?
---
## CSS-Selektoren
### Tags
Bisher hat deine `style.css`-Datei nur wenige Tags gestylt, und die App sieht ziemlich seltsam aus:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
```
Diese Art, ein Tag zu stylen, gibt dir Kontrolle über einzigartige Elemente, aber du musst die Styles vieler Pflanzen in deinem Terrarium kontrollieren. Dafür musst du CSS-Selektoren nutzen.
### IDs
Füge etwas Style hinzu, um die linken und rechten Container zu layouten. Da es nur einen linken Container und nur einen rechten Container gibt, erhalten sie IDs im Markup. Um sie zu stylen, verwende `#`:
```CSS
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
```
Hier hast du diese Container mit absoluter Positionierung ganz links und rechts auf dem Bildschirm platziert und Prozentsätze für ihre Breite verwendet, damit sie auch auf kleinen mobilen Bildschirmen skalieren können.
✅ Dieser Code ist ziemlich wiederholt und daher nicht „DRY“ (Don't Repeat Yourself); kannst du eine bessere Möglichkeit finden, diese IDs zu stylen, vielleicht mit einer ID und einer Klasse? Du müsstest das Markup ändern und das CSS refaktorisieren:
```html
<div id="left-container" class="container"></div>
```
### Klassen
Im obigen Beispiel hast du zwei einzigartige Elemente auf dem Bildschirm gestylt. Wenn du möchtest, dass Styles auf viele Elemente auf dem Bildschirm angewendet werden, kannst du CSS-Klassen verwenden. Mach das, um die Pflanzen in den linken und rechten Containern zu layouten.
Beachte, dass jede Pflanze im HTML-Markup eine Kombination aus IDs und Klassen hat. Die IDs werden hier von dem JavaScript verwendet, das du später hinzufügen wirst, um die Platzierung der Terrariumpflanzen zu manipulieren. Die Klassen hingegen geben allen Pflanzen einen bestimmten Style.
```html
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
```
Füge das Folgende zu deiner `style.css`-Datei hinzu:
```CSS
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
```
Bemerkenswert in diesem Ausschnitt ist die Mischung aus relativer und absoluter Positionierung, die wir im nächsten Abschnitt behandeln werden. Schau dir an, wie die Höhen durch Prozentsätze gehandhabt werden:
Du setzt die Höhe des Pflanzenhalters auf 13 %, eine gute Zahl, um sicherzustellen, dass alle Pflanzen in jedem vertikalen Container angezeigt werden, ohne dass ein Scrollen erforderlich ist.
Du verschiebst den Pflanzenhalter nach links, damit die Pflanzen innerhalb ihres Containers besser zentriert sind. Die Bilder haben einen großen transparenten Hintergrund, um sie besser verschiebbar zu machen, und müssen nach links verschoben werden, um besser auf den Bildschirm zu passen.
Dann erhält die Pflanze selbst eine maximale Breite von 150 %. Dadurch kann sie sich verkleinern, wenn der Browser verkleinert wird. Versuche, deinen Browser zu verkleinern; die Pflanzen bleiben in ihren Containern, passen sich aber der Größe an.
Ebenfalls bemerkenswert ist die Verwendung von z-index, das die relative Höhe eines Elements steuert (damit die Pflanzen auf dem Container sitzen und im Terrarium erscheinen).
✅ Warum brauchst du sowohl einen Pflanzenhalter- als auch einen Pflanzen-CSS-Selektor?
## CSS-Positionierung
Das Mischen von Positions-Eigenschaften (es gibt statische, relative, feste, absolute und klebrige Positionen) kann etwas knifflig sein, aber wenn es richtig gemacht wird, gibt es dir gute Kontrolle über die Elemente auf deinen Seiten.
Absolut positionierte Elemente werden relativ zu ihren nächstgelegenen positionierten Vorfahren positioniert, und wenn es keine gibt, werden sie relativ zum Dokumentkörper positioniert.
Relativ positionierte Elemente werden basierend auf den CSS-Anweisungen positioniert, um ihre Platzierung von ihrer ursprünglichen Position weg anzupassen.
In unserem Beispiel ist der `plant-holder` ein relativ positioniertes Element, das innerhalb eines absolut positionierten Containers positioniert ist. Das resultierende Verhalten ist, dass die Seitenleisten-Container links und rechts fixiert sind und der Pflanzenhalter verschachtelt ist, sich innerhalb der Seitenleisten anpasst und Platz für die Pflanzen schafft, die in einer vertikalen Reihe platziert werden.
> Die `plant` selbst hat ebenfalls eine absolute Positionierung, die notwendig ist, um sie verschiebbar zu machen, wie du in der nächsten Lektion entdecken wirst.
✅ Experimentiere damit, die Positionierungsarten der Seitencontainer und des Pflanzenhalters zu wechseln. Was passiert?
## CSS-Layouts
Jetzt wirst du das Gelernte nutzen, um das Terrarium selbst zu erstellen, alles mit CSS!
Stile zuerst die `.terrarium`-div-Kinder als abgerundetes Rechteck mit CSS:
```CSS
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
Beachte die Verwendung von Prozentsätzen hier. Wenn du deinen Browser verkleinerst, kannst du sehen, wie sich das Glas ebenfalls skaliert. Beachte auch die Breiten- und Höhenprozentsätze für die Glaselemente und wie jedes Element absolut in der Mitte positioniert ist, am unteren Rand des Viewports fixiert.
Wir verwenden auch `rem` für die border-radius, eine schriftbezogene Länge. Lies mehr über diese Art der relativen Messung in der [CSS-Spezifikation](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
✅ Versuche, die Farben und die Deckkraft des Glases im Vergleich zu denen der Erde zu ändern. Was passiert? Warum?
---
## 🚀 Herausforderung
Füge einen „Blasen“-Glanz in den unteren linken Bereich des Glases hinzu, um es glasähnlicher aussehen zu lassen. Du wirst die `.jar-glossy-long` und `.jar-glossy-short` stylen, um wie ein reflektierter Glanz auszusehen. So würde es aussehen:
![fertiges Terrarium](../../../../3-terrarium/2-intro-to-css/images/terrarium-final.png)
Um das Quiz nach der Vorlesung abzuschließen, gehe durch dieses Lernmodul: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
## Überprüfung & Selbststudium
CSS scheint täuschend einfach zu sein, aber es gibt viele Herausforderungen, wenn man versucht, eine App perfekt für alle Browser und Bildschirmgrößen zu stylen. CSS-Grid und Flexbox sind Werkzeuge, die entwickelt wurden, um die Aufgabe etwas strukturierter und zuverlässiger zu machen. Lerne diese Werkzeuge kennen, indem du [Flexbox Froggy](https://flexboxfroggy.com/) und [Grid Garden](https://codepip.com/games/grid-garden/) spielst.
## Aufgabe
[CSS-Refaktorisierung](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/3-terrarium/2-intro-to-css/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9d4d75af51aaccfe9af778f792c62919",
"translation_date": "2025-08-24T12:10:29+00:00",
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
"language_code": "de"
}
-->
# CSS-Refaktorierung
## Anweisungen
Gestalte das Terrarium neu mit entweder Flexbox oder CSS Grid und mache Screenshots, um zu zeigen, dass du es in mehreren Browsern getestet hast. Es könnte notwendig sein, das Markup zu ändern, also erstelle eine neue Version der App mit der Kunst, die für deine Refaktorierung vorgesehen ist. Mach dir keine Sorgen darüber, die Elemente verschiebbar zu machen; refaktoriere vorerst nur das HTML und CSS.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ---------------------------------------------------------------- | ----------------------------- | ----------------------------------- |
| | Ein vollständig neu gestaltetes Terrarium mit Flexbox oder CSS Grid präsentieren | Einige Elemente neu gestalten | Das Terrarium überhaupt nicht neu gestalten |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

231
translations/de/3-terrarium/3-intro-to-DOM-and-closures/README.md Normal file
View File

@@ -0,0 +1,231 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "30f8903a1f290e3d438dc2c70fe60259",
"translation_date": "2025-08-24T12:04:01+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
"language_code": "de"
}
-->
# Terrarium-Projekt Teil 3: DOM-Manipulation und eine Closure
![DOM und eine Closure](../../../../sketchnotes/webdev101-js.png)
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
### Einführung
Die Manipulation des DOM, oder des "Document Object Model", ist ein zentraler Aspekt der Webentwicklung. Laut [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) ist "Das Document Object Model (DOM) die Datenrepräsentation der Objekte, die die Struktur und den Inhalt eines Dokuments im Web ausmachen." Die Herausforderungen rund um die DOM-Manipulation im Web haben oft dazu geführt, dass JavaScript-Frameworks anstelle von reinem JavaScript verwendet werden, um das DOM zu verwalten. Aber wir werden es selbst schaffen!
Darüber hinaus wird in dieser Lektion die Idee einer [JavaScript-Closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures) eingeführt, die man sich als eine Funktion vorstellen kann, die von einer anderen Funktion umschlossen ist, sodass die innere Funktion Zugriff auf den Scope der äußeren Funktion hat.
> JavaScript-Closures sind ein umfangreiches und komplexes Thema. Diese Lektion behandelt die grundlegende Idee, dass im Code dieses Terrariums eine Closure vorkommt: eine innere Funktion und eine äußere Funktion, die so konstruiert sind, dass die innere Funktion Zugriff auf den Scope der äußeren Funktion hat. Für weitere Informationen darüber, wie dies funktioniert, besuchen Sie bitte die [ausführliche Dokumentation](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
Wir werden eine Closure verwenden, um das DOM zu manipulieren.
Stellen Sie sich das DOM als einen Baum vor, der alle Möglichkeiten darstellt, wie ein Dokument einer Webseite manipuliert werden kann. Verschiedene APIs (Application Program Interfaces) wurden entwickelt, damit Programmierer mit ihrer bevorzugten Programmiersprache auf das DOM zugreifen und es bearbeiten, ändern, umorganisieren und verwalten können.
![Darstellung des DOM-Baums](../../../../3-terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png)
> Eine Darstellung des DOM und des HTML-Markups, das darauf verweist. Von [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
In dieser Lektion werden wir unser interaktives Terrarium-Projekt abschließen, indem wir das JavaScript erstellen, das es einem Benutzer ermöglicht, die Pflanzen auf der Seite zu manipulieren.
### Voraussetzung
Sie sollten das HTML und CSS für Ihr Terrarium bereits erstellt haben. Am Ende dieser Lektion werden Sie in der Lage sein, die Pflanzen durch Ziehen in und aus dem Terrarium zu bewegen.
### Aufgabe
Erstellen Sie in Ihrem Terrarium-Ordner eine neue Datei namens `script.js`. Importieren Sie diese Datei im `<head>`-Abschnitt:
```html
<script src="./script.js" defer></script>
```
> Hinweis: Verwenden Sie `defer`, wenn Sie eine externe JavaScript-Datei in die HTML-Datei importieren, damit das JavaScript erst ausgeführt wird, nachdem die HTML-Datei vollständig geladen wurde. Sie könnten auch das `async`-Attribut verwenden, das es dem Skript ermöglicht, während des Parsens der HTML-Datei ausgeführt zu werden. In unserem Fall ist es jedoch wichtig, dass die HTML-Elemente vollständig verfügbar sind, bevor wir das Drag-Skript ausführen.
---
## Die DOM-Elemente
Das Erste, was Sie tun müssen, ist, Referenzen zu den Elementen zu erstellen, die Sie im DOM manipulieren möchten. In unserem Fall sind dies die 14 Pflanzen, die derzeit in den Seitenleisten warten.
### Aufgabe
```html
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));
```
Was passiert hier? Sie referenzieren das Dokument und durchsuchen dessen DOM, um ein Element mit einer bestimmten Id zu finden. Erinnern Sie sich an die erste Lektion über HTML, in der Sie jedem Pflanzenbild eine individuelle Id gegeben haben (`id="plant1"`)? Jetzt werden Sie diese Arbeit nutzen. Nachdem Sie jedes Element identifiziert haben, übergeben Sie dieses Element an eine Funktion namens `dragElement`, die Sie gleich erstellen werden. Somit ist das Element im HTML jetzt für das Ziehen aktiviert oder wird es bald sein.
✅ Warum referenzieren wir Elemente nach Id? Warum nicht nach ihrer CSS-Klasse? Sie könnten auf die vorherige Lektion über CSS zurückgreifen, um diese Frage zu beantworten.
---
## Die Closure
Jetzt sind Sie bereit, die `dragElement`-Closure zu erstellen, die eine äußere Funktion ist, die eine innere Funktion oder mehrere innere Funktionen umschließt (in unserem Fall werden es drei sein).
Closures sind nützlich, wenn eine oder mehrere Funktionen Zugriff auf den Scope einer äußeren Funktion benötigen. Hier ist ein Beispiel:
```javascript
function displayCandy(){
let candy = ['jellybeans'];
function addCandy(candyType) {
candy.push(candyType)
}
addCandy('gumdrops');
}
displayCandy();
console.log(candy)
```
In diesem Beispiel umgibt die Funktion `displayCandy` eine Funktion, die eine neue Süßigkeit in ein Array einfügt, das bereits in der Funktion existiert. Wenn Sie diesen Code ausführen würden, wäre das `candy`-Array undefiniert, da es eine lokale Variable ist (lokal zur Closure).
✅ Wie können Sie das `candy`-Array zugänglich machen? Versuchen Sie, es außerhalb der Closure zu verschieben. Auf diese Weise wird das Array global, anstatt nur im lokalen Scope der Closure verfügbar zu sein.
### Aufgabe
Erstellen Sie unter den Elementdeklarationen in `script.js` eine Funktion:
```javascript
function dragElement(terrariumElement) {
//set 4 positions for positioning on the screen
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
terrariumElement.onpointerdown = pointerDrag;
}
```
`dragElement` erhält sein `terrariumElement`-Objekt aus den Deklarationen am Anfang des Skripts. Dann setzen Sie einige lokale Positionen auf `0` für das Objekt, das in die Funktion übergeben wird. Dies sind die lokalen Variablen, die für jedes Element manipuliert werden, während Sie die Drag-and-Drop-Funktionalität innerhalb der Closure zu jedem Element hinzufügen. Das Terrarium wird von diesen gezogenen Elementen bevölkert, sodass die Anwendung den Überblick darüber behalten muss, wo sie platziert werden.
Darüber hinaus wird das `terrariumElement`, das an diese Funktion übergeben wird, einem `pointerdown`-Event zugewiesen, das Teil der [Web-APIs](https://developer.mozilla.org/docs/Web/API) ist, die für die DOM-Verwaltung entwickelt wurden. `onpointerdown` wird ausgelöst, wenn eine Taste gedrückt wird oder in unserem Fall ein ziehbares Element berührt wird. Dieser Event-Handler funktioniert sowohl auf [Web- als auch auf mobilen Browsern](https://caniuse.com/?search=onpointerdown), mit einigen Ausnahmen.
✅ Der [Event-Handler `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) hat eine viel größere Unterstützung über verschiedene Browser hinweg; warum würden Sie ihn hier nicht verwenden? Denken Sie über die genaue Art der Bildschirminteraktion nach, die Sie hier erstellen möchten.
---
## Die Pointerdrag-Funktion
Das `terrariumElement` ist bereit, herumgezogen zu werden; wenn das `onpointerdown`-Event ausgelöst wird, wird die Funktion `pointerDrag` aufgerufen. Fügen Sie diese Funktion direkt unter dieser Zeile hinzu: `terrariumElement.onpointerdown = pointerDrag;`:
### Aufgabe
```javascript
function pointerDrag(e) {
e.preventDefault();
console.log(e);
pos3 = e.clientX;
pos4 = e.clientY;
}
```
Es passieren mehrere Dinge. Zunächst verhindern Sie die Standardereignisse, die normalerweise bei `pointerdown` auftreten, indem Sie `e.preventDefault();` verwenden. Auf diese Weise haben Sie mehr Kontrolle über das Verhalten der Benutzeroberfläche.
> Kehren Sie zu dieser Zeile zurück, wenn Sie die Skriptdatei vollständig erstellt haben, und versuchen Sie es ohne `e.preventDefault()` - was passiert?
Zweitens öffnen Sie `index.html` in einem Browserfenster und inspizieren die Benutzeroberfläche. Wenn Sie auf eine Pflanze klicken, können Sie sehen, wie das 'e'-Ereignis erfasst wird. Untersuchen Sie das Ereignis, um zu sehen, wie viele Informationen durch ein einziges `pointerdown`-Ereignis gesammelt werden!
Als Nächstes beachten Sie, wie die lokalen Variablen `pos3` und `pos4` auf `e.clientX` gesetzt werden. Sie können die `e`-Werte im Inspektionsfenster finden. Diese Werte erfassen die x- und y-Koordinaten der Pflanze in dem Moment, in dem Sie darauf klicken oder sie berühren. Sie benötigen eine feingranulare Kontrolle über das Verhalten der Pflanzen, während Sie sie anklicken und ziehen, daher behalten Sie ihre Koordinaten im Auge.
✅ Wird es klarer, warum diese gesamte App mit einer großen Closure erstellt wurde? Wenn nicht, wie würden Sie den Scope für jede der 14 ziehbaren Pflanzen aufrechterhalten?
Vervollständigen Sie die Anfangsfunktion, indem Sie zwei weitere Pointer-Ereignis-Manipulationen unter `pos4 = e.clientY` hinzufügen:
```html
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
```
Jetzt geben Sie an, dass Sie möchten, dass die Pflanze zusammen mit dem Zeiger bewegt wird, während Sie sie ziehen, und dass die Ziehbewegung aufhört, wenn Sie die Pflanze abwählen. `onpointermove` und `onpointerup` sind alle Teil derselben API wie `onpointerdown`. Die Benutzeroberfläche wird jetzt Fehler werfen, da Sie die Funktionen `elementDrag` und `stopElementDrag` noch nicht definiert haben. Erstellen Sie diese als Nächstes.
## Die Funktionen elementDrag und stopElementDrag
Sie werden Ihre Closure vervollständigen, indem Sie zwei weitere interne Funktionen hinzufügen, die steuern, was passiert, wenn Sie eine Pflanze ziehen und das Ziehen beenden. Das gewünschte Verhalten ist, dass Sie jederzeit jede Pflanze ziehen und sie überall auf dem Bildschirm platzieren können. Diese Benutzeroberfläche ist ziemlich flexibel (es gibt beispielsweise keine Drop-Zone), sodass Sie Ihr Terrarium genau so gestalten können, wie Sie möchten, indem Sie Pflanzen hinzufügen, entfernen und neu positionieren.
### Aufgabe
Fügen Sie die Funktion `elementDrag` direkt nach der schließenden geschweiften Klammer von `pointerDrag` hinzu:
```javascript
function elementDrag(e) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
console.log(pos1, pos2, pos3, pos4);
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}
```
In dieser Funktion bearbeiten Sie viele der Anfangspositionen 1-4, die Sie als lokale Variablen in der äußeren Funktion festgelegt haben. Was passiert hier?
Während Sie ziehen, weisen Sie `pos1` neu zu, indem Sie es gleich `pos3` setzen (das Sie zuvor als `e.clientX` festgelegt haben), minus dem aktuellen Wert von `e.clientX`. Eine ähnliche Operation führen Sie mit `pos2` durch. Dann setzen Sie `pos3` und `pos4` auf die neuen X- und Y-Koordinaten des Elements zurück. Sie können diese Änderungen in der Konsole beobachten, während Sie ziehen. Anschließend manipulieren Sie den CSS-Stil der Pflanze, um ihre neue Position basierend auf den neuen Positionen von `pos1` und `pos2` festzulegen, indem Sie die oberen und linken X- und Y-Koordinaten der Pflanze berechnen, basierend auf dem Vergleich ihres Offsets mit diesen neuen Positionen.
> `offsetTop` und `offsetLeft` sind CSS-Eigenschaften, die die Position eines Elements basierend auf der seines Elternteils festlegen; das Elternteil kann jedes Element sein, das nicht als `static` positioniert ist.
All diese Neuberechnungen der Position ermöglichen es Ihnen, das Verhalten des Terrariums und seiner Pflanzen fein abzustimmen.
### Aufgabe
Die letzte Aufgabe, um die Benutzeroberfläche zu vervollständigen, besteht darin, die Funktion `stopElementDrag` nach der schließenden geschweiften Klammer von `elementDrag` hinzuzufügen:
```javascript
function stopElementDrag() {
document.onpointerup = null;
document.onpointermove = null;
}
```
Diese kleine Funktion setzt die Ereignisse `onpointerup` und `onpointermove` zurück, sodass Sie entweder den Fortschritt Ihrer Pflanze neu starten können, indem Sie sie erneut ziehen, oder beginnen können, eine neue Pflanze zu ziehen.
✅ Was passiert, wenn Sie diese Ereignisse nicht auf null setzen?
Jetzt haben Sie Ihr Projekt abgeschlossen!
🥇Herzlichen Glückwunsch! Sie haben Ihr wunderschönes Terrarium fertiggestellt. ![fertiges Terrarium](../../../../3-terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png)
---
## 🚀 Herausforderung
Fügen Sie Ihrer Closure einen neuen Event-Handler hinzu, um den Pflanzen zusätzliche Funktionen zu geben; zum Beispiel, doppelklicken Sie auf eine Pflanze, um sie in den Vordergrund zu bringen. Werden Sie kreativ!
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
## Überprüfung & Selbststudium
Obwohl das Ziehen von Elementen über den Bildschirm trivial erscheint, gibt es viele Möglichkeiten, dies zu tun, und viele Fallstricke, abhängig von dem gewünschten Effekt. Tatsächlich gibt es eine gesamte [Drag-and-Drop-API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), die Sie ausprobieren können. Wir haben sie in diesem Modul nicht verwendet, da der gewünschte Effekt etwas anders war, aber probieren Sie diese API in Ihrem eigenen Projekt aus und sehen Sie, was Sie erreichen können.
Weitere Informationen zu Pointer-Ereignissen finden Sie in den [W3C-Dokumenten](https://www.w3.org/TR/pointerevents1/) und in den [MDN-Web-Dokumenten](https://developer.mozilla.org/docs/Web/API/Pointer_events).
Überprüfen Sie immer die Browser-Kompatibilität mit [CanIUse.com](https://caniuse.com/).
## Aufgabe
[Arbeiten Sie ein wenig mehr mit dem DOM](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/3-terrarium/3-intro-to-DOM-and-closures/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "22fb6c3cb570c47f1ac65048393941fa",
"translation_date": "2025-08-24T12:07:00+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
"language_code": "de"
}
-->
# Arbeite ein wenig mehr mit dem DOM
## Anweisungen
Erforsche den DOM ein wenig mehr, indem du ein DOM-Element „adoptierst“. Besuche die [Liste der DOM-Schnittstellen](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) auf MDN und wähle eine aus. Finde ein Beispiel, wie sie auf einer Website im Web verwendet wird, und schreibe eine Erklärung, wie sie genutzt wird.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
| | Absatz mit Erklärung und Beispiel vorhanden | Absatz mit Erklärung, aber ohne Beispiel | Keine Erklärung vorhanden |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

43
translations/de/3-terrarium/README.md Normal file
View File

@@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
"translation_date": "2025-08-24T11:58:42+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "de"
}
-->
# Mein Terrarium: Ein Projekt, um HTML, CSS und DOM-Manipulation mit JavaScript zu lernen 🌵🌱
Ein kleines Drag-and-Drop-Code-Meditationsprojekt. Mit ein wenig HTML, JS und CSS kannst du eine Weboberfläche erstellen, sie gestalten und sogar mehrere Interaktionen deiner Wahl hinzufügen.
![mein terrarium](../../../3-terrarium/images/screenshot_gray.png)
# Lektionen
1. [Einführung in HTML](./1-intro-to-html/README.md)
2. [Einführung in CSS](./2-intro-to-css/README.md)
3. [Einführung in DOM und JS Closures](./3-intro-to-DOM-and-closures/README.md)
## Credits
Geschrieben mit ♥️ von [Jen Looper](https://www.twitter.com/jenlooper)
Das Terrarium, das mit CSS erstellt wurde, wurde von Jakub Mandras Glasgefäß [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) inspiriert.
Die Illustrationen wurden von [Jen Looper](http://jenlooper.com) mit Hilfe von Procreate handgezeichnet.
## Veröffentliche dein Terrarium
Du kannst dein Terrarium im Web veröffentlichen, indem du Azure Static Web Apps nutzt.
1. Forke dieses Repository
2. Drücke diesen Button
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Gehe den Assistenten durch, um deine App zu erstellen. Stelle sicher, dass du das App-Root entweder auf `/solution` oder das Root-Verzeichnis deines Codes setzt. Diese App hat keine API, also brauchst du dir darüber keine Gedanken zu machen. Ein GitHub-Ordner wird in deinem geforkten Repository erstellt, der den Build-Services von Azure Static Web Apps hilft, deine App zu erstellen und unter einer neuen URL zu veröffentlichen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

37
translations/de/3-terrarium/solution/README.md Normal file
View File

@@ -0,0 +1,37 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "6329fbe8bd936068debd78cca6f09c0a",
"translation_date": "2025-08-24T12:11:12+00:00",
"source_file": "3-terrarium/solution/README.md",
"language_code": "de"
}
-->
# Mein Terrarium: Ein Projekt, um HTML, CSS und DOM-Manipulation mit JavaScript zu lernen 🌵🌱
Ein kleines Drag-and-Drop-Code-Meditationsprojekt. Mit ein wenig HTML, JS und CSS kannst du eine Weboberfläche erstellen, sie gestalten und Interaktionen hinzufügen.
![mein Terrarium](../../../../3-terrarium/images/screenshot_gray.png)
## Credits
Geschrieben mit ♥️ von [Jen Looper](https://www.twitter.com/jenlooper)
Das Terrarium, das mit CSS erstellt wurde, wurde von Jakub Mandras Glasgefäß [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) inspiriert.
Die Illustrationen wurden von [Jen Looper](http://jenlooper.com) mit Procreate handgezeichnet.
## Dein Terrarium bereitstellen
Du kannst dein Terrarium mit Azure Static Web Apps im Web bereitstellen oder veröffentlichen.
1. Forke dieses Repository
2. Drücke diesen Button
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Gehe den Assistenten durch, um deine App zu erstellen. Stelle sicher, dass du das App-Root entweder auf `/solution` oder das Root-Verzeichnis deines Codes setzt. Diese App hat keine API, also brauchst du dir darüber keine Gedanken zu machen. Ein .github-Ordner wird in deinem geforkten Repository erstellt, der dem Build-Service von Azure Static Web Apps hilft, deine App zu erstellen und unter einer neuen URL zu veröffentlichen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

42
translations/de/4-typing-game/README.md Normal file
View File

@@ -0,0 +1,42 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "957547b822c40042e07d591c4fbfde4f",
"translation_date": "2025-08-24T13:49:41+00:00",
"source_file": "4-typing-game/README.md",
"language_code": "de"
}
-->
# Ereignisgesteuerte Programmierung - Erstelle ein Tipp-Spiel
## Einführung
Tippen ist eine der am meisten unterschätzten Fähigkeiten eines Entwicklers. Die Fähigkeit, Gedanken schnell aus deinem Kopf in deinen Editor zu übertragen, ermöglicht es, dass die Kreativität frei fließen kann. Eine der besten Möglichkeiten zu lernen, ist ein Spiel zu spielen!
> Also, lass uns ein Tipp-Spiel erstellen!
Du wirst die JavaScript-, HTML- und CSS-Kenntnisse, die du bisher aufgebaut hast, nutzen, um ein Tipp-Spiel zu erstellen. Das Spiel wird dem Spieler ein zufälliges Zitat präsentieren (wir verwenden [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)-Zitate) und messen, wie lange der Spieler braucht, um es genau abzutippen. Du wirst die JavaScript-, HTML- und CSS-Kenntnisse, die du bisher aufgebaut hast, nutzen, um ein Tipp-Spiel zu erstellen.
![demo](../../../4-typing-game/images/demo.gif)
## Voraussetzungen
Diese Lektion setzt voraus, dass du mit den folgenden Konzepten vertraut bist:
- Erstellen von Texteingaben und Button-Steuerelementen
- CSS und das Festlegen von Stilen mithilfe von Klassen
- Grundlagen von JavaScript
- Erstellen eines Arrays
- Erstellen einer Zufallszahl
- Abrufen der aktuellen Zeit
## Lektion
[Erstellen eines Tipp-Spiels mithilfe ereignisgesteuerter Programmierung](./typing-game/README.md)
## Danksagung
Geschrieben mit ♥️ von [Christopher Harrison](http://www.twitter.com/geektrainer)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

13
translations/de/4-typing-game/solution/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T13:50:27+00:00",
"source_file": "4-typing-game/solution/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

351
translations/de/4-typing-game/typing-game/README.md Normal file
View File

@@ -0,0 +1,351 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e982871b8388c59c22a41b73b5fca70f",
"translation_date": "2025-08-24T13:51:57+00:00",
"source_file": "4-typing-game/typing-game/README.md",
"language_code": "de"
}
-->
# Ein Spiel mit Ereignissen erstellen
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21)
## Ereignisgesteuerte Programmierung
Beim Erstellen einer browserbasierten Anwendung stellen wir eine grafische Benutzeroberfläche (GUI) bereit, die der Benutzer verwenden kann, um mit dem zu interagieren, was wir gebaut haben. Die häufigste Art, mit dem Browser zu interagieren, ist durch Klicken und Tippen auf verschiedene Elemente. Die Herausforderung, der wir als Entwickler gegenüberstehen, ist, dass wir nicht wissen, wann der Benutzer diese Aktionen ausführen wird!
[Ereignisgesteuerte Programmierung](https://de.wikipedia.org/wiki/Ereignisgesteuerte_Programmierung) ist der Name für die Art der Programmierung, die wir benötigen, um unsere GUI zu erstellen. Wenn wir diesen Begriff ein wenig aufschlüsseln, sehen wir, dass das Kernwort hier **Ereignis** ist. [Ereignis](https://www.merriam-webster.com/dictionary/event) wird laut Merriam-Webster definiert als "etwas, das passiert". Das beschreibt unsere Situation perfekt. Wir wissen, dass etwas passieren wird, für das wir Code ausführen möchten, aber wir wissen nicht, wann es stattfinden wird.
Die Art und Weise, wie wir einen Abschnitt von Code markieren, den wir ausführen möchten, besteht darin, eine Funktion zu erstellen. Wenn wir an [prozedurale Programmierung](https://de.wikipedia.org/wiki/Prozedurale_Programmierung) denken, werden Funktionen in einer bestimmten Reihenfolge aufgerufen. Dasselbe gilt auch für ereignisgesteuerte Programmierung. Der Unterschied liegt darin, **wie** die Funktionen aufgerufen werden.
Um Ereignisse (Button-Klicks, Eingaben usw.) zu behandeln, registrieren wir **Ereignis-Listener**. Ein Ereignis-Listener ist eine Funktion, die auf ein Ereignis wartet und daraufhin ausgeführt wird. Ereignis-Listener können die Benutzeroberfläche aktualisieren, Serveraufrufe durchführen oder alles andere erledigen, was als Reaktion auf die Aktion des Benutzers erforderlich ist. Wir fügen einen Ereignis-Listener hinzu, indem wir [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) verwenden und eine Funktion bereitstellen, die ausgeführt werden soll.
> **NOTE:** Es ist erwähnenswert, dass es zahlreiche Möglichkeiten gibt, Ereignis-Listener zu erstellen. Sie können anonyme Funktionen verwenden oder benannte Funktionen erstellen. Sie können verschiedene Abkürzungen nutzen, wie das Setzen der `click`-Eigenschaft oder die Verwendung von `addEventListener`. In unserer Übung konzentrieren wir uns auf `addEventListener` und anonyme Funktionen, da dies wahrscheinlich die am häufigsten verwendete Technik von Webentwicklern ist. Es ist auch die flexibelste, da `addEventListener` für alle Ereignisse funktioniert und der Ereignisname als Parameter übergeben werden kann.
### Häufige Ereignisse
Es gibt [Dutzende von Ereignissen](https://developer.mozilla.org/docs/Web/Events), die Sie beim Erstellen einer Anwendung überwachen können. Grundsätzlich löst alles, was ein Benutzer auf einer Seite tut, ein Ereignis aus, was Ihnen viel Macht gibt, um sicherzustellen, dass der Benutzer die gewünschte Erfahrung erhält. Glücklicherweise benötigen Sie normalerweise nur eine kleine Auswahl an Ereignissen. Hier sind einige häufige (einschließlich der beiden, die wir beim Erstellen unseres Spiels verwenden werden):
- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Der Benutzer hat auf etwas geklickt, typischerweise auf einen Button oder Hyperlink
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Der Benutzer hat die rechte Maustaste geklickt
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Der Benutzer hat Text markiert
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Der Benutzer hat Text eingegeben
## Das Spiel erstellen
Wir werden ein Spiel erstellen, um zu erkunden, wie Ereignisse in JavaScript funktionieren. Unser Spiel wird die Tippfähigkeiten eines Spielers testen, eine der am meisten unterschätzten Fähigkeiten, die alle Entwickler haben sollten. Wir sollten alle unsere Tippfähigkeiten üben! Der allgemeine Ablauf des Spiels sieht folgendermaßen aus:
- Der Spieler klickt auf den Start-Button und erhält ein Zitat, das er tippen soll
- Der Spieler tippt das Zitat so schnell wie möglich in ein Textfeld
- Jedes Wort wird hervorgehoben, sobald es abgeschlossen ist
- Wenn der Spieler einen Tippfehler macht, wird das Textfeld rot
- Wenn der Spieler das Zitat abschließt, wird eine Erfolgsmeldung mit der verstrichenen Zeit angezeigt
Lassen Sie uns unser Spiel bauen und dabei etwas über Ereignisse lernen!
### Dateistruktur
Wir benötigen insgesamt drei Dateien: **index.html**, **script.js** und **style.css**. Lassen Sie uns diese einrichten, um uns die Arbeit zu erleichtern.
- Erstellen Sie einen neuen Ordner für Ihre Arbeit, indem Sie ein Konsolen- oder Terminalfenster öffnen und den folgenden Befehl ausführen:
```bash
# Linux or macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
- Öffnen Sie Visual Studio Code
```bash
code .
```
- Fügen Sie dem Ordner in Visual Studio Code drei Dateien mit den folgenden Namen hinzu:
- index.html
- script.js
- style.css
## Die Benutzeroberfläche erstellen
Wenn wir die Anforderungen untersuchen, wissen wir, dass wir eine Handvoll Elemente auf unserer HTML-Seite benötigen. Das ist ein bisschen wie ein Rezept, bei dem wir einige Zutaten brauchen:
- Einen Bereich, um das Zitat anzuzeigen, das der Benutzer tippen soll
- Einen Bereich, um Nachrichten wie eine Erfolgsmeldung anzuzeigen
- Ein Textfeld zum Tippen
- Einen Start-Button
Jedes dieser Elemente benötigt IDs, damit wir mit ihnen in unserem JavaScript arbeiten können. Wir werden auch Verweise auf die CSS- und JavaScript-Dateien hinzufügen, die wir erstellen werden.
Erstellen Sie eine neue Datei namens **index.html**. Fügen Sie den folgenden HTML-Code hinzu:
```html
<!-- inside index.html -->
<html>
<head>
<title>Typing game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Typing game!</h1>
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
<p id="quote"></p> <!-- This will display our quote -->
<p id="message"></p> <!-- This will display any status messages -->
<div>
<input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
<button type="button" id="start">Start</button> <!-- To start the game -->
</div>
<script src="script.js"></script>
</body>
</html>
```
### Die Anwendung starten
Es ist immer am besten, iterativ zu entwickeln, um zu sehen, wie die Dinge aussehen. Lassen Sie uns unsere Anwendung starten. Es gibt eine wunderbare Erweiterung für Visual Studio Code namens [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), die Ihre Anwendung lokal hostet und den Browser jedes Mal aktualisiert, wenn Sie speichern.
- Installieren Sie [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), indem Sie dem Link folgen und auf **Installieren** klicken
- Der Browser fordert Sie auf, Visual Studio Code zu öffnen, und Visual Studio Code fordert Sie auf, die Installation durchzuführen
- Starten Sie Visual Studio Code neu, falls erforderlich
- Sobald die Installation abgeschlossen ist, klicken Sie in Visual Studio Code auf Strg-Shift-P (oder Cmd-Shift-P), um die Befehls-Palette zu öffnen
- Geben Sie **Live Server: Open with Live Server** ein
- Live Server beginnt, Ihre Anwendung zu hosten
- Öffnen Sie einen Browser und navigieren Sie zu **https://localhost:5500**
- Sie sollten jetzt die Seite sehen, die Sie erstellt haben!
Lassen Sie uns etwas Funktionalität hinzufügen.
## CSS hinzufügen
Nachdem wir unser HTML erstellt haben, fügen wir das CSS für die grundlegende Gestaltung hinzu. Wir müssen das Wort hervorheben, das der Spieler tippen soll, und das Textfeld einfärben, wenn das, was er getippt hat, falsch ist. Wir werden dies mit zwei Klassen tun.
Erstellen Sie eine neue Datei namens **style.css** und fügen Sie den folgenden Syntax hinzu.
```css
/* inside style.css */
.highlight {
background-color: yellow;
}
.error {
background-color: lightcoral;
border: red;
}
```
✅ Wenn es um CSS geht, können Sie Ihre Seite so gestalten, wie Sie möchten. Nehmen Sie sich etwas Zeit, um die Seite ansprechender zu gestalten:
- Wählen Sie eine andere Schriftart
- Färben Sie die Überschriften ein
- Ändern Sie die Größe der Elemente
## JavaScript
Nachdem wir unsere Benutzeroberfläche erstellt haben, konzentrieren wir uns nun auf das JavaScript, das die Logik bereitstellt. Wir werden dies in eine Handvoll Schritte unterteilen:
- [Die Konstanten erstellen](../../../../4-typing-game/typing-game)
- [Ereignis-Listener für den Spielstart](../../../../4-typing-game/typing-game)
- [Ereignis-Listener für das Tippen](../../../../4-typing-game/typing-game)
Erstellen Sie zunächst eine neue Datei namens **script.js**.
### Die Konstanten hinzufügen
Wir benötigen einige Elemente, um uns das Programmieren zu erleichtern. Wieder ähnlich wie ein Rezept, hier ist, was wir brauchen:
- Ein Array mit der Liste aller Zitate
- Ein leeres Array, um alle Wörter des aktuellen Zitats zu speichern
- Einen Speicherplatz für den Index des Wortes, das der Spieler gerade tippt
- Die Zeit, zu der der Spieler auf Start geklickt hat
Wir möchten auch Verweise auf die UI-Elemente:
- Das Textfeld (**typed-value**)
- Die Zitat-Anzeige (**quote**)
- Die Nachricht (**message**)
```javascript
// inside script.js
// all of our quotes
const quotes = [
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
'There is nothing more deceptive than an obvious fact.',
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
'I never make exceptions. An exception disproves the rule.',
'What one man can invent another can discover.',
'Nothing clears up a case so much as stating it to another person.',
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
let words = [];
let wordIndex = 0;
// the starting time
let startTime = Date.now();
// page elements
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');
```
✅ Fügen Sie Ihrem Spiel weitere Zitate hinzu
> **NOTE:** Wir können die Elemente jederzeit im Code abrufen, indem wir `document.getElementById` verwenden. Da wir diese Elemente regelmäßig referenzieren werden, vermeiden wir Tippfehler mit Zeichenkettenliteralen, indem wir Konstanten verwenden. Frameworks wie [Vue.js](https://vuejs.org/) oder [React](https://reactjs.org/) können Ihnen helfen, Ihre zentrale Codeverwaltung besser zu organisieren.
Nehmen Sie sich eine Minute Zeit, um ein Video über die Verwendung von `const`, `let` und `var` anzusehen.
[![Arten von Variablen](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Arten von Variablen")
> 🎥 Klicken Sie auf das Bild oben, um ein Video über Variablen anzusehen.
### Start-Logik hinzufügen
Um das Spiel zu beginnen, klickt der Spieler auf Start. Natürlich wissen wir nicht, wann er auf Start klicken wird. Hier kommt ein [Ereignis-Listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ins Spiel. Ein Ereignis-Listener ermöglicht es uns, auf etwas zu warten (ein Ereignis) und Code als Reaktion darauf auszuführen. In unserem Fall möchten wir Code ausführen, wenn der Benutzer auf Start klickt.
Wenn der Benutzer auf **Start** klickt, müssen wir ein Zitat auswählen, die Benutzeroberfläche einrichten und die Verfolgung des aktuellen Wortes und der Zeit einrichten. Unten finden Sie das JavaScript, das Sie hinzufügen müssen; wir besprechen es direkt nach dem Skriptblock.
```javascript
// at the end of script.js
document.getElementById('start').addEventListener('click', () => {
// get a quote
const quoteIndex = Math.floor(Math.random() * quotes.length);
const quote = quotes[quoteIndex];
// Put the quote into an array of words
words = quote.split(' ');
// reset the word index for tracking
wordIndex = 0;
// UI updates
// Create an array of span elements so we can set a class
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
// Convert into string and set as innerHTML on quote display
quoteElement.innerHTML = spanWords.join('');
// Highlight the first word
quoteElement.childNodes[0].className = 'highlight';
// Clear any prior messages
messageElement.innerText = '';
// Setup the textbox
// Clear the textbox
typedValueElement.value = '';
// set focus
typedValueElement.focus();
// set the event handler
// Start the timer
startTime = new Date().getTime();
});
```
Lassen Sie uns den Code aufschlüsseln!
- Einrichtung der Wortverfolgung
- Mit [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) und [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) können wir zufällig ein Zitat aus dem `quotes`-Array auswählen
- Wir konvertieren das `quote` in ein Array von `words`, damit wir das Wort verfolgen können, das der Spieler gerade tippt
- `wordIndex` wird auf 0 gesetzt, da der Spieler mit dem ersten Wort beginnt
- Einrichtung der Benutzeroberfläche
- Erstellen eines Arrays von `spanWords`, das jedes Wort in einem `span`-Element enthält
- Dadurch können wir das Wort auf der Anzeige hervorheben
- `join` des Arrays, um eine Zeichenkette zu erstellen, die wir verwenden können, um das `innerHTML` auf `quoteElement` zu aktualisieren
- Dies zeigt dem Spieler das Zitat an
- Setzen der `className` des ersten `span`-Elements auf `highlight`, um es gelb hervorzuheben
- Bereinigen des `messageElement`, indem `innerText` auf `''` gesetzt wird
- Einrichtung des Textfelds
- Löschen des aktuellen `value` auf `typedValueElement`
- Setzen des `focus` auf `typedValueElement`
- Starten des Timers durch Aufrufen von `getTime`
### Tipp-Logik hinzufügen
Während der Spieler tippt, wird ein `input`-Ereignis ausgelöst. Dieser Ereignis-Listener überprüft, ob der Spieler das Wort korrekt tippt, und behandelt den aktuellen Status des Spiels. Kehren Sie zu **script.js** zurück und fügen Sie den folgenden Code am Ende hinzu. Wir werden ihn danach aufschlüsseln.
```javascript
// at the end of script.js
typedValueElement.addEventListener('input', () => {
// Get the current word
const currentWord = words[wordIndex];
// get the current value
const typedValue = typedValueElement.value;
if (typedValue === currentWord && wordIndex === words.length - 1) {
// end of sentence
// Display success
const elapsedTime = new Date().getTime() - startTime;
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
messageElement.innerText = message;
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
// end of word
// clear the typedValueElement for the new word
typedValueElement.value = '';
// move to the next word
wordIndex++;
// reset the class name for all elements in quote
for (const wordElement of quoteElement.childNodes) {
wordElement.className = '';
}
// highlight the new word
quoteElement.childNodes[wordIndex].className = 'highlight';
} else if (currentWord.startsWith(typedValue)) {
// currently correct
// highlight the next word
typedValueElement.className = '';
} else {
// error state
typedValueElement.className = 'error';
}
});
```
Lassen Sie uns den Code aufschlüsseln! Wir beginnen damit, das aktuelle Wort und den Wert zu erfassen, den der Spieler bisher getippt hat. Dann haben wir eine Wasserfall-Logik, bei der wir überprüfen, ob das Zitat abgeschlossen ist, das Wort abgeschlossen ist, das Wort korrekt ist oder (schließlich), ob ein Fehler vorliegt.
- Das Zitat ist abgeschlossen, angezeigt durch `typedValue`, das gleich `currentWord` ist, und `wordIndex`, das gleich der Länge von `words` minus eins ist
- Berechnen von `elapsedTime`, indem `startTime` von der aktuellen Zeit subtrahiert wird
- Teilen von `elapsedTime` durch 1.000, um von Millisekunden in Sekunden umzuwandeln
- Anzeigen einer Erfolgsmeldung
- Das Wort ist abgeschlossen, angezeigt durch `typedValue`, das mit einem Leerzeichen endet (das Ende eines Wortes), und `typedValue`, das gleich `currentWord` ist
- Setzen von `value` auf `typedElement` auf `''`, um das nächste Wort tippen zu können
- Erhöhen von `wordIndex`, um zum nächsten Wort zu wechseln
- Durchlaufen aller `childNodes` von `quoteElement`, um `className` auf `''` zu setzen, um die Standardanzeige wiederherzustellen
- Setzen von `className` des aktuellen Wortes auf `highlight`, um es als nächstes zu tippendes Wort zu markieren
- Das Wort wird derzeit korrekt getippt (aber nicht abgeschlossen), angezeigt durch `currentWord`, das mit `typedValue` beginnt
- Sicherstellen, dass `typedValueElement` als Standard angezeigt wird, indem `className` gelöscht wird
- Wenn wir bis hierher gekommen sind, liegt ein Fehler vor
- Setzen von `className` auf `typedValueElement` auf `error`
## Testen Sie Ihre Anwendung
Sie haben es bis zum Ende geschafft! Der letzte Schritt besteht darin, sicherzustellen, dass unsere Anwendung funktioniert. Probieren Sie es aus! Machen Sie sich keine Sorgen, wenn es Fehler gibt; **alle Entwickler** haben Fehler. Untersuchen Sie die Nachrichten und debuggen Sie bei Bedarf.
Klicken Sie auf **Start** und beginnen Sie zu tippen! Es sollte ein wenig wie die Animation aussehen, die wir zuvor gesehen haben.
![Animation des Spiels in Aktion](../../../../4-typing-game/images/demo.gif)
---
## 🚀 Herausforderung
Fügen Sie weitere Funktionen hinzu:
- Deaktivieren Sie den `input`-Ereignis-Listener bei Abschluss und aktivieren Sie ihn erneut, wenn der Button geklickt wird
- Deaktivieren Sie das Textfeld, wenn der Spieler das Zitat abschließt
- Zeigen Sie ein modales Dialogfeld mit der Erfolgsmeldung an
- Speichere hohe Punktzahlen mit [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22)
## Überprüfung & Selbststudium
Lies über [alle verfügbaren Ereignisse](https://developer.mozilla.org/docs/Web/Events), die Entwicklern über den Webbrowser zur Verfügung stehen, und überlege, in welchen Szenarien du jedes davon verwenden würdest.
## Aufgabe
[Erstelle ein neues Tastaturspiel](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

24
translations/de/4-typing-game/typing-game/assignment.md Normal file
View File

@@ -0,0 +1,24 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
"translation_date": "2025-08-24T13:55:20+00:00",
"source_file": "4-typing-game/typing-game/assignment.md",
"language_code": "de"
}
-->
# Erstelle ein neues Tastaturspiel
## Anweisungen
Erstelle ein kleines Spiel, das Tastaturereignisse nutzt, um Aufgaben auszuführen. Es könnte eine andere Art von Tipp-Spiel sein oder ein Kunstspiel, das bei Tasteneingaben Pixel auf den Bildschirm malt. Sei kreativ!
## Bewertungskriterien
| Kriterien | Vorbildlich | Ausreichend | Verbesserungswürdig |
| --------- | ------------------------ | ------------------------ | -------------------- |
| | Ein vollständiges Spiel wird präsentiert | Das Spiel ist sehr minimal | Das Spiel enthält Fehler |
| | | | |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

180
translations/de/5-browser-extension/1-about-browsers/README.md Normal file
View File

@@ -0,0 +1,180 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "0bb55e0b98600afab801eea115228873",
"translation_date": "2025-08-24T13:13:35+00:00",
"source_file": "5-browser-extension/1-about-browsers/README.md",
"language_code": "de"
}
-->
# Browser-Erweiterungsprojekt Teil 1: Alles über Browser
![Browser Sketchnote](../../../../sketchnotes/browser.jpg)
> Sketchnote von [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23)
### Einführung
Browser-Erweiterungen fügen einem Browser zusätzliche Funktionen hinzu. Bevor du jedoch eine entwickelst, solltest du ein wenig darüber lernen, wie Browser arbeiten.
### Über den Browser
In dieser Reihe von Lektionen wirst du lernen, wie man eine Browser-Erweiterung entwickelt, die mit Chrome-, Firefox- und Edge-Browsern funktioniert. In diesem Teil erfährst du, wie Browser arbeiten und wie man die Elemente einer Browser-Erweiterung strukturiert.
Aber was genau ist ein Browser? Es ist eine Softwareanwendung, die es einem Endbenutzer ermöglicht, Inhalte von einem Server abzurufen und auf Webseiten anzuzeigen.
✅ Ein bisschen Geschichte: Der erste Browser hieß 'WorldWideWeb' und wurde 1990 von Sir Timothy Berners-Lee entwickelt.
![Frühe Browser](../../../../5-browser-extension/1-about-browsers/images/earlybrowsers.jpg)
> Einige frühe Browser, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
Wenn ein Benutzer über eine URL-Adresse (Uniform Resource Locator) eine Verbindung zum Internet herstellt, normalerweise über das Hypertext Transfer Protocol mit einer `http`- oder `https`-Adresse, kommuniziert der Browser mit einem Webserver und ruft eine Webseite ab.
An diesem Punkt zeigt die Rendering-Engine des Browsers die Seite auf dem Gerät des Benutzers an, sei es ein Mobiltelefon, Desktop oder Laptop.
Browser können Inhalte auch zwischenspeichern, sodass sie nicht jedes Mal vom Server abgerufen werden müssen. Sie können die Historie der Browsing-Aktivitäten eines Benutzers aufzeichnen, 'Cookies' speichern, kleine Datenbits, die Informationen enthalten, um die Aktivitäten eines Benutzers zu speichern, und vieles mehr.
Ein wirklich wichtiger Punkt, den man über Browser wissen sollte, ist, dass sie nicht alle gleich sind! Jeder Browser hat seine Stärken und Schwächen, und ein professioneller Webentwickler muss verstehen, wie man Webseiten so gestaltet, dass sie in verschiedenen Browsern gut funktionieren. Dazu gehört auch die Anpassung an kleine Viewports wie die eines Mobiltelefons sowie an Benutzer, die offline sind.
Eine wirklich nützliche Website, die du wahrscheinlich in deinem bevorzugten Browser als Lesezeichen speichern solltest, ist [caniuse.com](https://www.caniuse.com). Wenn du Webseiten entwickelst, ist es sehr hilfreich, die Listen unterstützter Technologien von caniuse zu verwenden, um deine Benutzer bestmöglich zu unterstützen.
✅ Wie kannst du herausfinden, welche Browser bei den Benutzern deiner Website am beliebtesten sind? Überprüfe deine Analysen – du kannst verschiedene Analysepakete als Teil deines Webentwicklungsprozesses installieren, und sie zeigen dir, welche Browser von den Benutzern am häufigsten verwendet werden.
## Browser-Erweiterungen
Warum solltest du eine Browser-Erweiterung entwickeln? Es ist eine praktische Ergänzung für deinen Browser, wenn du schnellen Zugriff auf Aufgaben benötigst, die du häufig wiederholst. Wenn du beispielsweise häufig Farben auf verschiedenen Webseiten überprüfen musst, könntest du eine Farbwähler-Browser-Erweiterung installieren. Wenn du Schwierigkeiten hast, dir Passwörter zu merken, könntest du eine Passwortverwaltungs-Browser-Erweiterung verwenden.
Browser-Erweiterungen machen auch Spaß bei der Entwicklung. Sie konzentrieren sich auf eine begrenzte Anzahl von Aufgaben, die sie gut ausführen.
✅ Was sind deine Lieblings-Browser-Erweiterungen? Welche Aufgaben erfüllen sie?
### Erweiterungen installieren
Bevor du mit der Entwicklung beginnst, wirf einen Blick auf den Prozess des Erstellens und Bereitstellens einer Browser-Erweiterung. Obwohl sich die Vorgehensweise bei jedem Browser ein wenig unterscheidet, ist der Prozess bei Chrome und Firefox ähnlich wie in diesem Beispiel für Edge:
![Screenshot des Edge-Browsers mit der geöffneten Seite edge://extensions und dem geöffneten Einstellungsmenü](../../../../5-browser-extension/1-about-browsers/images/install-on-edge.png)
> Hinweis: Stelle sicher, dass du den Entwicklermodus aktivierst und Erweiterungen aus anderen Stores zulässt.
Im Wesentlichen wird der Prozess wie folgt aussehen:
- Erstelle deine Erweiterung mit `npm run build`
- Navigiere im Browser zum Erweiterungsbereich über die Schaltfläche "Einstellungen und mehr" (das `...`-Symbol) oben rechts
- Wenn es sich um eine neue Installation handelt, wähle `load unpacked`, um eine neue Erweiterung aus ihrem Build-Ordner hochzuladen (in unserem Fall ist es `/dist`)
- oder klicke auf `reload`, wenn du die bereits installierte Erweiterung neu laden möchtest
✅ Diese Anweisungen beziehen sich auf Erweiterungen, die du selbst erstellst; um Erweiterungen zu installieren, die im Browser-Erweiterungsstore des jeweiligen Browsers veröffentlicht wurden, solltest du zu diesen [Stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) navigieren und die Erweiterung deiner Wahl installieren.
### Loslegen
Du wirst eine Browser-Erweiterung entwickeln, die den CO2-Fußabdruck deiner Region anzeigt, einschließlich des Energieverbrauchs und der Energiequelle deiner Region. Die Erweiterung wird ein Formular enthalten, das einen API-Schlüssel sammelt, um auf die API von CO2 Signal zugreifen zu können.
**Du benötigst:**
- [einen API-Schlüssel](https://www.co2signal.com/); gib deine E-Mail-Adresse in das Feld auf dieser Seite ein, und dir wird ein Schlüssel zugesendet
- den [Code für deine Region](http://api.electricitymap.org/v3/zones), der der [Electricity Map](https://www.electricitymap.org/map) entspricht (in Boston verwende ich beispielsweise 'US-NEISO').
- den [Starter-Code](../../../../5-browser-extension/start). Lade den `start`-Ordner herunter; du wirst den Code in diesem Ordner vervollständigen.
- [NPM](https://www.npmjs.com) - NPM ist ein Paketverwaltungstool; installiere es lokal, und die im `package.json`-Datei aufgeführten Pakete werden für deine Webressourcen installiert.
✅ Erfahre mehr über Paketverwaltung in diesem [ausgezeichneten Lernmodul](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
Nimm dir einen Moment Zeit, um den Code zu durchstöbern:
dist
-|manifest.json (Standardeinstellungen hier)
-|index.html (HTML-Markup für das Frontend hier)
-|background.js (Hintergrund-JS hier)
-|main.js (kompiliertes JS)
src
-|index.js (dein JS-Code kommt hier hin)
✅ Sobald du deinen API-Schlüssel und Region-Code griffbereit hast, speichere diese irgendwo in einer Notiz für die spätere Verwendung.
### HTML für die Erweiterung erstellen
Diese Erweiterung hat zwei Ansichten. Eine, um den API-Schlüssel und den Region-Code zu erfassen:
![Screenshot der fertigen Erweiterung, geöffnet in einem Browser, mit einem Formular mit Eingabefeldern für Regionsname und API-Schlüssel.](../../../../5-browser-extension/1-about-browsers/images/1.png)
Und die zweite, um den CO2-Verbrauch der Region anzuzeigen:
![Screenshot der fertigen Erweiterung, die Werte für CO2-Verbrauch und den Prozentsatz fossiler Brennstoffe für die Region US-NEISO anzeigt.](../../../../5-browser-extension/1-about-browsers/images/2.png)
Beginnen wir mit dem Erstellen des HTML für das Formular und dem Styling mit CSS.
Im `/dist`-Ordner wirst du ein Formular und einen Ergebnisbereich erstellen. Im `index.html`-File fügst du den markierten Formularbereich ein:
```HTML
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
```
Dies ist das Formular, in dem deine gespeicherten Informationen eingegeben und im lokalen Speicher gespeichert werden.
Erstelle als Nächstes den Ergebnisbereich; füge unter dem letzten Formular-Tag einige Divs hinzu:
```HTML
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>
```
An diesem Punkt kannst du einen Build versuchen. Stelle sicher, dass du die Paketabhängigkeiten dieser Erweiterung installierst:
```
npm install
```
Dieser Befehl verwendet npm, den Node Package Manager, um webpack für den Build-Prozess deiner Erweiterung zu installieren. Webpack ist ein Bundler, der die Code-Kompilierung übernimmt. Du kannst das Ergebnis dieses Prozesses sehen, indem du in `/dist/main.js` nachsiehst – du wirst sehen, dass der Code gebündelt wurde.
Für den Moment sollte die Erweiterung gebaut werden, und wenn du sie als Erweiterung in Edge bereitstellst, wirst du ein sauber angezeigtes Formular sehen.
Herzlichen Glückwunsch, du hast die ersten Schritte zur Entwicklung einer Browser-Erweiterung gemacht. In den folgenden Lektionen wirst du sie funktionaler und nützlicher machen.
---
## 🚀 Herausforderung
Schau dir einen Browser-Erweiterungsstore an und installiere eine Erweiterung in deinem Browser. Du kannst ihre Dateien auf interessante Weise untersuchen. Was entdeckst du?
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24)
## Überprüfung & Selbststudium
In dieser Lektion hast du ein wenig über die Geschichte des Webbrowsers gelernt; nutze diese Gelegenheit, um mehr darüber zu erfahren, wie die Erfinder des World Wide Web seine Nutzung envisioned haben, indem du mehr über seine Geschichte liest. Einige nützliche Seiten sind:
[Die Geschichte der Webbrowser](https://www.mozilla.org/firefox/browsers/browser-history/)
[Geschichte des Webs](https://webfoundation.org/about/vision/history-of-the-web/)
[Ein Interview mit Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
## Aufgabe
[Gestalte deine Erweiterung neu](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/5-browser-extension/1-about-browsers/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e3c6f2a03c2336e60412612d870af547",
"translation_date": "2025-08-24T13:15:43+00:00",
"source_file": "5-browser-extension/1-about-browsers/assignment.md",
"language_code": "de"
}
-->
# Gestalten Sie Ihre Erweiterung neu
## Anweisungen
Der Code dieser Erweiterung enthält bereits Stile, aber Sie müssen diese nicht verwenden. Machen Sie die Erweiterung zu Ihrer eigenen, indem Sie die CSS-Datei bearbeiten und neu gestalten.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | -------------------------------------------- | --------------------- | ------------------- |
| | Code wird mit funktionalen neuen Stilen eingereicht | Styling ist unvollständig | Stile sind fehlerhaft |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

238
translations/de/5-browser-extension/2-forms-browsers-local-storage/README.md Normal file
View File

@@ -0,0 +1,238 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e10f168beac4e7b05e30e0eb5c92bf11",
"translation_date": "2025-08-24T13:09:10+00:00",
"source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
"language_code": "de"
}
-->
# Browser-Erweiterungsprojekt Teil 2: Eine API aufrufen, Local Storage verwenden
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25)
### Einführung
In dieser Lektion wirst du eine API aufrufen, indem du das Formular deiner Browser-Erweiterung übermittelst und die Ergebnisse in der Erweiterung anzeigst. Außerdem lernst du, wie du Daten im lokalen Speicher deines Browsers für zukünftige Verwendungen speichern kannst.
✅ Folge den nummerierten Abschnitten in den entsprechenden Dateien, um zu wissen, wo du deinen Code platzieren musst.
### Elemente für die Erweiterung vorbereiten:
Bis zu diesem Punkt hast du das HTML für das Formular und den `<div>`-Bereich für die Ergebnisse deiner Browser-Erweiterung erstellt. Ab jetzt wirst du in der Datei `/src/index.js` arbeiten und deine Erweiterung Schritt für Schritt aufbauen. Sieh dir die [vorherige Lektion](../1-about-browsers/README.md) an, um dein Projekt einzurichten und den Build-Prozess zu verstehen.
Arbeite in deiner `index.js`-Datei und beginne damit, einige `const`-Variablen zu erstellen, um die Werte der verschiedenen Felder zu speichern:
```JavaScript
// form fields
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');
// results
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');
```
Alle diese Felder werden über ihre CSS-Klasse referenziert, wie du sie im HTML in der vorherigen Lektion eingerichtet hast.
### Event Listener hinzufügen
Als Nächstes füge Event Listener für das Formular und die Schaltfläche zum Zurücksetzen hinzu, sodass etwas passiert, wenn ein Benutzer das Formular übermittelt oder die Schaltfläche klickt. Füge außerdem den Aufruf zur Initialisierung der App am Ende der Datei hinzu:
```JavaScript
form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();
```
✅ Beachte die Kurzschreibweise, die verwendet wird, um auf ein Submit- oder Click-Event zu hören, und wie das Event an die Funktionen `handleSubmit` oder `reset` übergeben wird. Kannst du die äquivalente Langform dieser Kurzschreibweise schreiben? Welche bevorzugst du?
### Die Funktionen `init()` und `reset()` erstellen:
Jetzt wirst du die Funktion erstellen, die die Erweiterung initialisiert, genannt `init()`:
```JavaScript
function init() {
//if anything is in localStorage, pick it up
const storedApiKey = localStorage.getItem('apiKey');
const storedRegion = localStorage.getItem('regionName');
//set icon to be generic green
//todo
if (storedApiKey === null || storedRegion === null) {
//if we don't have the keys, show the form
form.style.display = 'block';
results.style.display = 'none';
loading.style.display = 'none';
clearBtn.style.display = 'none';
errors.textContent = '';
} else {
//if we have saved keys/regions in localStorage, show results when they load
displayCarbonUsage(storedApiKey, storedRegion);
results.style.display = 'none';
form.style.display = 'none';
clearBtn.style.display = 'block';
}
};
function reset(e) {
e.preventDefault();
//clear local storage for region only
localStorage.removeItem('regionName');
init();
}
```
In dieser Funktion gibt es interessante Logik. Kannst du nachvollziehen, was passiert?
- Zwei `const`-Variablen werden eingerichtet, um zu prüfen, ob der Benutzer einen API-Schlüssel und einen Regionscode im lokalen Speicher gespeichert hat.
- Wenn einer dieser Werte null ist, wird das Formular angezeigt, indem sein Stil auf 'block' gesetzt wird.
- Die Bereiche für Ergebnisse, Ladeanzeige und die Schaltfläche zum Zurücksetzen werden ausgeblendet, und etwaiger Fehlertext wird auf einen leeren String gesetzt.
- Wenn ein Schlüssel und eine Region vorhanden sind, wird eine Routine gestartet, um:
- die API aufzurufen, um Daten zur Kohlenstoffnutzung abzurufen,
- den Ergebnisbereich auszublenden,
- das Formular auszublenden,
- die Schaltfläche zum Zurücksetzen anzuzeigen.
Bevor du weitermachst, ist es nützlich, ein sehr wichtiges Konzept in Browsern zu lernen: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage ist eine nützliche Möglichkeit, Zeichenketten im Browser als `key-value`-Paar zu speichern. Diese Art von Webspeicher kann durch JavaScript manipuliert werden, um Daten im Browser zu verwalten. LocalStorage läuft nicht ab, während SessionStorage, eine andere Art von Webspeicher, gelöscht wird, wenn der Browser geschlossen wird. Die verschiedenen Speicherarten haben Vor- und Nachteile.
> Hinweis: Deine Browser-Erweiterung hat ihren eigenen lokalen Speicher; das Hauptbrowserfenster ist eine separate Instanz und verhält sich unabhängig.
Du kannst deinen API-Schlüssel beispielsweise als Zeichenkette speichern und ihn in Edge sehen, indem du eine Webseite "inspizierst" (du kannst mit der rechten Maustaste auf einen Browser klicken, um zu inspizieren) und zum Tab "Applications" gehst, um den Speicher zu sehen.
![Local Storage Bereich](../../../../5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png)
✅ Überlege dir Situationen, in denen du keine Daten im LocalStorage speichern möchtest. Im Allgemeinen ist es eine schlechte Idee, API-Schlüssel im LocalStorage zu speichern! Kannst du nachvollziehen, warum? In unserem Fall, da unsere App rein zu Lernzwecken dient und nicht in einem App-Store veröffentlicht wird, verwenden wir diese Methode.
Beachte, dass du die Web-API verwenden kannst, um LocalStorage zu manipulieren, entweder mit `getItem()`, `setItem()` oder `removeItem()`. Es wird von den meisten Browsern unterstützt.
Bevor du die Funktion `displayCarbonUsage()` erstellst, die in `init()` aufgerufen wird, lass uns die Funktionalität für die anfängliche Formularübermittlung erstellen.
### Formularübermittlung verarbeiten
Erstelle eine Funktion namens `handleSubmit`, die ein Event-Argument `(e)` akzeptiert. Stoppe die Weiterleitung des Events (in diesem Fall möchten wir verhindern, dass der Browser aktualisiert wird) und rufe eine neue Funktion `setUpUser` auf, indem du die Argumente `apiKey.value` und `region.value` übergibst. Auf diese Weise verwendest du die beiden Werte, die über das anfängliche Formular eingegeben werden, wenn die entsprechenden Felder ausgefüllt sind.
```JavaScript
function handleSubmit(e) {
e.preventDefault();
setUpUser(apiKey.value, region.value);
}
```
✅ Erinnere dich: Das HTML, das du in der letzten Lektion eingerichtet hast, hat zwei Eingabefelder, deren `values` über die `const`-Variablen, die du oben in der Datei eingerichtet hast, erfasst werden. Beide Felder sind `required`, sodass der Browser Benutzer daran hindert, null Werte einzugeben.
### Benutzer einrichten
Weiter geht es mit der Funktion `setUpUser`. Hier werden die Werte für `apiKey` und `regionName` im lokalen Speicher gesetzt. Füge eine neue Funktion hinzu:
```JavaScript
function setUpUser(apiKey, regionName) {
localStorage.setItem('apiKey', apiKey);
localStorage.setItem('regionName', regionName);
loading.style.display = 'block';
errors.textContent = '';
clearBtn.style.display = 'block';
//make initial call
displayCarbonUsage(apiKey, regionName);
}
```
Diese Funktion zeigt eine Ladeanzeige, während die API aufgerufen wird. An diesem Punkt hast du die wichtigste Funktion dieser Browser-Erweiterung erreicht!
### Kohlenstoffnutzung anzeigen
Endlich ist es Zeit, die API abzufragen!
Bevor wir weitermachen, sollten wir über APIs sprechen. APIs, oder [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), sind ein kritisches Element im Werkzeugkasten eines Webentwicklers. Sie bieten standardisierte Möglichkeiten, wie Programme miteinander interagieren und Schnittstellen bereitstellen können. Wenn du beispielsweise eine Website erstellst, die eine Datenbank abfragen muss, könnte jemand eine API dafür erstellt haben. Während es viele Arten von APIs gibt, ist eine der beliebtesten eine [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
✅ Der Begriff 'REST' steht für 'Representational State Transfer' und verwendet unterschiedlich konfigurierte URLs, um Daten abzurufen. Recherchiere ein wenig über die verschiedenen Arten von APIs, die Entwicklern zur Verfügung stehen. Welches Format spricht dich an?
Es gibt wichtige Dinge, die du über diese Funktion beachten solltest. Zunächst fällt das [`async`-Schlüsselwort](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) auf. Funktionen so zu schreiben, dass sie asynchron ausgeführt werden, bedeutet, dass sie auf eine Aktion, wie das Abrufen von Daten, warten, bevor sie fortfahren.
Hier ist ein kurzes Video über `async`:
[![Async und Await für die Verwaltung von Promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async und Await für die Verwaltung von Promises")
> 🎥 Klicke auf das Bild oben für ein Video über async/await.
Erstelle eine neue Funktion, um die C02Signal API abzufragen:
```JavaScript
import axios from '../node_modules/axios';
async function displayCarbonUsage(apiKey, region) {
try {
await axios
.get('https://api.co2signal.com/v1/latest', {
params: {
countryCode: region,
},
headers: {
'auth-token': apiKey,
},
})
.then((response) => {
let CO2 = Math.floor(response.data.data.carbonIntensity);
//calculateColor(CO2);
loading.style.display = 'none';
form.style.display = 'none';
myregion.textContent = region;
usage.textContent =
Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
fossilfuel.textContent =
response.data.data.fossilFuelPercentage.toFixed(2) +
'% (percentage of fossil fuels used to generate electricity)';
results.style.display = 'block';
});
} catch (error) {
console.log(error);
loading.style.display = 'none';
results.style.display = 'none';
errors.textContent = 'Sorry, we have no data for the region you have requested.';
}
}
```
Das ist eine große Funktion. Was passiert hier?
- Nach Best Practices verwendest du das `async`-Schlüsselwort, um diese Funktion asynchron zu gestalten. Die Funktion enthält einen `try/catch`-Block, da sie ein Promise zurückgibt, wenn die API Daten liefert. Da du keine Kontrolle über die Geschwindigkeit hast, mit der die API antwortet (oder ob sie überhaupt antwortet!), musst du diese Unsicherheit durch asynchrone Aufrufe handhaben.
- Du fragst die co2signal API ab, um die Daten deiner Region zu erhalten, und verwendest deinen API-Schlüssel. Um diesen Schlüssel zu verwenden, musst du eine Art Authentifizierung in deinen Header-Parametern einfügen.
- Sobald die API antwortet, weist du verschiedene Elemente ihrer Antwortdaten den Bereichen deines Bildschirms zu, die du eingerichtet hast, um diese Daten anzuzeigen.
- Wenn ein Fehler auftritt oder keine Ergebnisse vorliegen, zeigst du eine Fehlermeldung an.
✅ Asynchrone Programmiermuster sind ein weiteres sehr nützliches Werkzeug in deinem Werkzeugkasten. Lies [über die verschiedenen Möglichkeiten](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), wie du diese Art von Code konfigurieren kannst.
Herzlichen Glückwunsch! Wenn du deine Erweiterung baust (`npm run build`) und sie im Erweiterungsbereich aktualisierst, hast du eine funktionierende Erweiterung! Das einzige, was noch nicht funktioniert, ist das Symbol, und das wirst du in der nächsten Lektion beheben.
---
## 🚀 Herausforderung
Wir haben in diesen Lektionen mehrere Arten von APIs besprochen. Wähle eine Web-API aus und recherchiere ausführlich, was sie bietet. Schau dir beispielsweise APIs an, die in Browsern verfügbar sind, wie die [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Was macht deiner Meinung nach eine großartige API aus?
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26)
## Rückblick & Selbststudium
In dieser Lektion hast du etwas über LocalStorage und APIs gelernt, beides sehr nützliche Werkzeuge für professionelle Webentwickler. Kannst du darüber nachdenken, wie diese beiden Dinge zusammenarbeiten? Überlege, wie du eine Website gestalten würdest, die Elemente speichert, die von einer API verwendet werden.
## Aufgabe
[Adoptiere eine API](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/5-browser-extension/2-forms-browsers-local-storage/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a0c78d1dd9d1acdbf7f52e7cc3ebe1a7",
"translation_date": "2025-08-24T13:11:23+00:00",
"source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
"language_code": "de"
}
-->
# Adoptiere eine API
## Anweisungen
APIs können sehr viel Spaß machen. Hier ist eine [Liste mit vielen kostenlosen APIs](https://github.com/public-apis/public-apis). Wähle eine API aus und entwickle eine Browser-Erweiterung, die ein Problem löst. Es kann ein kleines Problem sein, wie das Fehlen von genügend Tierbildern (probiere dafür die [dog CEO API](https://dog.ceo/dog-api/)) oder etwas Größeres – hab Spaß dabei!
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | -------------------------------------------------------------------------- | --------------------------------------- | ----------------------- |
| | Eine vollständige Browser-Erweiterung wird eingereicht, die eine API aus der obigen Liste verwendet | Eine teilweise Browser-Erweiterung wird eingereicht | Die Einreichung enthält Fehler |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

174
translations/de/5-browser-extension/3-background-tasks-and-performance/README.md Normal file
View File

@@ -0,0 +1,174 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f198c6b817b4b2a99749f4662e7cae98",
"translation_date": "2025-08-24T13:17:00+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
"language_code": "de"
}
-->
# Browser-Erweiterungsprojekt Teil 3: Lernen über Hintergrundaufgaben und Leistung
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27)
### Einführung
In den letzten beiden Lektionen dieses Moduls hast du gelernt, wie man ein Formular und einen Anzeigebereich für Daten erstellt, die von einer API abgerufen werden. Dies ist eine sehr gängige Methode, um eine Webpräsenz zu erstellen. Du hast sogar gelernt, wie man Daten asynchron abruft. Deine Browser-Erweiterung ist fast fertig.
Es bleibt, einige Hintergrundaufgaben zu verwalten, einschließlich der Aktualisierung der Farbe des Erweiterungssymbols. Dies ist ein guter Zeitpunkt, um darüber zu sprechen, wie der Browser solche Aufgaben verwaltet. Lass uns über diese Browser-Aufgaben im Kontext der Leistung deiner Webressourcen nachdenken, während du sie erstellst.
## Grundlagen der Web-Leistung
> "Website-Leistung dreht sich um zwei Dinge: wie schnell die Seite lädt und wie schnell der Code darauf ausgeführt wird." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Das Thema, wie man Websites auf allen Arten von Geräten, für alle Arten von Benutzern und in allen möglichen Situationen blitzschnell macht, ist erwartungsgemäß umfangreich. Hier sind einige Punkte, die du beachten solltest, wenn du entweder ein Standard-Webprojekt oder eine Browser-Erweiterung erstellst.
Das Erste, was du tun musst, um sicherzustellen, dass deine Website effizient läuft, ist, Daten über ihre Leistung zu sammeln. Der erste Ort, um dies zu tun, sind die Entwicklertools deines Webbrowsers. In Edge kannst du die Schaltfläche "Einstellungen und mehr" (das Drei-Punkte-Symbol oben rechts im Browser) auswählen, dann zu Weitere Tools > Entwicklertools navigieren und den Tab Leistung öffnen. Du kannst auch die Tastenkombination `Strg` + `Umschalt` + `I` unter Windows oder `Option` + `Befehl` + `I` auf dem Mac verwenden, um die Entwicklertools zu öffnen.
Der Tab Leistung enthält ein Profiling-Tool. Öffne eine Website (probiere zum Beispiel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) und klicke auf die Schaltfläche "Aufzeichnen", dann aktualisiere die Website. Beende die Aufzeichnung jederzeit, und du kannst die Routinen sehen, die generiert werden, um die Website zu 'skripten', 'rendern' und 'malen':
![Edge Profiler](../../../../5-browser-extension/3-background-tasks-and-performance/images/profiler.png)
✅ Besuche die [Microsoft-Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) zum Leistungspanel in Edge.
> Tipp: Um eine genaue Messung der Startzeit deiner Website zu erhalten, leere den Cache deines Browsers.
Wähle Elemente der Profil-Zeitleiste aus, um Ereignisse zu vergrößern, die während des Ladens deiner Seite auftreten.
Erhalte eine Momentaufnahme der Leistung deiner Seite, indem du einen Teil der Profil-Zeitleiste auswählst und das Zusammenfassungsfenster ansiehst:
![Edge Profiler Momentaufnahme](../../../../5-browser-extension/3-background-tasks-and-performance/images/snapshot.png)
Überprüfe das Ereignisprotokoll, um zu sehen, ob ein Ereignis länger als 15 ms gedauert hat:
![Edge Ereignisprotokoll](../../../../5-browser-extension/3-background-tasks-and-performance/images/log.png)
✅ Lerne deinen Profiler kennen! Öffne die Entwicklertools auf dieser Website und sieh nach, ob es Engpässe gibt. Was ist die am langsamsten ladende Ressource? Die schnellste?
## Profiling-Checks
Im Allgemeinen gibt es einige "Problemzonen", die jeder Webentwickler im Auge behalten sollte, wenn er eine Website erstellt, um unangenehme Überraschungen beim Einsatz in der Produktion zu vermeiden.
**Asset-Größen**: Das Web ist in den letzten Jahren "schwerer" und damit langsamer geworden. Ein Teil dieses Gewichts hat mit der Verwendung von Bildern zu tun.
✅ Sieh dir das [Internet-Archiv](https://httparchive.org/reports/page-weight) für eine historische Ansicht des Seitengewichts und mehr an.
Eine gute Praxis ist sicherzustellen, dass deine Bilder optimiert sind und in der richtigen Größe und Auflösung für deine Benutzer geliefert werden.
**DOM-Traversierungen**: Der Browser muss sein Document Object Model basierend auf dem von dir geschriebenen Code erstellen, daher ist es im Interesse einer guten Seitenleistung, deine Tags minimal zu halten und nur das zu verwenden und zu stylen, was die Seite benötigt. Zu diesem Punkt könnte überschüssiges CSS, das mit einer Seite verbunden ist, optimiert werden; Stile, die nur auf einer Seite verwendet werden müssen, müssen beispielsweise nicht im Hauptstilblatt enthalten sein.
**JavaScript**: Jeder JavaScript-Entwickler sollte auf 'render-blockierende' Skripte achten, die geladen werden müssen, bevor der Rest des DOM durchlaufen und im Browser dargestellt werden kann. Erwäge die Verwendung von `defer` mit deinen Inline-Skripten (wie im Terrarium-Modul gemacht).
✅ Probiere einige Websites auf einer [Website-Geschwindigkeitstest-Seite](https://www.webpagetest.org/) aus, um mehr über die üblichen Checks zu erfahren, die durchgeführt werden, um die Leistung einer Website zu bestimmen.
Jetzt, da du eine Vorstellung davon hast, wie der Browser die von dir gesendeten Ressourcen rendert, lass uns die letzten Dinge ansehen, die du tun musst, um deine Erweiterung abzuschließen:
### Eine Funktion zur Farbberechnung erstellen
Arbeite in `/src/index.js` und füge eine Funktion namens `calculateColor()` nach der Reihe von `const`-Variablen hinzu, die du gesetzt hast, um Zugriff auf das DOM zu erhalten:
```JavaScript
function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
let closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(value + ' is closest to ' + closestNum);
let num = (element) => element > closestNum;
let scaleIndex = co2Scale.findIndex(num);
let closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
```
Was passiert hier? Du übergibst einen Wert (die Kohlenstoffintensität) aus dem API-Aufruf, den du in der letzten Lektion abgeschlossen hast, und berechnest dann, wie nah sein Wert am Index im Farben-Array liegt. Dann sendest du diesen nächstgelegenen Farbwert an die Chrome-Laufzeit.
Die chrome.runtime hat [eine API](https://developer.chrome.com/extensions/runtime), die alle Arten von Hintergrundaufgaben verwaltet, und deine Erweiterung nutzt diese:
> "Verwende die chrome.runtime API, um die Hintergrundseite abzurufen, Details über das Manifest zurückzugeben und auf Ereignisse im Lebenszyklus der App oder Erweiterung zu hören und darauf zu reagieren. Du kannst diese API auch verwenden, um den relativen Pfad von URLs in vollständig qualifizierte URLs umzuwandeln."
✅ Wenn du diese Browser-Erweiterung für Edge entwickelst, könnte es dich überraschen, dass du eine Chrome-API verwendest. Die neueren Edge-Browser-Versionen laufen auf der Chromium-Browser-Engine, sodass du diese Tools nutzen kannst.
> Hinweis: Wenn du eine Browser-Erweiterung profilieren möchtest, starte die Entwicklertools innerhalb der Erweiterung selbst, da sie eine eigene separate Browser-Instanz ist.
### Eine Standard-Symbolfarbe festlegen
Setze nun in der `init()`-Funktion das Symbol zunächst auf ein generisches Grün, indem du erneut die `updateIcon`-Aktion von Chrome aufrufst:
```JavaScript
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
```
### Die Funktion aufrufen und den Aufruf ausführen
Rufe als Nächstes die Funktion, die du gerade erstellt hast, auf, indem du sie dem Promise hinzufügst, das von der C02Signal-API zurückgegeben wird:
```JavaScript
//let CO2...
calculateColor(CO2);
```
Und schließlich füge in `/dist/background.js` den Listener für diese Hintergrundaktionsaufrufe hinzu:
```JavaScript
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}
```
In diesem Code fügst du einen Listener für alle Nachrichten hinzu, die an den Backend-Aufgabenmanager gesendet werden. Wenn er 'updateIcon' genannt wird, wird der nächste Code ausgeführt, um ein Symbol der richtigen Farbe mit der Canvas-API zu zeichnen.
✅ Du wirst mehr über die Canvas-API in den [Space Game-Lektionen](../../6-space-game/2-drawing-to-canvas/README.md) lernen.
Baue nun deine Erweiterung neu (`npm run build`), aktualisiere und starte deine Erweiterung und beobachte, wie sich die Farbe ändert. Ist es ein guter Zeitpunkt, Besorgungen zu machen oder das Geschirr zu spülen? Jetzt weißt du es!
Herzlichen Glückwunsch, du hast eine nützliche Browser-Erweiterung erstellt und mehr darüber gelernt, wie der Browser funktioniert und wie man seine Leistung profiliert.
---
## 🚀 Herausforderung
Untersuche einige Open-Source-Websites, die es schon lange gibt, und versuche basierend auf ihrer GitHub-Historie herauszufinden, wie sie im Laufe der Jahre für die Leistung optimiert wurden, falls überhaupt. Was ist der häufigste Schmerzpunkt?
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28)
## Überprüfung & Selbststudium
Erwäge, dich für einen [Leistungs-Newsletter](https://perf.email/) anzumelden.
Untersuche einige der Möglichkeiten, wie Browser die Web-Leistung messen, indem du die Leistungstabs in ihren Webtools durchsiehst. Findest du größere Unterschiede?
## Aufgabe
[Analysiere eine Website auf Leistung](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

21
translations/de/5-browser-extension/3-background-tasks-and-performance/assignment.md Normal file
View File

@@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "fc09b0fb314a5ab0507ba99216e6a843",
"translation_date": "2025-08-24T13:18:57+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
"language_code": "de"
}
-->
# Analysiere eine Website auf Leistung
Erstelle einen detaillierten Bericht über eine Website, der Bereiche aufzeigt, in denen die Leistung problematisch ist. Analysiere, warum die Website langsam ist, und was du tun könntest, um sie zu beschleunigen. Verlasse dich nicht nur auf die Browser-Tools, sondern recherchiere auch nach anderen Tools, die deinen Bericht unterstützen können.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | -------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
| | Ein Bericht wird präsentiert, der nicht nur auf Browser-Tools, sondern, wenn verfügbar, auch auf Drittanbieter-Tools basiert | Ein grundlegender Bericht wird präsentiert | Ein minimaler Bericht wird präsentiert |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

39
translations/de/5-browser-extension/README.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b121a279a6ab39878491f3e572673515",
"translation_date": "2025-08-24T13:07:42+00:00",
"source_file": "5-browser-extension/README.md",
"language_code": "de"
}
-->
# Erstellen einer Browser-Erweiterung
Das Erstellen von Browser-Erweiterungen ist eine unterhaltsame und interessante Möglichkeit, über die Leistung Ihrer Apps nachzudenken, während Sie eine andere Art von Web-Asset entwickeln. Dieses Modul enthält Lektionen darüber, wie Browser funktionieren und wie man eine Browser-Erweiterung bereitstellt, wie man ein Formular erstellt, eine API aufruft und lokalen Speicher verwendet, sowie wie man die Leistung Ihrer Website bewertet und verbessert.
Sie werden eine Browser-Erweiterung erstellen, die mit Edge, Chrome und Firefox funktioniert. Diese Erweiterung, die wie eine Mini-Website ist, die auf eine sehr spezifische Aufgabe zugeschnitten ist, überprüft die [C02 Signal API](https://www.co2signal.com) für den Stromverbrauch und die Kohlenstoffintensität einer bestimmten Region und liefert eine Bewertung des Kohlenstoff-Fußabdrucks der Region.
Diese Erweiterung kann von einem Benutzer ad hoc aufgerufen werden, sobald ein API-Schlüssel und ein Regionscode in ein Formular eingegeben wurden, um den lokalen Stromverbrauch zu bestimmen und so Daten bereitzustellen, die die Stromentscheidungen eines Benutzers beeinflussen können. Zum Beispiel könnte es sinnvoll sein, das Einschalten eines Wäschetrockners (eine kohlenstoffintensive Aktivität) während einer Zeit mit hohem Stromverbrauch in Ihrer Region zu verschieben.
### Themen
1. [Über den Browser](1-about-browsers/README.md)
2. [Formulare und lokaler Speicher](2-forms-browsers-local-storage/README.md)
3. [Hintergrundaufgaben und Leistung](3-background-tasks-and-performance/README.md)
### Credits
![eine grüne Browser-Erweiterung](../../../5-browser-extension/extension-screenshot.png)
## Credits
Die Idee für diesen Web-Kohlenstoff-Auslöser wurde von Asim Hussain, Leiter des Green Cloud Advocacy Teams bei Microsoft und Autor der [Green Principles](https://principles.green/), vorgeschlagen. Ursprünglich war es ein [Webseitenprojekt](https://github.com/jlooper/green).
Die Struktur der Browser-Erweiterung wurde von [Adebola Adenirans COVID-Erweiterung](https://github.com/onedebos/covtension) beeinflusst.
Das Konzept hinter dem 'Punkt'-Icon-System wurde durch die Icon-Struktur der [Energy Lollipop](https://energylollipop.com/) Browser-Erweiterung für Emissionen in Kalifornien inspiriert.
Diese Lektionen wurden mit ♥️ von [Jen Looper](https://www.twitter.com/jenlooper) geschrieben.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/solution/README.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "fab4e6b4f0efcd587a9029d82991f597",
"translation_date": "2025-08-24T13:19:41+00:00",
"source_file": "5-browser-extension/solution/README.md",
"language_code": "de"
}
-->
# Carbon Trigger Browser-Erweiterung: Fertiger Code
Verwenden Sie die CO2 Signal API von tmrow, um den Stromverbrauch zu verfolgen, und erstellen Sie eine Browser-Erweiterung, damit Sie direkt in Ihrem Browser eine Erinnerung daran haben, wie hoch der Stromverbrauch in Ihrer Region ist. Die gelegentliche Nutzung dieser Erweiterung hilft Ihnen, Entscheidungen über Ihre Aktivitäten basierend auf diesen Informationen zu treffen.
![Erweiterung Screenshot](../../../../5-browser-extension/extension-screenshot.png)
## Erste Schritte
Sie müssen [npm](https://npmjs.com) installiert haben. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle erforderlichen Pakete:
```
npm install
```
Bauen Sie die Erweiterung mit Webpack:
```
npm run build
```
Um die Erweiterung in Edge zu installieren, verwenden Sie das Menü mit den 'drei Punkten' in der oberen rechten Ecke des Browsers, um das Erweiterungs-Panel zu finden. Wählen Sie dort 'Entpackte Erweiterung laden', um eine neue Erweiterung zu laden. Öffnen Sie den Ordner 'dist' bei der Aufforderung, und die Erweiterung wird geladen. Um sie zu verwenden, benötigen Sie einen API-Schlüssel für die CO2 Signal API ([hier per E-Mail anfordern](https://www.co2signal.com/) - geben Sie Ihre E-Mail-Adresse in das Feld auf dieser Seite ein) und den [Code für Ihre Region](http://api.electricitymap.org/v3/zones), der der [Electricity Map](https://www.electricitymap.org/map) entspricht (in Boston verwende ich zum Beispiel 'US-NEISO').
![Installation](../../../../5-browser-extension/install-on-edge.png)
Sobald der API-Schlüssel und die Region in die Benutzeroberfläche der Erweiterung eingegeben wurden, sollte sich der farbige Punkt in der Browser-Erweiterungsleiste ändern, um den Energieverbrauch Ihrer Region widerzuspiegeln und Ihnen Hinweise darauf zu geben, welche energieintensiven Aktivitäten für Sie angemessen wären. Das Konzept hinter diesem 'Punkt'-System wurde mir von der [Energy Lollipop-Erweiterung](https://energylollipop.com/) für Emissionen in Kalifornien inspiriert.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/solution/translation/README.es.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
"translation_date": "2025-08-24T13:20:36+00:00",
"source_file": "5-browser-extension/solution/translation/README.es.md",
"language_code": "de"
}
-->
# Browser-Erweiterung Carbon Trigger: Vollständiger Code
Mit der CO2-Signal-API von tmrow, die den Stromverbrauch verfolgt, können Sie eine Browser-Erweiterung erstellen, die Ihnen direkt in Ihrem Browser eine Erinnerung an den Stromverbrauch Ihrer Region gibt. Die Nutzung dieser Ad-hoc-Erweiterung hilft Ihnen, Entscheidungen über Ihre Aktivitäten basierend auf diesen Informationen zu treffen.
![extension screenshot](../../../../../5-browser-extension/solution/start/extension-screenshot.png)
## Erste Schritte
Sie müssen [npm](https://npmjs.com) installiert haben. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle erforderlichen Pakete:
```
npm install
```
Bauen Sie die Erweiterung mit webpack:
```
npm run build
```
Um die Erweiterung in Edge zu installieren, verwenden Sie das Menü mit den 'drei Punkten' in der oberen rechten Ecke des Browsers, um das Erweiterungs-Panel zu finden. Wählen Sie dort 'Entpackt laden', um eine neue Erweiterung zu installieren. Öffnen Sie den Ordner 'dist', wenn Sie dazu aufgefordert werden, und die Erweiterung wird geladen. Um sie zu verwenden, benötigen Sie einen API-Schlüssel für die CO2-Signal-API ([hier per E-Mail anfordern](https://www.co2signal.com/) - geben Sie Ihre E-Mail-Adresse in das Feld auf dieser Seite ein) und den [Code für Ihre Region](http://api.electricitymap.org/v3/zones), der dem [Electricity Map](https://www.electricitymap.org/map) entspricht (in Boston verwende ich beispielsweise 'US-NEISO').
![installing](../../../../../5-browser-extension/solution/start/install-on-edge.png)
Sobald der API-Schlüssel und die Region in der Erweiterungsoberfläche eingegeben wurden, sollte sich der Farbpunktsymbol in der Browser-Erweiterungsleiste ändern, um den Energieverbrauch Ihrer Region widerzuspiegeln und Ihnen einen Hinweis darauf zu geben, welche energieintensiven Aktivitäten für Sie geeignet wären. Die Idee hinter diesem "Punkt"-System stammt von der [Energy Lollipop-Erweiterung](https://energylollipop.com/) für die Emissionen in Kalifornien.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

39
translations/de/5-browser-extension/solution/translation/README.fr.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9361268ca430b2579375009e1eceb5e5",
"translation_date": "2025-08-24T13:23:24+00:00",
"source_file": "5-browser-extension/solution/translation/README.fr.md",
"language_code": "de"
}
-->
# Browser-Erweiterung Carbon Trigger: Fertiger Code
Mit der CO2 Signal API von tmrow, die den Stromverbrauch verfolgt, erstellen Sie eine Browser-Erweiterung, die Sie direkt in Ihrem Browser an den Stromverbrauch in Ihrer Region erinnert. Die Nutzung dieser maßgeschneiderten Erweiterung hilft Ihnen, Ihre Aktivitäten basierend auf diesen Informationen zu bewerten.
![Erweiterungsscreenshot](../../../../../5-browser-extension/extension-screenshot.png)
## Erste Schritte
Sie müssen [npm](https://npmjs.com) installiert haben. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle erforderlichen Pakete:
```
npm install
```
Bauen Sie die Erweiterung mit Webpack:
```
npm run build
```
Um die Erweiterung in Edge zu installieren, verwenden Sie das Menü mit den 'drei Punkten' in der oberen rechten Ecke des Browsers, um das Erweiterungsfenster zu finden. Wählen Sie dort 'Entpackte Erweiterung laden', um eine neue Erweiterung hinzuzufügen. Öffnen Sie den Ordner 'dist' im Dialogfeld, und die Erweiterung wird geladen. Um sie zu verwenden, benötigen Sie einen API-Schlüssel für die CO2 Signal API ([hier per E-Mail anfordern](https://www.co2signal.com/) – geben Sie Ihre E-Mail-Adresse in das Feld auf dieser Seite ein) und den [Code für Ihre Region](http://api.electricitymap.org/v3/zones), der der [Electricity Map](https://www.electricitymap.org/map) entspricht (zum Beispiel verwende ich in Boston 'US-NEISO').
![Installation](../../../../../5-browser-extension/install-on-edge.png)
Sobald der API-Schlüssel und die Region in der Erweiterungsschnittstelle eingegeben wurden, sollte sich der farbige Punkt in der Browser-Erweiterungsleiste ändern, um den Energieverbrauch Ihrer Region widerzuspiegeln. Er gibt Ihnen einen Hinweis darauf, welche energieintensiven Aktivitäten Sie entsprechend durchführen sollten. Das Konzept hinter diesem 'Punktesystem' wurde von der [Energy Lollipop-Erweiterung](https://energylollipop.com/) für kalifornische Emissionen inspiriert.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/solution/translation/README.hi.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "dd58ae1b7707034f055718c1b68bc8de",
"translation_date": "2025-08-24T13:21:31+00:00",
"source_file": "5-browser-extension/solution/translation/README.hi.md",
"language_code": "de"
}
-->
# Carbon Trigger Browser-Erweiterung: Fertiger Code
Verwendung der CO2 Signal API von tmrow, um den Stromverbrauch zu verfolgen und eine Browser-Erweiterung zu erstellen, die Sie daran erinnert, wie stark der Stromverbrauch in Ihrer Region ist. Durch die Nutzung dieser Erweiterung können Sie basierend auf diesen Informationen Entscheidungen über Ihre Aktivitäten treffen.
![Erweiterung Screenshot](../../../../../5-browser-extension/extension-screenshot.png)
## Erste Schritte
Sie müssen [npm](https://npmjs.com) installieren. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle erforderlichen Pakete:
```
npm install
```
Erstellen Sie die Erweiterung mit Webpack:
```
npm run build
```
Um sie in Edge zu installieren, verwenden Sie das "Drei-Punkte"-Menü oben rechts im Browser, um das Erweiterungs-Panel zu finden. Wählen Sie dort "Entpackte Erweiterung laden". Öffnen Sie im angezeigten Dialogfeld den Ordner "dist", und die Erweiterung wird geladen. Um sie zu nutzen, benötigen Sie einen API-Schlüssel für die CO2 Signal API ([hier per E-Mail erhältlich](https://www.co2signal.com/) – geben Sie Ihre E-Mail-Adresse in das Feld auf dieser Seite ein) und [den Code für Ihre Region](http://api.electricitymap.org/v3/zones) von der [Electricity Map](https://www.electricitymap.org/map) (zum Beispiel verwende ich für Boston "US-NEISO").
![Installation](../../../../../5-browser-extension/install-on-edge.png)
Sobald der API-Schlüssel und die Region in die Benutzeroberfläche der Erweiterung eingegeben wurden, sollte sich der farbige Punkt in der Browser-Erweiterungsleiste ändern, um den Energieverbrauch Ihrer Region widerzuspiegeln. Dies gibt Ihnen einen Hinweis darauf, welche energieintensiven Aktivitäten für Sie geeignet sind. Das Konzept hinter diesem "Punkt"-System wurde mir durch die [Energy Lollipop-Erweiterung](https://energylollipop.com/) für Emissionen in Kalifornien inspiriert.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/solution/translation/README.it.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9a6b22a2eff0f499b66236be973b24ad",
"translation_date": "2025-08-24T13:24:19+00:00",
"source_file": "5-browser-extension/solution/translation/README.it.md",
"language_code": "de"
}
-->
# Carbon Trigger Browser-Erweiterung: Code zum Starten
Die CO2 Signal API von tmrow wird verwendet, um den Stromverbrauch zu überwachen und eine Browser-Erweiterung zu erstellen, die direkt im Browser daran erinnert, wie hoch der Stromverbrauch in der eigenen Region ist. Die Nutzung dieser maßgeschneiderten Erweiterung hilft dabei, die eigenen Aktivitäten basierend auf diesen Informationen zu bewerten.
![Screenshot der Erweiterung](../../../../../5-browser-extension/extension-screenshot.png)
## Erste Schritte
Es ist erforderlich, dass [npm](https://npmjs.com) installiert ist. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle benötigten Pakete:
```
npm install
```
Erstellen Sie die Erweiterung mit webpack:
```
npm run build
```
Um die Erweiterung in Edge zu installieren, verwenden Sie das Menü mit den "drei Punkten" oben rechts im Browser, um das Erweiterungs-Panel zu finden. Falls noch nicht aktiviert, schalten Sie den Entwicklermodus (unten links) ein. Wählen Sie "Entpackt laden", um eine neue Erweiterung zu installieren. Öffnen Sie den Ordner "dist" im Dialogfeld, und die Erweiterung wird geladen. Um sie zu verwenden, benötigen Sie einen API-Schlüssel für die CO2 Signal API (diesen können Sie [hier per E-Mail erhalten](https://www.co2signal.com/) – geben Sie Ihre E-Mail-Adresse in das Feld auf dieser Seite ein) sowie den [Code für Ihre Region](http://api.electricitymap.org/v3/zones), der der [Electricity Map](https://www.electricitymap.org/map) entspricht (zum Beispiel "US-NEISO" für Boston).
![Installation](../../../../../5-browser-extension/install-on-edge.png)
Sobald der API-Schlüssel und die Region in der Benutzeroberfläche der Erweiterung eingegeben wurden, sollte der farbige Punkt in der Browser-Erweiterungsleiste sich ändern, um den Energieverbrauch der Region widerzuspiegeln und Hinweise darauf zu geben, welche energieintensiven Aktivitäten geeignet wären, auszuführen. Das Konzept hinter diesem "Punkt"-System wurde von der [Energy Lollipop Erweiterung](https://energylollipop.com/) für die Emissionen in Kalifornien inspiriert.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/solution/translation/README.ja.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
"translation_date": "2025-08-24T13:25:14+00:00",
"source_file": "5-browser-extension/solution/translation/README.ja.md",
"language_code": "de"
}
-->
# Carbon-Trigger-Browser-Erweiterung: Fertiger Code
Erstellen Sie eine Browser-Erweiterung, die mithilfe der CO2 Signal API von tmrow den Stromverbrauch in Ihrer Region überwacht und als Erinnerung im Browser anzeigt, wie hoch der Energieverbrauch ist. Mit dieser Erweiterung können Sie Ihre Aktivitäten basierend auf diesen Informationen besser planen.
![extension screenshot](../../../../../5-browser-extension/extension-screenshot.png)
## Einführung
Sie benötigen [npm](https://npmjs.com), um loszulegen. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle erforderlichen Pakete.
```
npm install
```
Bauen Sie die Erweiterung mit webpack.
```
npm run build
```
Um die Erweiterung in Edge zu installieren, öffnen Sie das „Drei-Punkte“-Menü oben rechts im Browser und navigieren Sie zum „Erweiterungen“-Panel. Wählen Sie dort „Entpackte Erweiterung laden“ und laden Sie die neue Erweiterung. Öffnen Sie im angezeigten Dialogfeld den „dist“-Ordner, um die Erweiterung zu laden. Um die Erweiterung zu nutzen, benötigen Sie einen API-Schlüssel für die CO2 Signal API ([hier per E-Mail anfordern](https://www.co2signal.com/) – geben Sie Ihre E-Mail-Adresse in das Feld auf der Seite ein) sowie den [Code für Ihre Region](http://api.electricitymap.org/v3/zones), der mit der [Electricity Map](https://www.electricitymap.org/map) kompatibel ist (für Boston beispielsweise 'US-NEISO').
![installing](../../../../../5-browser-extension/install-on-edge.png)
Sobald Sie den API-Schlüssel und Ihre Region in die Erweiterungsschnittstelle eingegeben haben, ändert sich der farbige Punkt in der Browser-Erweiterungsleiste. Dieser Punkt spiegelt den Energieverbrauch in Ihrer Region wider und zeigt an, welche Aktivitäten in Bezug auf den Energiebedarf angemessen sind. Die Idee für dieses „Punkt“-System stammt von der [Energy Lollipop-Erweiterung](https://energylollipop.com/) für Emissionen in Kalifornien.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/solution/translation/README.ms.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "21b364c158c8e4f698de65eeac16c9fe",
"translation_date": "2025-08-24T13:22:30+00:00",
"source_file": "5-browser-extension/solution/translation/README.ms.md",
"language_code": "de"
}
-->
# Carbon Trigger Browser-Erweiterung: Vollständiger Code
Nutzen Sie die CO2-Signal-API von tmrow, um den Stromverbrauch zu überwachen, und erstellen Sie eine Browser-Erweiterung, die Sie im Browser über die Intensität des Stromverbrauchs in Ihrer Region informiert. Die Verwendung dieser Erweiterung hilft Ihnen, Ihre Aktivitäten basierend auf diesen Informationen bewusster zu planen.
![Screenshot der Browser-Erweiterung](../../../../../5-browser-extension/extension-screenshot.png)
## Erste Schritte
Sie müssen [npm](https://npmjs.com) installiert haben. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle benötigten Pakete:
```
npm install
```
Erstellen Sie die Erweiterung mit Webpack:
```
npm run build
```
Um die Erweiterung in Edge zu installieren, verwenden Sie das Menü mit den „drei Punkten“ in der oberen rechten Ecke des Browsers, um das Erweiterungs-Panel zu finden. Wählen Sie dort „Entpackte Erweiterung laden“, um die neue Erweiterung zu installieren. Öffnen Sie den Ordner „dist“, wenn Sie dazu aufgefordert werden, und die Erweiterung wird geladen. Um sie zu verwenden, benötigen Sie einen API-Schlüssel für die CO2-Signal-API ([hier per E-Mail anfordern](https://www.co2signal.com/) – geben Sie Ihre E-Mail-Adresse in das Feld auf der Seite ein) sowie [den Code für Ihre Region](http://api.electricitymap.org/v3/zones), der mit der [Electricity Map](https://www.electricitymap.org/map) übereinstimmt (in Boston zum Beispiel verwende ich „US-NEISO“).
![wird heruntergeladen](../../../../../5-browser-extension/install-on-edge.png)
Sobald der API-Schlüssel und die Region in die Benutzeroberfläche der Erweiterung eingegeben wurden, ändert sich der farbige Punkt in der Browser-Erweiterungsleiste, um den Energieverbrauch Ihrer Region widerzuspiegeln. Er gibt Ihnen Hinweise darauf, welche energieintensiven Aktivitäten Sie durchführen sollten. Die Idee hinter diesem „Punkt“-System wurde von der [Energy Lollipop Browser-Erweiterung](https://energylollipop.com/) für Kalifornien inspiriert.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

39
translations/de/5-browser-extension/start/README.md Normal file
View File

@@ -0,0 +1,39 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
"translation_date": "2025-08-24T13:12:06+00:00",
"source_file": "5-browser-extension/start/README.md",
"language_code": "de"
}
-->
# Carbon Trigger Browser-Erweiterung: Starter-Code
Verwenden Sie die CO2 Signal API von tmrow, um den Stromverbrauch zu verfolgen, und erstellen Sie eine Browser-Erweiterung, damit Sie direkt in Ihrem Browser eine Erinnerung daran haben, wie stark der Stromverbrauch in Ihrer Region ist. Die gelegentliche Nutzung dieser Erweiterung hilft Ihnen, Entscheidungen über Ihre Aktivitäten basierend auf diesen Informationen zu treffen.
![Erweiterung Screenshot](../../../../5-browser-extension/extension-screenshot.png)
## Erste Schritte
Sie müssen [npm](https://npmjs.com) installiert haben. Laden Sie eine Kopie dieses Codes in einen Ordner auf Ihrem Computer herunter.
Installieren Sie alle erforderlichen Pakete:
```
npm install
```
Bauen Sie die Erweiterung mit Webpack:
```
npm run build
```
Um die Erweiterung in Edge zu installieren, verwenden Sie das Menü mit den 'drei Punkten' in der oberen rechten Ecke des Browsers, um das Erweiterungs-Panel zu finden. Wählen Sie dort 'Entpackt laden', um eine neue Erweiterung zu laden. Öffnen Sie den Ordner 'dist' bei der Aufforderung, und die Erweiterung wird geladen. Um sie zu verwenden, benötigen Sie einen API-Schlüssel für die CO2 Signal API ([hier per E-Mail anfordern](https://www.co2signal.com/) - geben Sie Ihre E-Mail-Adresse in das Feld auf dieser Seite ein) und den [Code für Ihre Region](http://api.electricitymap.org/v3/zones), der der [Electricity Map](https://www.electricitymap.org/map) entspricht (in Boston verwende ich zum Beispiel 'US-NEISO').
![Installation](../../../../5-browser-extension/install-on-edge.png)
Sobald der API-Schlüssel und die Region in die Erweiterungsschnittstelle eingegeben wurden, sollte sich der farbige Punkt in der Browser-Erweiterungsleiste ändern, um den Energieverbrauch Ihrer Region widerzuspiegeln, und Ihnen Hinweise darauf geben, welche energieintensiven Aktivitäten für Sie angemessen wären. Das Konzept hinter diesem 'Punkt'-System wurde mir von der [Energy Lollipop-Erweiterung](https://energylollipop.com/) für Emissionen in Kalifornien inspiriert.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

236
translations/de/6-space-game/1-introduction/README.md Normal file
View File

@@ -0,0 +1,236 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "d9da6dc61fb712b29f65e108c79b8a5d",
"translation_date": "2025-08-24T12:40:15+00:00",
"source_file": "6-space-game/1-introduction/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel Teil 1: Einführung
![video](../../../../6-space-game/images/pewpew.gif)
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
### Vererbung und Komposition in der Spieleentwicklung
In den vorherigen Lektionen war es nicht notwendig, sich Gedanken über die Architektur der Apps zu machen, da die Projekte sehr klein waren. Wenn jedoch deine Anwendungen größer werden, werden architektonische Entscheidungen immer wichtiger. Es gibt zwei Hauptansätze, um größere Anwendungen in JavaScript zu erstellen: *Komposition* oder *Vererbung*. Beide haben Vor- und Nachteile, aber wir erklären sie im Kontext eines Spiels.
✅ Eines der bekanntesten Programmierbücher aller Zeiten beschäftigt sich mit [Design Patterns](https://en.wikipedia.org/wiki/Design_Patterns).
In einem Spiel gibt es `Spielobjekte`, die Objekte sind, die auf einem Bildschirm existieren. Das bedeutet, dass sie eine Position in einem kartesischen Koordinatensystem haben, charakterisiert durch `x`- und `y`-Koordinaten. Während du ein Spiel entwickelst, wirst du feststellen, dass alle deine Spielobjekte eine Standard-Eigenschaft haben, die für jedes Spiel, das du erstellst, gleich ist. Diese Elemente sind:
- **positionsbasiert** Die meisten, wenn nicht alle, Spielelemente sind positionsbasiert. Das bedeutet, dass sie eine Position haben, ein `x` und ein `y`.
- **beweglich** Dies sind Objekte, die sich an eine neue Position bewegen können. Typischerweise handelt es sich um einen Helden, ein Monster oder einen NPC (einen Nicht-Spieler-Charakter), aber nicht z. B. um ein statisches Objekt wie einen Baum.
- **selbstzerstörend** Diese Objekte existieren nur für eine bestimmte Zeit, bevor sie sich selbst zur Löschung vorbereiten. Dies wird normalerweise durch ein `dead`- oder `destroyed`-Boolean dargestellt, das der Spiel-Engine signalisiert, dass dieses Objekt nicht mehr gerendert werden soll.
- **Abklingzeit** 'Abklingzeit' ist eine typische Eigenschaft von kurzlebigen Objekten. Ein typisches Beispiel ist ein Textstück oder ein grafischer Effekt wie eine Explosion, die nur für ein paar Millisekunden sichtbar sein soll.
✅ Denke an ein Spiel wie Pac-Man. Kannst du die vier oben genannten Objekttypen in diesem Spiel identifizieren?
### Verhalten ausdrücken
Alles, was wir oben beschrieben haben, sind Verhaltensweisen, die Spielobjekte haben können. Aber wie kodieren wir diese? Wir können dieses Verhalten als Methoden ausdrücken, die entweder Klassen oder Objekten zugeordnet sind.
**Klassen**
Die Idee ist, `Klassen` in Verbindung mit `Vererbung` zu verwenden, um einer Klasse ein bestimmtes Verhalten hinzuzufügen.
✅ Vererbung ist ein wichtiges Konzept, das es zu verstehen gilt. Erfahre mehr im [MDN-Artikel über Vererbung](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
In Code ausgedrückt, könnte ein Spielobjekt typischerweise so aussehen:
```javascript
//set up the class GameObject
class GameObject {
constructor(x, y, type) {
this.x = x;
this.y = y;
this.type = type;
}
}
//this class will extend the GameObject's inherent class properties
class Movable extends GameObject {
constructor(x,y, type) {
super(x,y, type)
}
//this movable object can be moved on the screen
moveTo(x, y) {
this.x = x;
this.y = y;
}
}
//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
class Hero extends Movable {
constructor(x,y) {
super(x,y, 'Hero')
}
}
//this class, on the other hand, only inherits the GameObject properties
class Tree extends GameObject {
constructor(x,y) {
super(x,y, 'Tree')
}
}
//a hero can move...
const hero = new Hero();
hero.moveTo(5,5);
//but a tree cannot
const tree = new Tree();
```
✅ Nimm dir ein paar Minuten Zeit, um dir einen Pac-Man-Helden (z. B. Inky, Pinky oder Blinky) vorzustellen und wie er in JavaScript geschrieben werden könnte.
**Komposition**
Ein anderer Ansatz zur Handhabung von Objektvererbung ist die Verwendung von *Komposition*. Dabei drücken Objekte ihr Verhalten so aus:
```javascript
//create a constant gameObject
const gameObject = {
x: 0,
y: 0,
type: ''
};
//...and a constant movable
const movable = {
moveTo(x, y) {
this.x = x;
this.y = y;
}
}
//then the constant movableObject is composed of the gameObject and movable constants
const movableObject = {...gameObject, ...movable};
//then create a function to create a new Hero who inherits the movableObject properties
function createHero(x, y) {
return {
...movableObject,
x,
y,
type: 'Hero'
}
}
//...and a static object that inherits only the gameObject properties
function createStatic(x, y, type) {
return {
...gameObject
x,
y,
type
}
}
//create the hero and move it
const hero = createHero(10,10);
hero.moveTo(5,5);
//and create a static tree which only stands around
const tree = createStatic(0,0, 'Tree');
```
**Welches Muster sollte ich verwenden?**
Es liegt an dir, welches Muster du wählst. JavaScript unterstützt beide Paradigmen.
--
Ein weiteres Muster, das in der Spieleentwicklung häufig vorkommt, befasst sich mit der Benutzererfahrung und der Leistung des Spiels.
## Pub/Sub-Muster
✅ Pub/Sub steht für 'Publish-Subscribe' (Veröffentlichen-Abonnieren)
Dieses Muster behandelt die Idee, dass die verschiedenen Teile deiner Anwendung nichts voneinander wissen sollten. Warum? Es macht es viel einfacher, den Überblick zu behalten, wenn die verschiedenen Teile getrennt sind. Außerdem wird es einfacher, das Verhalten bei Bedarf plötzlich zu ändern. Wie erreichen wir das? Indem wir einige Konzepte einführen:
- **Nachricht**: Eine Nachricht ist normalerweise ein Textstring, begleitet von einer optionalen Nutzlast (ein Datenstück, das klärt, worum es bei der Nachricht geht). Eine typische Nachricht in einem Spiel könnte `KEY_PRESSED_ENTER` sein.
- **Publisher**: Dieses Element *veröffentlicht* eine Nachricht und sendet sie an alle Abonnenten.
- **Subscriber**: Dieses Element *hört* auf bestimmte Nachrichten und führt als Reaktion auf den Empfang dieser Nachricht eine Aufgabe aus, z. B. das Abfeuern eines Lasers.
Die Implementierung ist recht klein, aber es ist ein sehr mächtiges Muster. So kann es implementiert werden:
```javascript
//set up an EventEmitter class that contains listeners
class EventEmitter {
constructor() {
this.listeners = {};
}
//when a message is received, let the listener to handle its payload
on(message, listener) {
if (!this.listeners[message]) {
this.listeners[message] = [];
}
this.listeners[message].push(listener);
}
//when a message is sent, send it to a listener with some payload
emit(message, payload = null) {
if (this.listeners[message]) {
this.listeners[message].forEach(l => l(message, payload))
}
}
}
```
Um den obigen Code zu verwenden, können wir eine sehr kleine Implementierung erstellen:
```javascript
//set up a message structure
const Messages = {
HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
};
//invoke the eventEmitter you set up above
const eventEmitter = new EventEmitter();
//set up a hero
const hero = createHero(0,0);
//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
hero.move(5,0);
});
//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
window.addEventListener('keyup', (evt) => {
if (evt.key === 'ArrowLeft') {
eventEmitter.emit(Messages.HERO_MOVE_LEFT)
}
});
```
Oben verbinden wir ein Tastaturereignis, `ArrowLeft`, und senden die Nachricht `HERO_MOVE_LEFT`. Wir hören auf diese Nachricht und bewegen den `Helden` als Ergebnis. Die Stärke dieses Musters liegt darin, dass der Event-Listener und der Held nichts voneinander wissen. Du kannst `ArrowLeft` auf die Taste `A` umlegen. Außerdem wäre es möglich, bei `ArrowLeft` etwas völlig anderes zu tun, indem du ein paar Änderungen an der `on`-Funktion des EventEmitters vornimmst:
```javascript
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
hero.move(5,0);
});
```
Wenn dein Spiel wächst und komplexer wird, bleibt dieses Muster gleich in seiner Komplexität und dein Code bleibt sauber. Es wird wirklich empfohlen, dieses Muster zu übernehmen.
---
## 🚀 Herausforderung
Überlege, wie das Pub-Sub-Muster ein Spiel verbessern kann. Welche Teile sollten Ereignisse auslösen, und wie sollte das Spiel darauf reagieren? Jetzt hast du die Chance, kreativ zu werden und dir ein neues Spiel auszudenken, sowie das Verhalten seiner Teile zu planen.
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
## Rückblick & Selbststudium
Erfahre mehr über Pub/Sub, indem du [darüber liest](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
## Aufgabe
[Entwirf ein Spiel](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/6-space-game/1-introduction/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "009bdedee9cc82988264be8cb31f9bf4",
"translation_date": "2025-08-24T12:41:44+00:00",
"source_file": "6-space-game/1-introduction/assignment.md",
"language_code": "de"
}
-->
# Entwerfe ein Spiel
## Anweisungen
Nutze die Codebeispiele aus der Lektion, um eine Darstellung eines Spiels zu schreiben, das dir gefällt. Es sollte ein einfaches Spiel sein, aber das Ziel ist es, entweder das Klassen- oder das Kompositionsmuster sowie das Pub/Sub-Muster zu verwenden, um zu zeigen, wie ein Spiel gestartet werden könnte. Werde kreativ!
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | -------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------- |
| | Drei Elemente werden auf dem Bildschirm platziert und manipuliert | Zwei Elemente werden auf dem Bildschirm platziert und manipuliert | Ein Element wird auf dem Bildschirm platziert und manipuliert |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

228
translations/de/6-space-game/2-drawing-to-canvas/README.md Normal file
View File

@@ -0,0 +1,228 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "41be8d35e7f30aa9dad10773c35e89c4",
"translation_date": "2025-08-24T12:33:59+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel Teil 2: Zeichne Held und Monster auf die Leinwand
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
## Die Leinwand
Die Leinwand ist ein HTML-Element, das standardmäßig keinen Inhalt hat; sie ist eine leere Fläche. Du musst darauf zeichnen, um Inhalte hinzuzufügen.
✅ Lies [mehr über die Canvas-API](https://developer.mozilla.org/docs/Web/API/Canvas_API) auf MDN.
So wird sie typischerweise als Teil des Seitenkörpers deklariert:
```html
<canvas id="myCanvas" width="200" height="100"></canvas>
```
Oben setzen wir die Attribute `id`, `width` und `height`.
- `id`: Setze dies, damit du eine Referenz erhalten kannst, wenn du mit der Leinwand interagieren möchtest.
- `width`: Dies ist die Breite des Elements.
- `height`: Dies ist die Höhe des Elements.
## Zeichnen einfacher Geometrie
Die Leinwand verwendet ein kartesisches Koordinatensystem, um Dinge zu zeichnen. Sie nutzt daher eine x-Achse und eine y-Achse, um auszudrücken, wo sich etwas befindet. Die Position `0,0` ist die obere linke Ecke, und die untere rechte Ecke entspricht der von dir festgelegten BREITE und HÖHE der Leinwand.
![Das Raster der Leinwand](../../../../6-space-game/2-drawing-to-canvas/canvas_grid.png)
> Bild von [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Um auf das Leinwand-Element zu zeichnen, musst du die folgenden Schritte durchlaufen:
1. **Hole eine Referenz** zum Canvas-Element.
2. **Hole eine Referenz** zum Kontext-Element, das auf dem Canvas-Element sitzt.
3. **Führe eine Zeichenoperation** mit dem Kontext-Element aus.
Der Code für die oben genannten Schritte sieht normalerweise so aus:
```javascript
// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");
//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");
//3. fill it with the color red
ctx.fillStyle = 'red';
//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height
```
✅ Die Canvas-API konzentriert sich hauptsächlich auf 2D-Formen, aber du kannst auch 3D-Elemente auf einer Webseite zeichnen; dafür könntest du die [WebGL-API](https://developer.mozilla.org/docs/Web/API/WebGL_API) verwenden.
Mit der Canvas-API kannst du allerlei Dinge zeichnen, wie:
- **Geometrische Formen**: Wir haben bereits gezeigt, wie man ein Rechteck zeichnet, aber es gibt noch viel mehr, was du zeichnen kannst.
- **Text**: Du kannst Text mit beliebiger Schriftart und Farbe zeichnen.
- **Bilder**: Du kannst ein Bild basierend auf einer Bilddatei wie z. B. .jpg oder .png zeichnen.
✅ Probier es aus! Du weißt, wie man ein Rechteck zeichnet – kannst du einen Kreis auf eine Seite zeichnen? Schau dir einige interessante Canvas-Zeichnungen auf CodePen an. Hier ist ein [besonders beeindruckendes Beispiel](https://codepen.io/dissimulate/pen/KrAwx).
## Lade und zeichne ein Bild-Asset
Du lädst ein Bild-Asset, indem du ein `Image`-Objekt erstellst und dessen `src`-Eigenschaft setzt. Dann hörst du auf das `load`-Event, um zu wissen, wann es bereit ist, verwendet zu werden. Der Code sieht so aus:
### Asset laden
```javascript
const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
// image loaded and ready to be used
}
```
### Asset-Lade-Muster
Es wird empfohlen, das oben Genannte in eine Konstruktion wie diese einzubinden, damit es einfacher zu verwenden ist und du es nur dann manipulierst, wenn es vollständig geladen ist:
```javascript
function loadAsset(path) {
return new Promise((resolve) => {
const img = new Image();
img.src = path;
img.onload = () => {
// image loaded and ready to be used
resolve(img);
}
})
}
// use like so
async function run() {
const heroImg = await loadAsset('hero.png')
const monsterImg = await loadAsset('monster.png')
}
```
Um Spiel-Assets auf einen Bildschirm zu zeichnen, würde dein Code so aussehen:
```javascript
async function run() {
const heroImg = await loadAsset('hero.png')
const monsterImg = await loadAsset('monster.png')
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
ctx.drawImage(monsterImg, 0,0);
}
```
## Jetzt ist es Zeit, dein Spiel zu entwickeln
### Was du bauen sollst
Du wirst eine Webseite mit einem Canvas-Element erstellen. Es sollte einen schwarzen Bildschirm mit den Maßen `1024*768` rendern. Wir haben dir zwei Bilder bereitgestellt:
- Helden-Schiff
![Helden-Schiff](../../../../6-space-game/2-drawing-to-canvas/solution/assets/player.png)
- 5*5 Monster
![Monster-Schiff](../../../../6-space-game/2-drawing-to-canvas/solution/assets/enemyShip.png)
### Empfohlene Schritte für den Entwicklungsstart
Finde die Dateien, die für dich im Unterordner `your-work` erstellt wurden. Sie sollten Folgendes enthalten:
```bash
-| assets
-| enemyShip.png
-| player.png
-| index.html
-| app.js
-| package.json
```
Öffne eine Kopie dieses Ordners in Visual Studio Code. Du solltest eine lokale Entwicklungsumgebung eingerichtet haben, vorzugsweise mit Visual Studio Code, NPM und Node installiert. Falls du `npm` noch nicht auf deinem Computer eingerichtet hast, [hier erfährst du, wie das geht](https://www.npmjs.com/get-npm).
Starte dein Projekt, indem du zum Ordner `your_work` navigierst:
```bash
cd your-work
npm start
```
Das obige startet einen HTTP-Server unter der Adresse `http://localhost:5000`. Öffne einen Browser und gib diese Adresse ein. Es ist momentan eine leere Seite, aber das wird sich ändern.
> Hinweis: Um Änderungen auf deinem Bildschirm zu sehen, aktualisiere deinen Browser.
### Code hinzufügen
Füge den benötigten Code zu `your-work/app.js` hinzu, um die folgenden Aufgaben zu lösen:
1. **Zeichne** eine Leinwand mit schwarzem Hintergrund
> Tipp: Füge zwei Zeilen unter dem entsprechenden TODO in `/app.js` hinzu, indem du das `ctx`-Element auf Schwarz setzt und die oberen/linken Koordinaten auf 0,0 sowie die Höhe und Breite auf die der Leinwand setzt.
2. **Lade** Texturen
> Tipp: Lade die Spieler- und Gegnerbilder mit `await loadTexture` und übergebe den Bildpfad. Du wirst sie noch nicht auf dem Bildschirm sehen!
3. **Zeichne** den Helden in die Mitte des unteren Bildschirmbereichs
> Tipp: Verwende die `drawImage`-API, um heroImg auf den Bildschirm zu zeichnen, und setze `canvas.width / 2 - 45` und `canvas.height - canvas.height / 4)`.
4. **Zeichne** 5*5 Monster
> Tipp: Jetzt kannst du den Code zum Zeichnen der Gegner auf dem Bildschirm auskommentieren. Gehe anschließend zur Funktion `createEnemies` und baue sie aus.
Zuerst, setze einige Konstanten:
```javascript
const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;
```
Dann erstelle eine Schleife, um das Array der Monster auf den Bildschirm zu zeichnen:
```javascript
for (let x = START_X; x < STOP_X; x += 98) {
for (let y = 0; y < 50 * 5; y += 50) {
ctx.drawImage(enemyImg, x, y);
}
}
```
## Ergebnis
Das fertige Ergebnis sollte so aussehen:
![Schwarzer Bildschirm mit einem Helden und 5*5 Monstern](../../../../6-space-game/2-drawing-to-canvas/partI-solution.png)
## Lösung
Versuche zuerst, es selbst zu lösen, aber wenn du nicht weiterkommst, sieh dir eine [Lösung](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) an.
---
## 🚀 Herausforderung
Du hast gelernt, mit der 2D-fokussierten Canvas-API zu zeichnen; schau dir die [WebGL-API](https://developer.mozilla.org/docs/Web/API/WebGL_API) an und versuche, ein 3D-Objekt zu zeichnen.
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
## Rückblick & Selbststudium
Lerne mehr über die Canvas-API, indem du [darüber liest](https://developer.mozilla.org/docs/Web/API/Canvas_API).
## Aufgabe
[Spiele mit der Canvas-API](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/6-space-game/2-drawing-to-canvas/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ca1cf78a4c60df77ab32a154ec024d7f",
"translation_date": "2025-08-24T12:35:34+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
"language_code": "de"
}
-->
# Experimentiere mit der Canvas-API
## Anweisungen
Wähle ein Element der Canvas-API aus und gestalte etwas Interessantes damit. Kannst du eine kleine Galaxie aus wiederholten Sternen erschaffen? Kannst du eine interessante Textur aus farbigen Linien erstellen? Du kannst dir auf CodePen Inspiration holen (aber nicht kopieren).
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | -------------------------------------------------------- | ----------------------------------- | --------------------- |
| | Code wird eingereicht und zeigt eine interessante Textur oder Form | Code wird eingereicht, läuft aber nicht | Code wird nicht eingereicht |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

400
translations/de/6-space-game/3-moving-elements-around/README.md Normal file
View File

@@ -0,0 +1,400 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "23f088add24f0f1fa51014a9e27ea280",
"translation_date": "2025-08-24T12:30:47+00:00",
"source_file": "6-space-game/3-moving-elements-around/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel Teil 3: Bewegung hinzufügen
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
Spiele machen erst dann richtig Spaß, wenn Aliens über den Bildschirm laufen! In diesem Spiel werden wir zwei Arten von Bewegungen nutzen:
- **Tastatur-/Mausbewegung**: wenn der Benutzer mit der Tastatur oder Maus interagiert, um ein Objekt auf dem Bildschirm zu bewegen.
- **Spielinduzierte Bewegung**: wenn das Spiel ein Objekt in bestimmten Zeitintervallen bewegt.
Wie bewegt man also Dinge auf einem Bildschirm? Es dreht sich alles um kartesische Koordinaten: Wir ändern die Position (x, y) des Objekts und zeichnen dann den Bildschirm neu.
Typischerweise sind folgende Schritte notwendig, um *Bewegung* auf einem Bildschirm zu realisieren:
1. **Setze eine neue Position** für ein Objekt; dies ist notwendig, damit das Objekt als bewegt wahrgenommen wird.
2. **Leere den Bildschirm**, der Bildschirm muss zwischen den Zeichnungen geleert werden. Dies kann durch das Zeichnen eines Rechtecks mit einer Hintergrundfarbe erfolgen.
3. **Zeichne das Objekt neu** an der neuen Position. Dadurch wird das Objekt schließlich von einer Position zur anderen bewegt.
So könnte das im Code aussehen:
```javascript
//set the hero's location
hero.x += 5;
// clear the rectangle that hosts the hero
ctx.clearRect(0, 0, canvas.width, canvas.height);
// redraw the game background and hero
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);
```
✅ Kannst du dir vorstellen, warum das Neuzeichnen deines Helden viele Male pro Sekunde zu Leistungseinbußen führen könnte? Lies mehr über [Alternativen zu diesem Muster](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
## Tastaturereignisse behandeln
Ereignisse werden behandelt, indem spezifische Ereignisse mit Code verknüpft werden. Tastaturereignisse werden für das gesamte Fenster ausgelöst, während Mausereignisse wie ein `click` mit einem bestimmten Element verbunden werden können. In diesem Projekt werden wir Tastaturereignisse verwenden.
Um ein Ereignis zu behandeln, musst du die Methode `addEventListener()` des Fensters verwenden und ihr zwei Eingabeparameter übergeben. Der erste Parameter ist der Name des Ereignisses, z. B. `keyup`. Der zweite Parameter ist die Funktion, die als Ergebnis des Ereignisses aufgerufen werden soll.
Hier ist ein Beispiel:
```javascript
window.addEventListener('keyup', (evt) => {
// `evt.key` = string representation of the key
if (evt.key === 'ArrowUp') {
// do something
}
})
```
Für Tastaturereignisse gibt es zwei Eigenschaften des Ereignisses, die du verwenden kannst, um zu sehen, welche Taste gedrückt wurde:
- `key`, dies ist eine String-Darstellung der gedrückten Taste, z. B. `ArrowUp`.
- `keyCode`, dies ist eine numerische Darstellung, z. B. `37`, was `ArrowLeft` entspricht.
✅ Die Manipulation von Tastaturereignissen ist auch außerhalb der Spieleentwicklung nützlich. Welche anderen Anwendungen kannst du dir für diese Technik vorstellen?
### Besondere Tasten: ein Hinweis
Es gibt einige *besondere* Tasten, die das Fenster beeinflussen. Das bedeutet, dass, wenn du ein `keyup`-Ereignis hörst und diese besonderen Tasten benutzt, um deinen Helden zu bewegen, auch ein horizontales Scrollen ausgelöst wird. Aus diesem Grund möchtest du möglicherweise dieses eingebaute Browserverhalten *deaktivieren*, während du dein Spiel entwickelst. Dafür benötigst du Code wie diesen:
```javascript
let onKeyDown = function (e) {
console.log(e.keyCode);
switch (e.keyCode) {
case 37:
case 39:
case 38:
case 40: // Arrow keys
case 32:
e.preventDefault();
break; // Space
default:
break; // do not block other keys
}
};
window.addEventListener('keydown', onKeyDown);
```
Der obige Code stellt sicher, dass die Pfeiltasten und die Leertaste ihr *Standardverhalten* deaktivieren. Der Mechanismus zur Deaktivierung erfolgt, wenn wir `e.preventDefault()` aufrufen.
## Spielinduzierte Bewegung
Wir können Dinge von selbst bewegen, indem wir Timer wie die Funktionen `setTimeout()` oder `setInterval()` verwenden, die die Position des Objekts bei jedem Tick oder Zeitintervall aktualisieren. So könnte das aussehen:
```javascript
let id = setInterval(() => {
//move the enemy on the y axis
enemy.y += 10;
})
```
## Die Spielschleife
Die Spielschleife ist ein Konzept, das im Wesentlichen eine Funktion ist, die in regelmäßigen Abständen aufgerufen wird. Sie wird als Spielschleife bezeichnet, da alles, was für den Benutzer sichtbar sein soll, in der Schleife gezeichnet wird. Die Spielschleife verwendet alle Spielobjekte, die Teil des Spiels sind, und zeichnet sie, es sei denn, sie sollten aus irgendeinem Grund nicht mehr Teil des Spiels sein. Zum Beispiel, wenn ein Objekt ein Feind ist, der von einem Laser getroffen wird und explodiert, ist es nicht mehr Teil der aktuellen Spielschleife (du wirst mehr darüber in den nächsten Lektionen lernen).
So könnte eine Spielschleife typischerweise im Code aussehen:
```javascript
let gameLoopId = setInterval(() =>
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawHero();
drawEnemies();
drawStaticObjects();
}, 200);
```
Die obige Schleife wird alle `200` Millisekunden aufgerufen, um die Leinwand neu zu zeichnen. Du kannst das Intervall wählen, das für dein Spiel am sinnvollsten ist.
## Fortsetzung des Weltraumspiels
Du wirst den bestehenden Code erweitern. Entweder beginnst du mit dem Code, den du in Teil I abgeschlossen hast, oder du verwendest den Code aus [Teil II - Starter](../../../../6-space-game/3-moving-elements-around/your-work).
- **Bewegung des Helden**: Du wirst Code hinzufügen, um sicherzustellen, dass du den Helden mit den Pfeiltasten bewegen kannst.
- **Bewegung der Feinde**: Du wirst auch Code hinzufügen, um sicherzustellen, dass sich die Feinde mit einer bestimmten Geschwindigkeit von oben nach unten bewegen.
## Empfohlene Schritte
Finde die Dateien, die für dich im Unterordner `your-work` erstellt wurden. Sie sollten Folgendes enthalten:
```bash
-| assets
-| enemyShip.png
-| player.png
-| index.html
-| app.js
-| package.json
```
Starte dein Projekt im Ordner `your_work`, indem du Folgendes eingibst:
```bash
cd your-work
npm start
```
Das obige startet einen HTTP-Server unter der Adresse `http://localhost:5000`. Öffne einen Browser und gib diese Adresse ein. Im Moment sollten der Held und alle Feinde angezeigt werden; noch bewegt sich nichts!
### Code hinzufügen
1. **Füge dedizierte Objekte** für `hero`, `enemy` und `game object` hinzu, die `x`- und `y`-Eigenschaften haben. (Erinnere dich an den Abschnitt über [Vererbung oder Komposition](../README.md)).
*TIPP*: `game object` sollte das Objekt sein, das `x` und `y` sowie die Fähigkeit hat, sich selbst auf eine Leinwand zu zeichnen.
> Tipp: Beginne damit, eine neue GameObject-Klasse mit ihrem Konstruktor wie unten dargestellt hinzuzufügen, und zeichne sie dann auf die Leinwand:
```javascript
class GameObject {
constructor(x, y) {
this.x = x;
this.y = y;
this.dead = false;
this.type = "";
this.width = 0;
this.height = 0;
this.img = undefined;
}
draw(ctx) {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
```
Erweitere nun dieses GameObject, um den Helden und den Feind zu erstellen.
```javascript
class Hero extends GameObject {
constructor(x, y) {
...it needs an x, y, type, and speed
}
}
```
```javascript
class Enemy extends GameObject {
constructor(x, y) {
super(x, y);
(this.width = 98), (this.height = 50);
this.type = "Enemy";
let id = setInterval(() => {
if (this.y < canvas.height - this.height) {
this.y += 5;
} else {
console.log('Stopped at', this.y)
clearInterval(id);
}
}, 300)
}
}
```
2. **Füge Ereignis-Handler für Tasten** hinzu, um die Navigation (Bewegung des Helden nach oben/unten, links/rechts) zu steuern.
*DENKE DARAN*: Es handelt sich um ein kartesisches System, oben links ist `0,0`. Denke auch daran, Code hinzuzufügen, um das *Standardverhalten* zu deaktivieren.
> Tipp: Erstelle deine onKeyDown-Funktion und verknüpfe sie mit dem Fenster:
```javascript
let onKeyDown = function (e) {
console.log(e.keyCode);
...add the code from the lesson above to stop default behavior
}
};
window.addEventListener("keydown", onKeyDown);
```
Überprüfe zu diesem Zeitpunkt die Konsole deines Browsers und beobachte, wie die Tastenanschläge protokolliert werden.
3. **Implementiere** das [Pub-Sub-Muster](../README.md), um deinen Code sauber zu halten, während du die verbleibenden Teile umsetzt.
Um diesen letzten Teil umzusetzen, kannst du:
1. **Einen Ereignis-Listener** für das Fenster hinzufügen:
```javascript
window.addEventListener("keyup", (evt) => {
if (evt.key === "ArrowUp") {
eventEmitter.emit(Messages.KEY_EVENT_UP);
} else if (evt.key === "ArrowDown") {
eventEmitter.emit(Messages.KEY_EVENT_DOWN);
} else if (evt.key === "ArrowLeft") {
eventEmitter.emit(Messages.KEY_EVENT_LEFT);
} else if (evt.key === "ArrowRight") {
eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
}
});
```
1. **Eine EventEmitter-Klasse erstellen**, um Nachrichten zu veröffentlichen und zu abonnieren:
```javascript
class EventEmitter {
constructor() {
this.listeners = {};
}
on(message, listener) {
if (!this.listeners[message]) {
this.listeners[message] = [];
}
this.listeners[message].push(listener);
}
emit(message, payload = null) {
if (this.listeners[message]) {
this.listeners[message].forEach((l) => l(message, payload));
}
}
}
```
1. **Konstanten hinzufügen** und den EventEmitter einrichten:
```javascript
const Messages = {
KEY_EVENT_UP: "KEY_EVENT_UP",
KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
};
let heroImg,
enemyImg,
laserImg,
canvas, ctx,
gameObjects = [],
hero,
eventEmitter = new EventEmitter();
```
1. **Das Spiel initialisieren**
```javascript
function initGame() {
gameObjects = [];
createEnemies();
createHero();
eventEmitter.on(Messages.KEY_EVENT_UP, () => {
hero.y -=5 ;
})
eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
hero.y += 5;
});
eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
hero.x -= 5;
});
eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
hero.x += 5;
});
}
```
1. **Richte die Spielschleife ein**
Refaktoriere die window.onload-Funktion, um das Spiel zu initialisieren und eine Spielschleife in einem geeigneten Intervall einzurichten. Du wirst auch einen Laserstrahl hinzufügen:
```javascript
window.onload = async () => {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
heroImg = await loadTexture("assets/player.png");
enemyImg = await loadTexture("assets/enemyShip.png");
laserImg = await loadTexture("assets/laserRed.png");
initGame();
let gameLoopId = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawGameObjects(ctx);
}, 100)
};
```
5. **Füge Code hinzu**, um Feinde in bestimmten Intervallen zu bewegen.
Refaktoriere die Funktion `createEnemies()`, um die Feinde zu erstellen und sie in die neue GameObjects-Klasse zu schieben:
```javascript
function createEnemies() {
const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;
for (let x = START_X; x < STOP_X; x += 98) {
for (let y = 0; y < 50 * 5; y += 50) {
const enemy = new Enemy(x, y);
enemy.img = enemyImg;
gameObjects.push(enemy);
}
}
}
```
und füge eine Funktion `createHero()` hinzu, um einen ähnlichen Prozess für den Helden durchzuführen.
```javascript
function createHero() {
hero = new Hero(
canvas.width / 2 - 45,
canvas.height - canvas.height / 4
);
hero.img = heroImg;
gameObjects.push(hero);
}
```
und schließlich füge eine Funktion `drawGameObjects()` hinzu, um das Zeichnen zu starten:
```javascript
function drawGameObjects(ctx) {
gameObjects.forEach(go => go.draw(ctx));
}
```
Deine Feinde sollten beginnen, auf dein Raumschiff zuzugehen!
---
## 🚀 Herausforderung
Wie du sehen kannst, kann dein Code zu einem "Spaghetti-Code" werden, wenn du Funktionen, Variablen und Klassen hinzufügst. Wie kannst du deinen Code besser organisieren, damit er lesbarer wird? Skizziere ein System, um deinen Code zu organisieren, auch wenn er weiterhin in einer Datei bleibt.
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
## Überprüfung & Selbststudium
Während wir unser Spiel ohne Frameworks schreiben, gibt es viele JavaScript-basierte Canvas-Frameworks für die Spieleentwicklung. Nimm dir Zeit, um [darüber zu lesen](https://github.com/collections/javascript-game-engines).
## Aufgabe
[Kommentiere deinen Code](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/6-space-game/3-moving-elements-around/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ccfcd8c2932761359fbaff3d6b01ace4",
"translation_date": "2025-08-24T12:32:53+00:00",
"source_file": "6-space-game/3-moving-elements-around/assignment.md",
"language_code": "de"
}
-->
# Kommentiere deinen Code
## Anweisungen
Gehe deine aktuelle /app.js-Datei in deinem Spielordner durch und finde Möglichkeiten, sie zu kommentieren und aufzuräumen. Es ist sehr einfach, dass Code außer Kontrolle gerät, und jetzt ist eine gute Gelegenheit, Kommentare hinzuzufügen, um sicherzustellen, dass dein Code lesbar bleibt und du ihn später verwenden kannst.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------------------- |
| | Der `app.js`-Code ist vollständig kommentiert und in logische Blöcke organisiert | Der `app.js`-Code ist ausreichend kommentiert | Der `app.js`-Code ist etwas unorganisiert und es fehlen gute Kommentare |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

309
translations/de/6-space-game/4-collision-detection/README.md Normal file
View File

@@ -0,0 +1,309 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "2e83e38c35dc003f046d7cc0bbfd4920",
"translation_date": "2025-08-24T12:36:42+00:00",
"source_file": "6-space-game/4-collision-detection/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel Teil 4: Hinzufügen eines Lasers und Erkennung von Kollisionen
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
In dieser Lektion lernst du, wie man mit JavaScript Laser schießt! Wir fügen zwei Dinge zu unserem Spiel hinzu:
- **Einen Laser**: Dieser Laser wird von dem Schiff deines Helden abgefeuert und bewegt sich vertikal nach oben.
- **Kollisionserkennung**: Im Rahmen der Implementierung der Schussfähigkeit fügen wir auch einige interessante Spielregeln hinzu:
- **Laser trifft Gegner**: Gegner stirbt, wenn er von einem Laser getroffen wird.
- **Laser trifft oberen Bildschirmrand**: Ein Laser wird zerstört, wenn er den oberen Teil des Bildschirms trifft.
- **Kollision zwischen Gegner und Held**: Ein Gegner und der Held werden zerstört, wenn sie miteinander kollidieren.
- **Gegner trifft unteren Bildschirmrand**: Ein Gegner und der Held werden zerstört, wenn der Gegner den unteren Bildschirmrand erreicht.
Kurz gesagt, du – *der Held* – musst alle Gegner mit einem Laser treffen, bevor sie es schaffen, den unteren Bildschirmrand zu erreichen.
✅ Recherchiere ein wenig über das allererste Computerspiel, das jemals geschrieben wurde. Welche Funktionalität hatte es?
Lasst uns gemeinsam heldenhaft sein!
## Kollisionserkennung
Wie funktioniert die Kollisionserkennung? Wir müssen unsere Spielobjekte als Rechtecke betrachten, die sich bewegen. Warum, fragst du dich vielleicht? Nun, das Bild, das verwendet wird, um ein Spielobjekt darzustellen, ist ein Rechteck: Es hat eine `x`, `y`, `Breite` und `Höhe`.
Wenn sich zwei Rechtecke, z. B. ein Held und ein Gegner, *überschneiden*, liegt eine Kollision vor. Was dann passieren soll, hängt von den Spielregeln ab. Um die Kollisionserkennung zu implementieren, benötigst du daher Folgendes:
1. Eine Möglichkeit, eine Rechteckdarstellung eines Spielobjekts zu erhalten, etwa so:
```javascript
rectFromGameObject() {
return {
top: this.y,
left: this.x,
bottom: this.y + this.height,
right: this.x + this.width
}
}
```
2. Eine Vergleichsfunktion, die so aussehen kann:
```javascript
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
```
## Wie zerstören wir Dinge
Um Dinge in einem Spiel zu zerstören, musst du dem Spiel mitteilen, dass es dieses Objekt nicht mehr in der Spielschleife zeichnen soll, die in einem bestimmten Intervall ausgelöst wird. Eine Möglichkeit, dies zu tun, besteht darin, ein Spielobjekt als *tot* zu markieren, wenn etwas passiert, etwa so:
```javascript
// collision happened
enemy.dead = true
```
Dann kannst du *tote* Objekte aussortieren, bevor der Bildschirm neu gezeichnet wird, etwa so:
```javascript
gameObjects = gameObject.filter(go => !go.dead);
```
## Wie feuern wir einen Laser ab
Einen Laser abzufeuern bedeutet, auf ein Tastenereignis zu reagieren und ein Objekt zu erstellen, das sich in eine bestimmte Richtung bewegt. Wir müssen daher die folgenden Schritte ausführen:
1. **Einen Laserobjekt erstellen**: Vom oberen Teil des Schiffes unseres Helden aus, das bei der Erstellung beginnt, sich nach oben in Richtung des oberen Bildschirmrands zu bewegen.
2. **Code an ein Tastenereignis anhängen**: Wir müssen eine Taste auf der Tastatur auswählen, die das Abfeuern des Lasers durch den Spieler darstellt.
3. **Ein Spielobjekt erstellen, das wie ein Laser aussieht**, wenn die Taste gedrückt wird.
## Abkühlzeit für unseren Laser
Der Laser muss jedes Mal abgefeuert werden, wenn du eine Taste drückst, z. B. *Leertaste*. Um zu verhindern, dass das Spiel in kurzer Zeit viel zu viele Laser erzeugt, müssen wir dies beheben. Die Lösung besteht darin, eine sogenannte *Abkühlzeit* zu implementieren, einen Timer, der sicherstellt, dass ein Laser nur so oft abgefeuert werden kann. Du kannst das folgendermaßen umsetzen:
```javascript
class Cooldown {
constructor(time) {
this.cool = false;
setTimeout(() => {
this.cool = true;
}, time)
}
}
class Weapon {
constructor {
}
fire() {
if (!this.cooldown || this.cooldown.cool) {
// produce a laser
this.cooldown = new Cooldown(500);
} else {
// do nothing - it hasn't cooled down yet.
}
}
}
```
✅ Sieh dir Lektion 1 der Weltraumspiel-Serie an, um dich an *Abkühlzeiten* zu erinnern.
## Was soll gebaut werden
Du wirst den bestehenden Code (den du bereinigt und refaktoriert haben solltest) aus der vorherigen Lektion nehmen und erweitern. Entweder beginnst du mit dem Code aus Teil II oder verwendest den Code unter [Teil III - Starter](../../../../../../../../../your-work).
> Tipp: Der Laser, mit dem du arbeiten wirst, befindet sich bereits in deinem Assets-Ordner und wird von deinem Code referenziert.
- **Füge Kollisionserkennung hinzu**, wenn ein Laser mit etwas kollidiert, sollten die folgenden Regeln gelten:
1. **Laser trifft Gegner**: Gegner stirbt, wenn er von einem Laser getroffen wird.
2. **Laser trifft oberen Bildschirmrand**: Ein Laser wird zerstört, wenn er den oberen Teil unseres Bildschirms trifft.
3. **Kollision zwischen Gegner und Held**: Ein Gegner und der Held werden zerstört, wenn sie miteinander kollidieren.
4. **Gegner trifft unteren Bildschirmrand**: Ein Gegner und der Held werden zerstört, wenn der Gegner den unteren Bildschirmrand erreicht.
## Empfohlene Schritte
Finde die Dateien, die für dich im Unterordner `your-work` erstellt wurden. Sie sollten Folgendes enthalten:
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| index.html
-| app.js
-| package.json
```
Du startest dein Projekt im Ordner `your_work`, indem du Folgendes eingibst:
```bash
cd your-work
npm start
```
Das obige startet einen HTTP-Server unter der Adresse `http://localhost:5000`. Öffne einen Browser und gib diese Adresse ein, derzeit sollte der Held und alle Gegner angezeigt werden, aber noch bewegt sich nichts :).
### Code hinzufügen
1. **Richte eine Rechteckdarstellung deines Spielobjekts ein, um Kollisionen zu behandeln**. Der folgende Code ermöglicht es dir, eine Rechteckdarstellung eines `GameObject` zu erhalten. Bearbeite deine GameObject-Klasse, um sie zu erweitern:
```javascript
rectFromGameObject() {
return {
top: this.y,
left: this.x,
bottom: this.y + this.height,
right: this.x + this.width,
};
}
```
2. **Füge Code hinzu, der Kollisionen überprüft**. Dies wird eine neue Funktion sein, die testet, ob sich zwei Rechtecke überschneiden:
```javascript
function intersectRect(r1, r2) {
return !(
r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top
);
}
```
3. **Füge die Fähigkeit hinzu, Laser abzufeuern**
1. **Füge eine Tastenereignis-Nachricht hinzu**. Die *Leertaste* sollte einen Laser direkt über dem Schiff des Helden erstellen. Füge drei Konstanten im Nachrichtenobjekt hinzu:
```javascript
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
```
1. **Bearbeite die Leertaste**. Bearbeite die `window.addEventListener`-Funktion für das Loslassen der Taste, um die Leertaste zu behandeln:
```javascript
} else if(evt.keyCode === 32) {
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
}
```
1. **Füge Listener hinzu**. Bearbeite die `initGame()`-Funktion, um sicherzustellen, dass der Held schießen kann, wenn die Leertaste gedrückt wird:
```javascript
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
if (hero.canFire()) {
hero.fire();
}
```
und füge eine neue `eventEmitter.on()`-Funktion hinzu, um das Verhalten zu gewährleisten, wenn ein Gegner mit einem Laser kollidiert:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
})
```
1. **Bewege das Objekt**, Stelle sicher, dass sich der Laser allmählich zum oberen Bildschirmrand bewegt. Du wirst eine neue Laser-Klasse erstellen, die `GameObject` erweitert, wie du es zuvor getan hast:
```javascript
class Laser extends GameObject {
constructor(x, y) {
super(x,y);
(this.width = 9), (this.height = 33);
this.type = 'Laser';
this.img = laserImg;
let id = setInterval(() => {
if (this.y > 0) {
this.y -= 15;
} else {
this.dead = true;
clearInterval(id);
}
}, 100)
}
}
```
1. **Behandle Kollisionen**, Implementiere Kollisionsregeln für den Laser. Füge eine `updateGameObjects()`-Funktion hinzu, die kollidierende Objekte auf Treffer testet:
```javascript
function updateGameObjects() {
const enemies = gameObjects.filter(go => go.type === 'Enemy');
const lasers = gameObjects.filter((go) => go.type === "Laser");
// laser hit something
lasers.forEach((l) => {
enemies.forEach((m) => {
if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
first: l,
second: m,
});
}
});
});
gameObjects = gameObjects.filter(go => !go.dead);
}
```
Stelle sicher, dass du `updateGameObjects()` in deine Spielschleife in `window.onload` einfügst.
4. **Implementiere eine Abkühlzeit** für den Laser, sodass er nur so oft abgefeuert werden kann.
Bearbeite schließlich die Hero-Klasse, damit sie eine Abkühlzeit hat:
```javascript
class Hero extends GameObject {
constructor(x, y) {
super(x, y);
(this.width = 99), (this.height = 75);
this.type = "Hero";
this.speed = { x: 0, y: 0 };
this.cooldown = 0;
}
fire() {
gameObjects.push(new Laser(this.x + 45, this.y - 10));
this.cooldown = 500;
let id = setInterval(() => {
if (this.cooldown > 0) {
this.cooldown -= 100;
} else {
clearInterval(id);
}
}, 200);
}
canFire() {
return this.cooldown === 0;
}
}
```
An diesem Punkt hat dein Spiel einige Funktionalitäten! Du kannst dich mit deinen Pfeiltasten bewegen, mit der Leertaste einen Laser abfeuern, und Gegner verschwinden, wenn du sie triffst. Gut gemacht!
---
## 🚀 Herausforderung
Füge eine Explosion hinzu! Sieh dir die Spiel-Assets im [Space Art Repo](../../../../6-space-game/solution/spaceArt/readme.txt) an und versuche, eine Explosion hinzuzufügen, wenn der Laser einen Alien trifft.
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
## Überprüfung & Selbststudium
Experimentiere mit den Intervallen in deinem bisherigen Spiel. Was passiert, wenn du sie änderst? Lies mehr über [JavaScript-Timing-Ereignisse](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
## Aufgabe
[Erkunde Kollisionen](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/6-space-game/4-collision-detection/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8a0a097b45e7c75a611e2795e4013f16",
"translation_date": "2025-08-24T12:38:23+00:00",
"source_file": "6-space-game/4-collision-detection/assignment.md",
"language_code": "de"
}
-->
# Erkunde Kollisionen
## Anweisungen
Um besser zu verstehen, wie Kollisionen funktionieren, erstelle ein sehr kleines Spiel mit ein paar Objekten, die kollidieren. Lass sie sich durch Tastendruck oder Mausklicks bewegen und sorge dafür, dass etwas mit einem der Objekte passiert, wenn es getroffen wird. Es könnte zum Beispiel ein Meteorit sein, der die Erde trifft, oder Autoscooter. Sei kreativ!
## Bewertungskriterien
| Kriterien | Vorbildlich | Ausreichend | Verbesserungswürdig |
| --------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------- |
| | Vollständig funktionierender Code wird erstellt, mit Objekten, die auf die Leinwand gezeichnet werden, grundlegenden Kollisionen und Reaktionen | Code ist in irgendeiner Weise unvollständig | Code funktioniert nicht |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

13
translations/de/6-space-game/4-collision-detection/solution/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:39:26+00:00",
"source_file": "6-space-game/4-collision-detection/solution/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

13
translations/de/6-space-game/4-collision-detection/your-work/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:38:59+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

201
translations/de/6-space-game/5-keeping-score/README.md Normal file
View File

@@ -0,0 +1,201 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "4e8250db84b027c9ff816b4e4c093457",
"translation_date": "2025-08-24T12:27:27+00:00",
"source_file": "6-space-game/5-keeping-score/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel Teil 5: Punkte und Leben
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
In dieser Lektion lernst du, wie man Punkte zu einem Spiel hinzufügt und Leben berechnet.
## Text auf dem Bildschirm anzeigen
Um den Punktestand eines Spiels auf dem Bildschirm anzuzeigen, musst du wissen, wie man Text auf dem Bildschirm platziert. Die Antwort ist die Methode `fillText()` des Canvas-Objekts. Du kannst auch andere Aspekte steuern, wie die Schriftart, die Farbe des Textes und sogar die Ausrichtung (links, rechts, zentriert). Unten findest du Code, der Text auf dem Bildschirm zeichnet.
```javascript
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);
```
✅ Lies mehr darüber, [wie man Text zu einem Canvas hinzufügt](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), und gestalte deinen Text ruhig etwas schicker!
## Leben als Spielkonzept
Das Konzept von Leben in einem Spiel ist lediglich eine Zahl. Im Kontext eines Weltraumspiels ist es üblich, eine bestimmte Anzahl von Leben zuzuweisen, die nach und nach abgezogen werden, wenn dein Schiff Schaden nimmt. Es ist schön, wenn man dies grafisch darstellen kann, z. B. mit kleinen Schiffen oder Herzen anstelle einer Zahl.
## Was soll gebaut werden?
Füge deinem Spiel Folgendes hinzu:
- **Punktestand**: Für jedes feindliche Schiff, das zerstört wird, sollte der Held Punkte erhalten. Wir schlagen 100 Punkte pro Schiff vor. Der Punktestand sollte unten links angezeigt werden.
- **Leben**: Dein Schiff hat drei Leben. Du verlierst ein Leben, jedes Mal wenn ein feindliches Schiff mit dir kollidiert. Die Lebensanzeige sollte unten rechts angezeigt werden und aus der folgenden Grafik bestehen: ![life image](../../../../6-space-game/5-keeping-score/solution/assets/life.png).
## Empfohlene Schritte
Finde die Dateien, die für dich im Unterordner `your-work` erstellt wurden. Sie sollten Folgendes enthalten:
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| index.html
-| app.js
-| package.json
```
Starte dein Projekt im Ordner `your_work`, indem du Folgendes eingibst:
```bash
cd your-work
npm start
```
Das oben Genannte startet einen HTTP-Server unter der Adresse `http://localhost:5000`. Öffne einen Browser und gib diese Adresse ein. Derzeit sollten der Held und alle Feinde angezeigt werden, und wenn du die Pfeiltasten links und rechts drückst, bewegt sich der Held und kann Feinde abschießen.
### Code hinzufügen
1. **Kopiere die benötigten Assets** aus dem Ordner `solution/assets/` in den Ordner `your-work`; du wirst ein `life.png`-Asset hinzufügen. Füge das `lifeImg` zur Funktion `window.onload` hinzu:
```javascript
lifeImg = await loadTexture("assets/life.png");
```
1. Füge das `lifeImg` zur Liste der Assets hinzu:
```javascript
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
2. **Variablen hinzufügen**. Füge Code hinzu, der deinen Gesamtpunktestand (0) und die verbleibenden Leben (3) darstellt, und zeige diese Werte auf dem Bildschirm an.
3. **Erweitere die Funktion `updateGameObjects()`**. Erweitere die Funktion `updateGameObjects()`, um Kollisionen mit Feinden zu behandeln:
```javascript
enemies.forEach(enemy => {
const heroRect = hero.rectFromGameObject();
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
}
})
```
4. **Füge Leben und Punkte hinzu**.
1. **Initialisiere Variablen**. Unter `this.cooldown = 0` in der Klasse `Hero` setze Leben und Punkte:
```javascript
this.life = 3;
this.points = 0;
```
1. **Zeichne Variablen auf den Bildschirm**. Zeige diese Werte auf dem Bildschirm an:
```javascript
function drawLife() {
// TODO, 35, 27
const START_POS = canvas.width - 180;
for(let i=0; i < hero.life; i++ ) {
ctx.drawImage(
lifeImg,
START_POS + (45 * (i+1) ),
canvas.height - 37);
}
}
function drawPoints() {
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
drawText("Points: " + hero.points, 10, canvas.height-20);
}
function drawText(message, x, y) {
ctx.fillText(message, x, y);
}
```
1. **Füge Methoden zur Spielschleife hinzu**. Stelle sicher, dass du diese Funktionen zur Funktion `window.onload` unter `updateGameObjects()` hinzufügst:
```javascript
drawPoints();
drawLife();
```
1. **Implementiere Spielregeln**. Implementiere die folgenden Spielregeln:
1. **Für jede Kollision zwischen Held und Feind** ziehe ein Leben ab.
Erweitere die Klasse `Hero`, um diese Abzüge vorzunehmen:
```javascript
decrementLife() {
this.life--;
if (this.life === 0) {
this.dead = true;
}
}
```
2. **Für jeden Laser, der einen Feind trifft**, erhöhe den Punktestand um 100 Punkte.
Erweitere die Klasse `Hero`, um diese Erhöhung vorzunehmen:
```javascript
incrementPoints() {
this.points += 100;
}
```
Füge diese Funktionen zu deinen Collision Event Emitters hinzu:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
hero.incrementPoints();
})
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
enemy.dead = true;
hero.decrementLife();
});
```
✅ Recherchiere ein wenig, um andere Spiele zu entdecken, die mit JavaScript/Canvas erstellt wurden. Was sind ihre gemeinsamen Merkmale?
Am Ende dieser Arbeit solltest du die kleinen 'Lebens'-Schiffe unten rechts, Punkte unten links sehen und beobachten können, wie deine Lebensanzahl bei Kollisionen mit Feinden abnimmt und deine Punkte steigen, wenn du Feinde abschießt. Gut gemacht! Dein Spiel ist fast fertig.
---
## 🚀 Herausforderung
Dein Code ist fast fertig. Kannst du dir die nächsten Schritte vorstellen?
## Quiz nach der Lektion
[Quiz nach der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
## Überprüfung & Selbststudium
Recherchiere einige Möglichkeiten, wie du Punktestände und Leben in einem Spiel erhöhen und verringern kannst. Es gibt einige interessante Spiel-Engines wie [PlayFab](https://playfab.com). Wie könnte die Verwendung einer solchen Engine dein Spiel verbessern?
## Aufgabe
[Baue ein Punktespiel](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

23
translations/de/6-space-game/5-keeping-score/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "81f292dbda01685b91735e0398dc0504",
"translation_date": "2025-08-24T12:28:47+00:00",
"source_file": "6-space-game/5-keeping-score/assignment.md",
"language_code": "de"
}
-->
# Erstelle ein Punktespiel
## Anweisungen
Erstelle ein Spiel, in dem Leben und Punkte auf kreative Weise angezeigt werden. Ein Vorschlag ist, das Leben als Herzen darzustellen und die Punkte als große Zahl im unteren mittleren Bereich des Bildschirms anzuzeigen. Schau dir hier [Kostenlose Spielressourcen](https://www.kenney.nl/) an.
# Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ---------------------- | --------------------------- | --------------------------- |
| | vollständiges Spiel wird präsentiert | Spiel wird teilweise präsentiert | unvollständiges Spiel enthält Fehler |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

13
translations/de/6-space-game/5-keeping-score/solution/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:29:47+00:00",
"source_file": "6-space-game/5-keeping-score/solution/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

13
translations/de/6-space-game/5-keeping-score/your-work/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:29:18+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

234
translations/de/6-space-game/6-end-condition/README.md Normal file
View File

@@ -0,0 +1,234 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "01336cddd638242e99b133614111ea40",
"translation_date": "2025-08-24T12:42:46+00:00",
"source_file": "6-space-game/6-end-condition/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel Teil 6: Ende und Neustart
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
Es gibt verschiedene Möglichkeiten, eine *Endbedingung* in einem Spiel auszudrücken. Es liegt an dir als Ersteller des Spiels zu entscheiden, warum das Spiel endet. Hier sind einige Gründe, wenn wir davon ausgehen, dass wir über das Weltraumspiel sprechen, das du bisher gebaut hast:
- **`N` feindliche Schiffe wurden zerstört**: Es ist ziemlich üblich, dass ein Spiel in verschiedene Level unterteilt wird, bei denen du `N` feindliche Schiffe zerstören musst, um ein Level abzuschließen.
- **Dein Schiff wurde zerstört**: Es gibt definitiv Spiele, bei denen du verlierst, wenn dein Schiff zerstört wird. Eine andere gängige Herangehensweise ist das Konzept von Leben. Jedes Mal, wenn dein Schiff zerstört wird, wird ein Leben abgezogen. Sobald alle Leben verloren sind, verlierst du das Spiel.
- **Du hast `N` Punkte gesammelt**: Eine weitere häufige Endbedingung ist das Sammeln von Punkten. Wie du Punkte erhältst, liegt an dir, aber es ist ziemlich üblich, Punkte für verschiedene Aktivitäten zu vergeben, wie das Zerstören eines feindlichen Schiffs oder das Sammeln von Gegenständen, die von zerstörten Objekten *fallen*.
- **Ein Level abschließen**: Dies könnte mehrere Bedingungen umfassen, wie `X` zerstörte feindliche Schiffe, `Y` gesammelte Punkte oder vielleicht das Einsammeln eines bestimmten Gegenstands.
## Neustart
Wenn Menschen dein Spiel mögen, möchten sie es wahrscheinlich erneut spielen. Sobald das Spiel aus irgendeinem Grund endet, solltest du eine Möglichkeit zum Neustart anbieten.
✅ Überlege dir, unter welchen Bedingungen ein Spiel endet und wie du aufgefordert wirst, es neu zu starten.
## Was du bauen sollst
Du wirst diese Regeln zu deinem Spiel hinzufügen:
1. **Das Spiel gewinnen**. Sobald alle feindlichen Schiffe zerstört sind, gewinnst du das Spiel. Zeige zusätzlich eine Art Siegesnachricht an.
1. **Neustart**. Sobald alle Leben verloren sind oder das Spiel gewonnen wurde, solltest du eine Möglichkeit anbieten, das Spiel neu zu starten. Denk daran! Du musst das Spiel neu initialisieren und den vorherigen Spielzustand löschen.
## Empfohlene Schritte
Finde die Dateien, die für dich im Unterordner `your-work` erstellt wurden. Sie sollten Folgendes enthalten:
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| life.png
-| index.html
-| app.js
-| package.json
```
Starte dein Projekt im Ordner `your_work`, indem du Folgendes eingibst:
```bash
cd your-work
npm start
```
Das obige startet einen HTTP-Server unter der Adresse `http://localhost:5000`. Öffne einen Browser und gib diese Adresse ein. Dein Spiel sollte spielbereit sein.
> Tipp: Um Warnungen in Visual Studio Code zu vermeiden, bearbeite die Funktion `window.onload`, sodass sie `gameLoopId` direkt aufruft (ohne `let`), und deklariere `gameLoopId` oben in der Datei unabhängig: `let gameLoopId;`
### Code hinzufügen
1. **Endbedingung verfolgen**. Füge Code hinzu, der die Anzahl der Feinde oder ob das Heldenschiff zerstört wurde verfolgt, indem du diese zwei Funktionen hinzufügst:
```javascript
function isHeroDead() {
return hero.life <= 0;
}
function isEnemiesDead() {
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
return enemies.length === 0;
}
```
1. **Logik zu Nachrichten-Handlern hinzufügen**. Bearbeite den `eventEmitter`, um diese Bedingungen zu behandeln:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
hero.incrementPoints();
if (isEnemiesDead()) {
eventEmitter.emit(Messages.GAME_END_WIN);
}
});
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
enemy.dead = true;
hero.decrementLife();
if (isHeroDead()) {
eventEmitter.emit(Messages.GAME_END_LOSS);
return; // loss before victory
}
if (isEnemiesDead()) {
eventEmitter.emit(Messages.GAME_END_WIN);
}
});
eventEmitter.on(Messages.GAME_END_WIN, () => {
endGame(true);
});
eventEmitter.on(Messages.GAME_END_LOSS, () => {
endGame(false);
});
```
1. **Neue Nachrichtentypen hinzufügen**. Füge diese Nachrichten dem Konstantenobjekt hinzu:
```javascript
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
2. **Neustart-Code hinzufügen**. Füge Code hinzu, der das Spiel durch Drücken einer ausgewählten Taste neu startet.
1. **Auf Tastendruck `Enter` hören**. Bearbeite den EventListener deines Fensters, um auf diesen Tastendruck zu hören:
```javascript
else if(evt.key === "Enter") {
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}
```
1. **Neustart-Nachricht hinzufügen**. Füge diese Nachricht deinem Nachrichten-Konstanten hinzu:
```javascript
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```
1. **Spielregeln implementieren**. Implementiere die folgenden Spielregeln:
1. **Spieler-Siegesbedingung**. Wenn alle feindlichen Schiffe zerstört sind, zeige eine Siegesnachricht an.
1. Erstelle zuerst eine Funktion `displayMessage()`:
```javascript
function displayMessage(message, color = "red") {
ctx.font = "30px Arial";
ctx.fillStyle = color;
ctx.textAlign = "center";
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}
```
1. Erstelle eine Funktion `endGame()`:
```javascript
function endGame(win) {
clearInterval(gameLoopId);
// set a delay so we are sure any paints have finished
setTimeout(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (win) {
displayMessage(
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
"green"
);
} else {
displayMessage(
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
);
}
}, 200)
}
```
1. **Neustart-Logik**. Wenn alle Leben verloren sind oder der Spieler das Spiel gewonnen hat, zeige an, dass das Spiel neu gestartet werden kann. Starte das Spiel zusätzlich neu, wenn die *Neustart*-Taste gedrückt wird (du kannst entscheiden, welche Taste dem Neustart zugeordnet wird).
1. Erstelle die Funktion `resetGame()`:
```javascript
function resetGame() {
if (gameLoopId) {
clearInterval(gameLoopId);
eventEmitter.clear();
initGame();
gameLoopId = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawPoints();
drawLife();
updateGameObjects();
drawGameObjects(ctx);
}, 100);
}
}
```
1. Füge einen Aufruf zum `eventEmitter` hinzu, um das Spiel in `initGame()` zurückzusetzen:
```javascript
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
resetGame();
});
```
1. Füge dem EventEmitter eine Funktion `clear()` hinzu:
```javascript
clear() {
this.listeners = {};
}
```
👽 💥 🚀 Glückwunsch, Captain! Dein Spiel ist fertig! Gut gemacht! 🚀 💥 👽
---
## 🚀 Herausforderung
Füge einen Sound hinzu! Kannst du einen Sound hinzufügen, um dein Spielerlebnis zu verbessern, vielleicht wenn ein Laser trifft, oder der Held stirbt oder gewinnt? Schau dir dieses [Sandbox-Beispiel](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) an, um zu lernen, wie man mit JavaScript Sound abspielt.
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
## Überprüfung & Selbststudium
Deine Aufgabe ist es, ein neues Beispielspiel zu erstellen. Erkunde einige der interessanten Spiele da draußen, um zu sehen, welche Art von Spiel du bauen könntest.
## Aufgabe
[Beispielspiel erstellen](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

31
translations/de/6-space-game/6-end-condition/assignment.md Normal file
View File

@@ -0,0 +1,31 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "24201cf428c7edba1ccec2a78a0dd8f8",
"translation_date": "2025-08-24T12:44:20+00:00",
"source_file": "6-space-game/6-end-condition/assignment.md",
"language_code": "de"
}
-->
# Erstelle ein Beispielspiel
## Anweisungen
Versuche, ein kleines Spiel zu erstellen, bei dem du verschiedene Endbedingungen übst. Variiere zwischen dem Erreichen einer bestimmten Punktzahl, dem Verlust aller Leben des Helden oder dem Besiegen aller Monster. Baue etwas Einfaches, wie ein textbasiertes Abenteuerspiel in der Konsole. Nutze den untenstehenden Spielablauf als Inspiration:
```
Hero> Strikes with broadsword - orc takes 3p damage
Orc> Hits with club - hero takes 2p damage
Hero> Kicks - orc takes 1p damage
Game> Orc is defeated - Hero collects 2 coins
Game> ****No more monsters, you have conquered the evil fortress****
```
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ---------------------- | --------------------------- | --------------------------- |
| | vollständiges Spiel wird präsentiert | Spiel wird teilweise präsentiert | unvollständiges Spiel enthält Fehler |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

13
translations/de/6-space-game/6-end-condition/solution/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:45:21+00:00",
"source_file": "6-space-game/6-end-condition/solution/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

13
translations/de/6-space-game/6-end-condition/your-work/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:44:54+00:00",
"source_file": "6-space-game/6-end-condition/your-work/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

43
translations/de/6-space-game/README.md Normal file
View File

@@ -0,0 +1,43 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c40a698395ee5102715f7880bba3f2e7",
"translation_date": "2025-08-24T12:26:24+00:00",
"source_file": "6-space-game/README.md",
"language_code": "de"
}
-->
# Baue ein Weltraumspiel
Ein Weltraumspiel, um fortgeschrittene JavaScript-Grundlagen zu erlernen
In dieser Lektion lernst du, wie du dein eigenes Weltraumspiel erstellst. Wenn du jemals das Spiel "Space Invaders" gespielt hast, basiert dieses Spiel auf derselben Idee: ein Raumschiff zu steuern und auf Monster zu schießen, die von oben herabkommen. So wird das fertige Spiel aussehen:
![Fertiges Spiel](../../../6-space-game/images/pewpew.gif)
In diesen sechs Lektionen wirst du Folgendes lernen:
- **Interagieren** mit dem Canvas-Element, um Dinge auf einem Bildschirm zu zeichnen
- **Verstehen** des kartesischen Koordinatensystems
- **Erlernen** des Pub-Sub-Musters, um eine solide Spielarchitektur zu schaffen, die einfacher zu warten und zu erweitern ist
- **Nutzen** von Async/Await, um Spielressourcen zu laden
- **Umgang** mit Tastaturereignissen
## Überblick
- Theorie
- [Einführung in die Spieleentwicklung mit JavaScript](1-introduction/README.md)
- Praxis
- [Zeichnen auf Canvas](2-drawing-to-canvas/README.md)
- [Elemente auf dem Bildschirm bewegen](3-moving-elements-around/README.md)
- [Kollisionserkennung](4-collision-detection/README.md)
- [Punkte zählen](5-keeping-score/README.md)
- [Spiel beenden und neu starten](6-end-condition/README.md)
## Credits
Die verwendeten Assets stammen von https://www.kenney.nl/.
Wenn du dich für die Spieleentwicklung interessierst, sind das wirklich großartige Ressourcen. Viele davon sind kostenlos, einige kostenpflichtig.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

13
translations/de/6-space-game/solution/README.md Normal file
View File

@@ -0,0 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
"translation_date": "2025-08-24T12:45:50+00:00",
"source_file": "6-space-game/solution/README.md",
"language_code": "de"
}
-->
Dies ist ein Platzhalter, absichtlich leer gelassen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

320
translations/de/7-bank-project/1-template-route/README.md Normal file
View File

@@ -0,0 +1,320 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
"translation_date": "2025-08-24T13:38:59+00:00",
"source_file": "7-bank-project/1-template-route/README.md",
"language_code": "de"
}
-->
# Erstellen einer Banking-App Teil 1: HTML-Vorlagen und Routen in einer Web-App
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
### Einführung
Seit der Einführung von JavaScript in Browsern werden Websites interaktiver und komplexer als je zuvor. Webtechnologien werden heute häufig verwendet, um vollständig funktionale Anwendungen zu erstellen, die direkt im Browser laufen und die wir [Webanwendungen](https://de.wikipedia.org/wiki/Webanwendung) nennen. Da Web-Apps hochinteraktiv sind, möchten Benutzer nicht bei jeder Aktion auf ein vollständiges Neuladen der Seite warten. Deshalb wird JavaScript verwendet, um das HTML direkt über das DOM zu aktualisieren und so ein reibungsloseres Benutzererlebnis zu bieten.
In dieser Lektion legen wir die Grundlagen für die Erstellung einer Banking-Web-App, indem wir HTML-Vorlagen verwenden, um mehrere Bildschirme zu erstellen, die angezeigt und aktualisiert werden können, ohne die gesamte HTML-Seite neu laden zu müssen.
### Voraussetzungen
Du benötigst einen lokalen Webserver, um die Web-App zu testen, die wir in dieser Lektion erstellen. Falls du keinen hast, kannst du [Node.js](https://nodejs.org) installieren und den Befehl `npx lite-server` aus deinem Projektordner ausführen. Dadurch wird ein lokaler Webserver erstellt und deine App im Browser geöffnet.
### Vorbereitung
Erstelle auf deinem Computer einen Ordner namens `bank` mit einer Datei namens `index.html` darin. Wir beginnen mit diesem HTML-[Grundgerüst](https://de.wikipedia.org/wiki/Boilerplate-Code):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank App</title>
</head>
<body>
<!-- This is where you'll work -->
</body>
</html>
```
---
## HTML-Vorlagen
Wenn du mehrere Bildschirme für eine Webseite erstellen möchtest, wäre eine Lösung, für jeden anzuzeigenden Bildschirm eine eigene HTML-Datei zu erstellen. Diese Lösung hat jedoch einige Nachteile:
- Beim Wechseln des Bildschirms muss das gesamte HTML neu geladen werden, was langsam sein kann.
- Es ist schwierig, Daten zwischen den verschiedenen Bildschirmen zu teilen.
Eine andere Herangehensweise besteht darin, nur eine HTML-Datei zu haben und mehrere [HTML-Vorlagen](https://developer.mozilla.org/de/docs/Web/HTML/Element/template) mit dem `<template>`-Element zu definieren. Eine Vorlage ist ein wiederverwendbarer HTML-Block, der vom Browser nicht angezeigt wird und zur Laufzeit mithilfe von JavaScript instanziiert werden muss.
### Aufgabe
Wir erstellen eine Banking-App mit zwei Bildschirmen: der Login-Seite und dem Dashboard. Zuerst fügen wir im HTML-Body ein Platzhalter-Element hinzu, das wir verwenden, um die verschiedenen Bildschirme unserer App zu instanziieren:
```html
<div id="app">Loading...</div>
```
Wir geben ihm eine `id`, um es später mit JavaScript leichter finden zu können.
> Tipp: Da der Inhalt dieses Elements ersetzt wird, können wir eine Ladeanzeige oder Nachricht einfügen, die angezeigt wird, während die App lädt.
Als Nächstes fügen wir unterhalb des Platzhalters die HTML-Vorlage für die Login-Seite hinzu. Für den Moment fügen wir dort nur einen Titel und einen Abschnitt mit einem Link ein, den wir für die Navigation verwenden werden.
```html
<template id="login">
<h1>Bank App</h1>
<section>
<a href="/dashboard">Login</a>
</section>
</template>
```
Dann fügen wir eine weitere HTML-Vorlage für die Dashboard-Seite hinzu. Diese Seite wird verschiedene Abschnitte enthalten:
- Eine Kopfzeile mit einem Titel und einem Logout-Link
- Den aktuellen Kontostand
- Eine Liste von Transaktionen, die in einer Tabelle angezeigt werden
```html
<template id="dashboard">
<header>
<h1>Bank App</h1>
<a href="/login">Logout</a>
</header>
<section>
Balance: 100$
</section>
<section>
<h2>Transactions</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>Object</th>
<th>Amount</th>
</tr>
</thead>
<tbody></tbody>
</table>
</section>
</template>
```
> Tipp: Wenn du HTML-Vorlagen erstellst und sehen möchtest, wie sie aussehen, kannst du die `<template>`- und `</template>`-Zeilen auskommentieren, indem du sie mit `<!-- -->` umschließt.
✅ Warum denkst du, verwenden wir `id`-Attribute für die Vorlagen? Könnten wir stattdessen etwas anderes wie Klassen verwenden?
## Vorlagen mit JavaScript anzeigen
Wenn du deine aktuelle HTML-Datei in einem Browser ausprobierst, wirst du sehen, dass sie bei `Loading...` hängen bleibt. Das liegt daran, dass wir JavaScript-Code hinzufügen müssen, um die HTML-Vorlagen zu instanziieren und anzuzeigen.
Das Instanziieren einer Vorlage erfolgt normalerweise in 3 Schritten:
1. Abrufen des Vorlagenelements im DOM, z. B. mit [`document.getElementById`](https://developer.mozilla.org/de/docs/Web/API/Document/getElementById).
2. Klonen des Vorlagenelements mit [`cloneNode`](https://developer.mozilla.org/de/docs/Web/API/Node/cloneNode).
3. Anhängen an das DOM unter einem sichtbaren Element, z. B. mit [`appendChild`](https://developer.mozilla.org/de/docs/Web/API/Node/appendChild).
✅ Warum müssen wir die Vorlage klonen, bevor wir sie an das DOM anhängen? Was denkst du, würde passieren, wenn wir diesen Schritt überspringen?
### Aufgabe
Erstelle eine neue Datei namens `app.js` in deinem Projektordner und importiere diese Datei im `<head>`-Abschnitt deines HTML:
```html
<script src="app.js" defer></script>
```
Nun erstellen wir in `app.js` eine neue Funktion `updateRoute`:
```js
function updateRoute(templateId) {
const template = document.getElementById(templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
Was wir hier tun, sind genau die 3 oben beschriebenen Schritte. Wir instanziieren die Vorlage mit der `id` `templateId` und platzieren deren geklonten Inhalt in unserem App-Platzhalter. Beachte, dass wir `cloneNode(true)` verwenden müssen, um den gesamten Unterbaum der Vorlage zu kopieren.
Rufe nun diese Funktion mit einer der Vorlagen auf und sieh dir das Ergebnis an.
```js
updateRoute('login');
```
✅ Was ist der Zweck dieses Codes `app.innerHTML = '';`? Was passiert, wenn wir ihn weglassen?
## Routen erstellen
Wenn wir über eine Web-App sprechen, nennen wir das *Routing* die Absicht, **URLs** bestimmten Bildschirmen zuzuordnen, die angezeigt werden sollen. Auf einer Website mit mehreren HTML-Dateien geschieht dies automatisch, da die Dateipfade in der URL widergespiegelt werden. Zum Beispiel mit diesen Dateien in deinem Projektordner:
```
mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html
```
Wenn du einen Webserver mit `mywebsite` als Root erstellst, wird die URL-Zuordnung wie folgt aussehen:
```
https://site.com --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/ --> mywebsite/admin/index.html
```
Für unsere Web-App verwenden wir jedoch eine einzige HTML-Datei, die alle Bildschirme enthält, sodass dieses Standardverhalten uns nicht hilft. Wir müssen diese Zuordnung manuell erstellen und die angezeigte Vorlage mithilfe von JavaScript aktualisieren.
### Aufgabe
Wir verwenden ein einfaches Objekt, um eine [Map](https://de.wikipedia.org/wiki/Assoziatives_Array) zwischen URL-Pfaden und unseren Vorlagen zu implementieren. Füge dieses Objekt oben in deiner `app.js`-Datei hinzu.
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard' },
};
```
Nun ändern wir die Funktion `updateRoute` ein wenig. Anstatt die `templateId` direkt als Argument zu übergeben, möchten wir sie abrufen, indem wir zuerst die aktuelle URL betrachten und dann unsere Map verwenden, um den entsprechenden Vorlagenwert zu erhalten. Wir können [`window.location.pathname`](https://developer.mozilla.org/de/docs/Web/API/Location/pathname) verwenden, um nur den Pfadabschnitt aus der URL zu erhalten.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
const template = document.getElementById(route.templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
Hier haben wir die deklarierten Routen den entsprechenden Vorlagen zugeordnet. Du kannst testen, ob es korrekt funktioniert, indem du die URL manuell in deinem Browser änderst.
✅ Was passiert, wenn du einen unbekannten Pfad in die URL eingibst? Wie könnten wir das lösen?
## Navigation hinzufügen
Der nächste Schritt für unsere App ist es, die Möglichkeit hinzuzufügen, zwischen Seiten zu navigieren, ohne die URL manuell ändern zu müssen. Das bedeutet zwei Dinge:
1. Aktualisierung der aktuellen URL
2. Aktualisierung der angezeigten Vorlage basierend auf der neuen URL
Den zweiten Teil haben wir bereits mit der Funktion `updateRoute` erledigt, also müssen wir herausfinden, wie wir die aktuelle URL aktualisieren.
Wir müssen JavaScript verwenden, insbesondere die Methode [`history.pushState`](https://developer.mozilla.org/de/docs/Web/API/History/pushState), die es ermöglicht, die URL zu aktualisieren und einen neuen Eintrag in der Browser-Historie zu erstellen, ohne das HTML neu zu laden.
> Hinweis: Während das HTML-Ankerelement [`<a href>`](https://developer.mozilla.org/de/docs/Web/HTML/Element/a) allein verwendet werden kann, um Hyperlinks zu verschiedenen URLs zu erstellen, wird es standardmäßig das HTML neu laden. Es ist notwendig, dieses Verhalten zu verhindern, wenn das Routing mit benutzerdefiniertem JavaScript behandelt wird, indem die Funktion `preventDefault()` auf das Klickereignis angewendet wird.
### Aufgabe
Erstellen wir eine neue Funktion, die wir verwenden können, um in unserer App zu navigieren:
```js
function navigate(path) {
window.history.pushState({}, path, path);
updateRoute();
}
```
Diese Methode aktualisiert zuerst die aktuelle URL basierend auf dem angegebenen Pfad und dann die Vorlage. Die Eigenschaft `window.location.origin` gibt die URL-Root zurück, sodass wir eine vollständige URL aus einem gegebenen Pfad rekonstruieren können.
Da wir diese Funktion nun haben, können wir uns um das Problem kümmern, das auftritt, wenn ein Pfad keiner definierten Route entspricht. Wir ändern die Funktion `updateRoute`, indem wir eine Rückfallebene zu einer der vorhandenen Routen hinzufügen, falls wir keine Übereinstimmung finden.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
if (!route) {
return navigate('/login');
}
...
```
Wenn keine Route gefunden werden kann, leiten wir jetzt auf die `login`-Seite um.
Nun erstellen wir eine Funktion, um die URL zu erhalten, wenn ein Link angeklickt wird, und um das Standardverhalten des Browsers für Links zu verhindern:
```js
function onLinkClick(event) {
event.preventDefault();
navigate(event.target.href);
}
```
Vervollständigen wir das Navigationssystem, indem wir Bindungen zu unseren *Login*- und *Logout*-Links im HTML hinzufügen.
```html
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
Das oben genannte `event`-Objekt erfasst das `click`-Ereignis und übergibt es an unsere Funktion `onLinkClick`.
Verwende das Attribut [`onclick`](https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onclick), um das `click`-Ereignis an JavaScript-Code zu binden, hier den Aufruf der Funktion `navigate()`.
Probiere aus, auf diese Links zu klicken. Du solltest jetzt in der Lage sein, zwischen den verschiedenen Bildschirmen deiner App zu navigieren.
✅ Die Methode `history.pushState` ist Teil des HTML5-Standards und in [allen modernen Browsern](https://caniuse.com/?search=pushState) implementiert. Wenn du eine Web-App für ältere Browser erstellst, gibt es einen Trick, den du anstelle dieser API verwenden kannst: Durch die Verwendung eines [Hashes (`#`)](https://de.wikipedia.org/wiki/URI-Fragment) vor dem Pfad kannst du ein Routing implementieren, das mit regulärer Anker-Navigation funktioniert und die Seite nicht neu lädt, da es ursprünglich dazu gedacht war, interne Links innerhalb einer Seite zu erstellen.
## Umgang mit den Vor- und Zurück-Buttons des Browsers
Die Verwendung von `history.pushState` erstellt neue Einträge in der Navigationshistorie des Browsers. Du kannst das überprüfen, indem du die *Zurück-Taste* deines Browsers gedrückt hältst. Es sollte etwas wie folgt angezeigt werden:
![Screenshot der Navigationshistorie](../../../../7-bank-project/1-template-route/history.png)
Wenn du ein paar Mal auf die Zurück-Taste klickst, wirst du sehen, dass sich die aktuelle URL ändert und die Historie aktualisiert wird, aber dieselbe Vorlage weiterhin angezeigt wird.
Das liegt daran, dass die Anwendung nicht weiß, dass wir `updateRoute()` jedes Mal aufrufen müssen, wenn sich die Historie ändert. Wenn du dir die [Dokumentation zu `history.pushState`](https://developer.mozilla.org/de/docs/Web/API/History/pushState) ansiehst, wirst du feststellen, dass das [`popstate`](https://developer.mozilla.org/de/docs/Web/API/Window/popstate_event)-Ereignis ausgelöst wird, wenn sich der Zustand ändert – das heißt, wenn wir zu einer anderen URL wechseln. Wir werden das verwenden, um dieses Problem zu beheben.
### Aufgabe
Um sicherzustellen, dass die angezeigte Vorlage aktualisiert wird, wenn sich die Browser-Historie ändert, fügen wir eine neue Funktion hinzu, die `updateRoute()` aufruft. Wir machen das am Ende unserer `app.js`-Datei:
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
> Hinweis: Wir haben hier eine [Arrow-Funktion](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions) verwendet, um unseren `popstate`-Ereignishandler zu deklarieren, der der Kürze dient, aber eine reguläre Funktion würde genauso funktionieren.
Hier ist ein Auffrischungsvideo zu Arrow-Funktionen:
[![Arrow-Funktionen](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow-Funktionen")
> 🎥 Klicke auf das Bild oben, um ein Video über Arrow-Funktionen anzusehen.
Probiere nun die Vor- und Zurück-Buttons deines Browsers aus und überprüfe, ob die angezeigte Route diesmal korrekt aktualisiert wird.
---
## 🚀 Herausforderung
Füge eine neue Vorlage und Route für eine dritte Seite hinzu, die die Credits für diese App anzeigt.
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
## Rückblick & Selbststudium
Routing ist einer der überraschend kniffligen Teile der Webentwicklung, insbesondere da das Web von Seitenaktualisierungsverhalten zu Single-Page-Application-Aktualisierungen übergeht. Lies ein wenig darüber, [wie der Azure Static Web App-Dienst](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) Routing handhabt. Kannst du erklären, warum einige der in diesem Dokument beschriebenen Entscheidungen notwendig sind?
## Aufgabe
[Verbessere das Routing](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

26
translations/de/7-bank-project/1-template-route/assignment.md Normal file
View File

@@ -0,0 +1,26 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8223e429218befa731dd5bfd22299520",
"translation_date": "2025-08-24T13:41:50+00:00",
"source_file": "7-bank-project/1-template-route/assignment.md",
"language_code": "de"
}
-->
# Verbesserung der Routenführung
## Anweisungen
Die Routen-Deklaration enthält derzeit nur die Template-ID, die verwendet werden soll. Aber beim Anzeigen einer neuen Seite wird manchmal etwas mehr benötigt. Lassen Sie uns unsere Routing-Implementierung mit zwei zusätzlichen Funktionen verbessern:
- Geben Sie jedem Template einen Titel und aktualisieren Sie den Fenstertitel mit diesem neuen Titel, wenn sich das Template ändert.
- Fügen Sie eine Option hinzu, um nach der Änderung des Templates Code auszuführen. Wir möchten `'Dashboard is shown'` in der Entwicklerkonsole ausgeben, jedes Mal, wenn die Dashboard-Seite angezeigt wird.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| | Die beiden Funktionen sind implementiert und funktionieren. Titel und Codeausführung funktionieren auch für eine neue Route, die in der `routes`-Deklaration hinzugefügt wurde. | Die beiden Funktionen funktionieren, aber das Verhalten ist fest codiert und nicht über die `routes`-Deklaration konfigurierbar. Das Hinzufügen einer dritten Route mit Titel und Codeausführung funktioniert nicht oder nur teilweise. | Eine der Funktionen fehlt oder funktioniert nicht richtig. |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

310
translations/de/7-bank-project/2-forms/README.md Normal file
View File

@@ -0,0 +1,310 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b667b7d601e2ee19acb5aa9d102dc9f3",
"translation_date": "2025-08-24T13:28:59+00:00",
"source_file": "7-bank-project/2-forms/README.md",
"language_code": "de"
}
-->
# Erstellen einer Banking-App Teil 2: Login- und Registrierungsformular erstellen
## Quiz vor der Lektion
[Quiz vor der Lektion](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
### Einführung
In fast allen modernen Web-Apps können Sie ein Konto erstellen, um Ihren eigenen privaten Bereich zu haben. Da mehrere Benutzer gleichzeitig auf eine Web-App zugreifen können, benötigen Sie einen Mechanismus, um die persönlichen Daten jedes Benutzers separat zu speichern und auszuwählen, welche Informationen angezeigt werden sollen. Wir werden nicht behandeln, wie [Benutzeridentität sicher verwaltet](https://en.wikipedia.org/wiki/Authentication) wird, da dies ein umfangreiches Thema für sich ist, aber wir stellen sicher, dass jeder Benutzer in unserer App ein (oder mehrere) Bankkonten erstellen kann.
In diesem Teil verwenden wir HTML-Formulare, um Login und Registrierung zu unserer Web-App hinzuzufügen. Wir werden sehen, wie man die Daten programmgesteuert an eine Server-API sendet und schließlich grundlegende Validierungsregeln für Benutzereingaben definiert.
### Voraussetzungen
Sie müssen die [HTML-Vorlagen und Routing](../1-template-route/README.md) der Web-App für diese Lektion abgeschlossen haben. Außerdem müssen Sie [Node.js](https://nodejs.org) installieren und die [Server-API](../api/README.md) lokal ausführen, damit Sie Daten zum Erstellen von Konten senden können.
**Beachten Sie**
Sie werden zwei Terminals gleichzeitig ausführen, wie unten aufgeführt:
1. Für die Haupt-Banking-App, die wir in der Lektion [HTML-Vorlagen und Routing](../1-template-route/README.md) erstellt haben.
2. Für die [Bank-App-Server-API](../api/README.md), die wir gerade oben eingerichtet haben.
Sie benötigen beide Server, die laufen, um den Rest der Lektion zu verfolgen. Sie hören auf verschiedenen Ports (Port `3000` und Port `5000`), sodass alles einwandfrei funktionieren sollte.
Sie können testen, ob der Server ordnungsgemäß läuft, indem Sie diesen Befehl in einem Terminal ausführen:
```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```
---
## Formular und Steuerelemente
Das `<form>`-Element kapselt einen Abschnitt eines HTML-Dokuments, in dem der Benutzer Daten mit interaktiven Steuerelementen eingeben und senden kann. Es gibt alle Arten von Benutzeroberflächen-Steuerelementen (UI), die in einem Formular verwendet werden können, das häufigste ist das `<input>`- und das `<button>`-Element.
Es gibt viele verschiedene [Typen](https://developer.mozilla.org/docs/Web/HTML/Element/input) von `<input>`. Um beispielsweise ein Feld zu erstellen, in das der Benutzer seinen Benutzernamen eingeben kann, können Sie Folgendes verwenden:
```html
<input id="username" name="username" type="text">
```
Das `name`-Attribut wird als Eigenschaftsname verwendet, wenn die Formulardaten gesendet werden. Das `id`-Attribut wird verwendet, um ein `<label>` mit dem Formular-Steuerelement zu verknüpfen.
> Sehen Sie sich die gesamte Liste der [`<input>`-Typen](https://developer.mozilla.org/docs/Web/HTML/Element/input) und [anderen Formular-Steuerelemente](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) an, um eine Vorstellung von allen nativen UI-Elementen zu bekommen, die Sie beim Erstellen Ihrer Benutzeroberfläche verwenden können.
✅ Beachten Sie, dass `<input>` ein [leeres Element](https://developer.mozilla.org/docs/Glossary/Empty_element) ist, bei dem Sie *keinen* passenden Schließtag hinzufügen sollten. Sie können jedoch die selbstschließende `<input/>`-Notation verwenden, dies ist jedoch nicht erforderlich.
Das `<button>`-Element innerhalb eines Formulars ist etwas Besonderes. Wenn Sie sein `type`-Attribut nicht angeben, sendet es die Formulardaten automatisch an den Server, wenn es gedrückt wird. Hier sind die möglichen `type`-Werte:
- `submit`: Standardmäßig innerhalb eines `<form>` löst der Button die Formularübermittlung aus.
- `reset`: Der Button setzt alle Formular-Steuerelemente auf ihre ursprünglichen Werte zurück.
- `button`: Weist keine Standardaktion zu, wenn der Button gedrückt wird. Sie können dann benutzerdefinierte Aktionen mit JavaScript zuweisen.
### Aufgabe
Beginnen wir damit, ein Formular zur `login`-Vorlage hinzuzufügen. Wir benötigen ein Feld für den *Benutzernamen* und einen *Login*-Button.
```html
<template id="login">
<h1>Bank App</h1>
<section>
<h2>Login</h2>
<form id="loginForm">
<label for="username">Username</label>
<input id="username" name="user" type="text">
<button>Login</button>
</form>
</section>
</template>
```
Wenn Sie genauer hinschauen, können Sie feststellen, dass wir hier auch ein `<label>`-Element hinzugefügt haben. `<label>`-Elemente werden verwendet, um einem UI-Steuerelement wie unserem Benutzernamenfeld einen Namen zu geben. Labels sind wichtig für die Lesbarkeit Ihrer Formulare, bieten aber auch zusätzliche Vorteile:
- Durch die Verknüpfung eines Labels mit einem Formular-Steuerelement wird Benutzern, die unterstützende Technologien verwenden (wie ein Screenreader), geholfen zu verstehen, welche Daten sie eingeben sollen.
- Sie können auf das Label klicken, um direkt den Fokus auf das zugehörige Eingabefeld zu setzen, was die Bedienung auf Touchscreen-Geräten erleichtert.
> [Barrierefreiheit](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) im Web ist ein sehr wichtiges Thema, das oft übersehen wird. Dank [semantischer HTML-Elemente](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) ist es nicht schwierig, barrierefreie Inhalte zu erstellen, wenn Sie sie richtig verwenden. Sie können [mehr über Barrierefreiheit lesen](https://developer.mozilla.org/docs/Web/Accessibility), um häufige Fehler zu vermeiden und ein verantwortungsbewusster Entwickler zu werden.
Nun fügen wir ein zweites Formular für die Registrierung direkt unter dem vorherigen hinzu:
```html
<hr/>
<h2>Register</h2>
<form id="registerForm">
<label for="user">Username</label>
<input id="user" name="user" type="text">
<label for="currency">Currency</label>
<input id="currency" name="currency" type="text" value="$">
<label for="description">Description</label>
<input id="description" name="description" type="text">
<label for="balance">Current balance</label>
<input id="balance" name="balance" type="number" value="0">
<button>Register</button>
</form>
```
Mit dem `value`-Attribut können wir einen Standardwert für eine bestimmte Eingabe definieren. Beachten Sie auch, dass das Eingabefeld für `balance` den Typ `number` hat. Sieht es anders aus als die anderen Eingaben? Versuchen Sie, damit zu interagieren.
✅ Können Sie die Formulare nur mit einer Tastatur navigieren und bedienen? Wie würden Sie das tun?
## Daten an den Server senden
Jetzt, da wir eine funktionale Benutzeroberfläche haben, ist der nächste Schritt, die Daten an unseren Server zu senden. Machen wir einen kurzen Test mit unserem aktuellen Code: Was passiert, wenn Sie auf den *Login*- oder *Register*-Button klicken?
Haben Sie die Änderung im URL-Bereich Ihres Browsers bemerkt?
![Screenshot der URL-Änderung im Browser nach dem Klick auf den Register-Button](../../../../7-bank-project/2-forms/images/click-register.png)
Die Standardaktion für ein `<form>` ist, das Formular an die aktuelle Server-URL mit der [GET-Methode](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3) zu senden, wobei die Formulardaten direkt an die URL angehängt werden. Diese Methode hat jedoch einige Nachteile:
- Die gesendeten Daten sind in der Größe begrenzt (etwa 2000 Zeichen).
- Die Daten sind direkt in der URL sichtbar (nicht ideal für Passwörter).
- Sie funktioniert nicht mit Datei-Uploads.
Deshalb können Sie sie ändern, um die [POST-Methode](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) zu verwenden, die die Formulardaten im Body der HTTP-Anfrage an den Server sendet, ohne die vorherigen Einschränkungen.
> Während POST die am häufigsten verwendete Methode zum Senden von Daten ist, [gibt es in einigen spezifischen Szenarien](https://www.w3.org/2001/tag/doc/whenToUseGet.html) Fälle, in denen es vorzuziehen ist, die GET-Methode zu verwenden, beispielsweise bei der Implementierung eines Suchfelds.
### Aufgabe
Fügen Sie der Registrierungsformular die Eigenschaften `action` und `method` hinzu:
```html
<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
```
Versuchen Sie nun, ein neues Konto mit Ihrem Namen zu registrieren. Nachdem Sie auf den *Register*-Button geklickt haben, sollten Sie etwas wie das Folgende sehen:
![Ein Browserfenster unter der Adresse localhost:5000/api/accounts, das eine JSON-Zeichenkette mit Benutzerdaten zeigt](../../../../7-bank-project/2-forms/images/form-post.png)
Wenn alles gut läuft, sollte der Server Ihre Anfrage mit einer [JSON](https://www.json.org/json-en.html)-Antwort beantworten, die die erstellten Kontodaten enthält.
✅ Versuchen Sie erneut, sich mit demselben Namen zu registrieren. Was passiert?
## Daten senden, ohne die Seite neu zu laden
Wie Sie wahrscheinlich bemerkt haben, gibt es ein kleines Problem mit dem Ansatz, den wir gerade verwendet haben: Beim Absenden des Formulars verlassen wir unsere App und der Browser leitet zur Server-URL weiter. Wir versuchen, alle Seitenneuladungen mit unserer Web-App zu vermeiden, da wir eine [Single-Page-Anwendung (SPA)](https://en.wikipedia.org/wiki/Single-page_application) erstellen.
Um die Formulardaten an den Server zu senden, ohne eine Seitenneuladung zu erzwingen, müssen wir JavaScript-Code verwenden. Anstatt eine URL in die `action`-Eigenschaft eines `<form>`-Elements zu setzen, können Sie beliebigen JavaScript-Code mit dem Präfix `javascript:` verwenden, um eine benutzerdefinierte Aktion auszuführen. Dies bedeutet auch, dass Sie einige Aufgaben implementieren müssen, die zuvor automatisch vom Browser ausgeführt wurden:
- Die Formulardaten abrufen.
- Die Formulardaten in ein geeignetes Format konvertieren und codieren.
- Die HTTP-Anfrage erstellen und an den Server senden.
### Aufgabe
Ersetzen Sie die `action` des Registrierungsformulars durch:
```html
<form id="registerForm" action="javascript:register()">
```
Öffnen Sie `app.js` und fügen Sie eine neue Funktion namens `register` hinzu:
```js
function register() {
const registerForm = document.getElementById('registerForm');
const formData = new FormData(registerForm);
const data = Object.fromEntries(formData);
const jsonData = JSON.stringify(data);
}
```
Hier rufen wir das Formularelement mit `getElementById()` ab und verwenden den [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)-Helfer, um die Werte aus den Formular-Steuerelementen als Satz von Schlüssel/Wert-Paaren zu extrahieren. Dann konvertieren wir die Daten in ein reguläres Objekt mit [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) und serialisieren die Daten schließlich in [JSON](https://www.json.org/json-en.html), ein Format, das häufig für den Datenaustausch im Web verwendet wird.
Die Daten sind jetzt bereit, an den Server gesendet zu werden. Erstellen Sie eine neue Funktion namens `createAccount`:
```js
async function createAccount(account) {
try {
const response = await fetch('//localhost:5000/api/accounts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: account
});
return await response.json();
} catch (error) {
return { error: error.message || 'Unknown error' };
}
}
```
Was macht diese Funktion? Beachten Sie zuerst das `async`-Schlüsselwort hier. Dies bedeutet, dass die Funktion Code enthält, der [**asynchron**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) ausgeführt wird. Wenn es zusammen mit dem `await`-Schlüsselwort verwendet wird, ermöglicht es das Warten auf die Ausführung von asynchronem Code - wie das Warten auf die Serverantwort hier - bevor es weitergeht.
Hier ist ein kurzes Video über die Verwendung von `async/await`:
[![Async und Await für die Verwaltung von Promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async und Await für die Verwaltung von Promises")
> 🎥 Klicken Sie auf das Bild oben für ein Video über async/await.
Wir verwenden die `fetch()`-API, um JSON-Daten an den Server zu senden. Diese Methode benötigt 2 Parameter:
- Die URL des Servers, daher setzen wir hier wieder `//localhost:5000/api/accounts`.
- Die Einstellungen der Anfrage. Hier setzen wir die Methode auf `POST` und stellen den `body` für die Anfrage bereit. Da wir JSON-Daten an den Server senden, müssen wir auch den `Content-Type`-Header auf `application/json` setzen, damit der Server weiß, wie er den Inhalt interpretieren soll.
Da der Server die Anfrage mit JSON beantwortet, können wir `await response.json()` verwenden, um den JSON-Inhalt zu analysieren und das resultierende Objekt zurückzugeben. Beachten Sie, dass diese Methode asynchron ist, daher verwenden wir hier das `await`-Schlüsselwort, bevor wir zurückkehren, um sicherzustellen, dass alle Fehler während der Analyse ebenfalls abgefangen werden.
Fügen Sie nun etwas Code zur `register`-Funktion hinzu, um `createAccount()` aufzurufen:
```js
const result = await createAccount(jsonData);
```
Da wir hier das `await`-Schlüsselwort verwenden, müssen wir das `async`-Schlüsselwort vor der `register`-Funktion hinzufügen:
```js
async function register() {
```
Fügen Sie schließlich einige Logs hinzu, um das Ergebnis zu überprüfen. Die endgültige Funktion sollte wie folgt aussehen:
```js
async function register() {
const registerForm = document.getElementById('registerForm');
const formData = new FormData(registerForm);
const jsonData = JSON.stringify(Object.fromEntries(formData));
const result = await createAccount(jsonData);
if (result.error) {
return console.log('An error occurred:', result.error);
}
console.log('Account created!', result);
}
```
Das war ein bisschen lang, aber wir haben es geschafft! Wenn Sie Ihre [Entwicklerwerkzeuge des Browsers](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) öffnen und versuchen, ein neues Konto zu registrieren, sollten Sie keine Änderung auf der Webseite sehen, aber eine Nachricht wird in der Konsole angezeigt, die bestätigt, dass alles funktioniert.
![Screenshot zeigt Log-Nachricht in der Browser-Konsole](../../../../7-bank-project/2-forms/images/browser-console.png)
✅ Denken Sie, dass die Daten sicher an den Server gesendet werden? Was wäre, wenn jemand die Anfrage abfangen könnte? Sie können über [HTTPS](https://en.wikipedia.org/wiki/HTTPS) lesen, um mehr über sichere Datenkommunikation zu erfahren.
## Datenvalidierung
Wenn Sie versuchen, ein neues Konto zu registrieren, ohne zuerst einen Benutzernamen festzulegen, können Sie sehen, dass der Server einen Fehler mit dem Statuscode [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) zurückgibt.
Bevor Daten an einen Server gesendet werden, ist es eine gute Praxis, [die Formulardaten zu validieren](https://developer.mozilla.org/docs/Learn/Forms/Form_validation), wenn möglich, um sicherzustellen, dass Sie eine gültige Anfrage senden. HTML5-Formular-Steuerelemente bieten integrierte Validierung mithilfe verschiedener Attribute:
- `required`: Das Feld muss ausgefüllt werden, sonst kann das Formular nicht gesendet werden.
- `minlength` und `maxlength`: Definiert die minimale und maximale Anzahl von Zeichen in Textfeldern.
- `min` und `max`: Definiert den minimalen und maximalen Wert eines numerischen Feldes.
- `type`: Definiert die Art der erwarteten Daten, wie `number`, `email`, `file` oder [andere integrierte Typen](https://developer.mozilla.org/docs/Web/HTML/Element/input). Dieses Attribut kann auch die visuelle Darstellung des Formular-Steuerelements ändern.
- `pattern`: Ermöglicht die Definition eines [regulären Ausdrucks](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions), um zu testen, ob die eingegebenen Daten gültig sind oder nicht.
Tipp: Sie können das Erscheinungsbild Ihrer Formularsteuerelemente anpassen, je nachdem, ob sie gültig oder ungültig sind, indem Sie die CSS-Pseudoklassen `:valid` und `:invalid` verwenden.
### Aufgabe
Es gibt zwei Pflichtfelder, um ein gültiges neues Konto zu erstellen: den Benutzernamen und die Währung. Die anderen Felder sind optional. Aktualisieren Sie das HTML-Formular, indem Sie sowohl das `required`-Attribut als auch den Text im Feldlabel verwenden, sodass:
```html
<label for="user">Username (required)</label>
<input id="user" name="user" type="text" required>
...
<label for="currency">Currency (required)</label>
<input id="currency" name="currency" type="text" value="$" required>
```
Obwohl diese spezielle Serverimplementierung keine spezifischen Begrenzungen für die maximale Länge der Felder erzwingt, ist es immer eine gute Praxis, vernünftige Grenzen für jede Benutzereingabe zu definieren.
Fügen Sie ein `maxlength`-Attribut zu den Textfeldern hinzu:
```html
<input id="user" name="user" type="text" maxlength="20" required>
...
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
...
<input id="description" name="description" type="text" maxlength="100">
```
Wenn Sie nun die *Registrieren*-Schaltfläche drücken und ein Feld nicht einer der von uns definierten Validierungsregeln entspricht, sollten Sie etwas wie das Folgende sehen:
![Screenshot, der den Validierungsfehler beim Versuch, das Formular abzusenden, zeigt](../../../../7-bank-project/2-forms/images/validation-error.png)
Eine solche Validierung, die *vor* dem Senden von Daten an den Server durchgeführt wird, wird als **Client-seitige** Validierung bezeichnet. Beachten Sie jedoch, dass es nicht immer möglich ist, alle Prüfungen ohne das Senden der Daten durchzuführen. Zum Beispiel können wir hier nicht überprüfen, ob ein Konto mit demselben Benutzernamen bereits existiert, ohne eine Anfrage an den Server zu senden. Zusätzliche Validierungen, die auf dem Server durchgeführt werden, werden als **Server-seitige** Validierung bezeichnet.
In der Regel müssen beide implementiert werden. Während die Client-seitige Validierung die Benutzererfahrung verbessert, indem sie dem Benutzer sofortiges Feedback gibt, ist die Server-seitige Validierung entscheidend, um sicherzustellen, dass die Benutzerdaten, die Sie verarbeiten, korrekt und sicher sind.
---
## 🚀 Herausforderung
Zeigen Sie eine Fehlermeldung im HTML an, wenn der Benutzer bereits existiert.
Hier ist ein Beispiel, wie die endgültige Login-Seite nach ein wenig Styling aussehen könnte:
![Screenshot der Login-Seite nach dem Hinzufügen von CSS-Stilen](../../../../7-bank-project/2-forms/images/result.png)
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
## Überprüfung & Selbststudium
Entwickler sind sehr kreativ geworden, wenn es um ihre Bemühungen beim Erstellen von Formularen geht, insbesondere in Bezug auf Validierungsstrategien. Informieren Sie sich über verschiedene Formularabläufe, indem Sie [CodePen](https://codepen.com) durchstöbern. Können Sie interessante und inspirierende Formulare finden?
## Aufgabe
[Stylen Sie Ihre Bank-App](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

25
translations/de/7-bank-project/2-forms/assignment.md Normal file
View File

@@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "474f3ab1ee755ca980fc9104a0316e17",
"translation_date": "2025-08-24T13:32:31+00:00",
"source_file": "7-bank-project/2-forms/assignment.md",
"language_code": "de"
}
-->
# Gestalte deine Bank-App
## Anweisungen
Erstelle eine neue Datei `styles.css` und füge einen Link dazu in deine aktuelle Datei `index.html` ein. Füge in der gerade erstellten CSS-Datei einige Styles hinzu, um die *Login*- und *Dashboard*-Seite ansprechend und ordentlich zu gestalten. Versuche, ein Farbschema zu erstellen, um deiner App eine eigene Markenidentität zu verleihen.
> Tipp: Du kannst das HTML bearbeiten und neue Elemente und Klassen hinzufügen, falls nötig.
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
| | Alle Seiten sehen sauber und gut lesbar aus, mit einem konsistenten Farbschema und klar hervorgehobenen Abschnitten. | Seiten sind gestaltet, aber ohne einheitliches Thema oder mit unscharf abgegrenzten Abschnitten. | Seiten fehlen Styling, die Abschnitte wirken unorganisiert und die Informationen sind schwer lesbar. |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

345
translations/de/7-bank-project/3-data/README.md Normal file
View File

@@ -0,0 +1,345 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f587e913e3f7c0b1c549a05dd74ee8e5",
"translation_date": "2025-08-24T13:34:07+00:00",
"source_file": "7-bank-project/3-data/README.md",
"language_code": "de"
}
-->
# Erstellen einer Banking-App Teil 3: Methoden zum Abrufen und Verwenden von Daten
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
### Einführung
Im Kern jeder Webanwendung stehen *Daten*. Daten können viele Formen annehmen, aber ihr Hauptzweck ist es immer, dem Benutzer Informationen anzuzeigen. Da Webanwendungen zunehmend interaktiver und komplexer werden, ist die Art und Weise, wie der Benutzer auf Informationen zugreift und mit ihnen interagiert, ein zentraler Bestandteil der Webentwicklung.
In dieser Lektion werden wir sehen, wie man Daten asynchron von einem Server abruft und diese Daten verwendet, um Informationen auf einer Webseite anzuzeigen, ohne das HTML neu zu laden.
### Voraussetzungen
Für diese Lektion musst du den [Login- und Registrierungsformular](../2-forms/README.md)-Teil der Webanwendung erstellt haben. Außerdem musst du [Node.js](https://nodejs.org) installieren und die [Server-API](../api/README.md) lokal ausführen, um auf Kontodaten zuzugreifen.
Du kannst testen, ob der Server ordnungsgemäß läuft, indem du diesen Befehl in einem Terminal ausführst:
```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```
---
## AJAX und Datenabruf
Traditionelle Webseiten aktualisieren den angezeigten Inhalt, wenn der Benutzer einen Link auswählt oder Daten über ein Formular sendet, indem die gesamte HTML-Seite neu geladen wird. Jedes Mal, wenn neue Daten geladen werden müssen, liefert der Webserver eine komplett neue HTML-Seite, die vom Browser verarbeitet werden muss. Dies unterbricht die aktuelle Benutzeraktion und schränkt die Interaktionen während des Neuladens ein. Dieser Workflow wird auch als *Multi-Page Application* oder *MPA* bezeichnet.
![Aktualisierungsworkflow in einer Multi-Page-Anwendung](../../../../7-bank-project/3-data/images/mpa.png)
Als Webanwendungen komplexer und interaktiver wurden, entstand eine neue Technik namens [AJAX (Asynchronous JavaScript and XML)](https://de.wikipedia.org/wiki/Ajax_(Programmierung)). Diese Technik ermöglicht es Webanwendungen, Daten asynchron von einem Server zu senden und abzurufen, ohne die HTML-Seite neu laden zu müssen. Das führt zu schnelleren Updates und flüssigeren Benutzerinteraktionen. Wenn neue Daten vom Server empfangen werden, kann die aktuelle HTML-Seite auch mit JavaScript über die [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)-API aktualisiert werden. Im Laufe der Zeit hat sich dieser Ansatz zu dem entwickelt, was heute als [*Single-Page Application* oder *SPA*](https://de.wikipedia.org/wiki/Single-Page-Webanwendung) bekannt ist.
![Aktualisierungsworkflow in einer Single-Page-Anwendung](../../../../7-bank-project/3-data/images/spa.png)
Als AJAX erstmals eingeführt wurde, war die einzige verfügbare API zum asynchronen Abrufen von Daten [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Moderne Browser implementieren jedoch auch die bequemere und leistungsfähigere [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), die auf Promises basiert und besser geeignet ist, um JSON-Daten zu verarbeiten.
> Obwohl alle modernen Browser die `Fetch API` unterstützen, solltest du, wenn deine Webanwendung auch auf älteren Browsern funktionieren soll, immer die [Kompatibilitätstabelle auf caniuse.com](https://caniuse.com/fetch) überprüfen.
### Aufgabe
In [der vorherigen Lektion](../2-forms/README.md) haben wir das Registrierungsformular implementiert, um ein Konto zu erstellen. Jetzt fügen wir Code hinzu, um sich mit einem bestehenden Konto anzumelden und dessen Daten abzurufen. Öffne die Datei `app.js` und füge eine neue Funktion `login` hinzu:
```js
async function login() {
const loginForm = document.getElementById('loginForm')
const user = loginForm.user.value;
}
```
Hier beginnen wir damit, das Formularelement mit `getElementById()` abzurufen, und holen dann den Benutzernamen aus dem Eingabefeld mit `loginForm.user.value`. Jedes Formularelement kann über seinen Namen (im HTML mit dem Attribut `name` festgelegt) als Eigenschaft des Formulars aufgerufen werden.
Ähnlich wie bei der Registrierung erstellen wir eine weitere Funktion, um eine Serveranfrage auszuführen, diesmal jedoch, um die Kontodaten abzurufen:
```js
async function getAccount(user) {
try {
const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
return await response.json();
} catch (error) {
return { error: error.message || 'Unknown error' };
}
}
```
Wir verwenden die `fetch` API, um die Daten asynchron vom Server anzufordern. Diesmal benötigen wir keine zusätzlichen Parameter außer der URL, da wir nur Daten abfragen. Standardmäßig erstellt `fetch` eine [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET)-HTTP-Anfrage, was hier genau das ist, was wir brauchen.
✅ `encodeURIComponent()` ist eine Funktion, die Sonderzeichen für URLs maskiert. Welche Probleme könnten auftreten, wenn wir diese Funktion nicht aufrufen und den Wert von `user` direkt in der URL verwenden?
Jetzt aktualisieren wir unsere `login`-Funktion, um `getAccount` zu verwenden:
```js
async function login() {
const loginForm = document.getElementById('loginForm')
const user = loginForm.user.value;
const data = await getAccount(user);
if (data.error) {
return console.log('loginError', data.error);
}
account = data;
navigate('/dashboard');
}
```
Da `getAccount` eine asynchrone Funktion ist, müssen wir sie mit dem Schlüsselwort `await` verwenden, um auf das Serverergebnis zu warten. Wie bei jeder Serveranfrage müssen wir auch Fehlerfälle behandeln. Für den Moment fügen wir nur eine Log-Nachricht hinzu, um den Fehler anzuzeigen, und kommen später darauf zurück.
Dann müssen wir die Daten irgendwo speichern, damit wir sie später verwenden können, um die Dashboard-Informationen anzuzeigen. Da die Variable `account` noch nicht existiert, erstellen wir eine globale Variable dafür am Anfang unserer Datei:
```js
let account = null;
```
Nachdem die Benutzerdaten in einer Variablen gespeichert wurden, können wir mit der Funktion `navigate()` von der *Login*-Seite zum *Dashboard* wechseln.
Schließlich müssen wir unsere `login`-Funktion aufrufen, wenn das Login-Formular abgeschickt wird, indem wir das HTML ändern:
```html
<form id="loginForm" action="javascript:login()">
```
Teste, ob alles korrekt funktioniert, indem du ein neues Konto registrierst und versuchst, dich mit demselben Konto anzumelden.
Bevor wir zum nächsten Teil übergehen, können wir auch die `register`-Funktion vervollständigen, indem wir dies am Ende der Funktion hinzufügen:
```js
account = result;
navigate('/dashboard');
```
✅ Wusstest du, dass du standardmäßig nur Server-APIs von derselben *Domain und Port* wie die Webseite, die du ansiehst, aufrufen kannst? Dies ist ein Sicherheitsmechanismus, der von Browsern durchgesetzt wird. Aber Moment mal, unsere Web-App läuft auf `localhost:3000`, während die Server-API auf `localhost:5000` läuft. Warum funktioniert das? Durch die Verwendung einer Technik namens [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) ist es möglich, Cross-Origin-HTTP-Anfragen auszuführen, wenn der Server spezielle Header zur Antwort hinzufügt, die Ausnahmen für bestimmte Domains erlauben.
> Erfahre mehr über APIs in dieser [Lektion](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
## HTML aktualisieren, um Daten anzuzeigen
Jetzt, da wir die Benutzerdaten haben, müssen wir das bestehende HTML aktualisieren, um sie anzuzeigen. Wir wissen bereits, wie man ein Element aus dem DOM abruft, z. B. mit `document.getElementById()`. Nachdem du ein Basiselement hast, kannst du mit diesen APIs den Inhalt ändern oder Kind-Elemente hinzufügen:
- Mit der [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent)-Eigenschaft kannst du den Text eines Elements ändern. Beachte, dass das Ändern dieses Werts alle Kind-Elemente des Elements (falls vorhanden) entfernt und durch den angegebenen Text ersetzt. Daher ist es auch eine effiziente Methode, alle Kinder eines Elements zu entfernen, indem man ihm einen leeren String `''` zuweist.
- Mit [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) und der [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)-Methode kannst du ein oder mehrere neue Kind-Elemente erstellen und anhängen.
✅ Mit der [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)-Eigenschaft eines Elements ist es ebenfalls möglich, dessen HTML-Inhalt zu ändern. Diese Methode sollte jedoch vermieden werden, da sie anfällig für [Cross-Site-Scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting)-Angriffe ist.
### Aufgabe
Bevor wir zur Dashboard-Seite übergehen, sollten wir noch etwas auf der *Login*-Seite erledigen. Derzeit wird, wenn du versuchst, dich mit einem nicht existierenden Benutzernamen anzumelden, eine Nachricht in der Konsole angezeigt, aber für einen normalen Benutzer ändert sich nichts, und man weiß nicht, was los ist.
Fügen wir ein Platzhalterelement im Login-Formular hinzu, in dem wir bei Bedarf eine Fehlermeldung anzeigen können. Ein guter Platz wäre direkt vor dem Login-`<button>`:
```html
...
<div id="loginError"></div>
<button>Login</button>
...
```
Dieses `<div>`-Element ist leer, was bedeutet, dass nichts auf dem Bildschirm angezeigt wird, bis wir ihm Inhalte hinzufügen. Wir geben ihm auch eine `id`, damit wir es leicht mit JavaScript abrufen können.
Gehe zurück zur Datei `app.js` und erstelle eine neue Hilfsfunktion `updateElement`:
```js
function updateElement(id, text) {
const element = document.getElementById(id);
element.textContent = text;
}
```
Diese Funktion ist ziemlich einfach: Sie aktualisiert den Textinhalt des DOM-Elements mit der passenden `id`, basierend auf den übergebenen Parametern *id* und *text*. Verwenden wir diese Methode anstelle der vorherigen Fehlermeldung in der `login`-Funktion:
```js
if (data.error) {
return updateElement('loginError', data.error);
}
```
Wenn du jetzt versuchst, dich mit einem ungültigen Konto anzumelden, solltest du etwas wie das Folgende sehen:
![Screenshot, der die Fehlermeldung während des Logins anzeigt](../../../../7-bank-project/3-data/images/login-error.png)
Jetzt haben wir einen Fehlertext, der visuell angezeigt wird. Wenn du jedoch einen Screenreader verwendest, wirst du feststellen, dass nichts angesagt wird. Damit Text, der dynamisch zu einer Seite hinzugefügt wird, von Screenreadern angesagt wird, muss er eine sogenannte [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) verwenden. Hier verwenden wir eine spezielle Art von Live-Region, die als Alert bezeichnet wird:
```html
<div id="loginError" role="alert"></div>
```
Implementiere das gleiche Verhalten für die Fehler in der `register`-Funktion (vergiss nicht, das HTML zu aktualisieren).
## Informationen im Dashboard anzeigen
Mit den gleichen Techniken, die wir gerade gesehen haben, kümmern wir uns auch um die Anzeige der Kontoinformationen auf der Dashboard-Seite.
So sieht ein vom Server empfangenes Kontoobjekt aus:
```json
{
"user": "test",
"currency": "$",
"description": "Test account",
"balance": 75,
"transactions": [
{ "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
{ "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
{ "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
],
}
```
> Hinweis: Um dir das Leben zu erleichtern, kannst du das vorgefertigte `test`-Konto verwenden, das bereits mit Daten gefüllt ist.
### Aufgabe
Beginnen wir damit, den Abschnitt "Balance" im HTML zu ersetzen, um Platzhalterelemente hinzuzufügen:
```html
<section>
Balance: <span id="balance"></span><span id="currency"></span>
</section>
```
Wir fügen auch einen neuen Abschnitt direkt darunter hinzu, um die Kontobeschreibung anzuzeigen:
```html
<h2 id="description"></h2>
```
✅ Da die Kontobeschreibung als Titel für den darunter liegenden Inhalt fungiert, wird sie semantisch als Überschrift ausgezeichnet. Erfahre mehr darüber, wie [Überschriftenstruktur](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) für die Barrierefreiheit wichtig ist, und wirf einen kritischen Blick auf die Seite, um zu bestimmen, was sonst noch eine Überschrift sein könnte.
Als Nächstes erstellen wir eine neue Funktion in `app.js`, um die Platzhalter zu füllen:
```js
function updateDashboard() {
if (!account) {
return navigate('/login');
}
updateElement('description', account.description);
updateElement('balance', account.balance.toFixed(2));
updateElement('currency', account.currency);
}
```
Zuerst überprüfen wir, ob wir die benötigten Kontodaten haben, bevor wir fortfahren. Dann verwenden wir die zuvor erstellte Funktion `updateElement()`, um das HTML zu aktualisieren.
> Um die Anzeige des Kontostands ansprechender zu gestalten, verwenden wir die Methode [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), um den Wert mit 2 Nachkommastellen anzuzeigen.
Jetzt müssen wir unsere `updateDashboard()`-Funktion jedes Mal aufrufen, wenn das Dashboard geladen wird. Wenn du die [Aufgabe aus Lektion 1](../1-template-route/assignment.md) bereits abgeschlossen hast, sollte dies einfach sein. Andernfalls kannst du die folgende Implementierung verwenden.
Füge diesen Code am Ende der Funktion `updateRoute()` hinzu:
```js
if (typeof route.init === 'function') {
route.init();
}
```
Und aktualisiere die Routen-Definition mit:
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard', init: updateDashboard }
};
```
Mit dieser Änderung wird die Funktion `updateDashboard()` jedes Mal aufgerufen, wenn die Dashboard-Seite angezeigt wird. Nach einem Login solltest du dann den Kontostand, die Währung und die Beschreibung sehen können.
## Tabellenzeilen dynamisch mit HTML-Templates erstellen
In der [ersten Lektion](../1-template-route/README.md) haben wir HTML-Templates zusammen mit der Methode [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) verwendet, um die Navigation in unserer App zu implementieren. Templates können auch kleiner sein und verwendet werden, um sich wiederholende Teile einer Seite dynamisch zu füllen.
Wir verwenden einen ähnlichen Ansatz, um die Liste der Transaktionen in der HTML-Tabelle anzuzeigen.
### Aufgabe
Füge ein neues Template in den HTML-`<body>`-Bereich ein:
```html
<template id="transaction">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</template>
```
Dieses Template stellt eine einzelne Tabellenzeile dar, mit den 3 Spalten, die wir füllen möchten: *Datum*, *Objekt* und *Betrag* einer Transaktion.
Füge dann diese `id`-Eigenschaft zum `<tbody>`-Element der Tabelle im Dashboard-Template hinzu, um es mit JavaScript leichter zu finden:
```html
<tbody id="transactions"></tbody>
```
Unser HTML ist bereit. Wechseln wir zum JavaScript-Code und erstellen eine neue Funktion `createTransactionRow`:
```js
function createTransactionRow(transaction) {
const template = document.getElementById('transaction');
const transactionRow = template.content.cloneNode(true);
const tr = transactionRow.querySelector('tr');
tr.children[0].textContent = transaction.date;
tr.children[1].textContent = transaction.object;
tr.children[2].textContent = transaction.amount.toFixed(2);
return transactionRow;
}
```
Diese Funktion macht genau das, was ihr Name andeutet: Sie verwendet das zuvor erstellte Template, um eine neue Tabellenzeile zu erstellen und deren Inhalte mit Transaktionsdaten zu füllen. Wir verwenden dies in unserer `updateDashboard()`-Funktion, um die Tabelle zu füllen:
```js
const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
const transactionRow = createTransactionRow(transaction);
transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);
```
Hier verwenden wir die Methode [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), die ein neues DOM-Fragment erstellt, mit dem wir arbeiten können, bevor wir es schließlich an unsere HTML-Tabelle anhängen.
Es gibt noch eine Sache, die wir tun müssen, bevor dieser Code funktioniert, da unsere Funktion `updateElement()` derzeit nur Textinhalte unterstützt. Ändern wir ihren Code ein wenig:
```js
function updateElement(id, textOrNode) {
const element = document.getElementById(id);
element.textContent = ''; // Removes all children
element.append(textOrNode);
}
```
Wir verwenden die Methode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), da sie es ermöglicht, entweder Text oder [DOM-Knoten](https://developer.mozilla.org/docs/Web/API/Node) an ein übergeordnetes Element anzuhängen, was perfekt für all unsere Anwendungsfälle ist.
Wenn Sie versuchen, sich mit dem `test`-Konto anzumelden, sollten Sie jetzt eine Transaktionsliste auf dem Dashboard sehen 🎉.
---
## 🚀 Herausforderung
Arbeitet zusammen, um die Dashboard-Seite wie eine echte Banking-App aussehen zu lassen. Falls ihr eure App bereits gestaltet habt, versucht [Media Queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) zu verwenden, um ein [responsives Design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) zu erstellen, das sowohl auf Desktop- als auch auf Mobilgeräten gut funktioniert.
Hier ist ein Beispiel für eine gestaltete Dashboard-Seite:
![Screenshot eines Beispielergebnisses des Dashboards nach der Gestaltung](../../../../7-bank-project/images/screen2.png)
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
## Aufgabe
[Refaktorieren und kommentieren Sie Ihren Code](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

27
translations/de/7-bank-project/3-data/assignment.md Normal file
View File

@@ -0,0 +1,27 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
"translation_date": "2025-08-24T13:37:17+00:00",
"source_file": "7-bank-project/3-data/assignment.md",
"language_code": "de"
}
-->
# Refaktorieren und kommentieren Sie Ihren Code
## Anweisungen
Wenn Ihre Codebasis wächst, ist es wichtig, den Code regelmäßig zu refaktorieren, um ihn im Laufe der Zeit lesbar und wartbar zu halten. Fügen Sie Kommentare hinzu und refaktorieren Sie Ihre `app.js`, um die Codequalität zu verbessern:
- Extrahieren Sie Konstanten, wie die Basis-URL der Server-API
- Vereinfachen Sie ähnlichen Code: Zum Beispiel können Sie eine `sendRequest()`-Funktion erstellen, um den Code, der sowohl in `createAccount()` als auch in `getAccount()` verwendet wird, zusammenzufassen
- Organisieren Sie den Code neu, um ihn leichter lesbar zu machen, und fügen Sie Kommentare hinzu
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
| | Code ist kommentiert, gut organisiert in verschiedene Abschnitte und leicht zu lesen. Konstanten sind extrahiert und eine vereinfachte `sendRequest()`-Funktion wurde erstellt. | Code ist sauber, kann aber durch mehr Kommentare, Konstantenextraktion oder Vereinfachung weiter verbessert werden. | Code ist unübersichtlich, nicht kommentiert, Konstanten sind nicht extrahiert und der Code ist nicht vereinfacht. |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

292
translations/de/7-bank-project/4-state-management/README.md Normal file
View File

@@ -0,0 +1,292 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "4fa20c513e367e9cdd401bf49ae16e33",
"translation_date": "2025-08-24T13:44:13+00:00",
"source_file": "7-bank-project/4-state-management/README.md",
"language_code": "de"
}
-->
# Erstellen einer Banking-App Teil 4: Konzepte des State Managements
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
### Einführung
Mit dem Wachstum einer Webanwendung wird es zunehmend schwieriger, alle Datenflüsse im Blick zu behalten. Welcher Code holt die Daten, welche Seite nutzt sie, wo und wann müssen sie aktualisiert werden... Es ist leicht, in einem unübersichtlichen Code zu enden, der schwer zu warten ist. Dies gilt besonders, wenn Daten zwischen verschiedenen Seiten der App geteilt werden müssen, wie z. B. Benutzerdaten. Das Konzept des *State Managements* existiert schon immer in allen Arten von Programmen, aber mit der zunehmenden Komplexität von Web-Apps ist es heute ein zentraler Punkt, über den man während der Entwicklung nachdenken muss.
In diesem letzten Teil werden wir die App, die wir erstellt haben, überarbeiten, um das State Management neu zu denken. Dadurch wird es möglich, Browser-Aktualisierungen zu unterstützen und Daten über Benutzersitzungen hinweg zu speichern.
### Voraussetzungen
Du musst den [Datenabruf](../3-data/README.md)-Teil der Web-App für diese Lektion abgeschlossen haben. Außerdem musst du [Node.js](https://nodejs.org) installieren und die [Server-API](../api/README.md) lokal ausführen, um Kontodaten verwalten zu können.
Du kannst testen, ob der Server ordnungsgemäß läuft, indem du diesen Befehl in einem Terminal ausführst:
```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```
---
## State Management überdenken
In der [vorherigen Lektion](../3-data/README.md) haben wir ein grundlegendes Konzept von State in unserer App eingeführt, indem wir die globale Variable `account` verwendet haben, die die Bankdaten des aktuell angemeldeten Benutzers enthält. Unsere aktuelle Implementierung hat jedoch einige Schwächen. Versuche, die Seite zu aktualisieren, während du auf dem Dashboard bist. Was passiert?
Es gibt drei Probleme mit dem aktuellen Code:
- Der State wird nicht gespeichert, da ein Browser-Refresh dich zurück zur Login-Seite bringt.
- Es gibt mehrere Funktionen, die den State ändern. Wenn die App wächst, kann es schwierig werden, die Änderungen nachzuverfolgen, und es ist leicht, eine Aktualisierung zu vergessen.
- Der State wird nicht bereinigt, sodass die Kontodaten beim Klick auf *Logout* noch vorhanden sind, obwohl du dich auf der Login-Seite befindest.
Wir könnten unseren Code aktualisieren, um diese Probleme einzeln anzugehen, aber das würde zu mehr Code-Duplikation führen und die App komplexer und schwerer wartbar machen. Oder wir könnten uns ein paar Minuten Zeit nehmen und unsere Strategie überdenken.
> Welche Probleme versuchen wir hier wirklich zu lösen?
[State Management](https://de.wikipedia.org/wiki/State_Management) dreht sich darum, einen guten Ansatz zu finden, um diese beiden spezifischen Probleme zu lösen:
- Wie können die Datenflüsse in einer App verständlich gehalten werden?
- Wie kann der State immer mit der Benutzeroberfläche synchronisiert werden (und umgekehrt)?
Sobald diese Probleme gelöst sind, könnten andere Probleme entweder bereits behoben sein oder leichter zu lösen sein. Es gibt viele mögliche Ansätze, um diese Probleme zu lösen, aber wir werden eine gängige Lösung verwenden, die darin besteht, **die Daten und die Möglichkeiten, sie zu ändern, zu zentralisieren**. Die Datenflüsse würden so aussehen:
![Schema, das die Datenflüsse zwischen HTML, Benutzeraktionen und State zeigt](../../../../7-bank-project/4-state-management/images/data-flow.png)
> Wir werden hier nicht den Teil behandeln, bei dem die Daten automatisch die Ansicht aktualisieren, da dies mit fortgeschritteneren Konzepten der [Reaktiven Programmierung](https://de.wikipedia.org/wiki/Reaktive_Programmierung) verbunden ist. Es ist ein gutes Thema für ein tiefergehendes Studium.
✅ Es gibt viele Bibliotheken mit unterschiedlichen Ansätzen für das State Management, [Redux](https://redux.js.org) ist eine beliebte Option. Schau dir die Konzepte und Muster an, da sie oft eine gute Möglichkeit bieten, potenzielle Probleme in großen Web-Apps zu verstehen und wie sie gelöst werden können.
### Aufgabe
Wir beginnen mit ein wenig Refactoring. Ersetze die `account`-Deklaration:
```js
let account = null;
```
Mit:
```js
let state = {
account: null
};
```
Die Idee ist, *alle Daten unserer App* in einem einzigen State-Objekt zu zentralisieren. Derzeit haben wir nur `account` im State, daher ändert sich nicht viel, aber es schafft eine Grundlage für zukünftige Erweiterungen.
Wir müssen auch die Funktionen aktualisieren, die es verwenden. Ersetze in den Funktionen `register()` und `login()` `account = ...` durch `state.account = ...`;
Füge am Anfang der Funktion `updateDashboard()` diese Zeile hinzu:
```js
const account = state.account;
```
Dieses Refactoring bringt für sich genommen nicht viele Verbesserungen, aber die Idee war, die Grundlage für die nächsten Änderungen zu schaffen.
## Datenänderungen verfolgen
Jetzt, da wir das `state`-Objekt eingerichtet haben, um unsere Daten zu speichern, ist der nächste Schritt, die Aktualisierungen zu zentralisieren. Das Ziel ist es, es einfacher zu machen, Änderungen und deren Zeitpunkt nachzuverfolgen.
Um zu vermeiden, dass Änderungen am `state`-Objekt vorgenommen werden, ist es auch eine gute Praxis, es als [*unveränderlich*](https://de.wikipedia.org/wiki/Unveränderliches_Objekt) zu betrachten, was bedeutet, dass es überhaupt nicht geändert werden kann. Das bedeutet auch, dass du ein neues State-Objekt erstellen musst, wenn du etwas daran ändern möchtest. Dadurch schützt du dich vor potenziell unerwünschten [Seiteneffekten](https://de.wikipedia.org/wiki/Seiteneffekt_(Informatik)) und eröffnest Möglichkeiten für neue Funktionen in deiner App, wie z. B. die Implementierung von Undo/Redo, während es auch einfacher wird, Fehler zu debuggen. Zum Beispiel könntest du jede Änderung am State protokollieren und eine Historie der Änderungen führen, um die Quelle eines Fehlers zu verstehen.
In JavaScript kannst du [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) verwenden, um eine unveränderliche Version eines Objekts zu erstellen. Wenn du versuchst, Änderungen an einem unveränderlichen Objekt vorzunehmen, wird eine Ausnahme ausgelöst.
✅ Kennst du den Unterschied zwischen einem *flachen* und einem *tiefen* unveränderlichen Objekt? Du kannst darüber [hier](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) lesen.
### Aufgabe
Lass uns eine neue Funktion `updateState()` erstellen:
```js
function updateState(property, newData) {
state = Object.freeze({
...state,
[property]: newData
});
}
```
In dieser Funktion erstellen wir ein neues State-Objekt und kopieren Daten aus dem vorherigen State mithilfe des [*Spread-Operators (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Dann überschreiben wir eine bestimmte Eigenschaft des State-Objekts mit den neuen Daten, indem wir die [Bracket-Notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` für die Zuweisung verwenden. Schließlich sperren wir das Objekt, um Änderungen mit `Object.freeze()` zu verhindern. Derzeit speichern wir nur die `account`-Eigenschaft im State, aber mit diesem Ansatz kannst du so viele Eigenschaften hinzufügen, wie du benötigst.
Wir aktualisieren auch die `state`-Initialisierung, um sicherzustellen, dass der Anfangszustand ebenfalls eingefroren ist:
```js
let state = Object.freeze({
account: null
});
```
Danach aktualisieren wir die `register`-Funktion, indem wir die Zuweisung `state.account = result;` durch Folgendes ersetzen:
```js
updateState('account', result);
```
Das Gleiche machen wir mit der `login`-Funktion, indem wir `state.account = data;` durch Folgendes ersetzen:
```js
updateState('account', data);
```
Wir nutzen die Gelegenheit, um das Problem zu beheben, dass die Kontodaten nicht gelöscht werden, wenn der Benutzer auf *Logout* klickt.
Erstelle eine neue Funktion `logout()`:
```js
function logout() {
updateState('account', null);
navigate('/login');
}
```
Ersetze in `updateDashboard()` die Umleitung `return navigate('/login');` durch `return logout();`;
Versuche, ein neues Konto zu registrieren, dich abzumelden und erneut anzumelden, um zu überprüfen, ob alles noch korrekt funktioniert.
> Tipp: Du kannst dir alle State-Änderungen ansehen, indem du `console.log(state)` am Ende von `updateState()` hinzufügst und die Konsole in den Entwicklertools deines Browsers öffnest.
## Den State speichern
Die meisten Web-Apps müssen Daten speichern, um korrekt zu funktionieren. Alle kritischen Daten werden normalerweise in einer Datenbank gespeichert und über eine Server-API abgerufen, wie z. B. die Benutzerdaten in unserem Fall. Aber manchmal ist es auch interessant, einige Daten in der Client-App zu speichern, die in deinem Browser läuft, um die Benutzererfahrung zu verbessern oder die Ladeleistung zu steigern.
Wenn du Daten in deinem Browser speichern möchtest, gibt es einige wichtige Fragen, die du dir stellen solltest:
- *Sind die Daten sensibel?* Du solltest vermeiden, sensible Daten wie Benutzerpasswörter auf dem Client zu speichern.
- *Wie lange möchtest du diese Daten aufbewahren?* Planst du, auf diese Daten nur während der aktuellen Sitzung zuzugreifen, oder sollen sie dauerhaft gespeichert werden?
Es gibt verschiedene Möglichkeiten, Informationen in einer Web-App zu speichern, je nachdem, was du erreichen möchtest. Zum Beispiel kannst du die URLs verwenden, um eine Suchanfrage zu speichern und sie zwischen Benutzern teilbar zu machen. Du kannst auch [HTTP-Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies) verwenden, wenn die Daten mit dem Server geteilt werden müssen, wie z. B. [Authentifizierungsinformationen](https://de.wikipedia.org/wiki/Authentifizierung).
Eine andere Option ist die Verwendung einer der vielen Browser-APIs zur Datenspeicherung. Zwei davon sind besonders interessant:
- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): ein [Key/Value-Store](https://de.wikipedia.org/wiki/Key-Value-Datenbank), der es ermöglicht, datenbankspezifische Daten über verschiedene Sitzungen hinweg zu speichern. Die gespeicherten Daten verfallen nie.
- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): funktioniert genauso wie `localStorage`, außer dass die darin gespeicherten Daten gelöscht werden, wenn die Sitzung endet (wenn der Browser geschlossen wird).
Beachte, dass beide APIs nur [Strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) speichern können. Wenn du komplexe Objekte speichern möchtest, musst du sie in das [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)-Format serialisieren, indem du [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) verwendest.
✅ Wenn du eine Web-App erstellen möchtest, die ohne Server funktioniert, ist es auch möglich, eine Datenbank auf dem Client mit der [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) zu erstellen. Diese ist für fortgeschrittene Anwendungsfälle oder wenn du eine erhebliche Menge an Daten speichern musst, da sie komplexer zu verwenden ist.
### Aufgabe
Wir möchten, dass unsere Benutzer angemeldet bleiben, bis sie explizit auf die Schaltfläche *Logout* klicken. Daher verwenden wir `localStorage`, um die Kontodaten zu speichern. Zuerst definieren wir einen Schlüssel, den wir zum Speichern unserer Daten verwenden.
```js
const storageKey = 'savedAccount';
```
Füge dann diese Zeile am Ende der Funktion `updateState()` hinzu:
```js
localStorage.setItem(storageKey, JSON.stringify(state.account));
```
Damit werden die Benutzerdaten gespeichert und bleiben immer auf dem neuesten Stand, da wir zuvor alle State-Updates zentralisiert haben. Hier beginnen wir, von all unseren vorherigen Refactorings zu profitieren 🙂.
Da die Daten gespeichert werden, müssen wir uns auch darum kümmern, sie wiederherzustellen, wenn die App geladen wird. Da wir mehr Initialisierungscode haben werden, könnte es eine gute Idee sein, eine neue Funktion `init` zu erstellen, die auch unseren bisherigen Code am Ende von `app.js` enthält:
```js
function init() {
const savedAccount = localStorage.getItem(storageKey);
if (savedAccount) {
updateState('account', JSON.parse(savedAccount));
}
// Our previous initialization code
window.onpopstate = () => updateRoute();
updateRoute();
}
init();
```
Hier rufen wir die gespeicherten Daten ab, und wenn welche vorhanden sind, aktualisieren wir den State entsprechend. Es ist wichtig, dies *vor* der Aktualisierung der Route zu tun, da es möglicherweise Code gibt, der während der Seitenaktualisierung auf den State angewiesen ist.
Wir können auch die *Dashboard*-Seite zur Standardseite unserer Anwendung machen, da wir jetzt die Kontodaten speichern. Wenn keine Daten gefunden werden, kümmert sich das Dashboard ohnehin um die Weiterleitung zur *Login*-Seite. Ersetze in `updateRoute()` den Fallback `return navigate('/login');` durch `return navigate('/dashboard');`.
Melde dich jetzt in der App an und versuche, die Seite zu aktualisieren. Du solltest auf dem Dashboard bleiben. Mit diesem Update haben wir alle unsere anfänglichen Probleme gelöst...
## Daten aktualisieren
...Aber wir könnten auch ein neues Problem geschaffen haben. Ups!
Gehe mit dem `test`-Konto zum Dashboard und führe dann diesen Befehl in einem Terminal aus, um eine neue Transaktion zu erstellen:
```sh
curl --request POST \
--header "Content-Type: application/json" \
--data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
http://localhost:5000/api/accounts/test/transactions
```
Versuche jetzt, die Dashboard-Seite im Browser zu aktualisieren. Was passiert? Siehst du die neue Transaktion?
Der State wird dank `localStorage` unbegrenzt gespeichert, aber das bedeutet auch, dass er nie aktualisiert wird, bis du dich aus der App abmeldest und wieder anmeldest!
Eine mögliche Strategie, um das zu beheben, ist, die Kontodaten jedes Mal neu zu laden, wenn das Dashboard geladen wird, um veraltete Daten zu vermeiden.
### Aufgabe
Erstelle eine neue Funktion `updateAccountData`:
```js
async function updateAccountData() {
const account = state.account;
if (!account) {
return logout();
}
const data = await getAccount(account.user);
if (data.error) {
return logout();
}
updateState('account', data);
}
```
Diese Methode überprüft, ob wir derzeit angemeldet sind, und lädt dann die Kontodaten vom Server neu.
Erstelle eine weitere Funktion namens `refresh`:
```js
async function refresh() {
await updateAccountData();
updateDashboard();
}
```
Diese Funktion aktualisiert die Kontodaten und kümmert sich dann um die Aktualisierung des HTMLs der Dashboard-Seite. Sie ist das, was wir aufrufen müssen, wenn die Dashboard-Route geladen wird. Aktualisiere die Routen-Definition mit:
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard', init: refresh }
};
```
Versuche jetzt, das Dashboard zu aktualisieren. Es sollte die aktualisierten Kontodaten anzeigen.
---
## 🚀 Herausforderung
Da wir die Kontodaten jedes Mal neu laden, wenn das Dashboard geladen wird, denkst du, dass wir *alle Kontodaten* weiterhin speichern müssen?
Versuche gemeinsam zu erarbeiten, was in `localStorage` gespeichert und geladen werden sollte, um nur das zu enthalten, was absolut notwendig ist, damit die App funktioniert.
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
## Aufgabe
[Implementieren Sie den Dialog "Transaktion hinzufügen"](assignment.md)
Hier ist ein Beispielergebnis nach Abschluss der Aufgabe:
![Screenshot, der ein Beispiel für den Dialog "Transaktion hinzufügen" zeigt](../../../../7-bank-project/4-state-management/images/dialog.png)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

37
translations/de/7-bank-project/4-state-management/assignment.md Normal file
View File

@@ -0,0 +1,37 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f23a868536c07da991b1d4e773161e25",
"translation_date": "2025-08-24T13:47:39+00:00",
"source_file": "7-bank-project/4-state-management/assignment.md",
"language_code": "de"
}
-->
# Implementieren Sie den Dialog "Transaktion hinzufügen"
## Anweisungen
Unsere Banking-App fehlt noch eine wichtige Funktion: die Möglichkeit, neue Transaktionen einzugeben.
Nutzen Sie alles, was Sie in den vier vorherigen Lektionen gelernt haben, um einen Dialog "Transaktion hinzufügen" zu implementieren:
- Fügen Sie einen Button "Transaktion hinzufügen" auf der Dashboard-Seite hinzu.
- Erstellen Sie entweder eine neue Seite mit einer HTML-Vorlage oder verwenden Sie JavaScript, um das Dialog-HTML ein- und auszublenden, ohne die Dashboard-Seite zu verlassen (Sie können dafür die [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden)-Eigenschaft oder CSS-Klassen verwenden).
- Stellen Sie sicher, dass Sie [Tastatur- und Screenreader-Zugänglichkeit](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) für den Dialog berücksichtigen.
- Implementieren Sie ein HTML-Formular, um Eingabedaten zu erfassen.
- Erstellen Sie JSON-Daten aus den Formulardaten und senden Sie diese an die API.
- Aktualisieren Sie die Dashboard-Seite mit den neuen Daten.
Schauen Sie sich die [Server-API-Spezifikationen](../api/README.md) an, um zu sehen, welche API Sie aufrufen müssen und welches JSON-Format erwartet wird.
Hier ist ein Beispielergebnis nach Abschluss der Aufgabe:
![Screenshot eines Beispieldialogs "Transaktion hinzufügen"](../../../../7-bank-project/4-state-management/images/dialog.png)
## Bewertungskriterien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| | Das Hinzufügen einer Transaktion ist vollständig implementiert und folgt allen Best Practices aus den Lektionen. | Das Hinzufügen einer Transaktion ist implementiert, folgt jedoch nicht den Best Practices aus den Lektionen oder funktioniert nur teilweise. | Das Hinzufügen einer Transaktion funktioniert überhaupt nicht. |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

33
translations/de/7-bank-project/README.md Normal file
View File

@@ -0,0 +1,33 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "830359535306594b448db6575ce5cdee",
"translation_date": "2025-08-24T13:26:08+00:00",
"source_file": "7-bank-project/README.md",
"language_code": "de"
}
-->
# :dollar: Baue eine Bank
In diesem Projekt lernst du, wie man eine fiktive Bank erstellt. Diese Lektionen enthalten Anleitungen, wie man eine Web-App gestaltet und Routen bereitstellt, Formulare erstellt, den Zustand verwaltet und Daten von einer API abruft, um die Bankdaten zu erhalten.
| ![Screen1](../../../7-bank-project/images/screen1.png) | ![Screen2](../../../7-bank-project/images/screen2.png) |
|--------------------------------|--------------------------------|
## Lektionen
1. [HTML-Templates und Routen in einer Web-App](1-template-route/README.md)
2. [Erstellen eines Login- und Registrierungsformulars](2-forms/README.md)
3. [Methoden zum Abrufen und Verwenden von Daten](3-data/README.md)
4. [Konzepte des Zustandsmanagements](4-state-management/README.md)
### Credits
Diese Lektionen wurden mit :hearts: von [Yohan Lasorsa](https://twitter.com/sinedied) geschrieben.
Wenn du lernen möchtest, wie man die [Server-API](/7-bank-project/api/README.md) erstellt, die in diesen Lektionen verwendet wird, kannst du [diese Videoserie](https://aka.ms/NodeBeginner) verfolgen (insbesondere die Videos 17 bis 21).
Du kannst dir auch [dieses interaktive Learn-Tutorial](https://aka.ms/learn/express-api) ansehen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

46
translations/de/7-bank-project/api/README.md Normal file
View File

@@ -0,0 +1,46 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9884f8c8a61cf56214450f8b16a094ce",
"translation_date": "2025-08-24T13:27:01+00:00",
"source_file": "7-bank-project/api/README.md",
"language_code": "de"
}
-->
# Bank-API
> Bank-API erstellt mit [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
Die API ist bereits für Sie erstellt und nicht Teil der Übung.
Falls Sie jedoch daran interessiert sind, zu lernen, wie man eine solche API erstellt, können Sie diese Videoserie verfolgen: https://aka.ms/NodeBeginner (Videos 17 bis 21 behandeln genau diese API).
Sie können sich auch dieses interaktive Tutorial ansehen: https://aka.ms/learn/express-api
## Server starten
Stellen Sie sicher, dass [Node.js](https://nodejs.org) installiert ist.
1. Klonen Sie dieses Repository: [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
2. Öffnen Sie Ihr Terminal und navigieren Sie in den Ordner `Web-Dev-For-Beginners/7-bank-project/api`.
3. Führen Sie `npm install` aus und warten Sie, bis die Pakete installiert sind (dies kann je nach Qualität Ihrer Internetverbindung eine Weile dauern).
4. Wenn die Installation abgeschlossen ist, führen Sie `npm start` aus, und Sie sind startklar.
Der Server sollte auf Port `5000` lauschen.
*Dieser Server wird zusammen mit dem Hauptserver der Bank-App (lauscht auf Port `3000`) ausgeführt. Schließen Sie ihn nicht.*
> Hinweis: Alle Einträge werden im Arbeitsspeicher gespeichert und nicht dauerhaft gesichert. Wenn der Server gestoppt wird, gehen alle Daten verloren.
## API-Details
Route | Beschreibung
---------------------------------------------|------------------------------------
GET /api/ | Serverinformationen abrufen
POST /api/accounts/ | Ein Konto erstellen, z. B.: `{ user: 'Yohan', description: 'Mein Budget', currency: 'EUR', balance: 100 }`
GET /api/accounts/:user | Alle Daten für das angegebene Konto abrufen
DELETE /api/accounts/:user | Angegebenes Konto entfernen
POST /api/accounts/:user/transactions | Eine Transaktion hinzufügen, z. B.: `{ date: '2020-07-23T18:25:43.511Z', object: 'Ein Buch gekauft', amount: -20 }`
DELETE /api/accounts/:user/transactions/:id | Angegebene Transaktion entfernen
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

25
translations/de/7-bank-project/solution/README.md Normal file
View File

@@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
"translation_date": "2025-08-24T13:42:32+00:00",
"source_file": "7-bank-project/solution/README.md",
"language_code": "de"
}
-->
# Bank-App
> Beispiel-Lösung für das Bank-App-Projekt, erstellt mit reinem HTML5, CSS und JavaScript (ohne Frameworks oder Bibliotheken).
## App ausführen
Stellen Sie zunächst sicher, dass der [API-Server](../api/README.md) läuft.
Jeder Webserver kann verwendet werden, um die App auszuführen, aber da Sie ohnehin [Node.js](https://nodejs.org) installiert haben sollten, um die API auszuführen, können Sie:
1. Dieses Repository mit Git klonen.
2. Öffnen Sie ein Terminal, navigieren Sie zu diesem Verzeichnis und führen Sie dann `npx lite-server .` aus. Dadurch wird ein Entwicklungs-Webserver auf Port `3000` gestartet.
3. Öffnen Sie `http://localhost:3000` in einem Browser, um die App auszuführen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

156
translations/de/8-code-editor/1-using-a-code-editor/README.md Normal file
View File

@@ -0,0 +1,156 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7aa6e4f270d38d9cb17f2b5bd86b863d",
"translation_date": "2025-08-24T13:02:42+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/README.md",
"language_code": "de"
}
-->
# Verwendung eines Code-Editors
Diese Lektion behandelt die Grundlagen der Nutzung von [VSCode.dev](https://vscode.dev), einem webbasierten Code-Editor, damit du Änderungen an deinem Code vornehmen und zu einem Projekt beitragen kannst, ohne etwas auf deinem Computer installieren zu müssen.
## Lernziele
In dieser Lektion lernst du:
- Einen Code-Editor in einem Projekt zu verwenden
- Änderungen mit Versionskontrolle nachzuverfolgen
- Den Editor für die Entwicklung anzupassen
### Voraussetzungen
Bevor du beginnst, musst du ein Konto bei [GitHub](https://github.com) erstellen. Gehe zu [GitHub](https://github.com/) und erstelle ein Konto, falls du noch keines hast.
### Einführung
Ein Code-Editor ist ein unverzichtbares Werkzeug, um Programme zu schreiben und an bestehenden Coding-Projekten zusammenzuarbeiten. Sobald du die Grundlagen eines Editors und dessen Funktionen verstehst, kannst du diese beim Schreiben von Code anwenden.
## Erste Schritte mit VSCode.dev
[VSCode.dev](https://vscode.dev) ist ein Code-Editor im Web. Du musst nichts installieren, um ihn zu nutzen – es funktioniert wie das Öffnen einer beliebigen anderen Website. Um mit dem Editor zu starten, öffne den folgenden Link: [https://vscode.dev](https://vscode.dev). Falls du nicht bei [GitHub](https://github.com/) angemeldet bist, folge den Anweisungen, um dich anzumelden oder ein neues Konto zu erstellen und dich dann einzuloggen.
Sobald der Editor geladen ist, sollte er ähnlich wie dieses Bild aussehen:
![Standardansicht VSCode.dev](../../../../8-code-editor/images/default-vscode-dev.png)
Es gibt drei Hauptbereiche, von links nach rechts:
1. Die _Aktivitätsleiste_, die einige Symbole wie die Lupe 🔎, das Zahnrad ⚙️ und andere enthält.
2. Die erweiterte Aktivitätsleiste, die standardmäßig den _Explorer_ anzeigt und als _Seitenleiste_ bezeichnet wird.
3. Und schließlich der Codebereich auf der rechten Seite.
Klicke auf jedes der Symbole, um ein anderes Menü anzuzeigen. Kehre anschließend zum _Explorer_ zurück, um wieder an den Ausgangspunkt zu gelangen.
Wenn du beginnst, Code zu erstellen oder bestehenden Code zu ändern, geschieht dies im größten Bereich auf der rechten Seite. Du wirst diesen Bereich auch nutzen, um bestehenden Code anzuzeigen, was du als Nächstes tun wirst.
## Ein GitHub-Repository öffnen
Das Erste, was du benötigst, ist das Öffnen eines GitHub-Repositories. Es gibt mehrere Möglichkeiten, ein Repository zu öffnen. In diesem Abschnitt siehst du zwei verschiedene Methoden, um ein Repository zu öffnen und mit Änderungen zu beginnen.
### 1. Mit dem Editor
Verwende den Editor selbst, um ein Remote-Repository zu öffnen. Wenn du [VSCode.dev](https://vscode.dev) besuchst, siehst du eine Schaltfläche _"Open Remote Repository"_:
![Remote-Repository öffnen](../../../../8-code-editor/images/open-remote-repository.png)
Du kannst auch die Befehls-Palette verwenden. Die Befehls-Palette ist ein Eingabefeld, in das du ein beliebiges Wort eingeben kannst, das Teil eines Befehls oder einer Aktion ist, um den richtigen Befehl auszuführen. Öffne das Menü oben links, wähle _Ansicht_ und dann _Befehls-Palette_, oder nutze die folgende Tastenkombination: Strg-Shift-P (auf MacOS wäre es Command-Shift-P).
![Palette-Menü](../../../../8-code-editor/images/palette-menu.png)
Sobald das Menü geöffnet ist, gib _open remote repository_ ein und wähle die erste Option. Mehrere Repositories, an denen du beteiligt bist oder die du kürzlich geöffnet hast, werden angezeigt. Du kannst auch eine vollständige GitHub-URL eingeben, um eines auszuwählen. Verwende die folgende URL und füge sie in das Feld ein:
```
https://github.com/microsoft/Web-Dev-For-Beginners
```
✅ Wenn erfolgreich, werden alle Dateien dieses Repositories im Texteditor geladen.
### 2. Über die URL
Du kannst auch direkt eine URL verwenden, um ein Repository zu laden. Zum Beispiel lautet die vollständige URL für das aktuelle Repository [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), aber du kannst die GitHub-Domain durch `VSCode.dev/github` ersetzen und das Repository direkt laden. Die resultierende URL wäre [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
## Dateien bearbeiten
Sobald du das Repository im Browser/vscode.dev geöffnet hast, besteht der nächste Schritt darin, Updates oder Änderungen am Projekt vorzunehmen.
### 1. Eine neue Datei erstellen
Du kannst entweder eine Datei in einem bestehenden Ordner erstellen oder sie im Stammverzeichnis/Ordner anlegen. Um eine neue Datei zu erstellen, öffne den Ort/Ordner, in dem die Datei gespeichert werden soll, und wähle das Symbol _'Neue Datei ...'_ in der Aktivitätsleiste _(links)_, gib ihr einen Namen und drücke Enter.
![Neue Datei erstellen](../../../../8-code-editor/images/create-new-file.png)
### 2. Eine Datei im Repository bearbeiten und speichern
Die Nutzung von vscode.dev ist hilfreich, wenn du schnelle Updates an deinem Projekt vornehmen möchtest, ohne Software lokal laden zu müssen.
Um deinen Code zu aktualisieren, klicke auf das Symbol 'Explorer', das sich ebenfalls in der Aktivitätsleiste befindet, um Dateien und Ordner im Repository anzuzeigen.
Wähle eine Datei aus, um sie im Codebereich zu öffnen, nimm deine Änderungen vor und speichere sie.
![Datei bearbeiten](../../../../8-code-editor/images/edit-a-file.png)
Sobald du mit der Aktualisierung deines Projekts fertig bist, wähle das Symbol _`Quellkontrolle`_, das alle neuen Änderungen enthält, die du an deinem Repository vorgenommen hast.
Um die Änderungen an deinem Projekt anzuzeigen, wähle die Datei(en) im Ordner `Changes` in der erweiterten Aktivitätsleiste aus. Dadurch wird ein 'Working Tree' geöffnet, in dem du die Änderungen an der Datei visuell sehen kannst. Rot zeigt eine Entfernung aus dem Projekt, während Grün eine Hinzufügung bedeutet.
![Änderungen anzeigen](../../../../8-code-editor/images/working-tree.png)
Wenn du mit den vorgenommenen Änderungen zufrieden bist, bewege den Mauszeiger über den Ordner `Changes` und klicke auf die Schaltfläche `+`, um die Änderungen zu stagen. Staging bedeutet, dass du deine Änderungen vorbereitest, um sie bei GitHub zu committen.
Falls du jedoch mit einigen Änderungen nicht zufrieden bist und sie verwerfen möchtest, bewege den Mauszeiger über den Ordner `Changes` und wähle das Symbol `Rückgängig`.
Gib dann eine `Commit-Nachricht` ein _(eine Beschreibung der Änderungen, die du am Projekt vorgenommen hast)_, klicke auf das `Häkchen-Symbol`, um die Änderungen zu committen und zu pushen.
Sobald du mit deinem Projekt fertig bist, wähle das `Hamburger-Menü-Symbol` oben links, um zum Repository auf github.com zurückzukehren.
![Änderungen stagen & committen](../../../../8-code-editor/images/edit-vscode.dev.gif)
## Erweiterungen verwenden
Das Installieren von Erweiterungen in VSCode ermöglicht es dir, neue Funktionen hinzuzufügen und die Entwicklungsumgebung in deinem Editor anzupassen, um deinen Workflow zu verbessern. Diese Erweiterungen helfen dir auch, Unterstützung für mehrere Programmiersprachen hinzuzufügen, und sind oft entweder generische oder sprachbasierte Erweiterungen.
Um die Liste aller verfügbaren Erweiterungen zu durchsuchen, klicke auf das Symbol _`Erweiterungen`_ in der Aktivitätsleiste und beginne, den Namen der Erweiterung in das Textfeld mit der Bezeichnung _'Erweiterungen im Marketplace suchen'_ einzugeben.
Du siehst eine Liste von Erweiterungen, die jeweils **den Namen der Erweiterung, den Namen des Herausgebers, eine kurze Beschreibung, die Anzahl der Downloads** und **eine Sternebewertung** enthalten.
![Erweiterungsdetails](../../../../8-code-editor/images/extension-details.png)
Du kannst auch alle zuvor installierten Erweiterungen anzeigen, indem du den Ordner _`Installiert`_ erweiterst, beliebte Erweiterungen im Ordner _`Beliebt`_ und empfohlene Erweiterungen für dich entweder von Nutzern im selben Arbeitsbereich oder basierend auf deinen zuletzt geöffneten Dateien im Ordner _`Empfohlen`_.
![Erweiterungen anzeigen](../../../../8-code-editor/images/extensions.png)
### 1. Erweiterungen installieren
Um eine Erweiterung zu installieren, gib den Namen der Erweiterung in das Suchfeld ein und klicke darauf, um zusätzliche Informationen über die Erweiterung im Codebereich anzuzeigen, sobald sie in der erweiterten Aktivitätsleiste erscheint.
Du kannst entweder auf die _blaue Installieren-Schaltfläche_ in der erweiterten Aktivitätsleiste klicken, um die Erweiterung zu installieren, oder die Installieren-Schaltfläche verwenden, die im Codebereich erscheint, sobald du die Erweiterung auswählst, um zusätzliche Informationen zu laden.
![Erweiterungen installieren](../../../../8-code-editor/images/install-extension.gif)
### 2. Erweiterungen anpassen
Nach der Installation der Erweiterung musst du möglicherweise deren Verhalten ändern und sie basierend auf deinen Vorlieben anpassen. Um dies zu tun, wähle das Symbol Erweiterungen, und diesmal erscheint deine Erweiterung im Ordner _Installiert_. Klicke auf das _**Zahnrad-Symbol**_ und navigiere zu _Erweiterungseinstellungen_.
![Erweiterungseinstellungen anpassen](../../../../8-code-editor/images/extension-settings.png)
### 3. Erweiterungen verwalten
Nach der Installation und Nutzung deiner Erweiterung bietet vscode.dev Optionen, um deine Erweiterung basierend auf verschiedenen Anforderungen zu verwalten. Zum Beispiel kannst du:
- **Deaktivieren:** _(Du kannst eine Erweiterung vorübergehend deaktivieren, wenn du sie nicht mehr benötigst, sie aber nicht vollständig deinstallieren möchtest.)_
Wähle die installierte Erweiterung in der erweiterten Aktivitätsleiste aus > klicke auf das Zahnrad-Symbol > wähle 'Deaktivieren' oder 'Deaktivieren (Arbeitsbereich)' **ODER** öffne die Erweiterung im Codebereich und klicke auf die blaue Deaktivieren-Schaltfläche.
- **Deinstallieren:** Wähle die installierte Erweiterung in der erweiterten Aktivitätsleiste aus > klicke auf das Zahnrad-Symbol > wähle 'Deinstallieren' **ODER** öffne die Erweiterung im Codebereich und klicke auf die blaue Deinstallieren-Schaltfläche.
---
## Aufgabe
[Erstelle eine Lebenslauf-Website mit vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
## Überprüfung & Selbststudium
Lies mehr über [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) und einige seiner weiteren Funktionen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

261
translations/de/8-code-editor/1-using-a-code-editor/assignment.md Normal file
View File

@@ -0,0 +1,261 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "2fcb983b8dbadadb1bc2e97f8c12dac5",
"translation_date": "2025-08-24T13:05:46+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
"language_code": "de"
}
-->
# Erstelle eine Lebenslauf-Website mit vscode.dev
_Wie cool wäre es, wenn ein Recruiter nach deinem Lebenslauf fragt und du ihm einfach eine URL schickst?_ 😎
<!----
TODO: ein optionales Bild hinzufügen
![Mit einem Code-Editor arbeiten](../../../../sketchnotes/webdev101-vscode-dev.png)
> Sketchnote von [Author name](https://example.com)
---->
<!---
## Quiz vor der Vorlesung
[Quiz vor der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
---->
## Lernziele
Nach dieser Aufgabe wirst du lernen, wie man:
- Eine Website erstellt, um deinen Lebenslauf zu präsentieren
### Voraussetzungen
1. Ein GitHub-Konto. Gehe zu [GitHub](https://github.com/) und erstelle ein Konto, falls du noch keines hast.
## Schritte
**Schritt 1:** Erstelle ein neues GitHub-Repository und gib ihm den Namen `my-resume`.
**Schritt 2:** Erstelle eine `index.html`-Datei in deinem Repository. Wir fügen mindestens eine Datei direkt auf github.com hinzu, da du ein leeres Repository nicht in vscode.dev öffnen kannst.
Klicke auf den Link `creating a new file`, gib den Namen `index.html` ein und wähle die Schaltfläche `Commit new file`.
![Eine neue Datei auf github.com erstellen](../../../../8-code-editor/images/new-file-github.com.png)
**Schritt 3:** Öffne [VSCode.dev](https://vscode.dev) und wähle die Schaltfläche `Open Remote Repository`.
Kopiere die URL des Repositorys, das du gerade für deine Lebenslauf-Website erstellt hast, und füge sie in das Eingabefeld ein:
_Ersetze `your-username` durch deinen GitHub-Benutzernamen._
```
https://github.com/your-username/my-resume
```
✅ Wenn erfolgreich, siehst du dein Projekt und die Datei `index.html` im Texteditor im Browser geöffnet.
![Eine neue Datei erstellen](../../../../8-code-editor/images/project-on-vscode.dev.png)
**Schritt 4:** Öffne die Datei `index.html`, füge den untenstehenden Code in den Codebereich ein und speichere ihn.
<details>
<summary><b>HTML-Code, der für den Inhalt deiner Lebenslauf-Website verantwortlich ist.</b></summary>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Dein Name hier!</title>
</head>
<body>
<header id="header">
<!-- Lebenslauf-Header mit deinem Namen und Titel -->
<h1>Dein Name hier!</h1>
<hr>
Deine Rolle!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>KONTAKT</h2>
<!-- Kontaktinformationen inklusive Social Media -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Schreibe hier deine E-Mail</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Schreibe hier deinen Benutzernamen!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Schreibe hier deinen Benutzernamen!</a>
</p>
</section>
<section>
<h2>FÄHIGKEITEN</h2>
<!-- Deine Fähigkeiten -->
<ul>
<li>Fähigkeit 1!</li>
<li>Fähigkeit 2!</li>
<li>Fähigkeit 3!</li>
<li>Fähigkeit 4!</li>
</ul>
</section>
<section>
<h2>AUSBILDUNG</h2>
<!-- Deine Ausbildung -->
<h3>Schreibe hier deinen Studiengang!</h3>
<p>
Schreibe hier deine Institution!
</p>
<p>
Start- und Enddatum
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>ÜBER MICH</h2>
<!-- Über dich -->
<p>Schreibe hier etwas über dich!</p>
</section>
<section>
<h2>BERUFSERFAHRUNG</h2>
<!-- Deine Berufserfahrung -->
<h3>Berufsbezeichnung</h3>
<p>
Name der Organisation hier | Startmonat – Endmonat
</p>
<ul>
<li>Aufgabe 1 - Schreibe, was du gemacht hast!</li>
<li>Aufgabe 2 - Schreibe, was du gemacht hast!</li>
<li>Schreibe die Ergebnisse/den Einfluss deiner Beiträge</li>
</ul>
<h3>Berufsbezeichnung 2</h3>
<p>
Name der Organisation hier | Startmonat – Endmonat
</p>
<ul>
<li>Aufgabe 1 - Schreibe, was du gemacht hast!</li>
<li>Aufgabe 2 - Schreibe, was du gemacht hast!</li>
<li>Schreibe die Ergebnisse/den Einfluss deiner Beiträge</li>
</ul>
</section>
</article>
</main>
</body>
</html>
</details>
Füge deine Lebenslaufdetails ein, um den _Platzhaltertext_ im HTML-Code zu ersetzen.
**Schritt 5:** Bewege den Mauszeiger über den Ordner `My-Resume`, klicke auf das Symbol `New File ...` und erstelle 2 neue Dateien in deinem Projekt: `style.css` und `codeswing.json`.
**Schritt 6:** Öffne die Datei `style.css`, füge den untenstehenden Code ein und speichere ihn.
<details>
<summary><b>CSS-Code zur Formatierung des Layouts der Website.</b></summary>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
</details>
**Schritt 6:** Öffne die Datei `codeswing.json`, füge den untenstehenden Code ein und speichere ihn.
{
"scripts": [],
"styles": []
}
**Schritt 7:** Installiere die Erweiterung `Codeswing`, um die Lebenslauf-Website im Codebereich zu visualisieren.
Klicke auf das Symbol _`Extensions`_ in der Aktivitätsleiste und gib Codeswing ein. Klicke entweder auf die _blaue Installationsschaltfläche_ in der erweiterten Aktivitätsleiste, um die Erweiterung zu installieren, oder nutze die Installationsschaltfläche, die im Codebereich erscheint, sobald du die Erweiterung auswählst, um zusätzliche Informationen zu laden. Direkt nach der Installation der Erweiterung kannst du die Änderungen an deinem Projekt im Codebereich beobachten 😃.
![Erweiterungen installieren](../../../../8-code-editor/images/install-extension.gif)
Das wirst du auf deinem Bildschirm sehen, nachdem du die Erweiterung installiert hast.
![Codeswing-Erweiterung in Aktion](../../../../8-code-editor/images/after-codeswing-extension-pb.png)
Wenn du mit den Änderungen zufrieden bist, bewege den Mauszeiger über den Ordner `Changes` und klicke auf die Schaltfläche `+`, um die Änderungen zu stagen.
Gib eine Commit-Nachricht ein _(Eine Beschreibung der Änderungen, die du am Projekt vorgenommen hast)_ und committe deine Änderungen, indem du auf das `Häkchen` klickst. Wenn du mit deinem Projekt fertig bist, wähle das Hamburger-Menü-Symbol oben links, um zum Repository auf GitHub zurückzukehren.
Herzlichen Glückwunsch 🎉 Du hast gerade in wenigen Schritten deine Lebenslauf-Website mit vscode.dev erstellt.
## 🚀 Herausforderung
Öffne ein Remote-Repository, für das du Berechtigungen hast, um Änderungen vorzunehmen, und aktualisiere einige Dateien. Versuche anschließend, einen neuen Branch mit deinen Änderungen zu erstellen und einen Pull Request zu stellen.
<!----
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
---->
## Wiederholung & Selbststudium
Lies mehr über [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) und einige seiner weiteren Funktionen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

21
translations/de/CODE_OF_CONDUCT.md Normal file
View File

@@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b0a9b4cccd918195f58224d5793da1a6",
"translation_date": "2025-08-24T11:55:34+00:00",
"source_file": "CODE_OF_CONDUCT.md",
"language_code": "de"
}
-->
# Microsoft Open Source Verhaltenskodex
Dieses Projekt hat den [Microsoft Open Source Verhaltenskodex](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) übernommen.
Ressourcen:
- [Microsoft Open Source Verhaltenskodex](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
- [Microsoft Verhaltenskodex FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
- Kontaktieren Sie [opencode@microsoft.com](mailto:opencode@microsoft.com) bei Fragen oder Bedenken
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

20
translations/de/CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,20 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "777400e9f0336c7ee2f9a1200a88478f",
"translation_date": "2025-08-24T11:57:57+00:00",
"source_file": "CONTRIBUTING.md",
"language_code": "de"
}
-->
# Mitwirken
Dieses Projekt freut sich über Beiträge und Vorschläge. Die meisten Beiträge erfordern, dass Sie einer Contributor License Agreement (CLA) zustimmen, in der Sie erklären, dass Sie das Recht haben und uns tatsächlich die Rechte einräumen, Ihren Beitrag zu nutzen. Weitere Details finden Sie unter [https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
Wenn Sie einen Pull Request einreichen, wird ein CLA-Bot automatisch überprüfen, ob Sie eine CLA bereitstellen müssen, und den PR entsprechend kennzeichnen (z. B. mit einem Label oder Kommentar). Folgen Sie einfach den Anweisungen des Bots. Dies müssen Sie nur einmal für alle Repositories tun, die unsere CLA verwenden. Bitte versuchen Sie auch, uns mitzuteilen, warum Sie diese Änderung vorgenommen haben, damit wir Ihre Anfrage besser verstehen können.
Dieses Projekt hat den [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) übernommen.
Weitere Informationen finden Sie in den [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) oder kontaktieren Sie [opencode@microsoft.com](mailto:opencode@microsoft.com) bei weiteren Fragen oder Anmerkungen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

204
translations/de/README.md Normal file
View File

@@ -0,0 +1,204 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-24T11:49:10+00:00",
"source_file": "README.md",
"language_code": "de"
}
-->
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Webentwicklung für Anfänger – Ein Lehrplan
Lerne die Grundlagen der Webentwicklung mit unserem umfassenden 12-Wochen-Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Nimm an Quizfragen, Diskussionen und praktischen Aufgaben teil. Verbessere deine Fähigkeiten und optimiere dein Wissen mit unserer effektiven projektbasierten Pädagogik. Starte noch heute deine Programmierreise!
#### 🧑‍🎓 _Bist du ein Student?_
Besuche die [**Student Hub Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Ressourcen für Anfänger, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Diese Seite solltest du dir merken und regelmäßig besuchen, da wir den Inhalt monatlich aktualisieren.
### 📣 Ankündigung – _Neuer Lehrplan_ zu Generativer KI für JavaScript wurde gerade veröffentlicht
Verpasse nicht unseren neuen Lehrplan zur Generativen KI!
Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!
<div>
<img src="./images/background.png" width="600px" />
</div>
- Lektionen, die alles von den Grundlagen bis zu RAG abdecken.
- Interagiere mit historischen Charakteren mithilfe von GenAI und unserer Begleit-App.
- Spannende und unterhaltsame Erzählung – du wirst durch die Zeit reisen!
<div>
<img src="./images/character.png" width="600px" />
</div>
Jede Lektion enthält eine Aufgabe, eine Wissensüberprüfung und eine Herausforderung, um Themen wie folgende zu lernen:
- Prompting und Prompt-Engineering
- Text- und Bild-App-Generierung
- Such-Apps
Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen!
## 🌱 Erste Schritte
> **Lehrer**, wir haben [einige Vorschläge](for-teachers.md) hinzugefügt, wie Sie diesen Lehrplan nutzen können. Wir freuen uns über Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, für jede Lektion beginnt mit einem Quiz vor der Vorlesung und arbeitet sich durch das Lesen des Vorlesungsmaterials, das Abschließen der verschiedenen Aktivitäten und überprüft euer Verständnis mit dem Quiz nach der Vorlesung.
Um das Lernerlebnis zu verbessern, vernetzt euch mit euren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) erwünscht, wo unser Team von Moderatoren eure Fragen beantworten wird.
Um eure Ausbildung weiterzuführen, empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.
### 📋 Einrichten deiner Umgebung
Dieser Lehrplan hat eine einsatzbereite Entwicklungsumgebung! Zu Beginn kannst du wählen, ob du den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte Umgebung, keine Installationen erforderlich_) oder lokal auf deinem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchtest.
#### Erstelle dein Repository
Um deine Arbeit einfach zu speichern, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Du kannst dies tun, indem du oben auf der Seite die Schaltfläche **Use this template** anklickst. Dadurch wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt.
Folge diesen Schritten:
1. **Fork das Repository**: Klicke auf die Schaltfläche "Fork" oben rechts auf dieser Seite.
2. **Klonen des Repositorys**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ausführen des Lehrplans in einem Codespace
In deiner Kopie dieses Repositorys, die du erstellt hast, klicke auf die Schaltfläche **Code** und wähle **Open with Codespaces**. Dadurch wird ein neuer Codespace erstellt, in dem du arbeiten kannst.
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
#### Ausführen des Lehrplans lokal auf deinem Computer
Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Befehlszeilentool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für jedes dieser Werkzeuge, damit du auswählen kannst, was am besten für dich funktioniert.
Unsere Empfehlung ist die Verwendung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) enthält. Du kannst Visual Studio Code [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klone dein Repository auf deinen Computer. Du kannst dies tun, indem du auf die Schaltfläche **Code** klickst und die URL kopierst:
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
Öffne dann [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führe den folgenden Befehl aus, wobei `<your-repository-url>` durch die gerade kopierte URL ersetzt wird:
```bash
git clone <your-repository-url>
```
2. Öffne den Ordner in Visual Studio Code. Du kannst dies tun, indem du auf **Datei** > **Ordner öffnen** klickst und den gerade geklonten Ordner auswählst.
> Empfohlene Visual Studio Code-Erweiterungen:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – um HTML-Seiten direkt in Visual Studio Code zu sehen
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – um schneller Code zu schreiben
## 📂 Jede Lektion enthält:
- optionale Sketchnote
- optionales ergänzendes Video
- Quiz zur Vorbereitung auf die Lektion
- schriftliche Lektion
- für projektbasierte Lektionen, Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts
- Wissensüberprüfungen
- eine Herausforderung
- ergänzende Lektüre
- Aufgabe
- Quiz nach der Lektion
> **Eine Anmerkung zu den Quizfragen**: Alle Quizfragen befinden sich im Ordner Quiz-app, insgesamt 48 Quizfragen mit jeweils drei Fragen. Sie sind in den Lektionen verlinkt. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folge den Anweisungen im `quiz-app`-Ordner. Sie werden nach und nach lokalisiert.
## 🗃️ Lektionen
| | Projektname | Vermittelte Konzepte | Lernziele | Verlinkte Lektion | Autor |
| :-: | :------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Erste Schritte | Einführung in Programmiersprachen und Werkzeuge | Lerne die grundlegenden Prinzipien der meisten Programmiersprachen und über Software, die professionelle Entwickler nutzen | [Einführung in Programmiersprachen und Werkzeuge](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Erste Schritte | Grundlagen von GitHub, einschließlich Teamarbeit | Wie man GitHub in einem Projekt verwendet und mit anderen an einem Code-Bestand zusammenarbeitet | [Einführung in GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Erste Schritte | Barrierefreiheit | Lerne die Grundlagen der Barrierefreiheit im Web | [Grundlagen der Barrierefreiheit](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS-Grundlagen | JavaScript-Datentypen | Die Grundlagen der JavaScript-Datentypen | [Datentypen](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS-Grundlagen | Funktionen und Methoden | Lerne, wie Funktionen und Methoden die Logik einer Anwendung steuern können | [Funktionen und Methoden](/2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher |
| 06 | JS-Grundlagen | Entscheidungen mit JS treffen | Lerne, wie man Bedingungen im Code mit Entscheidungsfindungsmethoden erstellt | [Entscheidungen treffen](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-Grundlagen | Arrays und Schleifen | Arbeite mit Daten mithilfe von Arrays und Schleifen in JavaScript | [Arrays und Schleifen](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in der Praxis | Erstelle das HTML, um ein Online-Terrarium zu bauen, mit Fokus auf Layoutgestaltung | [Einführung in HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in der Praxis | Erstelle das CSS, um das Online-Terrarium zu gestalten, mit Fokus auf die Grundlagen von CSS, einschließlich responsivem Design | [Einführung in CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstelle das JavaScript, um das Terrarium als Drag-and-Drop-Oberfläche funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Tipp-Spiel](/4-typing-game/solution/README.md) | Erstelle ein Tipp-Spiel | Lerne, wie man Tastaturereignisse nutzt, um die Logik einer JavaScript-App zu steuern | [Ereignisgesteuerte Programmierung](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Erfahren Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browsererweiterung erstellen können | [Über Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Formular erstellen, API aufrufen und Variablen im lokalen Speicher speichern | Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API mit Variablen aus dem lokalen Speicher aufzurufen | [APIs, Formulare und lokaler Speicher](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Nutzen Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; erfahren Sie mehr über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lernen Sie Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster kennen, um ein Spiel vorzubereiten | [Einführung in fortgeschrittene Spieleentwicklung](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Zeichnen auf Canvas | Lernen Sie die Canvas-API kennen, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen | [Zeichnen auf Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Elemente auf dem Bildschirm bewegen | Entdecken Sie, wie Elemente mithilfe kartesischer Koordinaten und der Canvas-API Bewegung erhalten können | [Elemente bewegen](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Kollisionserkennung | Lassen Sie Elemente kollidieren und aufeinander reagieren, indem Sie Tastenanschläge verwenden, und fügen Sie eine Abkühlfunktion hinzu, um die Spielleistung sicherzustellen | [Kollisionserkennung](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Punktestand führen | Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Leistung durch | [Punktestand führen](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Spiel beenden und neu starten | Lernen Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung von Ressourcen und dem Zurücksetzen von Variablenwerten | [Endbedingung](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-Vorlagen und Routen in einer Web-App | Lernen Sie, wie Sie das Grundgerüst der Architektur einer mehrseitigen Website mithilfe von Routing und HTML-Vorlagen erstellen | [HTML-Vorlagen und Routen](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Login- und Registrierungsformular erstellen | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt | [Formulare](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Methoden zum Abrufen und Verwenden von Daten | Erfahren Sie, wie Daten in Ihre App fließen, wie sie abgerufen, gespeichert und verworfen werden | [Daten](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konzepte des Zustandsmanagements | Lernen Sie, wie Ihre App den Zustand beibehält und wie Sie ihn programmatisch verwalten können | [Zustandsmanagement](/7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pädagogik
Unser Lehrplan basiert auf zwei zentralen pädagogischen Prinzipien:
* projektbasiertes Lernen
* regelmäßige Quizze
Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die von heutigen Webentwicklern verwendet werden. Die Studierenden haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Schreibspiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Space-Invader-ähnliches Spiel und eine Banking-App für Unternehmen entwickeln. Am Ende der Serie haben die Studierenden ein solides Verständnis für Webentwicklung erlangt.
> 🎓 Sie können die ersten Lektionen dieses Lehrplans als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn absolvieren!
Indem sichergestellt wird, dass die Inhalte projektbezogen sind, wird der Lernprozess für die Studierenden ansprechender gestaltet und das Behalten der Konzepte verbessert. Wir haben auch mehrere Einführungslektionen zu den JavaScript-Grundlagen geschrieben, die mit einem Video aus der Sammlung "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kombiniert sind, von denen einige Autoren zu diesem Lehrplan beigetragen haben.
Darüber hinaus setzt ein niedrigschwelliges Quiz vor dem Unterricht den Fokus der Studierenden auf das Lernen eines Themas, während ein zweites Quiz nach dem Unterricht das Behalten weiter fördert. Dieser Lehrplan wurde so gestaltet, dass er flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden im Laufe des 12-wöchigen Zyklus immer komplexer.
Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die ein Webentwickler vor der Verwendung eines Frameworks benötigt, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Erlernen von Node.js über eine weitere Videosammlung: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besuchen Sie unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über Ihr konstruktives Feedback!
## 🧭 Offline-Zugriff
Sie können diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) ausführen. Forken Sie dieses Repository, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner und geben Sie dann im Stammverzeichnis dieses Repos `docsify serve` ein. Die Website wird auf Port 3000 auf Ihrem localhost bereitgestellt: `localhost:3000`.
## 📘 PDF
Eine PDF-Version aller Lektionen finden Sie [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Weitere Kurse
Unser Team erstellt weitere Kurse! Schauen Sie sich an:
- [Generative KI für Anfänger](https://aka.ms/genai-beginners)
- [Generative KI für Anfänger .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative KI mit JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generative KI mit Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [KI für Anfänger](https://aka.ms/ai-beginners)
- [Datenwissenschaft für Anfänger](https://aka.ms/datascience-beginners)
- [Maschinelles Lernen für Anfänger](https://aka.ms/ml-beginners)
- [Cybersicherheit für Anfänger](https://github.com/microsoft/Security-101)
- [Webentwicklung für Anfänger](https://aka.ms/webdev-beginners)
- [IoT für Anfänger](https://aka.ms/iot-beginners)
- [XR-Entwicklung für Anfänger](https://github.com/microsoft/xr-development-for-beginners)
- [GitHub Copilot für Agentic Use meistern](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [GitHub Copilot für C#/.NET-Entwickler meistern](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Wählen Sie Ihr eigenes Copilot-Abenteuer](https://github.com/microsoft/CopilotAdventures)
## Lizenz
Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen finden Sie in der [LICENSE](../../LICENSE)-Datei.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

49
translations/de/SECURITY.md Normal file
View File

@@ -0,0 +1,49 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-24T11:56:51+00:00",
"source_file": "SECURITY.md",
"language_code": "de"
}
-->
## Sicherheit
Microsoft nimmt die Sicherheit seiner Softwareprodukte und -dienste sehr ernst, einschließlich aller Quellcode-Repositories, die über unsere GitHub-Organisationen verwaltet werden. Dazu gehören [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) und [unsere GitHub-Organisationen](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
Wenn Sie der Meinung sind, eine Sicherheitslücke in einem von Microsoft verwalteten Repository gefunden zu haben, die [Microsofts Definition einer Sicherheitslücke](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon) entspricht, melden Sie diese bitte wie unten beschrieben.
## Melden von Sicherheitsproblemen
**Bitte melden Sie Sicherheitslücken nicht über öffentliche GitHub-Issues.**
Stattdessen melden Sie diese bitte dem Microsoft Security Response Center (MSRC) unter [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
Falls Sie lieber ohne Anmeldung einreichen möchten, senden Sie eine E-Mail an [secure@microsoft.com](mailto:secure@microsoft.com). Wenn möglich, verschlüsseln Sie Ihre Nachricht mit unserem PGP-Schlüssel; laden Sie diesen von der [Microsoft Security Response Center PGP Key-Seite](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon) herunter.
Sie sollten innerhalb von 24 Stunden eine Antwort erhalten. Falls dies aus irgendeinem Grund nicht der Fall ist, senden Sie bitte eine Nachfass-E-Mail, um sicherzustellen, dass wir Ihre ursprüngliche Nachricht erhalten haben. Weitere Informationen finden Sie unter [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
Bitte fügen Sie die unten aufgeführten Informationen (so weit wie möglich) bei, um uns zu helfen, die Art und den Umfang des möglichen Problems besser zu verstehen:
* Art des Problems (z. B. Buffer Overflow, SQL Injection, Cross-Site Scripting usw.)
* Vollständige Pfade der Quellcodedatei(en), die mit dem Problem in Zusammenhang stehen
* Der Ort des betroffenen Quellcodes (Tag/Branch/Commit oder direkte URL)
* Besondere Konfigurationen, die erforderlich sind, um das Problem zu reproduzieren
* Schritt-für-Schritt-Anleitung zur Reproduktion des Problems
* Proof-of-Concept- oder Exploit-Code (falls möglich)
* Auswirkungen des Problems, einschließlich der möglichen Ausnutzung durch einen Angreifer
Diese Informationen helfen uns, Ihren Bericht schneller zu priorisieren.
Wenn Sie im Rahmen eines Bug-Bounty-Programms berichten, können vollständigere Berichte zu einer höheren Prämie führen. Besuchen Sie unsere Seite zum [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) für weitere Details zu unseren aktiven Programmen.
## Bevorzugte Sprachen
Wir bevorzugen, dass alle Mitteilungen auf Englisch erfolgen.
## Richtlinie
Microsoft folgt dem Prinzip der [Koordinierten Offenlegung von Sicherheitslücken](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

23
translations/de/SUPPORT.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
"translation_date": "2025-08-24T11:53:43+00:00",
"source_file": "SUPPORT.md",
"language_code": "de"
}
-->
# Unterstützung
## So melden Sie Probleme und erhalten Hilfe
Dieses Projekt verwendet GitHub Issues, um Fehler und Funktionsanfragen zu verfolgen. Bitte durchsuchen Sie die vorhandenen Issues, bevor Sie neue erstellen, um Duplikate zu vermeiden. Für neue Issues melden Sie Ihren Fehler oder Ihre Funktionsanfrage als neues Issue.
Für Hilfe und Fragen zur Nutzung dieses Projekts lesen Sie bitte [unsere Beitragsrichtlinien](CONTRIBUTING.md).
## Microsoft-Support-Richtlinie
Der Support für dieses Projekt ist auf die oben aufgeführten Ressourcen beschränkt.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

19
translations/de/_404.md Normal file
View File

@@ -0,0 +1,19 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
"translation_date": "2025-08-24T11:56:09+00:00",
"source_file": "_404.md",
"language_code": "de"
}
-->
# Arbeit läuft
Wir arbeiten an dieser Seite. Bitte schauen Sie später noch einmal vorbei.
Öffnen Sie ein [Issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose), wenn Sie Fragen haben.
**[Zurück zur Startseite](../../../../../../..)**
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

32
translations/de/docs/_navbar.md Normal file
View File

@@ -0,0 +1,32 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3bd2f51ecf4ac9b39277cba748943793",
"translation_date": "2025-08-24T12:25:44+00:00",
"source_file": "docs/_navbar.md",
"language_code": "de"
}
-->
- Übersetzungen
- [English (United States)](../../../docs/README)
- [বাংলা](../../../docs/README.bn)
- [中文(中国)](../../../docs/README.zh-cn)
- [中文(台湾)](../../../docs/README.zh-tw)
- [Español](../../../docs/README.es)
- [Français](../../../docs/README.fr)
- [Ελληνικά](../../../docs/README.el)
- [हिन्दी](../../../docs/README.hi)
- [Bahasa Melayu](../../../docs/README.ms)
- [മലയാളം](../../../docs/README.ml)
- [தமிழ்](../../../docs/README.ta)
- [తెలుగు](../../../docs/README.te)
- [Bahasa Indonesia](../../../docs/README.id)
- [Italiano](../../../docs/README.it)
- [日本語](../../../docs/README.ja)
- [Nederlands](../../../docs/README.nl)
- [नेपाली](../../../docs/README.np)
- [Português](../../../docs/README.pt)
- [Русский](../../../docs/README.ru)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

49
translations/de/docs/_sidebar.md Normal file
View File

@@ -0,0 +1,49 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
"translation_date": "2025-08-24T12:24:49+00:00",
"source_file": "docs/_sidebar.md",
"language_code": "de"
}
-->
- Einführung
- [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
- [2](../1-getting-started-lessons/2-github-basics/README.md)
- [3](../1-getting-started-lessons/3-accessibility/README.md)
- JS-Grundlagen
- [4](../2-js-basics/1-data-types/README.md)
- [5](../2-js-basics/2-functions-methods/README.md)
- [6](../2-js-basics/3-making-decisions/README.md)
- [7](../2-js-basics/4-arrays-loops/README.md)
- HTML, CSS, JS
- [8](../3-terrarium/1-intro-to-html/README.md)
- [9](../3-terrarium/2-intro-to-css/README.md)
- [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
- Tipp-Spiel
- [11](../4-typing-game/typing-game/README.md)
- Browser-Erweiterung
- [12](../5-browser-extension/1-about-browsers/README.md)
- [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
- [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
- Weltraumspiel
- [15](../6-space-game/1-introduction/README.md)
- [16](../6-space-game/2-drawing-to-canvas/README.md)
- [17](../6-space-game/3-moving-elements-around/README.md)
- [18](../6-space-game/4-collision-detection/README.md)
- [19](../6-space-game/5-keeping-score/README.md)
- [20](../6-space-game/6-end-condition/README.md)
- Bankprojekt
- [21](../7-bank-project/1-template-route/README.md)
- [22](../7-bank-project/2-forms/README.md)
- [23](../7-bank-project/3-data/README.md)
- [24](../7-bank-project/4-state-management/README.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir haften nicht für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

45
translations/de/for-teachers.md Normal file
View File

@@ -0,0 +1,45 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "75cb51f7ca9ea0b097ef4a1287e9290c",
"translation_date": "2025-08-24T11:54:33+00:00",
"source_file": "for-teachers.md",
"language_code": "de"
}
-->
## Für Lehrkräfte
Möchten Sie dieses Curriculum in Ihrem Unterricht verwenden? Sehr gerne!
Tatsächlich können Sie es direkt auf GitHub nutzen, indem Sie GitHub Classroom verwenden.
Dazu müssen Sie dieses Repository forken. Sie benötigen ein separates Repository für jede Lektion, daher müssen Sie jeden Ordner in ein eigenes Repository extrahieren. Auf diese Weise kann [GitHub Classroom](https://classroom.github.com/classrooms) jede Lektion einzeln erfassen.
Diese [vollständigen Anweisungen](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) geben Ihnen eine Vorstellung davon, wie Sie Ihr Klassenzimmer einrichten können.
## Nutzung in Moodle, Canvas oder Blackboard
Dieses Curriculum funktioniert hervorragend in diesen Learning Management Systemen! Verwenden Sie die [Moodle-Datei](../../../../../../../teaching-files/webdev-moodle.mbz) für den vollständigen Inhalt oder probieren Sie die [Common Cartridge-Datei](../../../../../../../teaching-files/webdev-common-cartridge.imscc), die einen Teil des Inhalts enthält. Moodle Cloud unterstützt keine vollständigen Common Cartridge-Exporte, daher ist es besser, die Moodle-Download-Datei zu verwenden, die in Canvas hochgeladen werden kann. Bitte teilen Sie uns mit, wie wir diese Erfahrung verbessern können.
![Moodle](/teaching-files/moodle.png)
> Das Curriculum in einem Moodle-Klassenzimmer
![Canvas](/teaching-files/canvas.png)
> Das Curriculum in Canvas
## Nutzung des Repos in der aktuellen Form
Wenn Sie dieses Repository in seiner aktuellen Form verwenden möchten, ohne GitHub Classroom zu nutzen, ist das ebenfalls möglich. Sie müssten Ihren Schülern mitteilen, welche Lektion Sie gemeinsam durcharbeiten möchten.
In einem Online-Format (Zoom, Teams oder andere) könnten Sie Breakout-Räume für die Quizfragen bilden und die Schüler betreuen, um sie auf das Lernen vorzubereiten. Anschließend laden Sie die Schüler zu den Quizfragen ein und lassen sie ihre Antworten zu einem bestimmten Zeitpunkt als 'Issues' einreichen. Dasselbe könnten Sie mit Aufgaben machen, wenn Sie möchten, dass die Schüler offen und kollaborativ arbeiten.
Wenn Sie ein privateres Format bevorzugen, bitten Sie Ihre Schüler, das Curriculum Lektion für Lektion in ihre eigenen privaten GitHub-Repositories zu forken und Ihnen Zugriff zu gewähren. Dann können sie Quizfragen und Aufgaben privat bearbeiten und diese über Issues in Ihrem Klassenzimmer-Repository einreichen.
Es gibt viele Möglichkeiten, dies in einem Online-Klassenzimmer-Format umzusetzen. Bitte teilen Sie uns mit, was für Sie am besten funktioniert!
## Teilen Sie uns Ihre Meinung mit!
Wir möchten dieses Curriculum für Sie und Ihre Schüler optimal gestalten. Kontaktieren Sie uns in der [Lehrerecke](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) und eröffnen Sie ein [**neues Issue**](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) für Anfragen, Fehler und Feedback.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

63
translations/de/lesson-template/README.md Normal file
View File

@@ -0,0 +1,63 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-24T13:48:27+00:00",
"source_file": "lesson-template/README.md",
"language_code": "de"
}
-->
# [Lektionsthema]
![Video hier einbetten](../../../lesson-template/video-url)
## [Quiz vor der Vorlesung](../../../lesson-template/quiz-url)
[Beschreiben, was wir lernen werden]
### Einführung
Beschreiben, was behandelt wird
> Notizen
### Voraussetzungen
Welche Schritte sollten vor dieser Lektion abgeschlossen sein?
### Vorbereitung
Vorbereitende Schritte, um mit dieser Lektion zu beginnen
---
[Inhalt blockweise durchgehen]
## [Thema 1]
### Aufgabe:
Arbeitet gemeinsam daran, euren Code schrittweise zu verbessern, um das Projekt mit gemeinsamem Code aufzubauen:
```html
code blocks
```
✅ Wissensüberprüfung - nutzt diesen Moment, um das Wissen der Studierenden mit offenen Fragen zu erweitern
## [Thema 2]
## [Thema 3]
🚀 Herausforderung: Fügt eine Herausforderung hinzu, an der die Studierenden im Unterricht gemeinsam arbeiten können, um das Projekt zu verbessern
Optional: Füge einen Screenshot der Benutzeroberfläche der abgeschlossenen Lektion hinzu, falls passend
## [Quiz nach der Vorlesung](../../../lesson-template/quiz-url)
## Rückblick & Selbststudium
**Abgabe fällig [MM/JJ]**: [Aufgabenname](assignment.md)
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

21
translations/de/lesson-template/assignment.md Normal file
View File

@@ -0,0 +1,21 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
"translation_date": "2025-08-24T13:49:06+00:00",
"source_file": "lesson-template/assignment.md",
"language_code": "de"
}
-->
# [Aufgabenname]
## Anweisungen
## Bewertungsrichtlinien
| Kriterien | Vorbildlich | Angemessen | Verbesserungswürdig |
| --------- | ----------- | ---------- | -------------------- |
| | | | |
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.

189
translations/de/quiz-app/README.md Normal file
View File

@@ -0,0 +1,189 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5301875c55bb305e6046bed3a4fd06d2",
"translation_date": "2025-08-24T13:56:13+00:00",
"source_file": "quiz-app/README.md",
"language_code": "de"
}
-->
# Quiz-App
Diese Quizze sind die Vor- und Nachlese-Quizze für den Data-Science-Lehrplan unter https://aka.ms/webdev-beginners
## Hinzufügen eines übersetzten Quiz-Sets
Fügen Sie eine Quiz-Übersetzung hinzu, indem Sie passende Quiz-Strukturen in den Ordnern `assets/translations` erstellen. Die ursprünglichen Quizze befinden sich in `assets/translations/en`. Die Quizze sind in mehrere Gruppen unterteilt. Stellen Sie sicher, dass die Nummerierung mit dem entsprechenden Quiz-Abschnitt übereinstimmt. Insgesamt gibt es 40 Quizze in diesem Lehrplan, beginnend mit der Nummer 0.
<details>
<summary>So sieht eine Übersetzungsdatei aus:</summary>
```
[
{
"title": "A title",
"complete": "A complete button title",
"error": "An error message upon selecting the wrong answer",
"quizzes": [
{
"id": 1,
"title": "Title",
"quiz": [
{
"questionText": "The question asked",
"answerOptions": [
{
"answerText": "Option 1 title",
"isCorrect": true
},
{
"answerText": "Option 2 title",
"isCorrect": false
}
]
}
]
}
]
}
]
```
</details>
Nachdem Sie die Übersetzungen bearbeitet haben, bearbeiten Sie die Datei `index.js` im Übersetzungsordner, um alle Dateien gemäß den Konventionen in `en` zu importieren.
Bearbeiten Sie die Datei `index.js` in `assets/translations`, um die neuen übersetzten Dateien zu importieren.
Zum Beispiel, wenn Ihre Übersetzungs-JSON-Datei `ex.json` ist, machen Sie 'ex' zum Lokalisierungsschlüssel und fügen Sie ihn wie unten gezeigt ein, um ihn zu importieren:
<details>
<summary>index.js</summary>
```
import ex from "./ex.json";
// if 'ex' is localization key then enter it like so in `messages` to expose it
const messages = {
ex: ex[0],
};
export default messages;
```
</details>
## Quiz-App lokal ausführen
### Voraussetzungen
- Ein GitHub-Konto
- [Node.js und Git](https://nodejs.org/)
### Installation & Einrichtung
1. Erstellen Sie ein Repository aus dieser [Vorlage](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft)
1. Klonen Sie Ihr neues Repository und navigieren Sie zur Quiz-App
```bash
git clone https://github.com/your-github-organization/repo-name
cd repo-name/quiz-app
```
1. Installieren Sie die npm-Pakete und Abhängigkeiten
```bash
npm install
```
### App erstellen
1. Um die Lösung zu erstellen, führen Sie aus:
```bash
npm run build
```
### App starten
1. Um die Lösung auszuführen, führen Sie aus:
```bash
npm run dev
```
### [Optional] Linting
1. Um sicherzustellen, dass der Code überprüft wird, führen Sie aus:
```bash
npm run lint
```
## Quiz-App auf Azure bereitstellen
### Voraussetzungen
- Ein Azure-Abonnement. Registrieren Sie sich kostenlos [hier](https://aka.ms/azure-free).
_Kostenabschätzung für die Bereitstellung dieser Quiz-App: KOSTENLOS_
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
Sobald Sie sich über den obigen Link bei Azure angemeldet haben, wählen Sie ein Abonnement und eine Ressourcengruppe aus:
- Details zur statischen Web-App: Geben Sie einen Namen an und wählen Sie einen Hosting-Plan aus.
- GitHub-Login: Legen Sie Ihre Bereitstellungsquelle als GitHub fest, melden Sie sich an und füllen Sie die erforderlichen Felder im Formular aus:
- *Organisation* – Wählen Sie Ihre Organisation.
- *Repository* – Wählen Sie das Repository des Web Dev for Beginners-Lehrplans.
- *Branch* - Wählen Sie einen Branch (main)
- Build-Voreinstellungen: Azure Static Web Apps verwendet einen Erkennungsalgorithmus, um das Framework Ihrer Anwendung zu erkennen.
- *App-Standort* - ./quiz-app
- *API-Standort* -
- *Ausgabe-Standort* - dist
- Bereitstellung: Klicken Sie auf 'Überprüfen + Erstellen', dann auf 'Erstellen'.
Nach der Bereitstellung wird eine Workflow-Datei im *.github*-Verzeichnis Ihres Repos erstellt. Diese Workflow-Datei enthält Anweisungen zu Ereignissen, die eine erneute Bereitstellung der App auf Azure auslösen, z. B. _ein **Push** auf Branch **main**_ usw.
<details>
<summary>Beispiel-Workflow-Datei</summary>
Hier ist ein Beispiel, wie die GitHub Actions Workflow-Datei aussehen könnte:
name: Azure Static Web Apps CI/CD
```
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: "quiz-app" # App source code path
api_location: ""API source code path optional
output_location: "dist" #Built app content directory - optional
```
</details>
- Nach der Bereitstellung: Nachdem die Bereitstellung abgeschlossen ist, klicken Sie auf 'Zur Bereitstellung gehen' und dann auf 'App im Browser anzeigen'.
Sobald Ihre GitHub-Aktion (Workflow) erfolgreich ausgeführt wurde, aktualisieren Sie die Live-Seite, um Ihre Anwendung anzuzeigen.
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

215
translations/es/1-getting-started-lessons/1-intro-to-programming-languages/README.md Normal file
View File

@@ -0,0 +1,215 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "c63675cfaf1d223b37bb9fecbfe7c252",
"translation_date": "2025-08-24T12:58:14+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "es"
}
-->
# Introducción a los Lenguajes de Programación y Herramientas del Oficio
Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas tratados aquí se aplican a la mayoría de los lenguajes de programación modernos. En la sección "Herramientas del Oficio", aprenderás sobre software útil que te ayudará como desarrollador.
![Intro Programación](../../../../sketchnotes/webdev101-programming.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario Previo a la Clase
[Cuestionario previo a la clase](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## Introducción
En esta lección, cubriremos:
- ¿Qué es la programación?
- Tipos de lenguajes de programación
- Elementos básicos de un programa
- Software y herramientas útiles para el desarrollador profesional
> Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## ¿Qué es la Programación?
La programación (también conocida como codificación) es el proceso de escribir instrucciones para un dispositivo como una computadora o un dispositivo móvil. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Estos conjuntos de instrucciones pueden ser referidos con varios nombres, pero *programa*, *programa de computadora*, *aplicación (app)* y *ejecutable* son algunos nombres populares.
Un *programa* puede ser cualquier cosa escrita con código; sitios web, juegos y aplicaciones móviles son programas. Aunque es posible crear un programa sin escribir código, la lógica subyacente es interpretada por el dispositivo y esa lógica probablemente fue escrita con código. Un programa que está *ejecutando* o *procesando* código está llevando a cabo instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para mostrarla en tu pantalla.
✅ Investiga un poco: ¿Quién es considerado el primer programador de computadoras del mundo?
## Lenguajes de Programación
Los lenguajes de programación permiten a los desarrolladores escribir instrucciones para un dispositivo. Los dispositivos solo pueden entender binario (1s y 0s), y para *la mayoría* de los desarrolladores, esa no es una forma muy eficiente de comunicarse. Los lenguajes de programación son el vehículo para la comunicación entre humanos y computadoras.
Los lenguajes de programación vienen en diferentes formatos y pueden servir diferentes propósitos. Por ejemplo, JavaScript se utiliza principalmente para aplicaciones web, mientras que Bash se utiliza principalmente para sistemas operativos.
Los *lenguajes de bajo nivel* generalmente requieren menos pasos que los *lenguajes de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace populares a los lenguajes de alto nivel es su legibilidad y soporte. JavaScript se considera un lenguaje de alto nivel.
El siguiente código ilustra la diferencia entre un lenguaje de alto nivel con JavaScript y un lenguaje de bajo nivel con código ensamblador ARM.
```javascript
let number = 10
let n1 = 0, n2 = 1, nextTerm;
for (let i = 1; i <= number; i++) {
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
```
```c
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
```
Aunque no lo creas, *ambos están haciendo lo mismo*: imprimir una secuencia de Fibonacci hasta el número 10.
✅ Una secuencia de Fibonacci se [define](https://en.wikipedia.org/wiki/Fibonacci_number) como un conjunto de números en el que cada número es la suma de los dos anteriores, comenzando desde 0 y 1. Los primeros 10 números de la secuencia de Fibonacci son 0, 1, 1, 2, 3, 5, 8, 13, 21 y 34.
## Elementos de un Programa
Una sola instrucción en un programa se llama *sentencia* y usualmente tendrá un carácter o espacio de línea que marca dónde termina la instrucción, o *termina*. Cómo termina un programa varía según el lenguaje.
Las sentencias dentro de un programa pueden depender de datos proporcionados por un usuario o de otro lugar para llevar a cabo instrucciones. Los datos pueden cambiar cómo se comporta un programa, por lo que los lenguajes de programación vienen con una forma de almacenar datos temporalmente para que puedan ser utilizados más tarde. Estos se llaman *variables*. Las variables son sentencias que instruyen a un dispositivo a guardar datos en su memoria. Las variables en los programas son similares a las variables en álgebra, donde tienen un nombre único y su valor puede cambiar con el tiempo.
Es posible que algunas sentencias no sean ejecutadas por un dispositivo. Esto generalmente ocurre por diseño cuando lo escribe el desarrollador o por accidente cuando ocurre un error inesperado. Este tipo de control sobre una aplicación la hace más robusta y mantenible. Típicamente, estos cambios en el control ocurren cuando se cumplen ciertas condiciones. Una sentencia común utilizada en la programación moderna para controlar cómo se ejecuta un programa es la sentencia `if..else`.
✅ Aprenderás más sobre este tipo de sentencia en lecciones posteriores.
## Herramientas del Oficio
[![Herramientas del Oficio](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Herramientas del Oficio")
> 🎥 Haz clic en la imagen de arriba para ver un video sobre herramientas
En esta sección, aprenderás sobre algunos programas que pueden ser muy útiles al comenzar tu camino como desarrollador profesional.
Un **entorno de desarrollo** es un conjunto único de herramientas y características que un desarrollador utiliza frecuentemente al escribir software. Algunas de estas herramientas han sido personalizadas para las necesidades específicas de un desarrollador y pueden cambiar con el tiempo si ese desarrollador cambia prioridades en el trabajo, proyectos personales o cuando utiliza un lenguaje de programación diferente. Los entornos de desarrollo son tan únicos como los desarrolladores que los utilizan.
### Editores
Una de las herramientas más cruciales para el desarrollo de software es el editor. Los editores son donde escribes tu código y, a veces, donde ejecutas tu código.
Los desarrolladores dependen de los editores por varias razones adicionales:
- *Depuración* ayuda a descubrir errores y fallos al analizar el código línea por línea. Algunos editores tienen capacidades de depuración; pueden ser personalizados y añadidos para lenguajes de programación específicos.
- *Resaltado de sintaxis* agrega colores y formato de texto al código, haciéndolo más fácil de leer. La mayoría de los editores permiten personalizar el resaltado de sintaxis.
- *Extensiones e Integraciones* son herramientas especializadas para desarrolladores, creadas por desarrolladores. Estas herramientas no están integradas en el editor base. Por ejemplo, muchos desarrolladores documentan su código para explicar cómo funciona. Pueden instalar una extensión de corrección ortográfica para ayudar a encontrar errores tipográficos en la documentación. La mayoría de las extensiones están destinadas a ser utilizadas dentro de un editor específico, y la mayoría de los editores vienen con una forma de buscar extensiones disponibles.
- *Personalización* permite a los desarrolladores crear un entorno de desarrollo único que se adapte a sus necesidades. La mayoría de los editores son extremadamente personalizables y también pueden permitir a los desarrolladores crear extensiones personalizadas.
#### Editores Populares y Extensiones para Desarrollo Web
- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Atom](https://atom.io/)
- [spell-check](https://atom.io/packages/spell-check)
- [teletype](https://atom.io/packages/teletype)
- [atom-beautify](https://atom.io/packages/atom-beautify)
- [Sublimetext](https://www.sublimetext.com/)
- [emmet](https://emmet.io/)
- [SublimeLinter](http://www.sublimelinter.com/en/stable/)
### Navegadores
Otra herramienta crucial es el navegador. Los desarrolladores web dependen del navegador para ver cómo su código se ejecuta en la web. También se utiliza para mostrar los elementos visuales de una página web que se escriben en el editor, como HTML.
Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que contienen un conjunto de características útiles e información para ayudar a los desarrolladores a recopilar y capturar información importante sobre su aplicación. Por ejemplo: Si una página web tiene errores, a veces es útil saber cuándo ocurrieron. Las DevTools en un navegador pueden configurarse para capturar esta información.
#### Navegadores Populares y DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools)
### Herramientas de Línea de Comandos
Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y dependen de la línea de comandos para lograrlo. Escribir código requiere una cantidad significativa de tipeo y algunos desarrolladores prefieren no interrumpir su flujo en el teclado. Utilizan atajos de teclado para cambiar entre ventanas del escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una ventaja de usar la línea de comandos es que se puede hacer mucho con herramientas de línea de comandos sin necesidad de cambiar entre el mouse y el teclado. Otra ventaja de la línea de comandos es que son configurables y puedes guardar una configuración personalizada, cambiarla más tarde e importarla a otras máquinas de desarrollo. Debido a que los entornos de desarrollo son tan únicos para cada desarrollador, algunos evitarán usar la línea de comandos, otros dependerán completamente de ella y algunos preferirán una mezcla de ambos.
### Opciones Populares de Línea de Comandos
Las opciones para la línea de comandos diferirán según el sistema operativo que utilices.
*💻 = viene preinstalado en el sistema operativo.*
#### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (también conocido como CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
- [mintty](https://mintty.github.io/)
#### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
#### Herramientas Populares de Línea de Comandos
- [Git](https://git-scm.com/) (💻 en la mayoría de los sistemas operativos)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
### Documentación
Cuando un desarrollador quiere aprender algo nuevo, probablemente recurrirá a la documentación para aprender cómo usarlo. Los desarrolladores suelen depender de la documentación para guiarlos sobre cómo usar herramientas y lenguajes correctamente, y también para obtener un conocimiento más profundo de cómo funcionan.
#### Documentación Popular sobre Desarrollo Web
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, los editores del navegador [Firefox](https://www.mozilla.org/firefox/)
- [Frontend Masters](https://frontendmasters.com/learn/)
- [Web.dev](https://web.dev), de Google, editores de [Chrome](https://www.google.com/chrome/)
- [Documentación para desarrolladores de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge)
- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
✅ Investiga: Ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo con el entorno de un diseñador web.
---
## 🚀 Desafío
Compara algunos lenguajes de programación. ¿Cuáles son algunas de las características únicas de JavaScript frente a Java? ¿Qué hay de COBOL frente a Go?
## Cuestionario Posterior a la Clase
[Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
## Revisión y Autoestudio
Estudia un poco sobre los diferentes lenguajes disponibles para el programador. Intenta escribir una línea en un lenguaje y luego reescribirla en otros dos. ¿Qué aprendiste?
## Tarea
[Leer la Documentación](assignment.md)
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

23
translations/es/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "1ce4deaec80130d3a0a3c906568459fc",
"translation_date": "2025-08-24T13:01:21+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
"language_code": "es"
}
-->
# Leyendo la Documentación
## Instrucciones
Existen muchas herramientas que un desarrollador web puede necesitar y que se encuentran en la [documentación de MDN sobre herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecciona 3 herramientas que no se hayan cubierto en la lección, explica por qué un desarrollador web las usaría y busca una herramienta que pertenezca a esta categoría para compartir su documentación. No utilices el mismo ejemplo de herramienta que aparece en la documentación de MDN.
## Rúbrica
Ejemplar | Adecuado | Necesita Mejorar
--- | --- | -- |
|Explicó por qué un desarrollador web usaría la herramienta| Explicó cómo, pero no por qué un desarrollador usaría la herramienta| No mencionó cómo ni por qué un desarrollador usaría la herramienta |
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

337
translations/es/1-getting-started-lessons/2-github-basics/README.md Normal file
View File

@@ -0,0 +1,337 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "05666cecb8983a72cf0ce1d18932b5b7",
"translation_date": "2025-08-24T12:47:41+00:00",
"source_file": "1-getting-started-lessons/2-github-basics/README.md",
"language_code": "es"
}
-->
# Introducción a GitHub
Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y gestionar cambios en tu código.
![Introducción a GitHub](../../../../sketchnotes/webdev101-github.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario previo a la lección
[Cuestionario previo a la lección](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
## Introducción
En esta lección, cubriremos:
- cómo rastrear el trabajo que haces en tu máquina
- cómo trabajar en proyectos con otros
- cómo contribuir al software de código abierto
### Prerrequisitos
Antes de comenzar, necesitas verificar si Git está instalado. En la terminal escribe:
`git --version`
Si Git no está instalado, [descarga Git](https://git-scm.com/downloads). Luego, configura tu perfil local de Git en la terminal:
* `git config --global user.name "tu-nombre"`
* `git config --global user.email "tu-correo"`
Para verificar si Git ya está configurado, puedes escribir:
`git config --list`
También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) y abrir tu terminal (o símbolo del sistema).
Navega a [github.com](https://github.com/) y crea una cuenta si aún no lo has hecho, o inicia sesión y completa tu perfil.
✅ GitHub no es el único repositorio de código en el mundo; hay otros, pero GitHub es el más conocido.
### Preparación
Necesitarás una carpeta con un proyecto de código en tu máquina local (laptop o PC) y un repositorio público en GitHub, que servirá como ejemplo de cómo contribuir a los proyectos de otros.
---
## Gestión de código
Supongamos que tienes una carpeta local con un proyecto de código y quieres comenzar a rastrear tu progreso usando git, el sistema de control de versiones. Algunas personas comparan usar git con escribir una carta de amor a tu futuro yo. Al leer tus mensajes de confirmación días, semanas o meses después, podrás recordar por qué tomaste una decisión o "revertir" un cambio, siempre y cuando escribas buenos "mensajes de confirmación".
### Tarea: Crear un repositorio y confirmar código
> Mira el video
>
> [![Video sobre conceptos básicos de Git y GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
1. **Crear un repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios o desde la barra de navegación en la parte superior derecha, encuentra el botón **nuevo repositorio**.
1. Dale un nombre a tu repositorio (carpeta).
1. Selecciona **crear repositorio**.
1. **Navega a tu carpeta de trabajo**. En tu terminal, cambia a la carpeta (también conocida como directorio) que deseas comenzar a rastrear. Escribe:
```bash
cd [name of your folder]
```
1. **Inicializa un repositorio de git**. En tu proyecto escribe:
```bash
git init
```
1. **Verifica el estado**. Para verificar el estado de tu repositorio escribe:
```bash
git status
```
La salida puede verse algo así:
```output
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: file.txt
modified: file2.txt
```
Normalmente, el comando `git status` te dice cosas como qué archivos están listos para ser _guardados_ en el repositorio o tienen cambios que podrías querer persistir.
1. **Agrega todos los archivos para rastrear**
Esto también se llama preparar archivos/agregar archivos al área de preparación.
```bash
git add .
```
El argumento `git add` más `.` indica que todos tus archivos y cambios serán rastreados.
1. **Agrega archivos seleccionados para rastrear**
```bash
git add [file or folder name]
```
Esto nos ayuda a agregar solo archivos seleccionados al área de preparación cuando no queremos confirmar todos los archivos de una vez.
1. **Quitar la preparación de todos los archivos**
```bash
git reset
```
Este comando nos ayuda a quitar la preparación de todos los archivos de una vez.
1. **Quitar la preparación de un archivo en particular**
```bash
git reset [file or folder name]
```
Este comando nos ayuda a quitar la preparación de solo un archivo en particular que no queremos incluir en la próxima confirmación.
1. **Persistir tu trabajo**. En este punto, has agregado los archivos a un área llamada _área de preparación_. Un lugar donde Git está rastreando tus archivos. Para hacer el cambio permanente necesitas _confirmar_ los archivos. Para hacerlo, crea una _confirmación_ con el comando `git commit`. Una _confirmación_ representa un punto de guardado en la historia de tu repositorio. Escribe lo siguiente para crear una _confirmación_:
```bash
git commit -m "first commit"
```
Esto confirma todos tus archivos, agregando el mensaje "primer commit". Para futuros mensajes de confirmación, querrás ser más descriptivo en tu descripción para transmitir qué tipo de cambio has realizado.
1. **Conecta tu repositorio local de Git con GitHub**. Un repositorio de Git es útil en tu máquina, pero en algún momento querrás tener una copia de seguridad de tus archivos en algún lugar y también invitar a otras personas a trabajar contigo en tu repositorio. Un gran lugar para hacerlo es GitHub. Recuerda que ya hemos creado un repositorio en GitHub, así que lo único que necesitamos hacer es conectar nuestro repositorio local de Git con GitHub. El comando `git remote add` hará justo eso. Escribe el siguiente comando:
> Nota: antes de escribir el comando, ve a la página de tu repositorio en GitHub para encontrar la URL del repositorio. La usarás en el siguiente comando. Reemplaza ```https://github.com/username/repository_name.git``` con tu URL de GitHub.
```bash
git remote add origin https://github.com/username/repository_name.git
```
Esto crea una _remota_, o conexión, llamada "origin" que apunta al repositorio de GitHub que creaste anteriormente.
1. **Enviar archivos locales a GitHub**. Hasta ahora has creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, de esta manera:
> Nota: el nombre de tu rama puede ser diferente por defecto de ```main```.
```bash
git push -u origin main
```
Esto envía tus confirmaciones en tu rama "main" a GitHub.
2. **Para agregar más cambios**. Si deseas continuar haciendo cambios y enviándolos a GitHub, solo necesitarás usar los siguientes tres comandos:
```bash
git add .
git commit -m "type your commit message here"
git push
```
> Consejo: También podrías querer adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub, como ese archivo de notas que guardas en la misma carpeta pero que no tiene lugar en un repositorio público. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](https://github.com/github/gitignore).
#### Mensajes de confirmación
Un gran mensaje de confirmación de Git completa la siguiente oración:
Si se aplica, esta confirmación <tu línea de asunto aquí>
Para el asunto, usa el tiempo presente e imperativo: "cambiar" en lugar de "cambiado" ni "cambios".
Al igual que en el asunto, en el cuerpo (opcional) también usa el tiempo presente e imperativo. El cuerpo debe incluir la motivación para el cambio y contrastarlo con el comportamiento anterior. Estás explicando el `por qué`, no el `cómo`.
✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de confirmación realmente bueno? ¿Puedes encontrar uno realmente mínimo? ¿Qué información crees que es la más importante y útil para transmitir en un mensaje de confirmación?
### Tarea: Colaborar
La razón principal para poner cosas en GitHub es hacer posible colaborar con otros desarrolladores.
## Trabajar en proyectos con otros
> Mira el video
>
> [![Video sobre conceptos básicos de Git y GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
En tu repositorio, navega a `Insights > Community` para ver cómo tu proyecto se compara con los estándares comunitarios recomendados.
Aquí hay algunas cosas que pueden mejorar tu repositorio de GitHub:
- **Descripción**. ¿Agregaste una descripción para tu proyecto?
- **README**. ¿Agregaste un README? GitHub proporciona orientación para escribir un [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
- **Guía de contribución**. ¿Tu proyecto tiene [guías de contribución](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)?
- **Código de conducta**. ¿Un [Código de Conducta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)?
- **Licencia**. Quizás lo más importante, una [licencia](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
Todos estos recursos beneficiarán la incorporación de nuevos miembros al equipo. Y típicamente son el tipo de cosas que los nuevos contribuyentes miran antes de siquiera mirar tu código, para averiguar si tu proyecto es el lugar adecuado para que dediquen su tiempo.
✅ Los archivos README, aunque toman tiempo para prepararse, a menudo son descuidados por los mantenedores ocupados. ¿Puedes encontrar un ejemplo de uno particularmente descriptivo? Nota: hay algunos [herramientas para ayudar a crear buenos READMEs](https://www.makeareadme.com/) que podrías querer probar.
### Tarea: Fusionar código
Los documentos de contribución ayudan a las personas a contribuir al proyecto. Explican qué tipos de contribuciones estás buscando y cómo funciona el proceso. Los contribuyentes necesitarán pasar por una serie de pasos para poder contribuir a tu repositorio en GitHub:
1. **Hacer un fork de tu repositorio**. Probablemente querrás que las personas _hagan un fork_ de tu proyecto. Hacer un fork significa crear una réplica de tu repositorio en su perfil de GitHub.
1. **Clonar**. Desde allí, clonarán el proyecto a su máquina local.
1. **Crear una rama**. Querrás pedirles que creen una _rama_ para su trabajo.
1. **Enfocar su cambio en un área**. Pide a los contribuyentes que concentren sus contribuciones en una sola cosa a la vez; de esa manera, las posibilidades de que puedas _fusionar_ su trabajo son mayores. Imagina que escriben una corrección de errores, agregan una nueva funcionalidad y actualizan varias pruebas; ¿qué pasa si quieres, o solo puedes implementar 2 de 3, o 1 de 3 cambios?
✅ Imagina una situación donde las ramas son particularmente críticas para escribir y enviar buen código. ¿Qué casos de uso puedes pensar?
> Nota: sé el cambio que quieres ver en el mundo y crea ramas para tu propio trabajo también. Cualquier confirmación que hagas se realizará en la rama en la que estés "revisado". Usa `git status` para ver en qué rama estás.
Pasemos por un flujo de trabajo de contribuyente. Supongamos que el contribuyente ya ha _hecho un fork_ y _clonado_ el repositorio, por lo que tiene un repositorio de Git listo para trabajar en su máquina local:
1. **Crear una rama**. Usa el comando `git branch` para crear una rama que contendrá los cambios que planean contribuir:
```bash
git branch [branch-name]
```
1. **Cambiar a la rama de trabajo**. Cambia a la rama especificada y actualiza el directorio de trabajo con `git switch`:
```bash
git switch [branch-name]
```
1. **Hacer el trabajo**. En este punto, quieres agregar tus cambios. No olvides informarle a Git con los siguientes comandos:
```bash
git add .
git commit -m "my changes"
```
Asegúrate de darle un buen nombre a tu confirmación, tanto para tu beneficio como para el mantenedor del repositorio al que estás ayudando.
1. **Combinar tu trabajo con la rama `main`**. En algún momento habrás terminado de trabajar y querrás combinar tu trabajo con el de la rama `main`. La rama `main` podría haber cambiado mientras tanto, así que asegúrate de actualizarla primero con los siguientes comandos:
```bash
git switch main
git pull
```
En este punto, asegúrate de que cualquier _conflicto_, situaciones donde Git no puede fácilmente _combinar_ los cambios, ocurra en tu rama de trabajo. Por lo tanto, ejecuta los siguientes comandos:
```bash
git switch [branch_name]
git merge main
```
Esto traerá todos los cambios de `main` a tu rama y, con suerte, podrás continuar. Si no, VS Code te indicará dónde Git está _confundido_ y solo tendrás que alterar los archivos afectados para indicar qué contenido es el más preciso.
1. **Enviar tu trabajo a GitHub**. Enviar tu trabajo a GitHub significa dos cosas: empujar tu rama a tu repositorio y luego abrir un PR (Pull Request).
```bash
git push --set-upstream origin [branch-name]
```
El comando anterior crea la rama en tu repositorio bifurcado.
1. **Abrir un PR**. A continuación, querrás abrir un PR. Hazlo navegando al repositorio bifurcado en GitHub. Verás una indicación en GitHub donde te pregunta si deseas crear un nuevo PR; haz clic en eso y serás llevado a una interfaz donde puedes cambiar el título del mensaje de confirmación, darle una descripción más adecuada. Ahora el mantenedor del repositorio que bifurcaste verá este PR y _crucemos los dedos_ apreciará y _fusionará_ tu PR. Ahora eres un contribuyente, ¡yay! :)
1. **Limpiar**. Se considera una buena práctica _limpiar_ después de fusionar exitosamente un PR. Querrás limpiar tanto tu rama local como la rama que empujaste a GitHub. Primero eliminémosla localmente con el siguiente comando:
```bash
git branch -d [branch-name]
```
Asegúrate de ir a la página de GitHub del repositorio bifurcado a continuación y eliminar la rama remota que acabas de subir.
`Pull request` parece un término un poco extraño porque en realidad quieres enviar tus cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo principal necesita considerar tus cambios antes de fusionarlos con la rama "principal" del proyecto, por lo que en realidad estás solicitando una decisión de cambio a un mantenedor.
Un pull request es el lugar donde se comparan y discuten las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Un buen pull request sigue aproximadamente las mismas reglas que un mensaje de commit. Puedes agregar una referencia a un problema en el rastreador de problemas, por ejemplo, cuando tu trabajo soluciona un problema. Esto se hace usando un `#` seguido del número de tu problema. Por ejemplo, `#97`.
🤞Crucemos los dedos para que todas las verificaciones pasen y el/los propietario(s) del proyecto fusionen tus cambios en el proyecto🤞
Actualiza tu rama de trabajo local actual con todos los nuevos commits de la rama remota correspondiente en GitHub:
`git pull`
## Cómo contribuir a código abierto
Primero, busquemos un repositorio (o **repo**) en GitHub que te interese y al que te gustaría contribuir con un cambio. Querrás copiar su contenido a tu máquina.
✅ Una buena forma de encontrar repositorios 'amigables para principiantes' es [buscar por la etiqueta 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Copiar un repositorio localmente](../../../../1-getting-started-lessons/2-github-basics/images/clone_repo.png)
Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o la CLI (Interfaz de Línea de Comandos) de GitHub.
Abre tu terminal y clona el repositorio de esta manera:
`git clone https://github.com/ProjectURL`
Para trabajar en el proyecto, cambia al directorio correcto:
`cd ProjectURL`
También puedes abrir el proyecto completo usando [Codespaces](https://github.com/features/codespaces), el editor de código integrado / entorno de desarrollo en la nube de GitHub, o [GitHub Desktop](https://desktop.github.com/).
Por último, puedes descargar el código en una carpeta comprimida.
### Algunas cosas interesantes sobre GitHub
Puedes marcar con estrella, observar y/o "bifurcar" cualquier repositorio público en GitHub. Puedes encontrar tus repositorios marcados con estrella en el menú desplegable de la esquina superior derecha. Es como guardar en favoritos, pero para código.
Los proyectos tienen un rastreador de problemas, generalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas discuten problemas relacionados con el proyecto. Y la pestaña de Pull Requests es donde las personas discuten y revisan los cambios que están en progreso.
Los proyectos también pueden tener discusiones en foros, listas de correo o canales de chat como Slack, Discord o IRC.
✅ Echa un vistazo a tu nuevo repositorio de GitHub y prueba algunas cosas, como editar configuraciones, agregar información a tu repositorio y crear un proyecto (como un tablero Kanban). ¡Hay mucho que puedes hacer!
---
## 🚀 Desafío
Trabaja en pareja con un amigo para trabajar en el código del otro. Crea un proyecto de manera colaborativa, bifurca código, crea ramas y fusiona cambios.
## Cuestionario posterior a la clase
[Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
## Revisión y autoestudio
Lee más sobre [cómo contribuir a software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
[Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/).
Practica, practica, practica. GitHub tiene excelentes rutas de aprendizaje disponibles en [skills.github.com](https://skills.github.com):
- [Primera semana en GitHub](https://skills.github.com/#first-week-on-github)
También encontrarás cursos más avanzados.
## Tarea
Completa [el curso de la Primera Semana en GitHub](https://skills.github.com/#first-week-on-github).
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

242
translations/es/1-getting-started-lessons/3-accessibility/README.md Normal file
View File

@@ -0,0 +1,242 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "e4cd5b1faed4adab5acf720f82798003",
"translation_date": "2025-08-24T12:52:54+00:00",
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
"language_code": "es"
}
-->
# Creando Páginas Web Accesibles
![Todo sobre la accesibilidad](../../../../sketchnotes/webdev101-a11y.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario Previo a la Clase
[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
> El poder de la Web está en su universalidad. El acceso para todos, independientemente de la discapacidad, es un aspecto esencial.
>
> \- Sir Timothy Berners-Lee, Director de W3C e inventor de la World Wide Web
Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación que no puede ser utilizada por todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en mente la accesibilidad. Al enfocarnos en esto desde el principio, estaremos en el camino correcto para garantizar que todos puedan acceder a las páginas que creamos. En esta lección, aprenderás sobre las herramientas que pueden ayudarte a garantizar que tus recursos web sean accesibles y cómo construir con la accesibilidad en mente.
> ¡Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
## Herramientas para usar
### Lectores de pantalla
Una de las herramientas de accesibilidad más conocidas son los lectores de pantalla.
[Lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son clientes comúnmente utilizados por personas con discapacidades visuales. Así como dedicamos tiempo a garantizar que un navegador transmita correctamente la información que queremos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
En su forma más básica, un lector de pantalla leerá una página de arriba hacia abajo de forma audible. Si tu página es solo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contienen enlaces, gráficos, colores y otros componentes visuales. Se debe tener cuidado para garantizar que esta información se lea correctamente por un lector de pantalla.
Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que tus usuarios utilizarán. De la misma manera que estás familiarizado con cómo opera un navegador, deberías aprender cómo opera un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos.
Algunos navegadores también tienen herramientas integradas y extensiones que pueden leer texto en voz alta o incluso proporcionar algunas funciones básicas de navegación, como [estas herramientas enfocadas en accesibilidad del navegador Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Estas también son herramientas importantes de accesibilidad, pero funcionan de manera muy diferente a los lectores de pantalla y no deben confundirse con herramientas de prueba de lectores de pantalla.
✅ Prueba un lector de pantalla y un lector de texto del navegador. En Windows, [Narrador](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) está incluido por defecto, y [JAWS](https://webaim.org/articles/jaws/) y [NVDA](https://www.nvaccess.org/about-nvda/) también se pueden instalar. En macOS y iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) está instalado por defecto.
### Zoom
Otra herramienta comúnmente utilizada por personas con discapacidades visuales es el zoom. El tipo más básico de zoom es el zoom estático, controlado mediante `Control + signo más (+)` o disminuyendo la resolución de la pantalla. Este tipo de zoom hace que toda la página cambie de tamaño, por lo que usar [diseño responsivo](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) es importante para proporcionar una buena experiencia de usuario en niveles de zoom aumentados.
Otro tipo de zoom depende de software especializado para ampliar un área de la pantalla y desplazarse, como usar una lupa real. En Windows, [Lupa](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) está integrado, y [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) es un software de ampliación de terceros con más funciones y una base de usuarios más grande. Tanto macOS como iOS tienen un software de ampliación integrado llamado [Zoom](https://www.apple.com/accessibility/mac/vision/).
### Comprobadores de contraste
Los colores en los sitios web deben elegirse cuidadosamente para responder a las necesidades de los usuarios con daltonismo o personas que tienen dificultades para ver colores de bajo contraste.
✅ Prueba un sitio web que disfrutes usando para verificar el uso de colores con una extensión de navegador como [el comprobador de contraste de color de WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). ¿Qué aprendes?
### Lighthouse
En el área de herramientas para desarrolladores de tu navegador, encontrarás la herramienta Lighthouse. Esta herramienta es importante para obtener una primera vista de la accesibilidad (así como otros análisis) de un sitio web. Aunque es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como punto de partida.
✅ Encuentra Lighthouse en el panel de herramientas para desarrolladores de tu navegador y realiza un análisis en cualquier sitio. ¿Qué descubres?
## Diseñando para la accesibilidad
La accesibilidad es un tema relativamente amplio. Para ayudarte, hay numerosos recursos disponibles.
- [Accessible U - Universidad de Minnesota](https://accessibility.umn.edu/your-role/web-developers)
Aunque no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se presentan algunos de los principios básicos que querrás implementar. Diseñar una página accesible desde el principio es **siempre** más fácil que volver a una página existente para hacerla accesible.
## Buenos principios de diseño
### Paletas de colores seguras
Las personas ven el mundo de diferentes maneras, y esto incluye los colores. Al seleccionar un esquema de colores para tu sitio, debes asegurarte de que sea accesible para todos. Una excelente [herramienta para generar paletas de colores es Color Safe](http://colorsafe.co/).
✅ Identifica un sitio web que sea muy problemático en su uso de colores. ¿Por qué?
### Usa el HTML correcto
Con CSS y JavaScript es posible hacer que cualquier elemento parezca cualquier tipo de control. `<span>` podría usarse para crear un `<button>`, y `<b>` podría convertirse en un hipervínculo. Aunque esto podría considerarse más fácil de estilizar, no transmite nada a un lector de pantalla. Usa el HTML apropiado al crear controles en una página. Si quieres un hipervínculo, usa `<a>`. Usar el HTML correcto para el control correcto se llama hacer uso de HTML semántico.
✅ Ve a cualquier sitio web y verifica si los diseñadores y desarrolladores están usando HTML correctamente. ¿Puedes encontrar un botón que debería ser un enlace? Pista: haz clic derecho y elige 'Ver código fuente de la página' en tu navegador para mirar el código subyacente.
### Crea una jerarquía de encabezados descriptiva
Los usuarios de lectores de pantalla [dependen en gran medida de los encabezados](https://webaim.org/projects/screenreadersurvey8/#finding) para encontrar información y navegar por una página. Escribir contenido descriptivo en los encabezados y usar etiquetas semánticas de encabezados es importante para crear un sitio fácilmente navegable para los usuarios de lectores de pantalla.
### Usa buenas pistas visuales
CSS ofrece control total sobre el aspecto de cualquier elemento en una página. Puedes crear cuadros de texto sin un contorno o hipervínculos sin un subrayado. Desafortunadamente, eliminar esas pistas puede dificultar que alguien que depende de ellas pueda reconocer el tipo de control.
## La importancia del texto de los enlaces
Los hipervínculos son fundamentales para navegar por la web. Por lo tanto, garantizar que un lector de pantalla pueda leer correctamente los enlaces permite que todos los usuarios naveguen por tu sitio.
### Lectores de pantalla y enlaces
Como cabría esperar, los lectores de pantalla leen el texto de los enlaces de la misma manera que leerían cualquier otro texto en la página. Con esto en mente, el texto mostrado a continuación podría parecer perfectamente aceptable.
> El pingüino pequeño, a veces conocido como el pingüino hada, es el pingüino más pequeño del mundo. [Haz clic aquí](https://en.wikipedia.org/wiki/Little_penguin) para más información.
> El pingüino pequeño, a veces conocido como el pingüino hada, es el pingüino más pequeño del mundo. Visita https://en.wikipedia.org/wiki/Little_penguin para más información.
> **NOTE** Como estás a punto de leer, **nunca** deberías crear enlaces que se vean como los anteriores.
Recuerda, los lectores de pantalla son una interfaz diferente a los navegadores con un conjunto diferente de características.
### El problema de usar la URL
Los lectores de pantalla leen el texto. Si una URL aparece en el texto, el lector de pantalla leerá la URL. En general, la URL no transmite información significativa y puede sonar molesta. Es posible que hayas experimentado esto si tu teléfono alguna vez ha leído en voz alta un mensaje de texto con una URL.
### El problema de "haz clic aquí"
Los lectores de pantalla también tienen la capacidad de leer solo los hipervínculos en una página, de manera similar a como una persona con visión escanea una página en busca de enlaces. Si el texto del enlace siempre es "haz clic aquí", todo lo que el usuario escuchará será "haz clic aquí, haz clic aquí, haz clic aquí, haz clic aquí, haz clic aquí, ...". Todos los enlaces ahora son indistinguibles entre sí.
### Buen texto de enlace
Un buen texto de enlace describe brevemente lo que hay al otro lado del enlace. En el ejemplo anterior sobre los pingüinos pequeños, el enlace es a la página de Wikipedia sobre la especie. La frase *pingüinos pequeños* sería un texto de enlace perfecto, ya que deja claro qué aprenderá alguien si hace clic en el enlace: pingüinos pequeños.
> El [pingüino pequeño](https://en.wikipedia.org/wiki/Little_penguin), a veces conocido como el pingüino hada, es el pingüino más pequeño del mundo.
✅ Navega por la web durante unos minutos para encontrar páginas que usen estrategias de enlace poco claras. Compáralas con otros sitios que tengan mejores enlaces. ¿Qué aprendes?
#### Notas sobre motores de búsqueda
Como beneficio adicional por garantizar que tu sitio sea accesible para todos, también ayudarás a los motores de búsqueda a navegar por tu sitio. Los motores de búsqueda usan el texto de los enlaces para aprender los temas de las páginas. Así que usar buen texto de enlace ayuda a todos.
### ARIA
Imagina la siguiente página:
| Producto | Descripción | Ordenar |
| ------------ | ------------------ | ------------ |
| Widget | [Descripción](../../../../1-getting-started-lessons/3-accessibility/') | [Ordenar](../../../../1-getting-started-lessons/3-accessibility/') |
| Súper widget | [Descripción](../../../../1-getting-started-lessons/3-accessibility/') | [Ordenar](../../../../1-getting-started-lessons/3-accessibility/') |
En este ejemplo, duplicar el texto de descripción y ordenar tiene sentido para alguien que usa un navegador. Sin embargo, alguien que usa un lector de pantalla solo escucharía las palabras *descripción* y *ordenar* repetidas sin contexto.
Para apoyar este tipo de escenarios, HTML admite un conjunto de atributos conocidos como [Aplicaciones Ricas de Internet Accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos te permiten proporcionar información adicional a los lectores de pantalla.
> **NOTE**: Como muchos aspectos de HTML, el soporte de navegadores y lectores de pantalla puede variar. Sin embargo, la mayoría de los clientes principales admiten atributos ARIA.
Puedes usar `aria-label` para describir el enlace cuando el formato de la página no lo permite. La descripción para widget podría configurarse como
``` html
<a href="#" aria-label="Widget description">description</a>
```
✅ En general, usar marcado semántico como se describe anteriormente supera el uso de ARIA, pero a veces no hay un equivalente semántico para varios widgets HTML. Un buen ejemplo es un árbol. No hay un equivalente HTML para un árbol, por lo que identificas el `<div>` genérico para este elemento con un rol y valores ARIA adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene más información útil.
```html
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
```
## Imágenes
Es evidente que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Garantizar que las imágenes sean accesibles no requiere mucho trabajo: para eso sirve el atributo `alt`. Todas las imágenes significativas deben tener un `alt` para describir lo que son.
Las imágenes que son puramente decorativas deben tener su atributo `alt` configurado como una cadena vacía: `alt=""`. Esto evita que los lectores de pantalla anuncien innecesariamente la imagen decorativa.
✅ Como era de esperar, los motores de búsqueda tampoco pueden entender lo que hay en una imagen. También usan texto alternativo. Así que, una vez más, garantizar que tu página sea accesible proporciona beneficios adicionales.
## El teclado
Algunos usuarios no pueden usar un ratón o trackpad, y dependen de interacciones con el teclado para moverse de un elemento a otro. Es importante que tu sitio web presente tu contenido en un orden lógico para que un usuario de teclado pueda acceder a cada elemento interactivo mientras avanza por un documento. Si construyes tus páginas web con marcado semántico y usas CSS para estilizar su diseño visual, tu sitio debería ser navegable con teclado, pero es importante probar este aspecto manualmente. Aprende más sobre [estrategias de navegación con teclado](https://webaim.org/techniques/keyboard/).
✅ Ve a cualquier sitio web e intenta navegar por él usando solo tu teclado. ¿Qué funciona, qué no funciona? ¿Por qué?
## Resumen
Una web accesible para algunos no es una verdadera 'world-wide web'. La mejor manera de garantizar que los sitios que creas sean accesibles es incorporar las mejores prácticas de accesibilidad desde el principio. Aunque hay pasos adicionales involucrados, incorporar estas habilidades en tu flujo de trabajo ahora significará que todas las páginas que crees serán accesibles.
---
## 🚀 Desafío
Toma este HTML y reescríbelo para que sea lo más accesible posible, dadas las estrategias que aprendiste.
```html
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">&copy; 2016 Instrument</span>
</div>
</body>
</html>
```
## Cuestionario Posterior a la Clase
[Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
## Revisión y Autoestudio
Muchos gobiernos tienen leyes relacionadas con los requisitos de accesibilidad. Investiga las leyes de accesibilidad de tu país. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web gubernamental](https://accessibility.blog.gov.uk/).
## Tarea
[Analiza un sitio web no accesible](assignment.md)
Créditos: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

27
translations/es/1-getting-started-lessons/3-accessibility/assignment.md Normal file
View File

@@ -0,0 +1,27 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a258597a194e77d4fd469b3cd976b29e",
"translation_date": "2025-08-24T12:57:02+00:00",
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
"language_code": "es"
}
-->
# Analizar un sitio inaccesible
## Instrucciones
Identifica un sitio web que consideres NO accesible y crea un plan de acción para mejorar su accesibilidad.
Tu primera tarea será identificar este sitio, detallar las formas en que crees que es inaccesible sin usar herramientas analíticas, y luego someterlo a un análisis de Lighthouse. Captura un pdf con los resultados de este análisis y elabora un plan detallado con un mínimo de diez puntos que muestren cómo se podría mejorar el sitio.
## Tabla para evaluar la accesibilidad del sitio
| Criterios | Ejemplar | Adecuado | Necesita Mejorar |
|-----------|----------|----------|------------------|
| | falta <10% de lo requerido | falta 20% de lo requerido | falta 50% de lo requerido |
----
Informe del estudiante: incluye párrafos sobre cuán inaccesible es el sitio, el informe de Lighthouse capturado en pdf, una lista de diez puntos para mejorar, con detalles sobre cómo mejorarlo
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

29
translations/es/1-getting-started-lessons/README.md Normal file
View File

@@ -0,0 +1,29 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "04683f4cfa46004179b0404b89a3065c",
"translation_date": "2025-08-24T12:46:16+00:00",
"source_file": "1-getting-started-lessons/README.md",
"language_code": "es"
}
-->
# Introducción al Desarrollo Web
En esta sección del currículo, se te presentarán conceptos importantes que no están basados en proyectos, pero que son esenciales para convertirte en un desarrollador profesional.
### Temas
1. [Introducción a los Lenguajes de Programación y Herramientas del Oficio](1-intro-to-programming-languages/README.md)
2. [Introducción a GitHub](2-github-basics/README.md)
3. [Fundamentos de Accesibilidad](3-accessibility/README.md)
### Créditos
Introducción a los Lenguajes de Programación y Herramientas del Oficio fue escrito con ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)
Introducción a GitHub fue escrito con ♥️ por [Floor Drees](https://twitter.com/floordrees)
Fundamentos de Accesibilidad fue escrito con ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

213
translations/es/2-js-basics/1-data-types/README.md Normal file
View File

@@ -0,0 +1,213 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "fc6aef8ecfdd5b0ad2afa6e6ba52bfde",
"translation_date": "2025-08-24T12:21:36+00:00",
"source_file": "2-js-basics/1-data-types/README.md",
"language_code": "es"
}
-->
# Conceptos Básicos de JavaScript: Tipos de Datos
![Conceptos Básicos de JavaScript - Tipos de Datos](../../../../sketchnotes/webdev101-js-datatypes.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario Previo a la Clase
[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web.
> Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables en JavaScript")
[![Tipos de Datos en JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Tipos de Datos en JavaScript")
> 🎥 Haz clic en las imágenes de arriba para ver videos sobre variables y tipos de datos.
¡Comencemos con las variables y los tipos de datos que las llenan!
## Variables
Las variables almacenan valores que pueden ser utilizados y modificados a lo largo de tu código.
Crear y **declarar** una variable tiene la siguiente sintaxis **[palabra clave] [nombre]**. Está compuesta por dos partes:
- **Palabra clave**. Las palabras clave pueden ser `let` o `var`.
✅ La palabra clave `let` fue introducida en ES6 y le da a tu variable un llamado _alcance de bloque_. Se recomienda usar `let` en lugar de `var`. Cubriremos los alcances de bloque más a fondo en partes futuras.
- **El nombre de la variable**, este es un nombre que eliges tú mismo.
### Tarea - Trabajando con Variables
1. **Declara una variable**. Declaremos una variable usando la palabra clave `let`:
```javascript
let myVariable;
```
`myVariable` ha sido declarada usando la palabra clave `let`. Actualmente no tiene un valor.
1. **Asigna un valor**. Almacena un valor en una variable con el operador `=`, seguido del valor esperado.
```javascript
myVariable = 123;
```
> Nota: el uso de `=` en esta lección significa que estamos utilizando un "operador de asignación", usado para establecer un valor a una variable. No denota igualdad.
`myVariable` ahora ha sido *inicializada* con el valor 123.
1. **Refactoriza**. Reemplaza tu código con la siguiente declaración.
```javascript
let myVariable = 123;
```
Lo anterior se llama una _inicialización explícita_ cuando una variable es declarada y se le asigna un valor al mismo tiempo.
1. **Cambia el valor de la variable**. Cambia el valor de la variable de la siguiente manera:
```javascript
myVariable = 321;
```
Una vez que una variable es declarada, puedes cambiar su valor en cualquier momento en tu código con el operador `=` y el nuevo valor.
✅ ¡Pruébalo! Puedes escribir JavaScript directamente en tu navegador. Abre una ventana del navegador y navega a las Herramientas de Desarrollador. En la consola, encontrarás un prompt; escribe `let myVariable = 123`, presiona enter, luego escribe `myVariable`. ¿Qué sucede? Nota, aprenderás más sobre estos conceptos en lecciones posteriores.
## Constantes
La declaración e inicialización de una constante sigue los mismos conceptos que una variable, con la excepción de la palabra clave `const`. Las constantes suelen declararse con letras mayúsculas.
```javascript
const MY_VARIABLE = 123;
```
Las constantes son similares a las variables, con dos excepciones:
- **Debe tener un valor**. Las constantes deben ser inicializadas, o se producirá un error al ejecutar el código.
- **La referencia no puede cambiarse**. La referencia de una constante no puede cambiarse una vez inicializada, o se producirá un error al ejecutar el código. Veamos dos ejemplos:
- **Valor simple**. Lo siguiente NO está permitido:
```javascript
const PI = 3;
PI = 4; // not allowed
```
- **La referencia del objeto está protegida**. Lo siguiente NO está permitido.
```javascript
const obj = { a: 3 };
obj = { b: 5 } // not allowed
```
- **El valor del objeto no está protegido**. Lo siguiente SÍ está permitido:
```javascript
const obj = { a: 3 };
obj.a = 5; // allowed
```
Arriba estás cambiando el valor del objeto pero no la referencia en sí, lo cual está permitido.
> Nota, un `const` significa que la referencia está protegida contra reasignación. Sin embargo, el valor no es _inmutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
## Tipos de Datos
Las variables pueden almacenar muchos tipos diferentes de valores, como números y texto. Estos diversos tipos de valores se conocen como **tipo de dato**. Los tipos de datos son una parte importante del desarrollo de software porque ayudan a los desarrolladores a tomar decisiones sobre cómo debe escribirse el código y cómo debe ejecutarse el software. Además, algunos tipos de datos tienen características únicas que ayudan a transformar o extraer información adicional de un valor.
✅ Los tipos de datos también se conocen como primitivas de datos de JavaScript, ya que son los tipos de datos de nivel más bajo que proporciona el lenguaje. Hay 7 tipos de datos primitivos: string, number, bigint, boolean, undefined, null y symbol. Tómate un minuto para visualizar lo que cada una de estas primitivas podría representar. ¿Qué es un `zebra`? ¿Qué tal `0`? ¿`true`?
### Números
En la sección anterior, el valor de `myVariable` era un tipo de dato numérico.
`let myVariable = 123;`
Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también pueden usarse con operadores aritméticos, cubiertos en la [siguiente sección](../../../../2-js-basics/1-data-types).
### Operadores Aritméticos
Hay varios tipos de operadores para usar al realizar funciones aritméticas, y algunos se enumeran aquí:
| Símbolo | Descripción | Ejemplo |
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
| `+` | **Suma**: Calcula la suma de dos números | `1 + 2 //respuesta esperada es 3` |
| `-` | **Resta**: Calcula la diferencia de dos números | `1 - 2 //respuesta esperada es -1` |
| `*` | **Multiplicación**: Calcula el producto de dos números | `1 * 2 //respuesta esperada es 2` |
| `/` | **División**: Calcula el cociente de dos números | `1 / 2 //respuesta esperada es 0.5` |
| `%` | **Resto**: Calcula el resto de la división de dos números | `1 % 2 //respuesta esperada es 1` |
✅ ¡Pruébalo! Intenta una operación aritmética en la consola de tu navegador. ¿Te sorprenden los resultados?
### Cadenas de Texto (Strings)
Las cadenas de texto son conjuntos de caracteres que se encuentran entre comillas simples o dobles.
- `'Esto es una cadena de texto'`
- `"Esto también es una cadena de texto"`
- `let myString = 'Esto es un valor de cadena de texto almacenado en una variable';`
Recuerda usar comillas al escribir una cadena de texto, de lo contrario JavaScript asumirá que es un nombre de variable.
### Formateo de Cadenas de Texto
Las cadenas de texto son textuales y requerirán formateo de vez en cuando.
Para **concatenar** dos o más cadenas de texto, o unirlas, usa el operador `+`.
```javascript
let myString1 = "Hello";
let myString2 = "World";
myString1 + myString2 + "!"; //HelloWorld!
myString1 + " " + myString2 + "!"; //Hello World!
myString1 + ", " + myString2 + "!"; //Hello, World!
```
✅ ¿Por qué `1 + 1 = 2` en JavaScript, pero `'1' + '1' = 11?` Piénsalo. ¿Qué pasa con `'1' + 1`?
**Literales de plantilla** son otra forma de formatear cadenas de texto, excepto que en lugar de comillas, se usa el acento grave. Cualquier cosa que no sea texto plano debe colocarse dentro de los marcadores `${ }`. Esto incluye cualquier variable que pueda ser una cadena de texto.
```javascript
let myString1 = "Hello";
let myString2 = "World";
`${myString1} ${myString2}!` //Hello World!
`${myString1}, ${myString2}!` //Hello, World!
```
Puedes lograr tus objetivos de formateo con cualquiera de los métodos, pero los literales de plantilla respetarán cualquier espacio y salto de línea.
✅ ¿Cuándo usarías un literal de plantilla en lugar de una cadena de texto simple?
### Booleanos
Los booleanos solo pueden tener dos valores: `true` o `false`. Los booleanos pueden ayudar a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones. En muchos casos, los [operadores](../../../../2-js-basics/1-data-types) ayudan a establecer el valor de un booleano y a menudo notarás y escribirás variables que se inicializan o cuyos valores se actualizan con un operador.
- `let myTrueBool = true`
- `let myFalseBool = false`
✅ Una variable puede considerarse 'verdadera' si se evalúa como un booleano `true`. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
---
## 🚀 Desafío
JavaScript es famoso por sus formas sorprendentes de manejar tipos de datos en ocasiones. Investiga un poco sobre estos 'problemas'. Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede ser un problema! Intenta esto en tu consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` -- ¿por qué?). ¿Qué otros problemas puedes encontrar?
## Cuestionario Posterior a la Clase
[Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
## Repaso y Estudio Personal
Echa un vistazo a [esta lista de ejercicios de JavaScript](https://css-tricks.com/snippets/javascript/) y prueba uno. ¿Qué aprendiste?
## Tarea
[Práctica de Tipos de Datos](assignment.md)
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

23
translations/es/2-js-basics/1-data-types/assignment.md Normal file
View File

@@ -0,0 +1,23 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3869244ceda606c4969d8cdd82679867",
"translation_date": "2025-08-24T12:23:59+00:00",
"source_file": "2-js-basics/1-data-types/assignment.md",
"language_code": "es"
}
-->
# Práctica de Tipos de Datos
## Instrucciones
Imagina que estás creando un carrito de compras. Escribe algo de documentación sobre los tipos de datos que necesitarías para completar tu experiencia de compra. ¿Cómo llegaste a tus elecciones?
## Rúbrica
Criterios | Ejemplar | Adecuado | Necesita Mejorar
--- | --- | --- | --- |
||Se enumeran y exploran en detalle los seis tipos de datos, documentando su uso|Se exploran cuatro tipos de datos|Se exploran dos tipos de datos|
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

208
translations/es/2-js-basics/2-functions-methods/README.md Normal file
View File

@@ -0,0 +1,208 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
"translation_date": "2025-08-24T12:15:52+00:00",
"source_file": "2-js-basics/2-functions-methods/README.md",
"language_code": "es"
}
-->
# Conceptos básicos de JavaScript: Métodos y Funciones
![Conceptos básicos de JavaScript - Funciones](../../../../sketchnotes/webdev101-js-functions.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario previo a la clase
[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
Cuando pensamos en escribir código, siempre queremos asegurarnos de que sea legible. Aunque suene contradictorio, el código se lee muchas más veces de lo que se escribe. Una herramienta clave en el arsenal de un desarrollador para garantizar un código mantenible es la **función**.
[![Métodos y Funciones](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos y Funciones")
> 🎥 Haz clic en la imagen de arriba para ver un video sobre métodos y funciones.
> Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
## Funciones
En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en múltiples ubicaciones (lo que dificultaría su actualización en el futuro), podemos centralizarla en un solo lugar y llamarla cuando necesitemos realizar la operación; incluso puedes llamar funciones desde otras funciones.
Igual de importante es la capacidad de nombrar una función. Aunque pueda parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Puedes pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que detendrá el reloj.
## Crear y llamar a una función
La sintaxis de una función se ve de la siguiente manera:
```javascript
function nameOfFunction() { // function definition
// function definition/body
}
```
Si quisiera crear una función para mostrar un saludo, podría verse así:
```javascript
function displayGreeting() {
console.log('Hello, world!');
}
```
Siempre que queramos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de `()`. Vale la pena señalar que nuestra función puede definirse antes o después de decidir llamarla; el compilador de JavaScript la encontrará por ti.
```javascript
// calling our function
displayGreeting();
```
> **NOTE:** Existe un tipo especial de función conocida como **método**, ¡que ya has estado usando! De hecho, lo vimos en nuestra demostración anterior cuando usamos `console.log`. Lo que diferencia un método de una función es que un método está adjunto a un objeto (`console` en nuestro ejemplo), mientras que una función es independiente. Escucharás a muchos desarrolladores usar estos términos indistintamente.
### Mejores prácticas para funciones
Hay algunas mejores prácticas que debes tener en cuenta al crear funciones:
- Como siempre, usa nombres descriptivos para saber qué hará la función.
- Usa **camelCasing** para combinar palabras.
- Mantén tus funciones enfocadas en una tarea específica.
## Pasar información a una función
Para hacer que una función sea más reutilizable, a menudo querrás pasarle información. Si consideramos nuestro ejemplo de `displayGreeting` anterior, solo mostrará **Hello, world!**. No es la función más útil que uno podría crear. Si queremos hacerla un poco más flexible, como permitir que alguien especifique el nombre de la persona a saludar, podemos agregar un **parámetro**. Un parámetro (a veces también llamado **argumento**) es información adicional enviada a una función.
Los parámetros se enumeran en la parte de definición dentro de paréntesis y están separados por comas, como se muestra a continuación:
```javascript
function name(param, param2, param3) {
}
```
Podemos actualizar nuestro `displayGreeting` para aceptar un nombre y mostrarlo.
```javascript
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
```
Cuando queramos llamar a nuestra función y pasarle el parámetro, lo especificamos en los paréntesis.
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
```
## Valores predeterminados
Podemos hacer que nuestra función sea aún más flexible agregando más parámetros. Pero, ¿qué pasa si no queremos que se especifique cada valor? Siguiendo con nuestro ejemplo de saludo, podríamos dejar el nombre como obligatorio (necesitamos saber a quién estamos saludando), pero queremos permitir que el saludo en sí se personalice según se desee. Si alguien no quiere personalizarlo, proporcionamos un valor predeterminado en su lugar. Para proporcionar un valor predeterminado a un parámetro, lo configuramos de la misma manera que configuramos un valor para una variable: `parameterName = 'defaultValue'`. Para ver un ejemplo completo:
```javascript
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
```
Cuando llamamos a la función, podemos decidir si queremos establecer un valor para `salutation`.
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
```
## Valores de retorno
Hasta ahora, la función que hemos creado siempre se mostrará en la [consola](https://developer.mozilla.org/docs/Web/API/console). A veces esto puede ser exactamente lo que buscamos, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y proporcionar el valor de vuelta para que pueda usarlo en otro lugar?
Podemos hacer esto utilizando un **valor de retorno**. Un valor de retorno es devuelto por la función y puede almacenarse en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.
Si una función devuelve algo, entonces se utiliza la palabra clave `return`. La palabra clave `return` espera un valor o referencia de lo que se está devolviendo, como se muestra a continuación:
```javascript
return myVariable;
```
Podríamos crear una función para crear un mensaje de saludo y devolver el valor al que lo llama.
```javascript
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
```
Cuando llamemos a esta función, almacenaremos el valor en una variable. Esto es muy similar a cómo estableceríamos una variable con un valor estático (como `const name = 'Christopher'`).
```javascript
const greetingMessage = createGreetingMessage('Christopher');
```
## Funciones como parámetros para funciones
A medida que avances en tu carrera de programación, te encontrarás con funciones que aceptan funciones como parámetros. Este truco ingenioso se usa comúnmente cuando no sabemos cuándo ocurrirá o se completará algo, pero sabemos que necesitamos realizar una operación en respuesta.
Como ejemplo, considera [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), que inicia un temporizador y ejecutará código cuando se complete. Necesitamos decirle qué código queremos ejecutar. ¡Suena como un trabajo perfecto para una función!
Si ejecutas el código a continuación, después de 3 segundos verás el mensaje **Han pasado 3 segundos**.
```javascript
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);
```
### Funciones anónimas
Echemos otro vistazo a lo que hemos construido. Estamos creando una función con un nombre que se usará una sola vez. A medida que nuestra aplicación se vuelve más compleja, podemos vernos creando muchas funciones que solo se llamarán una vez. Esto no es ideal. Como resulta, ¡no siempre necesitamos proporcionar un nombre!
Cuando pasamos una función como parámetro, podemos omitir crear una de antemano y, en su lugar, construirla como parte del parámetro. Usamos la misma palabra clave `function`, pero en su lugar la construimos como un parámetro.
Reescribamos el código anterior para usar una función anónima:
```javascript
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
```
Si ejecutas nuestro nuevo código, notarás que obtenemos los mismos resultados. Hemos creado una función, ¡pero no tuvimos que darle un nombre!
### Funciones de flecha
Un atajo común en muchos lenguajes de programación (incluido JavaScript) es la capacidad de usar lo que se llama una **función de flecha** o **función de flecha gorda**. Utiliza un indicador especial `=>`, que parece una flecha, ¡de ahí el nombre! Al usar `=>`, podemos omitir la palabra clave `function`.
Reescribamos nuestro código una vez más para usar una función de flecha:
```javascript
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
```
### Cuándo usar cada estrategia
Ahora has visto que tenemos tres formas de pasar una función como parámetro y podrías preguntarte cuándo usar cada una. Si sabes que usarás la función más de una vez, créala de forma normal. Si la usarás solo en una ubicación, generalmente es mejor usar una función anónima. Si usarás una función de flecha o la sintaxis más tradicional de `function` depende de ti, pero notarás que la mayoría de los desarrolladores modernos prefieren `=>`.
---
## 🚀 Desafío
¿Puedes articular en una oración la diferencia entre funciones y métodos? ¡Inténtalo!
## Cuestionario posterior a la clase
[Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
## Repaso y autoestudio
Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se usan cada vez más en bases de código. Practica escribiendo una función y luego reescribiéndola con esta sintaxis.
## Tarea
[Diviértete con las funciones](assignment.md)
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

25
translations/es/2-js-basics/2-functions-methods/assignment.md Normal file
View File

@@ -0,0 +1,25 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8973f96157680a13e9446e4bb540ee57",
"translation_date": "2025-08-24T12:18:12+00:00",
"source_file": "2-js-basics/2-functions-methods/assignment.md",
"language_code": "es"
}
-->
# Diversión con Funciones
## Instrucciones
Crea diferentes funciones, tanto funciones que devuelvan algo como funciones que no devuelvan nada.
Intenta crear una función que tenga una mezcla de parámetros y parámetros con valores predeterminados.
## Rúbrica
| Criterios | Ejemplar | Adecuado | Necesita Mejora |
| --------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
| | Se ofrece una solución con dos o más funciones bien diseñadas y con parámetros diversos | Se ofrece una solución funcional con una función y pocos parámetros | La solución tiene errores |
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

230
translations/es/2-js-basics/3-making-decisions/README.md Normal file
View File

@@ -0,0 +1,230 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "888609c48329c280ca2477d2df40f2e5",
"translation_date": "2025-08-24T12:12:45+00:00",
"source_file": "2-js-basics/3-making-decisions/README.md",
"language_code": "es"
}
-->
# Conceptos Básicos de JavaScript: Tomando Decisiones
![Conceptos Básicos de JavaScript - Tomando decisiones](../../../../sketchnotes/webdev101-js-decisions.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario Previo a la Clase
[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
Tomar decisiones y controlar el orden en que se ejecuta tu código hace que este sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia al usarse con tipos de datos Booleanos.
[![Tomando Decisiones](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Tomando Decisiones")
> 🎥 Haz clic en la imagen de arriba para ver un video sobre cómo tomar decisiones.
> Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
## Un Breve Repaso sobre los Booleanos
Los valores booleanos solo pueden tener dos valores: `true` o `false`. Los booleanos ayudan a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones.
Define tu booleano como verdadero o falso de esta manera:
`let myTrueBool = true`
`let myFalseBool = false`
✅ Los booleanos llevan su nombre en honor al matemático, filósofo y lógico inglés George Boole (1815–1864).
## Operadores de Comparación y Booleanos
Los operadores se utilizan para evaluar condiciones haciendo comparaciones que generarán un valor booleano. A continuación, se muestra una lista de operadores que se usan con frecuencia.
| Símbolo | Descripción | Ejemplo |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **Menor que**: Compara dos valores y devuelve el valor booleano `true` si el valor del lado izquierdo es menor que el del derecho | `5 < 6 // true` |
| `<=` | **Menor o igual que**: Compara dos valores y devuelve el valor booleano `true` si el valor del lado izquierdo es menor o igual que el del derecho | `5 <= 6 // true` |
| `>` | **Mayor que**: Compara dos valores y devuelve el valor booleano `true` si el valor del lado izquierdo es mayor que el del derecho | `5 > 6 // false` |
| `>=` | **Mayor o igual que**: Compara dos valores y devuelve el valor booleano `true` si el valor del lado izquierdo es mayor o igual que el del derecho | `5 >= 6 // false` |
| `===` | **Igualdad estricta**: Compara dos valores y devuelve el valor booleano `true` si los valores del lado derecho e izquierdo son iguales Y del mismo tipo de dato | `5 === 6 // false` |
| `!==` | **Desigualdad**: Compara dos valores y devuelve el valor booleano opuesto al que devolvería un operador de igualdad estricta | `5 !== 6 // true` |
✅ Pon a prueba tus conocimientos escribiendo algunas comparaciones en la consola de tu navegador. ¿Algún resultado te sorprende?
## Declaración If
La declaración `if` ejecutará el código dentro de sus bloques si la condición es verdadera.
```javascript
if (condition) {
//Condition is true. Code in this block will run.
}
```
Los operadores lógicos se usan a menudo para formar la condición.
```javascript
let currentMoney;
let laptopPrice;
if (currentMoney >= laptopPrice) {
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
}
```
## Declaración If..Else
La declaración `else` ejecutará el código dentro de sus bloques cuando la condición sea falsa. Es opcional con una declaración `if`.
```javascript
let currentMoney;
let laptopPrice;
if (currentMoney >= laptopPrice) {
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
//Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```
✅ Pon a prueba tu comprensión de este código y del siguiente ejecutándolo en la consola de un navegador. Cambia los valores de las variables `currentMoney` y `laptopPrice` para modificar el resultado de `console.log()`.
## Declaración Switch
La declaración `switch` se utiliza para realizar diferentes acciones según diferentes condiciones. Usa la declaración `switch` para seleccionar uno de varios bloques de código que se ejecutarán.
```javascript
switch (expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
```
```javascript
// program using switch statement
let a = 2;
switch (a) {
case 1:
a = "one";
break;
case 2:
a = "two";
break;
default:
a = "not found";
break;
}
console.log(`The value is ${a}`);
```
✅ Pon a prueba tu comprensión de este código y del siguiente ejecutándolo en la consola de un navegador. Cambia los valores de la variable `a` para modificar el resultado de `console.log()`.
## Operadores Lógicos y Booleanos
Las decisiones pueden requerir más de una comparación y pueden encadenarse con operadores lógicos para producir un valor booleano.
| Símbolo | Descripción | Ejemplo |
| ------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `&&` | **Y lógico**: Compara dos expresiones booleanas. Devuelve `true` **solo** si ambos lados son verdaderos | `(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve false` |
| `\|\|` | **O lógico**: Compara dos expresiones booleanas. Devuelve `true` si al menos un lado es verdadero | `(5 > 6) \|\| (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve true` |
| `!` | **NO lógico**: Devuelve el valor opuesto de una expresión booleana | `!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá true` |
## Condiciones y Decisiones con Operadores Lógicos
Los operadores lógicos pueden usarse para formar condiciones en declaraciones `if..else`.
```javascript
let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
//Condition is true. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```
### Operador de Negación
Hasta ahora has visto cómo puedes usar una declaración `if...else` para crear lógica condicional. Todo lo que se incluya en un `if` debe evaluarse como verdadero o falso. Usando el operador `!` puedes _negar_ la expresión. Se vería así:
```javascript
if (!condition) {
// runs if condition is false
} else {
// runs if condition is true
}
```
### Expresiones Ternarias
`if...else` no es la única forma de expresar lógica de decisión. También puedes usar algo llamado operador ternario. La sintaxis es la siguiente:
```javascript
let variable = condition ? <return this if true> : <return this if false>
```
A continuación, un ejemplo más tangible:
```javascript
let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```
✅ Tómate un minuto para leer este código varias veces. ¿Entiendes cómo funcionan estos operadores?
Lo anterior establece que:
- si `firstNumber` es mayor que `secondNumber`
- entonces asigna `firstNumber` a `biggestNumber`
- de lo contrario, asigna `secondNumber`.
La expresión ternaria es solo una forma compacta de escribir el siguiente código:
```javascript
let biggestNumber;
if (firstNumber > secondNumber) {
biggestNumber = firstNumber;
} else {
biggestNumber = secondNumber;
}
```
---
## 🚀 Desafío
Crea un programa que primero esté escrito con operadores lógicos y luego reescríbelo usando una expresión ternaria. ¿Cuál es tu sintaxis preferida?
---
## Cuestionario Posterior a la Clase
[Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
## Revisión y Autoestudio
Lee más sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
¡Explora el maravilloso [buscador de operadores](https://joshwcomeau.com/operator-lookup/) de Josh Comeau!
## Tarea
[Operadores](assignment.md)
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

52
translations/es/2-js-basics/3-making-decisions/assignment.md Normal file
View File

@@ -0,0 +1,52 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
"translation_date": "2025-08-24T12:14:49+00:00",
"source_file": "2-js-basics/3-making-decisions/assignment.md",
"language_code": "es"
}
-->
# Operadores
## Instrucciones
Experimenta con operadores. Aquí tienes una sugerencia para un programa que puedes implementar:
Tienes un conjunto de estudiantes de dos sistemas de calificación diferentes.
### Primer sistema de calificación
Un sistema de calificación está definido con notas del 1 al 5, donde 3 y superiores significan que apruebas el curso.
### Segundo sistema de calificación
El otro sistema de calificación tiene las siguientes notas: `A, A-, B, B-, C, C-`, donde `A` es la mejor nota y `C` es la nota más baja para aprobar.
### La tarea
Dado el siguiente arreglo `allStudents` que representa a todos los estudiantes y sus calificaciones, construye un nuevo arreglo `studentsWhoPass` que contenga a todos los estudiantes que aprueban.
> TIP, utiliza un bucle for, if...else y operadores de comparación:
```javascript
let allStudents = [
'A',
'B-',
1,
4,
5,
2
]
let studentsWhoPass = [];
```
## Rúbrica
| Criterios | Ejemplar | Adecuado | Necesita Mejoras |
| --------- | ----------------------------- | ----------------------------- | ------------------------------- |
| | Se presenta una solución completa | Se presenta una solución parcial | Se presenta una solución con errores |
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

145
translations/es/2-js-basics/4-arrays-loops/README.md Normal file
View File

@@ -0,0 +1,145 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "3f7f87871312cf6cc12662da7d973182",
"translation_date": "2025-08-24T12:18:55+00:00",
"source_file": "2-js-basics/4-arrays-loops/README.md",
"language_code": "es"
}
-->
# Conceptos básicos de JavaScript: Arrays y Bucles
![Conceptos básicos de JavaScript - Arrays](../../../../sketchnotes/webdev101-js-arrays.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Cuestionario previo a la lección
[Cuestionario previo a la lección](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderás sobre arrays y bucles, que se utilizan para manipular datos.
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
[![Bucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Bucles")
> 🎥 Haz clic en las imágenes de arriba para ver videos sobre arrays y bucles.
> Puedes tomar esta lección en [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
## Arrays
Trabajar con datos es una tarea común en cualquier lenguaje, y es mucho más fácil cuando los datos están organizados en un formato estructurado, como los arrays. Con los arrays, los datos se almacenan en una estructura similar a una lista. Una gran ventaja de los arrays es que puedes almacenar diferentes tipos de datos en un solo array.
✅ ¡Los arrays están por todas partes! ¿Puedes pensar en un ejemplo de la vida real de un array, como un conjunto de paneles solares?
La sintaxis de un array es un par de corchetes.
```javascript
let myArray = [];
```
Este es un array vacío, pero los arrays pueden declararse ya poblados con datos. Los valores múltiples en un array se separan con una coma.
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
A los valores del array se les asigna un valor único llamado **índice**, un número entero que se asigna según su distancia desde el inicio del array. En el ejemplo anterior, el valor de cadena "Chocolate" tiene un índice de 0, y el índice de "Rocky Road" es 4. Usa el índice con corchetes para recuperar, cambiar o insertar valores en el array.
✅ ¿Te sorprende que los arrays comiencen en el índice cero? En algunos lenguajes de programación, los índices comienzan en 1. Hay una historia interesante detrás de esto, que puedes [leer en Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
```
Puedes usar el índice para cambiar un valor, así:
```javascript
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
```
Y puedes insertar un nuevo valor en un índice dado de esta manera:
```javascript
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
```
✅ Una forma más común de agregar valores a un array es utilizando operadores como array.push()
Para saber cuántos elementos hay en un array, usa la propiedad `length`.
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
```
✅ ¡Pruébalo tú mismo! Usa la consola de tu navegador para crear y manipular un array de tu propia creación.
## Bucles
Los bucles nos permiten realizar tareas repetitivas o **iterativas**, y pueden ahorrar mucho tiempo y código. Cada iteración puede variar en sus variables, valores y condiciones. Hay diferentes tipos de bucles en JavaScript, y todos tienen pequeñas diferencias, pero esencialmente hacen lo mismo: recorrer datos.
### Bucle For
El bucle `for` requiere 3 partes para iterar:
- `contador` Una variable que generalmente se inicializa con un número que cuenta el número de iteraciones
- `condición` Expresión que utiliza operadores de comparación para detener el bucle cuando sea `false`
- `expresión de iteración` Se ejecuta al final de cada iteración, generalmente se usa para cambiar el valor del contador
```javascript
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Ejecuta este código en la consola de un navegador. ¿Qué sucede cuando haces pequeños cambios al contador, la condición o la expresión de iteración? ¿Puedes hacer que funcione al revés, creando una cuenta regresiva?
### Bucle While
A diferencia de la sintaxis del bucle `for`, los bucles `while` solo requieren una condición que detendrá el bucle cuando la condición se vuelva `false`. Las condiciones en los bucles generalmente dependen de otros valores como contadores, y deben gestionarse durante el bucle. Los valores iniciales para los contadores deben crearse fuera del bucle, y cualquier expresión para cumplir una condición, incluido el cambio del contador, debe mantenerse dentro del bucle.
```javascript
//Counting up to 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
```
✅ ¿Por qué elegirías un bucle for en lugar de un bucle while? 17,000 personas tuvieron la misma pregunta en StackOverflow, y algunas de las opiniones [podrían interesarte](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
## Bucles y Arrays
Los arrays se usan a menudo con bucles porque la mayoría de las condiciones requieren la longitud del array para detener el bucle, y el índice también puede ser el valor del contador.
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed
```
✅ Experimenta recorriendo un array de tu propia creación en la consola de tu navegador.
---
## 🚀 Desafío
Existen otras formas de recorrer arrays además de los bucles for y while. Hay [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) y [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Reescribe tu bucle de array utilizando una de estas técnicas.
## Cuestionario posterior a la lección
[Cuestionario posterior a la lección](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
## Repaso y autoestudio
Los arrays en JavaScript tienen muchos métodos asociados que son extremadamente útiles para la manipulación de datos. [Lee sobre estos métodos](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) y prueba algunos de ellos (como push, pop, slice y splice) en un array de tu creación.
## Tarea
[Recorrer un Array](assignment.md)
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

Some files were not shown because too many files have changed in this diff Show More