메뉴 건너뛰기

2019.12.04 01:03

8장 실습 문제 5번

조회 수 48 댓글 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 7372
206 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 13
205 11장 실습문제 6번 arc()문제 제발요 2019.12.06 61
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 78
» 8장 실습 문제 5번 3 아리 2019.12.04 48
202 11장 6번 으엉 2019.11.27 63
201 document.write 내부에서의 onclick 이벤트 선언에 대한 오류 1 tlqk 2019.11.24 45
200 실습문제 6장 3번-2 1 어려워 2019.11.15 67
199 10장 오픈챌린지 질문입니다. 1 질문있어요 2019.11.10 137
198 서버설치와 코드편집기 질문 드려요~ 1 TS2019 2019.10.26 56
197 7장 6번 문제 질문 1 jj 2019.10.22 89
196 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 48
195 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 99
194 8장 실습문제 1번에 (2)번 알려주셔요 2019.10.17 49
193 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 60
192 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 26
191 3장 4번 질문입니다 1 질문자 2019.10.04 77
190 3장오픈챌린지 질무닙니다. 1 파랑 2019.09.29 75
189 2장 오디오 실습문제에 대해서 질문이있습니다 1 ㅇㅇㅇ 2019.09.20 54
188 570page 예제 13-7 1 이주원! 2019.09.03 56
187 교재 225page 예제5-8 질문입니다. 1 ㅇㅅㅁ 2019.09.02 51
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 11 Next
/ 11
위로