📌 JS가 어떻게 HTML을 움직일까?
JS가 HTML의 요소들을 읽는다.
console에 document를 검색하면 아래와 같이 정보가 나온다.
HTML내 stylesheet를 연결하듯이 script를 연결하면 JS와 연동이 된다.
참고로 HTML에서 타이틀을 바꿔도 JS에서 타이틀을 바꾼다면 JS 버전으로 적용이 된다.
HTML에 있는 요소를 JS에서 편집하려면 어떻게 해야 할까?
1) document.getElementById("id에 해당되는 것")
HTML 안에서 id를 통해 element를 찾아준다.
2) document.getElementsByClassName("class name에 해당되는 것")
id보다 class name을 많이 쓴다고 한다. 이놈은 여러 가지 요소들을 가져올 때 사용하는데,
array 형태로 출력된다.
3) document.getElementsByTagName("Tag name에 해당되는 것")
예를 들어 h1을 가져오고 싶다면 "h1"을 써주면 된다. 단 모든 h1을 가져온다는 특징이 있다.
따라서 하나만, 특정 부분만 다루고 싶다면 id나 class name을 줘서 가져오는 게 더 편해 보인다.
4) document.querySelector("")
element를 CSS 방식으로 검색한다. 그래서 id를 보려면 #id, class name을 보려면 .을 찍어줘야 한다.
CSS에서 쓰는 것처럼 선택자를 활용하면 되는데 return 시 하나의 element만, 첫번째 것만 나온다.
5) document.querySelectorALL("")
해당되는 선택자 안의 조건에 부합하는 모든 element를 array 형식으로 가져다 준다.
그런데 HTML에서 고치면 되는 것 아닌가? 왜 JS까지 가지고 와서 고쳐야 하는가 의문이 든다.
이는 서버와 통신하거나 다른 복잡한 일을 할 때 JS에서 처리해야 하는데, 그 때 할 줄 알아야 하는 이유가 있고,
JS를 통해 브라우저와 직접 컴을 하면서 HTML을 수정할 수 있다는 특징이 있기 때문이다.
HTML은 정적 리소스로, 사용자에게 표시할 화면을 HTML로 만들면 변경할 수가 없게 된다.
📌 JS를 통해 뭘 발생시킬 수 있을까?
클릭을 하면, 특정 태그 위에 마우스를 올렸다 내리면, 입력을 끝내거나 엔터를 누르거나 등등
이 활동들 모두를 event라고 할 수 있으며 JS는 이 모든 이벤트를 listen 할 수가 있다.
즉 내가 뭘 클릭 했을 때 얼럿이 튀어나오거나 색이 바뀌거나 어떤 동작을 취하게 할 수 있다는 말이다.
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
console.log("title was clicked!")
}
title.addEventListener("click", handleTitleClick);
div의 hello 클래스 중 첫 번째 h1을 title이라는 상수로 선언했다.
이 title을 클릭할 경우 handleTitleClick이라는 함수가 작동될 건데,
해당 함수는 console.log에 "title was clicked!"라는 문구가 뜨게끔 한다.
타이틀에 "클릭"이라는 이벤트를 들었다면 해당 함수가 작동된다. 라는 것이 마지막 구문이다.
console.log()가 아니라 h1.style.color = "white" 와 같이 어떤 변화를 줄 수 있다.
어떤 event들이 있는지 어떻게 알 수 있을까?
console.dir(해당 element)를 입력하면 여러 요소들 중 on이 붙은 것들을 event로 사용할 수 있다.
그래서 실제로 사용할 때에는 on을 떼고 사용하면 된다.
얼럿이 뜨게 하거나, wifi 연결이 끊길 때 연결될 때 등등 여러 상황에서 활용할 수 있는 점이 신기하다.
function handleResize() {
document.body.style.backgroundColor = "pink";
}
window.addEventListener("resize", handleResize);
참고로 대부분의 함수들이 어떤 상수에서 작동하기도 하지만,
위의 resize와 같이 window로 써줘야 하는 것들이 있으니 공식 문서를 잘 참고해봐야한다.
📌 JS와 CSS
JS에서 CSS도 만질 수 있다.
const h1 = document.querySelector("h1");
function handleTitleClick() {
if(h1.style.color === "blue") {
h1.style.color = "tomato";
} else {
h1.style.color = "blue";
}
}
h1.addEventListener("click", handleTitleClick);
상수 h1을 찾아 선언한다.
h1을 클릭하면 handleTitleClick이라는 함수가 발동될건데,
이 함수는 h1의 색이 파란색이라면 색을 토마토색으로 만들어주고, 파란색이 아닌 다른 색이라면 파란색으로 만들어준다.
파랑 > 토마토 > 파랑 > 토마토 이런 식으로 클릭할 때마다 h1의 색이 바뀌는 것이다!
실습을 하다가 className을 사용했는데, 이놈을 사용하면 문제가 발생한다.
그래서 classList를 사용했는데 이 둘을 좀 더 자세히 알아보자.
className은 class 전체를 관리할 때, classList는 개별 class를 관리하는 용도로 주로 사용된다.
className은 해당 요소에 '지정된' class값인데, 무언가를 대입하면 그 class의 전체가 바뀌어 버린다.
반면 classList는 class 하나만 조절할 수 있다. 그리고 classList는 add, remove, toggle 등 여러 function이 있다.
const h1 = document.querySelector("h1");
function handleTitleClick() {
const clickedClass = "clicked"
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);
contains는 이 classList에 어떤 class가 있는지 보여주는데,
handleTitleClick은 h1의 classList에 clickedclass가 있다면 이를 삭제하고, 그렇지 않다면 추가하게끔 하는 function이다.
function handleTitleClick() {
h1.classList.toggle("clicked");
}
clickedClass가 있는지 없는지 확인하고 있으면 제거, 없으면 추가하는 형태의 조건문이 아니라
toggle을 쓰면 이렇게 간단하게 줄일 수도 있다.
다음부터는 본격적으로 홈페이지를 만들고 구현했던 기능들에 대해 적어보겠다.
로그인, 시계, 투 두 리스트 등 사실 나도 얼레벌레 했지 리마인드가 꼭 필요한 부분들이 있어서
다시 해보면서 그간 못했던 복습을 해야겠다.
'👋🏻 JavaScript > 💭 노마드코더 바닐라JS' 카테고리의 다른 글
[노마드코더 바닐라JS로 크롬 앱 만들기] #7.0 ~ #7.8 (0) | 2023.03.08 |
---|---|
[노마드코더 바닐라JS로 크롬 앱 만들기] #6.0 ~ #6.3 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #5.0 ~ #5.3 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #4.0 ~ #4.7 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #1.4 ~ #2.16 (0) | 2023.03.06 |