Slik viser du W3C-spesifikasjonsdata ved hjelp av web API

Emmy®-prisbelønte W3C er en internasjonal standardorganisasjon for World Wide Web. Det 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-spesifikasjonsdokumentasjonen 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 via 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. Deretter går du til Administrer API-nøkler på profilsiden din.
3. Klikk på Ny API-nøkkel og gi den et navn for å generere nøkkelen.
4. Deretter kan du, hvis du ønsker det, kopiere og lime det inn i api-tastaturboksen på begynnelsen av nettsiden https://api.w3.org/doc for å teste API i sandkassen.

For dette innlegget vil vi se på forespørselen som bruker kortnavn 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 shortnames av spesifikasjonene vi vil vise i vår nettside; Hvis du vil finne kortnavnet til en spesifikasjon, se på W3C-nettadressen, 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 kortnavn og spesifikasjoner som er tilgjengelige via APIen ennå.

Gå gjennom shortnames og legg inn en HTTP-forespørsel for hver, og hent svaret.

 for (var i = 0; i 
responseText 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 ["siste versjon"]. tittel; W3cSpecLatestVerStatus.textContent = status; bytte (status) {case 'Anbefaling': W3cSpecLatestVerStatus.className = "recommendation"; gå i stykker; tilfelle 'Working Draft': W3cSpecLatestVerStatus.className = 'utkast'; gå i stykker; tilfelle '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)); } else {/ * legg til JS kode for å lage elementene individuelt * /}} 

if ('content' in 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 ut HTML-elementene som er inne i malens innhold med de respektive dataene fra JSON, og til slutt legg til en kopi av #w3cSpecs innhold til hovedmenyen #w3cSpecs div.

Det er det. Med litt CSS stylings ser utgangen slik ut:

50 Cosplay kostymer som vil blåse deg bort

I de senere årene fortsetter cosplay-samfunnet å vokse og bli et kreativt utløp for mange fans for å skape og vise frem sine fantastiske selvfremstillede forkledninger, vakre håndverk og deres favorittfiktive figurer. Valgene nedenfor vil avsløre hele spektret av cosplay, fra forbløffende skjønnhet til store roboter, fra anime til filmstjerner.Du kan

(Tekniske og design tips)

Overlev kontor: 10 tips for å flytte opp bedriftens stige

Ambisiøse ansatte søker alltid muligheter til å klatre opp i bedriftsstigen. Det er ingen mangel på enkeltpersoner som er ivrige etter å klatre den profesjonelle stigen for suksess, men det som er viktig er om de har disiplin og den positive hensikten å nå ønsket nivå. Suksessfulle individer følger alltid med gode prinsipper, som vil hjelpe dem til å nå toppen.Det er ikke

(Tekniske og design tips)