Tutorials › Nachschlagen
Befehlsübersicht
Alles aus den sechzehn Kapiteln an einer Stelle, nach Themen geordnet. Zum Nachschlagen, wenn man den Namen vergessen hat.
Werte und Variablen
| Schreibweise | Bedeutung |
|---|---|
const x = 1 |
fester Name, Wert nicht neu zuweisbar |
let x = 1 |
Name, der neu belegt werden darf |
typeof x |
liefert den Typ als Text |
Array.isArray(x) |
prüft, ob es eine Liste ist |
Number(x) |
wandelt in eine Zahl, sonst NaN |
String(x) |
wandelt in Text |
Boolean(x) |
wandelt in wahr oder falsch |
Number.isNaN(x) |
einzig verlässliche Prüfung auf NaN |
structuredClone(x) |
vollständige Kopie über alle Ebenen |
Als falsch gelten: false, 0, "", null, undefined, NaN. Alles andere gilt als wahr.
Nachzulesen in Kapitel 3.
Operatoren
| Schreibweise | Bedeutung |
|---|---|
=== / !== |
Vergleich ohne Typumwandlung, immer diesen nehmen |
== / != |
Vergleich mit Typumwandlung, vermeiden |
&& / || / ! |
und, oder, nicht |
?? |
Ersatzwert nur bei null und undefined |
?. |
bricht ab, statt bei fehlender Ebene zu stürzen |
a ? b : c |
Kurzform für eine Entscheidung |
% |
Rest einer Division |
** |
Potenz |
+= -= *= /= |
rechnen und zuweisen in einem |
...x |
Array oder Objekt auseinandernehmen |
Nachzulesen in Kapitel 4.
Text
| Aufruf | Was herauskommt |
|---|---|
s.length |
Anzahl Zeichen |
s.slice(a, b) |
Ausschnitt, b gehört nicht dazu |
s.at(-1) |
letztes Zeichen |
s.includes(t) |
enthält t? |
s.indexOf(t) |
Position oder -1 |
s.startsWith(t) / s.endsWith(t) |
Anfang oder Ende prüfen |
s.toLowerCase() / s.toUpperCase() |
Groß- und Kleinschreibung |
s.trim() |
Leerraum an beiden Enden weg |
s.split(t) |
zu einem Array zerlegen |
arr.join(t) |
Array zu Text zusammensetzen |
s.replaceAll(a, b) |
alle Vorkommen tauschen |
s.padStart(n, z) |
vorn auffüllen |
`Hallo ${name}` |
Werte in Text einsetzen |
[...s] |
nach echten Zeichen zerlegen |
Reguläre Ausdrücke: /muster/.test(s), s.match(/muster/g), s.replace(/muster/g, ersatz).
Bausteine: \d Ziffer, \s Leerraum, \w Wortzeichen, ^ Anfang, $ Ende, + mindestens einmal, * beliebig oft, {2,4} zwei bis vier.
Nachzulesen in Kapitel 9.
Zahlen
| Aufruf | Was herauskommt |
|---|---|
Math.round(x) |
kaufmännisch gerundet |
Math.floor(x) / Math.ceil(x) |
ab- und aufrunden |
Math.abs(x) |
Betrag |
Math.min(...) / Math.max(...) |
kleinster und größter Wert |
Math.sqrt(x) |
Wurzel |
Math.random() |
Kommazahl von 0 bis knapp unter 1 |
x.toFixed(2) |
Text mit zwei Nachkommastellen |
parseInt(s) / parseFloat(s) |
Zahl aus gemischtem Text |
x.toLocaleString("de-DE") |
deutsche Schreibweise |
crypto.getRandomValues(arr) |
Zufall für sicherheitsrelevante Zwecke |
Ganze Zufallszahl zwischen von und bis einschließlich:
Math.floor(Math.random() * (bis - von + 1)) + vonNachzulesen in Kapitel 10.
Arrays
| Aufruf | Verändert das Original? | Was herauskommt |
|---|---|---|
a.push(x) / a.pop() |
ja | anhängen, letztes entnehmen |
a.unshift(x) / a.shift() |
ja | vorn anfügen, erstes entnehmen |
a.splice(i, n) |
ja | n Einträge ab Position i entfernen |
a.sort(fn) / a.reverse() |
ja | sortieren, umdrehen |
a.map(fn) |
nein | neue Liste, jeder Eintrag umgewandelt |
a.filter(fn) |
nein | neue Liste, nur passende Einträge |
a.reduce(fn, start) |
nein | ein einziger Wert |
a.find(fn) / a.findIndex(fn) |
nein | erster Treffer oder undefined |
a.some(fn) / a.every(fn) |
nein | wahr oder falsch |
a.includes(x) |
nein | wahr oder falsch |
a.slice(i, j) |
nein | Ausschnitt |
a.join(t) |
nein | Text |
[...a] |
nein | flache Kopie |
Zahlen sortieren: a.sort((x, y) => x - y). Deutschen Text sortieren: a.sort((x, y) => x.localeCompare(y, "de")).
Nachzulesen in Kapitel 7.
Objekte
| Aufruf | Was herauskommt |
|---|---|
o.feld / o["feld"] |
Wert lesen oder setzen |
"feld" in o |
gibt es das Feld? |
delete o.feld |
Feld entfernen |
Object.keys(o) |
Liste der Feldnamen |
Object.values(o) |
Liste der Werte |
Object.entries(o) |
Liste aus Paaren |
Object.fromEntries(paare) |
Paare zurück zu einem Objekt |
{ ...o } |
flache Kopie |
const { a, b } = o |
Felder in eigene Variablen holen |
JSON.stringify(o) |
Objekt zu Text |
JSON.parse(text) |
Text zu Objekt |
Nachzulesen in Kapitel 8.
Datum
| Aufruf | Was herauskommt |
|---|---|
new Date() |
jetzt |
new Date(2026, 7, 30) |
Monat zählt ab null, hier August |
new Date("2026-08-30") |
aus Text, nur dieses Format ist sicher |
Date.now() |
Millisekunden seit 1970 |
d.getFullYear() |
Jahr |
d.getMonth() |
Monat, 0 bis 11 |
d.getDate() |
Tag im Monat, 1 bis 31 |
d.getDay() |
Wochentag, 0 ist Sonntag |
d.setDate(d.getDate() + 7) |
eine Woche weiter |
d.toLocaleDateString("de-DE") |
deutsches Datum |
d.toISOString().slice(0, 10) |
für <time datetime="..."> |
performance.now() |
genaue Zeitmessung seit Seitenaufruf |
setInterval(fn, ms) / clearInterval(id) |
wiederholt aufrufen, abstellen |
setTimeout(fn, ms) / clearTimeout(id) |
einmal später aufrufen, abstellen |
Nachzulesen in Kapitel 11.
Die Seite verändern
| Aufruf | Was herauskommt |
|---|---|
document.getElementById(id) |
ein Element oder null |
document.querySelector(sel) |
erster Treffer per CSS-Selektor |
document.querySelectorAll(sel) |
alle Treffer |
el.textContent = t |
Text setzen, sicher |
el.innerHTML = t |
Markup setzen, nie mit Fremdeingaben |
document.createElement(tag) |
neues Element, noch nicht eingehängt |
el.append(a, b) / el.appendChild(a) |
einhängen |
el.remove() |
aus dem Dokument nehmen |
el.classList.add/remove/toggle(k) |
Klassen schalten |
el.dataset.name |
liest data-name |
el.closest(sel) |
nächstes passendes Element nach oben |
document.createDocumentFragment() |
Sammelbehälter für viele Elemente |
Nachzulesen in Kapitel 12.
Ereignisse
| Aufruf | Bedeutung |
|---|---|
el.addEventListener(name, fn) |
Zuhörer anmelden |
el.addEventListener(name, fn, { once: true }) |
nur einmal reagieren |
el.removeEventListener(name, fn) |
abmelden, braucht dieselbe Funktion |
e.target |
Element, auf dem es ausgelöst wurde |
e.preventDefault() |
eingebaute Reaktion unterdrücken |
e.stopPropagation() |
Aufsteigen nach oben stoppen |
e.key / e.code |
Taste als Zeichen oder als Position |
Häufige Namen: click, input, change, submit, keydown, keyup, mouseenter, mouseleave, scroll, DOMContentLoaded.
Nachzulesen in Kapitel 13.
Formulare
| Aufruf | Bedeutung |
|---|---|
form.elements.name.value |
Wert eines Feldes, immer Text |
form.elements.name.checked |
Zustand von Kästchen und Optionsfeldern |
new FormData(form) |
alle Felder auf einmal |
Object.fromEntries(new FormData(form)) |
daraus ein Objekt |
feld.validity.valueMissing |
Pflichtfeld leer |
feld.validity.tooShort |
zu kurz |
form.checkValidity() |
prüft alles auf einmal |
feld.focus() |
Eingabemarke setzen |
Prüfattribute im HTML: required, minlength, maxlength, min, max, pattern, type="email", type="url".
Speicher: localStorage.setItem(k, v), getItem(k), removeItem(k), clear(). Speichert nur Text und wirft in privaten Fenstern eine Ausnahme, deshalb in try einpacken.
Nachzulesen in Kapitel 14.
Canvas
| Aufruf | Bedeutung |
|---|---|
canvas.getContext("2d") |
Zeichenwerkzeug holen |
s.fillRect(x, y, b, h) |
gefülltes Rechteck |
s.strokeRect(x, y, b, h) |
umrandetes Rechteck |
s.clearRect(x, y, b, h) |
Bereich löschen |
s.beginPath() |
neuen Pfad beginnen |
s.arc(x, y, r, a1, a2) |
Kreisbogen, Winkel in Bogenmaß |
s.moveTo(x, y) / s.lineTo(x, y) |
Linienzug |
s.fill() / s.stroke() |
Pfad füllen oder zeichnen |
s.fillStyle / s.strokeStyle |
Farben |
s.lineWidth |
Strichstärke |
s.font / s.fillText(t, x, y) |
Text zeichnen |
requestAnimationFrame(fn) |
nächstes Bild anfordern |
Voller Kreis: Math.PI * 2. Grad in Bogenmaß: grad * Math.PI / 180.
Nachzulesen in Kapitel 15.
Warten
| Aufruf | Bedeutung |
|---|---|
new Promise((fertig, scheitert) => ...) |
eigenes Promise bauen |
p.then(fn) / p.catch(fn) / p.finally(fn) |
Kette |
async function f() {} |
Funktion, die await erlaubt |
await p |
anhalten, bis das Promise fertig ist |
Promise.all([...]) |
alle gleichzeitig, scheitert beim ersten Fehler |
Promise.allSettled([...]) |
alle gleichzeitig, meldet jedes Ergebnis |
fetch(adresse) |
Netzwerkanfrage |
antwort.ok |
war der Statuscode im Erfolgsbereich? |
antwort.json() |
Rumpf als Objekt lesen |
AbortSignal.timeout(ms) |
Frist für eine Anfrage |
fetch scheitert nicht bei 404 oder 500. Immer antwort.ok prüfen.
Nachzulesen in Kapitel 16.
Skripte einbinden
<script src="datei.js" defer></script>
<script type="module" src="haupt.js"></script>defer für den Normalfall. type="module" zusätzlich für eigenen Namensraum und import, braucht aber einen Webserver statt eines Doppelklicks.
Nachzulesen in Kapitel 2.