APIs &

Geschätzte Lektüre: 13 Minuten 444 Ansichten

JavaScript APIs (Application Programming Interfaces) sind Sammlungen von vordefinierten Methoden, Eigenschaften und Objekten, die es Entwicklern ermöglichen, mit verschiedenen Aspekten der Browserumgebung, des Betriebssystems oder externer Dienste zu interagieren. Hier ist eine detaillierte Übersicht der wichtigsten JavaScript APIs mit Beispielen.

Browser-APIs (Web APIs)

Document Object Model (DOM) API

Ermöglicht die Manipulation von HTML- und XML-Dokumenten.

Beispiele:

// Element auswählen
const header = document.getElementById('header');

// Element erstellen
const newDiv = document.createElement('div');
newDiv.textContent = 'Neues Element';

// Element hinzufügen
document.body.appendChild(newDiv);

// Event Listener
document.querySelector('button').addEventListener('click', () => {
  console.log('Button geklickt');
});

Fetch API

Ermöglicht das Abrufen von Ressourcen (z.B. von einem Server).

Beispiel:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fehler:', error));

// Mit async/await
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fehler:', error);
  }
}

Geolocation API

Ermöglicht den Zugriff auf den geografischen Standort des Benutzers.

Beispiel:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log('Breitengrad:', position.coords.latitude);
      console.log('Längengrad:', position.coords.longitude);
    },
    (error) => {
      console.error('Fehler:', error.message);
    }
  );
} else {
  console.log('Geolocation wird nicht unterstützt');
}

Canvas API

Ermöglicht das Zeichnen von Grafiken auf einer Canvas.

Beispiel:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Rechteck zeichnen
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

// Kreis zeichnen
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Web Storage API

Ermöglicht die Speicherung von Daten im Browser (localStorage und sessionStorage).

Beispiel:

// Daten speichern
localStorage.setItem('username', 'MaxMustermann');
sessionStorage.setItem('token', 'abc123');

// Daten abrufen
const username = localStorage.getItem('username');
console.log(username);

// Daten entfernen
localStorage.removeItem('username');

// Alles löschen
localStorage.clear();

Web Workers API

Ermöglicht die Ausführung von JavaScript im Hintergrund ohne Blockieren des UI-Threads.

Beispiel:

// main.js
const worker = new Worker('worker.js');

worker.postMessage('Hallo Worker!');

worker.onmessage = function(e) {
  console.log('Nachricht vom Worker:', e.data);
};

// worker.js
self.onmessage = function(e) {
  console.log('Nachricht vom Hauptthread:', e.data);
  self.postMessage('Hallo Hauptthread!');
};

WebSocket API

Ermöglicht bidirektionale Kommunikation zwischen Client und Server.

Beispiel:

const socket = new WebSocket('wss://example.com/socket');

socket.onopen = function(e) {
  console.log('Verbindung hergestellt');
  socket.send('Hallo Server!');
};

socket.onmessage = function(event) {
  console.log('Nachricht vom Server:', event.data);
};

socket.onclose = function(event) {
  console.log('Verbindung geschlossen');
};

socket.onerror = function(error) {
  console.log('Fehler:', error.message);
};

Medien-APIs

Web Audio API

Ermöglicht die Erzeugung und Manipulation von Audio im Browser.

Beispiel:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Oszillator erstellen
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioContext.currentTime);

// Verstärker erstellen
const gainNode = audioContext.createGain();
gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);

// Verbinden
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);

// Starten
oscillator.start();
oscillator.stop(audioContext.currentTime + 2);

MediaDevices API

Ermöglicht den Zugriff auf Medien-Eingabegeräte wie Kamera und Mikrofon.

Beispiel:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(error) {
    console.error('Fehler:', error);
  });

Geräte-APIs

Device Orientation API

Ermöglicht den Zugriff auf die Orientierung des Geräts.

Beispiel:

window.addEventListener('deviceorientation', function(event) {
  console.log('Alpha (Z-Achse):', event.alpha);
  console.log('Beta (X-Achse):', event.beta);
  console.log('Gamma (Y-Achse):', event.gamma);
});

Vibration API

Ermöglicht den Zugriff auf die Vibrationsfunktion des Geräts.

Beispiel:

// Einmalige Vibration für 200ms
navigator.vibrate(200);

// Vibrationsmuster
navigator.vibrate([100, 30, 100, 30, 100]);

Datei-APIs

File API

Ermöglicht den Zugriff auf lokale Dateien.

Beispiel:

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    console.log('Dateiinhalt:', e.target.result);
  };

  reader.readAsText(file);
});

File System Access API

Ermöglicht den Zugriff auf das Dateisystem.

Beispiel:

async function saveFile() {
  try {
    const handle = await window.showSaveFilePicker();
    const writable = await handle.createWritable();
    await writable.write('Hello World!');
    await writable.close();
  } catch (error) {
    console.error('Fehler:', error);
  }
}

Drittanbieter-APIs

Google Maps API

Ermöglicht die Integration von Google Maps.

Beispiel:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 52.52, lng: 13.41 },
    zoom: 8,
  });

  const marker = new google.maps.Marker({
    position: { lat: 52.52, lng: 13.41 },
    map: map,
    title: "Berlin",
  });
}

Twitter API

Ermöglicht die Interaktion mit Twitter-Daten.

Beispiel:

fetch('https://api.twitter.com/2/tweets/search/recent?query=JavaScript', {
  headers: {
    'Authorization': 'Bearer YOUR_BEARER_TOKEN'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));

Neuere APIs

Web Components API

Ermöglicht die Erstellung von wiederverwendbaren benutzerdefinierten HTML-Elementen.

Beispiel:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        p { color: blue; }
      </style>
      <p>Mein benutzerdefiniertes Element</p>
    `;
  }
}

customElements.define('my-element', MyElement);

Intersection Observer API

Ermöglicht die Beobachtung von Elementen im Viewport.

Beispiel:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element ist sichtbar:', entry.target);
      entry.target.classList.add('animate');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.observe').forEach(el => {
  observer.observe(el);
});

Web Bluetooth API

Ermöglicht die Kommunikation mit Bluetooth-Geräten.

Beispiel:

navigator.bluetooth.requestDevice({ 
  acceptAllDevices: true 
})
.then(device => {
  console.log('Gerätename:', device.name);
  return device.gatt.connect();
})
.then(server => {
  // Mit Server interagieren
})
.catch(error => {
  console.error('Fehler:', error);
});

Node.js-spezifische APIs

File System (fs) API

Ermöglicht die Interaktion mit dem Dateisystem.

Beispiel:

const fs = require('fs');

// Datei lesen
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

// Datei schreiben
fs.writeFile('example.txt', 'Hello Node.js', (err) => {
  if (err) throw err;
  console.log('Datei gespeichert');
});

HTTP API

Ermöglicht die Erstellung von HTTP-Servern und -Clients.

Beispiel:

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(3000, () => {
  console.log('Server läuft auf http://localhost:3000/');
});

Events API

Ermöglicht die Arbeit mit Ereignissen.

Beispiel:

const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
  console.log('Ein Ereignis ist aufgetreten!');
});

myEmitter.emit('event');

Best Practices für die Arbeit mit JavaScript APIs

  • Fehlerbehandlung: Immer Fehler behandeln mit try/catch oder .catch()
  • Browser-Kompatibilität: Prüfen Sie die API-Unterstützung mit:
if ('geolocation' in navigator) {
  // API ist verfügbar
}
  • Performance beachten: Manche APIs (wie Intersection Observer) sind performanter als ältere Methoden
  • Berechtigungen beachten: Viele APIs erfordern Benutzerberechtigungen
  • Dokumentation lesen: Jede API hat spezifische Anforderungen und Einschränkungen

JavaScript APIs sind ein wichtiges Werkzeug, das die Möglichkeiten von Webanwendungen erheblich erweitert. Durch die Kombination verschiedener APIs können Sie komplexe, interaktive und leistungsfähige Anwendungen erstellen.

Dieses Dokument teilen

APIs &

Oder Link kopieren

INHALT

Abonnieren

×
Cancel