[책] 자바스크립트 코드 레시피 278 - 235일차

class 객체 지향

• class 객체 지향 응용하기

실습 1

class 객체 지향 사용하기

index.html

<div class="container">
  <div class="content">
    <button class="btn">버튼</button>
    <p class="desc">테스트</p>
  </div>
</div>

style.css

.btn {
  width: 100px;
  height: 100px;
}
.content {
  border: 5px solid #000;
}
.content .desc {
  display: none;
}
.content.on .desc {
  display: block;
}

script.js

// on/off 기능
class Work {
  constructor() {
    this.on = 'on';
    this.off = 'off';
  }
  element(element) {
    const tagEl = document.querySelector(element);
    tagEl.addEventListener('click', (event) => {
      event.stopPropagation(); // 버블링 차단
      console.log(event.target);
      if (tagEl.classList.contains(this.on)) {
        tagEl.classList.remove(this.on);
      } else {
        tagEl.classList.add(this.on);
      }

      box.isClassOn();
    });
  }
  isClassOn() {
    console.log('isClassOn() 함수 가져와서 이렇게 응용하는 건가?');
  }
}
const box = new Work();

box.element('.content');
box.element('.btn');
box.element('.desc');

실습 2

클래스에서 메소드 사용하기

index.html

<button class="btn">버튼</button>

script.js

// 클래스에서 메소드 사용하기
class test {
  aFlan() {
    return {
      a: 10,
      b: function() {
        console.log('A 실행'); // 실행
        return '리턴'; // 실행 후 리턴있으니 반환 값을 가져오고 싶은데 없어서 undefined 가 나온다.
      }
    }
  }
  bFlan() {
    return {
      a: 10,
      b: function() {
        console.log('B 실행'); // 실행
      },
      c: '10',
      info: {
        age: 30,
        name: '김승구',
        job: "web developer, front-end",
      },
      myFunction: function(element) {
        return document.querySelector(element);
      }
    }
  }
}
const t = new test();
// 콘솔에서 값 확인하기
console.log(t.aFlan().b());
console.log('---');
console.log( t.bFlan().a );
t.bFlan().b();
console.log( t.bFlan().info );
console.log( t.bFlan().myFunction('.btn') ); // element 가져오기