라이브러리와 프래임워크 - WEB2 - JavaScript (opentutorials.org)
라이브러리와 프래임워크 - WEB2 - JavaScript
라이브러리와 프래임워크 2017-12-02 16:24:54
opentutorials.org
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
1.라이브러리(library)
2.프레임워크(framework)
- 두가지는 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷하다.
1.라이브러리는 내가만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어를 잘 정리정돈 해놓는 소프트웨어
내가만들고있는 프로그램에 사용할 부품을 가져오는 것 같은 느낌
2.프레임워크는 만들고자 하는 것이 있을때 만들고자 하는 것이 무엇이냐에 따라서 (예 게임,채팅,웹) 언제나 필요한 공통적인 부분은
프레임워크라는 것이 만들어놓고, 만들고자하는 것을 처음부터 끝까지 우리가 만들지 않게 하는 반제품 같은 느낌이다.
자바스크립트 라이브러리 중 가장 유명한 것. : jQurery
CDN (content Delivery Network)
많은 라이브러리들이 CDN이라는 것을 통해서 자기들의 서버에다가 파일을 보관해놓고
우리는 script src를 통해서 가져갈 수 있게 만들어준다.
jQurey를 구글에 검색해 들어간다 > 다운로드를 들어간다>
사이트에서 CDN을 찾아 google CDN 을 들어간다 > 최신버전을 스크랩한다
*ctrl+/ = 많은 코드들을 주석처리해준다.
1.html
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>2.html
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>3.html
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>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 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;
//document.querySelector('body').style.color = color;
$('body').css('color', color);
},
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
// document.querySelector('body').style.backgroundColor = color;
$('body').css('backgroundColor', color);
}
}
function nightDayHandler(self){어떤 처리해야 될 태그들이 여러가지가 있을 때 반복문을 통해서 처리를 해야하는데,
jQuery를 이용하면 반복문을 쓰지않아도 된다. 한줄짜리 코드로 반복문 처리 가능하게 함.
jQuery는 $로 시작한다. $라는 이름의 함수임.
jQuery를 이용해서 어떤 element, 어떤 태그의 css를 바꾸고싶을때
.css
$('body').css('color', color);
index.html
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>자바스크립트는 오늘날 가장 빠른 속도로 성장하는 언어중 하나 수많은 라이브러리가 쏟아진다.
어떤 라이브러리가 새로 생겼는지, 존재하는지 많이 알 수록 많은 일을 가능케 한다.
'STUDY > JavaScript' 카테고리의 다른 글
| [JavaScript-생활코딩] 30. 수업을 마치며 (0) | 2022.06.01 |
|---|---|
| [JavaScript-생활코딩] 29. UI vs API (0) | 2022.06.01 |
| [JavaScript-생활코딩] 27. 파일로 쪼개서 정리 정돈하기 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 26. 객체 활용 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 25. 객체 (0) | 2022.06.01 |