[JavaScript] 생활코딩 29 ~ 33 _ 객체 (쓰기와 읽기, 반복문, property, method, 활용)

안녕하세요! 보라해바라기입니다.

 

오늘의 tmi를 말하자면.. 저는 곰돌이 네일을 받고 왔답니다 ㅎㅎ

 

곰돌이 네일.. 정말 귀여워요 ㅠㅠㅠ 제가 좋아하는 보라색으로 해서 더 마음에 들더라구요!

 

이번에 네일 받는게 2번째인데 확실히 손톱이 얇아진게 느껴졌어요 ㅠㅠ

 

하지만.. 생손톱을 보면 허전함이 느껴진달까..?!

 

갑자기 급 네일블로그가 될 뻔 했어요 ㅎㅎㅎ

 

오늘은 객체에 대해 알아볼거예요!

 

그러면 오늘도~ 렛츠 기릿~

---

 

 

1.  객체

 

저번에 배운 함수에 대해 기억하시나요~?

 

함수를 기반으로 하여 객체라는 개념을 설명할 수 있어요!

 

<script>
 function LinksSetColor(color){
   var alist = document.querySelectorAll('a');
   var i = 0;
   while(i < alist.length){
     console.log(alist[i]);
     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('ivory');
     self.value = 'day';

     LinksSetColor('violet');
       } else {
     BodySetBackgroundColor('ivory');
     BodySetColor('black');
     self.value = 'night';

     LinksSetColor('purple');
   }
}
 </script>

 

위 예시에서 body의 글씨 색과 배경 색을 함수를 이용해 나타내어 중복을 최소화했어요!

 

객체를 이용해서도 똑같은 기능을 구현할 수 있답니다?

 

 

2. 객체 쓰기와 읽기

배열과 객체에 대해 간단히 비교를 하고 객체의 쓰기와 읽기에 대해 알아보도록 할게요.

 

배열은 순서에 따라 정보를 정리정돈하는 반면 객체는 순서 없이 정보를 정리정돈한답니다. 

 

즉, 객체는 이름을 가진 정리 정돈 상자라고 이해하면 됩니다.

 

    <script>
      var coworkers = {
        "programmer":"egoing",
        "designer":"leezche"
      };/
      document.write("programmer : "+coworkers.programmer+"<br>");
      document.write("designer : "+coworkers.designer+"<br>");
      coworkers.bookkeeper = "duru";
      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
      coworkers["data scientist"] = "taeho";
      document.write("data scientist : "+coworkers["data scientist"]+"<br>");
    </script>

 

객체를 만들 때는 중괄호를 이용하여야 합니다~  var 변수이름 = { 내용 }; 이렇게 말이죠! 

 

또한 객체를 만든 후, 데이터를 추가하고 싶다면 변수이름. key이름 = "내용" ;

 

key이름에 공백이 포함된다면 변수이름["key 이름"] = "내용"; 을 사용하시면 됩니다!

 

 

3.  객체와 반복문

 

<script>
      for(var key in coworkers){ 
        document.write(key+' : '+coworkers[key]+'<br>'); 
      }

</script>

 

객체에서는 for문을 사용하게 되는데

 

예시를 보면 for는 coworkers라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문입니다.

 

key 값은 사용자가 가져오고 싶은 정보에 도달할 수 있는 열쇠가 되고

 

programmer, designer, bookkeeper, data scientist가 이에 해당된답니다~

 

즉, for(var key in coworkers) 의 뜻은

 

coworkers에 있는 key값 하나하나를 변수 값으로 세팅해준다는 의미입니다!

 

 

4. 객체 Property와 Method

  <script>
      coworkers.showAll = function(){  // = function showAll(){}
        for(var key in this){ // this는 자기자신을 가리킴.
          document.write(key+' : '+this[key]+'<br>');
        }
      }
      coworkers.showAll(); 
    </script>

 

for문의 조건에서 this는 자기자신을 가리키게 됩니다.

 

Method는 객체에 소속된 함수를 이르는 말로, 예시에서 showAll에 해당합니다.

 

Property는 객체에 소속된 변수를 이르는 말로, programmer, designer, bookkeeper, data scientist가 이에 해당하죠!

 

 

5. 객체의 활용

 

 var Links = { 
   setColor:function (color){ 
     var alist = document.querySelectorAll('a'); 
     var i = 0; 
     while(i < alist.length){ 
       console.log(alist[i]); 
       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('ivory'); 
     self.value = 'day'; 

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

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

위에서 배운 내용을 바탕으로 객체를 이용한 주/야간모드 구현이 가능하답니다~

 

---

오늘 내용은 들으면서는 쏙쏙 이해가 갔지만

 

다시 정리해보는 과정에서 어려움이 있었던 것 같아요 ㅠㅠ

 

익숙치 않은 용어들 때문일까요?

 

그래도 전보다 아는 것은 0.1%라도 많아졌으니 그에 만족합니다 ㅎㅎ

 

저는 그러면 내일 또 찾아올게요 :)