Как да се показват данни за W3C спецификация чрез неговия Web API

Наградата Emmy® W3C е международна организация за стандарти за световната мрежа. Той създава нови уеб стандарти и ги преразглежда постоянно, за да ги държи последователни и подходящи в целия свят.

Браузърите и уебсайтовете са станали стандартно съвместими с времето, това позволява на уебсайтовете да се визуализират и работят равномерно във всички различни браузъри. Един от най-полезните публично достъпни ресурси е документацията W3C Specification в w3c.org.

Наскоро W3C предостави своите данни чрез Web API, чиято страница в проекта е в Github. Въвеждането на този API от страницата му на проекта е както следва:

“В отговор на търсенето от разработчиците в нашата общност, които искат да си взаимодействат с данните на W3C, екипът на W3C Systems разработи Web API. Чрез него предоставяме данни за спецификации, групи, организации и потребители.”

В днешния пост ще видим как да изтеглите спецификационните данни чрез W3C API. Ще намерите различните заявки, които можете да публикувате, за да изтеглите данните от спецификацията и други в https://api.w3.org/doc, а също така и с пясъчника за всяка заявка за тестване на приложния програмен интерфейс (API), но ще ви трябва API ключ.

Нека първо да видим как да получите API ключ.

1. Влезте в своя W3C акаунт или създайте такъв.
2. След това отидете Управление на ключовете за API в страницата на потребителския ви профил.
3. Кликнете Нов ключ за API и му дайте име за генериране на ключа.
4. След това, ако желаете, можете да го копирате в папката апи ключ текстово поле в началото на уеб страницата https://api.w3.org/doc, за да тествате API в пясъчника.

За тази публикация ще разгледаме искане, което използва shortnames за да се покаже URL адресът за описание, описание и състояние на документа. Заявката изглежда така:

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

Например искане за HTML5 спецификация ще бъде такова;

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

Сега нека се съсредоточим върху HTML кода, който ще използваме за показване на данните, извлечени чрез API. За това реших да използвам HTML шаблон. HTML шаблоните се използват за съхраняване на HTML код, който се анализира, но не се показва, докато не бъдат добавени към страницата с помощта на JavaScript.

 
W3C SPECS
 
  

Шаблонът е готов. Сега, върху JavaScript, който ще прави HTTP заявка и показва данните за JSON в HTML. Ето набор от глобални променливи, с които ще започнем:

var shortnames = ['html5', 'selectors4', 'battery-status', 'fullscreen'], xmlhttp = нов XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Шаблон '); 

shortnames е масив от shortnames на спецификациите, които искаме да покажем в нашата уеб страница; ако искате да намерите кратко име на спецификация погледнете неговия W3C URL и ще можете да го видите в края.

Въпреки това не е гарантирано, че ще можете да получите всичко Спецификации като тази; няма окончателен списък на shortnames и още спецификации, които са достъпни чрез API.

Прекарайте през shortnames масив и публикува HTTP заявка за всеки и извлича отговора.

за (var i = 0; i 
Най- responseText е JSON низ и трябва да бъде анализиран, за да се получи JSON обект. displaySpec е функцията, която ще използва JSON данните и ще я показва в HTML.
 
По-долу е даден примерен текст за отговор на JSON за спецификация HTML5 и след кода за displaySpec. 
 
 
функция displaySpec (json) if ('content' в templateEle) / * получи съдържанието на шаблона * / templateEleContent = templateEle.content; / * добавя заглавие към спецификацията h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * добавя специален URL към връзката * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * добавяне на спецификация * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * добавя спецификационно състояние и го оцветява въз основа на неговата стойност * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('марка'); var status = json._links ["последна версия"]. W3cSpecLatestVerStatus.textContent = статус; switch (status) case 'Препоръка': W3cSpecLatestVerStatus.className = "препоръка"; прекъсване; случай 'Работен проект': W3cSpecLatestVerStatus.className = 'чернова'; прекъсване; case 'Retired': W3cSpecLatestVerStatus.className = 'оттеглено'; прекъсване; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'препоръка за кандидат'; прекъсване;  / * добави копие от съдържанието на шаблона към главния div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * добавите JS код, за да създадете отделните елементи * / 
 
ако („съдържание“ в шаблонЕле) е да проверите дали HTML шаблонът се поддържа от браузъра, ако не е, създайте всички HTML елементи в самия JS. И когато има поддръжка, попълнете HTML елементите, които са в съдържанието на шаблона, със съответните данни от JSON и накрая добавете копие от съдържанието на шаблона към основния # w3cSpecs Разделение.
 
Това е. С малко CSS стилове изходът изглежда така: