كيفية عرض بيانات مواصفات W3C باستخدام واجهة برمجة تطبيقات الويب

الحائز على جائزة Emmy® W3C هي منظمة معايير دولية لشبكة الويب العالمية. إنه يخلق معايير ويب جديدة وينقحها باستمرار للحفاظ عليها متسقة وذات صلة في جميع أنحاء العالم.

أصبحت المتصفحات ومواقع الويب متوافقة مع المعايير إلى حد كبير مع مرور الوقت ، مما يتيح لمواقع الويب أن تقدم وتعمل بشكل موحد عبر جميع المتصفحات المختلفة. واحدة من أكثر الموارد المفيدة المتاحة للجمهور هي وثائق مواصفات W3C في w3c.org.

قامت W3C مؤخرًا بتوفير بياناتها من خلال Web API ، صفحة المشروع الخاصة بها في Github. مقدمة واجهة برمجة التطبيقات هذه من صفحة المشروع هي كما يلي:

“استجابةً لطلب المطورين في مجتمعنا الراغبين في التفاعل مع بيانات W3C ، طور فريق W3C Systems Team واجهة برمجة تطبيقات ويب. من خلاله ، نحن نوفر بيانات حول المواصفات والمجموعات والمؤسسات والمستخدمين.”

في منشور اليوم سنرى كيفية جلب البيانات المواصفات من خلال W3C API. ستجد الطلبات المختلفة التي يمكنك نشرها لجلب بيانات المواصفات وغيرها في https://api.w3.org/doc ، كما يأتي مع صندوق رمل لكل طلب لاختبار واجهة برمجة التطبيقات ، لكنك ستحتاج إلى مفتاح API.

دعنا نرى أولا كيفية الحصول على مفتاح API.

1. تسجيل الدخول إلى حساب W3C الخاص بك أو إنشاء واحد.
2. ثم اذهب الى إدارة مفاتيح API في صفحة ملفك الشخصي.
3. انقر مفتاح API جديد ومنحها اسما لتوليد مفتاحك.
4. ثم إذا كنت ترغب في ذلك ، يمكنك نسخه ولصقه في مفتاح API مربع النص في بداية صفحة الويب https://api.w3.org/doc لاختبار واجهة برمجة التطبيقات في الصندوق الرمل.

لهذا المنشور ، سوف ننظر في الطلب الذي يستخدم shortnames لعرض عنوان URL للمواصفات والوصف وحالة المستند. يبدو الطلب كما يلي:

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

على سبيل المثال ، سيكون طلب مواصفات HTML5 مثل هذا ؛

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

الآن ، دعنا نركز على HTML الذي سنستخدمه لعرض البيانات التي يتم جلبها من خلال واجهة برمجة التطبيقات. لهذا قررت استخدام قالب HTML. تستخدم قوالب HTML للاحتفاظ بتعليمات HTML البرمجية التي يتم تحليلها ولكن لا يتم عرضها حتى يتم إضافتها إلى الصفحة باستخدام JavaScript.

 
المواصفات W3C
 
  

القالب جاهز الآن ، على جافا سكريبت التي سوف تقدم طلب HTTP وعرض بيانات JSON استجابة في HTML. إليك مجموعة المتغيرات العامة التي سنبدأ بها:

var shortnames = ['html5'، 'selectors4'، 'battery-status'، 'fullscreen']، xmlhttp = new XMLHttpRequest ()، w3cSpecsEle = document.querySelector ('# w3cSpecs')، templateEle = document.querySelector ('Template ')؛ 

shortnames هو مجموعة من shortnames من المواصفات التي نريد عرضها في صفحة الويب الخاصة بنا ؛ إذا كنت تريد العثور على اسم قصير نظرة على المواصفات في عنوان URL الخاص بـ W3C وستكون قادرًا على رؤيتها في النهاية.

ومع ذلك ، ليس مضمونًا أن تتمكن من الحصول عليها الكل مواصفات مثل هذا ؛ لا توجد قائمة نهائية من shortnames والمواصفات المتوفرة من خلال API حتى الآن.

حلقة من خلال shortnames مجموعة ونشر طلب HTTP لكل منهما ، وجلب الاستجابة.

من أجل (var i = 0 ؛ i 
ال responseText هي سلسلة JSON ويجب تحليلها للحصول على كائن JSON. displaySpec هي الوظيفة التي ستستخدم بيانات JSON وعرضها بتنسيق HTML.
 
يوجد أدناه نموذج استجابة JSON لنص HTML5 وبعد الكود الخاص بـ displaySpec. 
 
 
وظيفة displaySpec (json) if ('المحتوى' في templateEle) / * الحصول على محتوى Template * * / 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 ["latest-version"]. title؛ W3cSpecLatestVerStatus.textContent = status؛ رمز التبديل (الحالة) الحالة 'التوصية': W3cSpecLatestVerStatus.className = "التوصية"؛ استراحة؛ الحالة 'مسودة العمل': W3cSpecLatestVerStatus.className = 'draft'؛ استراحة؛ الحالة 'Retired': W3cSpecLatestVerStatus.className = 'retired'؛ استراحة؛ الحالة "توصية المرشح": W3cSpecLatestVerStatus.className = 'candidateRecommendation'؛ استراحة؛  / * إضافة نسخة من محتوى القالب إلى div * / w3cSpecsEle.appendChild الرئيسي (document.importNode (templateEleContent، true))؛  * إضافة رمز JS آخر لإنشاء العناصر بشكل فردي * / 
 
إذا ('المحتوى' في templateEle) هو التحقق مما إذا كان متصفح HTML مدعومًا من قالب HTML ، وإذا لم يكن كذلك ، فقم بإنشاء جميع عناصر HTML في JS نفسه. وعندما يكون هناك دعم ، املأ عناصر HTML الموجودة داخل محتوى القالب بالبيانات ذات الصلة من JSON وأخيراً ، قم بإلحاق نسخة من محتوى القالب بالصفحة الرئيسية. # w3cSpecs شعبة.
 
هذا هو. مع القليل من أنماط CSS ، يبدو الإخراج كما يلي: