HTML वेब API का अवलोकन
In this page:
Web API किसे कहते हैं
Web API, JavaScript ऑब्जेक्ट्स और मेथड्स का एक सेट होता है जिसे ब्राउज़र एक्सपोज़ करता है ताकि पेज सिर्फ static HTML से ज़्यादा कुछ कर सके -- डिवाइस की लोकेशन पढ़ना, पेज विज़िट्स के बीच डेटा सेव करना, या सर्वर से लाइव कनेक्शन खोलना, ये सब ऐसी चीज़ें हैं जो HTML और CSS अकेले नहीं कर सकते, और यही गैप ये APIs भरते हैं।
if (navigator.geolocation))।उदाहरण: 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 -->- यह मान लेना कि इनमें से हर API बिना permission prompt के काम करने की guarantee देता है -- Geolocation, और तेज़ी से बाकी sensitive APIs भी, कोई भी data return करने से पहले explicit user permission मांगते हैं।
- हर slow task के लिए Web Worker का इस्तेमाल करना, जबकि कई "slow" operations असल में main thread पर चलने के लिए काफी तेज़ होते हैं और worker की extra complexity इसके लायक नहीं होती।
- यह भूल जाना कि ये JavaScript APIs हैं जो browser-provided global objects (जैसे navigator.geolocation) के ज़रिए access होते हैं, खुद HTML tags या attributes नहीं।
- Web APIs static markup से आगे बढ़कर web page को और भी क्षमताएं देते हैं: location sense करना, data store करना, drag gestures पर react करना, background scripts चलाना, और live server updates पाना।
- इस chapter की हर API JavaScript के ज़रिए access होती है, भले ही वह किसी HTML page से trigger हो और अक्सर सीधे HTML elements और events से जुड़ी हो।
- इनमें से ज़्यादातर APIs को या तो explicit user permission चाहिए (जैसे Geolocation) या एक compatible, modern browser -- हमेशा support check करें और वह case handle करें जहाँ कोई API उपलब्ध न हो।
Geolocation, Drag and Drop, Web Storage, Web Workers, और Server-Sent Events सभी मौजूदा major browsers में supported हैं, हालांकि permission-prompt का exact behavior browsers के बीच थोड़ा अलग होता है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: