지난게시글 코드의 경우
계산기 부분에서 수식을 입력 후 계산을 하고 결과값이 나오면 경로가 새로 부여되여 새로운 페이지에서 열리는 것을 볼 수 있다.
지금의 예제에서는 계산기 프로그램만 페이지에 나와있지만, 다른 여러가지 시스템이 있는 경우 계산기 프로그램을 하나 작동시키기 위해 전체 페이지가 업로드 되기 때문에 사용자 입장에서도 불편할 수 있고, 서버에 과부하를 일으킬 수 있다.
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>
덧셈 코드를 그대로 붙여 4가지 연산자를 추가했습니다.
중복되는 코드가 많아 좀 더 효율적이게 작성할 수 있을거 같습니다....
add 결과
sub 결과
mul 결과
div 결과
