웹 API를 사용하여 W3C 사양 데이터를 표시하는 방법

에미 상 수상 W3C World Wide Web에 대한 국제 표준 조직입니다. 새로운 웹 표준을 창안하고 전세계에 일관되고 관련성있게 유지하기 위해 끊임없이 개정합니다..

브라우저와 웹 사이트는 시간이 지남에 따라 표준을 준수하게되었습니다.이를 통해 웹 사이트는 모든 다양한 브라우저에서 균일하게 렌더링되고 작동 할 수 있습니다. 공개적으로 사용할 수있는 가장 유용한 리소스 중 하나는 w3c.org의 W3C 사양 문서입니다..

최근 W3C는 프로젝트 페이지가 Github에있는 웹 API를 통해 데이터를 사용할 수있게했습니다. 프로젝트 페이지의이 API 소개는 다음과 같습니다.

“W3C 시스템 팀은 W3C의 데이터와 상호 작용하고자하는 커뮤니티의 개발자들의 요구에 부응하여 웹 API를 개발했습니다. 이를 통해 사양, 그룹, 조직 및 사용자에 대한 데이터를 제공합니다..”

오늘의 포스트에서 우리는 볼 것입니다. W3C API를 통해 사양 데이터를 가져 오는 방법. https://api.w3.org/doc에서 사양 데이터 및 기타 데이터를 가져 오기 위해 게시 할 수있는 다양한 요청을 확인할 수 있으며 각 요청에 대해 API를 테스트하기위한 샌드 박스가 제공되지만 API 키.

먼저 보자. API 키를 얻는 방법.

1. W3C 계정에 로그인하거나 계정을 만드십시오..
2. 다음으로 이동 API 키 관리 내 프로필 페이지에서.
3. 딸깍 하는 소리 새로운 API 키 키를 생성하는 이름을 지정하십시오..
4. 그런 다음 원하는 경우 복사하여 붙여 넣기하여 API 키 샌드 박스에서 API를 테스트하는 웹 페이지 https://api.w3.org/doc의 시작 부분에있는 텍스트 상자.

이 게시물에 대해서는 사용하는 요청 짧은 이름 사양 URL, 설명 및 문서 상태 표시. 요청은 다음과 같습니다.

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

예를 들어 HTML5 사양 요청은 다음과 같습니다.

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

이제 API를 통해 가져온 데이터를 표시하는 데 사용할 HTML에 대해 살펴 보겠습니다. 이를 위해 HTML 템플릿을 사용하기로 결정했습니다. HTML 템플릿은 구문 분석은되지만 JavaScript를 사용하여 페이지에 추가 될 때까지 렌더링되지 않는 HTML 코드를 저장하는 데 사용됩니다..

 
W3C 스펙
 
  

템플릿이 준비되었습니다. 이제 HTTP 요청을 만들고 응답 JSON 데이터를 HTML로 표시하는 JavaScript로 이동하십시오. 다음은 우리가 시작할 전역 변수 집합입니다.

XMLHttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ( '# w3cSpecs'), templateEle = document.querySelector ( '템플릿 (Template)', '템플릿' '); 

짧은 이름 배열 짧은 이름 우리가 웹 페이지에 표시하고자하는 사양 당신이 짧은 이름 사양의 W3C URL을 보면 끝 부분에서 볼 수 있습니다..

그러나, 당신이 얻을 수있을 것이라고 보장하지 않습니다. 모든 이런 사양; 결정적인 목록이 없다. 짧은 이름 API를 통해 사용할 수있는 사양.

루프를 통해 짧은 이름 배열을 만들고 각각에 대한 HTTP 요청을 게시하고 응답을 가져옵니다..

for (var i = 0; i 
그만큼 responseText JSON 문자열이며 JSON 객체를 가져 오기 위해 구문 분석되어야합니다.. displaySpec JSON 데이터를 사용하여 HTML로 표시하는 함수입니다..
 
다음은 HTML5 사양의 JSON 응답 텍스트 샘플입니다. displaySpec. 
 
 
function displaySpec (json) if (templateEle의 'content') / * 템플릿의 내용 가져 오기 * / 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; / * spec 상태를 추가하고 값에 따라 색을 지정합니다. * / W3cSpecLatestVerStatus = templateEleContent.querySelector ( 'mark'); var status = json._links [ "latest-version"]. title; W3cSpecLatestVerStatus.textContent = status; 스위치 (상태) case 'Recommendation': W3cSpecLatestVerStatus.className = "recommendation"; 단절; 사례 '작업 초안': W3cSpecLatestVerStatus.className = '초안'; 단절; 'Retired'사례 : W3cSpecLatestVerStatus.className = '폐기 됨'; 단절; case '후보자 추천': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; 단절;  / * 기본 div에 템플릿의 내용 사본을 추가하십시오. * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * JS 코드를 추가하여 개별적으로 요소를 만듭니다 * / 
 
if (templateEle의 'content') HTML 템플리트가 브라우저에서 지원되는지 확인하는 것입니다. 그렇지 않은 경우 JS 자체의 모든 HTML 요소를 작성하십시오. 지원이있을 때 템플릿의 콘텐츠 안에있는 HTML 요소를 JSON의 각 데이터로 채우고 마지막으로 템플릿의 콘텐츠 사본을 기본 # w3cSpecs div.
 
그게 전부 야. 약간의 CSS 스타일을 사용하면 결과는 다음과 같습니다.