JavaScript Web APIs

📌 Elements

💡 Dasar Web APIs

Web APIs adalah antarmuka pemrograman yang disediakan browser untuk berinteraksi dengan fitur browser dan sistem operasi. Ini berbeda dari JavaScript inti (ECMAScript).

dom-api.js

          
            // DOM Manipulation

            const button = document.querySelector('#myButton');

            button.addEventListener('click', () => {

              console.log('Button clicked!');

            });

            // Fetch API

            fetch('https://api.example.com/data')

              .then(response => response.json())

              .then(data => console.log(data))

              .catch(error => console.error('Error:', error));

📝 Penjelasan Detail:

• DOM API - Untuk manipulasi elemen HTML
• Fetch API - Untuk permintaan jaringan (HTTP requests)
• Web Storage - Penyimpanan lokal (localStorage, sessionStorage)
• Geolocation - Akses lokasi pengguna
• Canvas - Untuk menggambar grafis secara dinamis

🛠️ Features

web-apis.js

          
            // Local Storage

            localStorage.setItem('username', 'JohnDoe');

            const user = localStorage.getItem('username');

            // Geolocation

            navigator.geolocation.getCurrentPosition(

              (position) => {

                console.log('Latitude:', position.coords.latitude);

              },

              (error) => {

                console.error('Error getting location:', error);

              }

            );

            // Service Workers

            if ('serviceWorker' in navigator) {

              navigator.serviceWorker.register('/sw.js');

            }

ℹ️ Jenis Web APIs

Browser menyediakan berbagai Web APIs: DOM, Fetch, Web Storage, Geolocation, Canvas, Web Audio, WebRTC, Service Workers, dan banyak lagi.

📊 Basic Tables

apis-comparison.js

          
            // Perbandingan Storage APIs

            Cookies       // 4KB, dikirim ke server, kadaluarsa

            localStorage  // 5-10MB, persisten, hanya client-side

            sessionStorage // 5-10MB, hilang saat tab ditutup

            IndexedDB     // >50MB, database NoSQL client-side

            // Perbandingan Request APIs

            XMLHttpRequest  // Legacy, callback-based

            Fetch API        // Modern, promise-based

            Axios            // Library populer, fitur tambahan

📝 Penjelasan Detail:

• Storage APIs - Untuk penyimpanan data di browser
• Cookies - Kecil (4KB), selalu dikirim ke server dengan permintaan
• Web Storage - Lebih besar (5-10MB), hanya diakses di client-side
• IndexedDB - Untuk penyimpanan data terstruktur dalam jumlah besar
• Fetch API - Pengganti modern untuk XMLHttpRequest

🚀 Advanced Table

advanced-apis.js

          
            // Web Workers

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

            worker.postMessage('Start processing');

            worker.onmessage = (e) => {

              console.log('Message from worker:', e.data);

            };

            // WebSocket

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

            socket.onopen = () => {

              socket.send('Hello Server!');

            };

            socket.onmessage = (e) => {

              console.log('Message from server:', e.data);

            };

            // Intersection Observer

            const observer = new IntersectionObserver((entries) => {

              entries.forEach(entry => {

                if (entry.isIntersecting) {

                  entry.target.classList.add('visible');

                }

              });

            });

            observer.observe(document.querySelector('.lazy-load'));

ℹ️ Web APIs Canggih

Web Workers untuk multithreading, WebSocket untuk komunikasi real-time, Intersection Observer untuk deteksi elemen yang terlihat, dan banyak API modern lainnya.

💡 Pro Tips

🎯 Best Practices Web APIs

Selalu periksa dukungan browser, gunakan polyfill untuk API baru, tangani error dengan baik, dan optimalkan performa.

api-tips.js

          
            // ✅ Good - Feature detection

            if ('IntersectionObserver' in window) {

              // Gunakan IntersectionObserver

            } else {

              // Fallback untuk browser lama

            }

            // ❌ Avoid - Asumsi API selalu tersedia

            navigator.geolocation.getCurrentPosition(callback);

            // Bisa error jika geolocation tidak didukung

            // ✅ Better - Error handling

            try {

              const mediaStream = await navigator.mediaDevices.getUserMedia({

                video: true

              });

            } catch (error) {

              console.error('Error accessing camera:', error);

              // Tampilkan pesan ke pengguna

            }

📝 Penjelasan Detail:

• Feature detection - Selalu periksa dukungan browser sebelum menggunakan API
• Error handling - Tangani error dengan baik untuk pengalaman pengguna yang lebih baik
• Performance - Web Workers untuk tugas berat, debounce/throttle untuk event handlers
• Security - Batasi akses API sensitif (seperti kamera/lokasi)
• Privacy - Beri tahu pengguna saat mengakses data pribadi
• Polyfills - Gunakan untuk API baru di browser lama

🌐 Info

📚 Tools untuk Web APIs

Beberapa tools berguna: Can I Use (kompatibilitas browser), MDN Web Docs (dokumentasi), Polyfill.io (polyfill service), dan Web API Manager untuk testing.

📝 Sumber Belajar Lanjutan:

• MDN Web APIs - Dokumentasi resmi Mozilla
• Web.dev - Panduan modern dari Google
• Can I Use - Tabel kompatibilitas browser
• Web Platform Tests - Test suite untuk Web APIs
• Browser Compatibility Data - Data dukungan browser terkini