- 한 파일에 Javascript 코드를 모두 넣게 되면 유지보수, 관리가 힘들어진다.
- js 파일을 따로 생성하여 관리한다.
<!-- html과 js 연결 -->
<script scr="파일명.js"></script>
- 장점
1. Javascript 코드를 한 번에 관리할 수 있다.
2. 코드를 재사용할 수 있다. > 유지보수 편리
3. 코드가 명확해지고 가독성이 좋아진다.
4. js 파일을 한 번 다운로드해서 캐시에 저장해두면 다운로드 없이 사용할 수 있기 때문에 더 빨리 페이지를 표시할 수 있다.
- 파일 분리 전
~ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
<script>
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i++;
}
}
}
function nightDayHandler(self){
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>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>WEB</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit exercitationem soluta aperiam, quisquam alias provident temporibus ut odio modi corporis fugit aliquam laboriosam, suscipit nostrum! Eligendi repellat inventore neque excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore fuga dolorem optio inventore velit illum exercitationem sint. Corrupti commodi, libero laudantium tempore obcaecati ipsum excepturi fuga similique nisi illo laboriosam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptas tempore dolores voluptate eligendi minus ratione eaque, dolorum dicta, excepturi aut distinctio obcaecati facilis reprehenderit dolore neque culpa, dolor quasi?
</p>
</body>
</html>~ 1.html
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<script>
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i++;
}
}
}
function nightDayHandler(self){
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>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>HTML</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eos quibusdam sapiente nam placeat. Quisquam dicta soluta ex, doloremque atque vero veniam eum illo natus sapiente obcaecati. Porro, consequuntur exercitationem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. In beatae perspiciatis architecto dolorem voluptas ea cupiditate aut facilis id expedita ducimus repellat quam nobis culpa amet, voluptate sunt aliquid porro?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore amet voluptas deserunt ad quibusdam ea neque pariatur, consequatur officiis optio! Omnis, corrupti natus! Voluptatibus, velit sapiente? Dolore vel maxime modi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quas earum aspernatur tempore ab, delectus corporis numquam temporibus quam accusantium nobis neque recusandae esse architecto unde atque at cumque reprehenderit.
</p>
</body>
</html>~2.html
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<script>
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i++;
}
}
}
function nightDayHandler(self){
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>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>CSS</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat doloremque, molestias exercitationem dignissimos accusamus repudiandae veniam distinctio nemo perferendis consequatur quod quos beatae ullam, reprehenderit impedit ipsa rerum reiciendis quam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam adipisci ipsam sit, a repellat nostrum ex reiciendis quasi fugit porro neque earum dolore impedit ducimus error velit ipsa sapiente laborum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque sapiente saepe sequi voluptatibus at reiciendis eligendi illo, nihil aut ratione quaerat eius officiis dolor magni ipsa quibusdam qui incidunt ut!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit excepturi, totam cumque, cupiditate voluptate dolorem quos nobis, in beatae laudantium provident fugiat dolorum rerum molestias assumenda nihil consectetur pariatur voluptatum!
</p>
</body>
</html>~ 3.html
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script>
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i++;
}
}
}
function nightDayHandler(self){
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>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>JavaScript</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, explicabo! Id beatae perferendis esse fugit consequatur illo, quae quasi eum est labore quidem numquam temporibus dignissimos soluta dolore dolorum asperiores?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate necessitatibus autem totam ipsa modi est quam sint animi minima. Amet aliquam excepturi consectetur iure repellendus veritatis possimus voluptatem iusto assumenda?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo pariatur, sed dignissimos, quas sequi vero porro perspiciatis voluptatibus accusantium placeat ex praesentium maiores vitae voluptate iure ratione debitis consequuntur labore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi distinctio consequatur amet quos voluptate eligendi aliquid! Nisi cupiditate, quae voluptas animi fuga quasi sapiente veniam ut minima recusandae vero aliquam!
</p>
</body>
</html>- 파일 분리 후
~ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
<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);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>WEB</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit exercitationem soluta aperiam, quisquam alias provident temporibus ut odio modi corporis fugit aliquam laboriosam, suscipit nostrum! Eligendi repellat inventore neque excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore fuga dolorem optio inventore velit illum exercitationem sint. Corrupti commodi, libero laudantium tempore obcaecati ipsum excepturi fuga similique nisi illo laboriosam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptas tempore dolores voluptate eligendi minus ratione eaque, dolorum dicta, excepturi aut distinctio obcaecati facilis reprehenderit dolore neque culpa, dolor quasi?
</p>
</body>
</html>~ 1.html
<!DOCTYPE html>
<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);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>HTML</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga eos quibusdam sapiente nam placeat. Quisquam dicta soluta ex, doloremque atque vero veniam eum illo natus sapiente obcaecati. Porro, consequuntur exercitationem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. In beatae perspiciatis architecto dolorem voluptas ea cupiditate aut facilis id expedita ducimus repellat quam nobis culpa amet, voluptate sunt aliquid porro?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore amet voluptas deserunt ad quibusdam ea neque pariatur, consequatur officiis optio! Omnis, corrupti natus! Voluptatibus, velit sapiente? Dolore vel maxime modi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quas earum aspernatur tempore ab, delectus corporis numquam temporibus quam accusantium nobis neque recusandae esse architecto unde atque at cumque reprehenderit.
</p>
</body>
</html>~ 2.html
<!DOCTYPE html>
<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);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>CSS</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat doloremque, molestias exercitationem dignissimos accusamus repudiandae veniam distinctio nemo perferendis consequatur quod quos beatae ullam, reprehenderit impedit ipsa rerum reiciendis quam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam adipisci ipsam sit, a repellat nostrum ex reiciendis quasi fugit porro neque earum dolore impedit ducimus error velit ipsa sapiente laborum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque sapiente saepe sequi voluptatibus at reiciendis eligendi illo, nihil aut ratione quaerat eius officiis dolor magni ipsa quibusdam qui incidunt ut!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit excepturi, totam cumque, cupiditate voluptate dolorem quos nobis, in beatae laudantium provident fugiat dolorum rerum molestias assumenda nihil consectetur pariatur voluptatum!
</p>
</body>
</html>~ 3.html
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - JavaScript</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);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>JavaScript</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, explicabo! Id beatae perferendis esse fugit consequatur illo, quae quasi eum est labore quidem numquam temporibus dignissimos soluta dolore dolorum asperiores?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate necessitatibus autem totam ipsa modi est quam sint animi minima. Amet aliquam excepturi consectetur iure repellendus veritatis possimus voluptatem iusto assumenda?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo pariatur, sed dignissimos, quas sequi vero porro perspiciatis voluptatibus accusantium placeat ex praesentium maiores vitae voluptate iure ratione debitis consequuntur labore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi distinctio consequatur amet quos voluptate eligendi aliquid! Nisi cupiditate, quae voluptas animi fuga quasi sapiente veniam ut minima recusandae vero aliquam!
</p>
</body>
</html>~ colors.js
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i++;
}
}
}
function nightDayHandler(self){
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');
}
}'클라이언트 > JavaScript' 카테고리의 다른 글
| 자바스크립트(JavaScript) 이벤트 (0) | 2023.04.21 |
|---|---|
| [자바스크립트(JavaScript)] 상속 (0) | 2023.04.09 |
| [자바스크립트(JavaScript)] 객체 (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 함수 (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 제어문(조건문, 반복문) (0) | 2023.03.19 |
