TIL. 13 JavaScript - Object(객체)

🎈 객체 이론과 활용

• Object(객체) 함수와 서로 연관된 변수를 같은 이름으로 그룹핑하기 위한 도구이다.

• 메소드와 프로퍼티 객체에 포함된 함수는 메소드(method), 변수는 프로퍼티(property)라고 부른다.

• 객체의 property 끼리를 구분할 때는 콤마(,)를 사용한다.

• JavaScript 파일정리 css와 마찬가지로, script 태그 안의 내용을 .js 확장자 파일로 따로 정리할 수 있으며, <script src="파일명.js"></script> 코드로 연결한다.

• 객체는 중괄호{}를 사용하며, 순서가 있는 배열과는 달리 순서가 없다.

* 첫 번째 방법(일반 객체)

        <script>
            var coworkers = {
                "programmer":"egoing",
                "designer":"leezche"
            };
            document.write("programmer : "+coworkers.programmer+"<br>");
            document.write("designer : "+coworkers.designer+"<br>");
            coworkers.bookeeper = "duru";
            document.write("bookeeper : "+coworkers.bookeeper+"<br>");
            coworkers["data scientist"] = "taeho";
            document.write("data scientist : "+coworkers["data scientist"]+"<br>");
        </script>
        
// coworkers라는 객체의 생성과 그 안의 내용들을 가져오는 방법, 그리고 내용 추가 방법

------------------------------------------------------------------------------

* 두 번째 방법(객체와 반복문 활용)

	<script>
            for(var key in coworkers) {
                document.write(key+' : '+coworkers[key]+'<br>');
            }
        </script>
        
// for(var key in coworkers) :
   coworkers라는 변수가 가리키는 객체 안에 있는 key 값들을 가져오는 반복문
   
------------------------------------------------------------------------------
        
* 세 번째 방법(

	<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('powderblue');
            } else {
                Body.setBackgroundColor('white');
                Body.setColor('black');
                self.value = 'night';

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

// 위에서 Links와 Body를 객체로 생성하고,
   프로퍼티로 setColor를 지정 후 함수를 활용해 color값을 변경한다.

// Body.setColor('white')에서 Body는 객체, setColor('white')는 메소드이다.