JavaScript 입문 (끝말잇기 게임): 순서도 업데이트 및 첫번째 사람 판단하기 - 제시어 저장, 제시어 화면 변경, input창 Clear

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지난시간 순서도를 좀 더 구체적으로 만들어 보는 훈련을 해 보았습니다. 순서도는 지속적으로 코딩을 해가면서 구체적으로 항상 업데이트 되야 합니다. 

 

이제 코딩을 시작합니다. 

 

▒ 첫번째 사람 판단하기 

 

1. 첫번째 사람인지 아닌지 판단

 

첫번째 사람을 판단할 수 있는 기준은 무엇일까요? 저도 처음에는 방법을 알 수 없기에 참조를 해 보았습니다.

첫번째 제시어를 말하는 사람이 첫번째 사람이겠죠! 이는 곧 화면에 제시어가 없는 상태에서 시작하는 경우입니다. 그림을 보고 정리를 해 보죠.

 위 그림에서 첫번째 사람을 유추해 보고 순서도에 반영합니다. 

 

① 제시어에 단어가 없다.

② 단어가 말해지는 대로 저장하고 활용해야 한다. 

 

순서도를 업데이트 해 보겠습니다. 

첫번째 사람이라는 것은 곧 제시어가 있는가 없는가의 문제로 위와 같이 순서도 내용을 바꿀수 있습니다. 제시어가 있는지 없는지를 if문을 통해 코딩을 해 봅니다. 순서도에서 아래와 같이 나눈 이유가 곧 if문을 사용하기 위함입니다. 

 

2. if ~ else 문을 이용하여 첫번재 사람 정의

 

<script>태그를 정리해 보있습니다. 

 

상기 그림에서

① 향후 제시어를 저장하고 활용하기 위하여 변수로 설정 

② 제시어가 없다를 word에 !를 붙혀서 반대로 만들고 그게 사실이면 if문 true지역에 아니면 (제시어가 있으면) false 지역으로 

 

▶ 첫번째 제시어와 입력되는 단어의 변수화

 

첫번째 제시어의 변수명을 word로 사용하였고 그 후 제시되는 새로운 단어의 변수명을 선언합니다. 

▶ 입력되는 단어가 제시어가 되고 input 화면 내용 삭제

 

첫번째 제시어 (word)가 새로입력되는 단어(newWord)가 들어오면서 다시 제시어(word)가 됩니다. 다음 <span> 태그에서 화면이 바뀌는 것을 코딩하고 (textContent) input창은 화면이 비워지도록 해야합니다. 

 

① if문에서 입력한 단어가 제시어가 되는 코딩은 다음과 같이 합니다. 

 

② 제시어가 되는 순간 화면에 반영하기 

 

화면에 반영하기 위해서는 id가 word인 <span>태그를 선택해서 화면을 바꾸면 됩니다. 이때 textContent라는 명령어를 사용하여 제시어를 넣어주는 역할을 합니다. 

 

<span>태그 선택은 다음과 같이 합니다.

<span> 태그안에 제시어를 화면에 반영하는 방법은 다음과 같습니다. 

textContent를 사용하여 다음과 같이 제시어 화면을 바꿀수 있었습니다. 

그런데 input창에 있는 글씨가 사라져야 합니다. 이는 <input>태그를 선택하고 value를 없애연 됩니다. 

다음 시간에는 else문을 작성해 보도록 하겠습니다. 참고로 input 콜백함수에 새로운 제시어가 되는 단어인 newWord의 값을 활성화시키기 위하여 다음과 같이 target.value를 해줍니다.