본문 바로가기
블록체인 및 경제/웹프로그래밍

[JS] 16. 함수의 활용

by kimsfamily 2020. 10. 21.

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 


 

이번시간에는 함수 첫번째 시간에 보여줬던 예제에 대해서 작성해보겠습니다.

 

기존에 인풋태그에 있는 내용을 head로 아래와 같이 옮겨옵니다.

<script>
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;
    }
  }
}
</script>

그리고 input태그에는 위의 함수를 적습니다.

  <input type="button" value="night" onclick="
  nightDayHandler();
  ">

 

그리고 결과를 확인해보니? 뭔가 이상합니다.

바뀌는것 같긴한데, night도 day로 안바뀌네요!!

왜 그럴까요?

 

문제는 작성된 함수에서 사용된 this가 함수 안에서만 사용되고 input에서는 사용될 수 없기때문입니다. 사용되는 범위가 다른거죠.

그래서 아래와 같이 수정이 필요합니다.

 

일단 먼저 input 태그에 this값을 인자값으로 넣어줍니다.

이렇게요.

  <input type="button" value="night" onclick="
  nightDayHandler(this);
  ">

그리고 함수에서 사용되는 매개변수를 self로 작성합니다.

input태그에서 this값이 함수에서 매개변수 self로 적용되는겁니다.

그리고 nightDayHandler 함수의 this값을 self로 바꾸어 줍니다.

<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>

 

그리고 결과를 볼까요?

네, 아래와 같이 정상적으로 바뀌는걸 확인할 수 있습니다.

정상적으로 동작하는 함수를 만들었으니, 버튼을 아래와 같이 하나 더 만들어 봅니다.

 

그리고 결과를 확인해봅니다. 잘 동작하는걸 확인할 수 있습니다.

 

함수는 이렇게 활용하시면 됩니다.

감사합니다.

반응형

댓글0