💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #17 - Error Handling ( 예외 처리 )

프로그래밍에는 세가지 종류의 에러가 있습니다.

(a) 문법에러 (b) 런타임 에러 (c) 논리적 에러

문법 에러

문법에러는 파싱에러라고도 합니다. 문법상 맞지 않아서 발생하는 에러죠. 문법에러는 컴파일시에 에러가 있다고 알려주기때문에 찾기쉬운 에러입니다.

아래 예제는 닫는 괄호를 빼먹은 문법에러입니다.

<script type="text/javascript">
<!--
window.print(;
//-->
</script>

런타임 에러

런타임에러는 예외라고도 하며 실행시에 에러가 발생합니다. 아래 예제는 문법은 어긋나지 않지만 실행시에 오류가 발생합니다. 왜냐하면 존재하지 않는 메소드를 호출하려고 하기 때문이죠.

<script type="text/javascript">
<!--
window.printme();
//-->
</script>

논리적 에러

논리적으로 에러가 발생한 것은 찾기가 힘든 에러입니다. 문법적으로도 맞고 실행시에 아무런 문제가 발생하지 않지만 원하는 값이 안나오는 그런 에러이기 때문에 내가 구현한 로직이 잘못되어서 발생하는 에러라고 보시면 됩니다.

try...catch...finally

자바에서 쓰는 try-catch절을 자바스크립트에서도 쓸 수가 있네요

<script type="text/javascript">
<!--
try {
    // Code to run
    [break;]
} catch ( e ) {
    // Code to run if an exception occurs
    [break;]
}[ finally {
    // Code that is always executed regardless of 
    // an exception occurring
}]
//-->
</script>

예제:

존재하지 않는 함수를 호출할 경우 어떻게 에러가 발생하는지 한번 볼까요? 에러는 브라우저별로 다른게 보일 수 있다는 것을 명심하세요.

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;

   alert("Value of variable a is : " + myFunc2() );
 
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

이제 try...catch 절을 이용해서 에러를 잡아보도록 하죠.

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   
   try {
      alert("Value of variable a is : " + myFunc2() );
   } catch ( e ) {
      alert("Error: " + e.description );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

finally 는 try-catch절에서 에러가 발생하든 안하든 항상 실행이 되는 부분입니다.

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   
   try {
      alert("Value of variable a is : " + myFunc2()  );
   }catch ( e ) {
      alert("Error: " + e.description );
   }finally {
      alert("Finally block will always execute!" );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

throw 절

throw역시 자바에 있는 개념이죠. 예외가 발생했을 때 내가 처리안하고 다른녀석한테 처리해달라고 던지는 놈입니다. throw의 사전적 의미가 "던지다" 입니다. 아래 예제를 한번 보죠.

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   var b = 0;
   
   try{
      if ( b == 0 ){
         throw( "Divide by zero error." ); 
      }else{
         var c = a / b;
      }
   }catch ( e ) {
      alert("Error: " + e );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

b에 0을 할당하고 b가 0이면 throw 하도록 만든 예제네요. throw가 어떤 식으로 화면에 표현되는지 한번 실행해보세요.

onerror() 메소드

onerror 메소드는 JavaScript에서 에러핸들링을 위해서 제일 처음 나온 기능이라고 합니다. error 이벤트는 웹페이지에서 에러가 발생했을때 window객체에서 발생시킵니다. 아래 예제를 한번 볼까요.

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function () {
   alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

에러가 발생하면 경고창을 띄우도록 해놓고 존재하지 않는 함수를 호출하는 예제군요.

한번 실행해보세요.

onerror 이벤트 핸들러는 세가지 정보를 제공합니다.

에러메시지 . 브라우저가 보여주는 에러메시지입니다.
URL . 에러가 발생한 파일을 알려줍니다.
라인 넘버 . 에러를 발생시킨 라인이 몇번째 라인인지를 알려줍니다.

이 세가지 정보를 어떻게받아오는지 한번 볼까요?

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
   alert("Message : " + msg );
   alert("url : " + url );
   alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

onerror 메소드는 아래와같이 이미지를 불러올때 에러가 발생하면 메시지를 보여주기 위해서 사용될 수도 있습니다.

<img src="myimage.gif"
    onerror="alert('An error occurred loading the image.')" />

이 onerror메소드는 이미지 태그 이외에도 다른 태그에서도 사용될 수 있다는 것을 알아두시면 좋을 듯 싶네요.

Reference : http://www.tutorialspoint.com/javascript/javascript_error_handling.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #19 - Animation ( 애니메이션 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #18 - Validation ( 유효성 검사 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #16 - Object ( 객체 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #15 - void 키워드 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #14 - Dialog Boxes ( 다이얼로그 박스 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #17 - Error Handling ( 예외 처리 )

문법 에러

런타임 에러

논리적 에러

try...catch...finally

예제:

throw 절

onerror() 메소드

'💻 Programming > Javascript' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바