Web/JavaScript
[days05] js try~catch
다연
2020. 12. 15. 17:37
반응형
위 코딩은 alert를 사용하여 만든 것이다.
이를 try~catch를 사용해 바꿔보겠다.
1. alert를 사용해 경고하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
kor: <input type="text" id="kor" />
<br>
kor2: <input type="number" id="kor2" min="0" max="100" step="1"/>
<br>
<div id="demo"></div>
<script>
$("#kor").keyup(function(event) {
if(event.keyCode==13){
var kor=$("#kor").val();
if(kor.trim().length==0){
alert("입력안함");
}else if(isNaN(kor)){
alert("숫자가 아님");
}
}
});
</script>
</body>
</html>
2. try~catch문 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
kor: <input type="text" id="kor" />
<br>
kor2: <input type="number" id="kor2" min="0" max="100" step="1"/>
<br>
<div id="demo"></div>
<script>
$("#kor").keyup(function(event) {
if(event.keyCode==13){
try {
var kor=$("#kor").val();
if(kor.trim().length==0){
throw "kor-empty";
}else if(isNaN(kor)){
throw "kor-not a number";
}
} catch (e) {
$("#demo").html(e);
}
}
});
</script>
</body>
</html>반응형