본문 바로가기
Java Script/Java Script

JavaScript 함수 만드는 방법

by 워니 wony 2019. 5. 11.

 

Java Script 함수

함수란 반복 사용하는 코드를 재사용하기 위해 하나의 단위로 묶어 놓은 코드의 집합을 말한다.

자바스크립트 내에 정의된 함수를 "내장 함수"라고 하고, 직접 정의한 함수는 '사용자 정의 함수'라고 한다.

 

함수 처리가 끝나면 return 문을 통해 결과를 돌려 받을 있다.

 

function sum(a, b){
  var result = a+ b;
  return result;
}

 

 

콜백함수

  • 자바스크립트에서는 함수를 매개 변수로 전달할 있는데, 이를 콜백 함수라고 한다.
  • 콜백함수는 다른 함수의 인자로써 이용되는 함수나 어떤 이벤트에 의해 호출되어지는 함수를 말한다.

 

 

함수 생성하는 방식 2가지

  1. funtion 함수명(매개변수) { 함수내용 };
  2. var 함수명 = function( 매개변수 ) {  함수내용  };
    • 최신으로 더 많이 사용하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  function ok1() {
      alert("ok1");
  }

  var ok2 = function()
  {
      alert("ok2")
  }

</script>

</head>
  <body>
    <button onclick="ok1()">Click 1</button>
    <button onclick="ok2()">Click 2</button>
  </body>
</html>

 

 

 

[예제] 객체 내 함수 사용 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var person = {
			
			name:"박자바",
			eat:function(food){
				alert(this.name +"는 점심으로 "+food+"를(을) 먹습니다.")	
			}			
	};
	
	var lunch = function(food) {
		person.eat(food);
	};
	
</script>
</head>
<body>
	<button onclick="lunch(this.innerHTML)">샐러드</button>
	<button onclick="lunch(this.innerHTML)">커피</button>
	<button onclick="lunch(this.innerHTML)">파스타</button>
</body>
</html>
반응형

댓글