כיצד להציג נתוני W3C Specification באמצעות ממשק ה- API של האינטרנט

פרס הזוכה בפרס Emmy W3C הוא ארגון תקנים בינלאומי עבור World Wide Web. הוא יוצר תקני אינטרנט חדשים ומעדכן אותם כל הזמן כדי לשמור אותם עקביים ורלוונטיים ברחבי העולם.

דפדפנים ואתרי אינטרנט הפכו סטנדרטיים תואמים במידה רבה יותר עם הזמן, זה מאפשר לאתרים לעבד ולעבוד אחיד על פני כל הדפדפנים השונים. אחד המשאבים השימושיים ביותר זמין לציבור הוא תיעוד W3C מפרט ב- w3c.org.

לאחרונה W3C עשה את הנתונים הזמינים באמצעות API אינטרנט, דף הפרויקט של אשר הוא Github. ההקדמה של ממשק API זה מדף הפרויקט שלו היא כדלקמן:

“בתגובה לביקוש מצד יזמים בקהילה שלנו המבקשים לקיים אינטראקציה עם נתוני W3C, פיתח צוות מערכות ה- W3C ממשק API לאינטרנט. באמצעות זה אנחנו עושים נתונים זמינים על מפרטים, קבוצות, ארגונים ומשתמשים.”

בהודעה של היום נראה כיצד לאחזר את נתוני Specification דרך ממשק ה- API של W3C. תוכל למצוא את הבקשות השונות שתוכל לפרסם כדי לאחזר את נתוני Specification ואחרים ב- https://api.w3.org/doc, אך הוא מגיע גם עם ארגז חול לכל בקשה לבדיקת ממשק ה- API, אך תצטרך מפתח API.

בואו נראה כיצד לקבל את מפתח ה- API.

1. היכנס לחשבון W3C או צור חשבון.
2. אז לך ל ניהול מפתחות ממשק API בדף הפרופיל שלך.
3. לחץ על מפתח API חדש ולתת לו שם כדי ליצור את המפתח שלך.
4. אז אם אתה רוצה, אתה יכול להעתיק ולהדביק אותו לתוך מפתח תיבת טקסט בתחילת דף האינטרנט https://api.w3.org/doc כדי לבדוק את ה- API בארגז החול.

עבור פוסט זה, נבחן הבקשה המשתמשת שמות קצרים כדי להציג את כתובת האתר של המפרט, התיאור ומצב המסמך. הבקשה נראית כך:

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. הנה קבוצת המשתנים הגלובליים שנתחיל בהם:

('w3cSpecs'), templateEle = document.querySelector ('תבנית', 'מצב סוללה', 'fullscreen'], xmlhttp = חדש XMLHttpRequest (), w3cSpecsEle = document.querySelector '); 

שמות קצרים הוא מערך של שמות קצרים של מפרטים שאנו רוצים להציג בדף האינטרנט שלנו; אם אתה רוצה למצוא את שם קצר של מפרט מפרט בכתובת ה- W3C שלה ותוכל לראות אותה בסוף.

עם זאת, לא מובטחת כי תוכל לקבל את כל מפרטים כגון זה; אין רשימה סופית של שמות קצרים ומפרטים הזמינים דרך ממשק ה- API.

לולאה דרך שמות קצרים מערך ולפרסם בקשת HTTP עבור כל אחד, ואת אחזור התגובה.

(var i = 0; i 
ה responseText הוא מחרוזת JSON ויש לנתח כדי לקבל את האובייקט JSON. displaySpec היא הפונקציה שתשתמש בנתוני JSON ותציג אותה ב- HTML.
 
להלן טקסט התגובה JSON לדוגמה עבור HTML5 מפרט ואחרי קוד עבור displaySpec. 
 
 
הפונקציה displaySpec (json) if ('content' in 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; / * הוסף מפרט spec * / w3cSpecDetail = templateEleContent.querySelector ('w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * להוסיף מצב spec וצבע זה מבוסס על הערך שלה * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('מארק'); var status = json._links ["הגירסה האחרונה"]. W3cSpecLatestVerStatus.textContent = מצב; מתג (מצב) מקרה 'המלצה': W3cSpecLatestVerStatus.className = "המלצה"; לשבור; 'טיוטה של ​​עבודה': W3cSpecLatestVerStatus.className = 'draft'; לשבור; מקרה 'בדימוס': W3cSpecLatestVerStatus.className = 'בדימוס'; לשבור; מקרה 'המלצה של מועמדים': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; לשבור;  / * * הוסף עותק של תוכן התבנית ל- div הראשי * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  אחר / * הוספת קוד JS כדי ליצור את האלמנטים בנפרד * / 
 
אם ('תוכן' ב- templateEle) היא לבדוק אם הדפדפן HTML נתמך על ידי הדפדפן, אם הוא לא, ליצור את כל רכיבי HTML של JS עצמה. וכאשר יש תמיכה, למלא את רכיבי HTML שנמצאים בתוך התוכן של תבנית עם הנתונים המתאימים של JSON ולבסוף, לצרף עותק של תוכן תבנית של הראשי # w3cSpecs div.
 
זהו זה. עם קצת stylings CSS, הפלט נראה כך: