메뉴 건너뛰기

2019.12.04 01:03

8장 실습 문제 5번

조회 수 214 댓글 3

<script>
    var imgArray = document.getElementsByTagName("img");
    for(var i=0; i<imgArray.length; i++) {
        var obj = imgArray[i];
        obj.style.zIndex = i;
        obj.style.left = "20px";
        obj.style.top = "20px";

        obj.onclick = change;
        //obj.onclick = change();하면 안먹는데 이유가 뭘까요?
    }
    function change() {
        for(var i=0; i<imgArray.length; i++) {
            var obj = imgArray[i];
            obj.style.zIndex++;
            obj.style.zIndex %= imgArray.length;
            // zIndex = zIndex % imgArray.length 이것을 왜 해야하는지, 왜 %=인지 모르겠습니다.
        }
    }
</script>

?
  • ?
    관리자 2019.12.04 11:27

    1.
    obj.onclick = change();의 의미는 change() 함수를 호출하고 그 결과 값을 obj.onclock에 넣는 것입니다.
    그러므로 클릭할 때 함수 change()가 실행되도록 하겠다면 obj.onclick = change; 로 해서 함수의 이름(실제로는 주소)를 등록해야 합니다.
    2.
    하나의 이미지를 밑으로 내리기 위해서는 모든 이미지의 zIndex를 증가시키고
    제일 큰 zIndex를 가진 이미지 즉 제일 위에 있는 이미지의 zIndex를 0으로 만들기 위한 것입니다.
    만일 이미지가 총 8개 있다면 처음에는 zIndex가 다음과 같지요
    0 1 2 3 4 5 6 7

    제일 위에 것이 아래로 내려가려면 모든 이미지의 zIndex를 증가시키면
    1 2 3 4 5 6 7 8
    이 될 것입니다. 그런데 이미지의 크기 length가 8이므로
    제일 위의 이미지의 zIndex는 8이고 이에 다음 코드가 실행되면
    obj.style.zIndex %= imgArray.length;

    8 % 8 = 0이 됩니다.
    나머지 7개의 zIndex는 1~7이므로 8로 나눈 나머지는 그대로 1~7로 있게 됩니다. 결과적으로
    다시 이미지들의 zIndex는 아래와 같이 됩니다.
    0 1 2 3 4 5 6 7

  • ?
    아리 2019.12.04 23:49
    2번은 이해했습니다. 감사합니다.
    1번은 체인지 함수를 선언하지 않고 change를 썼다면 change 가 무엇을 의미하는지요?
  • ?
    관리자 2019.12.16 00:13
    질문이 또 올라왔는지 못 보아서 답이 늦었습니다.
    change 는 함수의 이름인데 곧 함수의 주소입니다.
    이렇게 설명하면 C 언어를 배운 학생이라면 좀 더 쉽게 이해하겟지만, 함수의 주소를 주는 것이 또 어떤 의미인지 의문이 들 것 입니다.
    자바스크립트에서
    obj.onclick = change; 은
    onclick 리스너로 change 함수를 등록하는 작업이라고 생각하면 됩니다.

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18173
» 8장 실습 문제 5번 3 아리 2019.12.04 214
201 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 632
200 11장 실습문제 6번 arc()문제 제발요 2019.12.06 1093
199 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
198 61 page 실습문제 1번 오류찾기 2 궁금이 2020.02.15 1754
197 html에 css작성할때 2 궁금이 2020.03.04 351
196 1장 test1, 2, 3 파일 2 열공중 2020.03.07 538
195 71page 1 아리송 2020.03.07 77
194 7장의 8번문제 1 궁금 2020.03.20 247
193 예제 2-21 1 Daisy 2020.03.29 237
192 한글html 1 키보드 향기 2020.03.29 919
191 2장 오픈 챌린지 웹페이지 음악연주 질문있습니다. 1 초보자 2020.03.29 190
190 ; 에 대해 질문드립니다 1 입문한 사람 2020.04.01 85
189 코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1 file 입문한 사람 2020.04.01 604
188 div 와 pre 중에서 어떤 게 더 상위에 위치하나요? 1 file 입문한사람 2020.04.03 751
187 목록을 한줄로 나란하게 만드는 법 질문드립니다 3 file 입문한 사람 2020.04.04 260
186 표와 div span 4 키보드 향기 2020.04.05 108
185 선생님 정말 고맙습니다 재질문도 드리고 싶습니다 file 입문한 사람 2020.04.07 137
184 SRC와 SRDOC의 차이를 여쭙고 싶습니다. 입문한 사람 2020.04.07 48
183 따옴표를 4중 5중으로 사용하는 방법에 대해 여쭙고 싶습니다. 입문한 사람 2020.04.07 40
목록
Board Pagination Prev 1 ... 6 7 8 9 10 11 12 13 14 15 ... 21 Next
/ 21
위로