자바스크립트의 연산기능과 정규표현식으로 입력되는 데이터들을 제한하는 방법에 대해 알아보자
계산기 만들기
카페 파이썬 54 : 문제 : 미니계산기-GUI, DB-연동, Django
조건)
Alert : 0으로는 나눌 수 없어
Err는 다 alert 로 표시
초기화 : 다 지우고 +로 포커스
학습목표
|
1. 웹을 구현할 수 있다. 2. 정규표현식을 써보자 |
<코드 1 : calculator>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미니 계산기</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btnC").onclick = calc;
document.getElementById("btnA").onclick = cls;
}
function calc() {
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
if(num1==="" || isNaN(num1)===true){
alert("숫자값만을 허용합니다.");
document.getElementById("num1").value="";
document.getElementById("result").innerText="결과 : "
frm.num1.focus();
return;
}
/*
if(num2==="" || isNaN(num2)===true){
alert("숫자값만을 허용합니다.");
document.getElementById("num2").value="";
document.getElementById("result").innerText="결과 : "
frm.num2.focus();
return;
}
*/
//정규표현식 사용
var regExp = /^-?[0-9]+(\.[0-9])?$/; //'-'로 시작할 수도 있고 '.숫자'로 끝날 수도 있다.
if(num2==="" || !num2.match(regExp)){
alert("숫자값만을 허용합니다.");
document.getElementById("num2").value="";
document.getElementById("result").innerText="결과 : "
frm.num2.focus();
return;
}
num1 = Number(num1);
num2 = Number(num2);
var result;
if(document.getElementsByName("cal")[0].checked===true){
result=num1+num2;
} else if(document.getElementsByName("cal")[1].checked===true){
result=num1-num2;
} else if(document.getElementsByName("cal")[2].checked===true){
result=num1*num2;
} else if(document.getElementsByName("cal")[3].checked===true){
if(num2===0){
alert("나누기 0은 불가능한 연산입니다.");
frm.num2.focus();
return;
}else{
result=num1/num2;
}
}else{
alert("계산방법을 선택해 주십시오.");
}
document.getElementById("result").innerText="결과 : " + result;
}
function cls() {
document.getElementById("frm").reset();
frm.num1.focus();
document.getElementById("result").innerText="결과 : "
}
</script>
</head>
<body>
<h3>미니 계산기</h3><br>
<form id="frm">
숫자1 : <input type="text" id="num1"><br>
숫자2 : <input type="text" id="num2"><br>
연산선택 :
<input type="radio" name="cal" value="plus">+
<input type="radio" name="cal" value="minus">-
<input type="radio" name="cal" value="mul">*
<input type="radio" name="cal" value="div">/<br>
<span id="result">결과 : </span>
<br>
<input type="button" id="btnC" value="계산">
<input type="button" id="btnA" value="초기화">
</form>
</body>
</html>결과화면
'[2020]KIC 캠퍼스 복습 > JAVA SCRIPT(5,6,7)' 카테고리의 다른 글
| [수업 D-26 ] JS) AJAX, JSON //JQUERY (0) | 2020.08.18 |
|---|---|
| [코드리뷰] JS) AJAX를 구성, "팩토리파일" (0) | 2020.08.18 |
| [수업 D-25 ] JS)DOM, AJAX (0) | 2020.08.18 |
| [수업 D-24 ] JS) 정규표현식, 객체생성, DOM (0) | 2020.08.13 |
| [수업 D-23] JS) 배경 및 작성 기초 (0) | 2020.08.12 |
