자바스크립트 계산기 ( 추가사항, 예외처리 고려 해야 할 사항)

개발개발/자바스크립트 2012. 9. 3. 08:39

현재 까지 가능한 기능

텍스트창 오른쪽 정렬

엔터키로 연산

소수점 값 입력

추가할 기능

eval를 사용하지 않고 연산( +,- 등 연산자를 연속으로 입력 했을 때 에러 발생)

위에 텍스트에 먼저 입력한 숫자와 연산자를 표시하고 연산 결과는 아래창에 출력되는 기능

예외처리

연산 결과 출력 후 새로운 숫자 입력 했을 때 텍스트창이 초기화되지 않는 문제

연산자, 0, 소수점(.) 중복 입력시 처리 문제

 

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

0905 자바스크립트 계산기  (0) 2012.09.05
자바스크립트 계산기 진행사항(09.03)  (0) 2012.09.03
자바스크립트 셀렉트(javascript select) option 추가하기  (0) 2012.08.31
자바스크립트 계산기 (08.30수정)  (0) 2012.08.30
event.keycode 표  (1) 2012.08.29
Posted by 공돌공돌
,

자바스크립트 셀렉트(javascript select) option 추가하기

개발개발/자바스크립트 2012. 8. 31. 14:43

 

실습예제 -  http://bboong100.cafe24.com/0831/selection1.html

자바스크립트 셀렉트(javascript select) option 추가하기

주석은 오후 작성 예정

<html>
<head>
    <script type="text/javascript">

        var arr = ["영업-1","영업-2","영업-3"];
        var networkarr = ["N/W-1","N/W-2","N/W-3"];

        function daeli() {
            var targetObj = document.getElementById('a');
            if (document.agency.daelijeom[0].checked) {
                targetObj.length=0;
                for (var a = 0; a < arr.length; a++)
                {
                    targetObj.add(new Option(arr[a], arr[a]), [a]);
                }
            }
            else if (document.agency.daelijeom[1].checked) {
                targetObj.length=0;
                for (var a = 0; a < networkarr.length; a++)
                {
                    targetObj.add(new Option(networkarr[a], networkarr[a]), [a]);
                }
            }
        }


    </script>
    <title>sales/networdk agency</title>
</head>
<body>
<form name='agency'>
    <table border=1>
        <tr>
            <td> sales <input type=radio name='daelijeom' onclick='daeli();'></td>
            <td> N/W <input type=radio name='daelijeom' onclick='daeli();'></td>
        </tr>
    </table>
    <p><p><p>
    <table border=1>
        <tr>
            <td>aff <select name="a" id="a"></select></td>
        </tr>
    </table>
</form>
</body>
</html>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

자바스크립트 계산기 진행사항(09.03)  (0) 2012.09.03
자바스크립트 계산기 ( 추가사항, 예외처리 고려 해야 할 사항)  (0) 2012.09.03
자바스크립트 계산기 (08.30수정)  (0) 2012.08.30
event.keycode 표  (1) 2012.08.29
자바스크립트 계산기  (0) 2012.08.29
Posted by 공돌공돌
,

자바스크립트 계산기 (08.30수정)

개발개발/자바스크립트 2012. 8. 30. 11:39

 

http://bboong100.cafe24.com/0830/calc.html

수정완료사항

텍스트 창(아래쪽) 오른쪽 정렬

소수점 연산 가능

추가예정사항

키보드 입력 가능(Enter키로 연산결과 나타내기)

eval 사용하지 않고 자바스크립트 직접 계산하기

텍스트창에 연산자 ( +, -, *, / )는 위 텍스트창에 출력하기

 

<html>
<head>
    <style type="text/css">
        .txtalign {
            text-align: right;
        }

    </style>

    <script type="text/javascript">
        var keycode = event.keyCode;
        function cal(num) {
            calc.txt.value += num;
        }

        function answer() {
            calc.txt.value = eval(document.calc.txt.value);

            // document.calc.txt.value 에 저장된 문자열을
            // 자바스크립트코드로 실행
        }
        function operator(){

        }
        //onkeydown - 모든 키를 눌렀을때(shift, alt, control, capslock 등의 키도 모두 인식한다.
                               단 한영변환,한자 등의 특수키는 인식못함.)
        //onkeyup - 모든 키를 눌렀다 땠을때(onkeydown 에서 인식하는 키들을 인식)
        //onkeypress - 실제로 글자가 써질때 (shift, enter 같은 키는 인식하지 못한다)

        function enter(eql) {
            if (event.keyCode == 13) {
                answer();
            }
        }

        function clearcal() {
            calc.txt.value = "";
            // 텍스트창 초기화
        }

        function bs() {
            calc.txt.value = calc.txt.value.substring(0, calc.txt.value.length - 1);
            // substring 으로 0부터 value 길이에서 -1 한 만큼의 길이를 출력한다
        }
    </script>
    <title>계산기</title>
</head>
<body>
<form name="calc">
    <table border=1 width=200px height=200px cellpadding=0 cellspacing=0 align=center>

        <tr border=2>  <!-- 숫자표시창 -->
            <td colspan=5 align=center><input type=text name="txtcalc" disabled></td>
        </tr>
        <tr border=2>  <!-- 숫자표시창 -->
            <td colspan=5 align=center><input type=text name="txt" disabled class=txtalign></td>
        </tr>
        <tr height=40px> <!-- 백스페이스, C -->
            <td colspan=5>
                <table border=1 width=100%>
                    <tr align=center>
                        <td width=33%><input type=button value='BackSpace' style="width:100%;" onclick=bs()></td>
                        <td width=33%><input type=button value='C' style="width:100%;" onclick=clearcal()></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr align=center>
            <td width=25%><input type=button value='  1  ' onclick="cal('1')"></td>
            <td width=25%><input type=button value='  2  ' onclick="cal('2')"></td>
            <td width=25%><input type=button value='  3  ' onclick="cal('3')"></td>
            <td width=25%><input type=button value='  /  ' onclick="cal('/')"></td>
        </tr>
        <tr align=center>
            <td><input type=button value='  4  ' onclick="cal('4')"></td>
            <td><input type=button value='  5  ' onclick="cal('5')"></td>
            <td><input type=button value='  6  ' onclick="cal('6')"></td>
            <td><input type=button value='  *  ' onclick="cal('*')"></td>
        </tr>
        <tr align=center>
            <td><input type=button value='  7  ' onclick="cal('7')"></td>
            <td><input type=button value='  8  ' onclick="cal('8')"></td>
            <td><input type=button value='  9  ' onclick="cal('9')"></td>
            <td><input type=button value='  +  ' onclick="cal('+')"></td>
        </tr>
        <tr align=center>
            <td><input type=button value='  =  ' onclick="answer()"></td>
            <td><input type=button value='  0  ' onclick="cal('0')"></td>
            <td><input type=button value='  .  ' onclick="cal('.')"></td>
            <td><input type=button value='  -  ' onclick="cal('-')"></td>
        </tr>
    </table>
</form>
</body>
</html>

 

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

자바스크립트 계산기 ( 추가사항, 예외처리 고려 해야 할 사항)  (0) 2012.09.03
자바스크립트 셀렉트(javascript select) option 추가하기  (0) 2012.08.31
event.keycode 표  (1) 2012.08.29
자바스크립트 계산기  (0) 2012.08.29
브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
Posted by 공돌공돌
,

티스토리툴바