Як відображати дані специфікації W3C за допомогою веб-API

Перемога Emmy® W3C є міжнародною організацією стандартів для World Wide Web. Він створює нові веб-стандарти і постійно переглядає їх, щоб вони були послідовними та актуальними по всьому світу.

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

Нещодавно W3C зробила свої дані доступними через Web API, сторінка проекту якої знаходиться в Github. Вступ цього API з його сторінки проекту такий:

“У відповідь на вимогу розробників у нашому співтоваристві, які бажають взаємодіяти з даними W3C, команда W3C Systems розробила веб-API. Завдяки цьому ми надаємо дані про специфікації, групи, організації та користувачів.”

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

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

1. Увійдіть до свого облікового запису W3C або створіть його.
2. Потім перейдіть до Керування ключами API на сторінці профілю.
3. Натисніть Новий ключ API і дайте йому ім'я, щоб створити ключ.
4. Потім, якщо ви бажаєте, ви можете скопіювати-вставити його в api ключ Текстове поле на початку веб-сторінки https://api.w3.org/doc для тестування API у пісочниці.

Для цієї публікації ми розглянемо запит, який використовує коротких імен для відображення 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 ('Шаблон' '); 

коротких імен - це масив з коротких імен специфікацій, які ми хочемо відобразити на нашій веб-сторінці; якщо ви хочете знайти коротке ім'я Специфікації дивіться на його W3C URL, і ви зможете побачити його в кінці.

Однак, це не гарантує, що ви зможете отримати все Технічні характеристики такі; не існує остаточного списку коротких імен та Технічні характеристики, які доступні через API.

Петля через коротких імен масив і розміщувати HTTP-запит для кожного і отримувати відповідь.

для (var i = 0; i 
The 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 = "рекомендація"; перерву; case 'Working Draft': W3cSpecLatestVerStatus.className = 'проект'; перерву; case 'Retired': W3cSpecLatestVerStatus.className = 'звільнений'; перерву; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'Рекомендація кандидата'; перерву;  / * додавання копії вмісту шаблону до головного div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * додайте код JS для створення елементів індивідуально * / 
 
if ("content" у шаблоніEle) полягає в тому, щоб перевірити, чи підтримує браузер HTML-шаблон, якщо це не так, то створюйте всі елементи HTML в самому JS. А коли є підтримка, заповніть елементи HTML, які знаходяться в вмісті шаблону, відповідними даними з JSON і, нарешті, додайте копію вмісту шаблону до основного # w3cSpecs div.
 
Це воно. Маючи декілька стилів CSS, вихід виглядає так: