EMZETT.
Login

Emzett Wiki

JavaScript: Nützliche Browser-APIs

Properties1
tagsprogrammiersprachen, javascript

3 Min. Lesezeit

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

Teil des Kurses JavaScript

Kapitel 32 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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

URL und Adressleiste

const url = new URL("https://beispiel.de/suche?q=java+script&seite=2#ergebnis");
console.log(url.hostname, url.pathname);
console.log(url.searchParams.get("q"), url.searchParams.get("seite"));
console.log(url.hash);
 
url.searchParams.set("seite", 3);
url.searchParams.append("tag", "neu");
console.log(url.toString());
 
console.log(new URLSearchParams({ a: 1, b: "x y" }).toString());
console.log(encodeURIComponent("Köln & Bonn"));

Ausgabe:

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
const farbe = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)").matches : "nur im Browser";
console.log(typeof farbe);

Ausgabe:

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

const bytes = crypto.getRandomValues(new Uint8Array(4));
console.log(bytes.length, typeof crypto.randomUUID());
const uuid = crypto.randomUUID();
console.log(uuid.length, uuid[14]);

Ausgabe:

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):

if ("clipboard" in (globalThis.navigator ?? {})) console.log("Zwischenablage-API vorhanden");
else console.log("keine Zwischenablage-API hier");
console.log(typeof structuredClone, typeof fetch, typeof IntersectionObserver);

Ausgabe:

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.

Merke

  • URL und URLSearchParams zerlegen und bauen Adressen sicher
  • Beobachter (IntersectionObserver & Co.) ersetzen Scroll-Abfragen
  • Sensible APIs (Standort, Kamera) fragen immer um Erlaubnis
  • Web Worker verlagern schwere Arbeit aus dem Hauptthread
  • crypto für Zufall mit Sicherheitsanspruch; Feature Detection statt Browser-Raten

Übungsaufgabe

Lies mit URL die Parameter aus einer Beispieladresse, ändere einen und gib die neue Adresse aus.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Daten im Browser speichern

Weiter: Zeichnen mit Canvas und Animation

Alle Kapitel: JavaScript im Überblick

Graphansicht

Backlinks