JavaScript Errors - Throw and Try to Catch
try 문은 에러가 있는 블럭의 코드를 테스트 하기 위함입니다.
catch 문은 에러를 처리합니다.
throw 문은 커스텀(custom) 에러를 만듭니다.
finally 문은 결과에 상관없이 try, catch문 후에 실행되는 문입니다.
1. Errors Will Happen!
자바스크립트 코드를 실행 할 때, 다른 에러가 발생합니다.
에러는 프로그래머에 의해서 만들어진 에러가 있을 수도 있고, 잘못된 입력 값에 의해서, 예견할 수 없는 에러들이 있을 수 있습니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> try { adddlert("Welcome guest!"); } catch(err) { document.getElementById("demo").innerHTML = err.message; } </script> </body> </html> | cs |
2. JavaScript try and catch
자바스크립트 try / catch 문은 쌍으로 사용 됩니다:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
3. JavaScript Throws Errors
에러가 발생 하면, 자바스크립트는 일반적으로 멈추고, 에러 메시지를 생성합니다.
기술적 용어로는 이렇게 표현합니다: 자바스크립트가 에러를 던졌다(Throw).
3-1. The throw Statement
예외(Exception)는 자바스크립트 문자열, 숫자, 부울 값, 객체에 사용될 수 있습니다::
| throw "Too big"; // throw a text throw 500; // throw a number | cs |
4. Input Validation Example
아래 예제는 입력 값 검사 예제입니다. 입력 값이 잘못되면, 예외를 던집니다.
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 32 33 34 | <!DOCTYPE html> <html> <body> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="message"></p> <script> function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "is Empty"; if(isNaN(x)) throw "not a number"; if(x > 10) throw "too high"; if(x < 5) throw "too low"; } catch(err) { message.innerHTML = "Input " + err; } } </script> </body> </html> | cs |
5. The finally Statement
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
예제:
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 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <body> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="message"></p> <script> function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { x = Number(x); if(x == "") throw "is empty"; if(isNaN(x)) throw "is not a number"; if(x > 10) throw "is too high"; if(x < 5) throw "is too low"; } catch(err) { message.innerHTML = "Input " + err; } finally { document.getElementById("demo").value = ""; } } </script> </body> </html> | cs |
