🌐JavaScript im Browser – und kurz Node.js

Im Browser bekommt JavaScript Zugriff auf die Seite (DOM), Ereignisse und Speicher. Das sind keine Teile der Sprache, sondern Web-APIs der Umgebung – Node.js bietet stattdessen Dateisystem, Netzwerk und Prozesse.

🌳Der DOM-Baum

Der Browser macht aus dem HTML einen Baum aus Knoten. Bearbeite das HTML links – der Baum wird mit DOMParser live aufgebaut.

HTML (bearbeitbar)

Leerraum-Textknoten zeigen (0)

DOM-Baum · 0 Elemente, 0 Textknoten

Kein Element gefunden.

Ausgewählter Knoten

Klicke im Baum auf einen Knoten. Achte auf die Textknoten: Auch Zeilenumbrüche zwischen Tags sind Knoten – deshalb unterscheiden sich childNodes und children.

1const liste = document.querySelector("ul");
2const eintrag = document.createElement("li");
3eintrag.textContent = "Milch";            // sicher: kein HTML
4eintrag.classList.add("neu");
5liste.append(eintrag);
6 
7document.querySelector("#neu").addEventListener("click", (e) => {
8  console.log("geklickt:", e.target.id);
9});

⚠️ textContent statt innerHTML

Nutzereingaben nie mit innerHTML einfügen – sonst kann eingeschleustes HTML/JavaScript ausgeführt werden (Cross-Site-Scripting). textContent fügt reinen Text ein.

🫧Events: Capturing und Bubbling

Ein Klick wandert vom Fenster hinunter zum Ziel (Capturing) und wieder hinauf (Bubbling). Listener können sich in beide Richtungen einklinken.

Capture-Listener Bubble-ListenerstopPropagation() in

div#aussen

div#mitte

… oder direkt auf den Button oder die Kästen klicken.

Es werden echte Listener mit addEventListener registriert; aufgezeichnet wird, in welcher Reihenfolge der Browser sie aufruft (event.eventPhase).

Aufgezeichnete Aufrufe

Noch kein Klick.

window → document → … → div#aussen → div#mitte → button#innen

① Capturing  ───────────────────────────────────────▶
             (von außen nach innen)
② Target                                    ◎ button#innen
③ Bubbling   ◀───────────────────────────────────────
             (von innen nach außen)

1// Ereignis-Delegation: EIN Listener am Elternelement
2liste.addEventListener("click", (e) => {
3  const li = e.target.closest("li");
4  if (!li) return;
5  li.classList.toggle("erledigt");
6});

e.target ist das Element, auf das wirklich geklickt wurde, e.currentTarget das Element, an dem der Listener hängt.

e.stopPropagation() beendet die Weitergabe, e.preventDefault() verhindert die Standardaktion (z. B. Absenden eines Formulars) – das sind zwei verschiedene Dinge.

Dank Bubbling reicht für viele Kind-Elemente oft ein Listener am Elternelement (Delegation) – auch für später hinzugefügte Elemente.

💾localStorage

Einfacher Schlüssel-Wert-Speicher im Browser. Die Demo schreibt nur Schlüssel mit eigenem Präfix in den localStorage dieser Seite.

SchlüsselWert (immer ein String)

(noch keine Aufrufe)

Inhalt (nur Schlüssel dieser Demo, Präfix „visualjs-demo:“)

leer

Speichert nur Strings – Objekte mit JSON.stringify ablegen und mit JSON.parse lesen.
Bleibt nach Neuladen erhalten, gilt pro Herkunft (Protokoll + Host + Port); sessionStorage nur für den Tab.
Synchron und klein (meist rund 5 MB) – nichts Geheimes speichern, jedes Skript der Seite kann es lesen.

🟩Node.js und npm in Kürze

Node.js führt JavaScript außerhalb des Browsers aus – mit derselben Engine wie Chrome (V8) und einer Event Loop auf Basis von libuv. npm ist der Paketmanager.

package.json

1{
2  "name": "mein-projekt",
3  "version": "1.0.0",
4  "type": "module",
5  "scripts": {
6    "start": "node server.js",
7    "test": "node --test"
8  },
9  "dependencies": {
10    "beispiel-bibliothek": "^2.1.0"
11  }
12}

Ein Mini-Server

1// server.js – ein Mini-Webserver mit Node.js
2import { createServer } from "node:http";
3 
4createServer((req, res) => {
5  res.writeHead(200, { "Content-Type": "application/json" });
6  res.end(JSON.stringify({ hallo: "Welt" }));
7}).listen(8080);

Wichtige Befehle

node datei.js	Skript ausführen
npm init -y	package.json anlegen
npm install paket	Abhängigkeit hinzufügen (node_modules)
npm install -D paket	nur für die Entwicklung
npm ci	exakt nach package-lock.json installieren
npm run start	Skript aus package.json starten
npx werkzeug	Paket-Befehl ohne globale Installation

Versionsangabe ^2.1.0: erlaubt 2.x.y ab 2.1.0, aber nicht 3.0.0 (Semantic Versioning).

🔗 MDN: DOM 🔗 MDN: Events 🔗 MDN: localStorage 🔗 Node.js: Einstieg