Как отобразить данные спецификации W3C с помощью веб-API

Награда Эмми® W3C является международной организацией по стандартизации для World Wide Web. Он создает новые веб-стандарты и постоянно их пересматривает, чтобы обеспечить их согласованность и актуальность во всем мире..

Браузеры и веб-сайты со временем стали в большей степени совместимыми со стандартами, что позволяет веб-сайтам одинаково отображаться и работать во всех браузерах. Одним из наиболее полезных общедоступных ресурсов является документация спецификации W3C на w3c.org..

Недавно W3C сделал свои данные доступными через веб-API, страница проекта которого находится на Github. Введение этого API со страницы проекта выглядит следующим образом:

“В ответ на запросы разработчиков нашего сообщества, желающих взаимодействовать с данными W3C, W3C Systems Team разработала веб-API. Через него мы предоставляем данные о спецификациях, группах, организациях и пользователях..”

В сегодняшнем посте мы увидим как получить данные спецификации через W3C API. Вы найдете различные запросы, которые вы можете опубликовать для получения данных Спецификации и других, в https://api.w3.org/doc. Он также поставляется с песочницей для каждого запроса для тестирования API, но вам потребуется Ключ API.

Давайте сначала посмотрим как получить ключ API.

1. Войдите в свою учетную запись W3C или создайте.
2. Затем перейдите к Управление ключами API на странице вашего профиля.
3. Нажмите Новый ключ API и дать ему имя для генерации вашего ключа.
4. Затем, если вы хотите, вы можете скопировать и вставить его в ключ API текстовое поле в начале веб-страницы 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 = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Template «); 

shortnames это массив shortnames из спецификаций, которые мы хотим отобразить на нашей веб-странице; если вы хотите найти короткое имя спецификации смотрите на ее W3C URL, и вы сможете увидеть его в конце.

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

Перебрать shortnames массив и отправить HTTP-запрос для каждого, и получить ответ.

для (var i = 0; i 
 responseText является строкой JSON и должен быть проанализирован, чтобы получить объект JSON. displaySpec это функция, которая будет использовать данные JSON и отображать их в HTML.
 
Ниже приведен пример текста ответа JSON для спецификации HTML5 и после кода для displaySpec. 
 
 
function 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 ('mark'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = status; switch (статус) случай 'Рекомендация': W3cSpecLatestVerStatus.className = "рекомендация '; перерыв; case 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; перерыв; case 'Retired': W3cSpecLatestVerStatus.className = 'retired'; перерыв; case 'Рекомендация кандидата': W3cSpecLatestVerStatus.className = 'candidRecommendation'; перерыв;  / * добавить копию содержимого шаблона в основной div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * добавить код JS для индивидуального создания элементов * / 
 
if ('content' в templateEle) заключается в проверке того, поддерживается ли HTML-шаблон браузером, если нет, создайте все элементы HTML в самом JS. И когда есть поддержка, заполните HTML-элементы, которые находятся внутри содержимого шаблона, соответствующими данными из JSON и, наконец, добавьте копию содержимого шаблона в основной # w3cSpecs ДИВ.
 
Вот и все. С небольшим количеством стилей CSS, результат выглядит так: