DOM

Document Object Modeling
HTML문서를 JavaScript에서 읽을 수 있는 객체 형태로 모델링한 것
브라우저에 기본적으로 내장된 API이므로 HTML의 내용을 JavaScript로 쉽게 사용 가능하다

DOM의 노드는 속성과 메서드를 갖는다

Node는 웹페이지를 구성하는 모든 HTML 태그, 텍스트, 속성 등을 하나의 블록으로 취급하는 것으로 계층 구조로 연결되어 각 블록은 부모 노드, 자식 노드의 관계를 가져 하나의 트리를 이룬다

• 노드 객체의 속성은 값을 갖는다
• 노드 객체의 메서드는 동작을 수행한다

//example
document.getElementById("demo").innerHTML = "Hello World!";

메서드: getElementById("demo")
속성: innerHTML

Class

클래스는 객체를 생성하기 위한 템플릿
다음 형태로 클래스를 선언한다

class 클래스명{
	constructor(요소1, ..., 요소#){
    	this.요소1 = 요소1;
        .
        .
        .
        this.요소# = 요소#;
    }
}

이후 다음 형태로 클래스에 맞는 객체를 생성한다

const 클래스1 = new 클래스명("요소1-1", "요소2-1", "요소#-1");
const 클래스2 = new 클래스명("요소1-2", "요소2-2", "요소#-2");

getter, setter

클래스의 속성에 접근하는 방법
getter는 속성 값을 반환하는 메서드, setter는 속성 값을 설정하는 메서드이다

get 요소1(){ 	// getter의 형태
	return this._요소1;
}

set 요소1(value){	// setter의 형태
	if(잘못된 값){
    	console.log("value의 값이 잘못됨")
    	return;
    }
    this._요소1 = value;
}

_를 통해 private 값으로 선언 가능
이를 통해 setter의 루프 방지

상속

다른 클래스의 기능을 물려받을 수 있다
상속받는 클래스는 subclass 혹은 derived class
상속하는 클래스는 superclass 혹은 base class

class baseclass{
	constructor(이름){
    	this.이름 = 이름;
    }
}

movement(){		//class의 동작 메서드
	console.log(`${this.이름} 움직임`);
}

class subclass extends baseclass{
	movement(){		//동작 메서드를 재정의
    	console.log(`${this.이름} 이동`};
    }
}
//subclass가 baseclass의 상속을 받았기 때문에 baseclass의 요소인 이름을 필수적으로 입력해야함
const ALPHA = new subclass("이름")

클로저

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합
렉시컬 환경이란 변수와 함수를 프로퍼티로 저장하는 객체