DOM이란?
Document Object Model의 약자로, 브라우저에 내장되어 있는 API (다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할
웹 페이지(HTML 문서)를 동적으로 만들기 위해 JS를 사용
클라이언트, 서버
사용자 = 브라우저 = 클라이언트
클라이언트가 서버에게 요청을 한다. => 응답을 준다. => 응답을 수신 (HTML 문서)
브라우저에는 랜더링 엔진이 존재 (해석)
DOM에 접근 및 제어해보기
매서드와 함수
-
매서드(Method):
매서드는 객체(Object) 내에 속하는 함수
객체에 속한 동작(behavior)을 정의하는 함수
e.g. person.getName(); -
함수(Function):
함수는 독립적으로 존재하며 특정 작업을 수행하는 기능을 정의
함수는 객체에 속하지 않고, 프로그램의 어디서나 호출될 수 있음
e.g. testLogging();
DOM에 접근 및 제어해보기
선택자 접근
document.getElementByID
document.querySeletor
document.getElementsByTagName
.
.
제어
.innerText 텍스트 변경
.setAttribute 속성 변경
.
.
.
접근 및 제어
e.g.document.querySeletor('ul').children[0].innerText = "변경 메뉴"
e.g. document.getElementsByTagNem('h1)[0].innerText = "제목 변경"
둘이 합치면 기본적인 dom 완료
오늘의 할 일 -> 5주차 강의 + TIL + 숙제 해보기
Class 문법
객체 단위로 묶어서 재활용할 수 있다는 장점이 있다!
클래스는?
클래스는 객체를 만들기 위한 틀이나 설계도입니다.
객체의 속성(데이터)과 메서드(동작)를 정의합니다.
인스턴스는?
인스턴스는 클래스를 기반으로 실제로 메모리에 할당된 객체입니다.
클래스의 인스턴스를 생성함으로써 실제 데이터를 다루고 해당 클래스의 기능을 사용할 수 있습니다.
클래스로부터 생성된 각각의 객체는 서로 다른 데이터 상태를 가질 수 있습니다.
e.g. 클래스
class @@ {
constructor(ㅁㅁ, ㅇㅇ) {
this.ㅁㅁ = ㅁㅁ;
this.ㅇㅇ = ㅇㅇ;
}
}
e.g. 인스턴스
const @@1 = new @@ ("ㅁㅁ에 들어갈 거", "ㅇㅇ에 들어갈 거");
-> 즉, 클래스에 근거하여 ㅁㅁ은 무엇이고, ㅇㅇ은 무엇인 @@1을 만들어줘
=> 객체를 정확하고 빠르게 많이 만들 수 있음
Getters와 Setters
모든 객체 지향 언어에서는 G, S 개념이 있다.
접근 및 세팅하기 위함
get ㅁㅁ () {
return this.ㅁㅁ;
}
set ㅁㅁ (value) {
}
셋에는 파라미터 안에 밸류 필수, {} 내부에는 유효성 검사
this.ㅁㅁ
underscore : private한 의미 통용적으로 써서 씀 (get, set으로 class 설정) (*같은 것으로 할 시에 콜 스택이 꽉 차는 현상이 있어 보통 "_" 추가하여 표현)
=> 보통 Getter에서는 this._ㅁㅁ과 같이 해당 속성을 반환. 그리고 Setter 내부에서는 받은 값(value)을 검사하고 필요한 경우 속성에 할당하거나 그렇지 않은 경우 처리
**getter 예시** console.log(@@.ㅁㅁ); ㅁㅁ에 할당된 값 출력
**setter 예시** @@.ㅁㅁ = ㅎㅎ console.log(@@.ㅁㅁ); ㅎㅎ 출력 (할당된 값 -> ㅎㅎ로 바뀜)
상속
부모 클래스랑 자식 클래스 중에 다른 거 표기할 때
class ## extends @@ {
constructor (ㅁㅁ, ㅇㅇ,ㄴㄴ){
super(ㅁㅁ,"ㄱㄱ",ㄴㄴ);
}
}
정적 메소드 (Static Method)
정적 메소드는 클래스의 동작을 논리적으로 그룹화하고, 해당 클래스의 인스턴스를 생성하지 않고도 해당 동작을 수행할 수 있게 해주는 것
