JS FUNCTION

03 Nov 2020 in Programming on JavaScript

함수는 자주 사용하는 코드를 하나로 묶어 놓은 것.
함수의 종류는 사용자 정의 함수, 내장함수가 있다.
사용자 정의 함수 :
- 함수를 정의 : 사용자가 함수를 정의해 준다.
```
function 함수명(변수명)  //매개 변수에는 var 안 써준다.
{
    실행코드;
    [return 식]; //생략 가능
}
```
function 내에 선언된건 var을 쓰면 지역변수, 안쓰면 전역 변수. function 외부에 쓴거는 var 붙이던 안 붙이던 전역변수다.
- 함수를 호출 : 함수명으로 함수를 불러줘야지 실행을 된다. 정의만 해놓고 가만히 내비두면 아무것도 안한다.
내장 함수 : js에 내장된 함수. alert(), confirm(), prompt() 등이 있다.

일급함수

function add(a,b){
	var c = a+b;
    console.log("c="+c);
    return c;}

var special = add;//일급함수는 함수를 데이터로 처리한다.
var result = special(10,11);

익명함수

이름이 없는 함수. 이름이 없어서 변수에 넣어서 사용해야한다.
js에서 흥미로운 점은 function 도 data라는 점이다. 그래서 변수에 집어넣을 수 있다.

//변수에다 함수(데이터)를 넣은 것이다.
var k = function(x,y){
    var z= x*y;
    return z;
};

선언적 함수

이름이 있는 함수. 다음과 같이 선언하고 사용한다.

function 함수명(){
	//code
}

//example
function k(x,y){
    var z= x*y;
    return z;
}

익명 함수와 선언적 함수 비교

선언적 함수는 아래와 같이 function 을 정의하기 전 호출해도 문제가 생기지 않는다.

var result = k(10,10); //오류 안난다.
var k = function(x,y){
    var z= x*y;
    return z;
};// 웹 브라우저는 선언적 함수부터 읽는다.

왜냐하면, 웹브라우저는 script 내부의 내용을 순서대로 읽어서 실행하기 전, 선언적 함수부터 읽기 때문이다.

그러나 익명함수의 경우 function 을 정의하기 전 호출하면 문제가 생긴다.

var result = k(10,10); //오류난다.
var k = function(x,y){
    var z= x*y;
    return z;
};

선언적 함수가 아니라서 차례대로 실행이 되기 때문에, 첫줄에 k()는 아직 생성되지 않은 함수인 것이다.

매개변수

js는 함수를 생성할 때 함수에서 지정한 매개변수 개수를 딱히 안 지켜도 오류가 안 난다.

alert("매개변수1", "매개변수2");

alert 함수는 매개변수를 하나만 사용할 수 있기때문에, 두번째 매개변수는 알아서 무시한다.

또한 매개변수를 정해진 수보다 들 선언하면 알아서 undefined로 입력된다.

Array의 경우, 매개변수 개수에 따라서 동작이 다르다.

Array(); // 빈 배열을 만든다.
Array(number);//number개의 방을 가지는 배열을 만든다.
Array(data1, data2...); //매개 변수를 배열로 만든다.

jsAry

가변 인자 함수

매개변수의 개수가 변할 수 있는 함수를 의미한다. 또한, 매개변수를 선언된 형태와 다르게 사용했을 때, 매개변수를 모두 활용하는 함수를 의미한다. (alert처럼 두번째 매개변수를 무시하고 그러면 가변인자 함수는 아니다.)

function myFunc(){
    var count = arguments.length;
    //arguments.length  하면 인자의 길이, arguments는 배열처럼 동작하는 애다.
    alert("매개변수 : "+ count);}
myFunc(1,2,5); //3
myFunc(1,2,5,2,3); //5

arguemnts는 array처럼 동작한다.

function myFunc(){
    var count = arguments.length;
    var result = 0;
    for(var i in arguments){
        result += arguments[i];
      }
    alert("매개변수 : "+ result);
    return result;
}
myFunc(1,2,5)

내부함수

다른데서 범용적으로 사용되지 않고 특정 함수 내부에서만 사용될 거 같을 때 사용한다.
프로그램의 규모 커질수록 다른 사람과 같이 개발하게 된다. 이때 함수명등 충돌이 생길 수 있는데, 그것을 방지할 수 있게 도와준다.

    function cylinder(radius, height){
      function area(radius){
        return radius*radius*Math.PI;
      }
      return area(radius)*height;
    }
    alert("원기둥의 체적 :"+ cylinder(5,4))

콜백함수

매개변수로 전달하는 함수를 콜백 함수라고 한다.

    function sample(a){
      for(var i=0;i<10;i++){
        a();
      }
    }
    var x = function(){
      document.write("hello world"+"<br>")
    }

    sample(x);//x가 여기서 콜백 함수인 듯 하다.

내장함수

js가 자체적으로 제공하는 함수.

타이머함수

setTimeout(function, millisecond); // 일정 시간 후 함수 한번 실행
setInterval(function, millisecond); // 일정 시간마다 함수 반복 실행
clearTimeout(id);// setTimeout 중지
clearInterval(id);// setInterval 중지

setInterval(함수, milliseconds) x 초마다 함수를 실행한다.

var x = function(){
	document.write("<h1>hellow world!</h1>")}
x();
setInterval(x,1000);


//아니면 이렇게
setInterval(function(){
document.write("<h1>hellow world!</h1>")
    },500);

setTimeout(함수, millisecond) : 일정시간 후 함수를 한번 실행한다.
```
setTimeout(function)(function(){
clearInterval(intervalID);
},10000);
```

js는 html 요소와 연결시켜 화면에 보여줄 수 있다. 다음과 같이 html요소에 id를 주어서 연결한다.

  <div id="item">
  </div>

  <script type="text/javascript">
      //div id item 다음에 있어야지 아래 코드를 실행할 수 있다.
   var a = document.getElementById("item");
   var text = "<h1>Hello World!</h1>"
   a.innerHTML= text;
  </script>

위 방법을 응용해 화면에 시간을 찍을 수 있다.

jsTime

<head>
<style media="screen">
  #item{
    font-size: 60px;
    font-weight: bold;
    text-align: center;
  }
  </head>
</style>
<body>
<div id="item"></div>
  <script>
  setInterval(function(){
    var a = document.getElementById("item");
    var today= new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();

    var text = "현재시간 : " +hr+"시"+min +"분" + sec+"초";
    a.innerHTML= text;//rw 가 가능하다.
    var ah = a.innerHTML//일케하면 r한다.
  },1000);
  </script>
</body>

eval():

eval(string)

switch(rand%3){
    case 0:
      name +='1';
      break;
    case 1:
      name +='2';
      break;

    case 2:
    name +='3';
    break;
  }
  eval(name+'();');

//switch case 안 쓰고
    var name = 'f'+(rand%3+1);
  eval(name+'();');해도된다.

eval과 타이머의 합작

  var clear =   setInterval(function(){
    var rand=  Math.floor(Math.random()*30) +1 //math rand는 0에서 1 사이의 값.
    var name = 'f'+(rand%3+1);
    eval(name+'();')
  },1000);
  setTimeout(function(){clearInterval(clear);},2000);

rand()

  for(var i =0;i<10;i++){
    var rand=  Math.floor(Math.random()*30) +1 //math rand는 0에서 1 사이의 값.
    document.write(rand+"<br>");
    }

isFinite()

var result = 10/0; //실수로 연산된다.

자바에서는 10/0은 divided by zero 로 돼고 실수일 때 10.0/0.0 infinity였다.

실수 타입에서 0은 존재하지 못하고, 0에수렴하는 값이라서 infinity로 뜨게 된다.

근데 javascript에서 10/0은 inifity가 나온다. 눈에 보이는 것은 정수 타입이지만, 계산은 실수로 되는 것이다.

document.write(isFinite(10/0)+"<br>");//false
document.write(isFinite(10/3)+"<br>");//true

isNaN()

document.write(isNaN("20회")+"<br>");//true
document.write(isNaN("20")+"<br>"); //false

parseInt()

문자있어도 최대한 변환할 수 있는 곳까지 int로 변환해준다.

document.write(parseInt("25.9")+"<br>");//25
document.write(parseInt("29#4")+"<br>");//29 " int로 변환할 수 있는 곳 까지 본다."

parseFloat()

문자있어도 최대한 변환할 수 있는 곳까지 float으로 변환해준다.

document.write(parseFloat("26.4")+"<br>");
document.write(parseFloat("29.78a")+"<br>");

Number()

문자열 안에 문자가 있으면 NaN 찍힌다.

document.write(Number("26.4")+"<br>");
document.write(Number("29.78a")+"<br>");//parseFloat과 다르다.

script와 html 연결 : 문서가 로딩이 끝날 때 까지 지연시켰다가 로딩이 완료된 후에 실행 : 이벤트와 연결 (그 body에 넣기에 가독성 ㅂㄹ라서 head에 script 부분에 하고 저렇게 한다.)

아래 함수는 호출하지 않아도, 로드가 끝나면 실행이된다.

window.onload = function(){

}

<th colspan="2"><input type="button" value = "회원가입" id = "btn"></th>//id submit하면 절대 안된다. sumit은 예약어라서

연습 문제

<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload = function() {
          var btn = document.getElementById("btn");
          btn.onclick = function() {
            var username = document.getElementById("username").value; //rw 둘 다 가능
            var userage  = document.getElementById("userage").value;
            var userid = document.getElementById("userid").value;//3~5자리
            var userpw1 = document.getElementById("userpw1").value;
            var userpw2 = document.getElementById("userpw2").value;

            if(userid.trim().length<3 || userid.trim().length>5){
              alert("id 는 3~5자리로 입력해주세요");
              document.getElementById("userid").value="";
              document.getElementById("userid").select();
              return;
            }

            if(userpw1 != userpw2){
              alert("확인 비밀번호가 다릅니다.");
              document.getElementById("userpw1").value="";
              document.getElementById("userpw2").value="";
              document.getElementById("userpw1").select();
              return;
            }
            if(userpw1.trim().length<3 || userpw1.trim().length>5){
                alert("비밀번호를 3~5자리로 입력해주세요");
            }

            if(username.trim().length == 0) {
                alert("이름을 입력해주세요");
                document.getElementById("username").select();
                return;
            }
            // 입력하지 않았거나, 숫자가 아닌 입력이 있는지 확인
            if(isNaN(userage) || userage.trim().length ==0) {
                alert("나이다시 입력해주세요");
                document.getElementById("userage").value =""; //변수에 넣어서 하면 안되고, 직접 이렇게 해줘야한다. user 쓰면 안된다.(문자열로 한 것 재접근할 수 없다.)
                document.getElementById("userage").focus();
                return;
            }
            alert("당신의 데이터를 서버로 전송합니다.");
          }

       };
    </script>


  </head>
  <body>
    <div class="">
      <table>
        <tr>
          <th>아이디</th>
          <td><input type="text" id="userid" placeholder="아이디를 입력해 주세요."></td>
        </tr>
        <tr>
          <th>비밀번호</th>
          <td><input type="password" id="userpw1"></td>
        </tr>
        <tr>
          <th>비밀번호 확인</th>
          <td><input type="password" id="userpw2"></td>
        </tr>
        <tr>
          <th>이름</th>
          <td><input type="text" id="username" placeholder="이름을 입력해 주세요."></td>
        </tr>
        <th>나이</th>
        <td><input type="text" id="userage" placeholder="나이를 입력해 주세요."></td>
      </tr>
        <tr>
          <th colspan="2"><input type="button" value = "회원가입" id = "btn"></th>

          <th colspan="2"><input type="submit" value = "회원가입" id = "btn"></th><!--//BUTTON으로 하면 정보 서버로 전달 안 된다. SUBMIT으로 해야한다.-->
                      <!--근데 submit은 잘못 입력됐어도 서버로 보내버린다. 고칠수 있도록멈춰야하는데 그렇지 못한다. 그래서 submit을 쓰지 말고 js에서 전송을 하던가,
        button을 사용해서-->
        </tr>
      </table>
    </div>

  </body>
</html>

but 사용해서

js에

document.getElementById(“join”).submit();추가,

html form태그에 id= join 추가.

<script src="join.js">
</script>

JS FUNCTION

일급함수

익명함수

선언적 함수

익명 함수와 선언적 함수 비교

매개변수

가변 인자 함수

내부함수

콜백함수

내장함수

타이머함수

eval():

rand()

isFinite()

isNaN()

parseInt()

parseFloat()

Number()

연습 문제

Yeji 'Callie'

Error

일급함수

익명함수

선언적 함수

익명 함수와 선언적 함수 비교

매개변수

가변 인자 함수

내부함수

콜백함수

내장함수

타이머함수

eval():

rand()

isFinite()

isNaN()

parseInt()

parseFloat()

Number()

연습 문제

Templates (for web app):

Error