객체의 활용

객체의 용어와 활용방법

Property

  • 클래스안에서 만드는 변수로 함수도 클래스에 포함

  • key와 value로 이루어짐

  • {key: value, } 형태

Method

  • 클래스 또는 함수 안에서 만드는 함수

  • property와 마찬가지로 key와 value로 이루어지는데 value가 function임

  • {key: function() {}, }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1><a href="#">홈으로</a></h1>
  <input type="button" value="불 끄기" onclick = "lightToggleHandler(this)" />
  <ul>
    <li><a href="#">1. 기획</a></li>
    <li><a href="#">2. 디자인</a></li>
    <li><a href="#">3. 퍼블리싱</a></li>
    <li><a href="#">4. 프론트</a></li>
    <li><a href="#">5. 백</a></li>
  </ul>
  <p>
    웹사이트를 구축은 크게 기획, 디자인, 퍼블리싱, 개발이라는 4단계를 거쳐서 진행되고 있으며 전체 프로젝트를 총괄하는 PM(Project Manager)와 각 단계의 PL(Project Leader)의 원활한 커뮤니케이션을 통해 성공적인 프로젝트를 완료하는데 목적을 둔다. 여기서 웹디자인 과정은 웹사이트의 컨셉(Concept)에 맞게 구체적인 시각화와 사용성을 높이는데 중요한 역할을 하고 있으며 보다 전문적인 아트디렉터가 투입되기도 한다.
  </p>
  <script>
    var body = {
      target: document.querySelector('body'), // Property
      setBackgroundColor: function(color) {
        this.target.style.backgroundColor = color;
      }, // Method
      setColor: function(color) {
        this.target.style.color = color;
      },
    } // body 관련 변수와 함수를 묶어서 객체로 만듬
    
    var alist = {
      target: document.querySelectorAll('a'),
      setColor: function(color) {
        for(var i = 0; i < this.target.length; i++) {
          this.target[i].style.color = color;
        }
      },
    } // alist 관련 변수와 함수를 묶어서 객체로 만듬
    
    function lightToggleHandler(self) {
      if(self.value === '불 끄기') {
        body.setBackgroundColor('black');
        body.setColor('white');
        alist.setColor('powderblue');
        self.value = '불 켜기';
      } else {
        body.setBackgroundColor('white');
        body.setColor('black');
        alist.setColor('blue');
        self.value = '불 끄기';
      }
    }    
  </script>
</body>
</html>

Previous객체(Object)NextJS파일로 나누기

Last updated

Was this helpful?