Anzeigen von W3C-Spezifikationsdaten mithilfe der Web-API

Die Emmy®-Auszeichnung W3C ist eine internationale Normungsorganisation für das World Wide Web. Es erstellt neue Webstandards und überprüft sie ständig, um sie weltweit konsistent und relevant zu halten.

Browser und Websites sind mit der Zeit in zunehmendem Maße standardkonform geworden. Dadurch können Websites in allen Browsern einheitlich gerendert werden und funktionieren. Eine der nützlichsten Ressourcen, die öffentlich verfügbar sind, ist die Dokumentation zu W3C-Spezifikationen in w3c.org.

Vor kurzem stellte W3C seine Daten über eine Web-API zur Verfügung, deren Projektseite in Github liegt. Das Intro dieser API von der Projektseite aus lautet wie folgt:

“Als Reaktion auf die Nachfrage von Entwicklern in unserer Community, die mit W3C-Daten interagieren möchten, hat das W3C Systems Team eine Web-API entwickelt. Dadurch stellen wir Daten zu Spezifikationen, Gruppen, Organisationen und Benutzern zur Verfügung.”

Im heutigen Beitrag werden wir sehen So rufen Sie die Spezifikationsdaten über die W3C-API ab. Die verschiedenen Abfragen, die Sie zum Abrufen der Spezifikationsdaten und andere abrufen können, finden Sie unter https://api.w3.org/doc. Außerdem enthält sie eine Sandbox für jede Anforderung zum Testen der API. Sie benötigen jedoch eine API-Schlüssel.

Lass uns zuerst sehen So erhalten Sie den API-Schlüssel.

1. Melden Sie sich bei Ihrem W3C-Konto an oder erstellen Sie ein Konto.
2. Dann geh zu Verwalten Sie API-Schlüssel in deiner Profilseite.
3. Klicken Neuer API-Schlüssel und geben Sie einen Namen, um Ihren Schlüssel zu generieren.
4. Wenn Sie möchten, können Sie es kopieren und in das einfügen API-Schlüssel Textfeld am Anfang der Webseite https://api.w3.org/doc, um die API in der Sandbox zu testen.

Für diesen Beitrag schauen wir uns an die Anfrage, die verwendet wird Kurznamen , um die Spezifikations-URL, die Beschreibung und den Dokumentstatus anzuzeigen. Die Anfrage sieht so aus:

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

Eine HTML5-Spezifikationsanforderung lautet beispielsweise so;

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

Nun konzentrieren wir uns auf den HTML-Code, den wir zur Anzeige der über die API abgerufenen Daten verwenden. Dafür habe ich mich für HTML Template entschieden. HTML-Vorlagen dienen zum Speichern von HTML-Code, der analysiert wird, aber erst dann gerendert wird, wenn er mit JavaScript zur Seite hinzugefügt wird.

 
W3C SPECS
 
  

Die Vorlage ist fertig. Nun auf das JavaScript, das die HTTP-Anforderung stellt und die Antwort-JSON-Daten in HTML anzeigt. Hier sind die globalen Variablen, mit denen wir beginnen:

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

Kurznamen ist ein Array von Kurznamen der Spezifikationen, die wir auf unserer Webseite anzeigen möchten; wenn Sie das finden wollen kurzer Name einer Spezifikation sehen Sie sich die W3C-URL an, und Sie können sie am Ende sehen.

Es ist jedoch nicht garantiert, dass Sie bekommen können alles Spezifikationen wie folgt; Es gibt keine definitive Liste von Kurznamen und Spezifikationen, die bereits über die API verfügbar sind.

Durchlaufen Sie die Kurznamen Array und stellen Sie jeweils eine HTTP-Anfrage und rufen Sie die Antwort ab.

für (var i = 0; i 
Das responseText ist eine JSON-Zeichenfolge und muss analysiert werden, um das JSON-Objekt abzurufen. displaySpec ist die Funktion, die die JSON-Daten verwendet und in HTML anzeigt.
 
Nachfolgend finden Sie den JSON-Beispieltext für die HTML5-Spezifikation und nach dem Code für displaySpec. 
 
 
function displaySpec (json) if ('content' in templateEle) / * get Inhalt der Vorlage * / templateEleContent = templateEle.content; / * add title Titel zum h2 Header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * Spezifizierter URL zum Link hinzufügen * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * Spezifikationsbeschreibung hinzufügen * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * Spezifikationsstatus hinzufügen und Farbe basierend auf ihrem Wert einfärben * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["neueste Version"]. title; W3cSpecLatestVerStatus.textContent = Status; Schalter (Status) Fall 'Empfehlung': W3cSpecLatestVerStatus.className = "Empfehlung"; brechen; Fall 'Arbeitsentwurf': W3cSpecLatestVerStatus.className = 'Entwurf'; brechen; case 'Retired': W3cSpecLatestVerStatus.className = 'pensioniert'; brechen; Fall 'Kandidatenempfehlung': W3cSpecLatestVerStatus.className = 'Kandidatempfehlung'; brechen;  / * Kopie des Inhalts der Vorlage zum Hauptdiv. hinzufügen * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * JS-Code hinzufügen, um die Elemente einzeln zu erstellen * / 
 
if ('content' in templateEle) prüft, ob die HTML-Vorlage vom Browser unterstützt wird. Wenn dies nicht der Fall ist, erstellen Sie alle HTML-Elemente in der JS selbst. Wenn es Unterstützung gibt, füllen Sie die HTML-Elemente, die sich im Inhalt der Vorlage befinden, mit den entsprechenden Daten aus JSON, und fügen Sie schließlich eine Kopie des Inhalts der Vorlage an das Hauptverzeichnis an # w3cSpecs div.
 
Das ist es. Mit ein paar CSS-Stylings sieht die Ausgabe so aus: