Kako prikazati podatke specifikacije W3C koristeći svoj Web API

Nagrada Emmy® W3C je međunarodna organizacija za standarde za World Wide Web. Stvara nove web standarde i neprestano ih revidira kako bi bili dosljedni i relevantni širom svijeta.

Preglednici i web-lokacije s vremenom su u većoj mjeri postali standardni, što web-lokacijama omogućuje prikaz i rad na svim različitim preglednicima. Jedan od najkorisnijih resursa koji je javno dostupan je dokumentacija W3C specifikacije na w3c.org.

Nedavno je W3C svoje podatke učinio dostupnim putem Web API-ja, čija je stranica projekta u Githubu. Uvod ovog API-ja s njegove stranice projekta je sljedeći:

“Kao odgovor na zahtjev developera u našoj zajednici koji žele komunicirati s W3C-ovim podacima, W3C Systems Team razvio je Web API. Kroz njega stavljamo na raspolaganje podatke o specifikacijama, grupama, organizacijama i korisnicima.”

U današnjem postu vidjet ćemo kako dohvatiti podatke specifikacije putem W3C API-ja. Pronaći ćete različite zahtjeve koje možete objaviti da biste dohvatili podatke o specifikacijama, a drugi u https://api.w3.org/doc, a također ima i sandbox za svaki zahtjev za testiranje API-ja, ali trebat će vam API ključ.

Prvo ćemo vidjeti kako dobiti API ključ.

1. Prijavite se na svoj W3C račun ili ga napravite.
2. Zatim idite na Upravljanje API ključevima na stranici profila.
3. Klik Novi API ključ i dajte mu ime za generiranje ključa.
4. Zatim, ako želite, možete ga kopirati i zalijepiti u Api ključ na početku web-stranice https://api.w3.org/doc za testiranje API-ja u pješčaniku.

Za ovaj post ćemo istražiti zahtjev koji koristi shortnames za prikaz URL-a specifikacije, opisa i statusa dokumenta. Zahtjev izgleda ovako:

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

Na primjer, zahtjev za specifikaciju HTML5 bit će takav;

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

Sada ćemo se usredotočiti na HTML koji ćemo koristiti za prikaz podataka dohvaćenih putem API-ja. Za ovo sam odlučio koristiti HTML predložak. HTML predlošci koriste se za držanje HTML koda koji je analiziran, ali se ne prikazuje dok se ne dodaju na stranicu pomoću JavaScripta.

 
W3C SPECS
 
  

Predložak je spreman. Sada, na JavaScript koji će izrađivati ​​HTTP zahtjev i prikazati JSON podatke odgovora u HTML-u. Evo skupa globalnih varijabli s kojima ćemo početi:

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

shortnames je niz od shortnames specifikacija koje želimo prikazati na našoj web stranici; ako želite pronaći kratko ime Specifikacije pogledajte njegov W3C URL i moći ćete ga vidjeti na kraju.

Međutim, to nije zajamčeno da ćete moći dobiti svi Specifikacije poput ove; ne postoji konačan popis shortnames i Specifikacije koje su dostupne putem API-ja.

Okrenite se kroz shortnames i postavite HTTP zahtjev za svaki od njih i dohvatite odgovor.

za (var i = 0; i 
 responseText je JSON niz i mora se analizirati kako bi se dobio JSON objekt. displaySpec je funkcija koja će koristiti JSON podatke i prikazati ih u HTML-u.
 
U nastavku se nalazi uzorak teksta odgovora JSON za specifikaciju HTML5 i nakon koda za displaySpec. 
 
 
funkcija displaySpec (json) if ('sadržaj' u templateEle) / * dobiva sadržaj predloška * / templateEleContent = templateEle.content; / * dodaje naslov spec. u zaglavlje h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * dodaj link URL-u * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * dodaj spec description * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * dodavanje statusa spec. i bojenje na temelju njegove vrijednosti * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["najnovija verzija"]. W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Preporuka': W3cSpecLatestVerStatus.className = "preporuka"; pauza; case 'Radni nacrt': W3cSpecLatestVerStatus.className = 'nacrt'; pauza; case 'Umirovljeni': W3cSpecLatestVerStatus.className = 'povučen'; pauza; case 'Preporuka kandidata': W3cSpecLatestVerStatus.className = 'Preporuka kandidata'; pauza;  / * dodajte kopiju sadržaja Predloška u glavni div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * dodajte JS kod kako biste pojedinačno kreirali elemente * / 
 
ako ("sadržaj" u predloškuEle) je provjeriti podržava li preglednik HTML predložak, ako nije, kreirajte sve HTML elemente u samom JS-u. A kada postoji podrška, ispunite HTML elemente koji se nalaze unutar sadržaja Predloška s odgovarajućim podacima iz JSON-a i na kraju, dodajte kopiju sadržaja Predloška na glavnu # w3cSpecs div.
 
To je to. S malo CSS stylingsa, izlaz izgleda ovako: