[TIL #17]

DOM

Dom이란?

• Document(HTML 파일)을 Javscript의 형태인 Object 형태로 Modeling 한 것.
• Document,Object,Modeling의 앞글자 DOM.

우리의 웹 브라우저는 HTML페이지를 서버에서 받아온 후, HTML을 로드할때 DOM을 함께 생성합니다.
이렇게 되면, DOM이 HTML과 Javascript간의 인터페이스 (소통창구) 역할을 하게 되는거죠.


그렇기에 우리는 DOM으로 동적 웹페이지 제작이 가능하다.

• HTML 요소 및 속성을 추가, 변경, 제거 가능
• CSS 스타일 변경
• 새로운 이벤트 생성, 이벤트 반응

Class

Class란 객체를 생성하기 위한 일종의 템플릿이다.

//기본구조
class Person{
	constructor(name,age){
      this.name = name;
      this.age = age
    }
  	sayhello(){
      console.log(`${this.name} and ${this.age}`);
    }
}

const person = new Person("Lee", 25);

person.sayhello();

와 같은 형태로 사용된다.

• constructor는 이름 변경이 불가능 하다.
• 생성자라고 생각하면 편할듯

Constructor

• Constructor는 Class의 생성자 함수이다.
• 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 한다.

Getter & Setter

• Class에서는 getter와 setter를 사용하여 Class의 속성에 접근이 가능하다.
• getter : 속성값을 반환하는 메서드.
• setter : 속성값을 설정하는 메서드.
• 주의사항 : _(언더바)를 사용하도록 하자!
  • 여기서 _(언더바)는 private속성을 의미한다.

// Getters와 Setters
// 객체지향 프로그래밍 언어 -> G, S
// 클래스 --> 객체(인스턴스)
// 프로퍼티(constructor)
// new Class(a, b, c)
class Rectangle {
  constructor(height, width) {
    // underscore : private(은밀하고, 감춰야 할 때)
    this._height = height;
    this._width = width;
  }

  // width를 위한 getter
  get width() {
    return this._width;
  }

  // width를 위한 setter
  set width(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 가로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._width = value;
  }

  // height를 위한 getter
  get height() {
    return this._height;
  }

  // height를 위한 setter
  set height(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 세로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._height = value;
  }

  // getArea : 가로 * 세로 => 넓이
  getArea() {
    const a = this._width * this._height;
    console.log(`넓이는 => ${a}입니다.`);
  }
}

// instance 생성
const rect1 = new Rectangle(10, 7);
rect1.getArea();
// const rect2 = new Rectangle(10, 30);
// const rect3 = new Rectangle(15, 20);