글 작성자: 써니루루

먼저 버튼을 눌러 실행하도록 하였고

버튼을 누르게되면 프롬프트창이 3번 뜨면서 값을 계산해

div 영역에 출력하도록 되어 있습니다.

자바스크립트 기본을 공부 중이시라면 유용하실 듯.. ^ ^


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> 이런 계산기같은.. -_ -!! </title>
   
    <script type="text/javascript">
    <!--//
    /*
     * 4칙연산을 처리하는 프로그램
     * date : 2007-07-03
     * author : 김선우
     */
    function calc()
    {
        // 변수 선언
        var x = 0;
        var y = 0;
       
        var op = ''; // 연산자
        var out = ''; // 출력값
       
        // 입력
        x = parseInt(prompt("숫자 1 : ", "0"));
        y = parseInt(prompt("숫자 2 : ", "0"));
        op = prompt("연산자(예:+, -, *, /) : ", "+");
       
        switch(op)
        {
            case "+":
                out = add(x, y);
            break;
           
            case "-":
                out = sub(x, y);
            break;
           
            case "*":
                out = multi(x, y);
            break;
           
            case "/":
                out = div(x, y);
            break;
           
        }
       
        printOut(out, "output");
        return true;
    }
   
   
    // 더하기 연산
    function add(x, y)
    {
        return x + y;
    }
   
    // 빼기 연산
    function sub(x, y)
    {
        return x - y;
    }
   
    // 곱하기 연산
    function multi(x, y)
    {
        return x * y;
    }
   
    // 나누기 연산
    function div(x, y)
    {
        return (y == 0) ?
            "0으로는 나눌 수 없습니다 ^ ^<br />\r\n다시 실행해 보세요~":
            x / y;
    }
   
    /*
     * 특정 영역에 출력하는 함수
     * date : 2007-07-03
     * author : 김선우
     *
     * param 1 : str - 출력할 문자열
     * param 2 : target - 출력할 영역의 ID 값
     */
    function printOut(str, target)
    {
        document.getElementById(target).innerHTML = str;
        return true;
    }
    //-->
    </script>
</head>
<body>

<input type="button" value=" 계산 실행하기 :) " onclick="javascript:void(calc());" />

<!-- 출력할 영역 ID:output -->
<div id="output"></div>

</body>
</html>


티스토리툴바