메뉴 건너뛰기

2021.01.24 00:07

9장 실습문제 10번

조회 수 106 댓글 2

<!DOCTYPE html>
<html>
<head>
    <title>계산기</title>
    <style type="text/css">
        #butn {width: 70px; padding: 10px}
        #txt {width: 280px; height: 20px;}
    </style>
    <script type="text/javascript">
        var first = 0;

        function back()
        {
            var len = txt.value.length;
            var backsp = txt.value.substring(0,len-1);

            txt.value = backsp;

        }
        function del()
        {
            txt.value="0";
            first=0;
        }
        function enter()
        {
            var exp = txt.value;
            txt.value=eval(exp);
        }
        function inp(obj)
        {    
            if(first==0) //초기 0 지우기
            {
                txt.value=""
            }
            first++;
            var clik = obj.value;
            var exp = txt.value;
            txt.value+= clik;
        }
    </script>
</head>
<body>
    <h3>계산기 만들기</h3>
    <hr>
    <form>
        <input id="txt" type="text" value="0">
    <br>
    <table>
        <tbody>
        <tr>
            <td><input id="butn" type="button" value="BACK" onclick="back()"></td>
            <td><input id="butn" type="button" value="CE" onclick="del()"></td>
            <td><input id="butn" type="button" value="C" onclick="del()"></td>
            <td><input id="butn" type="button" value="=" onclick="enter()"></td>
        </tr>
        <tr>
            <td><input id="butn" type="button" value="7" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="8" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="9" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="/" onclick="inp(this)"></td>
        </tr>
        <tr>
            <td><input id="butn" type="button" value="4" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="5" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="6" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="*" onclick="inp(this)"></td>
        </tr>
        <tr>
            <td><input id="butn" type="button" value="1" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="2" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="3" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="-" onclick="inp(this)"></td>
        </tr>
        <tr>
            <td><input id="butn" type="button" value="0" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="+" onclick="inp(this)"></td>
            <td><input id="butn" type="button" value="NONE"></td>
            <td><input id="butn" type="button" value="NONE"></td>
        </tr>
        </tbody>
    </table>
    </form>
</body>
</html>

9장 실습문제 10번에 대한 코드를 저렇게 짜봤는데 script 부분에 따로 var txt= document.getElementById("txt")를 하지않아도 작동하네요.. 오히려 저 getElement ... 를 넣으면 작동을 하지 않아요. 왜인가요...??

?
  • ?
    관리자 2021.01.24 10:13 Files첨부 (1)

    질문이 2가지네요. 한 가지 씩 알아봅시다.
    1. 먼저 var txt= document.getElementById("txt")를 사용하지 않아도 작동하는 이유?

    HTML4까지는 그냥 var txt= document.getElementById("txt") 코드를 사용하지 않고
    txt.value = "0"과 같이 그냥 txt를 사용하면 HTML 브라우저들이 id가 txt인 HTML엘리먼트로 처리하였습니다.
    하지만 HTML5에서는 이 방식은 표준이 아닙니다. 
    그럼에도 불구하고 HTML5 이전 시절에 작성된 웹페이지들을 위해 현재의 브라우저들이 
    txt.value = "0"과 같이 그냥 txt만 사용해도 처리해주고 있는 것 같습니다.
    앞으로 var txt= document.getElementById("txt")를 이용하는 것이 바람직합니다.

     

    2. var txt= document.getElementById("txt")를 넣으면 작동하지 않는다?
    현재의 코드에서 아래와 같은 위치에 넣으면 오류가 발생합니다.
    <script type="text/javascript">
            var first = 0;
            var txt= document.getElementById("txt"); // 이곳
    왜냐하면 이 코드가 실행되는 시점에서는 아직 <body> 이하 부분이 처리(파싱)되지 않아
    브라우저는 어떤 태그가 있는지 알 수 없기 때문입니다.
    그래서 이 문제를 해결하는 방법은 여러가지 가 있는데 다음과 같이 하면 됩니다.

    <script type="text/javascript">
            var first = 0;

    뒤에, HTML 페이지가 완전히 로딩된 후, txt= document.getElementById("txt"); 가 실행되도록

    window.onload를 달면 됩니다.

    몇가지 이유로, 첨부에 이미지로 넣었으니 참고하세요.

  • ?
    왜죠 ㅠㅠ 2021.01.24 23:28
    아하 알겠습니다!! 답변 감사합니다~!

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 11296
330 4장 예제 4-17질문입니다. 1 newfile Escui 2021.04.22 6
329 [명품 html5+ css3+ javascript 웹 프로그래밍 수정판] 1장 실습문제 4번 질문합니다... 2 file 나능냐공도리 2021.04.17 37
328 명품 html5+ 수정판 p.89 예제 2-21 파일 다운로드 링크 만들기 실행 오류 문의 1 file mikael 2021.04.15 16
327 명품 HTML5+ 수정판 2장 4번 문제 문의 1 file mikael 2021.04.14 29
326 명품 html5+ css3+ javascript 웹 프로그래밍 수정판 문제 실행 오류 문의 1 file mikael 2021.04.14 14
325 2-21 예제 3 file Iwanteating 2021.03.25 74
324 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 41
323 2장 이론문제 3번 1 알고싶어요 2021.03.14 90
322 14장 예제 사라진 건가요 1 ... 2021.03.09 43
321 ch1 이론문제 1번 2 새내기 2021.03.06 80
320 연습문제 짝수답은어디있나요?? 2021.02.16 184
» 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 106
318 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 149
317 p.296 isNaN 함수 1 yamto 2020.12.28 87
316 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 99
315 실습문제 7장 5번 1 유등등 2020.12.17 65
314 13-5 하고 13-6 error 1 WebWeb 2020.12.09 63
313 7장 1번 1 2020.11.30 84
312 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 112
311 6장 오픈챌린지 질문 1 giggle 2020.11.23 139
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 17 Next
/ 17
위로