Kā parādīt W3C specifikācijas datus, izmantojot tās Web API

Emmy® godalgotā W3C ir starptautiska standartu organizācija World Wide Web. Tas rada jaunus tīmekļa standartus un tos nepārtraukti pārskata, lai saglabātu tos konsekventi un atbilstīgiem visā pasaulē.

Pārlūkprogrammas un tīmekļa vietnes laika gaitā ir kļuvušas par standarta prasībām atbilstošākas, tādējādi tīmekļa vietnes var padarīt vienveidīgas un pieejamas dažādās pārlūkprogrammās. Viens no visnoderīgākajiem publiski pieejamiem resursiem ir W3C specifikācijas dokumentācija vietnē w3c.org.

Nesen W3C savus datus darīja pieejamus, izmantojot tīmekļa API, kuras projekta lapa atrodas Githubā. Šīs API ievads no projekta lapas ir šāds:

“Atbildot uz mūsu kopienas izstrādātāju pieprasījumu, kas vēlas sadarboties ar W3C datiem, W3C sistēmu komanda ir izstrādājusi tīmekļa API. Ar to mēs darām pieejamus datus par specifikācijām, grupām, organizācijām un lietotājiem.”

Šodienas amatā mēs redzēsim kā iegūt specifikācijas datus, izmantojot W3C API. Jūs atradīsiet dažādus pieprasījumus, ko varat publicēt, lai ielādētu Specifikācijas datus un citus, kas pieejami vietnē https://api.w3.org/doc, kā arī katram pieprasījumam pārbaudīt API, bet jums būs nepieciešams API atslēga.

Vispirms redzēsim kā iegūt API atslēgu.

1. Piesakieties savā W3C kontā vai izveidojiet to.
2. Tad dodieties uz Pārvaldiet API atslēgas jūsu profila lapā.
3. Klikšķis Jauna API atslēga un dodiet tai nosaukumu, lai ģenerētu atslēgu.
4. Tad, ja vēlaties, varat to kopēt api taustiņš tekstlodziņš tīmekļa lapas https://api.w3.org/doc sākumā, lai pārbaudītu API smilšu kastē.

Šim ziņojumam mēs izskatīsim pieprasījums, kas izmanto vārdu nosaukumi lai parādītu specifikācijas URL, aprakstu un dokumenta statusu. Pieprasījums izskatās šādi:

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

Piemēram, HTML5 spec pieprasījums būs šāds;

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

Tagad koncentrēsimies uz HTML, ko izmantosim, lai parādītu datus, kas iegūti, izmantojot API. Šim nolūkam esmu nolēmis izmantot HTML veidni. HTML veidnes tiek izmantotas, lai turētu HTML kodu, kas ir parsēts, bet netiek sniegts, kamēr tās netiek pievienotas lapai, izmantojot JavaScript.

 
W3C SPECS
 
  

Veidne ir gatava. Tagad, uz JavaScript, kas būs padarīt HTTP pieprasījumu un parādīs atbildes JSON datus HTML. Šeit ir globālo mainīgo kopums, ar kuru mēs sāksim ar:

var shortnames = ['html5', 'selectors4', 'battery-status', 'fullscreen'), xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('veidne '); 

vārdu nosaukumi ir masīvs vārdu nosaukumi no specifikācijām, kuras mēs vēlamies parādīt mūsu mājas lapā; ja vēlaties atrast īss vārds Specifikācijas skatiet tās W3C URL un jūs to varēsiet redzēt beigās.

Tomēr nav garantēts, ka varēsiet saņemt viss Šādas specifikācijas; nav galīgā saraksta vārdu nosaukumi un specifikācijas, kas ir pieejamas API.

Caur cauri vārdu nosaukumi masīvs un publicējiet HTTP pieprasījumu katram, un ielādējiet atbildi.

par (var i = 0; i 
The atbildeTeksts ir JSON virkne, un tā ir jāizanalizē, lai iegūtu JSON objektu. displaySpec ir funkcija, kas izmantos JSON datus un parādīs to HTML.
 
Tālāk ir redzams JSON atbildes teksts HTML5 specifikācijai un pēc koda displaySpec. 
 
 
funkcija displaySpec (json) if ('content' in templateEle) / * saņemt veidnes saturu * / templateEleContent = templateEle.content; / * pievienot spec nosaukumu h2 galvenei * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * pievienot spec URL uz saiti * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * pievienot spec aprakstu * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * pievienot spec statusu un krāsu to, pamatojoties uz tās vērtību * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('atzīme'); var status = json._links ["jaunākā versija"]. W3cSpecLatestVerStatus.textContent = statuss; slēdzis (statuss) lieta 'Ieteikums': W3cSpecLatestVerStatus.className = "ieteikums"; pārtraukums; lieta 'Darba projekts': W3cSpecLatestVerStatus.className = 'projekts'; pārtraukums; lieta 'Atvaļināts': W3cSpecLatestVerStatus.className = 'pensionēts'; pārtraukums; lieta “Ieteikuma kandidāts”: W3cSpecLatestVerStatus.className = 'kandidāta ieteikums'; pārtraukums;  / * pievienot veidnes satura kopiju galvenajam div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * pievienot JS kodu, lai izveidotu elementus atsevišķi * / 
 
ja ("saturs" veidnēEle) ir pārbaudīt, vai pārlūks atbalsta HTML veidni, ja tā nav, izveidojiet visus HTML elementus JS. Un, ja ir atbalsts, aizpildiet HTML elementus, kas atrodas veidnes saturā, ar attiecīgajiem JSON datiem un, visbeidzot, pievienojiet Veidnes satura kopiju galvenajam # w3cSpecs div.
 
Tieši tā. Ar nedaudz CSS stilu, izeja izskatās šādi: