3. 숫자야구

2021.04.29
소스코드: number-baseball.html

---

플로우

최초 플로우

두 번째 flow(3진 아웃 추가)

배운 개념

1. event.preventDefault()
2. Math.random()
3. [indexOf, includes](#indexOf와 -includes)
4. [Set()](#new Set(input).size!==4)
5. join()
6. append()

event.preventDefault();

기본 동작 막기(메소드이며 form태그의 기본동작인 깜빡거림을 막을 수 있다.)

---

• form태그의 event.target은 배열 식으로 내부 요소들에 접근이 가능하다. 예를 들면 event.target[0], event.target[1]식으로 각각의 요소를 SELECT할 수 있다.

Math.random();

for (let n = 0; n < 4; n++) {
  const index = Math.floor(Math.random() * (numbers.length - n));
  answer.push(numbers[index]);
  numbers.splice(index, 1);
}

무작위로 숫자를 뽑을 때는 Math.random메서드를 사용한다. 단, 뽑은 값은 정수가 아니므로 정수가 필요할 때는 Math.floor나 Math.ceil같은 메서드를 사용해 정수로 바꿔야 한다.

---

indexOf와 includes

"2345".indexOf(3) === 1;
"2345".indexOf(6) === -1;
["2", "3", "4", "5"].indexOf("5") === 3;
["2", "3", "4", "5"].indexOf(5) === -1; // 요소의 자료형까지 같아야 한다.
"2345".includes(3) === true;
["2", "3", "4", "5"].includes(5) === false;

• 공통점
  - 배열이나 문자열에 원하는 값이 들어있는지 찾는 메서드다.
• indexOf: 원하는 값이 들어있다면 해당 인덱스까지 알려주고, 들어있지 않다면 -1반환
• includes: 더 직관적으로 true/false를 반환한다.

if (new Set(input).size !== 4) {
  return alert("중복되지 않게 입력해주세요");
}

---

new Set(input).size!==4

• Set은 중복을 허용하지 않는 특수한 배열이다.
  -new Set('1231')을 하면 Set 내부에는 1,2,3만 들어간다. 그러므로 위의 코드에 중복이 없다면 4가 나오지만 중복이 있다면 4보다 작은 값이 나올 것이다.
  - Set의 길이를 구할 때는 .length가 아닌 .size로 배열의 길이를 잰다.
• undefined를 return한다. 즉 return undefined와 같고, undefined는 if문에서 false로 처리하므로 checkInput()함수에 false로 반환한다.

if (answer.join("") === value) {
  $logs.textContent = "홈런!";
  return;
}

---

join()

배열을 문자열로 바꾸는 메소드.
(‘‘)하면 [3,1,4,5]라는 배열이 ‘3145’라는 문자열로 바뀜. 안하면 ‘3,1,4,5’로 불러옴.<기본 값 = (‘,’)>

---

if (tries.length >= 9) {
  const message = document.createTextNode(
    "패배. 정답은 ${answer.join("")}"
    );
    $logs.appendChild(message);
    return;
    }

• tries.length>=를 한 이유: tries=[]에 9개가 차 있다면, 10번째 시도 내에서 성공하면 홈런이고 9개가 이미 차있는 상태에서 10번째 시도했을 때 결국 성공하지 못했다면 패배로 출력하도록 하기 위함이다.
• append()
  - append메서드는 새로 만들고 싶은 값을 바로 옆에 추가한다.
  - createElement를 통해 각각의 텍스트와 html요소를 지정하여 추가가 가능하다.
  - appendChild()는 createTextNode를 사용하고 변수에 저장 후에 변수를 인자로 넣어야한다. –> append는 appendChild를 보완해서 만든거다.