메뉴 건너뛰기

2021.01.24 01:07

9장 실습문제 10번

조회 수 1203 댓글 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 11: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.25 00:28
    아하 알겠습니다!! 답변 감사합니다~!

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
402 혹시 예전 서적인 "DHTML + 자바스크립트 프로그래밍"의 예제를 받을 수 있는 방법은 없는지요? 2 비만타쿠미 2018.09.26 116
401 한글html 1 키보드 향기 2020.03.29 919
400 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
399 표와 div span 4 키보드 향기 2020.04.05 108
398 페이지에 첨부하고 싶은 이미지의 위치에대해 궁금합니다 1 정택희 2017.02.13 274
397 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3844
396 테스트 관리자 2019.08.30 170
395 태그와 속성 2 tc0712 2021.09.08 72
394 크롬 오디오 자동재생 관련 질문입니다! 1 ^_^ 2018.09.30 446
393 코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1 file 입문한 사람 2020.04.01 598
392 캔버스 관련 질문 1 원그리기 2021.08.22 101
391 챕터2 연습문제 8번 김석현 2018.04.22 154
390 챕터 3의 10번 문제 1 컴공과 입문 2018.03.20 124
389 책을 종이책으로 구매했는데 1 ddd 2024.03.21 22
388 책을 마치며 7 은성 2017.04.13 487
387 책 151p 3장 오픈챌린지 문제질문입니다. 3 이상민 2019.07.19 232
386 짝수번 정답 3 idididid 2017.12.25 3101
385 질문입니다 1 1213 2018.03.06 419
384 질문드립니다. 1 ㅇㅇ 2020.06.03 306
383 질문 있습니다. 2 2021.08.19 134
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로