11.3

차례 바꾸면서 빈칸에 O와 X 표시하기

화면에서 표의 빈칸을 클릭하면 차례대로 O와 X가 입력되도록 코드를 작성해 보겠습니다.

① 차례(turn)는 O부터 시작합니다. 입력 모양이 O 아니면 X이므로 누구의 차례(turn)인지는 O와 X로 구분합니다.

② 클릭한 칸이 비어 있는지 확인합니다. 빈칸이 아니면 콘솔에 메시지만 출력합니다. 빈칸이면 콘솔에 메시지를 출력하고 차례에 해당하는 O나 X를 표시합니다.

③ 클릭한 칸에 O나 X를 입력하려면 td 태그에 클릭 이벤트 리스너를 붙여야 합니다. 이벤트 리스너는 td 태그를 생성할 때 바로 붙입니다. 실제 화면에 태그가 표시되기 전이라도 이벤트 리스너를 미리 붙일 수 있습니다.

④ O와 X를 번갈아 가며 표시하도록 차례를 넘깁니다. callback() 함수 마지막에서 turn이 O면 X로, X면 O로 바꿉니다.