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