JavaScript 라이브러리 & 프레임워크

라이브러리

만들고자하는 소프트웨어에 필요한 부품들이 정리되어 있다. 우리는 이를 가져다 쓰면 된다.
자바스크립트에서 많이 쓰이는 라이브러리는 jQuery 이며 이를 사용하면 생산성을 높일 수 있다.

프레임워크

내가 만들고자하는 것에 따라 공통적인 부분은 프레임워크에서 제공을 해주고 우리가 바꾸고자하는 부분은 바꾸어서 사용한다. 라이브러리와 달리 우리가 프레임워크 안에 들어가 작업을 한다고 이해하면 된다.

jQuery

https://developers.google.com/speed/libraries#jquery

에서

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

라는 제이쿼리를 가져와 사용하기로한다 .
제이쿼리는 이미 반복문을 실행하는 기능을 가지고 있기 때문에 내가 작성한 반복문을 생략하여도 된다.

var Links ={
  setColor:function LinkSetColor(color){
  //   var alist =document.querySelectorAll('a');
  //   var i =0;
  //   while(i<alist.length){
  //   alist[i].style.color=color;
  //   i=i+1;
  // }
  $('a').css('color',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');

}
}

$('a') 는 이 코드에 있는 모든 a 태그를 제이쿼리로 제어하겠다는 의미이다. 여기에 해당 태그 css의 색상을 제어하겠다는 의미로 다음과 같이 바꾸어 준다.

$('a').css('color',color);

제이쿼리가 만든 위의 함수가 우리를 대신하여 스타일을 적용시켜주는 것이다.

다른 부분도 다음과 같이 바꾸어준다

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

}

작동은 이전과 동일하게 한다는것을 확인할 수 있다.