Hogyan jelenítsük meg a W3C specifikáció adatait a Web API használatával

Az Emmy® díjnyertes W3C a World Wide Web nemzetközi szabványügyi szervezet. Új webes szabványokat hoz létre, és folyamatosan felülvizsgálja azokat, hogy azok világszerte következetesek és relevánsak legyenek.

A böngészők és a webhelyek idővel egyre szabványosabbá váltak, ez lehetővé teszi a webhelyek számára, hogy az összes böngészőben egységes módon működjenek és működjenek. A nyilvánosan elérhető egyik leghasznosabb forrás a W3C specifikáció dokumentációja a w3c.org-ban.

Nemrégiben a W3C webes API-n keresztül szolgáltatta az adatait, amelynek projektoldala Githubban található. Az API bevezetője a projektoldalról a következő:

“A W3C rendszercsoportja együttműködve a közösségünk fejlesztői igényeire válaszul a W3C Systems Team web API-t fejlesztett ki. Ezáltal elérhetővé teszik a specifikációk, csoportok, szervezetek és felhasználók adatait.”

A mai hozzászólásban látni fogjuk hogyan kell letölteni a specifikációs adatokat a W3C API-n keresztül. Meg fogja találni a különféle kéréseket, amelyeket a Specifikációs adatok és a https://api.w3.org/doc címen történő letöltés céljából közzétesz. API-kulcs.

Nézzük először hogyan lehet az API kulcsot kapni.

1. Jelentkezzen be a W3C-fiókjába, vagy hozzon létre egyet.
2. Akkor menj API-kulcsok kezelése a profiloldalon.
3. Kattints Új API kulcs és adjon nevet a kulcs létrehozásához.
4. Akkor, ha akarja, beillesztheti azt a api gomb a https://api.w3.org/doc weboldal elején található szövegmező az API teszteléséhez a homokozóban.

Ehhez a hozzászóláshoz megvizsgáljuk a kérést shortnames a specifikáció URL-címe, leírása és a dokumentum állapota. A kérés így néz ki:

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

Például egy HTML5 spec kérés lesz ilyen;

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

Most összpontosítsunk azokra az HTML -ekre, amelyeket az API-n keresztül letöltött adatok megjelenítéséhez fogunk használni. Ehhez úgy döntöttem, hogy HTML sablont használok. A HTML-sablonokat olyan HTML-kódok tárolására használják, amelyek elemzésre kerülnek, de addig nem kerülnek megjelenítésre, amíg hozzá nem adják az oldalt a JavaScript segítségével.

 
W3C SPECS
 
  

A sablon kész. Most, a JavaScript-re, amely a HTTP-kérést teszi, és megjeleníti a válasz JSON-adatokat HTML-ben. Íme a globális változók halmaza:

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

shortnames egy tömb shortnames a specifikációk, amelyeket a weboldalunkon szeretnénk megjeleníteni; ha szeretné megtalálni a Rövid név A specifikáció megnézheti a W3C URL-címét, és a végén láthatja.

Nem garantált azonban, hogy képes lesz minden Az ilyen specifikációk; nincs végleges listája shortnames és az API-n keresztül elérhető specifikációk.

Hurok át a shortnames tömböt és HTTP-kérelmet küldünk mindegyikre, és lekérdezzük a választ.

a (var i = 0; i 
A responseText egy JSON karakterlánc, és elemezni kell, hogy megkapja a JSON objektumot. displaySpec Ez a függvény használja a JSON adatokat és megjeleníti azt HTML-ben.
 
Az alábbiakban a JSON válasz szöveg szövege HTML5 specifikációhoz és a kód után displaySpec. 
 
 
function displaySpec (json) if ('tartalom' a templateEle-ben) / * kap sablon tartalmát * / templateEleContent = templateEle.content; / * hozzáadja a spec címet a h2 fejléchez * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * adj hozzá URL-címet a linkhez * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * Specifikáció hozzáadása * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * adja hozzá a specifikáció állapotát és színét a * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark') érték alapján; var status = json._links ["legújabb verzió"]. cím; W3cSpecLatestVerStatus.textContent = állapot; kapcsoló (állapot) case 'Ajánlás: W3cSpecLatestVerStatus.className = "ajánlás"; szünet; eset 'Munkacsoport': W3cSpecLatestVerStatus.className = 'tervezet'; szünet; eset 'Retired': W3cSpecLatestVerStatus.className = 'nyugdíjas'; szünet; eset: „Ajánlattételi ajánlás”: W3cSpecLatestVerStatus.className = 'loodusjelölt ajánlás'; szünet;  / * a sablon tartalmának másolatát adja hozzá a fő div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  más / * hozzáadja a JS kódot az elemek egyedileg létrehozásához * / 
 
ha ("tartalom" sablonbanEle) annak ellenőrzése, hogy a böngésző támogatja-e a HTML-sablont, ha nem, akkor hozza létre a HTML-elemeket a JS-ben. És ha van támogatás, töltse ki a HTML elemeket, amelyek a sablon tartalmában vannak, a JSON megfelelő adataival, és végül csatolja a sablon tartalmának másolatát a főbb # w3cSpecs div.
 
Ez az. Egy kis CSS-stílussal a kimenet így néz ki: