Python lotto, calculator Program [2]

bi_sz·2022년 3월 20일

Python

목록 보기

8/15

계산기 부분에서 수식을 입력 후 계산을 하고 결과값이 나오면 경로가 새로 부여되여 새로운 페이지에서 열리는 것을 볼 수 있다.

지금의 예제에서는 계산기 프로그램만 페이지에 나와있지만, 다른 여러가지 시스템이 있는 경우 계산기 프로그램을 하나 작동시키기 위해 전체 페이지가 업로드 되기 때문에 사용자 입장에서도 불편할 수 있고, 서버에 과부하를 일으킬 수 있다.

HTML 파일에 <Script> 코드를 추가하여 페이지 내에서 변수를 받고 출력하게 해 페이지가 새로고침이 되지 않게 변경 해 보겠습니다.

우선 기존의 calc 함수를 전부 삭제한 후

def calc():
    return render_template("calc.html")

render_template 을 이용하여 calc.html 파일을 불러옵니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function click_go() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#go').click(function() {
            $('#result').attr('value', n1 + n2);
            })
        }
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>   
        <p>1st no</p>
        <input id="num1">
        <br>
        <p>2nd no</p>
        <input id="num2">
        <input id="go" type="button" value="Go" onclick="click_go();">
        <br>
        <p>result</p>
        <input id="result" readonly="readonly"/>
    </div>
</body>
</html>

무사히 잘 실행이 되고!

현재 코드가 go 버튼을 클릭하면 덧셈연산을 수행하게 되어있어 + 의 결과값이 나옵니다.

go 버튼 대신 [ + ] [ - ][ * ] [ / ] 4개의 버튼을 만들어 제대로된 계산기를 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function click_add() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#add').click(function() {
            $('#result').attr('value', n1 + n2);
            })
        }
        function click_sub() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#sub').click(function() {
            $('#result').attr('value', n1 - n2);
            })
        }
        function click_mul() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#mul').click(function() {
            $('#result').attr('value', n1*n2);
            })
        }
        function click_div() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#div').click(function() {
            $('#result').attr('value', n1/n2);
            })
        }
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>   
        <p>1st no</p>
        <input id="num1">
        <br>
        <p>2nd no</p>
        <input id="num2">
        <br>
        <input id="add" type="button" value="add" onclick="click_add();">
        <input id="sub" type="button" value="sub" onclick="click_sub();">
        <input id="mul" type="button" value="mul" onclick="click_mul();">
        <input id="div" type="button" value="div" onclick="click_div();">
        <br>
        <p>result</p>
        <input id="result" readonly="readonly"/>
    </div>
</body>
</html>