파일로 쪼개서 정리 정돈하기 - WEB2 - JavaScript (opentutorials.org)
파일로 쪼개서 정리 정돈하기 - WEB2 - JavaScript
파일로 쪼개서 정리 정돈하기 2017-11-29 10:32:18
opentutorials.org
정리정돈의 도구들 : 함수,객체
함수와객체보다 더 큰 정리정돈의 도구 (가장 큰 정리정돈의 도구)이자
서로 연관된 코드들을 파일로 묶어서 그룹핑 하는 것. = 파일로 쪼개서 정리 정돈하기
이것을 사용하면 웹페이지가 아무리 많아도 많은 웹페이지들을 감당할 수 있게된다.
1.html
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>2.html
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>3.html
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script>
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 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');
}
}
</script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>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 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('white');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}index.html
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>1. colors.js 라는 새로운 파일을 만들고. = 파일명.js로 저장
2. 모든웹페이지에 공통적으로 들어가야 할 공통된 태그를 스크립트 태그<script> 를 제외하고 카피 한 후 붙여놓는다.
3. 그다음에 적용할 웹사이트에 <script src ="colors.js"></script> 라고 입력하면, .js 파일이 실시간으로 적용된다.
*여기서 src란? source의 약자
+ 적용된 파일 확인 방법 : 사이트에서 검사> 네트워크 > 웹페이지를 화면에 표시하기 위해 로딩된 파일들이 확인된다.
파일 쪼개기의 이점:
파일이 많아지면 그만큼 브라우저의 접속량이 늘어서 좋지 않다. 하지만 일단 한 번 접속한 파일은 컴퓨터에 브라우저가 미리 저장해놓는다. (cache)
다음 접속에선 네트워크를 통하지 않고 다운로드 받은 파일을 불러온다. 네트워크 트래픽도 사용자 입장에선 줄고, 서버 입장에선 비용도 절감할 수 있다. 그래서 실질적으로 파일로 쪼개서 저장하는 게, 코딩을 정리정돈하면서 작성할 수도 있고 웹페이지에 자신이 만든 무언가를 빠르게 로딩할 수 있다.
'STUDY > JavaScript' 카테고리의 다른 글
| [JavaScript-생활코딩] 29. UI vs API (0) | 2022.06.01 |
|---|---|
| [JavaScript-생활코딩] 28. 라이브러리와 프래임워크 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 26. 객체 활용 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 25. 객체 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 24. 객체예고 (0) | 2022.06.01 |