[Ajax] 클릭 이벤트 발생 시 제목을 불러와줘~! (Java Script)

const container = document.getElementById('root');

const ajax = new XMLHttpRequest();

const content = document.createElement('div');

const NEWS_URL = 'http://api.hnpwa.com/v0/news/1.json';

const CONTENT_URL='http://api.hnpwa.com/v0/item/@id.json'; //클릭했을때 가져올 url

ajax.open('GET',NEWS_URL,false);

//ajax.open('GET','http://api.hnpwa.com/v0/news/1.json',false); 의 xml을 위에 NEWS_URL로 넣었다. 

ajax.send(); // ajax.send(); : 데이터를 가져온다.

const newsFeed = JSON.parse(ajax.response);

const ul =document.createElement('ul');  //ul태그 만들기 작업

//window라는 객체가 있다.

// addEventListener('이벤트이름',함수) // js는 함수 자체를 값으로 취급해서 이렇게 함수한테 전달을 할 수 있고, 함수 자체를 실행할 수 도 있다.

window.addEventListener('hashchange',function(){

    const id = location.hash.substr(1);

   // console.log('해시#가 변경됌')

   ajax.open('GET',CONTEMT_URL.replace('@id',id),false); //앞 시간에 newsFeed넣어준 거랑 똑같은 상황이니

   //replace('@id',id) : @id를 id로 바꿔주는 것

   ajax.send();

 

  

 

 

   const newsContent = JSON.parse(ajax.response); // JSON.parse : 객체형으로 바꿔주는 것

   const title=document.createElement('h1');

   title.innerHTML = newsContent.title;

   content.appendChild(title); //content라고 위에서 div만들어놨었음. div에 h1을 appendchild 시킨 것

   console.log(newsContent);

//location 객체 : 브라우저가 기본으로 제공해주는 객체인데 주소와 관련된 다양한 정보들을 제공해준다.

console.log(location.hash); //콘솔창에 #id값이찍힌다.

//but, 나는 앞의 #을 뗴고 싶으니 substr을 사용하여 앞의 #을 떼주기

//substr : 내가 쓰고 싶은 위치 값만 지정해주면 그 이후부터의 값을 쓴다.

// 위에 코드 const id = location.hash.substr(1); 코드 임

});

for(let i = 0; i < 10; i++) {

const li = document.createElement('li'); //li태그 만들기 작업

const a = document.createElement('a');  //a태그 만들기 작업

a.href='#${newsFeed[i].id}'; // # :페이지 내에서 어떤 앵커태그의 이름

// # 뒤에 newsFeed의 i번째의 id를 넣어줌

a.innerHTML = `${newsFeed[i].title}(${newsFeed[i].comments_count})`; //댓글 수

// a.addEventListener('click',function(){}); //event가 발생하는지를 듣고 있는 리스너

//but, 이건 (클릭시, 두번째 인자(실제 작동되는 함수)) 인데 이렇게 코드를 입력하면 앵커 태그가 여러개가 있으니까 여러개를 모두 등록해야 함..

//so, 앵커태그에 #를 넣어놨던 것을 활용하여 이 #가 먼가로 바뀌었을때 이벤트가 발생했다는 해쉬체인지 이벤트!

li.appendChild(a);

ul.appendChild(li);

}

container.appendChild(ul);

container.appendChild(content);