Kako prikazati podatke specifikacije W3C s pomočjo spletnega API-ja

Nagrada Emmy® W3C je mednarodna organizacija za standarde za svetovni splet. Ustvarja nove spletne standarde in jih nenehno spreminja, da jih ohranja dosledne in pomembne po vsem svetu.

Brskalniki in spletna mesta so s časom v večji meri postali skladni s standardom, kar omogoča spletnim mestom, da se upodabljajo in delujejo enotno v vseh različnih brskalnikih. Eden od najbolj uporabnih virov, ki so javno dostopni, je dokumentacija specifikacij W3C na w3c.org.

W3C je pred kratkim omogočil dostop do svojih podatkov prek spletnega API-ja, katerega projektna stran je v Githubu. Uvod tega API-ja z njegove strani projekta je naslednji:

“V odziv na povpraševanje razvijalcev v naši skupnosti, ki želijo sodelovati s podatki W3C, je ekipa W3C Systems razvila spletni API. S tem omogočamo dostop do podatkov o specifikacijah, skupinah, organizacijah in uporabnikih.”

V današnji objavi bomo videli kako pridobiti podatke specifikacije prek API-ja W3C. Boste našli različne zahteve, ki jih lahko objavite, če želite prenesti podatke o specifikacijah in druge v https://api.w3.org/doc, prav tako pa vsebuje tudi peskovnik za vsako zahtevo za testiranje API-ja, vendar boste potrebovali Ključ API.

Najprej poglejmo kako dobiti API ključ.

1. Prijavite se na svoj račun W3C ali ga ustvarite.
2. Potem pa pojdi Upravljanje ključev API na strani profila.
3. Kliknite Nov ključ API in ji dodelite ime, ki bo ustvarilo vaš ključ.
4. Potem, če želite, ga lahko kopirate v mapo Api ključ na začetku spletne strani https://api.w3.org/doc preizkusite API v peskovniku.

Za to objavo bomo preučili zahtevo, ki se uporablja kratkih imen za prikaz URL-ja specifikacije, opisa in statusa dokumenta. Zahteva izgleda tako:

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

Na primer, zahteva za specifikacijo HTML5 bo taka;

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

Zdaj se osredotočimo na HTML, ki ga bomo uporabili za prikaz podatkov, pridobljenih prek API-ja. Za to sem se odločil za uporabo HTML predloge. Predloge HTML se uporabljajo za shranjevanje kode HTML, ki so razčlenjene, vendar ne upodabljajo, dokler niso dodane na stran s pomočjo JavaScripta.

 
W3C SPECS
 
  

Predloga je pripravljena. Zdaj pa na JavaScript, ki bo izdelal HTTP zahtevo in prikazal odzivne podatke JSON v HTML-ju. Tukaj je nabor globalnih spremenljivk, ki jih bomo začeli z:

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

kratkih imen je niz od kratkih imen specifikacij, ki jih želimo prikazati na naši spletni strani; če želite poiskati kratko ime Specifikacije si oglejte njegov W3C URL in ga boste lahko videli na koncu.

Vendar pa ni zagotovljeno, da boste lahko dobili vse Specifikacije, kot je ta; ni končnega seznama kratkih imen in specifikacije, ki so na voljo prek API-ja.

Skoči skozi kratkih imen matriko in objavi zahtevo HTTP za vsako od njih.

za (var i = 0; i 
The responseText je niz JSON in ga je treba razčleniti, da dobite objekt JSON. displaySpec je funkcija, ki bo uporabljala JSON podatke in jih prikazala v HTML-ju.
 
Spodaj je vzorec besedila odgovora JSON za specifikacijo HTML5 in za kodo za displaySpec. 
 
 
funkcija displaySpec (json) if ('content' in templateEle) / * dobil vsebino predloge * / templateEleContent = templateEle.content; / * doda naslov h2 glave * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * dodaj povezavo * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * dodaj spec description * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * doda stanje spec in barvo na podlagi njegove vrednosti * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('oznaka'); var status = json._links ["latest-version"] naslov. W3cSpecLatestVerStatus.textContent = status; switch (status) primer 'Priporočilo': W3cSpecLatestVerStatus.className = "priporočilo"; odmor; primer 'Delovni osnutek': W3cSpecLatestVerStatus.className = 'osnutek'; odmor; case 'Retired': W3cSpecLatestVerStatus.className = 'upokojil'; odmor; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'Priporočilo kandidata'; odmor;  / * doda kopijo vsebine predloge v glavni div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * dodajte JS kodo za ustvarjanje posameznih elementov * / 
 
če (»vsebina« v predlogiEle) je, da preverite, če brskalnik podpira HTML predlogo, če ni, ustvarite vse elemente HTML v samem JS. Ko imate podporo, izpolnite elemente HTML, ki so znotraj vsebine predloge, z ustreznimi podatki iz JSON in na koncu dodajte kopijo vsebine predloge na glavni # w3cSpecs div.
 
To je to. Z malo stylingov CSS je rezultat videti takole: