오늘은 .js 파일을 추가하여 코드 수정을 더 편하게 하는 방법을 배웠다.
이전에 사용했던 코드이다.
객체 개념을 활용하여 코드를 쉽게 수정하도록 했지만 .html 파일이 더 많아졌을 때 색깔을 수정해야 된다면 또 번거로워진다.
.js 파일을 추가하여 이를 해결할 수 있다.
<!DOCTYPE HTML>
<html>
<head>
<title>WEB - 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>
<link rel ="stylesheet" href="style.css">
</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>
<li><a href="3.html">JavaScript</a></li>
</ol >
<div>
<h2>JavaScript</h2>
<p>
//내용 생략
</p>
</div >
</div>
</body>
</html>
1. .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('powderblue');
}
else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value ='night';
Links.setColor('blue');
}
}
2. .html 파일에 <script src ="파일이름.js"></script> 코드 추가
<!DOCTYPE HTML>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script src="colors.js"></script>
<link rel ="stylesheet" href="style.css">
</head>
'소프트웨어 > JavaScript' 카테고리의 다른 글
| [JavaScript] jQuery 라이브러리 사용 방법 (0) | 2023.02.05 |
|---|---|
| [JavaScript] 객체 개념 활용 - 야간모드 예제 간결하게 (0) | 2023.02.04 |
| [JavaScript] 객체 기본 개념 예제 (0) | 2023.02.03 |
| [JavaScript] 함수 활용한 refactoring - 야간 모드 예제 간결하게 (0) | 2023.02.02 |
| [JavaScript] 웹 페이지 주간모드 야간모드 링크 색깔 변경 (0) | 2023.02.01 |