⚡ 개념 정리하기 !

1. console로 출력할 수 있는 방법 정리

console.log(object);

console.dir(object);
//console.dir()의 경우 인자로 주어진 객체의 더 자세한 정보를 콘솔에 출력한다.

1. 이벤트 리스너 등록 방법 2가지

   const title=document.querySelector("#idName");
   //이벤트 리스너를 등록할 객체 title 선언
   
   title.addEventListener("click",functionName);
   // 1) addEventListener() 함수를 이용한다.
   // 첫 번째 인자로는 조건, 두 번째 인자로는 조건 만족 시 동작할 함수의 이름을 넣는다.
   // 주의할 점: functionName() 이 아닌 functionName 으로 삽입할 것.
   
   title.onclick(functionName);
   // 2) 조건에 해당하는 함수 (ex: onclick())로 바로 접근한다.
   // 인자로는 조건 만족 시 동작할 함수의 이름을 넣는다.
   // 주의할 점: functionName() 이 아닌 functionName 으로 삽입할 것.
   
   

⚡ 토론해보아요 !

• 네이버에 접속합니다

  네이버

• 로그인이 되어있다면 로그아웃합니다

1. 웹페이지에서 로그인 버튼을 선택하려면 어떻게 해야할까요?

   Hint1❗ 아주 쉬운 문제이니 어렵게 찾지 말아요! 로그인 버튼 우클릭 > ‘검사’를 눌러 봅시다!

   Hint2❗ 셀렉터를 활용해보세요!

   <a href="<https://nid.naver.com/nidlogin.login?mode=form&amp;url=https%3A%2F%2Fwww.naver.com>" 
   class="link_login" data-clk="log_off.login">
   <i class="ico_naver"><span class="blind">네이버</span></i>로그인</a>
   

   css의 selector 방식으로 로그인 버튼은 #account > a 로 나타낸다.

2. 우리가 네이버 개발자가 되었다고 가정해봅시다! 1번에서 선택한 버튼을 기준으로, 버튼이 눌렸으면 "Button was clicked!" 라고 팝업을 띄우는 코드를 작성해봅시다!

   Hint1❗ 이벤트 핸들러와 함수를 각각 하나씩 작성해야 해요!

   Hint2❗ 브라우저 콘솔에 작성한 코드를 입력한 후, 로그인 버튼을 클릭해보면 코드를 잘 작성했는지 알 수 있어요! 팝업이 뜨고 나서 로그인 페이지로 이동하면 성공입니다😆

   const loginButton = document.querySelector('#account > a');
   
   function onClickLogin() {
     alert('Button was clicked!');
   }
   
   loginButton.addEventListener('click', onClickLogin);
   //클릭 시 팝업 출력
   

   

   

   팝업 후 로그인 창으로 이동함을 확인하였다.