Abschnitte
Datentypen
| Typ | Beispiel | typeof |
|---|---|---|
| Number | const n = 42; | "number" |
| String | const s = "hallo"; | "string" |
| Boolean | const b = true; | "boolean" |
| Array | const a = [1,2,3]; | "object" |
| Object | const o = {x:1}; | "object" |
| undefined | eine deklarierte Variable ohne zugewiesenen Wert | "undefined" |
| null | const x = null; | "object" |
Variablen: let, const, var
| Schlüsselwort | Neu zuweisbar | Wann verwenden |
|---|---|---|
| const | Nein | Standardwahl — für alles, was sich nicht ändern soll |
| let | Ja | Wenn sich der Wert der Variable definitiv ändern wird |
| var | Ja | Veraltete Option, nicht in neuem Code verwenden |
Vergleichsoperatoren
| Operator | Bedeutung |
|---|---|
=== | Strikte Gleichheit (vergleicht Wert und Typ) |
!== | Strikte Ungleichheit |
== | Nicht-strikte Gleichheit (mit Typumwandlung, besser vermeiden) |
> >= < <= | Größer als, größer oder gleich, kleiner als, kleiner oder gleich |
&& | Logisches UND (beide Bedingungen wahr) |
|| | Logisches ODER (mindestens eine Bedingung wahr) |
! | Logisches NICHT (kehrt den Wert um) |
Array-Methoden
| Methode | Was sie macht | Beispiel |
|---|---|---|
| push() | Fügt ein Element am Ende hinzu | arr.push(5) |
| pop() | Entfernt und gibt das letzte Element zurück | arr.pop() |
| shift() | Entfernt und gibt das erste Element zurück | arr.shift() |
| unshift() | Fügt ein Element am Anfang hinzu | arr.unshift(0) |
| map() | Erstellt ein neues Array durch Anwenden einer Funktion auf jedes Element | arr.map(x => x * 2) |
| filter() | Erstellt ein neues Array nur mit passenden Elementen | arr.filter(x => x > 5) |
| forEach() | Durchläuft jedes Element, gibt nichts zurück | arr.forEach(x => console.log(x)) |
| find() | Gibt das erste passende Element zurück | arr.find(x => x > 5) |
| includes() | Prüft, ob ein Wert im Array existiert | arr.includes(5) |
| slice() | Gibt einen Teil eines Arrays zurück, ohne das Original zu ändern | arr.slice(1, 3) |
| splice() | Entfernt/fügt Elemente hinzu, verändert das Original | arr.splice(1, 2) |
| join() | Verbindet ein Array zu einem String mit einem Trennzeichen | arr.join(", ") |
| reduce() | Reduziert ein Array auf einen einzelnen Wert (wie eine Summe) | arr.reduce((s,x)=>s+x, 0) |
String-Methoden
| Methode / Eigenschaft | Was sie macht | Beispiel |
|---|---|---|
| length | Länge des Strings | "hallo".length → 5 |
| toUpperCase() | Wandelt in Großbuchstaben um | "hi".toUpperCase() → "HI" |
| toLowerCase() | Wandelt in Kleinbuchstaben um | "HI".toLowerCase() → "hi" |
| slice() | Gibt einen Teil eines Strings zurück | "hallo".slice(0,2) → "ha" |
| split() | Teilt einen String in ein Array anhand eines Trennzeichens | "a,b".split(",") → ["a","b"] |
| includes() | Prüft, ob ein String einen Teilstring enthält | "hallo".includes("all") → true |
| trim() | Entfernt Leerzeichen am Anfang und Ende | " hi ".trim() → "hi" |
| replace() | Ersetzt einen Teil eines Strings | "hi".replace("h","H") → "Hi" |
Bedingungen und Schleifen
| Struktur | Syntax |
|---|---|
| if / else | if (x > 5) { ... } else { ... } |
| if / else if / else | if (x>90){...} else if (x>70){...} else {...} |
| switch | switch (x) { case 1: ...; break; default: ...; } |
| for | for (let i = 0; i < 10; i++) { ... } |
| while | while (bedingung) { ... } |
Funktionen
| Typ | Syntax |
|---|---|
| Normale Funktion | function summe(a, b) { return a + b; } |
| Funktionsausdruck | const summe = function(a, b) { return a + b; }; |
| Arrow-Funktion | const summe = (a, b) => a + b; |
| Funktion aufrufen | summe(2, 3); // 5 |
DOM-Grundlagen
| Methode / Eigenschaft | Was sie macht |
|---|---|
| document.querySelector() | Findet das erste Element, das einem CSS-Selektor entspricht |
| document.querySelectorAll() | Findet alle Elemente, die einem CSS-Selektor entsprechen |
| element.innerHTML | Liest oder setzt den HTML-Inhalt eines Elements |
| element.textContent | Liest oder setzt den Text innerhalb eines Elements |
| element.addEventListener() | Weist einen Event-Handler zu (Klick, Eingabe usw.) |
| element.classList.add() / remove() / toggle() | Verwaltet die CSS-Klassen eines Elements |
| element.value | Der Wert eines Eingabefelds (input, select) |
| element.style | Direkte Steuerung der CSS-Stile eines Elements |
Was als Nächstes kommt
Willst du tiefer einsteigen?
All diese Themen werden im kostenlosen JavaScript-Kurs ausführlich erklärt, mit praktischen Übungen nach jeder Lektion.