API stands for Application Programming Interface. Think of an API as a menu in a restaurant: - The menu provides a list of dishes you can order - You don't need to know how the kitchen prepares the food - You just order what you want using the menu's interface

Web APIs are interfaces that allow your JavaScript code to interact with web browsers, servers, or external services.

1. Browser APIs (Web APIs)

These are built into your web browser and let JavaScript interact with browser features. Every modern browser comes with a set of these APIs.

Key Browser APIs:

DOM API - Document Object Model

// Manipulate HTML elements
const title = document.getElementById('title');
title.textContent = 'Hello World!';
title.style.color = 'blue';

// Create new elements
const newDiv = document.createElement('div');
newDiv.innerHTML = '<p>New content!</p>';
document.body.appendChild(newDiv);

Fetch API - Make HTTP Requests

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

// POST request with data
fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'John Doe',
        email: 'john@example.com'
    })
});

Geolocation API - Get User's Location

<button onclick="getLocation()">Get My Location</button>
<p id="location"></p>

<script>
function getLocation() {
    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                document.getElementById('location').textContent = 
                    `Latitude: ${lat}, Longitude: ${lon}`;
            },
            (error) => {
                console.error("Error getting location:", error.message);
            }
        );
    } else {
        alert("Geolocation is not supported by your browser");
    }
}
</script>

LocalStorage API - Store Data Locally

// Store data
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('theme', 'dark');

// Retrieve data
const username = localStorage.getItem('username');
console.log(username); // "JohnDoe"

// Remove data
localStorage.removeItem('theme');

// Clear all data
localStorage.clear();

// Store objects (convert to JSON)
const user = { name: 'Jane', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// Retrieve objects
const savedUser = JSON.parse(localStorage.getItem('user'));

Canvas API - Draw Graphics

<canvas id="myCanvas" width="400" height="200"></canvas>

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

// Draw a rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);

// Draw a circle
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();

// Draw text
ctx.font = '20px Arial';
ctx.fillStyle = 'green';
ctx.fillText('Hello Canvas!', 50, 150);
</script>

2. Third-Party APIs

These APIs are provided by external services and require you to include their code in your page.

How Third-Party APIs Work:

Popular Third-Party API Examples:

Google Maps API

<!DOCTYPE html>
<html>
<head>
    <!-- Include Google Maps API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
        #map { height: 400px; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        function initMap() {
            // Create a map centered on New York
            const map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 40.7128, lng: -74.0060 },
                zoom: 12
            });

            // Add a marker
            const marker = new google.maps.Marker({
                position: { lat: 40.7128, lng: -74.0060 },
                map: map,
                title: 'New York City'
            });
        }

        // Initialize map when page loads
        window.onload = initMap;
    </script>
</body>
</html>

Weather API (OpenWeatherMap)

async function getWeather(city) {
    const apiKey = 'YOUR_API_KEY';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {
        const response = await fetch(url);
        const data = await response.json();

        console.log(`Weather in ${city}:`);
        console.log(`Temperature: ${data.main.temp}°C`);
        console.log(`Condition: ${data.weather[0].description}`);
        console.log(`Humidity: ${data.main.humidity}%`);

        return data;
    } catch (error) {
        console.error('Error fetching weather:', error);
    }
}

// Usage
getWeather('London');

GitHub API (No API key needed for public data)

async function getGitHubUser(username) {
    const url = `https://api.github.com/users/${username}`;

    const response = await fetch(url);
    const userData = await response.json();

    console.log(`GitHub Profile: ${userData.login}`);
    console.log(`Name: ${userData.name}`);
    console.log(`Followers: ${userData.followers}`);
    console.log(`Public Repos: ${userData.public_repos}`);

    return userData;
}

// Get user repositories
async function getUserRepos(username) {
    const url = `https://api.github.com/users/${username}/repos`;

    const response = await fetch(url);
    const repos = await response.json();

    repos.forEach(repo => {
        console.log(`${repo.name}: ${repo.description}`);
    });
}

// Usage
getGitHubUser('octocat');

Complete Practical Example: Weather Dashboard

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .weather-card { border: 1px solid #ddd; padding: 20px; margin: 10px 0; border-radius: 8px; }
        .temp { font-size: 2em; font-weight: bold; }
        .condition { font-size: 1.2em; }
    </style>
</head>
<body>
    <h1>Weather Dashboard</h1>

    <div>
        <input type="text" id="cityInput" placeholder="Enter city name">
        <button onclick="getWeather()">Get Weather</button>
    </div>

    <div id="weatherResult"></div>

    <script>
        // Your OpenWeatherMap API key (get one at openweathermap.org)
        const API_KEY = 'YOUR_API_KEY_HERE';

        async function getWeather() {
            const city = document.getElementById('cityInput').value;
            if (!city) {
                alert('Please enter a city name');
                return;
            }

            try {
                // Using Fetch API (Browser API) to call Weather API (Third-party API)
                const response = await fetch(
                    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
                );

                if (!response.ok) {
                    throw new Error('City not found');
                }

                const data = await response.json();
                displayWeather(data);

                // Save last searched city to localStorage
                localStorage.setItem('lastCity', city);

            } catch (error) {
                document.getElementById('weatherResult').innerHTML = 
                    `<p style="color: red;">Error: ${error.message}</p>`;
            }
        }

        function displayWeather(data) {
            const weatherHTML = `
                <div class="weather-card">
                    <h2>${data.name}, ${data.sys.country}</h2>
                    <div class="temp">${Math.round(data.main.temp)}°C</div>
                    <div class="condition">${data.weather[0].description}</div>
                    <p>Feels like: ${Math.round(data.main.feels_like)}°C</p>
                    <p>Humidity: ${data.main.humidity}%</p>
                    <p>Wind: ${data.wind.speed} m/s</p>
                </div>
            `;

            document.getElementById('weatherResult').innerHTML = weatherHTML;
        }

        // Check if we have a last searched city
        window.onload = function() {
            const lastCity = localStorage.getItem('lastCity');
            if (lastCity) {
                document.getElementById('cityInput').value = lastCity;
            }
        };
    </script>
</body>
</html>

Key Differences: Browser APIs vs Third-Party APIs

| Aspect | Browser APIs | Third-Party APIs | |--------|--------------|------------------| | Source | Built into the browser | Provided by external services | | Setup | No setup needed | Usually need API key | | Examples | DOM, Fetch, Geolocation | Google Maps, Twitter, Stripe | | Cost | Free | Often free tier, paid for heavy use | | Documentation | MDN Web Docs | Provider's website | | Access | Immediate | May require registration |

Best Practices When Using APIs

1. Error Handling

async function safeApiCall(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error('API call failed:', error);
        // Show user-friendly error message
        return null;
    }
}

2. API Keys Security

// Never expose API keys in client-side code for production
// For frontend-only apps, use:
// - Environment variables during build
// - Backend proxy server
// - Restricted API keys (domain-restricted)

// Bad: Exposing secret key
const API_KEY = 'my-secret-key-123'; // ❌ Don't do this!

// Good: Use backend endpoint
async function getData() {
    const response = await fetch('/api/get-weather?city=London');
    // Your backend handles the API key
}

3. Rate Limiting

// Add delays between API calls
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function makeMultipleRequests(urls) {
    const results = [];
    for (let url of urls) {
        const data = await fetch(url);
        results.push(await data.json());
        await delay(1000); // Wait 1 second between requests
    }
    return results;
}

4. Caching Responses

class ApiCache {
    constructor() {
        this.cache = new Map();
    }

    async getWithCache(url) {
        if (this.cache.has(url)) {
            console.log('Returning cached data');
            return this.cache.get(url);
        }

        const response = await fetch(url);
        const data = await response.json();

        // Cache for 5 minutes
        this.cache.set(url, data);
        setTimeout(() => this.cache.delete(url), 300000);

        return data;
    }
}

// Usage
const cache = new ApiCache();
const data = await cache.getWithCache('https://api.example.com/data');

Common API Response Formats

JSON (Most Common)

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com",
  "hobbies": ["reading", "gaming", "hiking"]
}

XML

<user>
  <name>John Doe</name>
  <age>30</age>
  <email>john@example.com</email>
</user>

Finding and Using APIs

Modern API Features

REST APIs

Traditional API architecture using HTTP methods: - GET: Retrieve data - POST: Create data - PUT: Update data - DELETE: Remove data

GraphQL APIs

// GraphQL query
const query = `
  query {
    user(id: "123") {
      name
      email
      posts {
        title
      }
    }
  }
`;

// Send to GraphQL endpoint
fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query })
});

WebSocket APIs

// Connect to WebSocket server
const socket = new WebSocket('wss://api.example.com/socket');

socket.onopen = () => {
    console.log('Connected!');
    socket.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
};

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Update received:', data);
};

Conclusion

Web APIs are the bridges that connect your JavaScript code to powerful features and services. Browser APIs give you access to the user's device capabilities, while third-party APIs connect you to vast amounts of data and functionality from around the web.

Start by mastering the basic Browser APIs (DOM, Fetch, LocalStorage), then gradually explore third-party APIs that interest you. Always remember to handle errors gracefully, respect rate limits, and keep user data secure.

Web APIs: A Complete Beginner's Guide

What Are Web APIs?

1. Browser APIs (Web APIs)

Key Browser APIs:

DOM API - Document Object Model

Fetch API - Make HTTP Requests

Geolocation API - Get User's Location

LocalStorage API - Store Data Locally

Canvas API - Draw Graphics

2. Third-Party APIs

How Third-Party APIs Work:

Popular Third-Party API Examples:

Google Maps API

Weather API (OpenWeatherMap)

GitHub API (No API key needed for public data)