옥수수와 식빵 그리고 코딩

33. 객체 활용 본문

2023/생활코딩

33. 객체 활용

옥식 2023. 10. 4. 16:16

문제가 발생할 경우 inspect, 검사를 사용해서 문제가 어디서 발생했는지를 알아내야 함.

 

객체는 객체의 프로퍼티와 프로퍼티 사이를 구분할 떄는 콤마를 사용함.

var Body = {
setColor : function(color){
document.querySelector('body').style.color=color;
}, //객체와 객체 사이에는 , 필수
setBackgroundColor : function(color){
document.querySelector('body').style.backgroundColor=color;
}
}

 

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
  <script>
        // function LinksSetColor(color){ //매개변수 이름으로 color줌
        //   var alist = document.querySelectorAll('a') ; //어두워지면 <a>태그 글자색 하늘색으로
        //     var i = 0;  
        //     while (i<alist.length) {
        //         alist[i].style.color = color; //그래서 여기도 원하는 인자를 매개변수로 받기때문에 매개변수랑 동일한 값으로.
        //         //console.log(alist[i]);
        //         i = i+1;
        //     }
        // }
    var Links = { //객체라서 중괄호
      setColor : function(color){
        var alist = document.querySelectorAll('a') ; //어두워지면 <a>태그 글자색 하늘색으로
        var i = 0;  
        while (i<alist.length) {
            alist[i].style.color = color; //그래서 여기도 원하는 인자를 매개변수로 받기때문에 매개변수랑 동일한 값으로.
            //console.log(alist[i]);
            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'){
        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>

</head>

 

이제 기본 개념은 다 배움.

다만 점점 상호작용을 하면서 복잡도가 올라가고 막막함이 생길 뿐.

문법은 이제 다 배운것임.

 

객체보다 더 큰 정리정돈 도구가 있을까?

다음시간에 계쏙...

저작자표시

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

35. 라이브러리와 프레임 워크  (0) 2023.10.04
34. 파일로 쪼개서 정리정돈하기  (0) 2023.10.04
30. 객체  (0) 2023.10.04
30. 객체  (1) 2023.10.03
About Github  (0) 2023.10.02
'2023/생활코딩' Related Articles more
Comments