[JavaScript-생활코딩] 26. 객체 활용

객체 활용 - WEB2 - JavaScript (opentutorials.org)

객체 활용 - WEB2 - JavaScript

​

바디라는 변수에 객체를 담는다.

var Body = { }

이 객체에 프로퍼티(객체에 소속된 변수) 로 setColor를 지정한다음에

var Body = { setColor: }

여기있는 이코드에 function을 넣어 사용

 <script>
 var Links = {
  setColor:function(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
    }
  }
}
var Body = {
  setColor:function (color){
    document.querySelector('body').style.color = color;
  },
  setBackgroundColor:function (color){
    document.querySelector('body').style.backgroundColor = color;
  }
}
function nightDayHandler(self){
  var target = document.querySelector('body');
  if(self.value === 'night'){
    Body.setBackgroundColor('black');
    Body.setColor('white');
    self.value = 'day';

    Links.setColor('white');
  } else {
    Body.setBackgroundColor('white');
    Body.setColor('black');
    self.value = 'night';

    Links.setColor('blue');
  }
}
</script>

객체는 객체의 프로퍼티와 프로퍼티를 구분할때 콤마(,)를 찍는다.

var Body = {

setColor:function (color){

document.querySelector('body').style.color = color;

},

setBackgroundColor:function (color){

document.querySelector('body').style.backgroundColor = color;

}

}

​

​

​

​

​

​

document.querySelector('body')

document = 객체

.querySelect('body') =함수이면서 객체에 소속되어있었기 때문에 매소드 임을 알 수있다.

---

함수는 코드가 많아지면 정리정돈하는 도구

객체는 함수와 변수가 많아지면 연관된 것들을 정리정돈하는 도구