메뉴 건너뛰기

Home
2019.08.22 01:05

425페이지 오픈챌린지09번 질문입니다.

멍청이
조회 수 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. 코드를 실행후, 사과이미지를 클릭시 셀크기의 변형이 이루어지는대 이를 막을방법이 없을까요??

위로 아래로 댓글로 가기 수정 삭제
?
에디터 사용하기 닫기
Comments '1'
  • ?
    관리자 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
303 연습문제 8장 이론문제 2번 답을 알고 싶습니다. 1 khe 2017.08.18 815
302 연습문제 5장 10번 문제 질문드립니다. 1 . 2020.10.08 247
301 연습문제 4장 8번문제 1 file 도라에몽 2020.10.02 263
300 연습문제 3장 p.155 5번 문제 1 열심히해보자 2020.10.07 420
299 연습문제 3장 5번 문제 1 seungjun 2023.10.26 129
298 연습문제 3장 2번 질문합니다! 1 file KHE 2022.09.08 152
297 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
296 안녕하세요. 몽구스 다른 컴퓨터에서 서버 접속 문의 드립니다. 1 file 흙 2018.03.14 225
295 안녕하세요 처음하는 사람입니다 교재 구입하였습니다 2 성현군 2017.06.29 330
294 안녕하세요 질문드립니다! 2 Hola 2018.10.17 418
293 안녕하세요 관리자님 실습 문제 짝수본 zip 파일은 제공 되지 않는 건가요? 1 문의 2022.02.25 210
292 실제로 사용해봤습니다 ! ㅠㅠ 1 갱자데쓰 2018.02.06 120
291 실습문제답도 제공이 안되는 건가요? 2 아침이 2019.01.07 311
290 실습문제 홀수번 정답 ㅁㅁ 2017.09.24 635
289 실습문제 짝수번 이미지들은 다운할 수 없나요? 공부하면성공한다 2018.10.02 366
288 실습문제 9-8번 질문 있습니다. 2 muuum 2018.10.24 326
287 실습문제 9-7번 답안지를 보고 질문있습니다. 2 muuum 2018.10.23 300
286 실습문제 9-6번 문제중에 5% 증가는 어떻게 해야하나요? 2 muuum 2018.10.24 150
285 실습문제 8장 3번 문제 질문입니다. 2 Joahgng 2018.12.06 261
284 실습문제 8-2 (3) 13412 2018.11.08 15898
목록
쓰기
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로