10일차 TIL(DOM 뜯어보기)

DOM : Document Object Modeling

Document (html)파일을 JS가 알아들을 수 있게 obj 형태로 modeling한 것.

 

DOM이 브라우저에 내장되어있기 때문에 우리가 HTML의 내용을 JS로 접근하고 제어할 수 있다.

 

모든 DOM의 node들은 속성과 메서드를 갖고 있다.

document.getElementById("demo").innerHTML = "hi";

.getElementById("demo") = 메서드

.innerHTML = 속성

 

클래스를 생성하고 이 객체에게 각 항목들의 값을 지정해준다.

makeNoise(); 이라는 메서드를 만들어 출력해준다.

 

class Car {

         constructor(modelName, modelYear, type, price){

                this.name = modelName;

                this.year = modelYear;

                this.type = type;

                this.price = price;

    }

    makeNoise(){

            console.log(this.name + "Shouting Boom Boom");

    };

    PrintUpYear(){

             console.log(this.name + "Shipped out in " + this.year);

    };

}

 

// 새로운 차들의 값들을 지정

const car1 = new Car("Rambo", 1999, "e", 4994);

const car2 = new Car("Uracan", 2010, "g", 8500);

const car3 = new Car("cayen", 2022, "d", 7600);

 

// 로 car1의 경적소리 불러오기

car1.makeNoise();

// 각 car의 생산년도 불러오기.

car1.printUpYear();

 

 

// [요구사항]

// 1. Car라는 새로운 클래스 생성, 처음 객체를 만들 때 다음 네개의 값이 필수로 입력!

//     (1) modelName

//     (2) modelYear

//     (3) type

//     (4) price

// 2. makeNoise() 메서드를 만들어 클락션을 출력해주세요.

//   2-1 해당 car가 몇년도 모델인지 작성.

// 3. 이후 자동차를 3개정도 만들어주세요(객체생성)

// [추가요구사항]

// modelName modelYear type price 를 가져오는 메서드 생성

// modelName modelYear type price 를 세팅하는 메서드 생성

// 만든 인스턴스를 통해서 마지막에 set 해서 get 하는 로직

class Car {

    constructor(modelName, modelYear, type, price){

        this.name = modelName;

        this.year = modelYear;

        this.type = type;

        this.price = price;

    }

    get modelName (){

        return this._modelName;

    }

    //입력값에 대한 검증까지 가능하다.

    set modelName (value){

        //유효성 검사

        if(value.length <= 0 ){

            console.log('[오류] 모델명이 입력되지 않았슴.')

            return;

        }

        if(typeof value !== 'string'){

            console.log('[오류] 입력된 모델명이 문자형이 아님.')

            return;

        }

        //검증이 완료된 후에만 setting!

        this._modelName = value;

    }

    get modelYear (){

        return this._modelYear;

    }

    set modelYear (value){

        //유효성 검사

        if(value.length !== 4 ){

            console.log('[오류] 입력된 년도가 4자리가 아님.')

            return;

        }

        if(typeof value !== 'string'){

            console.log('[오류] 입력된 모델명이 문자형이 아님.')

            return;

        }

        //검증이 완료된 후에만 setting!

        this._modelYear = value;

    }

    get type (){

        return this._type;

    }

    set type (value){        

        if(value.length <= 0){

            console.log('[오류] 타입이 입력 안됨. 확인요청')

            return;

        }

        if(value !== 'g' && value !== 'd' && value !== 'e'){

            console.log('[오류] 입력된 타입이 아님.')

            return;

        }

        //검증이 완료된 후에만 setting!

        this._type = value;

    }

    get price (){

        return this._price;

    }

    set price (value){

        if(typeof value !== 'number'){

            console.log('[오류] 가격으로 입력된 숫자가 아님.')

            return;

        }else if(value < '3000'){

            console.log('[오류] $3000 보다 낮을 수는 없슴.')

            return;

        }

        //검증이 완료된 후에만 setting!

        this._price = value;

    }

    makeNoise(){

        console.log(this.name + " Shouting boom boom");

    }

    printUpYear(){

        console.log(this.name + " shipped out in " + this.year);

    }

    usedFuel(){

        const tellMeSomeThing = this._type;

        console.log("There use to " + tellMeSomeThing);

    }

}

const car1 = new Car("Rambo", 1999, "e", 4994);

const car2 = new Car("Uracan", 2010, "g", 8500);

const car3 = new Car("Cayen", 2020, "d", 7600);

// car1.makeNoise();

// car2.makeNoise();

// car3.makeNoise();

car1.printUpYear();

car2.printUpYear();

car3.printUpYear();

car3.usedFuel();

console.log(car1.modelName);

car1.modelName = "zin";

console.log(car1.modelName);

각 항목을 인스턴스를 통해 불러오고 get /set 해보기

 

RangeError: Maximum call stack size exceeded

디버깅이 발생 할 수도 있다. 메서드 내에서 무한 굴레에 빠져들어 쌓인 stack이 초과했다.

this._modelName 이렇게 언더바를 붙여 해결, 방지해준다.