Erlernen der JavaScript-API: Ein Leitfaden für Anfänger
Schlüsselwörter: JavaScript-API, API-Grundlagen, Arbeiten mit Fetch.
Einleitung
In dieser Lektion werden wir uns ausführlich mit dem Konzept der API (Application Programming Interface) vertraut machen und lernen, wie man damit in JavaScript arbeitet. Sie erfahren, was eine API ist, warum Sie sie benötigen, wie Sie Anfragen senden, Antworten verarbeiten und Daten in Ihre Anwendung integrieren. Als Beispiel erhalten wir Wetterdaten über die kostenlose OpenWeatherMap-API. 🌥 So können Sie die Arbeit mit externen Diensten in der Praxis erlernen und sich mit modernen Webentwicklungstechnologien vertraut machen.
Was ist eine API?
Eine API ist eine Schnittstelle, die es Ihrer Anwendung ermöglicht, mit anderen Diensten oder Programmen zu interagieren. Zum Beispiel kann die API Ihnen helfen:
Wetter in Echtzeit erfahren.
Erhalten Sie aktuelle Wechselkurse.
Nach Bildern, Videos oder anderen Informationen suchen.
Für die Arbeit mit der API ist normalerweise Folgendes erforderlich:
HTTP-Methoden ("GET" zum Empfangen von Daten, "POST" zum Senden von Daten usw.).
JSON-Format — Die meisten APIs geben Daten in diesem Format zurück.
URL API ist die Adresse, an die Anfragen gesendet werden.
API-Schlüssel (manchmal), der Ihre Identität bestätigt.
APIs werden überall verwendet, von mobilen Anwendungen bis hin zu komplexen Webdiensten. Das Verständnis von APIs ist ein wichtiger Schritt bei der Entwicklung von Web-Entwicklungskenntnissen.
Was wir tun werden
Wir erstellen eine einfache JavaScript-Anwendung, die eine Anfrage an die OpenWeatherMap-API sendet und die Temperatur in der ausgewählten Stadt anzeigt. ⛅ Unser Projekt umfasst:
Entwicklung einer HTML-Schnittstelle für die Interaktion mit dem Benutzer.
Schreiben von JavaScript-Code zur Verarbeitung von Anfragen und Antworten.
Fehlerbehandlung für Benutzerfreundlichkeit.
Vorbereitung
Erstellen Sie eine HTML-Datei mit der grundlegenden Seitenstruktur. Diese Datei wird die Grundlage unserer Anwendung sein.
Registrieren Sie sich auf der Website OpenWeatherMap und Sie erhalten einen kostenlosen API-Schlüssel. Ohne ihn funktionieren die API-Anfragen nicht.
Stellen Sie sicher, dass Ihr Browser moderne JavaScript-Funktionen wie
fetch()undasync/awaitunterstützt.
Anwendungscode: HTML-Struktur und JavaScript-Beispiel für die API
HTML: Erstellen Sie eine Benutzeroberfläche, um die Stadt einzugeben und die Temperatur anzuzeigen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Погода</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
p {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>🌤 Узнать погоду</h1>
<input type="text" id="city" placeholder="Enter city">
<button id="getWeather">Получить погоду</button>
<p id="weatherResult"></p>
<script src="script.js"></script>
</body>
</html>JavaScript:
Wir schreiben den Code, um Wetterdaten zu erhalten.
const apiKey = 'YOUR_API_KEY';
// Wir erhalten Elemente aus HTML
const cityInput = document.getElementById('city');
const getWeatherButton = document.getElementById('getWeather');
const weatherResult = document.getElementById('weatherResult');
// Funktion zum Abrufen des Wetters
async function getWeather() {
const city = cityInput.value.trim(); // Wir erhalten die eingegebene Stadt
if (!city) {
weatherResult.textContent = 'Enter the city name! ❌';
return;
}
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url); // Anfrage wird gesendet
if (!response.ok) {
throw new Error('City not found ⚠');
}
const data = await response.json(); // Wir erhalten eine Antwort im JSON-Format
const temperature = data.main.temp; // Extrahieren Sie die Temperatur
const description = data.weather[0].description; // Wetterbeschreibung
// Wir zeigen das Ergebnis
weatherResult.textContent = `The temperature in ${city} is now ${temperature} ℃, ${description}.`;
} catch (error) {
weatherResult.textContent = error.message;
}
}
// Wir fügen einen Ereignishandler hinzu
getWeatherButton.addEventListener('click', getWeather);Erklärung des Codes
HTML-Struktur:
Das Eingabefeld für die Stadt („input“) und die Schaltfläche („button“) ermöglichen dem Benutzer die Interaktion mit der Anwendung.
Der Absatz ("p") dient zur Anzeige des Ergebnisses.
JavaScript-Verbindung:
Die Datei „script.js“ beschreibt die gesamte Logik der Arbeit mit der API.
Funktion getWeather():
Ruft die eingegebene Stadt aus dem Eingabefeld ab.
Erstellt eine URL für eine API-Anfrage.
Verwendet
fetch()zum Senden einer Anfrage.Verarbeitet die Antwort und extrahiert die Temperatur aus den Daten.
Zusätzliche Angaben:
Wir extrahieren auch die Wetterbeschreibung für ein detaillierteres Ergebnis.
Fehlerbehandlung:
Wenn die Stadt nicht gefunden wurde oder ein Netzwerkfehler aufgetreten ist, wird dem Benutzer eine entsprechende Meldung angezeigt.
Ereignis hinzufügen:
Die Funktion wird gestartet, wenn Sie auf die Schaltfläche "Wetter abrufen" klicken.
Start der Anwendung
Speichern Sie die Dateien „index.html“ und „script.js“ in einem Ordner.
Öffnen Sie die Datei „index.html“ in einem Browser.
Geben Sie den Namen der Stadt ein und klicken Sie auf „Wetter abrufen“. 🌇
Schlussfolgerungen
Jetzt wissen Sie, wie man mit der JavaScript-API arbeitet! Sie haben die Grundlagen von HTTP-Anfragen gemeistert, gelernt, wie man fetch verwendet, und haben eine Vorstellung von der Interaktion mit externen Diensten bekommen. Dieses Wissen wird Ihnen helfen, moderne Anwendungen zu erstellen und Ihr Verständnis von JavaScript zu vertiefen. 🚀
Darüber hinaus haben Sie sich mit den Grundlagen der Arbeit mit Datenformaten wie JSON vertraut gemacht und Erfahrungen in der Fehlerbehandlung bei der Interaktion mit APIs gesammelt. Diese Fähigkeiten sind die Grundlage für die Arbeit mit fortschrittlichen Technologien in der Webentwicklung.
Wenn Sie das Programmieren weiter erlernen möchten, probieren Sie die App „Kodik“ aus. Darin finden Sie verständliche und faszinierende Lektionen für Anfänger! 🌐