Web Engineering · DHBW Stuttgart

JavaScript im Browser und in Node.js

JavaScript ist eine Programmiersprache, definiert durch den ECMAScript-Standard. Ausgeführt wird sie von einer Laufzeitumgebung: im Browser oder durch Node.js auf dem Server. Beide verwenden dieselbe Sprach-Engine, stellen aber unterschiedliche Schnittstellen bereit — der Browser das DOM, Node.js den Zugriff auf Dateisystem, Netzwerk und Prozess. Diese Sitzung grenzt ab, was zur Sprache selbst gehört und was zur jeweiligen Umgebung.

Navigation: ← → · Leertaste weiter · 1–8 direkt · Pos 1/Ende

Sprache und Umgebung

ECMAScript-Kern und umgebungsspezifische APIs

Eine Laufzeitumgebung besteht aus der Sprach-Engine (etwa V8) und den von ihr bereitgestellten Schnittstellen. Der ECMAScript-Kern ist in Browser und Node.js identisch; die übrigen APIs unterscheiden sich. Die folgende Übersicht ordnet einzelne APIs der jeweiligen Umgebung zu.

APIs einordnen

Eine API auswählen, um zu sehen, in welcher Umgebung sie verfügbar ist.

Browser-Konsole und Node-REPL

Denselben Ausdruck in beiden Umgebungen auswerten

Links wird der Ausdruck direkt in dieser Seite ausgewertet, also im Browser. Rechts steht die Ausgabe, die das Node-REPL liefert. Der Vergleich zeigt, welche Objekte in welcher Umgebung definiert sind.

Browser-Konsole

> Ausdruck wählen …

Node REPL ($ node)

> Ausdruck wählen …

Beobachtung: Der Browser stellt DOM- und Fensterobjekte wie document und window bereit, Node den Zugriff auf Prozess und Dateisystem. Was eine Umgebung nicht definiert, führt dort zu einem ReferenceError.

Browser-Umgebung

Das Document Object Model

Das Objekt document ist der Einstiegspunkt in das DOM — die Objektrepräsentation der geladenen Seite. Die folgenden Operationen verändern die Liste direkt; rechts steht der jeweils ausgeführte Aufruf. In Node existiert document nicht.

Live-Liste

Komponente A
Komponente B
Komponente C
Komponente D

Konsolen-Echo

> Befehl ausführen …

In Node ist document nicht definiert; dieselben Aufrufe würden dort mit ReferenceError: document is not defined abbrechen.

Serverseitiges JavaScript

Node.js: Dateisystem, Server und Prozess

Node.js führt JavaScript außerhalb des Browsers aus — mit derselben V8-Engine, aber serverseitigen Modulen. npm init erzeugt die package.json; darunter folgen die wichtigsten eingebauten Module im ESM-Format mit node:-Präfix.

$ npm init -y erzeugt die package.json. Ein Feld auswählen für die Erläuterung:

{
  "name": "mein-projekt",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js",
    "test": "node --test"
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

Wähle ein Feld für die Erklärung.

Ein HTTP-Server kann nur serverseitig laufen; ein Browser kann selbst keinen Server bereitstellen.

import { createServer } from "node:http";

const server = createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/html" });
  res.end("<h1>Hallo Welt!</h1>");
});

server.listen(3000, () => {
  console.log("Server läuft auf Port 3000");
});

Direkter Dateizugriff ist im Browser aus Sicherheitsgründen nicht möglich, in Node hingegen Standard.

import { readFile } from "node:fs/promises";

// Promise-API (modern, empfohlen)
const data = await readFile("data.json", "utf8");
console.log(JSON.parse(data));

Das process-Objekt existiert nur in Node und steuert u. a. Signale, Argumente, Umgebungsvariablen und Exit-Codes.

process.on("SIGINT", () => {
  console.log("Received SIGINT. Closing server...");
  server.close(() => process.exit(0));
});

process.exit(0); // 0 = Erfolg, 1 = Fehler

Der ECMAScript-Sprachkern

Moderne JavaScript-Syntax (ES2015+)

Diese Sprachmerkmale gehören zu ECMAScript und verhalten sich in Browser und Node identisch. Durchgängig wird modernes ES verwendet, ohne var. Ein Thema auswählen und den Code ausführen.

const TAX = 0.19;            // konstant
let warenkorb = 100;
warenkorb += 50;             // ✓ let ist veränderbar
// TAX = 0.07;               // ✗ TypeError — const

{
  let rabatt = 10;           // lebt nur in diesem Block
}
// rabatt — außerhalb: ReferenceError

// Funktionsdeklaration mit Parametern, Rückgabewert
// und einem Standard-Parameter (satz)
function bruttoPreis(netto, satz = 0.19) {
  return netto * (1 + satz);
}

bruttoPreis(100);        // 119
bruttoPreis(100, 0.07);  // 107  (satz überschrieben)

const preise = [19.99, 5, 12.5];

const summe     = preise.reduce((a, b) => a + b, 0);
const teuer     = preise.filter(p => p > 10);
const inklMwSt  = preise.map(p => p * 1.19);

const user = { name: "Mara", rolle: "Admin", aktiv: true };

const { name, rolle } = user;            // herauslösen
const kopie = { ...user, aktiv: false }; // kopieren + ändern

const [erster, ...rest] = [1, 2, 3, 4];  // Rest-Elemente

const name = "Mara";
const punkte = 42;

const text = `Hallo ${name}, du hast ${punkte} Punkte.`;

// Ausdrücke direkt im String — z. B. für CSS:
const css = `transform: rotate(${punkte / 2}deg);`;

// "Daten laden" liefert ein Promise
const ladeUser = () =>
  new Promise(resolve =>
    setTimeout(() => resolve({ name: "Mara" }), 400)
  );

const user = await ladeUser();  // wartet, ohne zu blockieren
console.log(user.name);

// IIFE: erzeugt einen eigenen, privaten Gültigkeitsbereich
const counter = (() => {
  let n = 0;                   // von außen nicht zugänglich
  return { tick: () => ++n };  // tick() ist die einzige Schnittstelle
})();

counter.tick();   // 1
counter.tick();   // 2

Anwendungsbeispiel: Vanilla JavaScript

Logo-Generator

Diese Anwendung kombiniert die behandelten Konzepte: DOM-Zugriff, Event-Handling und moderne Syntax — ohne Framework. Die Regler verändern die Vorschau; das erzeugte CSS unten aktualisiert sich entsprechend und lässt sich kopieren.

LIBRE TECH

Regler

Text (mehrzeilig mit Enter) Schrift

Face-Farbe

Hintergrund

Tiefen-Farbe

Schatten-Farbe

Lichtwinkel: 133° Schatten-Länge: 22px Tiefe: 12px Kontur: 7px Drehung: -10°

Generiertes CSS

Verwendete Konzepte

const $ = id => document.getElementById(id)

Arrow Function und DOM-Zugriff: holt ein Element über seine ID.

$$("input, select, textarea").forEach(el => el.addEventListener("input", update))

Event-Handling: bindet alle Regler gemeinsam; bei jeder Eingabe wird update aufgerufen.

await navigator.clipboard.writeText(css)

Browser-API zum Kopieren in die Zwischenablage; in Node nicht verfügbar.

Ausblick auf die nächste Sitzung

Derselbe Zähler in vier Frameworks

Dasselbe Verhalten — ein klickbarer Zähler — umgesetzt in vier Ansätzen, vom Web-Standard bis zum Compiler. In der nächsten Sitzung wird diese Logik mit einem Framework nachgebaut.

Web-Standard, kein Framework — läuft nativ im Browser.

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.innerHTML = `<button>Clicked 0 times</button>`;
    const btn = this.querySelector("button");
    btn.addEventListener("click", () => {
      this.count++;
      btn.textContent = `Clicked ${this.count} times`;
    });
  }
}
customElements.define("my-counter", MyCounter);

Virtual DOM · JSX · Hooks (useState).

import { useState } from "react";

function MyButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Reaktive refs · Single-File Components (.vue).

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>

Compiler — kein Runtime-Framework, reaktive Zuweisungen.

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Zusammenfassung: Sprachkern (ECMAScript) läuft überall · document/window nur im Browser · node:fs · node:http · process nur in Node. Frameworks bauen auf dem Browser-Teil auf.