JS / 함수

*함수의 선언과 호출 

 

함수선언

function test(){

  alert('안녕하세요');

}

 

함수호출 

test();

 

function coffee(){

  alert('교실나가기');

  alert('스타벅스가기');

}

coffee();   

 

이렇게되면 즉시호출 

 

html에

<botton onClick="coffee()">점심시간</button>

 

해주면 시점이 정해짐  

 

*매개변수

함수의 괄호안에 적는 변수를 매개변수라고 함 

함수는 x값에 따라 결과가 변하는 건데 그게 바로 매개변수  

x는 미지의 수

더하기 연산할때 사용자가 어떤값을 사용할지 우리는 모른다. 그래서 사용 

 

function coffee(menu){

  alert('교실나가기');

  alert('스타벅스가기');

  alert(menu + '주문');

}

html에

<input type="button" value="아메리카노" onClick="coffee(this.value)">

<input type="button" value="라떼" onClick="coffee(this.value)">

아메리카노 라는 버튼을 클릭하면 alert창이 뜨는데 아메리카노주문 이라고 뜨고 

라떼는 라떼주문이라고 뜬다 

 

*리턴키워드

 

return x+y; // 리턴 뒤에 매개변수가 있는 경우 -> 매개변수의 값을 새롭게 반환 

return; //리턴만 있는경우 -> 함수를 벗어나는거 조건문과 많이 사용 / 리턴선언 이후에 선언된건 반환하지 않음 

 

//제곱을 구하는 함수선언

function square(x){

   return x*x;

}

var num =  prompt('제곱을 구할 웅앵', '정수입력');

alert('결과 :' + square(num));  //num의 입력된값을 새롭게 넣어주는거 

 

*변수식 함수선언

이름이없는 콜백함수 

var변수명 = function(){

 코드집합

}

변수명();

 

//더하기 함수선언

var plus = function(x, y){

 return Number(x) + Number(y);

}

var left = prompt('좌변입력','정수입력');

var right = prompt('우변입력','정수입력');

 

alert('결과 : ' + plus(left, right));

 

*내장함수

alert prompt confirm이런거 

미리 내장이 되어서 (자바스크립트가 미리 선언을 해놔서)우린 호출을 해서 사용을 하게 됨 

함수는 window의 메서드라고도 함 

 

타이머함수 

setTimeout() 시간 뒤 콜백함수의 명령을 한번 실행 

setInterval() 시간마다 콜백함수의 명령을 계속 실행 

clearTimeout() seTimeout을 중지 

clearInterval() setInterval을 중지 

 

setTimeout(콜백함수, 시간)

 

콜백함수는 함수의 매개변수로 처리되는 함수를 말한다 

함수에 들어가는 매개변수는 변수이기때문에 값은 문자열 숫자 불 함수 객체 모두 들어갈수있다. 

 

함수명(function(){});   함수명 내부에 함수명 = 이때 그 함수가 콜백함수 

 

시간은 1초 = 1000

 

//3초뒤 3초가 지났습니다 라는 문자열 출력

setTimeout(function(){

document.write('3초가 지났습니다.');

},3000);

 

//1초마다 n초가 지났습니다 라는 문자열 출력, 10초까지만 출력

var num = 1;

var auto = setIntervalfunction(){

document.write( num +'초가 지났습니다. <br>');

num++;

},1000);

 

//10초뒤에 멈춤

setTimeout(function(){

  clearInterval(auto);

},10001);

 

 

기타 함수의 종류 

parselnt 문자열에서 숫자만 정수로 반환 

parseFloat 문자열에서 숫자만 실수로 반환 

isNaN 수식이 NaNㅣ면 true를 반환 그렇지 않으면 false반환 

eval 문자열을 코드로 실행시켜주는 함수

 

var dollar = 1129;

var num = prompt('환전할 달러를 입력하세요','정수만입력');

alert('환전금액: ' + (dollar + parseInt(num)) + '원');

 

if(isNaN(dollar + num)){                  //숫자가 아닐때

    alert('정수로 다시 입력하세요');    

}else{                                         //숫자일때

    alert('환전금액: ' + (dollar * num) + '원');

}

 

 

*즉시실행함수

 

(function(){

    //코드집합

})();

 

선언하자마자 바로 호출하는 함수 그래서 괄호가 쳐져있음 

 

(function(){

 alert('테스트');

})();     // alert바로 실행됨

 

//2초마다 n초가지났습니다 라는 문자열을 출력, 10초까지만 

var num = 2;

var auto = setInterval(function(){

 document.write(num + '초가 지났습니다. <br>');

 num +=2;

},2000);

setTimeout(function(){

 clearTimeout(auto);

},10001);

 

코딩앙마 중급 setTimeout, setInterval 추가 내용

function fn(){

   console.log(3)

}

setTimeout(fn, 3000); 

------------------------

function showName(name){

  console.log(name);

}

setTimeout(showName, 3000, 'Mike');

                      함수    시간    인수

----------------------------------------------

const tId =  function showName(name){

                  console.log(name);

                   }

                  setTimeout(showName, 3000, 'Mike');

clearTimeout(tId);

이렇게 하면 setTimeout이 작동x

--------------------------------------------------