JavaScript 연동과 라이브러리(Library)

#JavaScript 연동

themeChanger()이라는 함수를 구현하고 코딩한 JavaScript를 1부터 4.html에 모두 붙여 넣어 원활한 구동이 되는 것을 확인했다. 그런데 이런 페이지가 많다면 모두 복사하고 수정 소요가 생겼을 때, 일일이 수정해야 하는 것은 상당히 비효율적인 일이 될 것이다.

보다 효율적으로 코딩하기 위해서 css를 hmtl에 불러왔던 것처럼 JavaScript도 불러온다면 우리는 한번의 수정으로 모든 페이지를 변경할 수 있게 될 것이다.

themeChanger는 글씨색과 배경색을 변경하는 기능인만큼 color.js라는 파일을 만들고 html 내 <script></script> 사이에 있던 코딩을 붙여 넣었다.

var Links = {
  SetColor:function (color){
   var alist = document.querySelectorAll('a');
    var i = 0;
    while(i<alist.length){
      alist[i].style.color=color;
      i++;
      }
    }
  }

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

  setBgColor:function (color){
    document.querySelector('body').style.backgroundColor= color;
  }
}

function themeChanger(self){
  if(self.value==='day'){
    Body.setBgColor('white');
    Body.setColor('black');
    Links.SetColor('black');
    self.value='night';
  }
  else{
    Body.setBgColor('black');
    Body.setColor('white');
    Links.SetColor('powderblue');
    self.value='day';
  }
}

이렇게 생성한 color.js를 html에 연동하기 위해서는

<script src="colors.js"></script>
<!-- <script src="js파일경로"></script> -->

를 코딩하면 color.js와 해당 html의 연동이 된다.

 

---

#라이브러리(Library)

라이브러리(Library)는 여러 코드들이 보다 편리하게 사용되고 간단해질 수 있도록 미리 만들어져 있는 함수들이라고 생각할 수 있다.

대표적인 예로, 가장 유명한 Javascript라이브러리 중 하나인 jQuery가 있는데, 이 라이브러리는 생산성을 높여준다.

연동의 방법은 해당 jQuery를 다운로드하는 방법과 CDN이라는 방법이 있는데, jQuery의 구글 CDN을 추가해보면

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

다음과 같이 추가하고 이 jQuery의 기능 중 하나는 반복문의 사용 없이 모든 태그를 한 번에 처리할 수 있다.

위에서 사용한 links 객체 내에는 모든 <a> 태그의 color를 변경하기 위해 while문을 사용하였는데 이를 jQuery로 수정하면

var Links = {
  SetColor:function (color){
    // var alist = document.querySelectorAll('a');
    // var i = 0;
    // while(i<alist.length){
    //   alist[i].style.color=color;
    //   i++;
    //   }
    $('a').css('color', color);
    }
  }

다음처럼 바꿀 수 있다.

구문을 해석하면 모든 <a> 태그에 대한 css에서 'color'를 color로 바꾸어라.로 해석할 수 있다.

 

이처럼 라이브러리(Library)는 보다 복잡한 코드를 간결하고 쉽게 바꾸어주는 도구의 역할을 한다.

 

---

<참고자료 : boostcourse : 생활코딩> www.boostcourse.org/cs124/joinLectures/43691?isDesc=false

자바스크립트의 시작