728x90
반응형
함수를 배웠으니까 활용도 해봐야지
이전에 만들었던 주야간모드 버튼을 함수화 하는 작업을 해볼 것이다.
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 = '#a9a9a9';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'black';
i = i + 1;
}
}
}
</script>
</head>
<body style="background-color: #a9a9a9;">
<!-- style="background-color: #a9a9a9;"
-->
<h3><a href="mainpage.html">엑스형</a></h3>
<input type="button" value="night" onclick="
nightDayHandler(this);
">
그냥 input의 onclick에 있던 값을 복사해서 함수의 기능으로 사용한것이 어찌보면 다이다.
하지만 argument와 parameter가 달라졌으니 이것을 유심히 볼 필요가 있다.
원래 input 태그 안에 존재했을때는 input태그의 value값을 바꿔주고 돌려주기 위해서 this라는 선택자를 사용했다.
하지만 이제 input태그 밖에 존재하기 때문에 this를 함수의 arument로 지정하고, parameter는 self라고 그냥 따로 써줬다.
그렇게 해서 원래 있던 this를 모두 parameter로 변경해주면, input 태그 밖에서 기능이 함수화 되어 있어도 똑같이 기능하는 코드를 짤 수 있게 된다.
사실 좀 이해하기 어려운 개념이긴한데 대충 어찌저찌하고 있다.
728x90
반응형