조별 과제

⚡ 개념 정리하기 !

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

const somethingToPrint = /* whatever */;

// somethingToPrint의 내용 출력
console.log(somethingToPrint);

// somethingToPrint에 대한 자세한 정보 출력
console.dir(somethingToPrint);

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

const element = /* whatever */;
function callback() { /* 실행할 내용 */ }

// 1.
element.addEventListener("이벤트이름", callback);

// 2.
element.on이벤트명 = callback;

⚡ 토론해보아요 !

• 네이버에 접속합니다

  네이버

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

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

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

   

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

   

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

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

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

// Part 1. 요소 가져오기
//  방법 1) querySelector - 태그와 속성으로 값을 가져옴
let loginButton = document.querySelector('a[href="<https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com>"]');

//  방법 2) querySelector - 태그와 클래스로 값을 가져옴
loginButton = document.querySelector('a.link_login');

//  방법 3) querySelector - 외부 div의 id를 이용해 값을 가져옴
loginButton = document.querySelector('#account > a');

//  방법 4) getElementsByClassName - 클래스로 값을 가져옴
//  이때 Array를 반환하기 때문에 0번째 요소를 가져온다는 것을 명시적으로 적어야 함.
loginButton = document.getElementsByClassName('link_login')[0];

// 다른 방법으로 query를 통해 가져올 수도 있음.
// 그 외 또 다른 방법이 있는데 이는 코드 하단에 후술.

// Part 2. 가져온 요소 확인하기
console.dir(loginButton); // null 이 아니면 성공적으로 가져온 것.

// Part 3. 이벤트 핸들러에 등록할 함수 정의
function handleClick() {
	alert('Button was clicked!');
}

// Part 4. 이벤트 핸들러 등록
//  방법 1) addEventListener
loginButton.addEventListener("click", handleClick);

//  방법 2) onclick
loginButton.onclick = handleClick;

• 번외

페이지의 HTML을 뜯어서 속성 id=”COMP”를 추가한 뒤

getElementById("COMP") 함수를 통해 가져오는 것도 가능합니다.

(물론 이렇게 쓰느니 다른 방법으로 querySelector을 쓰는 게 더 나아보이긴 합니다)