본문 바로가기
대학교/2.웹프로그래밍

[명품 웹 프로그래밍] 9장 연습문제 //html 계산기 만들기

by Jcoder 2017. 6. 3.

실습문제 6, 9, 10번 제출하기 바랍니다. 




<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="UTF-8">
        <title>계산기 만들기</title> 
    <style>
        table 
        {
            text-align: center;
            border: hidden;
        } 
        td
        {
            width: 100px;
        }
        input
        {
            width: 90%;
        }
    </style>
    <script src="CSS_JS/10.js">
	</script> 
    </head> 
    <body>
        <h3>계산기 만들기</h3>
        <hr>
        <input type="text" id="win" value="0" style="width:99%"> 
        <table border=0 style="width:100%; height:100%;">
            <tr colspan=4 > 
                <td><input type="button" value="Back" onclick="Backspace()"></td>  
                <td><input type="button" value="CE" onclick="evalclear()"></td>  
                <td><input type="button" value="C" onclick="evalclear()"></td>  
                <td><input type="button" value="=" onclick="compute()"></td>  
            </tr> 
            <tr> 
                <td><input type="button" value="7" onclick="number('7')"></td>  
                <td><input type="button" value="8" onclick="number('8')"></td>  
                <td><input type="button" value="9" onclick="number('9')"></td>  
                <td><input type="button" value="/" onclick="number('/')"></td>  
            </tr> 
            <tr> 
                <td><input type="button" value="4" onclick="number('4')"></td>  
                <td><input type="button" value="5" onclick="number('5')"></td>  
                <td><input type="button" value="6" onclick="number('6')"></td>  
                <td><input type="button" value="*" onclick="number('*')"></td>  
            </tr> 
            <tr> 
                <td><input type="button" value="1" onclick="number('1')"></td>  
                <td><input type="button" value="2" onclick="number('2')"></td>  
                <td><input type="button" value="3" onclick="number('3')"></td>  
                <td><input type="button" value="-" onclick="number('-')"></td>  
            </tr> 
            <tr> 
                <td><input type="button" value="0" onclick="number('0')"></td>  
                <td><input type="button" value="+" onclick="number('+')"></td>  
                <td><input type="button" value="NONE"></td> 
                <td><input type="button" value="NONE"></td> 
            </tr> 
        </table> 
    </body>
</html> 


10.js
        var expression="";
        function number(text)   //  버튼으로 입력받은 문자를 win에 표시
        {
            expression += text;
            document.getElementById("win").value = expression;
        }
        function compute()  //  win에 표시된 수식들을 계산, 수식이 불가능한 경우를 생각해서 수정을 할려고 했으나 모르겠습니다.ex> 12+- 이런 경우에 어떻게 구분을 해야 하는지 모르겠습니다.
        {
            document.getElementById("win").value = eval(expression);
        }
        function evalclear()    //  초기화
        {
            document.getElementById("win").value = "";
            expression = "";
        }
        function Backspace()    //  마지막 문자를 지움
        {
            length = document.getElementById("win").value.length;
            document.getElementById("win").value = document.getElementById("win").value.substring(0, length - 1);
            expression = document.getElementById("win").value.toString();
            document.getElementById("win").value = expression;
        }


저작자표시

'대학교 > 2.웹프로그래밍' 카테고리의 다른 글

자기소개 홈페이지  (0) 2018.05.14
[명품 웹 프로그래밍] 10장 연습문제  (1) 2017.06.03
[명품 웹 프로그래밍] 8장 연습문제  (3) 2017.06.03
[명품 웹 프로그래밍] 7장 연습문제  (0) 2017.06.03
[명품 웹 프로그래밍] 6장 open challenge  (1) 2017.06.03

관련글

티스토리툴바