Як відображати дані специфікації 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.
- Увійдіть до свого облікового запису W3C або створіть його.
- Потім перейдіть до Керування ключами API на сторінці профілю.
- Натисніть Новий ключ API і дайте йому ім'я, щоб створити ключ.
- Потім, якщо ви бажаєте, ви можете скопіювати-вставити його в 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; iThe
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, вихід виглядає так: