실습문제 9-10 (자바스크립트로 계산기 만들기)
WEB/TRAINNING 2017. 12. 12. 21:47 |10. 다음 브라우저 화면과 같은 모양의 계산기 웹 페이지를 작성하라. 입력 창에는 초기에 0이 출력된다.
숫자와 연산자 버튼을 눌러 계산식을 만들고 = 버튼을 클릭하면 계산 결과를 출력한다.
BACK 버튼을 누르면 입력창의 마지막 문자를 지운다. CE나 C 버튼은 같은 기능으로, 입력 창의 내용을 모두 지우고 처음처럼 0이 출력되게 한다. NONE 버튼은 아무 기능이 없다.
힌트)
만들어진 수식은 eval() 함수를 이용하여 계산하면 된다. 예제 9-9를 참고하라.
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html> <html> <head> <title>계산기 만들기</title> <style> input { width: 60px; height: 20px; } </style> <script> var flag = false; function calculate() { exp.value = eval(exp.value); } function del() { exp.value = "0"; flag = false; } function val(num) { if(!flag) { exp.value = ""; exp.value = exp.value + num; flag = true; } else { exp.value = exp.value + num; } } function back() { //var exp = document.getElementById("exp"); exp.value = exp.value.substring(0, exp.value.length-1); } </script> </head> <body> <h3>계산기 만들기</h3> <hr> <input type="text" value="0" id="exp" style="width:350px"><br>  <input type="button" value="BACK" onclick="back()">  <input type="button" value="CE" onclick="del()">  <input type="button" value="C" onclick="del()">  <input type="button" value="=" onclick="calculate()"><br>  <input type="button" value="7" onclick="val('7')">  <input type="button" value="8" onclick="val('8')">  <input type="button" value="9" onclick="val('9')">  <input type="button" value="/" onclick="val('/')"><br>  <input type="button" value="4" onclick="val('4')">  <input type="button" value="5" onclick="val('5')">  <input type="button" value="6" onclick="val('6')">  <input type="button" value="*" onclick="val('*')"><br>  <input type="button" value="1" onclick="val('1')">  <input type="button" value="2" onclick="val('2')">  <input type="button" value="3" onclick="val('3')">  <input type="button" value="-" onclick="val('-')"><br>  <input type="button" value="0" onclick="val('0')">  <input type="button" value="+" onclick="val('+')">  <input type="button" value="NONE">  <input type="button" value="NONE"> </body> </html> | cs |
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!DOCTYPE html> <html> <head> <title>계산1231기 만들기</title> <style> input { width: 60px; height: 20px; } </style> <script> var flag = false; function calculate() { exp.value = eval(exp.value); } function del() { exp.value = "0"; flag = false; } function val(num) { if(!flag) { exp.value = ""; exp.value = exp.value + num; flag = true; } else { exp.value = exp.value + num; } } function back() { //var exp = document.getElementById("exp"); exp.value = exp.value.substring(0, exp.value.length-1); } function enter(e) { if(e.keyCode == 13) { calculate(); } else if ((48 <= e.keyCode && e.keyCode <= 57)) { num = e.keyCode - 48; val(num); //exp.value = e.keyCode - 48; } else if ( e.keyCode == 187 || e.keyCode == 189 || e.keyCode == 191 || e.keyCode == 56 ) { switch (e.keyCode) { case 187:val('+');break; case 189:val('-');break; case 56:val('*');break; case 191:val('/');break; } } else if ( e.keyCode == 8 ) { back(); } else if ( e.keyCode == 116 || e.keyCode == 16 ) return; else if ( e.keyCode == 17) exp.value = ""; else { alert('숫자 또는 연산자를 입력하세요!'); } } </script> </head> <body onkeydown="enter(event)"> <h3>계산기 만들기</h3> <h5>crtl를 누르면 초기화, 연산자 외 버튼을 누를시 경고창, 키보드로 입력가능, Backspace가능.<h5> <hr> <input type="text" value="0" id="exp" style="width:350px"><br>  <input type="button" value="BACK" onclick="back()">  <input type="button" value="CE" onclick="del()">  <input type="button" value="C" onclick="del()">  <input type="button" value="=" onclick="calculate()"><br>  <input type="button" value="7" onclick="val('7')">  <input type="button" value="8" onclick="val('8')">  <input type="button" value="9" onclick="val('9')">  <input type="button" value="/" onclick="val('/')"><br>  <input type="button" value="4" onclick="val('4')">  <input type="button" value="5" onclick="val('5')">  <input type="button" value="6" onclick="val('6')">  <input type="button" value="*" onclick="val('*')"><br>  <input type="button" value="1" onclick="val('1')">  <input type="button" value="2" onclick="val('2')">  <input type="button" value="3" onclick="val('3')">  <input type="button" value="-" onclick="val('-')"><br>  <input type="button" value="0" onclick="val('0')">  <input type="button" value="+" onclick="val('+')">  <input type="button" value="NONE">  <input type="button" value="NONE"> </body> </html> | cs |