<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td { width: 50px; height: 50px; border: 1px solid orchid;}
</style>
</head>
<body>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<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>
</body>
</html>
이런느낌에 예제인데요 이것만 너무 이해가 안돼서 질문이 많습니다ㅜㅜ
1. tds[index]?
index = 0 이니까 tds(모든td태그)에 []이렇게 넣으니까 td의 0번째인 첫번째 td를 말하는거 같은데
변수에 0을 집어 넣고 그걸 배열에 넣어서 0번째를 찾은거다 라는 제 추측이 맞는건지 모르겠어요 맞나요? 아니라면 어떤방식으로 찾은건지 알려주세요
2. preIndex
마찬가지로 preIndex 가 어떻게 키보드로 움직이지 않은 모든 td를 나타나게 됐는지도 모르겠습니다.
3. switch 문에서 if문
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;
}
이렇게 나와있던데
if문에 index가 어떨때 어떤값이 들어가는지를 모르겠습니다.
그리고 어떤값이 들어간다 하더라도
(index를3으로나눈게 2와 같거나 클경우 3더한다)등등의 이런 if문이
어떤원리로 키보드 방향키를 눌렀을 때 옯겨지고 하는지 전혀 이해못했습니다.
질문이 많아 죄송합니다 ㅜㅜ 도와주세요
간단히 질문에 답을 하겠지만, 혹시 한성대학교 학생이라면 제 연구실로 찾아오면 디버깅하는 방법 등 자세히 설명해 드리겠습니다.
2. 다음 코드는
window.onload = function(){
tds = document.getElementsByTagName("td")
tds[index].style.backgroundColor = 'orchid'
}
웹브라우저에 HTML 파일을 완전히 출력한 시점(load 이벤트 발생)에 함수가 실행되도록 설정하는 것이고, 함수는 0~9까지의 수 중에서 0의 부분만(테이블 셀) 핑크 색으로 칠하는 코드입니다.
이를 위해 index =0인 것이지요.
3. index 는 사용자가 키를 움직일 때마다 값이 계속 바뀌도록 window.onkeydown = function(e){ ... } 에 코딩되었습니다.
이 코든 현재 index 값에 따라 그리고 입력된 키에 따라 index 값을 변경합니다. 만일 오른쪽 키가 눌러 졌다면, case "ArrowRight" :의 코드가 실행됩니다.
이 코드는 단순히 index 값을 1 증가시키면 될 것이지만, 만일 2, 5, 8 처럼 맨 오른쪽 박스를 가리킨다면(이들의 공통점은 3으로 나누었을 때 나머지가 2인 경우) 더 이상 오른쪽으로 갈 수 없습니다. 그런 경우 index 값을 바꾸지 않고 그냥 return 합니다. 그렇지 않은 경우index를 1증가시켜 오른쯕 박스가 선택되도록 합니다.
4. 다음 2 문장은 테이블 셀의 바탕색을 바꾸는 코드입니다.
tds[index].style.backgroundColor = 'orchid'
tds[prevIndex].style.backgroundColor = 'white'
이전에 orchid 색으로 칠해져 있던 셀의 다시 white로 칠하고, 키 입력에 의해 새로 선택된 셀에는 orchid 색으로 칠합니다.
나머지 테이블 셀에 대해서는 아무 변경도 하지 않습니다.
지면 관계상 설명을 더 자세히 하지 못한점 이해 부탁합니다.
구체적인 질문이 있으면 답하기 좋을 것입니다
질문이 있으면 또 올려 주세요.
이상입니다.