Sådan viser du W3C-specifikationsdata ved hjælp af dets Web API

Emmy® prisvindende W3C er en international standard organisation for World Wide Web. Det skaber nye webstandarder og reviderer dem hele tiden for at holde dem konsekvente og relevante over hele kloden.

Browsere og hjemmesider er blevet mere og mere standard i overensstemmelse med tiden, hvilket gør det muligt for websites at gøre og arbejde ensartet på tværs af alle de forskellige browsere. En af de mest nyttige ressourcer, der er offentligt tilgængelige, er W3C-specifikationsdokumenterne i w3c.org.

For nylig har W3C gjort sine data tilgængelige via en web-API, hvis projektside findes i Github. Indførelsen af ​​denne API fra sin projektside er som følger:

“Som svar på efterspørgslen fra udviklere i vores samfund, der ønsker at interagere med W3Cs data, har W3C Systems Team udviklet en Web API. Gennem det gør vi tilgængelige data om Specifikationer, Grupper, Organisationer og Brugere.”

I dagens post vil vi se hvordan man henter specifikationsdataene via W3C API. Du finder de forskellige forespørgsler, du kan sende for at hente Specifikationsdata og andre på https://api.w3.org/doc. Den leveres også med en sandkasse til hver anmodning om at teste API'en, men du skal bruge en API-nøgle.

Lad os først se hvordan man får API-nøglen.

1. Log ind på din W3C-konto eller opret en.
2. Så gå til Administrer API-nøgler på din profilside.
3. Klik Ny API-nøgle og giv det et navn til at generere din nøgle.
4. Så kan du, hvis du ønsker det, kopiere det ind i api nøgle tekstboks i starten af ​​websiden https://api.w3.org/doc for at teste API'en i sandkassen.

Til dette indlæg vil vi se nærmere på den anmodning, der bruger shortnames for at vise specifikationswebadressen, beskrivelse og dokumentstatus. Forespørgslen ser sådan ud:

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

For eksempel vil en HTML5 spec-anmodning være som denne;

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

Lad os nu fokusere på den HTML, vi vil bruge til at vise data hentet gennem API'en. Til dette har jeg besluttet at bruge HTML Template. HTML-skabeloner bruges til at holde HTML-kode, der analyseres, men ikke gengives, før de er føjet til siden ved hjælp af JavaScript.

 
W3C SPECS
 
  

Skabelonen er klar. Nu, på JavaScript, der gør HTTP-anmodningen og viser svaret JSON data i HTML. Her er sæt af globale variabler, vi starter med:

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

shortnames er en vifte af shortnames af de specifikationer, vi ønsker at vise på vores hjemmeside hvis du vil finde kort navn af en specifikation se på sin W3C URL og du vil kunne se det i slutningen.

Det er dog ikke garanteret, at du vil kunne få alle Specifikationer som dette; Der er ikke en endelig liste over shortnames og specifikationer, der er tilgængelige via API'en endnu.

Loop gennem shortnames array og sende en HTTP-anmodning til hver og hente svaret.

for (var i = 0; i 
Det responseText er en JSON-streng og skal analyseres for at få JSON-objektet. displaySpec er den funktion, der vil bruge JSON dataene og vise den i HTML.
 
Nedenfor er eksemplet JSON-svartekst til HTML5-specifikation og efter koden til displaySpec. 
 
 
funktion displaySpec (json) if ('indhold' i templateEle) / * få skabelon indhold * / templateEleContent = templateEle.content; / * Tilføj spec titel til h2 header * / w3cSpecHeader = templateEleContent.querySelector ('.w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * Tilføj spec URL til linket * / w3cSpecLink = templateEleContent.querySelector ('.w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * Tilføj spec beskrivelse * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * Tilføj specstatus og farve den ud fra dens værdi * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["nyeste version"]. titel; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Anbefaling': W3cSpecLatestVerStatus.className = "anbefaling"; pause; tilfælde 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; pause; tilfælde 'Pensioneret': W3cSpecLatestVerStatus.className = 'pensioneret'; pause; sag 'Kandidatanbefaling': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; pause;  / * Tilføj kopi af skabelonens indhold til main div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * tilføj JS kode for at oprette elementerne individuelt * / 
 
hvis ('indhold' i templateEle) er at kontrollere, om HTML-skabelon understøttes af browseren, hvis det ikke er tilfældet, skal du oprette alle HTML-elementerne i selve JS'en. Og når der er støtte, skal du udfylde de HTML-elementer, der er inde i skabelonets indhold med de respektive data fra JSON, og til sidst tilføj en kopi af Skabelonens indhold til hovedmenuen # w3cSpecs div.
 
Det er det. Med lidt CSS stylings ser udgangen sådan ud: