Cara Menampilkan data Spesifikasi W3C menggunakan API Web-nya

Pemenang penghargaan Emmy® W3C adalah organisasi standar internasional untuk World Wide Web. Ini menciptakan standar web baru dan merevisinya terus-menerus agar tetap konsisten dan relevan di seluruh dunia.

Peramban dan situs web telah menjadi patuh standar untuk waktu yang lebih lama, ini memungkinkan situs web untuk membuat dan bekerja secara seragam di semua peramban yang berbeda. Salah satu sumber daya paling berguna yang tersedia untuk umum adalah dokumentasi Spesifikasi W3C di w3c.org.

Baru-baru ini W3C membuat datanya tersedia melalui Web API, halaman proyek yang ada di Github. Intro API ini dari halaman proyeknya adalah sebagai berikut:

“Menanggapi permintaan dari pengembang di komunitas kami yang ingin berinteraksi dengan data W3C, Tim Sistem W3C telah mengembangkan API Web. Melalui itu kami menyediakan data tentang Spesifikasi, Grup, Organisasi dan Pengguna.”

Dalam posting hari ini kita akan lihat cara mengambil data Spesifikasi melalui API W3C. Anda akan menemukan berbagai permintaan yang dapat Anda poskan untuk mengambil data Spesifikasi dan lainnya di https://api.w3.org/doc, itu juga dilengkapi dengan kotak pasir untuk setiap permintaan untuk menguji API, tetapi Anda akan memerlukan Kunci API.

Mari kita lihat dulu cara mendapatkan kunci API.

1. Login ke akun W3C Anda atau buat satu.
2. Lalu pergi ke Kelola Kunci API di halaman profil Anda.
3. Klik Kunci API Baru dan berikan nama untuk menghasilkan kunci Anda.
4. Kemudian jika Anda mau, Anda bisa menyalin-menempelkannya ke kunci API kotak teks di awal halaman web https://api.w3.org/doc untuk menguji API di kotak pasir.

Untuk posting ini, kita akan melihat permintaan yang menggunakan nama pendek untuk menampilkan URL Spesifikasi, deskripsi, dan status dokumen. Permintaannya terlihat seperti ini:

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

Misalnya, permintaan spesifikasi HTML5 akan seperti ini;

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

Sekarang, mari kita fokus pada HTML yang akan kita gunakan untuk menampilkan data yang diambil melalui API. Untuk ini saya telah memutuskan untuk menggunakan Template HTML. Templat HTML digunakan untuk menyimpan kode HTML yang diuraikan tetapi tidak dirender hingga ditambahkan ke halaman menggunakan JavaScript.

 
W3C SPECS
 
  

Template sudah siap. Sekarang, ke JavaScript yang akan membuat permintaan HTTP dan menampilkan data respons JSON dalam HTML. Inilah set variabel global yang akan kita mulai dengan:

var shortnames = ['html5', 'selectors4', 'status baterai', 'fullscreen'], xmlhttp = XMLHttpRequest () baru, w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Templat' '); 

nama pendek adalah array dari nama pendek dari Spesifikasi yang ingin kami tampilkan di halaman web kami; jika Anda ingin menemukan nama pendek dari Spesifikasi lihat URL W3C-nya dan Anda akan dapat melihatnya di akhir.

Namun, itu tidak dijamin bahwa Anda akan bisa mendapatkannya semua Spesifikasi seperti ini; tidak ada daftar pasti nama pendek dan Spesifikasi yang belum tersedia melalui API.

Loop melalui nama pendek susun dan kirim permintaan HTTP untuk masing-masing, dan ambil responsnya.

untuk (var i = 0; i 
Itu responseText adalah string JSON dan harus diurai untuk mendapatkan objek JSON. displaySpec adalah fungsi yang akan menggunakan data JSON dan menampilkannya dalam HTML.
 
Di bawah ini adalah contoh teks respons JSON untuk Spesifikasi HTML5 dan setelah kode untuk displaySpec. 
 
 
function displaySpec (json) if ('content' di templatEle) / * dapatkan konten Templat * / templatEleContent = templatEle.content; / * tambahkan judul spesifikasi ke header h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * tambahkan URL spesifikasi ke tautan * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * tambahkan deskripsi spesifikasi * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * tambahkan status spesifikasi dan warnai berdasarkan nilainya * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["versi terbaru"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Rekomendasi': W3cSpecLatestVerStatus.className = "rekomendasi"; istirahat; case 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; istirahat; case 'Retired': W3cSpecLatestVerStatus.className = 'retired'; istirahat; case 'Calon Rekomendasi': W3cSpecLatestVerStatus.className = 'kandidatRekomendasi'; istirahat;  / * tambahkan salinan konten Templat ke div utama * / w3cSpecsEle.appendChild (document.importNode (templatEleContent, true));  else / * tambahkan kode JS untuk membuat elemen satu per satu * / 
 
if ('content' di templatEle) adalah untuk memeriksa apakah HTML Template didukung oleh browser, jika tidak, buat semua elemen HTML di JS itu sendiri. Dan ketika ada dukungan, isi elemen HTML yang ada di dalam konten Templat dengan data terkait dari JSON dan akhirnya, tambahkan salinan konten Templat ke utama # w3cSpecs div.
 
Itu dia. Dengan sedikit gaya CSS, hasilnya terlihat seperti ini: