함수와 객체를 사용하여 리펙토링하자
*객체란 이름과 값으로 구성된 속성의 정렬되지 않은 집합<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value==='night') {
target.style.backgroundColor='black';
target.style.color='white';
this.value='day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value='night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
}
">버튼에 동작으로 짜여진 현제 코드 이다.
자바스크립트의 함수,객체를 사용해 보겠다.
위코드를 head 태그 안으로 넣고 함수를 적용하겠다.
<script>
function nightDayHandler (self) {
var target = document.querySelector('body');
if(self.value==='night') {
target.style.backgroundColor='black';
target.style.color='white';
self.value='day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value='night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="nightDayHandler(this)">this 는 onclick 이 소속되어있는 태그를 가르키도록 되어있었는데 nigthDayHandler 라는 독립된 함수를 만들었으니 night 를 가르기케 된다.input 을 가르키게 하기 위해서 매개변수를 바꿔줘야 한다.
onclik 의 nigthDayHandler 에 this 를 넣고 위 함수에는 self 를 넣었다.
<script>
function setColor (color) {
document.querySelector('body').style.color = color;
}
function setBackgroundColor (color) {
document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler (self) {
if(self.value==='night') {
setBackgroundColor('black');
setColor('white');
self.value='day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
setBackgroundColor('white');
setColor('black');
self.value='night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="nightDayHandler(this)">함수로 color, backgroundcolor 을 만들어 주고 변경 target 을 삭제 하였다.
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}그리고 Body 라는 객체에 color, backgroundcolor 의 함수들을 넣었다. 이때 중요한것은 setColor 과 setBackgroundColor 사이에 , 잊지말자. 객체의 property 사이는 , 로 구분된다.
<script>
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler (self) {
if(self.value==='night') {
Body.setBackgroundColor('black');
Body.setColor('white');
self.value='day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value='night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>Body 라는 객체 안으로 들어갔으니 표현할때도 객체를 표현해 줘야 한다. setColor, setBackgroundColor 앞에 Body 를 붙여 주었다.
<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) {
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>똑같이 alist 도 변경하였다. 이렇게 해서 함수와 객체를 이용하여 동작은 똑같지만 조금 간결하고 사용에 용이한 코드를 작성하였다.
newb