WEB2 - JavaScript - 함수예고, 함수

함수예고 - https://opentutorials.org/course/3085/18882

함수 - https://opentutorials.org/course/3085/18851

함수의 기본 문법에 관한 예제이다.

---

<h1>Function</h1>

    <h2>Basic</h2>

    <ul>

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

    </ul>

    <h2>Parameter & Argument</h2>

    <h2>Return</h2>

---

매개변수(parameter)와 인자(argument)

매개변수와 인자는 아래와 같은 개념으로 생각하면 된다.

입력 : 매개변수

출력 : 인자

---

<h1>Function</h1>

    <h2>Basic</h2>

    <ul>

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

    </ul>

    <h2>Parameter & Argument</h2>

    <script>

      function onePlusOne(){

        document.write(1+1+'<br>');

      }

      onePlusOne(); //기본적인 함수의 활용예제이다.

      function sum(left, right){     //sum함수는 입력값에 따라 함수의 결과가 달라진다. 매개변수는 left와 right이다.

        document.write(left+right+'<br>');

      }

      sum(2,3); // 5, 2와3은 인자이다.

      sum(3,4); // 7, 3과4는 인자이다.

    </script>

    <h2>Return</h2>

---

리턴

---

<h1>Function</h1>

    <h2>Basic</h2>

    <ul>

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

    </ul>

    <h2>Parameter & Argument</h2>

    <script>

      function onePlusOne(){

        document.write(1+1+'<br>');

      }

      onePlusOne();

      function sum(left, right){

        document.write(left+right+'<br>');

      }

      function sumColorRed(left, right){    //위의 코드에서 추가된 부분

        document.write('<div style="color:red">'+left+right+'</div><br>');

      }

      sum(2,3); // 5

      sumColorRed(2,3); // 23, 연산이 되지 않고 그대로 나온다.

      sum(3,4); // 7

    </script>

    <h2>Return</h2>

    <script> //위의 코드에서 추가된 부분

      function sum2(left, right){

        return left+right;  //return을 통해서 출력함으로써 다양한 용도로 함수를 사용할 수 있게 된다.

      }

      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>

---

[결과화면]

맨 아래의 script 코드에 대한 결과화면이다.