Cách hiển thị dữ liệu Đặc tả W3C bằng API Web của nó

Giành giải thưởng Emmy® W3C là một tổ chức tiêu chuẩn quốc tế cho World Wide Web. Nó tạo ra các tiêu chuẩn web mới và sửa đổi chúng liên tục để giữ cho chúng phù hợp và phù hợp trên toàn cầu.

Các trình duyệt và trang web đã trở thành tiêu chuẩn tuân thủ ở mức độ lớn hơn theo thời gian, điều này cho phép các trang web hiển thị và hoạt động thống nhất trên tất cả các trình duyệt khác nhau. Một trong những tài nguyên hữu ích nhất có sẵn công khai là tài liệu Đặc tả W3C trong w3c.org.

Gần đây, W3C đã cung cấp dữ liệu của mình thông qua API Web, trang dự án trong Github. Phần giới thiệu của API này từ trang dự án của nó như sau:

“Đáp ứng nhu cầu của các nhà phát triển trong cộng đồng của chúng tôi muốn tương tác với dữ liệu của W3C, Nhóm Hệ thống W3C đã phát triển API Web. Thông qua đó, chúng tôi đang cung cấp dữ liệu có sẵn về Thông số kỹ thuật, Nhóm, Tổ chức và Người dùng.”

Trong bài hôm nay chúng ta sẽ thấy cách tìm nạp dữ liệu Thông số kỹ thuật thông qua API W3C. Bạn sẽ tìm thấy các yêu cầu khác nhau mà bạn có thể đăng để lấy dữ liệu Thông số kỹ thuật và các yêu cầu khác trong https://api.w3.org/doc, nó cũng đi kèm với hộp cát cho mỗi yêu cầu để kiểm tra API, nhưng bạn sẽ cần một Mã API.

Trước tiên hãy xem làm cách nào để lấy khóa API.

1. Đăng nhập vào tài khoản W3C của bạn hoặc tạo một tài khoản.
2. Sau đó đi đến Quản lý khóa API trong trang hồ sơ của bạn.
3. Nhấp chuột Khóa API mới và đặt tên cho nó để tạo khóa của bạn.
4. Sau đó, nếu bạn muốn, bạn có thể sao chép-dán nó vào Mã API hộp văn bản ở đầu trang web https://api.w3.org/doc để kiểm tra API trong hộp cát.

Đối với bài đăng này, chúng tôi sẽ xem xét yêu cầu sử dụng tên viết tắt để hiển thị URL Đặc tả, mô tả và trạng thái tài liệu. Yêu cầu trông như thế này:

https://api.w3.org/Specifying/ đũashortnameopez? apyike = napapikeyspl & _format = json 

Ví dụ: một yêu cầu thông số HTML5 sẽ như thế này;

https://api.w3.org/Specutions/html5?apikey= đũaapikeyspl & _format = json 

Bây giờ, hãy tập trung vào HTML chúng tôi sẽ sử dụng để hiển thị dữ liệu được tìm nạp thông qua API. Vì điều này, tôi đã quyết định sử dụng Mẫu HTML. Các mẫu HTML được sử dụng để giữ mã HTML được phân tích cú pháp nhưng không được hiển thị cho đến khi chúng được thêm vào trang bằng JavaScript.

 
THÔNG SỐ W3C
 
  

Mẫu đã sẵn sàng. Bây giờ, vào JavaScript sẽ thực hiện yêu cầu HTTP và hiển thị dữ liệu JSON phản hồi trong HTML. Đây là tập hợp các biến toàn cục mà chúng ta sẽ bắt đầu bằng:

var shortnames = ['html5', 'selector4', 'pin-status', 'fullscreen'], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), template '); 

tên viết tắt là một mảng của tên viết tắt về Thông số kỹ thuật chúng tôi muốn hiển thị trong trang web của chúng tôi; nếu bạn muốn tìm tên ngắn về Thông số kỹ thuật, hãy xem URL W3C của nó và bạn sẽ có thể thấy nó ở cuối.

Tuy nhiên, không đảm bảo rằng bạn sẽ có thể nhận được tất cả các Thông số kỹ thuật như thế này; không có một danh sách dứt khoát tên viết tắt và Thông số kỹ thuật có sẵn thông qua API.

Vòng qua tên viết tắt mảng và gửi một yêu cầu HTTP cho mỗi và lấy phản hồi.

cho (var i = 0; i 
Các đáp ứng là một chuỗi JSON và phải được phân tích cú pháp để có được đối tượng JSON. displaySpec là hàm sẽ sử dụng dữ liệu JSON và hiển thị nó trong HTML.
 
Dưới đây là văn bản phản hồi JSON mẫu cho Đặc tả HTML5 và sau mã cho displaySpec. 
 
 
function displaySpec (json) if ('content' trong templateEle) / * lấy nội dung của Mẫu * / templateEleContent = templateEle.content; / * thêm tiêu đề đặc tả vào tiêu đề h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * thêm URL đặc tả vào liên kết * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * thêm mô tả đặc tả * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDes mô tả'); w3cSpecDetail.innerHTML = json.descrip; / * thêm trạng thái đặc tả và tô màu dựa trên giá trị của nó * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["phiên bản mới nhất"]. title; W3cSpecLatestVerStatus.textContent = status; switch (trạng thái) case 'Khuyến nghị': W3cSpecLatestVerStatus. className = "recommend"; phá vỡ; trường hợp 'Bản nháp làm việc': W3cSpecLatestVerStatus. className = 'bản nháp'; phá vỡ; trường hợp 'Đã nghỉ hưu': W3cSpecLatestVerStatus. className = 'đã nghỉ hưu'; phá vỡ; trường hợp 'Đề xuất của ứng viên': W3cSpecLatestVerStatus. className = 'Ứng viên khuyến nghị'; phá vỡ;  / * thêm bản sao nội dung của Mẫu vào div chính * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  other / * thêm mã JS để tạo các phần tử riêng lẻ * / 
 
if ('nội dung' trong templateEle) là để kiểm tra xem Mẫu HTML có được trình duyệt hỗ trợ hay không, nếu không, hãy tạo tất cả các thành phần HTML trong chính JS. Và khi có hỗ trợ, hãy điền các phần tử HTML có trong nội dung của Mẫu với dữ liệu tương ứng từ JSON và cuối cùng, nối thêm một bản sao nội dung của Mẫu vào chính # w3cSpec div.
 
Đó là nó. Với một chút kiểu dáng CSS, đầu ra trông như thế này: