이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다.
javascript의 기초적인 문법은 바닐라 JS로 크롬 앱 만들기 포스트에 있다.
DOM
DOM은 Document Object Model로 문서(document)를 객체(object)로 표현(model)하는 것이다. 객체를 통해 웹 페이지를 프로그래밍으로 조작할 수 있도록 만든 인터페이스이다. DOM의 사용에 대해 정리해 보았다.
DOM의 요소 선택
1
2
3
4
5
const selectedTagName = document.getElementsByTagName("div");
const selectedId = document.getElementById("sell");
const selectedClassNameS = document.getElementsByClassName("getClass");
const selectedNameS = document.getElementsByName("red");
const selectedQuerySelector = document.querySelector(".class");
문서의 요소를 선택하는 방법이다. getElementsByTagName로 HTML 문서 태그의 이름을 가져와 해당 태그를 선택한다. getElementById로 HTML문서 태그들에 해당 id를 가진 요소들을 선택한다.
getElementsByClassName으로 해당 클래스 이름을 가진 요소들을 선택한다. getElementsByName으로 요소의 name속성값으로 선택한다.
selectedQuerySelector를 많이 사용하고, id를 찾기 위해서는 #id, class를 찾기 위해서는 .class로 찾으면 된다.
DOM 요소를 변경하기
1
2
3
4
5
6
7
// 요소의 색과 요소의 내용을 변경하기
selectedQuerySelector.style.color = "red";
selectedQuerySelector.innerHTML = "새 요소 내용";
// 요소 노드의 노드값을 선택하기
selectedQuerySelector.firstChild.nodeValue;
selectedQuerySelector.firstChild.nodeType;
style.color를 사용해 요소의 색을 변경할 수 있고, innerHTML로 요소의 내용을 변경할 수 있다. firstChild로 요소의 첫 번째 자식 노드를 선택하게 되고, nodeValue로 노드 값을 선택한다. nodeType으로 노드의 타입을 선택할 수 있다.
Event
이벤트는 javascript와 같은 프로그래밍 언어가 HTML에 발생시키는 사건을 말한다.
e.preventDefault()
버튼이나 a태그와 같이 이벤트가 발생하는데 그런 동작을 중단시킨다. 같은 페이지에서 input이나 form에 submit 같은 버튼을 눌렀을 때, 새로 이동하지 않고 한 페이지에서 출력을 확인할 수 있게 된다.
window.scrollTo()
1
2
3
4
window.scrollTo({
behavior: "smooth",
top: target.offsetTop,
});
scrollTo에는 여러가지 속성이 있다. behavior는 smooth로 값을 주면 부드럽게 이동한다 offsetTop은 선택된 영역의 상단까지의 거리를 절대 좌표로 반환해 준다. 유용하게 쓰일 수 있을 것 같다.
addEventListener
1
2
3
4
5
6
var section = document.querySelector("section");
section.addEventListener("mouseover", (e) => {
const getColor = document.querySelector(".selected");
getColor.innerHTML = e.target.className;
});
addEventListener는 웹 페이지에서 사용자가 하는 행동이 발생하면, 동작을 하게 된다. 위 코드는 section태그에 마우스가 올라갔을 때 selected클래스를 가진 요소에 텍스트를 변경하게 한다.
Class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class classEX {
constructor(param) {
this.params = param;
console.log(this.params);
}
doEvent() {
this.printParam();
}
printParam() {
console.log(this.params);
}
}
const className = new classEX("input");
className.doEvent();
class는 위와 같이 사용한다. class는 constructor가 필요하다. constructor는 class가 호출되면 먼저 동작하게 된다.
class에서 this는 파이썬 클래스에서 self와 같은 역할을 한다. 클래스 내의 다른 동작을 하는 함수를 호출하기 위해 this.funcName()으로 호출한다.
Rest Operator
1
2
3
const [head, ...tail] = [1, 2, 3, 4, 5]; // rest operator
const A = [1, 2, 3, 4, 5];
const B = [...A]; // spread
javascript에서 ...foo의 형태가 두 가지가 존재한다. rest operator와 spread이다. rest operator는 [head, ...tail]와 같이 사용하게 되면 배열의 첫 번째 인덱스는 head에 저장하고, 첫 번째 값을 제외한 나머지 배열은 tail에 저장한다. 이것을 비 구조화 할당이라고 한다. 파이썬의 a, b = [1, 2]와 비슷한 역할을 한다.
spread는 단어 그대로 확장의 기능을 가지고 있다. 위 코드에서 B는 ...A로 선언되어 있다. 이것은 A배열을 복사한 것이다. B = A를 하게 되면 A의 값이 바뀌면 B의 값도 바뀌는 얕은 복사가 발생한다. spread를 사용하면 깊은 복사를 하게되며 주소값이 아닌 값만 복사해온다.