조별 과제
⚡ 개념 정리하기 !
console로 출력할 수 있는 방법 정리
console.log()
const x = "aaa";
console.log("hello" + x); //hello aaa
console.log(`hello ${x}`); // hello aaa
console.dir()
console.dir()은 주어진 JavaScript 객체의 모든 속성을 콘솔에서 볼 수 있는 방법으로서 이를 사용하면 개발자가 객체의 속성을 쉽게 확인할 수 있습니다. — MDN Web Docs
이걸 보면 console이란 object 안에 .log() method외에도 .dir() 을 비롯한 다양한 method가 있음을 확인할 수 있어요!
내이벤트 리스너 등록 방법 2가지
const h1 = document.querySelector("h1");
//첫번째
function h1Click() {
console.log("click event");
}
h1.addEventListener("click", h1Click)
h1.removeEventListener("click", h1Click) //요건 없애고 싶을 때
//두번째
h1.onclick = h1Click()
⚡ 토론해보아요 !
네이버에 접속합니다
로그인이 되어있다면 로그아웃합니다
웹페이지에서 로그인 버튼을 선택하려면 어떻게 해야할까요?
Hint1❗ 아주 쉬운 문제이니 어렵게 찾지 말아요! 로그인 버튼 우클릭 > ‘검사’를 눌러 봅시다!
Hint2❗ 셀렉터를 활용해보세요!
//id값은 만족하는 object가 하나밖에 없음이 확실하니 맘 편하게 id로 골라줍니다
const btn = document.querySelector("#log.login");
//또는
const btn = document.getElementById("log.login");
우리가 네이버 개발자가 되었다고 가정해봅시다! 1번에서 선택한 버튼을 기준으로, 버튼이 눌렸으면 "Button was clicked!" 라고 팝업을 띄우는 코드를 작성해봅시다!
Hint1❗ 이벤트 핸들러와 함수를 각각 하나씩 작성해야 해요!
Hint2❗ 브라우저 콘솔에 작성한 코드를 입력한 후, 로그인 버튼을 클릭해보면 코드를 잘 작성했는지 알 수 있어요! 팝업이 뜨고 나서 로그인 페이지로 이동하면 성공입니다😆
const btn = document.getElementById("log.login");
function onBtnClick() {
alert("Button was clicked!");
}
btn.addEventListener("click", onBtnClick);
늘 스터디 시간엔 강의 내용 외에도 시각을 확장시킬 수 있으면서 강의 내용의 큰 틀을 벗어나지 않는 주제를 다루려고 하는데, 이번엔 스터디에서 다루려고 했지만 준비가 덜 되어 제대로 짚고 넘어가지 못한 부분을 소개하려고 합니다. 이번엔 DOM과 Object에 대해 다룹니다. 어찌보면 이번 플러스알파의 영감은 아래 한 줄이었습니다.
“JS has a ‘document’ object to read HTML content.” — 강의 #3.0
강의에선 이 용어를 붙이는 순간 DOM에 대한 설명이 따라 붙기에 언급하지 않은 것일 뿐, 사실상 우리가 이미 아는 내용입니다.
Document Object Model, 줄여서 DOM은 우리가 다룰 HTML문서를 비롯한 XML문서를 트리구조로 나타내겠다…하는 것입니다. HTML문서의 parent-child 구조를 가져가면서, attribute과 text 내용물까지 개별 node로 취급합니다. 중요한건, JS가 이를 통해 HTML문서와 상호작용한다는 것입니다.
우리는 const title = document.querySelector(”h1”) 이런 식으로 element를 찾고, title.innerText = “Hello World” 같은 식으로 조작하는 흐름에 익숙합니다. 이게 결국 DOM Traversal 과 DOM Manipulation입니다. (대단히 새로운 내용이 아니고, 강의에서 배운 게 뭔지 제목을 알아야 나중에 기억안날 때 구글링이라도 할 수 있지 않을까,,, 생각합니다ㅎㅎ)
대표적인 DOM Manipulation method들은 아래와 같이 있습니다. 참고용!