34. 파일로 쪼개서 정리 정돈하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>WEB1 - Index</title>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
nightDayHandler(this)" />
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>WEB</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Exercitationem accusantium quibusdam voluptatem
consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
</p>
</body>
</html>let Links = {
setColor: function(color) {
let alist = document.querySelectorAll('a');
let i = 0;
while (i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}
}
}
let Body = {
setColor: function(color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color) {
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler(self) {
let target = document.querySelector('body'); // 변수 사용
if (self.value === 'night') { // this 사용해서 코드 간결하게
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.setColor('yellow');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}
<script src="colors.js"></script>모든 페이지에 script 태그만 넣으면 끝.
js 파일에서 컬러를 수정하면, 모든 페이지에 적용이 된다.
- 파일 이용 장점
- JavaScript 코드를 한 번에 관리할 수 있음
- 코드를 재사용할 수 있음
- 동시에 코드 수정할 수 있어서 유지보수 편리
- 코드가 명확해지고 가독성 좋아짐
- 파일을 분리하면 캐시의 입장에서도 장점을 가짐
- colors.js 파일을 한 번 다운로드해서 캐시에 저장해두면 다운로드 없이 사용할 수 있기 때문에 더 빨리 페이지 표시할 수 있음
35. 라이브러리와 프레임워크
- 라이브러이와 프레임워크 모두 다른 사람들과 협력하는 모델임
- 라이브러리
- 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것
- 우리가 필요한 부분을 가져와서 사용하는 것
- 프레임워크
- 만들고자 하는 프로그램의 종류에 따라서 공통적인 부분을 미리 만들어놓는 것. 필요한 부분만 약간 수정해서 사용할 수 있는 것
- 직접 프레임워크 안으로 들어가서 디테일을 수정해서 사용하는 것
- 라이브러리
- JavaScript 유명 Library는 jQuery
- cdn 가져와서 head 안에 넣는다.
- 반복문 사용하지 않고도 모든 태그를 한 번에 처리할 수 있음
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>let Links = {
setColor: function(color) {
// let alist = document.querySelectorAll('a');
// let i = 0;
// while (i < alist.length) {
// alist[i].style.color = color;
// i = i + 1;
// }
$('a').css('color',color);
}
}
36. UI vs API
- UI = User Interface
- 사용자들이 시스템을 제어하기 위해서 조작하는 장치
- API = Application Programming Interface
- 프로그래머들이 사용하는 조작 장치
- alert는 API
37. 수업을 마치며
- document
- DOM (Document Object Model
- window
- ajax
- cookie
- offline web application
- webRTC
- speech
- webGL
- webVR
부스트코스 [자바스크립트의 시작] 강의 공부 기록
300x250
'LEARN > JAVASCRIPT' 카테고리의 다른 글
| [JS] JavaScript 객체 고급 (0) | 2022.03.23 |
|---|---|
| [JS] JavaScript 객체 기본 (0) | 2022.03.20 |
| [JS] JavaScript 객체 소개 (0) | 2022.03.18 |
| [JS] Javascript 함수 (0) | 2022.03.17 |
| [JS] Javascript 제어문 (0) | 2022.03.16 |
