메뉴 건너뛰기

조회 수 179 댓글 1

<!DOCTYPE html>
<html>
<head>
<title>마우스 클릭 연습</title>
<style>
table { border : 1px solid blue; border-collapse : collapse; }
td { border : 1px solid blue; width : 50px; height : 50px; }
</style>
<script>
var last;
function randomMove() {
var i = Math.floor(Math.random()*100);
document.images[i].src="apple.png";
last = i;
}

function clickMove(e){

  document.images[last].src="";
  randomMove();

}

</script>
</head>
<body onload="randomMove()">
<h2>마우스 클릭 연습</h2>
<hr>

<table>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>
<tr>
<td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td><td><img src="" onclick="clickMove(event)"></td>
</tr>

</table>

</body>
</html>
 

위의 코드는 제가 짠 코드인대, 질문이 세가지있습니다.

1. 왜 이미지가없는 텅빈셀을 클릭시 clickMove(evnet)함수가 호출되지않는건가요? 제가 짠 코드를 보았을때 텅빈셀을 클릭시, clickMove함수가 호출되어 이전에 출력된 사과이미지는 삭제되고 랜덤한곳에 이미지가 출력되어야한다고생각합니다.

 

2. 코드가 너무 지저분한대 모든<img>태그에 onclick="clickMove(event)"를 등록하는 방법은 없나요?? 위의 코드처럼 일일이 <img>태그마다 등록해줘야하나요??

 

3. 코드를 실행후, 사과이미지를 클릭시 셀크기의 변형이 이루어지는대 이를 막을방법이 없을까요??

?
  • ?
    관리자 2019.08.22 11:54
    1. 이미지 소스가 없는 경우, onclick이 일어나지 않습니다. 그냥 표준의 규칙인 거죠. 그리고 주어진 문제는 이미지를 클릭하면 이미지가 텅 빈 셀 중 하나로 이동하는 겁니다. 혹시해서.
    2. 이런 경우, 정말 여러 가지 방법이 있습니다. 코딩 실력에 따라서 수준에 맞는 방법을 찾게 됩니다. 현재의 코드를 기준으로 한가지 방법을 알려 드리면 다음과 같이 할 수 있습니다.
    <script>
    var last = 0;
    function init() {
    for(var i=0; i<document.images.length; i++) {
    document.images[i].onclick = clickMove; // 모든 이미지 객체의 onclick 리스너에 clickMove 함수 등록
    }
    }

    function clickMove(){
    ....
    }

    </script>
    </head>
    <body onload="init()">
    <table>
    <tr> <td><img src="a.png"></td><td><img src="a.png" ></td> </tr>

    웹 페이지가 로딩된 후 onload 리스너에서 모든 이미지 객체를 찾아 onclick 리스너를 달아 주는 겁니다.
    제가 해보니 잘 됩니다.

    3. 사과 이미지의 크기가 셀 보다 크면 그런 현상이 발생합니다. 이미지의 크기를 줄이는 수 밖에 없습니다.
    아니면 이미지를 자바스크립트로 미리 로딩한 뒤
    그 크기를 알아내어 자바스크립트 코드로 테이블을 만들고 이때 셀의 크기를 이미지의 크기보다 크게 정해주는 방법입니다. 현재 굳이 이런방법을 사용할 필요는 없습니다.
    지금은 이벤트, 리스너, 웹 페이지 만들기, 자바스크립트 등을 공부하는 중이니까요.
    회사에서 이런 일을 해야 한다면 그때는 성장헸기 때문에 충분히 여러 방법이 생각날 겁니다.

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18281
343 3장의 실습문제 1 file minju0508 2017.04.02 1335
342 423쪽, 예제9-20 1 사랑나눔 2019.06.27 127
» 425페이지 오픈챌린지09번 질문입니다. 1 멍청이 2019.08.22 179
340 428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3 아인슈페너 2023.11.24 77
339 432PAGE 9장 실습문제 9번 재질문올립니다. 2 asdfSDF 2019.08.23 154
338 432페이지 9장 실습문제9번 질문입니다. 1 asdf 2019.08.22 266
337 465page 오픈챌린지10장 질문입니다. 2 asdf 2019.08.23 413
336 4장 171쪽 2 chu 2022.04.04 57
335 4장 19번 1 .. 2018.09.28 906
334 4장 6번문제 물어볼려고합니다 1 배재한 2019.04.16 566
333 4장 8번 문제 질문드려요! 1 file safd 2017.06.09 683
332 4장 9번 이론문제 2 궁금해요 2022.09.07 121
331 4장 실습문제 7번, 9번 1 ehdtn6288 2018.10.01 428
330 4장 연습문제 8번 질문이요 4 file 코딩은코딩코딩해 2020.04.14 253
329 4장 예제 17번 1 신입 2018.04.19 111
328 4장 예제 4-17질문입니다. 1 file Escui 2021.04.22 145
327 5-3 220page 1 고수가되고싶어요 2020.10.24 141
326 520페이지 에 쿠키쓰기 질문 1 os 2017.12.09 104
325 570page 예제 13-7 1 이주원! 2019.09.03 167
324 5단원 실습 6-2번 질문합니다 2 공부해염 2019.04.13 222
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로