28. 라이브러리와 프레임워크
소프트웨어를 만들 때 다른 사람들이 미리 만들어 놓은 소프트웨어의 도움을 받는 방법.
- 라이브러리(Library): 사용할 수 있는 단편적인 기능을 정리해 놓은 것 (부품)
- 프레임워크(Framework): 만들고 싶은 소프트웨어의 기초적인 공통 부분을 구축해 놓은 것 (반제품)
jQuery
JavaScript의 대표적인 라이브러리이다.
jQuery 홈페이지에 가서 파일을 다운로드 한 뒤 직접 프로젝트에 포함시키거나 CDN을 이용하여 웹 페이지에 첨부한다.
CDN (Content Download Network) : 서비스 제공자의 서버에 저장된 파일을 <script src = " ">를 이용해 가져와 사용하는 방식.
- jQuery에서 제공하는
<Script>코드를 복사해서 html 파일의<head>영역에 붙여넣어 사용한다. - jQuery를 이용하려는
.js파일보다 위에 위치해야 한다.
이전에 작성했던 코드를 jQuery를 이용해서 보다 쉽게 작성할 수 있다.
/* jQuery를 사용하지 않고 모든 <a> 태그의 color를 바꾸는 함수 */
function linksSetColor(color) {
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}
}
/* jQuery의 css 기능을 이용해서 모든 <a> 태그의 color를 바꾸는 함수 */
function linkSetColor(color) {
/* 모든 <a>태그를 선택해서 css중 'color'의 값을 매개변수 color로 바꾼다. */
$('a').css('color', color);
}$(''):''안의 대상을 jQuery로 선택한다..css(par1, par2): 선택한 대상의 css를 수정한다.par1에 변경하고 싶은 속성을,par2에 속성 값을 적는다.
나머지 기능에도 적용
/* Body의 Color를 매개변수 color로 변경 */
function bodySetColor(color) {
document.querySelector('body').style.color = color;
}
/* Body의 backgroundColor를 매개변수 color로 변경 */
function bodySetBackgroundColor(color) {
document.querySelector('body').style.backgroundColor = color;
}
/* with jQuery */
function bodySetColor(color) {
$('body').css('color'. color);
}
function bodySetBackgroundColor(color) {
$('body').css('backgroundColor'. color);
}'공부를 합니다 > 언어 (Language)' 카테고리의 다른 글
| [생활코딩] 웹브라우저 자바스크립트 (0) | 2020.05.27 |
|---|---|
| WEB2 - JavaScript_29-30 수업을 마치며 (0) | 2020.05.07 |
| WEB2 - JavaScript_27 파일로 쪼개서 정리정돈하기 (0) | 2020.05.07 |
| WEB2 - JavaScript_24-26 객체 (0) | 2020.05.05 |
| WEB2 - JavaScript_21-23 함수 (0) | 2020.05.05 |