Τρόπος εμφάνισης δεδομένων προδιαγραφής W3C χρησιμοποιώντας το API του Web

Το βραβείο Emmy® κερδίζει W3C είναι ένας διεθνής οργανισμός τυποποίησης για τον Παγκόσμιο Ιστό. Δημιουργεί νέα πρότυπα διαδικτύου και τα αναθεωρεί συνεχώς για να τα διατηρεί συνεπή και συναφή σε ολόκληρο τον πλανήτη.

Τα προγράμματα περιήγησης και οι ιστότοποι έχουν γίνει πλέον συμβατοί με το χρόνο, επιτρέποντας έτσι στους ιστότοπους να προβάλλουν και να εργάζονται ομοιόμορφα σε όλα τα διάφορα προγράμματα περιήγησης. Ένας από τους πιο χρήσιμους πόρους που διατίθενται στο κοινό είναι οι προδιαγραφές του W3C Specification στο w3c.org.

Πρόσφατα το W3C έκανε τα δεδομένα του διαθέσιμα μέσω ενός API Web, του οποίου η σελίδα έργου βρίσκεται στο Github. Η εισαγωγή αυτού του API από τη σελίδα του έργου έχει ως εξής:

“Ως απάντηση στη ζήτηση από προγραμματιστές στην κοινότητά μας που επιθυμούν να αλληλεπιδρούν με τα δεδομένα του W3C, η Ομάδα Συστημάτων W3C έχει αναπτύξει ένα API Web. Μέσα από αυτό διαθέτουμε δεδομένα σχετικά με τις Προδιαγραφές, τις Ομάδες, τους Οργανισμούς και τους Χρήστες.”

Στη σημερινή θέση θα δούμε πώς να ανακτήσετε τα δεδομένα προδιαγραφής μέσω του API W3C. Θα βρείτε τα διάφορα αιτήματα που μπορείτε να δημοσιεύσετε για να μεταφέρετε τα δεδομένα Προδιαγραφών και άλλα σε https://api.w3.org/doc, αλλά και με ένα sandbox για κάθε αίτημα για δοκιμή του API, αλλά θα χρειαστείτε ένα API κλειδί.

Ας δούμε πρώτα πώς να αποκτήσετε το κλειδί API.

1. Συνδεθείτε στο λογαριασμό σας στο W3C ή δημιουργήστε ένα.
2. Στη συνέχεια πηγαίνετε στο Διαχείριση των κλειδιών API στη σελίδα του προφίλ σας.
3. Κάντε κλικ Νέο κλειδί API και δώστε το όνομα για να δημιουργήσετε το κλειδί σας.
4. Στη συνέχεια, αν το επιθυμείτε, μπορείτε να το αντιγράψετε-επικολλήσετε στο api key κειμένου στην αρχή της ιστοσελίδας https://api.w3.org/doc για να δοκιμάσετε το API στο sandbox.

Για αυτήν την ανάρτηση, θα εξετάσουμε το αίτημα που χρησιμοποιεί σύντομα ονόματα για να εμφανίσετε τη διεύθυνση 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 SPECS
 
  

Το πρότυπο είναι έτοιμο. Τώρα, επάνω στο JavaScript που θα κάνει το αίτημα HTTP και θα εμφανίσει τα δεδομένα JSON απάντησης σε HTML. Εδώ είναι το σύνολο των παγκόσμιων μεταβλητών που θα ξεκινήσουμε με:

var shortnames = ['html5', 'selectors4', 'κατάσταση μπαταρίας', 'fullscreen'], xmlhttp = νέα XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector '). 

σύντομα ονόματα είναι μια σειρά από σύντομα ονόματα των προδιαγραφών που θέλουμε να εμφανίσουμε στην ιστοσελίδα μας. αν θέλετε να βρείτε το μικρό όνομα μιας Προδιαγραφής ανατρέξτε στη διεύθυνση URL του W3C και θα μπορείτε να το δείτε στο τέλος.

Ωστόσο, δεν είναι εγγυημένο ότι θα είστε σε θέση να πάρετε όλα Προδιαγραφές όπως αυτό? δεν υπάρχει οριστική λίστα με σύντομα ονόματα και τις προδιαγραφές που είναι διαθέσιμες μέσω του API.

Βγείτε μέσω του σύντομα ονόματα και δημοσιεύστε ένα αίτημα HTTP για το καθένα και παραλάβετε την απάντηση.

για (var i = 0 · i 
ο responseText είναι μια συμβολοσειρά JSON και πρέπει να αναλυθεί για να πάρει το αντικείμενο JSON. displaySpec είναι η λειτουργία που θα χρησιμοποιήσει τα δεδομένα JSON και θα την εμφανίσει σε HTML.
 
Παρακάτω είναι το δείγμα JSON δείγματος απόκρισης για την προδιαγραφή HTML5 και μετά τον κώδικα displaySpec. 
 
 
λειτουργία displaySpec (json) if ('περιεχόμενο' στο templateEle) / * λήψη περιεχομένου του προτύπου * / templateEleContent = templateEle.content; / * προσθέστε τον τίτλο spec στην h2 header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * προσθέστε URL spec στο σύνδεσμο * / 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 ('mark'); var status = json._links ["τελευταία έκδοση"]. W3cSpecLatestVerStatus.textContent = status; διακόπτης (κατάσταση) περίπτωσης 'Σύσταση': W3cSpecLatestVerStatus.className = "σύσταση"; Διακοπή; περίπτωση 'Σχέδιο εργασίας': W3cSpecLatestVerStatus.className = 'σχέδιο'; Διακοπή; περίπτωση "συνταξιούχος": W3cSpecLatestVerStatus.className = 'συνταξιούχος'; Διακοπή; περίπτωση "Υποψήφια σύσταση": W3cSpecLatestVerStatus.className = 'υποψήφια σύσταση'. Διακοπή;  / * προσθέστε αντίγραφο του περιεχομένου του προτύπου στο κύριο div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)).  else / * προσθέστε JS κώδικα για να δημιουργήσετε τα στοιχεία μεμονωμένα * / 
 
αν ('περιεχόμενο' στο templateEle) είναι να ελέγξετε εάν το Πρότυπο HTML υποστηρίζεται από το πρόγραμμα περιήγησης, αν δεν είναι, δημιουργήστε όλα τα στοιχεία HTML στην ίδια την JS. Και όταν υπάρχει υποστήριξη, συμπληρώστε τα στοιχεία HTML που βρίσκονται μέσα στο περιεχόμενο του Προτύπου με τα αντίστοιχα δεδομένα από το JSON και, τέλος, προσθέστε ένα αντίγραφο του περιεχομένου του Προτύπου στην κύρια # w3cSpecs div.
 
Αυτό είναι. Με λίγα στυλ CSS, η έξοδος μοιάζει με αυτό: