생각기록

생활 코딩 WEB2 JavaScript 5 본문

강의 정리/생활 코딩 강의 정리

생활 코딩 WEB2 JavaScript 5

끼록관 2022. 11. 11. 18:24

객체 object

객체라는 도구는 중요하지만, 매우 어렵다.

함수의 기반위에서 객체라는 것이 존재한다.

 

객체가 갖고 있는 다면적인 얼굴들 중 하나는

하나의 객체 특성, 존재이유, 기능에 집중 해봅시다. ( 아 객체란 이런거구나? )

 

객체의 얼굴 하나는 정리 정돈의 수납입니다.

코딩을하면, 정리정돈을 위해 함수를 쓰고, 또 함수가 많아지면 함수 + 연관된 변수들이 또 많아지면, 복잡도의 한계 속에서

서로 연관된 함수, 변수를 그룹핑 하는 = 객체

 

위의 사진의 중복된 코드를 없애 보자

함수로 독립 ㄱㄱ

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

        setColor('powderblue');

        } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        self.value = 'night';

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

1. 없앨 중복 내용 함수에 넣기(매개변수, 인자 고려)

2. 필요한곳에 함수 호출하기

 

응용해서 컬러들도 지정해보자

더보기
    <script>
    function LinkssetColor(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;
    }
    function nightDayHandler(self){
        var target = document.querySelector('body');
        if (self.value === 'night'){
        BodysetBackgroundColor('black');
        BodysetColor('white');
        LinkssetColor('powderblue');
        self.value = 'day';

 

        } else {
        BodysetBackgroundColor('white');
        BodysetColor('black');
        LinkssetColor('blue');
        self.value = 'night';
        }
    }
    </script>
</head>
<body>
    <input type="button" value="night" onclick="nightDayHandler(this)">
   
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
</body>

 

 

배열은 

  • 정보를 담는 그릇
  • 순서대로 정돈
  • 배열은 [ ]

 

 

순서대로 정리 할 수 없는 것이 있는데, 그것을 도와주는 것이 객체다

 

객체

이름으로 꺼낼 수 있는 정리정돈 상자

 

데이터를 무작위로 넣으면 될까?

그건 쓰레기통이나 다름없다. (꺼낼 필요가 없기 때문에, 체계가 없다.)

 

 

Body.setBackgroundColor('black'); 를 예시로

Body라는 객체를 만들면,

 

Body . setBackgroundColor

객체 = 폴더처럼  정리정돈 하듯이 

객체는 { }을 씀

 

 

document .  =  객체

document.querySelector('body') ~ 객체에 속해있는 함수 = 메소드 라고 부른다!

 

 

 

객체를 만드는 방법

1. 정리정돈 할 상자 변수  = 객체 를 만들자

     var coworkers = {     }   변수 ( 객체 공간 )

 

 

2. 데이터와 데이터를 찾을 수 있는 이름표를 붙인다.

    {  "programmer" : "rum" , "designer" : "sue"  };

        "rum", "sum" 라는 데이터 정보에 이름표를 붙임

 

 

 

객체에 데이터를  추가 하는 법

1. coworkers.bookkeeper = "nam";

여기서 . 은 오브젝트 엑세스 오퍼레이터 = 객체에 접근하는 얘

 

 

만약 객체에 띄어쓰기가 들어간다면, . 은 쓰지 못한다.

배열을 이용하면, 가능!

2. coworkers["data scientist"] = "backa";

 

 

 

객체의 정보를 꺼내오는 방법

1. document.write( 'programmer : ' + coworkers.programmer + '<br>');

2. document.write('data scientist : ' + coworkers["data scientist"] + '<br>');

 

<body>
    <h1>Object</h1>
    <script>
        // coworkers 라는 객체 속에
        // "rum"이라는 정보를 programmer에 이름표 붙임
        var coworkers = {
          "programmer" : "rum" ,
          "designer" : "sue"
        };
        // 정보를 꺼내오는 방법
        // .(쩜)은 오브젝트 엑세스 오퍼레이터 = 객체에 접근하는 얘
        document.write('programmer : ' + coworkers.programmer + '<br>');
        document.write('designer : ' + coworkers.designer + '<br>');
        // 객체에 정보를 추가 하고 싶을 떄  
        coworkers.bookkeeper = "nam";   
        document.write('bookkeeper : ' + coworkers.bookkeeper + '<br>');
        // 쩜을 통해서 띄어쓰기나 데이터를 넣지 못할 때
        // 배열을 통해서[""]하면, 띄어쓰기도 가능하다.
        coworkers["data scientist"] = "backa";
        document.write('data scientist : ' + coworkers["data scientist"] + '<br>');
    </script>
</body>

 

생성한 객체를 모조리 가져와야 할 떄

객체의 데이터 순회!

 

자바스크립트 오브젝트 반복적으로 가져온다.

javascript object iterate 검색

 

for... in

문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다.

 

예시문

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

 

 

응용해서

 

for(var key in coworkers)

해석하자면 =  in coworkers라는 객체에 있는 key값들을 가져오는 for:반복문

 

key 값이라 함은? 위의 programmer, designer 등을 의미
key = 도달하고 싶은 정보의 열쇠 , 배열은 index라고 쓴다.

 

 

document.write(key + '<br>');

// 키값을 모조리 출력, 특정

document.write(coworkers[key] + '<br>');

// 객체의 데이터 값(key) 출력

 

 document.write(key + ': ' + coworkers[key] + '<br>'); 

    </script>
     <h2>Iterate</h2>
     <script>
        //  in coworkers라는 객체에 있는 key값들을 가져오는 for:반복문
        // 여기서 key 값이라 함은? 위의 programmer, designer 등을 의미
        // 즉 key = 도달하고 싶은 정보의 열쇠 , 배열은 index라고 쓴다.
        for(var key in coworkers) {
            // document.write(key + '<br>'); // 키값을 모조리 출력, 특정
            // document.write(coworkers[key] + '<br>'); // 데이터 값 출력
            document.write(key + ': ' + coworkers[key] + '<br>'); 
        }
     </script>

 

 

 

객체 프로퍼티와 메소드

객체는 배열, 숫자, 모든걸 담을 수 있다.

함수도 가능하다!

 

객체에 소속된 값을 함수로 지정 

= 객체에 소속된 함수 = 메소드

 

1)  coworkers.showAll = function(){  };

coworkers라는 객체에 접근해서 showAll이란 목차란 값에 함수값 지정

 

 

위에서 객체에 데이터 추가 방법 참고

더보기

객체에 데이터를  추가 하는 법

1. coworkers.bookkeeper = "nam";

여기서 . 은 오브젝트 엑세스 오퍼레이터 = 객체에 접근하는 얘

coworkers.showAll = function(){
2)            for(var key in coworkers) {
                document.write(key + " : " +   this[key]  + '<br>'); 

                //coworkers[key] 라고하면 객체 이름이 바뀌면 쓰기 좋지 않음
            }
        }      //그럴땐 해당 객체를 가르키는 약속된 언어 = > this를 쓰자
        
        coworkers.showAll(); //객체에 속한 변수는 = 프로퍼티라고 한다.

 

     </script>
     <h2>Property & Method</h2>
     <script>
        // 객체에 메소드를 추가하는 법 아래는 function showAll(){};와 같다. 객체에 소속된 값을 함수로 지정!
        // 객체에 소속된 함수 = 메소드 
        coworkers.showAll = function(){
            for(var key in coworkers) {
                document.write(key + " : " + this[key] + '<br>'); //coworkers[key] 라고하면 객체 이름이 바뀌면 좋지 않음
            }
        }//그럴땐 해당 객체를 가르키는 약속된 언어 = > this를 쓰자
        
        coworkers.showAll(); //객체에 속한 변수는 = 프로퍼티라고 한다.
     </script>

 

객체의 활용

이런식으로 함수를 객체화 해보자 

 

Body라는 객체에 아래 함수를 변경해보자
function BodysetColor(color){
      document.querySelector('body').style.color = color;
 }  
    function BodysetBackgroundColor(color){
        document.querySelector('body').style.backgroundColor = color;
     }

   

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

 

2. 프로퍼티(객체에 속한 변수)를 해당 함수이름들을 이름표 넣은 함수들 넣어주기

Body의 setColor는 : ('body').style.color ~

Body의  BackgroundColor는 : ('body').style.backgroundColor ~

이름표와 기능을 을 넣어준다


    var Body = {
        setColor : function (color){
            document.querySelector('body').style.color = color;
        },
        setBackgroundColor: function(color){
            document.querySelector('body').style.backgroundColor = color;
        }
    }

Body라는 객체의 setBackgroundColor 라는 이름표에 ('black')이란 인자를 넣겠다.

    <script>
        // LinkssetColor객체화
        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 LinkssetColor(color){
    //     var alist = document.querySelectorAll('a');
    //     var i = 0;
    //     while( i < alist.length ){
    //         alist[i].style.color = color;
    //         i = i + 1;
    //         }
    // }
    // 1.바디라는 변수에 객체를 담기 2. 프로퍼티를 샛컬러 지정
    var Body = {
        setColor:function (color){
            document.querySelector('body').style.color = color;
        },
        setBackgroundColor: function(color){
            document.querySelector('body').style.backgroundColor = color;
        }
    }
    //> Body객체 속에 넣어서 필요 없어짐
    // function BodysetColor(color){
    //     document.querySelector('body').style.color = color;
    // }  
    // function BodysetBackgroundColor(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');
        Links.setColor('powderblue');
        self.value = 'day';

        } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        Links.setColor('blue');
        self.value = 'night';
        }
    }
    </script>
</head>
<body>
    <input type="button" value="night" onclick="nightDayHandler(this)">
    
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
</body>

이걸로 보면, querySelector 도 메소드임!

'강의 정리 > 생활 코딩 강의 정리' 카테고리의 다른 글

생활 코딩 WEB2 - 라이브러리와 프레임워크, 제이쿼리 쓰는 법  (0) 2022.11.12
생활 코딩 WEB2 파일 쪼개서 정리 정돈  (0) 2022.11.12
생활 코딩 WEB2 JavaScript 4  (0) 2022.11.11
생활 코딩 WEB2 JavaScript 3  (0) 2022.11.09
생활 코딩 WEB2 JavaScript 2  (0) 2022.11.09
'강의 정리/생활 코딩 강의 정리' Related Articles more