JS / Day 1

1일차 공부 노트 

(1) web api

 

-내가 전기가 어떻게 각 아파트에 공급되는지 몰라도 스위치를 켜면 불을 킬수있는거처럼 

api를 이용해서 구현할수있다 

-api종류들은 mdn에서 찾을수있는데  

예를들자면 드래그해서 여기로 이동하는 기능 = 이건 drag and drop api이다 

-보안이유로 https에서만 작동하는 api가 많다 

 

(2) 실습 - display window size even when its resized

 

1. 일단 명령을 줄 아이의 위치를 잡아야한다 

querySelector가 그 역할을 하고 여기에 html태그 클래스값을 적는데 첫번째요소 한가지만 적용이되며 

앞에 .을 꼭! 찍어야한다 

 

2. innerHTML로 위치를 잡은곳에 그려넣어준다 

백틱으로 스트링과 함수를 같이 나타내어 클린코딩 하기 

 

3. 명령을 줄 요소에 addEventListener로 명령을 내림 

 

4.로드하자마자 나오도록 하려면 함수호출을 따로 해줌 

 

※카멜케이스로 안쓰면 무조건 오류남 

※이때 함수를 따로 만들고 호출한 이유는 동적으로 함수내용을 관리하기 위해

 

(3) 실습 - when btn is clicked, log its x,y value

 

1. 클릭할 요소를  querySelector로 지정하기 

 

2. 지정한 요소에 addEventLister로 클릭하면 

일어날 일 선언하기 

 

(4) 실습 - when btn is clicked, scroll by 100px 

 

1. 변수에 버튼클래스들 할당 

 

2. addEventListener로 클릭하면 윈도우에 스크롤함수 써서 명령하기 

scrollInto.addEventListener("click", () => {

        special.scrollIntoView();

      });

//scrollInto를 클릭하면 special로 스크롤이동해버림