Function

Function에 대해서도 일단 용어를 정의 할 필요가 있겠군요. Function 역시 수학에서는 함수라고 부르는 영어 단어죠. 한문으로 函數 라고 쓰면 맞나요? 틀린 용어는 아닙니다만 수학에서 사용하는 함수처럼 복잡하지는 않습니다. 저도 학생 때 수학을 별로 좋아하질 않았던지라, 첨에 프로그램 공부할 때 함수라는 단어가 또 나오는 걸 보고 기냥 때려 치울까도 생각했져. 개념 잡는 데도 한참 걸렸구요... 흠... 지금 자기 머리 나쁜 걸 가지고, 용어를 잘 못 해석한 선배들 탓으로 돌리고 있는 중 입니다.

그래서 제 나름대로 궁리하다가 이런 단어를 만들어 봤습니다. 함축 기능(含蓄機能) 이라고... 함 자는 한자로 다르지만 한 마디로 "여러가지 기능을 하나로 함축시켰다" 라고 말 할 수 있습니다. Function를 연습하기 위해서 Window 객체의 alert 이라는 Method 를 이용하여 경고창에 메시지 띄우는 방법에 대해 알아 보겠습니다.
경고창 띄우기

이와 같이 alert('경고창에 띄울 메시지') 의 형식으로 경고창을 띄울 수 있습니다. 그러면 이 alert Method를 이용하여 본격적으로 function에 대해 알아 보도록 하겠습니다.

Function의 기본적인 유형(Type)

Function의 기본적인 유형의 다음과 같습니다.
기본형

function이라는 JavaScript Keyword로 Function을 사용한다는 선언을 하고
Function 이름을 붙입니다. 이름 주는 방법은 Variable 페이지에서 variable 이름 붙이는 방법과 또~옥 같습니다. 위에서는 그냥 functionName이라고 붙였습니다. 역시 알아 볼 수 있는 이름을 붙이는게 좋겠죠.
Function이름 바로 뒤에 () 를 열고 닫습니다. 그 속에 머가 들어 갈 경우도 있죠.
{ 이렇게 생긴 중괄호를 열고
실행되어야 할 내용을 넣어 준 다음
} 로 중괄호를 닫아 줍니다.

Function을 만드는 순서

JavaScript 에 익숙해 지면 위의 6 단계에 걸쳐 주욱 scripting하면 되지만 처음 접하는 초보자라면 소스 코드를 보고 타이핑 하기에 여념이 없게 마련이죠. 그렇기 때문에 어떤 내용을 Function으로 만들 때는 먼저 내용에 문제(에러)가 없는지 알아 보아야 합니다. alert Method를 사용하여 경고창에 "Function 만들기" 라는 메시지를 띄우는 Function을 만들어 보기로 하겠습니다.
1. 내용 부터 실행시켜 본다.

<html>
    <head>
        <title>내용 부터 실행시켜 본다.</title>
    <script type="text/javascript">
    <!--
    alert("Function  만들기")
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

2. 함수로 만든다.

<html>
    <head>
        <title>함수로 만든다.</title>
    <script type="text/javascript">
    <!--
    function makeFunction(){
    alert("Function  만들기")
    }
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

실행해 보면 알겠지만 아무 반응이 없져? 왜 안 되는지 설명하져. 그건 function 이란 넘의 자존심 때문이랄까요. 워낙 자존심이 강한 넘이라서 그렇습니다. 이 넘은 부르지 않으면 절대 나타나지 않는 습관이 있어서 그런거져. 그렇기 때문에 항상 불러(call) 줘야 됩니다. 아주 건팡진 넘 입니다.

Function 을 호출(call) 하는 3가지 방법

이 건팡진 넘을 불러내는데는 대략 3가지 방법이 있습니다.
1. Function 뒷 부분에 이름을 써서 호출하는 방법

<html>
    <head>
        <title>Function 뒷 부분에 이름을 써서 호출하는 방법</title>
    <script type="text/javascript">
    <!--
    function makeFunction(){
    alert("Function  만들기")
    } //여기까지가 function 이고
    makeFunction() //뒷 부분에 function 이름을 적어 줍니다.
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

2. Window Event Handler 로 호출하는 방법

<html>
    <head>
        <title>Window Event Handler 로 호출하는 방법</title>
    <script type="text/javascript">
    <!--
    function makeFunction(){
    alert("Function  만들기")
    }
    // -->
    </script>
    </head>
    <body onload="makeFunction();">
    
    </body>
</html>

여기에는 약간의 설명이 필요하겠네요. Window Event에는 2가지가 있는데 그 중 하나가 방금 실습한 onload Event 이고 또 하나는 onunload Event 입니다. Load란 물건을 싣다 라는 뜻을 가진 단어인데 통신에서는 Data를 전송한다는 뜻으로 사용됩니다. 잘 알고 있는 것 처럼 Upload는 데이타를 보내는 것이고, 반대로 Download는 데이타를 받는다는 뜻이죠. Mouse Event 에서도 보았듯이 Event 앞에는 전부 On 이 붙는데 On은 Event가 발생하는 순간을 말합니다. 따라서

Onload 는 문서가 브라우저 창에서 완전히 Load 되는 순간에 발생하는 Event 이고
Onunload 는 다른 페이지로 이동하거나 브라우저 창을 닫아서 문서에서 빠져 나가는 순간에 발행하는 Event입니다.

1번과 2번의 경우 실행하는 순간 같은 결과가 나오지만 과정은 다른 것이죠. 1번이 위에 있는 만큼 별차이는 아니지만 순서적으로 빨리 일어나게 됩니다. 다시 실행하고 onload를 onunload로 고치고 실행해 보면 '실행 결과 보기' 단추를 눌러도 아무런 반응이 없지만 창을 닫으면 비로소 alert 박스가 나타 납니다. 또 1번과 2번이 합쳐진 형태가 되면 alert 창이 2번 뜨게 됩니다. 한 번 해 보시져. 거짓말인지 아닌지...^^
3. 불러내고 싶을 때 불러내는 방법

<html>
    <head>
        <title>불러내고 싶을 때 불러내는 방법</title>
    <script type="text/javascript">
    <!--
    function makeFunction(){
    alert("Function  만들기")
    }
    // -->
    </script>
    </head>
    <body>
    <input type="button" value="이 넘! 나오너라."  onclick="makeFunction()" />
    </body>
</html>

위와 같이 버튼을 만들고 onclick 이라는 Mouse Event에 Function 을 지정하면 그 버튼을 클릭하면 언제든이 지정한 Function을 call 할 수 있습니다. 일종의 Function과의 연결고리인 셈이죠. 사실 input Element에 대해서는 HTML 부터 지금까지 일언반구의 설명도 없었는데... JavaScript 메뉴 / 내장 객체 / Form Object에서 자세히 다루겠습니다.

대입 변수가 있는 Function

대입 변수라는 것은 어떤 데이타를 대신 집어 넣는 공간이라는 뜻이라는 것을 앞 페이지의 variable에서 설명했습니다. 앞에서 만들어 본 Function은 어떤 방법을 사용하건 "Function 만들기" 경고창을 띄우는 기능 밖에 할 수 없습니다.

그렇다면 경우에 따라 내가 원하는 각기 다른 메시지를 띄우는 방법은 없는 걸까요. 물론 있습니다. 지금부터 그 방법에 대해 설명하겠습니다.
대입 변수를 갖는 Function의 기본형

function functionName(변수){
Property 또는 Method(변수)
}

이렇게 위와 같습니다. 앞의 예제에서 처럼 alert Method를 사용하여 입력하는 내용에 따라 각기 다른 메시지를 띄우는 예제를 하나 해 보겠습니다.
대입 변수가 있는 Function

<html>
    <head>
        <title>대입 변수가 있는 Function</title>
    <script type="text/javascript">
    <!--
    function makeFunction(txt){
    alert(txt)
    }
    // -->
    </script>
    </head>
    <body>
    <input type="button" value="좋은 아침입니다."  onclick="makeFunction('좋은 아침입니다.')" />
    <input type="button" value="좋은 점심입니다."  onclick="makeFunction('좋은 점심입니다.')" />
    <input type="button" value="좋은 저녁입니다."  onclick="makeFunction('좋은 저녁입니다.')" />
    </body>
</html>

이와 같이 대입 변수를 사용하면 각기 다른 값을 출력하는 Function을 만들 수 있습니다. 이 때 ( ) 속에 사용하는 대입 변수의 갯수는 경우에 따라 각각 다릅니다. 지금처럼 1개 일수도, 그 이상일 수도 있습니다.

CSS Scripting 을 Function으로 묶기

이런 생각을 한 번 해 볼까요. CSS Scripting으로 Dynamic 한 효과를 줄 때, 그 효과가 한 가지가 아닌 여러가지... 뭐 대 여섯 가지 정도... 라 치고, Function 을 모르고 Scripting 하면 아래와 같이
CSS Scripting

<p onMouseOver="this.style.color='red';this.style.backgroundColor='gold';this.style.border='1px solid red';this.style.fontWeight='bold';" onMouseOut="this.style.color='';this.style.backgroundColor='';this.style.border='';this.style.fontWeight='';">CSS Scripting을 Function으로 만들기</p>

이런 식으로 semi-colon으로 연결하여 필요한 만큼 나열하게 되죠. 이런 효과를 여러 개를 사용한다면 매우 불편한 일입니다. 코드도 길어져서 에러가 나면 그걸 찾느라 눈이 빠져라 들여다 보게 됩니다. 하지만 Function을 사용하면 이런 걸 아주 간단하게 줄일 수 있습니다. 위의 내용을 JavaScript Function 으로 만들면 아래와 같습니다.
입력

<html>
    <head>
        <title>CSS Scripting 을 Function으로 묶기</title>
    <style type="text/css">
    <!-- 
    .normal{
    font-weight:bold;
    border:1px solid #ffffff;
    } 
    -->
    </style>
    <script type="text/javascript">
    <!--
    //mouseOver 때의 Function
    function mouseOver(obj){
    obj.style.color = "red"
    obj.style.backgroundColor = "gold"
    obj.style.border = "1px solid royalblue"
    obj.style.fontWeight = "bold"
    obj.style.cursor = "hand"
    }
    
    //mouseOut 때의 Function
    function mouseOut(obj){
    obj.style.color = ""
    obj.style.backgroundColor = ""
    obj.style.border = "1px solid #ffffff"
    obj.style.fontWeight = ""
    obj.style.cursor = ""
    }
    // -->
    </script>
    </head>
    <body>
    <p class="normal" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);">
    CSS Scripting 을 Function으로 묶기</p>
    </body>
</html>

위에서는 obj 라는 대입 변수를 썼는데 이 변수 이름 만드는 방법은 variable 페이지에서 설명한 것과 같습니다. 또 onmouseover="mouseOver(this);" 에서 this를 대입했져? 이렇게 하면 마우스가 p Tag 위로 올라 가는 순간, 즉 onmouseover Event 가 발생하는 순간 mouseOver(obj) Function 의 obj 변수에 this가 대입되게 되고 {} 로 묶인 5개의 obj 변수에도 모두 this가 대입되어 위의 CSS Scripting의 예와 동일한 결과가 나오게 됩니다. 물론 onmouseout 때도 마찬가지구요. 또한 이렇게 만들어진 Function은 여러군데에다 Event Handler와 함께 사용할 수 있으니까 Code 도 많이 절약됩니다. CSS Scripting에 대해 자세히 알고 싶으면 mouse event와 color 를 참조하세요.

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)

Function