Skip to content

README.de.md

Latest commit

 

History

History
298 lines (231 loc) · 15.3 KB

README.de.md

File metadata and controls

298 lines (231 loc) · 15.3 KB
Raw

🇩🇪 Deutsch | 🇬🇧 English

JavaScript Course

Ein projektbasierter Einsteigerkurs in JavaScript, geschrieben, um Kolleginnen und Kollegen, angehenden Azubis und allen anderen Interessierten die Grundlagen der Softwareentwicklung zu vermitteln. Er ist so gedacht, dass man ihn 1:1 weitergeben kann: den Link zu diesem Repository schicken, und alles Nötige für den Einstieg ist bereits da. Programmiererfahrung wird auf Seiten der Lernenden nicht vorausgesetzt. Jedes Kapitel baut auf dem vorherigen auf, und jedes Kapitel hat optionale Vertiefungen für alle, die mehr Herausforderung möchten.

Dieser Kurs existiert auf Deutsch und Englisch, gleichberechtigt nebeneinander: Jedes Kapitel liegt als zwei getrennte Dateien mit demselben Inhalt vor — lies, was dir leichter fällt, und wechsle jederzeit. Code und Code-Kommentare sind dagegen immer auf Englisch geschrieben. Das ist eine bewusste Entscheidung und zugleich eine reale Konvention: Professioneller Code wird unabhängig von der Teamsprache auf Englisch geschrieben, und daran gewöhnt man sich am besten von der ersten Zeile an.

Angefangen bei nichts als den Programmier-Grundlagen aus Kurs 1 zeigt der Abschnitt Kurse weiter unten zu jedem Kurs einen Screenshot dessen, was du tatsächlich baust — scroll durch und sieh zu, wie die Apps Kapitel für Kapitel spürbar mehr können.

Diesen Kurs auf deinen Computer holen

Variante A — ganz ohne Werkzeuge, wenn du gerade erst anfängst:

  1. Geh zu https://github.com/ftrauernicht/javascript-course.
  2. Klick auf den grünen Code-Button → Download ZIP.
  3. Entpack die heruntergeladene ZIP-Datei irgendwo auf deinem Computer (Rechtsklick → Alle extrahieren unter Windows, oder Doppelklick unter Mac).
  4. Öffne den entpackten Ordner. Du hast jetzt alle Dateien, die dieser Kurs braucht.

Variante B — mit Git, falls du es bereits installiert hast:

git clone https://github.com/ftrauernicht/javascript-course.git

So oder so muss nichts installiert oder gebaut werden, und es braucht auch keinen Server. Kurs 1 spielt sich komplett in der Browser-Konsole ab. Kurs 2 genauso — direkt in die Konsole eingetippt (eine optionale Herausforderung gegen Ende lässt dich eine Referenzdatei einfügen). Der Taschenrechner aus Kurs 3 läuft, indem du einfach seine index.html doppelklickst. Die Ausnahmen sind Kurs 10 und Kurs 11, die Node.js installiert brauchen — das steht in beiden gleich am Anfang. Los geht's bei Kurs 1 – Basics, Kapitel 0.

Was du vorher brauchst

Für Kurs 1 muss nichts installiert werden — nur ein Computer und ein aktueller Browser.

Werkzeug Wofür Link
Ein Browser Um die Entwicklerkonsole zu öffnen — unser erster "Code-Editor" Google Chrome, Mozilla Firefox
Ein Texteditor Für Kurs 3 (den GUI-Taschenrechner), um HTML-/CSS-/JS-Dateien zu schreiben Visual Studio Code
Node.js Für Kurs 10-11, um JavaScript außerhalb des Browsers auszuführen nodejs.org

Eine Schritt-für-Schritt-Anleitung (inklusive dem Öffnen der Konsole) steht in Kurs 1 – Basics, Kapitel 0.

Kurse

Dieses Repository ist darauf angelegt, mit der Zeit mehr als einen Kurs zu enthalten. Jeder bekommt unter courses/ seine eigene Nummer, in der Reihenfolge, in der er entstanden ist — ein künftiger Kurs 12 landet also unter courses/12-.../, direkt neben diesen elf, ohne sie anzufassen.

Kurs 1 ist die gemeinsame Grundlage, die jeder spätere Kurs voraussetzt. Kurs 2 bis Kurs 11 sind jeweils unabhängige, eigenständige Projekte, die nur Kurs 1 voraussetzen — keiner setzt einen der anderen voraus. Wähl, was dich mehr reizt, in welcher Reihenfolge du willst.

Kurs 1 – Basics (courses/01-basics/)

Nicht an ein bestimmtes Projekt gebunden — das gemeinsame Vokabular, das jeder spätere Kurs voraussetzt.

# Kapitel Was du lernst
0 Einleitung & Werkzeuge Die Browser-Konsole, ein Texteditor, wie dieser Kurs aufgebaut ist
1 Programmier-Grundlagen Werte, Variablen, Operatoren, die drei Klammerarten, Funktionen, Bedingungen, Schleifen

Kurs 2 – Taschenrechner Konsole (courses/02-calculator-console/)

Setzt nur Kurs 1 voraus. Ein Taschenrechner, komplett in der Browser-Konsole gebaut — keine Dateien, keine Oberfläche.

# Kapitel Was du lernst
1 Taschenrechner in der Konsole Die Bausteine aus Kurs 1 zu einem echten Programm zusammensetzen — plus ein optionaler Klammer-Parser

Kurs 3 – Taschenrechner GUI (courses/03-calculator-gui/)

Setzt nur Kurs 1 voraus (nicht Kurs 2). Dieselbe Idee, mit einer echten, klickbaren Oberfläche.

Die Anzeige des Taschenrechners zeigt 14, nach dem Klicken von 3, +, 4, ×, 2, =

# Kapitel Was du lernst
1 Taschenrechner mit Oberfläche (GUI) HTML-/CSS-/JS-Grundlagen, das DOM, Events und ein sanfter erster Schritt in Richtung OOP (Klassen)

Kurs 4 – To-Do-Liste (courses/04-todo-list/)

Setzt nur Kurs 1 voraus. Eine To-Do-Liste mit Hinzufügen/Abhaken/Entfernen und einem Daten-zu-HTML-Rendering-Muster, das weit über einen einzelnen Taschenrechner-Button hinausgeht.

Die To-Do-Liste mit drei Aufgaben, eine davon abgehakt

# Kapitel Was du lernst
1 To-Do-Liste Objektliterale, Arrays aus Objekten, Daten als HTML rendern, Persistenz mit localStorage

Kurs 5 – Einheitenumrechner (courses/05-unit-converter/)

Setzt nur Kurs 1 voraus. Rechnet Länge, Gewicht und Temperatur zwischen Einheiten um und gibt dir spürbar weniger fertigen Code zum Abtippen als frühere Kurse — der Punkt hier ist, die Umrechnungslogik selbst zu bauen, sobald du die Bausteine dafür hast.

Das Ergebnis zeigt, dass 5 m zu 0.01 km werden

# Kapitel Was du lernst
1 Einheitenumrechner Das Nachschlagetabellen-Muster, Elemente mit document.createElement bauen, eine Funktion verallgemeinern, indem man eine Annahme zu einem Parameter macht

Kurs 6 – Quiz (courses/06-quiz/)

Setzt nur Kurs 1 voraus. Ein Multiple-Choice-Quiz mit Punktestand, Rückmeldung zu jeder Antwort und einem Ergebnisbildschirm — und gibt dir, wie Kurs 5, spürbar weniger fertigen Code als die frühesten Kurse.

Eine richtig beantwortete Frage, grün hervorgehoben

# Kapitel Was du lernst
1 Quiz Klassen als Vorlagen für Objekte, eine Liste von Fragen modellieren, aus Daten neu rendern, ein Feature in kleine benannte Funktionen aufteilen

Kurs 7 – Memory-Spiel (courses/07-memory-game/)

Setzt nur Kurs 1 voraus. Ein Karten-Memory-Spiel mit gemischtem Raster, einer reinen CSS-Flip-Animation und verzögertem Zurückdrehen bei einem Fehlversuch.

Die Gewinnnachricht zeigt, dass das Spiel in 9 Zügen gewonnen wurde, mit jeder Karte zugeordnet

# Kapitel Was du lernst
1 Memory-Spiel Spielzustand als Daten modellieren, der Fisher-Yates-Shuffle, setTimeout, CSS-Übergänge für einen Flip-Effekt

Kurs 8 – Wetter-App (courses/08-weather-app/)

Setzt nur Kurs 1 voraus. Ruft echtes, aktuelles Wetter für eine beliebige eingetippte Stadt ab — der erste Kurs, in dem dein Code mit einer echten, öffentlichen API spricht.

Die Wetter-App zeigt das aktuelle Wetter für Berlin

# Kapitel Was du lernst
1 Wetter-App Promises, async/await, fetch, try...catch, eine echte öffentliche API aufrufen

Kurs 9 – Budget-Tracker (courses/09-budget-tracker/)

Setzt nur Kurs 1 voraus. Erfasst Einnahmen und Ausgaben, mit Kontostand und einer Kategorie-Aufschlüsselung als reinem CSS-Balkendiagramm.

Der Budget-Tracker mit mehreren Einträgen und einer Kategorie-Aufschlüsselung

# Kapitel Was du lernst
1 Budget-Tracker .filter(...), .reduce(...), Object.keys(...), ein reines CSS-Diagramm, komplett aus Daten gesteuert

Kurs 10 – REST-API mit Node.js + Express (courses/10-rest-api/)

Setzt nur Kurs 1 voraus. Baut einen kleinen Server mit Node.js und Express — der erste Kurs, in dem dein JavaScript komplett außerhalb eines Browsers läuft.

# Kapitel Was du lernst
1 REST-API Node.js, npm, Express-Routing, HTTP-Methoden und Statuscodes, eine API mit curl testen

Kurs 11 – Full-Stack-Notizen-App (courses/11-notes-app/)

Setzt nur Kurs 1 voraus. Verbindet zum ersten Mal ein Frontend und ein Backend — eine Notizen-App mit einer echten SQLite-Datenbank dahinter, statt Arbeitsspeicher oder localStorage.

Die Notizen-App mit einer im Editor ausgewählten Notiz

# Kapitel Was du lernst
1 Notizen-App SQL (CREATE TABLE/SELECT/INSERT/UPDATE/DELETE), Nodes eingebautes node:sqlite, ein Frontend und eine API vom selben Express-Server ausliefern (kein CORS)

Es kommen mit der Zeit weitere Kurse dazu; dieser Abschnitt wächst mit.

Projektideen

Sobald du Kurs 2 bis Kurs 11 abgeschlossen hast, findest du in PROJECT-IDEAS.de.md eine sortierte Liste dessen, was als Nächstes gebaut werden könnte — vom naheliegenden nächsten Schritt bis zu etwas wirklich Ambitioniertem. Sie liegt an der Wurzel des Repositories, nicht innerhalb eines einzelnen Kurses, weil jede dieser Ideen der Kurs 12 dieses Repositories werden könnte.

Wie du diesen Kurs nutzt

  1. Lies ein Kapitel von oben nach unten durch.
  2. Tippe die Beispiele selbst ab, statt sie nur zu kopieren — Abtippen baut das Muskelgedächtnis auf, Kopieren baut nur einen Scrollbalken.
  3. Jedes Kapitel hat einen Kernteil (🟢, notwendig, um weiterzumachen) und ein oder mehrere optionale Teile (🟡 solide Zusatzübung, 🔴 eine echte Herausforderung). Die optionalen Teile zu überspringen ist völlig in Ordnung — komm später zurück, wenn du magst.
  4. Innerhalb eines Kurses verwenden spätere Kapitel ausdrücklich Code aus früheren weiter. Über Kurse hinweg wird dagegen nichts außer Kurs 1 vorausgesetzt — Kurs 2 bis Kurs 11 bauen ihre jeweilige Logik bewusst von Grund auf neu, damit sich jeder davon in beliebiger Reihenfolge bearbeiten lässt.
  5. Links innerhalb eines Kapitels führen genau dort, wo ein neuer Begriff auftaucht, zur passenden Seite bei MDN Web Docs (dem Standard-Nachschlagewerk für JavaScript) — statt sie am Ende in einem Glossar zu sammeln. Ist ein Begriff unklar, ist der nächste Link dein Glossar.

Aufbau des Repositories

PROJECT-IDEAS.md / .de.md   Ideen dafür, was ein künftiger Kurs sein könnte
courses/
  01-basics/                 Kurs 1 — allgemein, an kein Projekt gebunden
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
  02-calculator-console/     Kurs 2 — Taschenrechner, in der Konsole
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      Musterlösungen (calculate.js, bracket-parser.js)
  03-calculator-gui/         Kurs 3 — Taschenrechner, mit GUI
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      der lauffähige GUI-Taschenrechner (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  04-todo-list/              Kurs 4 — To-Do-Liste
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      die lauffähige To-Do-Liste (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  05-unit-converter/         Kurs 5 — Einheitenumrechner
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      der lauffähige Einheitenumrechner (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  06-quiz/                   Kurs 6 — Multiple-Choice-Quiz
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      das lauffähige Quiz (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  07-memory-game/            Kurs 7 — Memory-Spiel
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      das lauffähige Memory-Spiel (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  08-weather-app/            Kurs 8 — Wetter-App (fetch, async/await)
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      die lauffähige Wetter-App (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  09-budget-tracker/         Kurs 9 — Budget-Tracker
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      der lauffähige Budget-Tracker (index.html, style.css, script.js)
    assets/                    Screenshots aus dem Kapitel
  10-rest-api/               Kurs 10 — REST-API mit Node.js + Express
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      der lauffähige Server (package.json, server.js) — kein assets/, keine GUI
  11-notes-app/              Kurs 11 — Full-Stack-Notizen-App (Express + SQLite)
    en/                        Kapiteltexte, Englisch
    de/                        Kapiteltexte, Deutsch
    code/                      die lauffähige App (package.json, db.js, server.js, public/)
    assets/                    Screenshots aus dem Kapitel
  12-.../                    künftige Kurse, nach demselben Muster

Mitwirken

Siehe CONTRIBUTING.md.