Number Baseball

**작성한 코드내용은 길이 관계상 GitHub에 업로드하였다.

kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com)

 

1) 게임 시작 버튼 만들기 - HTML로 작성
2) 게임 시작 버튼 클릭시 랜덤한 세 자리 숫자 만들기 - click 이벤트로 연결. Math.random()을 써서 랜덤숫자 생성, 세 자리 숫자이므로 0~9까지 출력하면 되는데 Math.floor()와 조합해서 Math.floor(Math.random())으로 0~9까지의 숫자 생성
3) 게임 시작 버튼을 누르면 2)를 수행하고 바로 숫자 입력칸이 팝업되도록 만들기 - prompt를 이용.
4) 만약 3)에서 잘못된 숫자를 입력하면 제대로 된 숫자를 입력할 때 까지 반복해서 prompt창이 팝업되게 작성 - dowhile문 사용
5) 두 배열의 요소들끼리 각각 비교하기 위해 i, j 두개의 for문을 생성
6) 각 입력이 들어올 떄 마다 비교해서 중간결과를 표현해줌 - table을 만들어주자.
7) 재시작버튼 - onclick = "window.location.reload()" 사용 
8) 숫자 입력 칸이 나타나면 자동으로 커서이동 -> input태그에 autofocus사용
9) 더 해볼것 : 중첩된 if문 안에 count++와 중간결과창을 죄다 떄려넣어서 바깥의 다른 if문을 실행함을 방지해보자.

어려웠던 점

strike와 ball의 갯수를 count하고 이후에 출력해주는 과정에서 NaN이 떠서 고생했다.

-> var strike; 만 선언했을때는 NaN이 떳다. var strike=0;으로 할당까지 해주니까 제대로 숫자가 출력되었다.
각 숫자(배열)을 비교할 때 일일이 코드를 짜서 비교하지 않고 for문을 통해서 비교하고 싶었다. for문을 돌리면서 각 배열의 인덱스를 할당하는 과정에서 어떻게 하면 좋을 지 생각해보았다. 

처음엔 prompt를 사용해서 팝업 후 값을 입력받는 코드로 작성하였다. 한 번 값을 비교해줄 때는 그럭저럭 돌아갔으나, 예상과 달리 for문 안에서 돌아가는 prompt문은 중간결과를 나타내주지 못하고 연속으로 9번이 계속 돌아가게 되었다.
결국 prompt를 사용한 코드는 폐기 후 input과 addEventLister를 사용해서 엔터를 치면 값 비교를 시작하는 코드로 갈아엎었다...

또한 갈아엎고 다시 작성하는 중에 (클릭이벤트: 랜덤숫자 생성과 input text창 생성, 키보드이벤트: 값 비교) 로 작성하려고 하였다.
그러나 클릭을 하면 input text창 생성코드

(var newInput = document.createElement("input"), body.appendChild(newInput)) 을 작성해서 js코드에 넣었으나

cannot read properties of undefined (reading 'addeventlistener') 오류가 나를 미친듯이 괴롭혔다...
구글링을 해보니 

1. HTML코드에서 <script type="text/javasctipe"....> 부분을 제일 마지막에 두라는 방법,  

2. window.onload를 스크립트태그에 넣어서 해당 코드가 실행될 떄 까지 JS파일 로딩을 보류하는 방법 

3. undefined가 나타나지 않도록 값을 처음에 할당하는 방법
크게 세가지 해결방법이 있었는데 그 무엇도 내 오류를 해결해주지 못하였다...
결국 버튼을 클릭하면 input text창이 나타나는 방법은 구현하지 못하고 처음부터 input text창과 시작버튼이 같이 떠있도록 만들었다.... 매우 불만족... 더 생각해봐야겠다

해결) 버튼을 누르면 input태그 생성이 아닌 input태그는 먼저 html에 생성해 놓고 display:none과 display:block을 사용해서 버튼과 입력창을 적절히 나타나게 하였다.

재시작 버튼을 처음엔 display: none; 으로 설정 후 이후에 display: block;으로 했을 때 가운데 정렬로 나오지 않고 왼쪽에 붙어서 출력되었다.
이를 해결하려고 컨텐츠 정렬방법을 찾았더니 input태그는 기본적으로 inline속성이기 때문에 display: inline-block;으로 설정해 주어야 가운데정렬이 가능하다.
https://stackoverflow.com/questions/26288241/how-can-i-make-inputs-display-inline

 

중첩된 if문 내에서는 continue와 break가 먹히지 않는다. 이를 해결하기 위한 방법으로는 라벨을 달아주거나 그런 상황이 나오지 않도록 코딩을 하는 것이 좋다.

addEventhandler + for반복문 -> 클로저개념 정리
https://blog.outsider.ne.kr/506