Så här visar du W3C-specifikationsdata med hjälp av webb API

Emmy® prisvinnande W3C är en internationell standardorganisation för World Wide Web. Det skapar nya webbstandarder och reviderar dem hela tiden för att hålla dem konsekventa och relevanta över hela världen.

Webbläsare och webbplatser har blivit standardkompatibla i större utsträckning med tiden, vilket gör det möjligt för webbplatser att göra och arbeta enhetligt över alla olika webbläsare. En av de mest användbara resurserna som är tillgängliga för allmänheten är W3C-specifikationsdokumentationen i w3c.org.

Nyligen gjorde W3C sin data tillgänglig via ett Web API, vars projektsida finns i Github. Införandet av detta API från sin projektsida är följande:

“Som svar på efterfrågan från utvecklare i vår community som vill interagera med W3Cs data har W3C Systems Team utvecklat ett Web API. Genom det gör vi tillgängliga data om Specifikationer, Grupper, Organisationer och Användare.”

I dagens inlägg ser vi hur man hämtar specifikationsdata via W3C API. Du hittar de olika förfrågningarna som du kan posta för att hämta specifikationsdata och andra på https://api.w3.org/doc. Det kommer också med en sandlåda för varje förfrågan att testa API, men du behöver en API-nyckel.

Låt oss först se hur man får API-nyckeln.

1. Logga in på ditt W3C-konto eller skapa ett.
2. Gå sedan till Hantera API-nycklar på din profil sida.
3. Klick Ny API-nyckel och ge det ett namn för att skapa din nyckel.
4. Om du så önskar kan du kopiera-klistra in den i api nyckel textbox i början av webbsidan https://api.w3.org/doc för att testa API: n i sandlådan.

För detta inlägg tittar vi in begäran som använder kortnamnen för att visa specifikationsadress, beskrivning och dokumentstatus. Förfrågan ser så här ut:

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

Till exempel är en HTML5-specifik begäran så här;

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

Låt oss nu fokusera på den HTML som vi ska använda för att visa data som hämtats via API: n. För detta har jag bestämt mig för att använda HTML Template. HTML-mallar används för att hålla HTML-kod som analyseras men inte återges tills de läggs till sidan med JavaScript.

 
W3C-SPECIFIKATIONER
 
  

Mallen är klar. Nu på JavaScript som kommer att göra HTTP-förfrågan och visa svaret JSON-data i HTML. Här är uppsättningen globala variabler som vi börjar med:

var shortnames = ['html5', 'selectors4', 'batteristatus', 'fullscreen'], xmlhttp = ny XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector '); 

kortnamnen är en uppsättning av kortnamnen av de specifikationer vi vill visa på vår webbsida om du vill hitta kort namn av en specifikation titta på dess W3C URL och du kommer att kunna se den i slutet.

Det är dock inte garanterat att du kommer att kunna få Allt Specifikationer som detta; Det finns ingen definitiv lista över kortnamnen och specifikationer som är tillgängliga via API ändå.

Loop genom kortnamnen array och posta en HTTP-begäran för varje och hämta svaret.

för (var i = 0; i 
De response är en JSON-sträng och måste analyseras för att få JSON-objektet. displaySpec är den funktion som ska använda JSON-data och visa den i HTML.
 
Nedan är provet JSON-svartext för HTML5-specifikation och efter koden för displaySpec. 
 
 
funktionsdisplaySpec (json) if ('content' i templateEle) / * få mallens innehåll * / templateEleContent = templateEle.content; / * lägg till spec titel till h2 header * / w3cSpecHeader = templateEleContent.querySelector ('.w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * lägg till spec URL till länken * / w3cSpecLink = templateEleContent.querySelector ('.w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * lägg till spec beskrivning * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * Lägg till specstatus och färga den baserat på dess värde * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["senaste versionen"]. titel; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Recommendation': W3cSpecLatestVerStatus.className = "rekommendation"; ha sönder; fallet "Working Draft": W3cSpecLatestVerStatus.className = 'draft'; ha sönder; fallet "Pensionerad": W3cSpecLatestVerStatus.className = 'pensionär'; ha sönder; fallet "Kandidatrekommendation": W3cSpecLatestVerStatus.className = 'candidateRecommendation'; ha sönder;  / * Lägg till kopia av mallens innehåll till huvuddelen div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  annars / * lägg till JS-kod för att skapa elementen individuellt * / 
 
om ("innehåll" i templateEle) är att kontrollera om HTML-mall stöds av webbläsaren, om det inte är det, skapa alla HTML-elementen i JS själv. Och när det finns stöd fyller du de HTML-element som finns i mallens innehåll med respektive data från JSON och till sist lägger du till en kopia av Mallens innehåll till huvudmenyn # w3cSpecs div.
 
Det är allt. Med lite CSS-stylingar ser utmatningen ut så här: