KoXo 자바스크립트 - 문장(statement)

새 사용자 정의 기능함수를 선언한다.


 function myFunction([argument1[,argument2[,...argumentN]]]){javascriptCode}
 function myFunction([argument1[,argument2[,...argumentN]]]){
  javascriptCode1;javascriptCode2
}

인수

myFunction() : (기능함수명)

사용자 정의 기능함수의 이름이며 호출하기 위하여 필수적인 요소다.

argument1...argumentN : (인수)

기능함수가 변수를 받아 이해할 수 있는 인수 목록으로, 쉼표로 구분되고 선택적인 요소이다.

해당 기능함수별로 arguments 배열변수를 구성한다.

javascriptCode, javascriptCode1, javascriptCode2 : (실행문)

하나 이상의 문장, 혹은 복합문장의 Javascript 문장이며 선택적인 요소이다.

기능함수위 선언

function은 원칙적으로 <HEAD> 안에서 사용자가 정의 한 기능으로서 Javascript 혹은 이벤트(event 처리자를 통하여 사용할 수 있다. 그러나 다른 부분에서 정의하여도 실제적으로 문제는 없다.

function myFunction(variable1,variable2,...){
  Javascript 실행문1;
  Javascript 실행문2;
  Javascript 실행문3;
}

기능함수의 호출

function 문장은 웹페이지 로딩 후 즉시 실행되지 않고 나중에 사용할 기능함수를 선언한다. javascriptCode에 포함된 코드는 스크립트의 다른 부분에서 기능함수를 호출할 때까지는 실행되지 않는다.

myFunction(variable1,variable2,...);

혹은 HTML 상에서 이벤트와 연결하여

<INPUT type="button" value="테스트단추" onClick="myFunction(variable1,variable2,...)">

문서를 모두 읽은 후에 실행되므로 기능함수 호출이 기능함수 선언보다 먼저 나와도 된다.

결과값 반환 return

모든 변수는 그 해당 function 안에서 만 작용되며, 변수의 값을 다른 곳에서 사용하려면 return 변수(variable)를 사용하여야 한다. 기능함수 선언 밖 페이지의 맨 먼저 선언한 변수의 값은 기능함수 내부와 외부에서 공통적으로 사용할수 있다.

특기

원칙적으로 function myFunction(){...} 속에 다른 function을 가질 수 없다.

참고: 기능함수를 호출할 때는 괄호와 필수적인 인수가 항상 포함되어 있는지 확인한다.

기능함수의 호출: myFunction();

<SCRIPT>document.write(myFunction())</SCRIPT>

결과 :

괄호 없이 기능함수를 호출하면 기능함수의 결과 대신 기능함수의 문자열이 반환된다.

기능함수의 문자열: myFunction;

<SCRIPT>document.write(myFunction)</SCRIPT>

결과 :

function 문장을 문서에서 직접 호출 예제

HTML 문서 속에서

기능함수명((function1))은 예약어를 제외하고 일반 규칙에 맞게 지정하면 된다.

<SCRIPT>
function function1(){ // 기능함수의 시작
  document.write('<font color=green><b>기능함수가 호출되었다.</b></font>'); // 기능함수 내부의 Javascript 코드가 실행된다.
} // 기능함수의 종료
</SCRIPT>

<font color=blue>HTML 문서 속에서</font> <! HTML 문서 속 HTML 태그>
<SCRIPT>function1()</SCRIPT> <! HTML 문서 속에서 호출하고저 하는 곳에 넣으면 된다.>

function 문장을 onClick 이벤트로 호출 예제

시작할 때 기능함수를 호출하려면 <body onLoad="myFunction()">과 같이 사용하면 된다.

<SCRIPT>
function function2(){ // 기능함수의 시작
  alert('기능함수가 호출되었다.'); // 경고 발생, 기능함수 내부의 Javascript 코드가 실행된다.
} // 기능함수의 종료
</SCRIPT>

<INPUT type="button" name="test1" onClick="function2()" value="기능함수 호출 클릭"> <! HTML 문서 속 HTML 태그>