Jak zobrazit data specifikace W3C pomocí webového rozhraní API

Ocenění Emmy® W3C je mezinárodní organizace pro standardy World Wide Web. Vytváří nové webové standardy a neustále je reviduje tak, aby byly konzistentní a relevantní po celém světě.

Prohlížeče a webové stránky se časem staly standardními standardy, což umožňuje webovým stránkám vykreslovat a pracovat jednotně ve všech různých prohlížečích. Jedním z nejužitečnějších zdrojů veřejně dostupných je dokumentace W3C Specification v w3c.org.

V poslední době W3C zpřístupnila svá data prostřednictvím Web API, jehož projektová stránka je v Githubu. Úvod tohoto API ze stránky projektu je následující:

“V reakci na poptávku vývojářů v naší komunitě, kteří chtějí komunikovat s daty W3C, vyvinula W3C Systems Team Web API. Prostřednictvím ní zpřístupňujeme údaje o specifikacích, skupinách, organizacích a uživatelích.”

V dnešním příspěvku uvidíme jak načíst data specifikace přes API W3C. Naleznete zde různé požadavky, které můžete odeslat, abyste získali údaje o Specifikacích, a další v https://api.w3.org/doc, ale také přichází s karanténou pro každou žádost o testování rozhraní API. Klíč API.

Podívejme se nejprve jak získat klíč API.

1. Přihlaste se ke svému účtu W3C nebo si ho vytvořte.
2. Pak jdi Správa klíčů API na stránce profilu.
3. Klikněte na Nový klíč API a dát mu jméno, aby vygeneroval váš klíč.
4. Pokud si to přejete, můžete je zkopírovat a vložit do klíč textbox na začátku webové stránky https://api.w3.org/doc otestuje rozhraní API v karanténě.

Pro tento příspěvek se podíváme do požadavku, který používá zkratek zobrazit adresu URL specifikace, popis a stav dokumentu. Požadavek vypadá takto:

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

Například požadavek HTML5 spec bude takový;

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

Nyní se zaměřme na HTML, které použijeme k zobrazení dat načtených prostřednictvím rozhraní API. Za tímto účelem jsem se rozhodla použít šablonu HTML. Šablony HTML slouží k uchovávání kódu HTML, který je analyzován, ale není vykreslen, dokud nejsou přidány na stránku pomocí jazyka JavaScript.

 
W3C SPECS
 
  

Šablona je připravena. Nyní, na JavaScript, který bude dělat HTTP požadavek a zobrazování odpovědí JSON data v HTML. Zde uvádíme sadu globálních proměnných:

var shortnames = ['html5', 'selectors4', 'stav baterie', 'celá obrazovka'], xmlhttp = nová XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Šablona „); 

zkratek je pole zkratek specifikací, které chceme zobrazit na našich webových stránkách; pokud chcete najít krátké jméno Specifikace pohled na jeho W3C URL a budete moci vidět na konci.

Nicméně, to není zaručeno, že budete moci získat Všechno Takové specifikace; neexistuje definitivní seznam zkratek a Specifikace, které jsou dostupné prostřednictvím API.

Smyčka přes zkratek a pošle HTTP požadavek pro každého a načte odpověď.

pro (var i = 0; i 
 responseText je řetězec JSON a musí být analyzován, aby se objekt JSON dostal. displaySpec je funkce, která bude používat data JSON a zobrazovat je v HTML.
 
Níže je uveden ukázkový text odpovědi JSON pro specifikaci HTML5 a za kódem displaySpec. 
 
 
function displaySpec (json) if ('content' in templateEle) / * získat obsah šablony * / templateEleContent = templateEle.content; / * přidat záhlaví spec do h2 záhlaví * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * přidat spec URL na odkaz * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * přidat popis popisu * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * přidat status spec a barvu na základě jeho hodnoty * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('značka'); var status = json._links ["nejnovější verze"]. W3cSpecLatestVerStatus.textContent = stav; switch (status) případ 'Doporučení': W3cSpecLatestVerStatus.className = "doporučení"; přestávka; případ 'Pracovní návrh': W3cSpecLatestVerStatus.className = 'draft'; přestávka; case 'Retired': W3cSpecLatestVerStatus.className = 'retired'; přestávka; případ 'Doporučení kandidáta': W3cSpecLatestVerStatus.className = 'kandidátRecommendation'; přestávka;  / * přidat kopii obsahu šablony do hlavního div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * přidat kód JS k vytvoření prvků jednotlivě * / 
 
if ('content' v šabloněEle) je zkontrolovat, zda je prohlížeč podporován HTML šablonou, pokud ne, vytvořte všechny HTML elementy v samotném JS. A když je podpora podporována, vyplňte prvky HTML, které jsou uvnitř obsahu šablony, příslušnými daty ze služby JSON a nakonec přidejte kopii obsahu šablony do hlavního adresáře. # w3cSpecs div.
 
A je to. S trochou stylů CSS vypadá výstup takto: