동작하는 내용은 똑같지만 코드를 효율적으로 하는것을 리팩토링이라 하고
그 중요한 수단 중 하나가 함수이다
버튼만들어둔 코드를 효율적으로 바꿔보자
input버튼이 여러개가 중복해서 등장한다면 나쁜일이 생길 수 있다
js코드를 카피해서 head태그 안쪽에 script태그를 만든 뒤 붙여넣기 한뒤
웹브라우저에게 이 코드들이 nightDayHandler이라는 이름의 함수다 라는 것을 알려주자
function nightDayHandler(self){js코드}그리고 nightDayHandler(); 이것을 원래 코드가 있던 곳에 붙여넣기 하면 된다
<h1>WEB</h1>
<input type="button" value="night" onclick="
nightDayHandler();
">그리고 실행을 해보면 실행이 되지 않는다
this라고 하는 값은 onclick이라는 이벤트 안에서 this는
이벤트가 소속된 태그를 가리키도록 약속되어있는데
우리가 독립된 함수를 만들게 되면 함수에서의 this는 더 이상 input버튼이 아니고 전역객체를 가리키게 된다 웹브라우저에서는 윈도우가 된다
this의 값을 input을 가리키게 하기 위해서 nightDayHandler가 실행될때
this값을 주고 이렇게 되면 this값은 nightDayHandler가 실행될때 여기로 들어오게 되는 매개할때 쓰는변수 매개변수가 된다
이름을 self라고 정해주게되면 this였던 아이들을 self로 변경해줘야한다
이렇게 하게되면 제대로 작동하게 된다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html css</title>
<link rel="stylesheet" href="style.css">
<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>WEB</h1>
<input id=night_day" type="button" value="night">
</body>
</html>
:)