Kaip rodyti W3C specifikacijos duomenis naudodami savo interneto API

„Emmy®“ apdovanojimai W3C yra tarptautinė standartų organizacija pasaulinei žiniasklaidai. Jis sukuria naujus interneto standartus ir nuolat juos peržiūri, kad jie būtų nuoseklūs ir tinkami visame pasaulyje.

Naršyklės ir tinklalapiai laikui bėgant tapo labiau suderinami su standartais, tai leidžia svetainėms pateikti ir dirbti vienodai visose skirtingose ​​naršyklėse. Vienas iš naudingiausių viešai prieinamų išteklių yra W3C specifikacijos dokumentai w3c.org.

Neseniai „W3C“ pateikė savo duomenis per interneto API, kurio projekto puslapis yra „Github“. Šios API įvadas iš projekto puslapio yra toks:

“Reaguodama į mūsų bendruomenės užsakovų pageidavimą bendrauti su W3C duomenimis, „W3C Systems Team“ sukūrė žiniatinklio API. Per ją mes pateikiame duomenis apie specifikacijas, grupes, organizacijas ir vartotojus.”

Šiandieniniame pranešime pamatysime kaip gauti specifikacijos duomenis per W3C API. Rasite įvairius prašymus, kuriuos galite paskelbti norėdami gauti specifikacijos duomenis ir kitus, esančius https://api.w3.org/doc, taip pat kiekvienam prašymui išbandyti API, bet jums reikės API raktas.

Pirmiausia pažiūrėkime kaip gauti API raktą.

1. Prisijunkite prie „W3C“ paskyros arba sukurkite ją.
2. Tada eikite į Tvarkyti API raktus jūsų profilio puslapyje.
3. Spustelėkite Naujas API raktas ir suteikite jam vardą, kad sukurtumėte raktą.
4. Tada, jei norite, galite nukopijuoti ją į api raktas teksto laukelis tinklalapio https://api.w3.org/doc pradžioje, kad išbandytumėte API smėlio dėžėje.

Šiam įrašui mes peržiūrėsime užklausą, kuri naudoja trumpus vardus rodyti specifikacijos URL, aprašymą ir dokumento būseną. Prašymas atrodo taip:

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

Pavyzdžiui, HTML5 specifikacijos užklausa bus tokia;

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

Dabar susitelkime į HTML, kurį naudosime, kad būtų rodomi API gauti duomenys. Dėl to nusprendžiau naudoti HTML šabloną. HTML šablonai naudojami HTML kodui, kuris yra išanalizuotas, bet nepateikiamas, kol jie nebus įtraukti į puslapį naudojant „JavaScript“.

 
W3C SPECS
 
  

Šablonas yra paruoštas. Dabar, į „JavaScript“, kad padarysite HTTP užklausą ir rodysite atsakymo JSON duomenis HTML. Čia pateikiami pasauliniai kintamieji, su kuriais pradėsime:

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

trumpus vardus yra masyvas trumpus vardus specifikacijų, kurias norime rodyti mūsų tinklalapyje; jei norite rasti trumpas vardas specifikacijos pažvelgti į savo W3C URL ir galėsite jį pamatyti pabaigoje.

Tačiau tai negarantuoja, kad galėsite gauti visi Tokios specifikacijos; nėra galutinio sąrašo trumpus vardus ir specifikacijos, kurias galima gauti per API.

Pasukite per trumpus vardus masyvas ir kiekvienam pateikite HTTP užklausą ir atsiųskite atsakymą.

už (var i = 0; i 
The answerText yra JSON eilutė ir turi būti analizuojama, kad gautumėte JSON objektą. displaySpec yra funkcija, kuri naudos JSON duomenis ir parodys jį HTML.
 
Žemiau yra JSON atsakymo tekstas HTML5 specifikacijai ir po kodo displaySpec. 
 
 
funkcija displaySpec (json) if („turinys“ šabloneEle) / * gauti šablono turinį * / templateEleContent = templateEle.content; / * pridėti spec pavadinimą į h2 antraštę * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * pridėti spec URL į nuorodą * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * pridėti specifikacijos aprašymą * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * pridėti specifikacijos būseną ir spalvą pagal jos vertę * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["naujausia versija"]. W3cSpecLatestVerStatus.textContent = būsena; jungiklis (būsena) atvejis „Rekomendacija“: W3cSpecLatestVerStatus.className = "rekomendacija"; pertrauka; atvejis „Darbo projektas“: W3cSpecLatestVerStatus.className = „juodraštis“; pertrauka; atvejis „Pensininkas“: W3cSpecLatestVerStatus.className = 'pensininkas'; pertrauka; atvejis „Rekomendacija kandidatui“: W3cSpecLatestVerStatus.className = „kandidato rekomendacija“; pertrauka;  / * pridėti šablono turinio kopiją į pagrindinį div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * pridėti JS kodą, kad sukurtumėte elementus atskirai * / 
 
jei („turinys“ šabloneEle) yra patikrinti, ar naršyklė palaiko HTML šabloną, jei ne, sukurkite visus HTML elementus JS. Kai yra palaikymas, užpildykite HTML elementus, kurie yra šablono turinyje, su atitinkamais JSON duomenimis ir galiausiai pridėkite šablono turinio kopiją į pagrindinį # w3cSpecs div.
 
Viskas. Su šiek tiek CSS stilių, išvestis atrodo taip: