-
[WEB2 JavaScript] 28.함수의 활용 | 초코더JavaScript/생활코딩 2019. 11. 15. 18:28
오늘은 함수를 활용하여 예전에 짰던 코드를 리팩토링 해보는 시간을 가져볼게요.
우선 아래의 코드가 원본 코드입니다.
<html> <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; } }"> <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> <h2>JavaScript</h2> <p> JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA. </p> </html>먼저 onclick의 따옴표 안에 있는 코드를 따로 꺼내와서 함수로 만들어 볼게요.
이렇게 script태그 안으로 빼주고 nightDayHandler라는 함수명을 붙여주었습니다.
function nightDayHandler(){ 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; } } }그럼 onclick부분에서 저 함수를 불러와볼게요.
<input id="night_day" type="button" value="night" onclick="nightDayHandler();">하지만 이렇게 하고 실행하면 night와 day의 value값이 변하지 않습니다.
그 이유는 바로 this때문입니다. this는 현재 지정된 태그안에서만 실행되는데 코드를 바깥으로 뺐기 때문에 지금의 this가 가르치는 것은 바로 전역객체인 window입니다.
아무튼 태그안에서만 실행되는 this가 태그 바깥으로 빠져서 실행이 안된다 정도로만 이해하시면 될 것 같아요.
그럼 이제 이 코드를 변경해보겠습니다. 저 input태그를 가르치게 하기 위해 nightDayHandler의 인자로 this값을 주고, 함수의 매개변수로는 self라는 변수를 주겠습니다. 그리고 script태그 안의 this를 모두 self변수로 바꿔줄게요.
<input id="night_day" type="button" value="night" onclick="nightDayHandler(this);">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; } } }input태그들을 여러개 복사해도 아무런 문제가 발생하지 않을 것입니다.
이상으로 함수를 이용한 코드 리팩토링을 마칠게요~
'JavaScript > 생활코딩' 카테고리의 다른 글
[WEB2 JavaScript] 31. 객체와 반복문, 32. 객체프로퍼티와 메소드 | 초코더 (0) 2019.11.18 [WEB2 JavaScript ] 30.객체 쓰기와 읽기 | 초코더 (0) 2019.11.18 [WEB2 JavaScript] 25.함수, 26. 함수 : 매개변수와 인자, 27. 리턴 | 초코더 (0) 2019.11.15 [WEB2 JavaScript] 23.배열과 반복문의 활용 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 22. 배열과 반복문 | 초코더 (0) 2019.11.14