JavaScript lernen: kostenloser Kurs für Einsteiger mit 30-Tage-Plan

JavaScript ist die einzige Programmiersprache, die jeder Browser von Haus aus ausführt. JavaScript zu lernen heißt deshalb, eine Webseite lebendig zu machen: auf einen Klick reagieren, ein Formular prüfen, Daten nachladen, ohne die Seite neu zu laden. Dieser Guide ist der Einstieg in das JavaScript-Tutorial von Gekkode: Er sagt dir, wo du anfängst, in welcher Reihenfolge du weitergehst, wie viel Zeit du einplanen solltest und woran du merkst, dass du vorankommst.

Er richtet sich an komplette Anfänger genauso wie an alle, die schon einmal JavaScript kopiert haben, ohne es wirklich zu verstehen. Programmierkenntnisse sind nicht nötig. Der Kurs ist kostenlos, auf Deutsch, und jedes Kapitel endet mit einer Übung.

Warum sich JavaScript heute lohnt

Drei praktische Gründe, ohne Marketing-Gerede:

• Es steckt überall im Web. Eine kleine Firmenseite, ein Onlineshop, eine Fachanwendung: Sobald eine Seite mehr tut, als Text anzuzeigen, steckt JavaScript dahinter. Es ist die Sprache des Browsers, und der Browser ist die am weitesten verbreitete Laufzeitumgebung der Welt.
• Es hört nicht am Browser auf. Mit Node.js schreibt dieselbe Sprache Server, Kommandozeilen-Werkzeuge und Automatisierungsskripte. Du lernst nicht eine Sprache fürs Frontend und eine zweite für den Rest.
• Die Rückmeldung kommt sofort. Du schreibst drei Zeilen, lädst die Seite neu und siehst das Ergebnis. Kein Kompilieren, keine komplizierte Installation: Eine Textdatei und ein Browser reichen für den Anfang.

Code-Assistenten haben eine Sache verändert: Sie schreiben schnell passables JavaScript. Nichts geändert haben sie daran, dass man diesen Code verstehen muss, um ihn zu korrigieren, zu lesen und weiterzuentwickeln. Die Grundlagen bleiben die beste Investition.

Was du vor dem Start wissen solltest

Das Nötigste, mehr nicht:

• Ein wenig HTML und CSS. Wissen, was ein Tag, ein Attribut, eine Klasse ist. Falls nicht, reicht ein Tag mit den HTML-Grundlagen, um diesem Kurs zu folgen; Layout musst du nicht beherrschen.
• Einen Code-Editor. Visual Studio Code ist kostenlos und färbt JavaScript ohne jede Einstellung ein. Jeder Editor für reinen Text tut es genauso.
• Einen aktuellen Browser mit seiner Entwicklerkonsole (Taste F12). Die Konsole ist dein erstes Werkzeug: Sie zeigt die Ergebnisse an und vor allem die Fehler, mit der Nummer der fehlerhaften Zeile.

Node.js, npm oder ein Framework musst du für die zwölf Kapitel nicht installieren. Diese Werkzeuge kommen, wenn du schon programmieren kannst.

Der Kurs Schritt für Schritt: zwölf Kapitel der Reihe nach

Das Programm folgt einer bewussten Progression: Jedes Kapitel benutzt nur, was die vorherigen eingeführt haben. Rechne mit zwanzig bis vierzig Minuten pro Kapitel, Übung inbegriffen.

1. Einführung in JavaScript: wohin ein Skript in einer HTML-Seite gehört, das Tag script, ein erstes „Hello World“ und die Konsole.
2. Variablen und Datentypen: let, const, Zeichenketten, Zahlen, Booleans, undefined und null.
3. Operatoren und Ausdrücke: Arithmetik, Vergleich (=== statt ==), Logik, Verkettung und Template-Strings.
4. Bedingungen: if, else, switch und der ternäre Operator.
5. Schleifen: for, while, for…of und forEach auf Arrays.
6. Funktionen: Deklaration, Parameter, Rückgabewert, Arrow Functions und Gültigkeitsbereich der Variablen.
7. Objekte: Eigenschaften anlegen, lesen, ändern, durchlaufen und löschen.
8. Das Math-Objekt: Runden, Zufallszahlen, Minimum und Maximum.
9. Die HTML-Seite verändern: ein Element auswählen, seinen Text und seine Klassen ändern, Elemente anlegen und entfernen (das DOM).
10. Events: auf einen Klick, auf eine Eingabe, auf das Absenden eines Formulars reagieren, mit addEventListener.
11. ES6-Module: den Code mit import und export auf mehrere Dateien verteilen.
12. Abschlussprojekt: ein Ratespiel: alles Vorherige, zusammengesetzt zu einem kleinen Spiel, das im Browser läuft.

Das vollständige Inhaltsverzeichnis mit deinem Fortschritt bleibt in jedem Kapitel in der linken Spalte sichtbar.

Dein erstes JavaScript-Programm, kommentiert

Vor Kapitel 1 siehst du hier, wie ein vollständiges JavaScript-Programm aussieht. Versuch nicht, alles zu verstehen: Erkenne nur die fünf Ideen, die der Kurs im Einzelnen behandelt.

// 1. Daten: ein Array von Objekten
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Eine Funktion: eine wiederverwendbare Berechnung
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Eine Schleife
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Eine Bedingung
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Eine Ausgabe
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Ergebnis in der Konsole:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Daten, eine Funktion, eine Schleife, eine Bedingung, eine Ausgabe: Jedes Programm, auch ein riesiges, besteht aus diesen Bausteinen. Kapitel 2 beginnt mit dem ersten davon, den Variablen.

Ein Lernplan über dreißig Tage

Dieser Plan geht von einer Stunde pro Tag aus, fünf Tage die Woche. Er ist keine Pflicht: Es ist ein Rhythmus, der Zeit zum Üben lässt, ohne dass du vergisst, was du am Vortag gesehen hast.

Zwei Regeln machen diesen Plan wirksam: die Übung des vorherigen Kapitels wiederholen, bevor du das nächste öffnest, und jedes Beispiel selbst tippen, statt es zu kopieren.

Fünf Übungen für Einsteiger

Zu erledigen in der Browserkonsole oder in einer Datei exercices.js. Die Lösungen kommen mit den Kapiteln 1 bis 7 aus.

1. Umrechner: eine Funktion celsiusVersFahrenheit(c) schreiben, die die umgerechnete Temperatur zurückgibt (Formel: c * 9 / 5 + 32). Prüfen, dass celsiusVersFahrenheit(100) den Wert 212 liefert.
2. Gerade oder ungerade: für jede Zahl von 1 bis 20 „gerade“ oder „ungerade“ in der Konsole ausgeben. Hinweis: Der Operator % liefert den Rest einer Division.
3. Der größte Wert: maximum(tableau) schreiben, das den größten Wert eines Zahlen-Arrays zurückgibt, ohne Math.max zu benutzen.
4. Vokale zählen: compterVoyelles(texte) schreiben; „JavaScript“ muss 3 ergeben.
5. Adressbuch: ein Array aus drei Objekten { nom, ville } anlegen und dann pro Person einen Satz mit einem Template-String ausgeben.

Lösung der Übungen 1, 3 und 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Wenn dir Übung 3 Widerstand geleistet hat, ist das normal: Sie verlangt, während einer Schleife einen Wert zu behalten. Genau diese Fähigkeit vermittelt Kapitel 5.

Wie lange dauert es, JavaScript zu lernen?

Die Frage kommt bei jedem Start, und die ehrliche Antwort hängt davon ab, was „lernen“ heißen soll:

• Ein vorhandenes Skript lesen und ändern: ein bis zwei Wochen bei einer Stunde pro Tag.
• Allein ein kleines interaktives Programm schreiben (Formular, Rechner, einfaches Spiel): drei bis vier Wochen, das ist das Ziel dieses Kurses.
• In einem echten Projekt selbstständig arbeiten, mit entfernten Daten und einem Framework: mehrere Monate regelmäßiger Praxis.

Den Unterschied macht nicht die Zahl der Stunden, sondern ihre Regelmäßigkeit. Dreißig Minuten jeden Tag sind mehr wert als vier Stunden am Sonntag.

JavaScript, Python oder TypeScript?

Python liest sich ganz am Anfang leichter und ist hervorragend für Daten und Skripte. Wenn dein Ziel aber das Web ist, führt an JavaScript kein Weg vorbei: Keine andere Sprache läuft im Browser. Die beiden schließen sich nicht aus; fang mit der an, die zu dem passt, was du bauen willst.

TypeScript ist JavaScript mit Typen. Es kommt danach, nicht an seiner Stelle: Alles, was du hier siehst, gilt auch in TypeScript, und Typen versteht man deutlich besser, wenn man den Fehlern begegnet ist, die sie verhindern.

Kostenlose Ressourcen für danach

• Die MDN-Dokumentation, auf Französisch: die Referenz, die du offen lassen solltest, jede Methode wird dort mit Beispielen erklärt.
• javascript.info, auf Englisch: der vollständigste Onlinekurs, nützlich, sobald du einen Punkt vertiefen willst.
• Die JavaScript-Artikel von Gekkode für die Fortsetzung: die Klassen, bind, call und apply, eine Zeichenkette in eine Zahl umwandeln, eine E-Mail-Adresse mit einer Regex prüfen.
• Und wenn die Sprache sitzt, das Vue-3-Tutorial, um ein Framework kennenzulernen.

Für die Arbeitsmethode ergänzt der Artikel 5 Tipps, um effizient zu lernen diesen Guide.

Häufige Fragen

Muss ich etwas installieren? Nein. Ein Texteditor und ein Browser reichen für die zwölf Kapitel.

Sind Java und JavaScript dasselbe? Nein. Das sind zwei Sprachen ohne Zusammenhang; der Name ist ein historischer Unfall von 1995.

Kann man JavaScript ohne HTML lernen? Die Kapitel 1 bis 8 verlangen fast kein HTML. Ab Kapitel 9 wird es nötig, eine HTML-Seite lesen zu können.

Welchen Browser soll ich nehmen? Chrome, Firefox, Edge oder Safari in einer aktuellen Version. Alle haben eine Entwicklerkonsole und führen das moderne JavaScript dieses Kurses aus.

Wo fange ich an? Mit Kapitel 1, Einführung in JavaScript: zwanzig Minuten bis zur ersten Nachricht in einer Webseite.