Nützliche Browser-APIs

Der Browser bringt viele eingebaute Schnittstellen (APIs) mit. Hier die wichtigsten für den Alltag.

URL und Adressleiste

beispiel.de /suche
java script 2
#ergebnis
https://beispiel.de/suche?q=java+script&seite=3&tag=neu#ergebnis
a=1&b=x+y
K%C3%B6ln%20%26%20Bonn

Im Browser liest location.search die aktuelle Adresse; history.pushState(daten, "", "/neu") ändert die Adresse ohne Neuladen (so arbeiten Single-Page-Apps).

Zwischenablage

await navigator.clipboard.writeText("Kopierter Text");
const text = await navigator.clipboard.readText();     // fragt um Erlaubnis

Das Schreiben funktioniert nach einer Nutzeraktion (z. B. Klick) und nur über HTTPS.

Beobachter

IntersectionObserver meldet, wenn Elemente sichtbar werden (Nachladen von Bildern, Animationen beim Scrollen):

const beobachter = new IntersectionObserver((eintraege) => {
  for (const e of eintraege) {
    if (e.isIntersecting) {
      e.target.classList.add("sichtbar");
      beobachter.unobserve(e.target);
    }
  }
}, { threshold: 0.2 });
document.querySelectorAll(".karte").forEach(k => beobachter.observe(k));

Weitere Beobachter: ResizeObserver (Größenänderung eines Elements), MutationObserver (Änderungen im DOM).

Standort und Geräte

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (fehler) => console.log("Abgelehnt oder nicht verfügbar:", fehler.message),
);

Der Browser fragt die Nutzerin immer um Erlaubnis. Dasselbe gilt für Kamera und Mikrofon (navigator.mediaDevices.getUserMedia), Benachrichtigungen und Bluetooth. Frage nur, wenn du es wirklich brauchst, und erkläre vorher warum.

Medien und Sprache

• new Audio("ton.mp3").play() spielt Töne (nach Nutzerklick erlaubt)
• speechSynthesis.speak(new SpeechSynthesisUtterance("Hallo")) liest Text vor
• matchMedia("(prefers-color-scheme: dark)").matches fragt Systemeinstellungen ab

string

Web Worker: Arbeit im Hintergrund

Ein Web Worker läuft in einem eigenen Thread, ohne die Seite zu blockieren:

// haupt.js
const worker = new Worker("rechner.js");
worker.postMessage({ bis: 1e8 });
worker.onmessage = (e) => console.log("Ergebnis:", e.data);

// rechner.js
onmessage = (e) => {
  let s = 0;
  for (let i = 0; i < e.data.bis; i++) s += i;
  postMessage(s);
};

Worker haben keinen Zugriff aufs DOM; sie tauschen Nachrichten (postMessage) aus.

Service Worker und PWA

Ein Service Worker steht zwischen Seite und Netzwerk: Er kann Antworten zwischenspeichern, Offline-Betrieb ermöglichen und Push-Nachrichten empfangen. Zusammen mit einem Web-App-Manifest wird eine Seite zur installierbaren Progressive Web App.

Zufall und Krypto

4 string
36 4

Für Passwörter, Tokens und Schlüssel verwendest du crypto, nie Math.random().

Fähigkeiten prüfen statt Browser raten

Prüfe, ob eine Funktion existiert, bevor du sie benutzt (Feature Detection):

keine Zwischenablage-API hier
function function undefined

Auf <https://developer.mozilla.org> (MDN) findest du zu jeder API Beschreibung, Beispiele und eine Tabelle, welche Browser sie unterstützen.