(객체) 객체 활용

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;

            }

        }

        }

        function BodySetColor(color) {

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

        }

        function BodySetBackgroundColor(color) {

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

        }

     

        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') {

                target.style.backgroundColor = 'black';

                BodySetBackgroundColor('black')

                BodySetColor('white');

                self.value = 'day';

                Links.SetColor('powderblue');

            } else {

                target.style.backgroundColor = 'white';

                BodySetBackgroundColor('white')

                BodySetColor('black');

                self.value = 'night';

                Links.SetColor('blue');

            }

        }

객체에 속한 함수 이름 지정하기  그림 1

 

 

var Body = {} 객체를 생성하고

그다음 body안에

{ setColor:function (color){
document.querySelector('body'). style.color = color; } ↔ 메서드 함수를 생성해주고

body 자체를 객체로 만들어 준다 body. 메서드(객체 안의 함수를 메서드)를 선언해서 코드의 가독성을 높이기 위해

구조화하였다고 생각한다

 

최종 정리

1.set과 .style 타입의 동일화

2.대소문자 체크의 중요성

 

1. set과 style 뒤에 오는 단어는 같을 필요가 없습니다

   위의 예제에서 쓰인 set은 통상적으로 프로그래밍에서 자주 쓰는 단어일뿐

   다른 단어로 대체가 가능합니다. 많은 함수를 만들었을 때 특정함수가

   어떤 역할을 하는지 기억하기 위해 역할을 나타내는 이름을 주로 부여하고 그런 의미에서 setColor는

   색상을 설정한다 라는 의미를 부여하기 위한 것이지 다른 단어로 바뀌어도 됩니다

   style.xxx 에 나오는 것은 이미 설정되어 있는 것을 가져다 쓰는 것이라 정해진 대로 이름을 써야하고 

   우리가 만든 함수는 그 어떤 이름이 되어도 쓰이는 곳에서 통일성 있게 쓰이면 상관없습니다

    style 뒤에 나오는 단어와 메소드(함수)의 단어는 일치할 필요가 없습니다

 

2. 위와 같은 이유로 메서드(함수)의 이름은 setColor일 필요가 없습니다

    대문자, 소문자 또한 상관없습니다 다만 특정 이름으로 지정했을 경우

    그 메서드를 사용할 때 일관성 있게 해당 이름 그대로 대문자와 소문자를 사용해 주셔야 합니다.

    setwhy 일 경우 setwhy로 Colorwhy일 때는 Colorwhy로, Colorwhy일 때는

    역시 소문자인 colorwhy로 사용해 주셔야 합니다

    

   

 

 

 

예시)

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 = {
hamburgerwhy: function (color) { // set이 아니라 다른 단어로 시작해도 상관없습니다.
document.querySelector('body'). style.color = color;
},

setwhatIwant: function (color) { // style의 내용과 메서드 이름이 일치할 필요 없습니다.
document.querySelector('body'). style.backgroundColor = color;
}
}

function nightDayHandler(self) {
var target = document.querySelector('body');
if (self.value === 'night') {
Body.setwhatIwant('black');
Body.hamburgerwhy('white');
self.value = 'day';
Links.setcolor('powderblue');
} else {
Body.setwhatIwant('white');
Body.hamburgerwhy('black');
self.value = 'night';
Links.setcolor('blue');
}
}