Kuidas näidata W3C spetsifikatsiooniandmeid oma veebirakenduse API abil

Emmy® auhinnatud W3C on ülemaailmse veebi rahvusvaheline standardiorganisatsioon. See loob uusi veebistandardeid ja muudab neid pidevalt, et need oleksid ühtsed ja asjakohased kogu maailmas.

Brauserid ja veebisaidid on aja jooksul muutunud tavapäraseks, mis võimaldab veebisaitidel teha kõikidel brauseritel ühtlast tööd. Üks kasulikumaid ressursse, mis on avalikult kättesaadavad, on W3C spetsifikatsiooni dokumendid veebisaidil w3c.org.

Hiljuti tegi W3C oma andmed kättesaadavaks veebi API kaudu, mille projekti leht on Githubis. Selle API intro oma projekti lehelt on järgmine:

“Vastuseks W3C andmetega suhelda soovivate meie kogukonna arendajate nõudlusele on W3C Systems Team välja töötanud veebipõhise API. Selle kaudu teeme kättesaadavaks andmed spetsifikatsioonide, rühmade, organisatsioonide ja kasutajate kohta.”

Tänases postituses näeme kuidas tõmmata spetsifikatsiooni andmed W3C API kaudu. Leiad erinevad taotlused, mida saate postitada, et saada spetsifikatsiooniandmed ja teised aadressil https://api.w3.org/doc, samuti on olemas liivakast iga API testimise testimise taotluse jaoks, kuid teil on vaja API-võti.

Vaatame kõigepealt kuidas saada API-võtit.

1. Logige sisse oma W3C kontole või looge see.
2. Siis mine Halda API-võtmeid oma profiili lehel.
3. Klõpsake nuppu Uus API-võti ja andke sellele nimi võtme genereerimiseks.
4. Siis, kui soovite, saate selle kopeerida api klahv tekstikast veebilehe https://api.w3.org/doc alguses, et testida liivakastis API-d.

Selle postituse jaoks uurime kasutab taotlust lühinimed spetsifikatsiooni URL-i, kirjelduse ja dokumendi oleku kuvamiseks. Taotlus näeb välja selline:

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

Näiteks HTML5-spetsifikatsioonitaotlus on selline;

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

Nüüd keskendume HTML-ile, mida me kasutame API kaudu saadud andmete kuvamiseks. Selleks olen otsustanud kasutada HTML-malli. HTML-malle kasutatakse HTML-koodi hoidmiseks, mis on parsitud, kuid mida ei esitata, kuni need lisatakse lehele JavaScripti abil.

 
W3C SPECS
 
  

Mall on valmis. Nüüd, JavaScripti peale, mis teeb HTTP-päringu ja kuvab vastuse JSON-i andmed HTML-is. Siin on globaalsete muutujate kogum, mida alustame:

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

lühinimed on massiivi lühinimed spetsifikaatidest, mida me tahame meie veebilehel kuvada; kui soovite leida lühike nimi spetsifikaadi vaatamiseks vaadake selle W3C URL-i ja saate selle lõpus näha.

Siiski ei ole garanteeritud, et saad kõik Sellised spetsifikatsioonid; ei ole lõplikku nimekirja lühinimed ja spetsifikatsioonid, mis on API kaudu veel saadaval.

Loop läbi lühinimed massiivi ja saatke iga päringu kohta HTTP-päring ja laadige vastus.

jaoks (var i = 0; i 
The vastusTekst on JSON-string ja see tuleb analüüsida JSON-objekti saamiseks. displaySpec See funktsioon kasutab JSON-andmeid ja kuvab selle HTML-is.
 
Allpool on näidis JSON vastuse tekst HTML5 spetsifikatsioonile ja pärast koodi displaySpec. 
 
 
function displaySpec (json) if ('content' in templateEle) / * saada malli sisu * / templateEleContent = templateEle.content; / * lisada spec-pealkiri h2-päisele * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * lisada spec URL linki * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * lisa spetsifikatsioon * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * lisage spetsiifiline olek ja värvige see selle väärtuse alusel * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["uusim versioon"]. pealkiri; W3cSpecLatestVerStatus.textContent = olek; lüliti (olek) case 'soovitus: W3cSpecLatestVerStatus.className = "soovitus"; murda; juhtum „Töösignaal”: W3cSpecLatestVerStatus.className = 'mustand'; murda; juhtum "Pensionär": W3cSpecLatestVerStatus.className = 'retired'; murda; juhtum „kandidaatsoovitus”: W3cSpecLatestVerStatus.className = 'kandidaadi soovitus'; murda;  / * lisada malli sisu koopia peamisele div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * lisa elementide individuaalseks loomiseks JS-koodi * / 
 
kui („sisu” mallisEle) on kontrollida, kas brauser toetab HTML-malli, kui see ei ole, siis looge kõik HTML-elemendid JS-is. Ja kui on olemas toetus, täitke HTML-elemendid, mis on malli sisu sees JSONi vastavate andmetega, ning lisage lõpuks mallide sisu koopia peamisele # w3cSpecs div.
 
See ongi see. Väikese CSS-stiiliga väljund näeb välja selline: