** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
1. 자바스크립트 에러 구문
1) 에러 구문의 종류
| 종류 | 설명 |
| try | 코드 블록에서 오류를 테스트할 수 있는 구문 |
| catch | 오류를 처리할 수 있는 구문 |
| throw | 사용자 지정 오류를 만들 수 있는 구문 |
| finally | 결과와 관계없이 try 및 catch 후에 코드를 실행할 수 있는 구문 |
2) 오류의 발생
- 오류는 보통 철자가 틀리거나 구문을 잘못사용하면 발생됩니다.
## 오류 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
</head>
<body>
<script>
aalert('안녕하세요');
</script>
</body>
</html>- alert라고 작성했어야는데 aalert라고 작성했습니다.
## 오류 코드 결과
- 크롬개발자모드로 보면 당연히 오류가 있겠죠?
2. JavaScript try and catch
## 문법
try{
//실제 작성할 사용할 코드 블록
}
catch(err){
//에러인 경우 사용할 코드블록
}
## 코드 예시
- 코드에 에러가 있는 경우 p태그에 에러메시지를 보이도록 처리하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
</head>
<body>
<p id="test"></p>
<script>
var test = document.getElementById('test');
try{
aalert('안녕하세요');
}
catch(err){
test.innerHTML = err.message;
}
</script>
</body>
</html>
## 코드 결과
- 에러 메시지가 p태그에 들어 있는 것이 확인되시죠?
- 이렇게 두개는 세트로 사용이 됩니다.
3. JavaScript Throws Errors
- 오류가 발생되면 자바스크립트는 일반적으로는 중지되고 오류메시지를 생성합니다.
- throw는 자바스크립트의 예외를 발생시켜 오류를 일부러 발생시킵니다.
- throw 구문을 사용하면 사용자 지정 오류를 만들 수 있습니다.
- 예외 대상은 String, Number, Boolean, Object일 수 있습니다.
## 예시
throw "안녕하세요";
throw 500;- try와 catch와 함께 throw를 사용하면 프로그램의 흐름을 제어하고 사용자 지정 오류메시지를 생성할 수 있습니다.
## 코드 예시
- 입력상자의 입력값을 검사해보도록 하겠습니다. 값이 잘못되면 예외(err)를 발생시키겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<p>1~10사이 숫자를 입력하시오.</p>
<input id="numBox" type="text">
<button type="button" id="btn">테스트</button>
<p id="errorText"></p>
<script>
var numBox = document.getElementById('numBox');
var btn = document.getElementById('btn');
var errorText = document.getElementById('errorText');
btn.onclick = function(){
//기존에 들어간 errorText 제거
errorText.innerHTML = '';
//클릭할 때 들어있는 숫자를 담는 변수
var v = numBox.value;
try{
if(v == ''){
throw "비어있음";
}
if(isNaN(v)){ //숫자가 아닌 경우
throw "숫자가 아님";
}
if(v < 1){
throw '숫자가 너무 작음';
}
if(v > 10){
throw '숫자가 너무 큼';
}
}
catch(err){
errorText.innerHTML = '에러메시지 : ' + err;
}
}
</script>
</body>
</html>- try구문에 에러별로 throw를 설정합니다.
- catch구문에서 [err]매개변수에서 상황에 따라 에러메시지를 받습니다.
## 코드 결과
- 상황별로 에러메시지가 다르게 들어가는 것을 확인할 수 있습니다.
- 하지만 input태그의 number라는 type을 사용했다면 사실 이렇게 사용할 이유는 없습니다.
<input id="numBox" type="number" min="1" max="10" step="1">- 이렇게 적었다면 문자가 들어갈일도 숫자가 크거나 작은 것이 들어갈 일도 없습니다.
4. finally
- finally 구문을 사용하면 결과와 관계없이 try 및 catch 후에 코드를 실행할 수 있습니다.
## 문법
try{
//실제 작성할 사용할 코드 블록
}
catch(err){
//에러인 경우 사용할 코드블록
}
finally{
//try / catch 결과에 관계없이 실행되는 코드블록
}
## 코드 예시
- 에러메시지와 상관없이 버튼을 클릭하고 나면 입력상자의 값을 비우게 처리하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<p>1~10사이 숫자를 입력하시오.</p>
<input id="numBox" type="text">
<button type="button" id="btn">테스트</button>
<p id="errorText"></p>
<script>
var numBox = document.getElementById('numBox');
var btn = document.getElementById('btn');
var errorText = document.getElementById('errorText');
btn.onclick = function(){
//기존에 들어간 errorText 제거
errorText.innerHTML = '';
//클릭할 때 들어있는 숫자를 담는 변수
var v = numBox.value;
try{
if(v == ''){
throw "비어있음";
}
if(isNaN(v)){ //숫자가 아닌 경우
throw "숫자가 아님";
}
if(v < 1){
throw '숫자가 너무 작음';
}
if(v > 10){
throw '숫자가 너무 큼';
}
}
catch(err){
errorText.innerHTML = '에러메시지 : ' + err;
}
//위의 에러메시지와 상관없이 numBox의 값을 비우게 처리
finally {
numBox.value = "";
}
}
</script>
</body>
</html>
## 코드 결과
5. Error 객체
- 자바스크립트에는 오류 발생시 오류 정보를 제공하는 오류관련 객체가 내장되어 있습니다.
- Error 객체는 이름과 메서지라는 두가지 유용한 속성을 제공합니다.
1) Error 객체의 속성 종류
| 종류 | 설명 |
| name | 오류 이름을 설정하거나 반환 |
| message | 오류 메시지를 문자열로 설정하거나 반환 |
2) Error Name Values
- 오류 이름 속성은 다음과 같은 여섯가지의 값을 반환할 수 있습니다.
| 종류 | 설명 |
| EvalError | eval( )함수에서 오류가 발생 ** eval( ) : 문자열을 코드로 변경해주는 함수 |
| RangeError | 숫자에서 범위를 벗어나면 오류가 발생 |
| ReferenceError | 잘못된 참조가 발생 |
| SyntaxError | 구문 오류가 발생 |
| TypeError | 값 유형에 대한 오류가 발생 |
| URIError | encodeURI( )에서 오류가 발생 |
- 최신 버전의 자바스크립트는 EvalError를 발생시키지 않습니다. 대신 SyntaxError를 사용하면 됩니다.
3) Range Error
- 숫자에서 범위를 벗어나면 오류가 발생됩니다.
## 코드 예시
- 숫자의 유효 자릿수를 500으로 설정할 수 없게 만들어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<h2>JavaScript Errors</h2>
<p>숫자의 유효 자릿수를 500으로 설정할 수 없습니다.</p>
<p id="errorText"></p>
<script>
var num = 1;
var errorText = document.getElementById('errorText');
try{
//toPrecision() : 숫자를 지정된 길이로 형식화
num.toPrecision(500);
}
catch(err){
errorText.innerHTML = err.name;
}
</script>
</body>
</html>
## 코드 결과
- [RangeError]로 이름이 반환되는 것을 확인할 수 있습니다.
4) Reference Error
- 참조가 잘못되면 오류가 발생됩니다.
## 코드 예시
- y라는 변수를 선언한 적이 없는데 계산에 참조해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<h2>JavaScript Errors</h2>
<p>선언되지 않은 변수를 사용</p>
<p id="errorText"></p>
<script>
var errorText = document.getElementById('errorText');
var x;
try{
x = y + 1; //현재 y라는 변수는 없는데 참조
}
catch(err){
errorText.innerHTML = err.name;
}
</script>
</body>
</html>
## 코드 결과
5) Syntax Error
- 구문이 잘못되면 오류가 발생됩니다.
## 코드 예시
- eval( )함수 안에 alert( )함수를 문자열로 넣는데 따옴표를 잘못적어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<h2>JavaScript Errors</h2>
<p>구문에 오류 발생</p>
<p id="errorText"></p>
<script>
var errorText = document.getElementById('errorText');
try {
eval("alert('Hello)"); //작은 따옴표를 한개 덜 적었습니다.
}
catch(err){
errorText.innerHTML = err.name;
}
</script>
</body>
</html>
## 코드 결과
6) Type Error
- 데이터 타입이 잘못처리되면 오류가 발생됩니다.
## 코드 예시
- 숫자인 변수를 toUpperCase( )메서드로 대문자로 변경해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<h2>JavaScript Errors</h2>
<p>숫자를 문자열 메서드로 처리하여 오류 발생</p>
<p id="errorText"></p>
<script>
var errorText = document.getElementById('errorText');
var num = 1;
try {
num.toUpperCase(); //숫자는 대문자가 될수 없습니다.
}
catch(err){
errorText.innerHTML = err.name;
}
</script>
</body>
</html>
## 코드 결과
7) URI(Uniform Resource Identifier) Error
- URI관련 함수에 잘못된 문자를 사용하면 오류가 발생
## 코드 예시
- URI를 디코딩할 때 주소를 잘못작성해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Errors</title>
</head>
<body>
<h2>JavaScript Errors</h2>
<p>URI를 디코딩시 잘못된 문자열 작성하여 오류 발생</p>
<p id="errorText"></p>
<script>
var errorText = document.getElementById('errorText');
try {
decodeURI("%%%"); // 잘못된 URI값을 처리
}
catch(err){
errorText.innerHTML = err.name;
}
</script>
</body>
</html>
## 코드 결과
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 29강 문서객체 영역 속성 - 오쌤의 니가스터디 (0) | 2021.07.03 |
|---|---|
| [JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 (0) | 2021.06.30 |
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 25강 자바스크립트 Forms - 오쌤의 니가스터디 (0) | 2021.06.17 |
| [JS강좌] 24강 HTML DOM Node - 오쌤의 니가스터디 (0) | 2021.06.16 |
