Hoe W3C-specificatiegegevens worden weergegeven met behulp van de web-API

De Emmy®-bekroning W3C is een internationale standaardorganisatie voor het World Wide Web. Het creëert nieuwe webstandaarden en herziet ze constant om ze consistent en relevant te houden over de hele wereld.

Browsers en websites zijn standaard meer in overeenstemming met de tijd geworden, hierdoor kunnen websites uniform worden weergegeven en werken in alle verschillende browsers. Een van de meest bruikbare bronnen die publiekelijk beschikbaar zijn, zijn de W3C-specificatiedocumentaties in w3c.org.

Onlangs heeft W3C zijn gegevens beschikbaar gesteld via een Web API, waarvan de projectpagina in Github is. De intro van deze API van zijn projectpagina is als volgt:

“In antwoord op de vraag van ontwikkelaars in onze community die willen communiceren met de gegevens van W3C, heeft het W3C Systems Team een ​​web-API ontwikkeld. Hierdoor maken we gegevens beschikbaar over specificaties, groepen, organisaties en gebruikers.”

In de post van vandaag zullen we zien hoe de specificatiegegevens op te halen via de W3C API. U kunt de verschillende verzoeken vinden die u kunt posten om de specificatiegegevens en anderen op te halen op https://api.w3.org/doc. Voor elk verzoek ontvangt u ook een sandbox om de API te testen, maar u hebt een API sleutel.

Laten we eerst zien hoe de API-sleutel te krijgen.

1. Log in op uw W3C-account of maak er een aan.
2. Ga dan naar Beheer API-sleutels op je profielpagina.
3. Klik Nieuwe API-sleutel en geef het een naam om je sleutel te genereren.
4. Als u dat wilt, kunt u het vervolgens kopiëren en plakken in de API sleutel tekstvak aan het begin van de webpagina https://api.w3.org/doc om de API in de sandbox te testen.

Voor deze post zullen we kijken het verzoek dat wordt gebruikt verkorte namen om de specificatie-URL, beschrijving en documentstatus weer te geven. Het verzoek ziet er als volgt uit:

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

Een HTML5 spec-verzoek zal bijvoorbeeld zo zijn;

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

Laten we ons nu concentreren op de HTML die we gebruiken om de gegevens weer te geven die via de API zijn opgehaald. Hiervoor heb ik besloten om HTML-sjabloon te gebruiken. HTML-sjablonen worden gebruikt om HTML-code vast te houden die wordt geparseerd maar niet wordt weergegeven totdat ze met JavaScript aan de pagina worden toegevoegd.

 
W3C SPEC
 
  

De sjabloon is klaar. Nu naar het JavaScript dat de HTTP-aanvraag doet en de respons JSON-gegevens in HTML weergeeft. Dit zijn de verzameling algemene variabelen waarmee we beginnen:

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

verkorte namen is een array van verkorte namen van de specificaties die we willen weergeven op onze webpagina; als je de. wilt vinden korte naam van een specificatie bekijkt u de W3C-URL en ziet u het aan het einde.

Het is echter niet gegarandeerd dat u dit kunt krijgen allemaal Specificaties zoals deze; er is geen definitieve lijst van verkorte namen en Specificaties die nog beschikbaar zijn via de API.

Loop door de verkorte namen array en post een HTTP-aanvraag voor elk, en haal het antwoord op.

voor (var i = 0; i 
De responseText is een JSON-reeks en moet worden geparseerd om het JSON-object te krijgen. displaySpec is de functie die de JSON-gegevens gebruikt en deze in HTML weergeeft.
 
Hieronder staat de voorbeeld JSON-antwoordtekst voor HTML5-specificatie en na de code voor displaySpec. 
 
 
function displaySpec (json) if ('content' in templateEle) / * krijg template-inhoud * / templateEleContent = templateEle.content; / * voeg een spec titel toe aan de h2 header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * voeg specificatie-URL toe aan de link * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * specificatie toevoegen * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * voeg een spec status toe en kleur deze op basis van zijn waarde * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Recommendation': W3cSpecLatestVerStatus.className = "aanbeveling"; breken; case 'Working Draft': W3cSpecLatestVerStatus.className = 'concept'; breken; case 'Retired': W3cSpecLatestVerStatus.className = 'gepensioneerd'; breken; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; breken;  / * voeg een kopie van de inhoud van de sjabloon toe aan de hoofd-div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * voeg JS-code toe om de elementen individueel te maken * / 
 
if ('content' in templateEle) is om te controleren of HTML-sjabloon wordt ondersteund door de browser, als dat niet het geval is, maakt u alle HTML-elementen in de JS zelf. En wanneer er ondersteuning is, vult u de HTML-elementen in de inhoud van de sjabloon in met de respectieve gegevens van JSON en tenslotte voegt u een kopie van de inhoud van de sjabloon toe aan de hoofdtekst. # w3cSpecs div.
 
Dat is het. Met een beetje CSS-stijlen ziet de uitvoer er als volgt uit: