JavaScript-Referenz — Agentic Coding

let

Variable, die spater neu zugewiesen werden kann.

let count = 0;
count = count + 1;

const

Konstante, kann nicht neu zugewiesen werden.

const API_URL = "https://api.example.com";
const items = [];  // Array-Inhalt anderbar!

String

Zeichenkette in Anfuhrungszeichen oder Backticks.

const name = "Graz";
const greeting = `Hallo ${name}`;

Number

Ganzzahlen und Dezimalzahlen.

const year = 1786;
const pi = 3.14;

Boolean

Wahrheitswert: true oder false.

const isActive = true;
const isEmpty = false;

Array

Geordnete Liste von Werten.

const cities = ["Graz", "Wien", "Salzburg"];
console.log(cities[0]); // "Graz"

Object

Sammlung von Schlussel-Wert-Paaren.

const brief = {
  sender: "Mozart",
  jahr: 1786
};

null / undefined

null = bewusst leer, undefined = nicht zugewiesen.

let result = null;     // explizit leer
let x;                 // undefined
console.log(typeof x); // "undefined"

Arithmetik: + - * / %

Grundrechenarten und Modulo (Rest).

const sum = 10 + 3;   // 13
const rest = 10 % 3;  // 1
const text = "Hallo" + " Welt"; // Verkettung

Vergleich: === !== < >

Strikte Gleichheit und Grossenvergleich.

5 === 5     // true
5 === "5"   // false (strikt!)
5 !== 3     // true
10 > 5      // true

Logisch: && || !

UND, ODER, NICHT fur Bedingungen.

true && false  // false
true || false  // true
!true          // false

typeof

Gibt den Datentyp als String zuruck.

typeof "Hallo"  // "string"
typeof 42       // "number"
typeof true     // "boolean"
typeof []       // "object"

.length

Anzahl der Zeichen im String.

"Hallo".length  // 5

.toUpperCase() / .toLowerCase()

Wandelt in Gross- bzw. Kleinbuchstaben um.

"graz".toUpperCase()  // "GRAZ"
"WIEN".toLowerCase()  // "wien"

.includes()

Pruft, ob ein Teilstring enthalten ist.

"Briefsammlung".includes("Brief")
// true

.split()

Teilt String in Array anhand eines Trennzeichens.

"Graz,Wien,Linz".split(",")
// ["Graz", "Wien", "Linz"]

.trim()

Entfernt Leerzeichen am Anfang und Ende.

"  Hallo  ".trim()  // "Hallo"

Template Literals

Backtick-Strings mit eingebetteten Ausdrucken.

const name = "Mozart";
const text = `Brief von ${name}`;
const multi = `Zeile 1
Zeile 2`;

.push() / .pop()

Element am Ende hinzufugen / entfernen.

const arr = [1, 2];
arr.push(3);   // [1, 2, 3]
arr.pop();     // [1, 2], gibt 3 zuruck

.length

Anzahl der Elemente im Array.

["a", "b", "c"].length  // 3

.forEach()

Fuhrt eine Funktion fur jedes Element aus.

const staedte = ["Graz", "Wien"];
staedte.forEach(stadt => {
  console.log(stadt);
});

.map()

Erstellt neues Array durch Transformation jedes Elements.

const namen = ["graz", "wien"];
const gross = namen.map(n =>
  n.toUpperCase()
);
// ["GRAZ", "WIEN"]

.filter()

Erstellt neues Array mit Elementen, die den Test bestehen.

const zahlen = [1, 2, 3, 4, 5];
const gross = zahlen.filter(z => z > 3);
// [4, 5]

.find()

Gibt das erste Element zuruck, das den Test besteht.

const briefe = [{id: 1}, {id: 2}];
const brief = briefe.find(b =>
  b.id === 2
);
// {id: 2}

.sort()

Sortiert das Array (verandert Original!).

const arr = [3, 1, 2];
arr.sort((a, b) => a - b);  // [1, 2, 3]
arr.sort((a, b) => b - a);  // [3, 2, 1]

.join()

Verbindet Array-Elemente zu einem String.

["Graz", "Wien"].join(", ")
// "Graz, Wien"

Spread-Operator ...

Entpackt Array-Elemente in ein neues Array.

const a = [1, 2];
const b = [3, 4];
const all = [...a, ...b]; // [1, 2, 3, 4]
const copy = [...a];      // Kopie

{key: value}

Objekt-Literal mit Eigenschaften.

const brief = {
  sender: "Mozart",
  empfaenger: "Leopold",
  jahr: 1786
};

Dot / Bracket Notation

Zugriff auf Eigenschaften per Punkt oder Klammer.

brief.sender          // "Mozart"
brief["empfaenger"]   // "Leopold"

const key = "jahr";
brief[key]            // 1786

Object.keys() / Object.values()

Gibt alle Schlussel bzw. Werte als Array zuruck.

Object.keys(brief)
// ["sender", "empfaenger", "jahr"]

Object.values(brief)
// ["Mozart", "Leopold", 1786]

Destructuring

Extrahiert Werte direkt in Variablen.

const { sender, jahr } = brief;
console.log(sender); // "Mozart"
console.log(jahr);   // 1786

if / else

Bedingte Ausfuhrung von Code.

if (count > 0) {
  console.log("Treffer!");
} else if (count === 0) {
  console.log("Keine Treffer");
} else {
  console.log("Fehler");
}

for

Klassische Zahlschleife.

for (let i = 0; i < 10; i++) {
  console.log(i);
}

for...of

Iteriert uber Elemente eines Arrays (oder Iterable).

const staedte = ["Graz", "Wien"];
for (const stadt of staedte) {
  console.log(stadt);
}

while

Schleife, die lauft solange Bedingung wahr ist.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

switch

Fallunterscheidung fur mehrere Werte.

switch (typ) {
  case "brief":
    console.log("Brief");
    break;
  case "postkarte":
    console.log("Postkarte");
    break;
  default:
    console.log("Unbekannt");
}

function name() {}

Klassische Funktionsdeklaration.

function greet(name) {
  return `Hallo ${name}`;
}
greet("Maria"); // "Hallo Maria"

Arrow Functions () => {}

Kurzschreibweise fur Funktionen.

const greet = (name) => {
  return `Hallo ${name}`;
};
// Einzeiler (implizites return):
const double = n => n * 2;

Parameter und Return

Eingabewerte und Ruckgabe.

const add = (a, b) => a + b;
const result = add(3, 4); // 7

// Standardwert:
const greet = (name = "Welt") =>
  `Hallo ${name}`;

document.querySelector()

Wahlt das erste passende Element (CSS-Selektor).

const title = document.querySelector("h1");
const btn = document.querySelector(".btn");
const nav = document.querySelector("#nav");

document.querySelectorAll()

Wahlt alle passenden Elemente (NodeList).

const items = document
  .querySelectorAll("li");
items.forEach(item => {
  console.log(item.textContent);
});

document.getElementById()

Wahlt Element anhand seiner ID.

const box = document
  .getElementById("output");

.textContent / .innerHTML

Liest/setzt Text bzw. HTML-Inhalt eines Elements.

el.textContent = "Neuer Text";
el.innerHTML = "<strong>Fett</strong>";

.classList.add/remove/toggle

CSS-Klassen hinzufugen, entfernen oder umschalten.

el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("open");

.setAttribute()

Setzt ein HTML-Attribut auf einen Wert.

img.setAttribute("src", "bild.jpg");
link.setAttribute("href", "/seite");

.style

Direkter Zugriff auf Inline-CSS-Stile.

el.style.color = "red";
el.style.display = "none";
el.style.backgroundColor = "#eee";

.createElement() / .appendChild()

Neues Element erstellen und einfugen.

const li = document.createElement("li");
li.textContent = "Neuer Eintrag";
document.querySelector("ul")
  .appendChild(li);

.addEventListener()

Registriert eine Callback-Funktion fur ein Event.

btn.addEventListener("click", () => {
  console.log("Klick!");
});

input.addEventListener("input", (e) => {
  console.log(e.target.value);
});

Haufige Events

click, input, submit, keydown und weitere.

// Formular abfangen:
form.addEventListener("submit", (e) => {
  e.preventDefault();
  // Formulardaten verarbeiten
});

// Tastendruck:
document.addEventListener("keydown",
  (e) => console.log(e.key)
);

event.preventDefault()

Verhindert das Standardverhalten (z.B. Formular-Submit).

link.addEventListener("click", (e) => {
  e.preventDefault();
  // eigene Logik statt Navigation
});

fetch(url)

Ladt Daten von einer URL (gibt Promise zuruck).

fetch("data/briefe.json")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

.then()

Verarbeitet das Ergebnis eines Promise.

fetch("api/data")
  .then(res => res.json())
  .then(data => anzeigen(data))
  .catch(err => console.error(err));

async / await

Modernere Syntax fur asynchronen Code.

const loadData = async () => {
  const response = await fetch("data.json");
  const data = await response.json();
  console.log(data);
};

try / catch

Fehlerbehandlung fur async-Operationen.

const loadData = async () => {
  try {
    const res = await fetch("data.json");
    const data = await res.json();
    return data;
  } catch (error) {
    console.error("Fehler:", error);
  }
};

response.json() / response.text()

Liest die Antwort als JSON-Objekt bzw. Textstring.

// JSON-Daten:
const data = await response.json();

// Text (CSV, XML, HTML):
const text = await response.text();

new DOMParser()

Erstellt einen Parser fur XML/HTML-Strings.

const parser = new DOMParser();

.parseFromString()

Wandelt einen XML/HTML-String in ein DOM-Dokument um.

const xmlText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(
  xmlText, "text/xml"
);

.querySelector() auf XML

CSS-Selektoren funktionieren auch auf XML-Dokumenten.

const title = xmlDoc
  .querySelector("titleStmt title");
console.log(title.textContent);

.getElementsByTagName()

Wahlt alle Elemente mit einem bestimmten Tag-Namen.

const paragraphs = xmlDoc
  .getElementsByTagName("p");
for (const p of paragraphs) {
  console.log(p.textContent);
}

JSON.parse()

Wandelt einen JSON-String in ein JavaScript-Objekt um.

const jsonStr = '{"name": "Mozart"}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // "Mozart"

JSON.stringify()

Wandelt ein JavaScript-Objekt in einen JSON-String um.

const obj = { name: "Mozart", jahr: 1786 };
const str = JSON.stringify(obj);
// '{"name":"Mozart","jahr":1786}'

// Formatiert (lesbar):
JSON.stringify(obj, null, 2);