W3C Şartname verilerini Web API'sini kullanarak görüntüleme

Emmy® ödüllü W3C World Wide Web için uluslararası bir standart organizasyondur. Yeni web standartları oluşturur ve onları dünya genelinde tutarlı ve alakalı tutmak için sürekli gözden geçirir..

Tarayıcılar ve web siteleri zamanla büyük ölçüde standartlara uygun hale gelmiştir, bu, web sitelerinin tüm tarayıcılarda aynı şekilde oluşturulmasını ve çalışmasını sağlar. Halka açık en yararlı kaynaklardan biri w3c.org'daki W3C Şartname dokümantasyonu..

Son zamanlarda W3C verilerini, proje sayfası Github'da bulunan bir Web API'sı aracılığıyla kullanıma sunmuştur. Bu API'nin proje sayfasından girişi şöyledir:

“Topluluğumuzdaki geliştiricilerin W3C'nin verileriyle etkileşime girmek isteyen taleplerine yanıt olarak, W3C Sistem Ekibi bir Web API geliştirmiştir. Bu sayede Spesifikasyonlar, Gruplar, Organizasyonlar ve Kullanıcılar hakkındaki verileri hazırlıyoruz..”

Bugünün yayınında göreceğiz Spesifikasyon verilerinin W3C API'sinden getirilmesi. Spesifikasyon verilerini ve diğerlerini almak için gönderebileceğiniz çeşitli istekleri https://api.w3.org/doc adresinde bulacaksınız; ayrıca, API'yi test etmek için her istek için bir sanal alan geliyor, ancak API anahtarı.

İlk görelim API anahtarı nasıl alınır.

1. W3C hesabınıza giriş yapın veya bir tane oluşturun.
2. Sonra şuraya git API Anahtarlarını Yönet profil sayfanda.
3. Click Yeni API Anahtarı ve anahtarınızı oluşturması için bir ad verin.
4. Ardından, isterseniz, kopyalayıp kopyalayıp yapıştırabilirsiniz. api anahtarı Web sayfasının başındaki metin kutusu API’yi sanal alanda test etmek için https://api.w3.org/doc.

Bu yayın için, içine bakacağız kullanan istek shortnames Şartname URL'sini, açıklamayı ve belge durumunu görüntülemek için. İstek şöyle gözüküyor:

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

Örneğin, bir HTML5 spec isteği böyle olacak;

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

Şimdi, API üzerinden getirilen verileri görüntülemek için kullanacağımız HTML'e odaklanalım. Bunun için HTML Şablonu kullanmaya karar verdim. HTML şablonları, JavaScript kullanılarak sayfaya ekleninceye kadar ayrıştırılan ancak görüntülenmeyen HTML kodunu tutmak için kullanılır.

 
W3C ÖZELLİKLERİ
 
  

Şablon hazır. Şimdi, JavaScript’e HTTP isteği gönderecek ve yanıt JSON verilerini HTML’de gösterecek. İşte başlayacağımız global değişkenler kümesi:

var shortnames = ['html5', 'selectors4', 'pil durumu', 'tam ekran'], xmlhttp = yeni XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('# w3cSpecs') '); 

shortnames bir dizi shortnames web sayfamızda görüntülemek istediğimiz Teknik Özellikler; bulmak istersen Kısa isim Bir Spesifikasyonun W3C URL'sine bakın ve sonunda görebilirsiniz.

Ancak, alabileceğiniz garanti değil herşey Bunun gibi özellikler; kesin bir liste yok shortnames ve henüz API üzerinden erişilebilen Özellikler.

Arasında döngü shortnames Her biri için bir HTTP isteği dizilip gönderin ve yanıtı alın.

(var i = 0; i 
 responseText bir JSON dizesidir ve JSON nesnesini almak için ayrıştırılmalıdır. displaySpec JSON verilerini kullanacak ve HTML’de gösterecek işlevdir.
 
Aşağıda, HTML5 Şartnamesi için ve ardından kodundan sonraki örnek JSON yanıt metni displaySpec. 
 
 
function displaySpec (json) if (templateEle'de 'content') / * Template'in içeriğini almak * / templateEleContent = templateEle.content; / * h2 başlığına * özellik başlığı ekleyin * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink') bağlantısına spesifik URL ekleyin; w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * özellik açıklaması ekle * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * özel durum ekleyin ve değerini temel alarak renklendirin * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["en son sürüm"]. title; W3cSpecLatestVerStatus.textContent = status; anahtarı (durum) case 'Öneri': W3cSpecLatestVerStatus.className = "öneri"; break; case 'Working Draft': W3cSpecLatestVerStatus.className = 'taslak'; break; case 'Retired': W3cSpecLatestVerStatus.className = 'emekli'; break; case 'Aday Tavsiye': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; break;  / * Şablonun içeriğinin bir kopyasını ana div'e * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * elemanları tek tek oluşturmak için JS kodu ekleyin * / 
 
if (templateEle içindeki 'content') HTML Şablonunun tarayıcı tarafından desteklenip desteklenmediğini kontrol etmek içindir, değilse, JS'nin içindeki tüm HTML öğelerini oluşturun. Ve destek olduğunda, Şablonun içeriğindeki HTML öğelerini JSON'daki ilgili verilerle doldurun ve son olarak Şablon içeriğinin bir kopyasını ana sayfaya ekleyin. # w3cSpecs div.
 
Bu kadar. Biraz CSS stiliyle çıktı şöyle görünür: