[JAVA_Back-End]

[JAVASCRIPT] 함수 본문

Programming/HTML+ CSS + JAVASCRIPT

[JAVASCRIPT] 함수

너굴위 2023. 8. 10. 12:40
728x90
반응형

[이전 포스팅 정리]

javascript

자료
자료형
변수/상수
연산자

1변수 -> 1개값

여러 개 값=>1변수/상수에 넣을 순 없는가? --> 배열(array)

 

제어
=>flowchart<=알고리즘(순서를 먼저 정하고 코딩하는 습관!)
입력 -> 처리 -> 출력
조건에 의한 분기-이진트리 (if, if~else,if~else if ~else, switch~case~default, 삼항연산자)
조건에 의한 반복-반복횟수 (for, while, do~while)
초기값, 조건식, 증가값 -> 반복횟수
*조건: 비교연산자나 논리연산자의 결과(true/false)

기타 break, continue, label

 

*중첩 예제) 별표, 구구단, html결합

 

[함수]

반복해서 사용되는 코드를 묶어놓은 후 사용함

변수와 제어문으로 이루어짐

사용자 정의 함수 - 개발자 정의한 함수

내장함수- js스크립트에 포함되어있는 함수 => 라이브러리

*사용법

형변환 

      문자열 => 숫자

      숫자 => 문자열

 

-> isFinite()   - isXXX =>true/false

-> isNaN()

함수의 선언 

- 선언적 함수

function 함수명 () {

       내용(변수, 제어문)

}

- 익명함수= 변수처럼 선언

 

함수의 호출

함수명();

 

* 함수작성법(단순 함수 선언)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">
         //함수의 선언을 헤드로 뽑아내어 분리한다(다른 html에도 참조하여 사용 가능하다.=>라이브러리 효과)
    function dofunc1() {
        console.log('dofunc1() 호출');
    }
    </script>
</head>
<body>
   <script type="text/javascript">

    //함수의 호출
        dofunc1();
        dofunc1();
        dofunc1();

   </script>
</body>
</html>

 

* 함수작성법2(매개변수 포함)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">
         //함수의 선언을 헤드로 뽑아내어 분리한다(다른 html에도 참조하여 사용 가능하다.=>라이브러리 효과)
    function dofunc(data1,data2=2,data3=3) {
        console.log('dofunc() 호출: ',data1);
        console.log('dofunc() 호출: ',data2);
        console.log('dofunc() 호출: ',data3);
    }
   
    </script>
</head>
<body>
   <script type="text/javascript">

   dofunc(10,20,30);
   dofunc();     //파라미터에 default값이 있으면 호출 파라미터에 아무것도 없어도 실행해서 값을 확인 가능
                //만약 3개의 파라미터 중 하나가 없다고 하면 나머지 2개의 default값만 출력한다.
               
    </script>
</body>
</html>

 

* 이를 활용한 간단한 계산기 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">
       //계산기 함수
       //calc(연산자, 값, 값)=> 연산자에 따라 연산결과 출력
       //calc('+',10,20) => 30

       function calc(lool, data1,data2){
        let result;
        if(lool=='+'){
            result=data1+data2;
        }
        else if(lool=='-'){
            result=data1-data2;
        }
        else if(lool=='*'){
            result=data1*data2;
        }
        else if(lool=='/'){
            result=data1/data2;
        }
        return result;
       }
   
    </script>

</head>
<body>
   <script type="text/javascript">

    console.log( calc('*',10,8));   //곱하기를 넣었을 때 연산이 이루어지면서 콘솔을 통해 결과가 나오게 된다.
               
    </script>
</body>
</html>

 

* 익명함수 (const에 함수를 정의해서 이름이 없는 함수를 변수에 지정해서 함수처럼 사용할 수 있음)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">
      //익명함수 (이름이 없음)
      //변수/상수의 값으로 함수 정의 입력할 수 있는 함수: 일급함수
      const doFunc1=function(){  //내용을 할당함
        console.log('doFunc1()호출');
      };

      const doFunc2= function(data1,data2){
        let sum =data1+data2;
        return sum;
      }
    </script>

</head>
<body>
   <script type="text/javascript">
               
        doFunc1();    //함수의 이름처럼 사용
        console.log(doFunc1);   //함수의 내용을 볼 수 있음 (값이 아닌 코딩한 내용)
        console.log(typeof doFunc1);

        console.log('결과: ',doFunc2(10,20));
    </script>
</body>
</html>

 

*화살표함수(lambda함수)를 사용한 함수의 선언+ html 버튼과 연결하여 함수를 호출

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">
      const doFunc1= function(){
        console.log('doFunc1()호출');
      };

      //화살표 함수(lambda 함수)
      const doFunc2= ()=> console.log('doFunc2()호출');
      //함수 정의를 더욱 간략히 적은 내용
     

      //lambda함수 파라미터 방식
      //인자가 1개 있을 때만 괄호를 생략할 수 있다.
      const doFunc3= data => console.log('doFunc3()호출: ',data);


      const doFunc4 = (data1, data2) => data1+data2;
    </script>

</head>
<body>
   <script type="text/javascript">
    doFunc1();
    doFunc2();
    doFunc3(10);
   
    console.log(doFunc4(10,20));
    </script>

    <!--html과 연동해서 호출
    이벤트:마우스 클릭-->
    <a href="javascript:doFunc1()">함수호출</a> <br /><br />
    <input type="button" value="함수호출" onclick="doFunc1()"/> <br /><br />    <!--타입을 버튼으로 지정해서 함수와 연결 가능-->
    <button onclick="doFunc1()">함수호출</button><br /><br />   <!--버튼 태그를 활용해서 함수와 연결 가능-->
</body>
</html>

 

*함수의 여러 선언방식을 이용하여 무작위로 입력한 3개의 수를 순서대로 출력하는 코드

=>정렬에 대한 지식이 아직 부족하기 때문에 각각의 경우의 수를 다 생각해서 if문을 돌렸다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">
      //세 개의 수를 입력받아서 순서적으로 출력하는 sortNumber함수 선언
      //sortNumber(1,3,2)
      //1. 선언  2. 익명  3. 화살표

      function sortNumber(num1,num2,num3){    //선언방식
        if(num1<num2&&num1<num3){
            if(num2>num3){
              return console.log(num1,num3,num2);
            }else{
              return console.log(num1,num2,num3);
            }
        }else if(num1>num2&&num1>num3){
          if(num2>num3){
            return console.log(num3,num2,num1);
          }else{
            return console.log(num2,num3,num1);
          }
        }else if(num1<num2&&num1>num3){
          if(num2>num3){
            return console.log(num3,num1,num2);
          }  
        }else if(num1>num2&&num1<num3){
          if(num2<num3){
            return console.log(num2,num1,num3);
          }
        }
      }
     
    </script>

  <script type="text/javascript">
    const sortNumber2 = function(num1,num2,num3){   //익명방식
      if(num1<num2&&num1<num3){
          if(num2>num3){
            return console.log(num1,num3,num2);
          }else{
            return console.log(num1,num2,num3);
          }
        }else if(num1>num2&&num1>num3){
            if(num2>num3){
               return console.log(num3,num2,num1);
            }else{
               return console.log(num2,num3,num1);
            }
        }else if(num1<num2&&num1>num3){
            if(num2>num3){
              return console.log(num3,num1,num2);
            }  
        }else if(num1>num2&&num1<num3){
            if(num2<num3){
              return console.log(num2,num1,num3);
            }
        }
 
    }
  </script>

  <script type="text/javascript">
    const sortNumber3 = (num1, num2,num3) => {    //화살표방식(lambda방식)
      if(num1<num2&&num1<num3){
          if(num2>num3){
            return console.log(num1,num3,num2);
          }else{
            return console.log(num1,num2,num3);
          }
        }else if(num1>num2&&num1>num3){
            if(num2>num3){
               return console.log(num3,num2,num1);
            }else{
               return console.log(num2,num3,num1);
            }
        }else if(num1<num2&&num1>num3){
            if(num2>num3){
              return console.log(num3,num1,num2);
            }  
        }else if(num1>num2&&num1<num3){
            if(num2<num3){
              return console.log(num2,num1,num3);
            }
        }
    }

  </script>
</head>
<body>
   <script type="text/javascript">

    sortNumber(4,2,1);
    sortNumber2(3,2,1);
    sortNumber3(5,3,2);
    </script>
</body>
</html>

 

* 웹사이트에 필요한 여러 팝업창과 처리방법

<script type="text/javascript">
      //출력, 입력
      //alert('경고창');    //웹페이지에 팝업을 띄워 경고창을 나타낼 수 있도록 함
      /*if(confirm('확인창')){   //true를 반환함
        console.log('확인입력');
      }else{
        console.log('기타입력');
      }
*/
      let value=prompt('질문','응답');   //value의 값은 응답값이다.
      if(value){
        console.log('확인: ',value);
      }else{
        console.log('취소');
      }

  </script>

 

 

* prompt를 이용한 구구단 출력코드

<script type="text/javascript">

      //단수를 입력받아서 구구단 출력
      //출력, 입력
      let value=prompt('확인하고 싶은 단수를 입력하세요','n단');   //value의 값은 응답값이다.
      let html= '<table border="1" width="200">';
      if(value){
        for(let i=1;i<=9;i++){
          html+='<tr>';
          html+= '<td align="center">'+parseInt(value)+'X'+i+'='+parseInt(value)*i+'</td>';
          html+='</tr>';
        }
      }
      html+='</table>';
      document.write(html);
  </script>

 

# setInterval()   /   setTimeout()

<script type="text/javascript">
     
        //주기적인 실행 - setInterval()  / clearInterval()
        //1번 실행  - setTimeout()  / clearTimeout()

        const work=function(){
          console.log('work함수 실행');
        };

        //work();
        // setTimeout(work, 3000);   //3초 후에 한번 실행시켜주고 끝남

        //setInterval(work,2000);   //2초마다 한번 계속적으로 실행시킴 (무한루프)
       
       /* setTimeout(function(){    //callback함수 - 시스템에 의해서 호출되는 함수
          console.log('작업 함수 실행');   //타임아웃 안에 함수를 정의해서 호출하도록 함
        },3000);
        */

          setInterval(function(){   //callback함수 인터벌버전
            console.log('인터벌 작업함수 실행');
          },2000);

  </script>

+) 인터벌 멈춤 코드

<script type="text/javascript">

    let intervalId=setInterval(function(){   //인터벌 함수를 실행
      console.log('작업 함수 실행');
    },1000);

    setTimeout(function(){   //타임아웃으로 한번 실행시키는 함수를 만들고 해당 함수 안에는 clearInterval을 넣어 생성한 인터벌을 정지시킨다.
      clearInterval(intervalId);
    },10000);
    </script>

 

# eval()  - 문자열의 프로그램화

<script type="text/javascript">
      //문자열-프로그램화
      let expr1='2+3';
      console.log(expr1);
      console.log(eval(expr1));  //2+3은 문자열이지만 eval이 붙으면서 덧셈이 가능해졌다.

      let expr2 = 'let num1=10;';   //해당 코드는 문자열로 적었지만 eval을 적어서 해당 문자열을 프로그램화 시켰다.
      expr2+='let num2=20;';
      expr2+='alert(num1+num2);';   //따라서 alert라는 팝업이 나올 수 있게 된다.

      eval(expr2);  
    </script>

 

[배열]

- 하나의 배열을 선언한 후 해당 공간을 나눠 사용하는 것 (아파트같이)

- 가능한 배열의 안쪽 내용은 같은 자료형으로 집어넣는 것이 좋음

배열.length: 배열의 길이 확인

index: 배열 내부 방의 순서

 

*배열의 선언방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">

  </script>
</head>
<body>
   <script type="text/javascript">
      //배열의 선언
      let arr1=[];        //값이 없는 배열
      let arr2=[273,32,104,234];      //값이 있는 배열

      console.log(arr2.length);    //배열의 구성요소에 관련된 출력을 볼 수 있음

      //배열 내부 방의 순서: index   [0,1,2,3]으로 구성됨
      console.log(arr2[2]);

      //배열의 마지막 방의 번호
      console.log(arr2[3]);
      console.log(arr2[arr2.length-1]);

      arr2[0]=100;
      arr2[1]=200;    //배열의 인덱스에 직접적으로 접근하여 값을 바꿔 출력 가능하다.
     
      console.log(arr2);

      // 전체 데이터 출력(전통적인 for)
      for(let i = 0; i<arr2.length;i++){    //배열의 크기까지 for문을 돌려서 배열 안에 있는 인덱스들의 내용을 출력한다.
        console.log(arr2[i]);
      }
     
      //전체데이터 출력(쉬운 for)
      for(let i in arr2){
        console.log(arr2[i]);
      }

      //배열의 인덱스값만 출력
      for(let i in arr2){
        console.log(i);
      }

      //배열의 데이터값만 출력
      for(let value of arr2){
        console.log(value);
      }



    </script>
   
</body>
</html>

 

* 배열의 주소참조 (중요)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">

  </script>
</head>
<body>
   <script type="text/javascript">
    //선언

    //값에 의한 참조
    //깊은복사(값을 복사)
    let num1=10;
    let num2=num1;
    console.log(num1);
    console.log(num2);

    num2=20;
    console.log(num1);
    console.log(num2);

    //주소에 의한 참조
    let arr1 = [1,2,3];
    //얕은복사
    let arr2=arr1;    //주소값을 복사하는 것임

    console.log(arr1[0]);
    console.log(arr2[0]);

    arr2[0]=10;       //따라서 arr2[0]의 값을 바꾸면 arr1[0]의 주소 또한 바뀌게 된다.
    console.log(arr1[0]);
    console.log(arr2[0]);

    </script>
   
</body>
</html>

 

 

*2차원 배열

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <script type="text/javascript">

  </script>
</head>
<body>
   <script type="text/javascript">
    //일차원 배열
    //다차원 배열(2차원 배열: 엑셀)

    let arr1=[[1, 2, 3], [4, 5, 6], [7, 8, 9]];
    let arr2=[
      [1,2,3],
      [4,5,6],
      [7,8,9]
    ];

  /*  console.log(arr2);    //행데이터가 있고 안에 열 데이터가 있는 구조
    console.log(arr2[0].length);   //0번째 인덱스의 행데이터만 출력됨
    console.log(arr2.length); */

    //전체데이터 출력
    //for~for
   /* for(let row=0; row<arr2.length;row++){
      for(let col=0; col<arr2[row].length;col++){
        console.log(arr2[row][col]);
      }
    }
    */

    for(let row in arr2){      //for in 형식으로 2차원 배열 정의하기
      for(let col in arr2[row]){
        console.log(arr2[row][col]);
      }
    }
   
 //가변배열
    let arr3 =[    //인덱스마다 배열의 크기가 달라도 괜찮음
      [1],
      [4,5],
      [7,8,9],
      [7,8,9,10]
  ];
  for(let row in arr3){      //for in 형식으로 2차원 배열 정의하기
      for(let col in arr3[row]){
        console.log(arr3[row][col]);
      }
    }
    </script>
   
</body>
</html>

 

번외) 3차원 배열의 출력

<script type="text/javascript">
    //삼차원 배열
    let arr1=[
      [ [1,2,3,4],
        [5,6,7,8]
      ],
      [
        [9,10,11,12],
        [13,14,15,16]
      ],
      [
        [17,18,19,20],
        [21,22,23,24]
      ]];
 
      //for문을 3개 사용하여 3차원 배열의 전체내용 출력
      for(let row=0; row<arr1.length;row++){
        for(let col=0; col<arr1[row].length;col++){
            for(let i=0; i<arr1[row][col].length;i++){
              console.log(arr1[row][col][i]);
            }
      }
    }
    </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 객체/배열 함수  (0) 2023.08.16
[JAVASCRIPT] 객체  (0) 2023.08.11
[JAVASCRIPT] 제어문 (if, else, else if, switch, while, for)  (0) 2023.08.09
[JAVASCRIPT] HTML 동작 구현  (0) 2023.08.08
[CSS]HTML 디자인2  (0) 2023.08.08
'Programming/HTML+ CSS + JAVASCRIPT' Related Articles more