Ako zobrazovať údaje špecifikácie W3C pomocou jeho webového rozhrania API

Ocenenie Emmy® W3C je medzinárodná normalizačná organizácia pre World Wide Web. Vytvára nové webové štandardy a neustále ich reviduje, aby boli konzistentné a relevantné na celom svete.

Prehliadače a webové stránky sa stali štandardne vo väčšom rozsahu v súlade s časom, čo umožňuje webovým stránkam robiť a pracovať jednotne vo všetkých rôznych prehliadačoch. Jedným z najužitočnejších verejne dostupných zdrojov sú dokumenty W3C špecifikácie v w3c.org.

Nedávno spoločnosť W3C sprístupnila svoje údaje prostredníctvom webového rozhrania API, ktorého stránka projektu je v spoločnosti Github. Úvod tohto rozhrania API z jeho projektovej stránky je nasledovný:

“Ako odpoveď na dopyt vývojárov v našej komunite, ktorí chcú komunikovať s údajmi W3C, W3C Systems Team vyvinul Web API. Prostredníctvom nej sprístupňujeme údaje o špecifikáciách, skupinách, organizáciách a používateľoch.”

V dnešnom príspevku uvidíme ako získať údaje o špecifikáciách prostredníctvom rozhrania W3C API. Nájdete tu rôzne požiadavky, ktoré môžete odoslať na získanie údajov o špecifikáciách a ďalších informácií na adrese https://api.w3.org/doc, ale pre každú požiadavku na testovanie rozhrania API sa dodáva aj karanténa, ale budete potrebovať Kľúč rozhrania API.

Po prvýkrát sa pozrieme ako získať kľúč API.

1. Prihláste sa do svojho účtu W3C alebo ho vytvorte.
2. Potom choď Správa kľúčov API na vašej stránke profilu.
3. kliknite Nový kľúč rozhrania API a zadajte mu názov na vygenerovanie kľúča.
4. Potom, ak si to želáte, môžete ho skopírovať a vložiť do api kľúč textové pole na začiatku webovej stránky https://api.w3.org/doc na testovanie rozhrania API v karanténe.

Pre tento príspevok sa pozrieme žiadosť, ktorá používa krátkymi aby sa zobrazila špecifikácia URL, popis a stav dokumentu. Požiadavka vyzerá takto:

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

Napríklad požiadavka na špecifikáciu HTML5 bude takto;

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

Teraz sa zameriame na HTML, ktorý použijeme na zobrazenie údajov získaných prostredníctvom rozhrania API. Preto som sa rozhodol použiť šablónu HTML. Šablóny HTML sa používajú na uchovávanie kódu HTML, ktorý je analyzovaný, ale nie vykresľovaný, kým sa nezobrazia na stránke pomocou jazyka JavaScript.

 
W3C SPECS
 
  

Šablóna je pripravená. Teraz prejdite na JavaScript, ktorý bude robiť požiadavku HTTP a zobrazovať údaje JSON odpovede v jazyku HTML. Tu je súbor globálnych premenných, ktoré začneme:

var shortnames = ['html5', 'selectors4', 'stav batérie', 'fullscreen'], xmlhttp = nový XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ,); 

krátkymi je pole krátkymi špecifikácií, ktoré chceme zobraziť na našej webovej stránke; ak chcete nájsť krátkemu Špecifikácia sa pozrie na svoju adresu URL W3C a na konci ju budete môcť vidieť.

Nie je však zaručené, že sa budete môcť dostať všetko Takéto špecifikácie; neexistuje definitívny zoznam krátkymi a Špecifikácie, ktoré sú zatiaľ dostupné cez rozhranie API.

Smyčka cez krátkymi pole a pošlite žiadosť HTTP pre každého a vyzdvihnite odpoveď.

pre (var i = 0; i 
 responseText je reťazec JSON a musí byť analyzovaný na získanie objektu JSON. displaySpec je funkcia, ktorá použije údaje JSON a zobrazí ich v jazyku HTML.
 
Nižšie je vzorový text odpovede JSON pre špecifikáciu HTML5 a po kóde displaySpec. 
 
 
funkcia displaySpec (json) if ('content' v templateEle) / * získať obsah šablóny * / templateEleContent = templateEle.content; / * pridať hlavičku h2 hlavičky * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * pridať špeciálnu adresu URL do odkazu * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * pridať opis spec * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * pridať stav spec a vyfarbiť ho podľa jeho hodnoty * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["posledná verzia"]. W3cSpecLatestVerStatus.textContent = status; prepínač (stav) prípad "Odporúčanie": W3cSpecLatestVerStatus.className = "odporúčanie"; prestávka; prípadový "pracovný návrh": W3cSpecLatestVerStatus.className = 'draft'; prestávka; prípad "Odchádzajúci": W3cSpecLatestVerStatus.className = 'dôchodcovia'; prestávka; prípad "Odporúčanie pre kandidáta": W3cSpecLatestVerStatus.className = 'odporúčanie pre kandidáta'; prestávka;  / * pridajte kópiu obsahu šablóny do hlavnej div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  inak / * pridať kód JS na vytvorenie jednotlivých prvkov * / 
 
ak ('obsah' v šablóneEle) je skontrolovať, či je šablóna HTML podporovaná prehliadačom, ak nie, vytvorte všetky prvky HTML v samotnom JS. A keď je podpora, vyplňte prvky HTML, ktoré sú v rámci obsahu Šablóny, s príslušnými údajmi z JSON a nakoniec pridajte kópiu obsahu šablóny do hlavnej # w3cSpecs div.
 
To je všetko. S trochou CSS stylingu výstup vypadá takto: