Cum se afișează datele specificației W3C utilizând API-ul Web

Câștigătorul premiului Emmy® W3C este o organizație internațională de standarde pentru World Wide Web. Creează noi standarde web și le revizuiește constant pentru a le menține consecvente și relevante pe tot globul.

Browserele și site-urile web au devenit standard conforme într-o măsură mai mare cu timpul, acest lucru permite site-urilor Web să facă și să lucreze uniform în toate browserele diferite. Una dintre cele mai utile resurse disponibile în public este documentația W3C Specification în w3c.org.

Recent, W3C și-a făcut datele disponibile printr-un API Web, a cărui pagină de proiect este în Github. Intro-ul acestui API din pagina de proiect este următorul:

“Ca răspuns la cererea dezvoltatorilor din comunitatea noastră care doresc să interacționeze cu datele W3C, echipa W3C Systems a dezvoltat un API Web. Prin aceasta punem la dispoziție date privind specificațiile, grupurile, organizațiile și utilizatorii.”

În postul de astăzi vom vedea cum să preluați datele de specificație prin API-ul W3C. Veți găsi diferitele solicitări pe care le puteți posta pentru a prelua datele de specificație și altele în https://api.w3.org/doc, dar vine și cu o cutie de nisip pentru fiecare solicitare de testare a API, dar veți avea nevoie de o Cheia API.

Să vedem mai întâi cum să obțineți cheia API.

1. Conectați-vă la contul dvs. W3C sau creați unul.
2. Apoi du-te la Gestionați cheile API în pagina de profil.
3. Clic Noua cheie API și dă-i un nume pentru a-ți genera cheia.
4. Apoi, dacă doriți, puteți copia-o inserați în cheie api caseta de text de la începutul paginii web https://api.w3.org/doc pentru a testa API-ul în caseta de nisip.

Pentru acest post, vom examina cererea care utilizează shortnames pentru a afișa URL-ul specificației, descrierea și starea documentului. Cererea arată astfel:

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

De exemplu, o cerere de spec. HTML5 va fi așa;

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

Acum, să ne concentrăm asupra codului HTML pe care îl vom folosi pentru a afișa datele preluate prin API. Pentru aceasta am decis sa folosesc HTML Template. Șabloanele HTML sunt utilizate pentru a ține codul HTML care sunt analizate dar nu redate până când nu sunt adăugate la pagină utilizând JavaScript.

 
W3C SPECS
 
  

Șablonul este gata. Acum, pe JavaScript care va face cererea HTTP și afișarea datelor JSON de răspuns în HTML. Iată setul de variabile globale:

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

shortnames este o serie de shortnames din specificațiile pe care dorim să le afișăm în pagina noastră de internet; dacă doriți să găsiți nume scurt a unei specificații, uitați-vă la adresa W3C și veți putea să o vedeți la sfârșit.

Cu toate acestea, nu este garantat că veți putea obține toate Specificații ca aceasta; nu există o listă definitivă de shortnames și Specificațiile disponibile încă prin API.

Bucle prin shortnames și trimiteți o solicitare HTTP pentru fiecare dintre ele și preluați răspunsul.

pentru (var i = 0; i 
 responseText este un șir JSON și trebuie analizat pentru a obține obiectul JSON. displaySpec este funcția care va folosi datele JSON și va afișa în HTML.
 
Mai jos este textul de răspuns JSON de probă pentru specificația HTML5 și după codul pentru displaySpec. 
 
 
funcția displaySpec (json) if ('content' în templateEle) / * obține conținutul de șablon * / templateEleContent = templateEle.content; / * adăugați titlul spec. la h2 header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * adăugați adresa URL spec la linkul * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * adăugați descrierea spec. * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * adăugați statusul spec și culoarea pe baza valorii sale * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["ultima versiune"]. W3cSpecLatestVerStatus.textContent = status; switch (status) Recomandare "caz": W3cSpecLatestVerStatus.className = "recomandare"; pauză; cazul "Proiect de lucru": W3cSpecLatestVerStatus.className = 'draft'; pauză; caz retras: W3cSpecLatestVerStatus.className = 'retras'; pauză; cazul "Recomandare pentru candidatură": W3cSpecLatestVerStatus.className ='Recommendation candidate '; pauză;  / * adăugați o copie a conținutului șablonului în div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  altceva / * adăugați codul JS pentru a crea elementele în mod individual * / 
 
dacă ('conținut' în templateEle) este de a verifica dacă șablonul HTML este acceptat de browser, dacă nu, creați toate elementele HTML din JS. Iar atunci când există suport, completați elementele HTML care sunt în interiorul conținutului Șablonului cu datele respective din JSON și, în final, adăugați o copie a conținutului Șablonului la principalele # w3cSpecs div.
 
Asta e. Cu un pic de stilizări CSS, ieșirea arată astfel: