본문 바로가기
Stupid Computer/4. JavaScript

[자바스크립트] 함수의 정의 및 호출 ( 마우스 클릭, 오버 이벤트)

태선임 2014. 3. 18. 10:07

출처 : http://math88.com.ne.kr/computer/js/JSmanual/

함수를 사용하게 되면 한번 정의 해 놓은 함수를 어느 위치에서나 쉽게 호출하여 사용할 수 있습니다. 어느곳에서나 호출하여 사용하려면 함수선언을 HEAD 부분에서 해 줍니다

예를들어 아래와 같은 함수를 선언하였습니다.

<SCRIPT LANGUAGE="JavaScript">

<!--

function greeting() {

alert("안녕하세요?")

}

//-->

</SCRIPT>

즉, 안녕하세요? 라는 메시지창을 열어주는 함수 스크립트입니다.

이 함수를 문서가 열리자마자 호출하여 인사하게 하려면 <body> 태그안에 다음과 같이 넣어 줍니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function greeting() {
  10. alert("안녕하세요?")
  11. }
  12. //-->
  13. </SCRIPT>
  14.  
  15. </HEAD>
  16.  
  17. <BODY onLoad="greeting()">
  18.  
  19. 페이지를 열면 인사를 합니다
  20.  
  21. </BODY>
  22.  
  23. </HTML>

즉, HEAD 부분에서 선언한 함수 greeting() 은 17번째 줄에서 문서 로딩이 완료되면(onLoad) 호출됩니다.

앞서 이벤트 핸들러에 대해 배웠습니다. onLoad 는 "웹문서의 로딩이 완료되면" 이라는 이벤트 핸들러입니다. 반대로 방문자가 이 문서를 떠날 때 함수를 호출하려면 onunLoad 이벤트 핸들러를 사용하면 됩니다

<body> 태그 내에서 사용되는 이벤트 핸들러는 주로 이 두가지가 사용됩니다.

이번에는 문서의 본문에서 어떻게 함수를 호출하는지 예문을 살펴 보도록 하겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function greeting() {
  10. alert("안녕하세요?")
  11. }
  12. //-->
  13. </SCRIPT>
  14.  
  15. </HEAD>
  16.  
  17. <BODY>
  18.  
  19. <p><input type=button onClick="greeting()" value="클릭 해 보세요">
  20. <p><a href="#" onmouseOver="greeting()">마우스를 대어보세요</a>
  21.  
  22. </BODY>
  23.  
  24. </HTML>

이 에제는 HEAD 부분에서 한번 정의해 놓은 greeting() 함수를 폼버튼과, 하이퍼링크 및 이미지에서 사용자가 특별한 이벤트를 발생시키면 호출되도록 코딩된 것입니다.

이처럼 자바스크립트의 함수는 아주 다양하고 유용하게 사용될 수 있습니다.

'Stupid Computer > 4. JavaScript' 카테고리의 다른 글

[자바스크립트]div태그와 span태그 비교/ innerHTML예제  (0) 2014.03.20
[자바스크립트] \n, <br> &nbsp 줄바꾸기 정리 !  (0) 2014.03.20
[자바스크립트] 한글 깨짐현상 고치기~ js파일 내에서 한글 사용~  (0) 2014.03.20
[Ajax] XMLHttpRequest 객체 사용(responseText) JavaScript / Ajax / jQuery2011  (0) 2014.03.20
[자바스크립트] Eclipse javascript 자동완성 플러그인 JSDT 설치 ~  (0) 2014.03.18
[자바스크립트] Eclipse Javascript Code Assist 가 되지 않을때~  (0) 2014.03.18
[자바스크립트] 객체와 반복문 for in 키워드 사용  (0) 2014.03.18
[자바스크립트] eval() 함수 사용법, 코드 실행 함수  (0) 2014.03.18
[자바스크립트] 자바스크립트의 실행 순서 ~ 간단한 예제  (0) 2014.03.18
[자바스크립트] 타이머 함수 ~ 사용 예제  (0) 2014.03.18

'Stupid Computer/4. JavaScript' Related Articles

티스토리툴바