연말까지 매일 꾸준히 웹 사이트를 만드는 대학생~6일째 아제스 & 유튜브 API 만져보세요~

개시하다

처음 뵙겠습니다.
저는 연말까지 매일 웹 사이트를 만드는 사람입니다.
오늘 아제엑스와 유튜브 API를 만져봤어요.
결론적으로 말하면 정말 촉감일 뿐이야.
사용하는 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 주면 좋겠다.
오늘은 여섯째 날이다.(2019/10/24)
잘 부탁드립니다.

사이트 축소판 그림

해본 일

버튼을 누르다

유튜브의 일본 인기 애니메이션 정보를 얻을 수 있다.
그러나, 이렇게 배열된 것들↓ 펼칠 수 없어 무의미한 글자 나열로
(연상 배열, 다차원 배열,hash를 이해할 수 없음)

구애되는 곳

과감하게 아제엑스와api라는 거두에 도전했다.
그러나 그들은 매우 강하고 전제에 얽매여 지식이 너무 적어 견지할 수 없다.

 <script>
        test7 = document.querySelector("#test5");
        test8 = document.querySelector("#test6");
        test7.onclick = function () {
            var x = new XMLHttpRequest();
            x.onreadystatechange = function () {
                if (x.readyState == 4) {
                    var test = x.responseText;
                    test2 = JSON.parse(test);
                    Object.keys(test2).forEach(key => test8.innerHTML = ('key:' + key + ' value:' + test2[key]));
                }
            }
            x.open('GET', 'https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&regionCode=jp&key=[キー]');
            x.send();
        }
    </script>

onreadystatechange 방법은 자원 획득 상황이 변할 때 자동으로 시작하는 우수한 방법입니다.
언제 시작 해요?
if (x.readyState == 4)
구문을 생성합니다.4는 자원 획득이 완료되었다는 뜻이다.

감상

나는 오늘 이가 없다.
github로 원본 파일을 공개했기 때문에api키에 http 참조기의 제한을 가하면 오류가 발생하거나 가까스로 데이터를 얻었지만 표시할 부분을 표시하는 방법을 알 수 없습니다.
하지만 아제엑스와 API를 처리할 수 있다면 할 수 있는 일의 범위가 끊임없이 넓어질 것이라는 것을 깨달았다.
연말에 이 두 머리를 꼭 쓰러뜨려라!
오늘은 그건데, 이야기가 시작되었을 때 강적에게 농락당한 날인 것 같아.마지막 회는 복수의 깃발만 멋지게 내걸었다.그러니까 기운 안 빠지게 노력할게요.

참고 자료

간단한 Ajax를 적어서 사용하세요http://html2php.starrypages.net/javascript/ajax

유튜브 API의 메커니즘과 브라우저를 통해서만 데이터를 얻는 방법 |DIY프로그래밍https://diy-programming.site/tools/movie-matome-site-3/

상술한 두 사이트는 매우 참고 가치가 있다.감사합니다.