Client-side Web-APIs

Bei der Entwicklung von Client-seitigem JavaScript für Websites oder Anwendungen werden Sie schnell auf Application Programming Interfaces (APIs) stoßen. APIs sind Programmierfunktionen zur Manipulation verschiedener Aspekte des Browsers und Betriebssystems, auf dem die Website läuft, oder zur Manipulation von Daten anderer Websites oder Dienste. In diesem Modul werden wir erkunden, was APIs sind und wie Sie einige der am häufigsten vorkommenden APIs verwenden können, die Ihnen in Ihrer Entwicklungsarbeit häufig begegnen.

Voraussetzungen

Um das Beste aus diesem Modul herauszuholen, sollten Sie die vorherigen JavaScript-Module der Serie (Erste Schritte, Bausteine und JavaScript-Objekte) durchgearbeitet haben. Diese Module beinhalten typischerweise eine einfache Nutzung von APIs, da es oft schwierig ist, Client-seitige JavaScript-Beispiele ohne sie zu schreiben. Für dieses Tutorial gehen wir davon aus, dass Sie Kenntnisse über die grundlegende JavaScript-Sprache besitzen und wir werden gängige Web-APIs etwas detaillierter untersuchen.

Grundkenntnisse in HTML und CSS wären ebenfalls nützlich.

Hinweis: Wenn Sie auf einem Gerät arbeiten, auf dem Sie keine eigenen Dateien erstellen können, könnten Sie (die meisten) der Codebeispiele in einem Online-Coding-Programm wie JSBin oder Glitch ausprobieren.

Leitfäden

Einführung in Web-APIs: Zuerst werden wir APIs auf einer hohen Ebene betrachten – was sind sie, wie funktionieren sie, wie verwendet man sie im Code und wie sind sie strukturiert? Außerdem werfen wir einen Blick darauf, welche unterschiedlichen Hauptklassen von APIs es gibt und welche Verwendungen sie haben.
Manipulation von Dokumenten: Beim Verfassen von Webseiten und Apps ist es eine der häufigsten Aufgaben, Webdokumente auf irgendeine Weise zu manipulieren. Dies geschieht normalerweise durch die Verwendung des Document Object Model (DOM), einem Satz von APIs zur Steuerung von HTML- und Stilinformationen, das stark auf das Document-Objekt zurückgreift. In diesem Artikel werden wir im Detail betrachten, wie man das DOM verwendet, sowie einige andere interessante APIs, die Ihre Umgebung auf interessante Weise verändern können.
Daten vom Server abrufen: Eine weitere sehr häufige Aufgabe in modernen Websites und Anwendungen ist das Abrufen einzelner Datenobjekte vom Server, um Abschnitte einer Webseite zu aktualisieren, ohne eine komplett neue Seite laden zu müssen. Dieses scheinbar kleine Detail hat einen großen Einfluss auf die Leistung und das Verhalten von Websites gehabt. In diesem Artikel erklären wir das Konzept und betrachten Technologien, die dies ermöglichen, wie XMLHttpRequest und die Fetch API.
Drittanbieter-APIs: Die APIs, die wir bisher behandelt haben, sind in den Browser integriert, aber nicht alle APIs sind es. Viele große Websites und Dienste wie Google Maps, Facebook, PayPal usw. bieten APIs, die es Entwicklern ermöglichen, deren Daten oder Dienste zu nutzen (z. B. benutzerdefinierte Google Maps auf Ihrer Website anzuzeigen oder die Facebook-Anmeldung zu verwenden, um Ihre Nutzer anzumelden). Dieser Artikel betrachtet den Unterschied zwischen Browser-APIs und Drittanbieter-APIs und zeigt einige typische Verwendungen der letzteren.
Grafiken zeichnen: Der Browser enthält einige sehr leistungsfähige Grafikprogrammierungstools, von der Scalable Vector Graphics (SVG)-Sprache bis hin zu APIs zum Zeichnen auf HTML-<canvas>-Elementen (siehe The Canvas API und WebGL). Dieser Artikel bietet eine Einführung in die Canvas API und weitere Ressourcen, um Ihnen zu ermöglichen, mehr zu lernen.
Video- und Audio-APIs: HTML beinhaltet Elemente zum Einbetten von Multimedia-Inhalten in Dokumente – <video> und <audio> – die wiederum eigene APIs für die Steuerung der Wiedergabe, Suche usw. haben. Dieser Artikel zeigt Ihnen, wie Sie gängige Aufgaben wie das Erstellen benutzerdefinierter Wiedergabesteuerungen durchführen.
Client-seitige Speicherung: Moderne Webbrowser verfügen über eine Reihe verschiedener Technologien, die es Ihnen ermöglichen, datenbezogene Websites zu speichern und bei Bedarf abzurufen, was es Ihnen ermöglicht, Daten langfristig zu speichern, Sites offline zu speichern und mehr. Dieser Artikel erklärt die Grundlagen, wie diese funktionieren.