अपने वेब एपीआई का उपयोग करके W3C विशिष्टता डेटा कैसे प्रदर्शित करें

एम्मी® पुरस्कार विजेता W3C वर्ल्ड वाइड वेब के लिए एक अंतरराष्ट्रीय मानक संगठन है। यह नए वेब मानक बनाता है और दुनिया भर में उन्हें सुसंगत और प्रासंगिक बनाए रखने के लिए उन्हें लगातार संशोधित करता है.

ब्राउज़र और वेबसाइट समय के साथ एक हद तक मानक अनुरूप हो गए हैं, यह वेबसाइटों को सभी विभिन्न ब्राउज़रों में समान रूप से प्रस्तुत करने और काम करने की अनुमति देता है। सार्वजनिक रूप से उपलब्ध सबसे उपयोगी संसाधनों में से एक w3c.org में W3C विशिष्टता दस्तावेज है.

हाल ही में W3C ने अपना डेटा एक वेब एपीआई के माध्यम से उपलब्ध कराया, जिसका प्रोजेक्ट पेज जीथब में है। अपने प्रोजेक्ट पृष्ठ से इस एपीआई का परिचय इस प्रकार है:

“डब्ल्यू 3 सी के डेटा के साथ बातचीत करने के इच्छुक हमारे समुदाय के डेवलपर्स से मांग के जवाब में, डब्ल्यू 3 सी सिस्टम्स टीम ने एक वेब एपीआई विकसित किया है। इसके माध्यम से हम विनिर्देशों, समूहों, संगठनों और उपयोगकर्ताओं पर डेटा उपलब्ध करा रहे हैं.”

आज की पोस्ट में हम देखेंगे W3C एपीआई के माध्यम से विशिष्टता डेटा कैसे प्राप्त करें. आपको https://api.w3.org/doc में विशिष्टता डेटा और अन्य लाने के लिए पोस्ट किए जाने वाले विभिन्न अनुरोध मिलेंगे, यह एपीआई का परीक्षण करने के लिए प्रत्येक अनुरोध के लिए सैंडबॉक्स के साथ भी आता है, लेकिन आपको एक की आवश्यकता होगी एपीआई कुंजी.

आइए पहले देखते हैं एपीआई कुंजी कैसे प्राप्त करें.

1. अपने W3C खाते में लॉगिन करें या एक बनाएं.
2. फिर जाएं API कुंजी प्रबंधित करें अपने प्रोफाइल पेज में.
3. क्लिक करें नई एपीआई कुंजी और इसे अपनी कुंजी उत्पन्न करने के लिए एक नाम दें.
4. फिर यदि आप चाहें, तो आप इसे कॉपी-पेस्ट कर सकते हैं एपीआई कुंजी सैंडबॉक्स में एपीआई का परीक्षण करने के लिए वेबपेज https://api.w3.org/doc की शुरुआत में टेक्स्टबॉक्स.

इस पोस्ट के लिए, हम देखेंगे अनुरोध जो उपयोग करता है shortnames विनिर्देश URL, विवरण और दस्तावेज़ स्थिति प्रदर्शित करने के लिए. अनुरोध इस तरह दिखता है:

https://api.w3.org/Specifications/shortname?apikey=apikey&_format=json 

उदाहरण के लिए, एक HTML5 कल्पना अनुरोध इस तरह होगा;

https://api.w3.org/Specifications/html5?apikey=apikey&_format=json 

अब, हम HTML पर ध्यान केंद्रित करेंगे जिसका उपयोग हम एपीआई के माध्यम से प्राप्त डेटा को प्रदर्शित करने के लिए करेंगे। इसके लिए मैंने HTML टेम्पलेट का उपयोग करने का निर्णय लिया है। HTML टेम्प्लेट का उपयोग HTML कोड को रखने के लिए किया जाता है जो कि जावास्क्रिप्ट का उपयोग करते हुए पेज पर जोड़े जाने तक पार्स किए जाते हैं लेकिन रेंडर नहीं किए जाते.

 
डब्लू 3 सी स्पेश
 
  

खाका तैयार है। अब, जावास्क्रिप्ट पर जो HTTP अनुरोध कर रहा है और HTML में प्रतिक्रिया JSON डेटा प्रदर्शित करेगा। यहां वैश्विक चर का सेट है जिसकी हम शुरुआत करेंगे:

var shortnames = ['html5', 'selectors4', 'बैटरी-स्टेटस', 'fullscreen'], xmlhttp = new XMLHttpRequest (), w3cSpecEEle = document .querySelector ('# w3cSpecs'), templateEle = document.querySquerySqueries '); 

shortnames की एक सरणी है shortnames उन विनिर्देशों के बारे में जिन्हें हम अपने वेबपेज में प्रदर्शित करना चाहते हैं; यदि आप खोजना चाहते हैं संक्षिप्त नाम एक विनिर्देश W3C URL को देखता है और आप इसे अंत में देख पाएंगे.

हालाँकि, यह गारंटी नहीं है कि आप प्राप्त कर सकेंगे सब इस तरह के विनिर्देशों; की कोई निश्चित सूची नहीं है shortnames और विनिर्देश जो अभी तक एपीआई के माध्यम से उपलब्ध हैं.

के माध्यम से लूप shortnames सरणी और प्रत्येक के लिए एक HTTP अनुरोध पोस्ट करें, और प्रतिक्रिया प्राप्त करें.

के लिए (var i = 0; मैं; 
 responseText JSON स्ट्रिंग है और JSON ऑब्जेक्ट प्राप्त करने के लिए पार्स किया जाना है. displaySpec वह फ़ंक्शन है जो JSON डेटा का उपयोग करेगा और इसे HTML में प्रदर्शित करेगा.
 
नीचे HTML5 विशिष्टता के लिए और कोड के लिए नमूना JSON प्रतिक्रिया पाठ है displaySpec. 
 
 
function displaySpec (json) if ('सामग्री' टेम्पलेट में) / * टेम्पलेट की सामग्री प्राप्त करें * / templateEleContent = templateEle.content; / * h2 हैडर के लिए कल्पना शीर्षक जोड़ें * / w3cSpecHeader = templateEleContent.querySelector ('। w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * लिंक के लिए कल्पना URL जोड़ें * / w3cSpecLink = templateEleContent.querySelector ('। w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * कल्पना विवरण जोड़ें * / w3cSpecDetail = templateEleContent.querySeor ('। w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * कल्पना की स्थिति जोड़ें और उसके मूल्य के आधार पर इसे रंग दें * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('चिह्न'); var status = json._links ["नवीनतम-संस्करण"]। शीर्षक; W3cSpecLatestVerStatus.textContent = स्थिति; स्विच (स्थिति) केस 'अनुशंसा': W3cSpecLatestVerStatus.className = "अनुशंसा"; टूटना; केस 'वर्किंग ड्राफ्ट': W3cSpecLatestVerStatus.className = 'ड्राफ्ट'; टूटना; मामला 'सेवानिवृत्त': W3cSpecLatestVerStatus.className = 'सेवानिवृत्त'; टूटना; मामला 'उम्मीदवार की सिफारिश': W3cSpecLatestVerStatus.className = 'उम्मीदवार प्रत्यायन'; टूटना;  / * मुख्य div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)) टेम्पलेट की सामग्री की प्रतिलिपि जोड़ें;  और / * व्यक्तिगत रूप से तत्वों को बनाने के लिए JS कोड जोड़ें * / 
 
अगर ('सामग्री' टेम्पलेट में) यह जांचना है कि क्या HTML टेम्पलेट ब्राउज़र द्वारा समर्थित है, यदि यह नहीं है, तो सभी HTML तत्वों को JS में ही बनाएँ। और जब समर्थन होता है, तो JSON से संबंधित डेटा के साथ टेम्पलेट की सामग्री के अंदर मौजूद HTML तत्वों को भरें और अंत में, टेम्पलेट की सामग्री की एक कॉपी को मुख्य रूप से संलग्न करें। # w3cSpecs div.
 
बस। सीएसएस शैलियों के एक बिट के साथ, उत्पादन इस तरह दिखता है: