W3C-määritystietojen näyttäminen Web-API n avulla

Emmy®-palkittu W3C on kansainvälinen standardointijärjestö World Wide Webille. Se luo uusia web-standardeja ja tarkistaa ne jatkuvasti, jotta ne pysyisivät johdonmukaisina ja relevanteina eri puolilla maailmaa.

Selaimet ja verkkosivustot ovat vakiintuneet standardin mukaisiksi ajan myötä, jolloin sivustot voivat tehdä ja toimia yhtenäisesti kaikissa selaimissa. Yksi julkisesti saatavilla olevista hyödyllisimmistä resursseista on W3C-määrittelydokumentaatiot w3c.org: ssa.

Viime aikoina W3C antoi tiedot saataville Web API: n kautta, jonka projektisivu on Githubissa. Tämän API: n esittely projektisivulta on seuraava:

“W3C Systems Team on kehittänyt Web API: n vastauksena kehittäjien kysyntään, joka haluaa toimia W3C: n tietojen kanssa. Sen kautta annamme tietoja eritelmistä, ryhmistä, organisaatioista ja käyttäjistä.”

Tämän päivän postissa näemme miten noutaa tekniset tiedot W3C API: n kautta. Löydät erilaisia ​​pyyntöjä, joita voit lähettää hakemaan Specification-tiedot ja muut osoitteessa https://api.w3.org/doc, ja siinä on myös hiekkalaatikko kutakin API-testin pyyntöä varten, mutta tarvitset API-avain.

Katsotaanpa ensin miten saada API-avain.

1. Kirjaudu W3C-tilillesi tai luo se.
2. Sitten mene Hallinnoi API-avaimia profiilisi sivulla.
3. Klikkaus Uusi API-avain ja anna sille nimi avain luomiseksi.
4. Sitten jos haluat, voit kopioida sen api-näppäin tekstikenttä verkkosivun alussa https://api.w3.org/doc testataksesi API hiekkalaatikossa.

Tätä viestiä tarkastellaan pyyntö, joka käyttää lyhytnimiä näyttää Specification-URL-osoitteen, kuvauksen ja asiakirjan tilan. Pyyntö näyttää tältä:

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

Esimerkiksi HTML5-spec-pyyntö on tällainen;

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

Keskity nyt nyt HTML-muotoon, jota käytämme API: n kautta haettujen tietojen näyttämiseen. Tätä varten olen päättänyt käyttää HTML-mallia. HTML-malleja käytetään pitämään HTML-koodia, joka on jäsennelty mutta jota ei ole annettu, kunnes ne lisätään sivulle JavaScriptin avulla.

 
W3C-SPECS
 
  

Malli on valmis. Nyt, JavaScript, joka tekee HTTP-pyynnön ja näyttää vastauksen JSON-tiedot HTML: ssä. Tässä on joukko globaaleja muuttujia, joita alamme:

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

lyhytnimiä on joukko lyhytnimiä Tekniset tiedot, joita haluamme näyttää verkkosivuillamme; jos haluat löytää lyhyt nimi Tekniset tiedot katsovat sen W3C-URL-osoitetta ja näet sen lopussa.

Se ei kuitenkaan ole taattu, että voit saada kaikki Tällaiset tekniset tiedot; ei ole lopullista luetteloa lyhytnimiä ja määritykset, jotka ovat käytettävissä API: n kautta.

Loop kautta lyhytnimiä ja lähetä jokaiselle HTTP-pyyntö ja hae vastaus.

varten (var i = 0; i 
 responseText on JSON-merkkijono ja se on jäsennettävä JSON-objektin saamiseksi. displaySpec on toiminto, joka käyttää JSON-dataa ja näyttää sen HTML-muodossa.
 
Alla on esimerkki JSON-vastaustekstistä HTML5-määritykselle ja koodin jälkeen displaySpec. 
 
 
toiminto displaySpec (json) if ('content' in templateEle) / * saat mallin sisällön * / templateEleContent = templateEle.content; / * lisää spec-otsikko h2-otsikkoon * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * lisää spec-URL-osoite linkkiin * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * lisää spesifikaatio * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * lisää spesifikaatio ja väritä se sen arvon * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark') perusteella; var status = json._links ["viimeisin versio"]. W3cSpecLatestVerStatus.textContent = tila; kytkin (tila) tapaus: Suositus: W3cSpecLatestVerStatus.className = "suositus"; tauko; case 'Working Draft': W3cSpecLatestVerStatus.className = 'luonnos'; tauko; tapaus 'Eläkkeellä': W3cSpecLatestVerStatus.className = 'eläkkeellä'; tauko; tapaus 'Ehdokasehdokas': W3cSpecLatestVerStatus.className = 'kandidaatin suositus'; tauko;  / * lisää kopio mallin sisällöstä pää div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * lisää JS-koodi luomaan elementit yksitellen * / 
 
jos ("sisältö" mallissaEle) Tarkasta, onko selain tukemassa HTML-mallia, jos ei, luo kaikki HTML-elementit JS: ssä. Ja kun on tukea, täytä HTML-elementit, jotka ovat mallin sisällön sisällä, JSON: n vastaavilla tiedoilla ja lopuksi lisää mallin sisällön kopio # w3cSpecs div.
 
Se siitä. Pienellä CSS-tyylillä tuotos näyttää tältä: