파일 목록
-
📁 이후
-
📁 jquery
-
📁 js
- ex10-1.html
- ex10-2.html
- ex10-5.html
- ex8-11.html
- Ex8-4.html
- Example8-2.html
- example9-18.html
- example9-19.html
- Examplt8-3.html
- exapmle9-21.html
- practic9-4.html
- practice 9-6.html
- practice8-1-3.html
- practice8-2.html
- practice8-3.html
- practice8-5.html
- practice8-6.html
- practice8-7.html
- practice9-1.html
- practice9-5.html
- practice9-8.html
- test6.html
- Test8.html
- test9.html
- test9_10.html
- test9_3.html
- test_9._0.html
- win1_ob2.html
- 챌린지 copy.html
-
- desktop.ini
- ex10-1,2.html
- ex10-3.html
- ex10-5.html
- Title.png
.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>키 이벤트 응용</title>
<style>
td {
width: 50px;
height: 50px;
border: 1px solid orchid;
}
</style>
<script>
let tds;
let prevIndex = 0, index = 0;
window.onload = function () {
tds = document.getElementsByTagName("td");
tds[index].style.backgroundColor = "orchid";
}
window.onkeydown = function (e) {
switch (e.key) {
case "ArrowDown":
if (index / 3 >= 2) return;
index += 3;
break;
case "ArrowUp":
if (index / 3 < 1) return;
index -= 3;
break;
case "ArrowLeft":
if (index % 3 == 0) return;
index--;
break;
case "ArrowRight":
if (index % 3 == 2) return;
index++;
break;
}
tds[index].style.backgroundColor = "orchid";
tds[prevIndex].style.backgroundColor = "white";
prevIndex = index;
}
</script>
</head>
<body>
<h3>화살표 키로 셀 이동하기</h3>
<hr>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>