Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 함수와 이벤트 본문

Programming/HTML

HTML - 함수와 이벤트

Programmer. 2015. 8. 23. 20:16

함수


    • 함수는 프로그램 내에서 반복적으로 사용되는 명령문들을 그룹으로 묶어서 처리할 수 있도록 하는 명령문의 집합입니다. alert()나 prompt();등은 경고창이나 메시지창을 열어주기 위해 미리 정의해 둔 함수의 예입니다. 이러한 함수들은 특정 기능을 위해 간단히 그 이름으로 참조되어 호출되지만, 호출될 때마다 정해진 일련의 작업절차를 수행하도록 되어있습니다.

    • 함수는 alert(), prompt()등과 같이 자바스크립트에서 이미 제공하는 함수가 있는가 하면, 사용자가 직접 함수를 정의하여 사용하는 것도 가능합니다. 이때 전자를 내장함수 후자를 사용자 정의함수라고 합니다.

    • 함수와 관련된 몇가지 용어를 설명하기에 앞서 수학에서 흔히쓰는 y=f(x)라는 수식을 사용하겠습니다. y=f(x)에서 f는 함수명 x는 매개변수 또는 파라 메터 y는 출력값으로 존재할 수 있습니다.

사용자 정의 함수


    • 사용자 정의함수는 사용자가 임의로 함수를 정의하여 사용하는 것으로써 '함수를 정의'하는 부분과 '함수를 사용' 하는 부분으로 나누어 구성됩니다. 특히 '함수를 사용' 하는 것을 함수를 호출한다라고 표현합니다.

    • 함수를 정의하는 부분은 일반적으로 <HEAD> 부분에 기술되며 일반적인 형태는 아래코드와 같습니다. 아래 코드에서처럼 함수는 function으로 시작하면, 함수명을 사용자가 지정하게됩니다. 이 함수명은 함수를 호출할 때 사용되는 이름이며, 함수명 뒤에는 반드시 괄호가 뒤따라야 합니다. 괄호안에는 매개변수가 콤마(,)로 구분되어 나타날 수도 있습니다. 함수명과 매개변수 뒤에는 호출 시 처리가 필요한 명령문들이 나타나게 됩니다.
      function 함수명(매개변수)
      {}

매개변수가 없는 경우

    • 가장 단순한 형태의 사용자 정의함수가 매개변수가 없는 경우입니다. 이는 함수명 다음에 매개변수가 지정되지 않는 형태로 수학의 식으로 표현하면 f()와 같습니다. 매개변수가 없는 함수의 정의방법은 아래와 같습니다.
      function 함수명()
      {}
      소스를 통해서 자세희 알아보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
    <HEAD>
        <TITLE>
            매개변수 없는 사용자 정의 함수
        </TITLE>
        <SCRIPT language="JavaScript">
        function noparam()
        {
            alert("noparam이라는 함수 호출되었습니다")
        }
        </SCRIPT>
    </HEAD>
    <BODY>
        <SCRIPT language="JavaScript">
            noparam()    
        </SCRIPT>
    </BODY>
</HTML>
cs
다음 소스의 결과는 다음과 같습니다.



매개변수가 있는 경우


    • 함수에는 호출할 때마다 입력으로 사용되는 매개변수들이 저정될 수도 있습니다. 이 매개변수들은 함수를 호출하는 쪽으로 함수를 사용하는 목적에 따라서 적절한 값을 지정하여 호출하게 됩니다. 함수의 수행은 이러한 매개 변수들의 값에 따라서 수행 결과가 영향을 받게 됩니다. 매개변수를 이용하여 간단한 함수를 만들어보겠습니다. 아래코드에서는 name이라는 매개변수를 갖는 hello라는 함수가 정의되어 있습니다. hello를 호출하는 방법은 hello("홍길동")이라고 선언하면 됩니다. 이떄 name이라는 매개변수는 hello함수내에서만 그 효력을 같습니다. 함수 밖에서는 name이라는 이름으로 같은 내용을 참조할 수 없습니다. 이러한 특성은 함수내에서 var명령으로 정의된 변수들도 마찬가지입니다. 이와같이 하나의 변수가 사용 가능한 범위를 변수의 참조범위(Variable Scope)라고 하며, 위에서 설명한 함수 내에서만 사용 가능한 변수들을 지역변수(Local Variable) 그리고 특별한 참조의 범위제한 없이 어느 곳에서나 참조 가능한 변수를 전역변수(Global Variable)이라고 합니다.
      function hello(name)
      {
          alert("안녕하세요 "+name+ "님 반갑습니다.");
      }
      다음 소스를 활용하여 다음과 같은 소스를 만들 수 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <HTML>
          <HEAD>
              <TITLE>
                  매개변수 있는 사용자 정의 함수
              </TITLE>
              <SCRIPT language="JavaScript">
              function hello(name)
              {
                  alert("안녕하세요 "+name+" 님 반갑습니다.)
              }
              </SCRIPT>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  hello("홍길동")    
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
      다음 소스의 결과는 다음과 같습니다.


반환값이 있는 경우

    • 함수는 그 실행을 마치고 나서 결과값을 호출한 쪽에 반환 할 수 있습니다. 함수의 결과값 반환은 return 이라는 명령어를 통해서 수행합니다.
      return 반환할 값 또는 변수

    • return 문장에서 값 부분에는 변수, 리터럴, 혹은 수식 등 각족 형태가 모두 가능합니다.
      function func1()
      {
          return func2()
      }

    • 두 개의 값을 매개변수로 받아서 그 중 큰 값을 반환하는 함수를 정의해 보겠습니다. 함수의 이름을 outputMAX라 하고 매개변수를 num1,num2로 하여 정의하면 아래 와 같이 해서 큰값을 반환 할 수 있습니다.
      function outputMAX(num1,num2)
      {
          return (num1>num2)? num1 : num2;
      }

    •  다음 소스에서는 prompt()함수는 키보드로부터 문자열을 입력받을 수 있도록 입력창을 열어주는 함수이며, eval()함수는 문자열을 수식으로 바꾸어 주는 함수입니다. 함수의 매개변수로 또 다른 함수가 사용될 수 있습니다. 예를 들어 eval(prompt))라고 하면 prompt()함수를 실행하며 얻어진 결과값을 매개변수로 하여 eval 함수를 실행하라는 의미가 됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <HTML>
          <HEAD>
              <TITLE>
                  반환값이 있는 경우의 함수
              </TITLE>
              <SCRIPT language="JavaScript">
              function plus(num1,num2)
              {
                  sum=num1+num2;
                  return sum;
              }
              </SCRIPT>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  n1=eval(prompt("첫번쨰 수를 입력하세요!","0"));
                  n2=eval(prompt("두번쨰 수를 입력하세요!","0"));
                  result=plus(n1,n2);
                  document.write("합계는 "+result+" 입니다.");
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
      다음의 결과는 다음과 같습니다.


내장 함수

    • 내장 함수는 자바스크립트자체에서 이미 정의되어 있는 함수이기 때문에 별도로 정의할 필요없이 바로 호출하여 사용할 수 있습니다. 자바스크립트의 내장함수 종류는 다음과 같습니다.

       함수 종류

       설명

       alert()

       [확인]단추가 있는 메시지 대화상자를 엽니다.

       comfirm()

       [확인],[취소] 단추가 있는 선택 대화상자를 엽니다.

       prompt()

       숫자나 문자를 입력 받을 수 있는 입력대화상자를 엽니다.

       eval()

       문자열을 수식으로 바꾸어 줍니다.

       isNaN()

       입력값이 숫자인지 아닌지를 판별해줍니다.

       parseFloat()

       문자열을 부동 소수점으로 바꾸어 줍니다.

       parseInt()

       문자열을 정수로 바꾸어 줍니다.

       escape()

       ISO-Latin-1문자셋을 아스키 값으로 바꾸어 줍니다.

       unescape()

       아스키값을 ISO-Latin-1 문자셋으로 바꾸어 줍니다.

이벤트 함수

    • 이벤트는 사용자로부터 컴퓨터에 가해지는 일종의 신호입니다 이벤트의 쉬운 예로는 사용자가 하이퍼링크를 마우스로 클릭할 때, 폼 입력값이 바뀔 때 페이지의 로딩이 완료되었을 때 등등이 있으며 자세한 이벤트 목록과 설명은 다음 표에서 보겠습니다.

 이벤트 종류

 설명

 blur

 입력 포커스가 폼 입력 항목을 벗어날때

 click

 마우스로 링크, 혹은 폼 요소를 클릭할 때

 change

 폼 요소가 가지는 값이 사용자에 의해 변경되었을 때

 focus

 폼 요소에 입력 포커스가 주어졌을 때

 mouseover

 마우스 포인터가 해당 요소 위치 위로 움직였을 때

 select

 사용자가 폼 요소의 특정 필드를 선택했을 때

 submit

 폼 내용이 전송(Submit)될 때:submit 버튼을 눌렀을 때

 unload

 해당 페이지에서 빠져나갈때


이벤트 핸들러(Event Handler)


    • 이벤트가 발생하면 이 신호를 포착하여 프로그램에 전달하는 기능을 수행하는 것이 이벤트 핸들러(Event Handler)입니다. 즉 이벤트 랜들러는 이벤트가 발생했을 때 자동으로 호출되어 기능을 수행하는 자바스크립트 코드를 말합니다.

    • 자바스크립트에서 이벤트 핸들러를 사용하는 방법은 첫번째 코드와 같습니다. 예를 들어 입력상자의 내용 중 일부가 변경되면 자동으로 경고창을 띄우는 프로그램을 작성할떄는 두 번째 코드 처럼 작성하면 됩니다.
      <HTML 태그 속성들 이벤트핸들러="자바스크립트 프로그램">
      <INPUT type="text"  onChange="alert('내용 변경')">

    • 자바스크립트에서 제공되는 주요 이벤트 핸들러는 다음 표에서 보겠습니다.

       이벤트 핸들러 종류

      		 설명

      Onload 

       문서가 로드될 때

      onUnLoad

       문서를 닫을 때, 다른 페이지로 이동하려 할 때

       onFocus

       특정 입력상자에 포커스가 이동되었을 때

       onBlur

       특정입력박스에서 포커스가 다른곳으로 이동되었을 때

       onClick

       버튼이나 이미지를 클릭했을 때

       onDblClick

       버튼이나 이미지를 더블클릭 했을 떄

       onChange

       선택항목이나 파일 입력상자의 내용이 변경되었을 때

       onMouseOver

       특정객체 위에 마우스를 올렸을 때

       onMouseDown

       마우스를 눌렀을 때

       onMouseOut

       특정객체 위에 있던 마우스가 영역 밖으로 나갔을 떄

       onMouseUP

       마우스를 눌렀다가 놓았을 때

       onMouseDown

       마우스를 눌렀을 때

       onKeyDown

       키보드를 눌렀을 때

       onKeyUp

       키보드를 눌렀다가 놓을 때

       onReset

       폼내용이 리셋버튼으로 초기화 될 때

       onSubmit

       폼내용이 전송되려고 할 때



저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 자바스크립트(JavaScript) 객체  (0) 2015.08.24
HTML - 반복문  (1) 2015.08.23
HTML - 조건문, 배열  (2) 2015.08.23
HTML - 변수, 상수, 자료형, 연산자  (0) 2015.08.23
HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
'Programming/HTML' Related Articles more