HTML Web APIs Overview

Web API किसे कहते हैं

Web API, JavaScript ऑब्जेक्ट्स और मेथड्स का एक सेट होता है जिसे ब्राउज़र एक्सपोज़ करता है ताकि पेज सिर्फ static HTML से ज़्यादा कुछ कर सके -- डिवाइस की लोकेशन पढ़ना, पेज विज़िट्स के बीच डेटा सेव करना, या सर्वर से लाइव कनेक्शन खोलना, ये सब ऐसी चीज़ें हैं जो HTML और CSS अकेले नहीं कर सकते, और यही गैप ये APIs भरते हैं।

उदाहरण: What Counts as a Web API

<script>
  if (navigator.geolocation) {
    console.log('Geolocation API is available');
  }
</script>

इस चैप्टर में शामिल पाँच APIs

यह चैप्टर पाँच खास Web APIs को विस्तार से कवर करता है: Geolocation (यूज़र की फिज़िकल लोकेशन पढ़ना), Drag and Drop (यूज़र्स को माउस से पेज एलिमेंट्स ड्रैग करने देना), Web Storage (ब्राउज़र में विज़िट्स के बीच key-value डेटा सेव करना), Web Workers (बैकग्राउंड थ्रेड में JavaScript चलाना), और Server-Sent Events (सर्वर से लाइव, एक-तरफ़ा अपडेट्स की स्ट्रीम पाना)।

उदाहरण: The Five APIs Covered in This Chapter

<!-- Topics covered: Geolocation, Drag and Drop, Web Storage, Web Workers, Server-Sent Events -->

परमिशन्स और यूज़र का भरोसा

इनमें से कई APIs -- खासकर Geolocation -- को कोई भी डेटा लौटाने से पहले ब्राउज़र को यूज़र से स्पष्ट परमिशन माँगनी पड़ती है, क्योंकि ये संवेदनशील जानकारी को छूते हैं।

कोई पेज चुपचाप यूज़र की लोकेशन नहीं पढ़ सकता; ब्राउज़र हमेशा पहले एक दिखने वाला परमिशन प्रॉम्प्ट दिखाता है, और यूज़र उसे मना कर सकता है।

उदाहरण: Permissions and User Trust

<button onclick="navigator.geolocation.getCurrentPosition(pos => console.log(pos))">
  Share My Location
</button>

Client-Side बनाम Server-Side ज़िम्मेदारियाँ

Web Storage और Drag and Drop पूरी तरह client-side हैं -- ये यूज़र के अपने ब्राउज़र में ही चलते और डेटा स्टोर करते हैं, इसमें कोई सर्वर शामिल नहीं होता।

दूसरी ओर, Server-Sent Events को एक ऐसे सर्वर के सहयोग की ज़रूरत होती है जो कनेक्शन को खुला रखे और उसके ज़रिए डेटा पुश करे, जिससे यह इस चैप्टर की इकलौती ऐसी API बनती है जो मैचिंग बैकएंड सपोर्ट पर निर्भर करती है।

उदाहरण: Client-Side vs Server-Side Responsibilities

<script>
  localStorage.setItem('theme', 'dark');
  const events = new EventSource('/updates');
</script>

आगे क्या पढ़ें

इसके बाद आने वाले पाँचों टॉपिक्स में से हर एक किसी एक API में गहराई से जाता है: उसका सेटअप, उसके मेथड्स, आम गलतियाँ, और पूरे काम करने वाले उदाहरण।

Geolocation, Drag and Drop, Web Storage, Web Workers, और Server-Sent Events के डीटेल में जाने से पहले यह ओवरव्यू सिर्फ यह दिखाने के लिए है कि ये आपस में कैसे जुड़े हैं।

उदाहरण: Where to Go Next

<!-- See the Geolocation, Drag and Drop, Web Storage, Web Workers, and SSE tutorials -->