Slik viser du W3C-spesifikasjonsdata ved hjelp av web API

Emmy®-prisvinnende W3C er en internasjonal standardorganisasjon for World Wide Web. Den skaper nye webstandarder og reviderer dem hele tiden for å holde dem konsistente og relevante over hele verden.

Nettlesere og nettsteder har blitt standard kompatible i større grad med tiden, slik at nettsteder kan gjengi og jobbe jevnt over alle de forskjellige nettleserne. En av de mest nyttige ressursene som er tilgjengelig for publikum er W3C-spesifikasjonsdokumentasjonene i w3c.org.

Nylig gjorde W3C sine data tilgjengelig via en web-API, hvor prosjektsiden er i Github. Innføringen av denne API-en fra prosjektsiden er som følger:

“Som svar på etterspørsel fra utviklere i vårt fellesskap som ønsker å samhandle med W3Cs data, har W3C Systems Team utviklet en Web API. Gjennom det gjør vi tilgjengelige data om spesifikasjoner, grupper, organisasjoner og brukere.”

I dagens innlegg ser vi hvordan du henter spesifikasjonsdataene gjennom W3C API. Du finner de ulike forespørslene du kan legge inn for å hente spesifikasjonsdataene og andre på https://api.w3.org/doc, den kommer også med en sandkasse for hver forespørsel for å teste API, men du trenger en API-nøkkel.

La oss først se hvordan du får API-nøkkelen.

1. Logg inn på W3C-kontoen din eller opprett en.
2. Så gå til Administrer API-nøkler på profilsiden din.
3. Klikk Ny API-nøkkel og gi det et navn for å generere nøkkelen din.
4. Deretter kan du, hvis du ønsker det, kopiere det inn i api-nøkkel tekstboks i begynnelsen av nettsiden https://api.w3.org/doc for å teste API i sandkassen.

For dette innlegget vil vi se nærmere på forespørselen som bruker shortnames for å vise spesifiseringsadressen, beskrivelse og dokumentstatus. Forespørselen ser slik ut:

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

For eksempel vil en HTML5-spesifikasjonsforespørsel være slik:

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

La oss nå fokusere på HTML-en som vi skal bruke for å vise dataene hentet gjennom API-en. For dette har jeg bestemt meg for å bruke HTML Template. HTML-maler brukes til å holde HTML-kode som blir analysert, men ikke gjengitt før de er lagt til siden ved hjelp av JavaScript.

 
W3C SPESIFIKASJONER
 
  

Malen er klar. Nå, på JavaScript som vil gjøre HTTP-forespørselen og vise svaret JSON-data i HTML. Her er settet med globale variabler vi starter med:

var shortnames = ['html5', 'selectors4', 'batteristatus', 'fullskjerm'], xmlhttp = ny XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector '); 

shortnames er en rekke av shortnames av spesifikasjonene vi vil vise i vår nettside; hvis du vil finne kort navn av en spesifikasjon se på sin W3C URL og du vil kunne se den på slutten.

Det er imidlertid ikke garantert at du vil kunne få alle Spesifikasjoner som dette; Det er ikke en endelig liste over shortnames og spesifikasjoner som er tilgjengelige via APIen ennå.

Loop gjennom shortnames array og legg inn en HTTP-forespørsel for hver og hente svaret.

for (var i = 0; i 
De response er en JSON-streng og må analyseres for å få JSON-objektet. displaySpec er funksjonen som vil bruke JSON dataene og vise den i HTML.
 
Nedenfor er eksemplet JSON-svartekst for HTML5-spesifikasjon og etter koden for displaySpec. 
 
 
funksjonsvisningSpec (json) if ('innhold' i templateEle) / * få malens innhold * / templateEleContent = templateEle.content; / * legg til spesiell tittel til h2 header * / w3cSpecHeader = templateEleContent.querySelector ('.w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * legg til spesifikke URL til lenken * / w3cSpecLink = templateEleContent.querySelector ('.w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * legg til spesifikasjonsbeskrivelse * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * legg til spesifikasjonsstatus og farge den basert på dens verdi * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["nyeste versjonen"]. tittel; W3cSpecLatestVerStatus.textContent = status; bytte (status) case 'Anbefaling': W3cSpecLatestVerStatus.className = "recommendation"; gå i stykker; saken 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; gå i stykker; saken 'Pensjonert': W3cSpecLatestVerStatus.className = 'pensjonert'; gå i stykker; case 'Kandidatanbefaling': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; gå i stykker;  / * legg til kopi av malens innhold til hoved div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  ellers / * legg til JS kode for å lage elementene individuelt * / 
 
hvis ('innhold' i templateEle) er å kontrollere om HTML-mal støttes av nettleseren, hvis ikke, lag alle HTML-elementene i selve JS. Og når det er støtte, fyll HTML-elementene som er inne i malens innhold med de respektive dataene fra JSON, og til slutt legger du til en kopi av Malens innhold til hovedmenyen # w3cSpecs div.
 
Det er det. Med litt CSS stylings ser utgangen slik ut: