Jak wyświetlić dane specyfikacji W3C za pomocą Web API

Zdobywca nagrody Emmy® W3C to międzynarodowa organizacja normalizacyjna dla World Wide Web. Tworzy nowe standardy internetowe i stale je modyfikuje, aby były one spójne i odpowiednie na całym świecie.

Przeglądarki i strony internetowe stały się w większym stopniu zgodne ze standardami z czasem, co pozwala stronom internetowym na renderowanie i jednolite działanie we wszystkich różnych przeglądarkach. Jednym z najbardziej przydatnych zasobów publicznie dostępnych jest dokumentacja specyfikacji W3C w w3c.org.

Niedawno W3C udostępnił swoje dane za pośrednictwem Web API, którego strona projektu znajduje się w Github. Wstęp tego API z jego strony projektu jest następujący:

“W odpowiedzi na zapotrzebowanie deweloperów z naszej społeczności, którzy chcą współdziałać z danymi W3C, zespół W3C Systems opracował Web API. Dzięki temu udostępniamy dane dotyczące specyfikacji, grup, organizacji i użytkowników.”

W dzisiejszym poście zobaczymy jak pobrać dane Specyfikacji przez API W3C. Znajdziesz różne żądania, które możesz opublikować, aby pobrać dane Specyfikacji, a inne w https://api.w3.org/doc, a także z piaskownicą dla każdego żądania testowania API, ale będziesz potrzebować Klucz API.

Najpierw zobaczmy jak zdobyć klucz API.

1. Zaloguj się do swojego konta W3C lub utwórz je.
2. Następnie przejdź do Zarządzaj kluczami API na stronie profilu.
3. Kliknij Nowy klucz API i nadaj mu nazwę, aby wygenerować klucz.
4. Następnie, jeśli chcesz, możesz skopiować i wkleić go do Klucz API pole tekstowe na początku strony https://api.w3.org/doc, aby przetestować API w piaskownicy.

W tym poście zajmiemy się żądanie, które używa krótkie nazwy aby wyświetlić adres URL specyfikacji, opis i status dokumentu. Żądanie wygląda tak:

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

Na przykład żądanie specyfikacji HTML5 będzie takie;

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

Skupmy się teraz na kodzie HTML, którego użyjemy do wyświetlenia danych pobranych przez API. W tym celu zdecydowałem się użyć szablonu HTML. Szablony HTML służą do przechowywania kodu HTML, który jest analizowany, ale nie renderowany, dopóki nie zostaną dodane do strony za pomocą JavaScript.

 
W3C SPECS
 
  

Szablon jest gotowy. Teraz na JavaScript, który będzie wysyłać żądania HTTP i wyświetlać dane JSON odpowiedzi w HTML. Oto zbiór zmiennych globalnych, od których zaczniemy:

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

krótkie nazwy jest tablicą krótkie nazwy specyfikacji, które chcemy wyświetlić na naszej stronie internetowej; jeśli chcesz znaleźć krótkie imię Specyfikacji spójrz na jej URL W3C i będziesz mógł zobaczyć ją na końcu.

Jednak nie ma gwarancji, że uda ci się zdobyć wszystko Specyfikacje takie jak ta; nie ma ostatecznej listy krótkie nazwy oraz Specyfikacje, które są dostępne za pośrednictwem interfejsu API.

Pętla przez krótkie nazwy tablica i opublikuj żądanie HTTP dla każdego z nich i pobierz odpowiedź.

for (var i = 0; i 
The responseText jest łańcuchem JSON i musi zostać przeanalizowany, aby uzyskać obiekt JSON. displaySpec jest funkcją, która użyje danych JSON i wyświetli je w HTML.
 
Poniżej znajduje się przykładowy tekst odpowiedzi JSON dla specyfikacji HTML5 i po kodzie dla displaySpec. 
 
 
function displaySpec (json) if ('content' w templateEle) / * pobierz zawartość szablonu * / templateEleContent = templateEle.content; / * dodaj tytuł spec do nagłówka h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * dodaj określony adres URL do łącza * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * dodaj opis specyfikacji * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * dodaj status specyfikacji i pokoloruj go na podstawie jego wartości * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["najnowsza wersja"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Zalecenie': W3cSpecLatestVerStatus.className = "zalecenia"; złamać; case 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; złamać; sprawa „Emerytowany”: W3cSpecLatestVerStatus.className = „emeryci”; złamać; przypadek „Zalecenie kandydata”: W3cSpecLatestVerStatus.className = „candidRecommendation”; złamać;  / * dodaj kopię zawartości szablonu do głównego div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * dodaj kod JS, aby tworzyć elementy indywidualnie * / 
 
if ('content' w templateEle) jest sprawdzenie, czy szablon HTML jest obsługiwany przez przeglądarkę, jeśli nie, utwórz wszystkie elementy HTML w samym JS. A kiedy jest wsparcie, wypełnij elementy HTML znajdujące się w treści szablonu odpowiednimi danymi z JSON, a na koniec dołącz kopię kopii szablonu do głównej # w3cSpecs div.
 
to jest to! Przy odrobinie stylizacji CSS, wyjście wygląda tak: