วิธีการแสดงข้อมูลจำเพาะ W3C โดยใช้ Web API

รางวัลเอ็มมี่ที่ได้รับรางวัล W3C เป็นองค์กรมาตรฐานสากลสำหรับเวิลด์ไวด์เว็บ มันสร้างมาตรฐานเว็บใหม่และปรับปรุงให้สม่ำเสมอเพื่อให้สอดคล้องและมีความเกี่ยวข้องทั่วโลก.

เบราว์เซอร์และเว็บไซต์ได้กลายเป็นมาตรฐานในระดับที่มากขึ้นเมื่อเวลาผ่านไปสิ่งนี้ทำให้เว็บไซต์สามารถแสดงผลและทำงานได้อย่างเท่าเทียมกันในทุกเบราว์เซอร์ต่างๆ หนึ่งในแหล่งข้อมูลที่มีประโยชน์ที่สุดที่เปิดเผยต่อสาธารณะคือเอกสารข้อมูลจำเพาะของ W3C ใน w3c.org.

เมื่อเร็ว ๆ นี้ W3C ทำให้ข้อมูลพร้อมใช้งานผ่าน Web API หน้าโครงการซึ่งอยู่ใน Github บทนำของ API นี้จากหน้าโครงการมีดังต่อไปนี้:

“เพื่อตอบสนองต่อความต้องการจากนักพัฒนาในชุมชนของเราที่ต้องการโต้ตอบกับข้อมูลของ W3C ทีม W3C Systems จึงได้พัฒนา Web 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
 
  

แม่แบบพร้อมแล้ว ตอนนี้ไปที่ JavaScript ที่จะทำการร้องขอ HTTP และแสดงข้อมูลการตอบสนอง JSON ใน HTML นี่คือชุดของตัวแปรทั่วโลกที่เราจะเริ่มต้นด้วย:

var shortnames = ['html5', 'selectors4', 'สถานะแบตเตอรี่', 'เต็มหน้าจอ'], xmlhttp = ใหม่ XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('# w3cSpecs') '); 

shortnames เป็นอาร์เรย์ของ shortnames ของข้อกำหนดที่เราต้องการแสดงในหน้าเว็บของเรา; ถ้าคุณต้องการที่จะหา ชื่อสั้น ของข้อกำหนดดูที่ URL ของ W3C และคุณจะสามารถดูได้ในตอนท้าย.

อย่างไรก็ตามไม่รับประกันว่าคุณจะได้รับ ทั้งหมด ข้อมูลจำเพาะเช่นนี้; ไม่มีรายการที่ชัดเจนของ shortnames และข้อมูลจำเพาะที่มีให้ผ่าน API.

วนผ่าน shortnames อาร์เรย์และโพสต์คำขอ HTTP สำหรับแต่ละรายการและดึงการตอบกลับ.

สำหรับ (var i = 0; i 
 responseText เป็นสตริง JSON และจะต้องมีการแยกวิเคราะห์เพื่อรับวัตถุ JSON. displaySpec เป็นฟังก์ชั่นที่จะใช้ข้อมูล JSON และแสดงเป็น HTML.
 
ด้านล่างนี้เป็นตัวอย่างข้อความตอบกลับ JSON สำหรับข้อมูลจำเพาะ HTML5 และหลังรหัส displaySpec. 
 
 
ฟังก์ชั่น displaySpec (json) ถ้า ('เนื้อหา' ใน 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 ["ชื่อรุ่นล่าสุด"]. title; W3cSpecLatestVerStatus.textContent = สถานะ; สวิตช์ (สถานะ) กรณี 'คำแนะนำ': W3cSpecLatestVerStatus.className = "การแนะนำ"; ทำลาย; กรณี 'Working Draft': W3cSpecLatestVerStatus.className = 'ฉบับร่าง'; ทำลาย; กรณี 'เกษียณอายุ': W3cSpecLatestVerStatus.className = 'เกษียณ'; ทำลาย; กรณี 'คำแนะนำผู้สมัคร': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; ทำลาย;  / * เพิ่มสำเนาของเนื้อหาของเทมเพลตใน div หลัก * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * เพิ่มรหัส JS เพื่อสร้างองค์ประกอบแต่ละรายการ * / 
 
if ('เนื้อหา' ใน templateEle) คือการตรวจสอบว่าเบราว์เซอร์ HTML รองรับเทมเพลตหรือไม่ถ้าไม่ใช่ให้สร้างองค์ประกอบ HTML ทั้งหมดใน JS เอง และเมื่อมีการสนับสนุนให้กรอกองค์ประกอบ HTML ที่อยู่ภายในเนื้อหาของเทมเพลตด้วยข้อมูลที่เกี่ยวข้องจาก JSON และในที่สุดให้ผนวกสำเนาของเนื้อหาเทมเพลตไว้ที่หลัก # w3cSpecs div.
 
แค่นั้นแหละ. ด้วย CSS stylings เล็กน้อยผลลัพธ์จะเป็นดังนี้: