본문 바로가기
JavaScript/생활코딩 - JavaScript

자바스크립트 기초 개념 - 함수 #14

eastperson 2020. 10. 12. 22:08 
<script>
        function two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-2</li>');
        }
        document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
        two();
</script>​
        while(i < alist.length){
            console.log(alist[i]);
            alist[i].style.color = 'powderblue';
            i = i + 1;
      }

아까 본 이 함수에서 powderblue를 쉽게 바꾸고 싶다. 하지만 우리가만든 '밤' '낮' toggle 버튼의 함수의 길이는 대략

<input type="button" value="밤" onclick="
  var target = document.querySelector('body');
  var target2 = document.querySelector('a');
  var target3 = document.querySelector('#grid');
  var target4 = document.querySelector('#member');
    if(this.value === '밤') {
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      target2.style.color = 'blue';
      target3.style.color = 'green';
      target4.style.color = 'red';
      this.value = '낮';


      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        console.log(alist[i]);
        alist[i].style.color = 'blue';
        i = i + 1;
      }
      } else {
        target.style.backgroundColor= 'white';
        target.style.color = 'black';
        target2.style.color = 'black';
        target3.style.color = 'black';
        target4.style.color = 'black';
        this.value = '밤';
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            console.log(alist[i]);
            alist[i].style.color = 'powderblue';
            i = i + 1;
      }
    }
  ">

이정도다. 토글을 매 페이지에 쓰고도 싶고, 또는 수정을 하고 싶은데, 페이지가 수십, 수백개면 문제가 생긴다.

 

이 문제를 구원해주는 역할을 하는 것이 함수이다.

 

위의 input 안에 있는 내용을 복사해서 <head>에 배치하자

<script>
    function nightDayHandler(self){
      var target = document.querySelector('body');
      var target2 = document.querySelector('a');
      var target3 = document.querySelector('#grid');
      var target4 = document.querySelector('#member');
        if(self.value === '밤') {
          target.style.backgroundColor = 'black';
          target.style.color = 'white';
          target2.style.color = 'blue';
          target3.style.color = 'green';
          target4.style.color = 'red';
          self.value = '낮';


          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
            console.log(alist[i]);
            alist[i].style.color = 'blue';
            i = i + 1;
          }
          } else {
            target.style.backgroundColor= 'white';
            target.style.color = 'black';
            target2.style.color = 'black';
            target3.style.color = 'black';
            target4.style.color = 'black';
            self.value = '밤';
            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i < alist.length){
                console.log(alist[i]);
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }
          }
        }
  </script>

첫 줄에 

    function nightDayHandler(self){

를 입력하고 아까의 코드를 중괄호로 넣는다.

 

이 안에 원래 있던 'this'는 self로 수정하고 함수뒤 괄호에 넣는다.

 

이후 

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

버튼에다가 함수 하나만 넣어고 self로 있던 부분을 this로 바꿔주면 끝이난다.

엄청나게 효율성을 챙길 수 있다.

 

또한, 생성한 함수의 내용을 바꾸면 그 함수를 사용한 모든 페이지의 속성과 기능이 수정된다.

또한, 그 함수를 사용하면 그 함수를 사용한 기능이 동일하다는 것을 알 수 있다.

또한, nightDayHandler라는 함수의 이름으로 기능을 알 수 있다. 가독성을 늘려주는 것이다.

 

반복문은 규칙이 없을 시 사용하기 어렵다. 연속적이지 않는 경우. 함수가 필요하다.

      <script>
        document.write('<li>1</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
        document.write('<li>3</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
      </script>

이 코드를

<script>
        function two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-2</li>');
        }
        document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
        two();
</script>

이렇게 만들었다.

 

two()는

 

two는 함수의 이름이고 ()는 함수를 실행하고 있구나로 작성된다. 는 것을 알 수 있다.

 

> Parameter

 

자판기가 있다. 물건이 하나 있는 자판기라면 하나의 제품만 나올 수 있다. 하지만 물건이 여러개 있는 자판기라면 원하는 버튼을 누르면 해당하는 제품을 나올 수 있도록 되어있으면 더 좋을 것 같다.

 

이렇게 자판기(함수)에 원하는 물건의 버튼을 눌러(입력) 원하는 물건을 받아내는(출력) 것이 함수의 기능이다.

 

함수가 어떤 효용이 있고 문법이 어떻게 되어있는지 확인해보자.

 

Parameter(매개변수) = Argument(인자)

    <h2>Parameter & Argument</h2>
      <script>
        function onePlusOne() {
            document.write(1+1);
        }
        onePlusOne();
      </script>

이렇게 1+1를 함수로 만들 수 있다.

 

하지만 이 함수는 언제나 똑같이 동작하는 함수이다. 물건이 1개밖에 없는 자판기와 다름없다. 

        sum(2,3); // 5
        sum(3,4); // 7

만약에 이와 같이 하나의 함수로 입력값에 따라 다른 출력값을 만들 수 있다면 얼마나 좋을까.

        function sum(left, right) {
          document.write(left + right + '<br>');
        }
        sum(2,3); // 5
        sum(3,4); // 7

이렇게 만들어주자. 


    <script>
        function onePlusOne() {
            document.write(1+1 + '<br>');
        }
        onePlusOne();
        function sum(left, right) {
          document.write(left + right + '<br>');
        }
        sum(2,3); // 5
        sum(3,4); // 7
      </script>

이렇게 작성된다.

 

> 리턴(return)

 

기본 연산자는 기본적으로 return값을 갖는다.

 

이전에 작성했던

        function sum(left, right) {
          document.write(left + right + '<br>');
        }

좌항과 우항을 구하고 <br>까지 더해준 다음 화면에다가 써주는 역할까지 한다.

 

그런데 우리는 더해진 결과를 다양한 방법으로 사용해야 한다면,  가령 빨간색을 입히고 싶다면,

        function sumColorRed(left, right) {
          document.write('<div style="color:red">'left + right + '</div>');
        }

        sumColorRed(2,3)

이렇게 해야한다. 그런데 또 이러한 함수를 다양하게 활용하려면 고생을 해야한다.

    <h2>Return</h2>
      <script>
        function sum2(left, right) {
          return left+right;
        }
          document.write(sum2(2,3) + '<br>');
          document.write('<div style = "color:red">' + sum2(2,3) + '</div>');
          document.write('<div style = "font-size:3rem;">' + sum2(2,3) + '</div>');
      </script>

이렇게 sum2()가 구현한 반환값을 다양하게 활용할 수 있게 된다.

 

함수의 활용

  <script>
    function nightDayHandler(){
      var target = document.querySelector('body');
      var target2 = document.querySelector('a');
      var target3 = document.querySelector('#grid');
      var target4 = document.querySelector('#member');
        if(this.value === '밤') {
          target.style.backgroundColor = 'black';
          target.style.color = 'white';
          target2.style.color = 'blue';
          target3.style.color = 'green';
          target4.style.color = 'red';
          this.value = '낮';


          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
            console.log(alist[i]);
            alist[i].style.color = 'blue';
            i = i + 1;
          }
          } else {
            target.style.backgroundColor= 'white';
            target.style.color = 'black';
            target2.style.color = 'black';
            target3.style.color = 'black';
            target4.style.color = 'black';
            this.value = '밤';
            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i < alist.length){
                console.log(alist[i]);
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }
          }
        }
  </script>
<input type="button" value="밤" onclick="
    nightDayHandler();
  ">

이렇게 작성하면 화면 버튼의 value가 변화지 않는다. 

 

이유는 onclick 이벤트 안에서의 this는 onclick 이벤트가 들어있는 태그<input>를 지칭하게 되는데,

 

함수안에 쓰여진 this는 전역객체를 가르키게 된다. 그래서 그 this의 값을 <input>을 가르키게 하기 위해서 매개변수를 준다.

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

this 값을 넣어준다.

 

그리고 위의 함수에서

<script>
    function nightDayHandler(self){
      var target = document.querySelector('body');
      var target2 = document.querySelector('a');
      var target3 = document.querySelector('#grid');
      var target4 = document.querySelector('#member');
        if(self.value === '밤') {
          target.style.backgroundColor = 'black';
          target.style.color = 'white';
          target2.style.color = 'blue';
          target3.style.color = 'green';
          target4.style.color = 'red';
          self.value = '낮';




          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
            console.log(alist[i]);
            alist[i].style.color = 'blue';
            i = i + 1;
          }
          } else {
            target.style.backgroundColor= 'white';
            target.style.color = 'black';
            target2.style.color = 'black';
            target3.style.color = 'black';
            target4.style.color = 'black';
            self.value = '밤';
            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i < alist.length){
                console.log(alist[i]);
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }
          }
        }
  </script>

this가 있던 것을 self로 바꿔준다.

 

그러면 문제없이 실행된다.

저작자표시 (새창열림)

'JavaScript > 생활코딩 - JavaScript' 카테고리의 다른 글

자바스크립트 기초 개념 - 객체 프로퍼티와 메서드 #16  (0) 2020.10.14
자바스크립트 기초 개념 - 객체 #15  (0) 2020.10.13
자바스크립트 기초 개념 - 배열과 반복문 #13  (0) 2020.10.11
자바스크립트 기초 개념 - 반복문 #12  (0) 2020.10.10
자바스크립트 기초 개념 - 배열 #11  (0) 2020.10.09

'JavaScript/생활코딩 - JavaScript' Related Articles

티스토리툴바