[JavaScript] 공학용 계산기 만들기

자바스크립트를 활용하여 공학용계산기를 만들어보도록 봤습니다. 자바스크립트를 공부하는사람들이라면 계산기정도는 만들 수 있어야 한다는 말에 한번 만들어 본 계산기 예제입니다. 자바스크립트가 오류를 정확히 잡아주지 않아서 만드는데 굉장히 애먹었습니다. 디버그가 좀 힘든 언어라고 생각됩니다. 자바스크립트는 원래 이런건가요..??


자바스크립트 공학용 계산기 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>계산기</title>
<script language="javascript">
     var all = "";//모든함수에서쓸수있는전역변수
     function add(num) {
       all = all + num;
       document.getElementById("display").value = all;
     }
     function sum() {
       document.getElementById("display").value = eval(all);
     }
     function clearDisplay() {
       all = "";
       document.getElementById("display").value = "0";
     }
     function tan(all) {
       all.value = Math.tan((all.value * 3.141592) / 180);
     }
     function sin(all) {
       all.value = Math.sin((all.value * 3.141592) / 180);
     }
     function cos(all) {
       all.value = Math.cos((all.value * 3.141592) / 180);
     }
     function abs(all) {
       all.value = Math.abs(all.value);
     }
     function pow(all){
       all.value = Math.pow(all.value,2);
     }
</script>
</head>
<body>
<form>
<table border ="1" >
<tr>
    <td colspan="5"><input type="text" id="display" size="50" value="0"></td>
</tr>
<tr>
    <td colspan="2">
    <input type="button" value="Clear" onclick="clearDisplay()" style="height:100%;width:100%;"></td>
    <td colspan="3">
    <input type="button" value="Enter" onclick="sum()" style="height:100%;width:100%;"></td>
</tr>
<tr>
    <td><input type="button" value="1" onclick="add('1')" style="height:100%;width:100%;"></td>
    <td><input type="button" value="2" onclick="add('2')" style="height:100%;width:100%;"></td> 
    <td><input type="button" value="3" onclick="add('3')" style="height:100%;width:100%;"></td>
    <td><input type="button" value="+" onclick="add('+')" style="height:100%;width:100%;"></td>
    <td><input type="button" value="tan" onclick="tan(this.form.display)" style="height:100%;width:100%;"></td>
</tr>
<tr>
     <td><input type="button" value="4" onclick="add('4')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="5" onclick="add('5')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="6" onclick="add('6')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="-" onclick="add('-')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="sin" onclick="sin(this.form.display)" style="height:100%;width:100%;"></td>
</tr>
<tr>
     <td><input type="button" value="7" onclick="add('7')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="8" onclick="add('8')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="9" onclick="add('9')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="*" onclick="add('*')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="cos" onclick="cos(this.form.display)" style="height:100%;width:100%;"></td>
</tr>
<tr>
     <td><input type="button" value="0" onclick="add('0')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="+/-" onclick="abs(this.form.display)" style="height:100%;width:100%;"></td>
     <td><input type="button" value="." onclick="add('.')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="/" onclick="add('/')" style="height:100%;width:100%;"></td>
     <td><input type="button" value="x^y" onclick="pow(this.form.display)" style="height:100%;width:100%;"></td>
<tr>
</table>
</form>
</body>
</html>

공학용계산기

완성한 계산기의 모습입니다. 유용하게 사용하세요.


[JavaScript] alert창을 누르면 이전화면으로 되돌아가기

[JavaScript] 자바스크립트로 배열의 Push,Pop,Sort구현하기

[JavaScript] 마우스 우클릭 막기/ 내용 선택 막기

[JavaScript] currentDate를 활용한 현재시간 불러오기

[JavaScript] 홈페이지 접속한시간 알려주기


댓글(1)

  • 감사드립니다
    2019.12.24 21:38

    국비 학원에서 실습문제로 받았는데
    감이 안 잡혔지만 포스팅 보고 많은 도움 됐습니다. 감사합니다!!

Designed by JB FACTORY