20220221 - HTML JavaScript 7

- colors.js

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를 하나의 파일로 정리하여 모든 페이지에 일괄적용

  (수정시에도 일괄적용되므로 효율적이다)

<script src="color.js"></script>

  각 페이지 head에 위와같은 코드를 넣어주면 된다.

  캐시되어 서버/트래픽 측면에서도 아주 효율적이다.

 

 

 

 

 

- 라이브러리와 프래임워크

  소프트웨어는 혼자 만들기보다 다른사람의 소프트웨어를 부품으로하는 경우가 많다.

  현재까지 생산자로써 방법을 배웠다면 이번 시간은 소비자로써의 사회성을 배우는 것

  라이브러리, 프래임워크 둘 다 다른사람의 도움을 받아 프로그램을 만든다는 점은 동일하다.

  라이브러리: 도서관, 다양한 부품들이 정리정돈 되어있는 소프트웨어

  프레임워크: 만들고자 하는 것이 앱인지, 웹인지 등 각 프로그램마다 반드시 필요한 공통적인 부분을

                  처음부터 끝까지 만들지 않도록 해주는 것.

                  프레임워크라는 것을 만들어놓고 기능에따라, 개성에따라 살짝씩 수정만 할 수 있도록 해주는 것.

  라이브러리는 당겨와서 쓰는 느낌이라면 프레임워크는 안에 들어가서 작업하는 느낌

  

  jQuery 자바스크립트 라이브러리 중에 가장 유명하고 안정적이다.

 CDN(컨텐트딜리버리네트워크) 직접 라이브러리를 다운받아서 업로드하고 적용하기보다

 다른 사람이 업로드해둔 CDN을 통해 script src를 통해 가져가서 쓸 수 있다.  

<script src="https://ajax.googleapis.com/ajax/libs/jquery.min.js"></script>
<script src="color.js"></script>

  jQuery를 이용하여 color.js 파일 수정해보기

  var Links = {
    setColor:function(color){
        $('a').css('color', color);
    }
  }
  var Body = {
    setColor:function(color){
        $('body').css('color', color);
    }
    setBackgroundColor:function(color){
        $('body').css('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');
      }
  }

  $ 모든 'a' 태그를 jQuery로 제어하겠다는 의미

 

 

 

 

 

 

공부 자료: https://opentutorials.org/