WebDevelop 수업 - Day19 JS : Wordle Game Finish, Math함수, DataSet

< 게임룰 >

자리도 맞고 단어도 맞으면 : 초록색
자리는 틀리고 단어가 맞으면 : 노란색
다 틀리면 : 회색

• 이것에 대한 추측을 다음 줄, 다음 줄씩... 계속 진행한다.

• words : 규칙상 길이가 5자인 영어단어를 나열해야한다. 사용 될 단어를 배열로 만들자.
• word : 단어 하나를 정답으로 지정을 해놓기 위해 생성.

• 단어 하나를 start 버튼을 눌렀을때 랜덤으로 나오게 하도록 하자.
• words의 0번 ~ 11번의 인덱스는 정수인데 그것들중 아무거나 랜덤으로 뽑자.
  => Math.random(); 사용

Math 함수

Math.random() => 난수

: 0이상 1미만의 수가 나온다.

• 0.0~0.9999.. 사이 중 랜덤한 수를 뽑아준다.
  

Math.ceil(x)

: x수를 올림한다.

Math.floor(x)

: x수를 내림한다.

Math.round(x)

: x수를 반올림한다.

---

-> words 배열의 길이 = 12
Math.random() * words.length;을 해보자.

• Math.random() * words.length; 해서 나올 수 있는 최소 값 : 0
• Math.random() * words.length; 해서 나올 수 있는 최대 값 : 11.999
  => 12는 절대 나올 수 없다.
  Math.random() * 배열의 길이 를 해보니 최소 최대 값이 나와버리네,
  그 값에서 소수를 버려버리면 인덱스의 값이랑 같네? 소수를 버리고 랜덤으로 뽑자.
  내림하는 Math.floor를 사용하자!

-> 랜덤하게 단어를 뽑자.

• console에 찍어보니 start 버튼 클릭시 랜덤한 단어가 나오게 된다.

그렇게 되면 word라는 전역변수안에 word가 저장이 되어있을 것이다.

---

< keyboard >
키보드를 클릭하면 하나씩 들어가야 한다.
키보드 하나 하나씩 addEvent를 걸기에는 너무 힘들다. dataset을 배워보자.

dataset

: html태그에 'data-A' 라고 되어있는 속성 값에는 '그 요소'.dataset['A']로 접근할 수 있다.

이해하기위해 예시를 들어보자.

data-message="Hello" 을 주었다.

• js에서 속성 값에 접근을 하고 브라우저에서 확인 해보자.
  
• start 버튼 클릭시 alert가 발생되는 것을 확인 할 수 있다.

• 개발자도구로 확인해보니 data-key="value" 가 들어간 것을 볼 수 있다.
• 쉽게 말해 주거니 받거니 할 수 있다라는 말이다.
• key와 value의 값으로 이해를 하면 더 쉬운 것 같다.

• 키보드 친구들한데 data-key값을 해당 알파펫으로 주었다.

window.document.body.querySelectorAll('[data-key]');

• data-key도 속성이기 때문에 CSS 선택자 중 속성 선택자를 사용한다.
• 이 선택자에 의해 모든 요소가 다 잡히게 된다.

• console 찍어보았을 때 28개 뜨게 된다.

• querySelectorAll는 Nodelist를 반환한다.
  Nodelist에는 foreach가 있다. (반환값 없음).
  여기서 x는 data-key라는 속성을 가지는 div요소!! 하나하나이다.

=> 키보드를 눌렀을 때 나오는 값들을 일단 출력해보자.

• console.log(x.dataset['key']); : data-key 값을 가져오겠다는 의미이다.
• 키를 눌렀을 때 해당하는 값들이 콘솔에 찍힌다.

=> 키를 눌렀을 때 각 칸에 값을 넣자.

• numbers 의 길이를 재보니 30이 나오면 된다.

• 키보드를 눌렀을때 인덱스 값이 늘어나는 것을 확인 할 수 있다.

=>>>>>

• 함수 바깥에 let numberIndex = 0; : 0으로 두는 변수를 설정하는게 키포인트다. 이것때문에 푸는데 오래걸렸다.....
• 입력한 대로 값이 들어가게 된다.

바로 색깔을 보여주는 것이 아니라 한 줄이 완성되었을 때 보여준다.

correct : 다 맞을 때 
incorrect : 다 틀릴 떄 
contain : 알파벳이 포함만 되있을 떄 

• 3가지색과 data-status key설정 완료

첫번쨰 줄이 끝났다, 두번쨰 줄이 끝났다라는 것은 언제 판단을 해야하는것인가?

• 2가지 방법 위에것으로 수정!
  
• 한줄에 5개씩 이니깐 5의 배수로 접근해서
  numberIndex를 5로 니누었을 때 나머지가 0인 것을 골라내서 출력하면 된다.

막간 scope에 대해

• word의 scope는 노란색 화살표고 그 스코프안에서는 얼마든지 가져다 쓸 수 있다는 것을 의미한다.