함수는 다음과 같이 정의된다.
function 함수이름 ()
/* 키워드 fubction 으로 함수가 시작된다. , 함수이름으로 낙타체로 표기. , 괄호는 이것이 함수라는 것을 의미한다.*/
{
함수몸체 /* 호출되면 실행되는 코드를 여기에 입력한다 */
}
예를 들어 웹 페이지에서 버튼을 누르면 대화 상자를 나타내는 코드를 작성해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script>
function showDialog() {
alert("안녕하세요?")
}
</script>
<body>
<button onclick="showDialog">대화상자오픈</button>
</body>
</html>
인수와 매개변수
함수를 호출할 때는 어떤 값을 함수로 전달할 수 있다. 이들 값을 인수(argument)라한다 이들 인수는 함수 내부에서 사용될수 있으며, 콤마로 구분하기만하면 얼마든지 많은 인수를 보낼 수 있다.
함수를 선언할때, 인수를 받을 변수로 선언해야 한다. 이것을 매개 변수(parametet)라고 한다.
function showDialog(part1,part2)
{
...
...
}
showDialog(arg1,arg2);
인수와 매개 변수는 선언된 순서대로 매칭된다. 즉 첫 번째 매개 변수는 첫 번째의 인수 값을 받는다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function greeting(name, postition) {
alert(name + " " + postition + "님을 환영합니다.");
}
</script>
</head>
<body>
<button onclick="greeting('홍길동','부장')">눌러보세요!</button>
</body>
</html>
무명함수
<script>
function showDialog() {
alert("안녕하세요?");
}
</script>
을 무명함수로 하면
<script>
var greeting = function()
{
alert("안녕하세요?");
};
greetin();
</script>
함수의 반환 값
함수가 값을 반환하는 것이 편리한 경우도 있다. 함수 내부에서 return 문장을 사용하면 값을 반환할 수 있다. retutn 문장을 사용하면 함수가 실행을 중지하고 지정된 값을 호출한 곳으로 반환하고 함수를 종료한다.
<script>
var value =sub();
funtion sub()
{
var x;
x = 1;
return x;
}
</script>
위의 함수는 값 1을 반환한다. 함수 호출은 반환값으로 대치된다. 위의 문장에서 value는 1값을 가지는데 이것이 바로 함수sub() 이 반환된 값이다. 반환된 값을 어디에 저장하지 않고 바로 수식에 사용해도 된다.document.getElementById("para1").innerHTML = sub();위의 문장은 "para1" 요소의 inner 요소의 innerHTMl 이 1로 설정된다. 1은함수 "sub()"이 반환된 값이다. return은 단순히 함수를 종료하고 싶을 때도 사용할 수 있다.
function divide(a,b) {
if (b == 0) {
return; // 만약분모가 0이면 나눗셈을 할 수 없으므로 함수를 종료한다.
}
return a / b
}
지역 변수
함수 안에서 선언된 변수는 지역 변수가 된다. 따라서 함수안에서만 사용가능하다. 지역변수는 함수가 종료되면 자동으로 소멸된다.
function add(a ,b){
var sum = 0;
sum = a + b;
return sum;
}
전역 변수
함수 외부에서 선언된 변수는 전역 변수가 된다. 웹 페이지 상의 모든 스크립트와 모든 함수는 전역 변수를 사용할 수 있다.
전역 변수는 사용자가 웹 페이지를 닫으면 소멸된다.
var sum = 0;
function add(a,b) {
sum = a+b;
return sum;
}
