숫자 야구 게임 | 홈런인지 검사해서 표시하기

홈런 검사 하기

⭐️ it 중첩문 줄이기

$form.addEventListener('submit', (event) => {
  event.preventDefault(); // 기본 동작 막기
  console.log('submit');
  const value = $input.value;
  $input.value = '';
  if(!checkInput(value)){
    return;
  }
  // 배열을 문자로
  if(answer.join('') === value) {	// [3, 1, 4, 6] -> '3146'
    $logs.textContent = '홈런!';
    return;
  }
  if(tries.length >= 9){
    const message = document.createTextNode(`패배! 정답은 ${answer.join('')}`);
    $logs.appendChild(message);
    return;
  }
  tries.push(value);
});

1. join()

배열을 문자열로 바꾸는 메서드

2. split()

문자열을 배열로 바꾸는 메서드

'1'을 기준으로 나누기 때문에 ['3','46'] 값이 나온다.

'3146'.split('1'); // ['3','46']

---

🔗 join(), split() 복습하러 가기

---

📍 document.createTextNode, document.createElement

각각 텍스트와 태그를 만드는 메서드이다.
단, 다른 태그에 append 나 appendChild 를 하기 전까지는 화면에 보이지 않는다.

1. document.createTextNode(),

텍스트 = document.createTextNode(데이터);

텍스느 노드를 생성한다.

2. Document.createElement()

let element = document.createElement(tagName[, options]);

지정한 tagName의 HTML 요소를 만들어 반환한다.
tagName을 인식할 수 없으면 HTMLUnknownElement (en-US)를 대신 반환한다.

---

📍 append(), appendChild()

두 메서드는 모두 부모 자식에 자식 노드를 추가하는 메서드이나 차이점은 자식 노드를 추가하는 방식이다.

1. append()

마지막 자식 뒤에 개체 또는 문자열 개체 Element.append()집합을 삽입합니다.
문자열 개체는 동등한 노드로 삽입됩니다.
텍스트를 추가할 때 document.createTextNode 대신 문자열을 바로 넣어도 된다.

✅ 노드 객체 (Node Object) 추가

✅ 텍스트 타입 (DOM String) 추가

✅ 여러개의 자식 요소를 추가

append 는 return 값을 반환하지 않는다.

2. appendChild()

• append 와 다르게 노드 객체(node object) 만 받을 수 있다.
• 오직 하나의 노드 만 추가할 수 있다.

✅ 노드 객체 (Node Object) 추가

✅ 텍스트 타입 (DOM String) 추가

🚨 type error 발생
node 유형이 아니라서 appendChild 를 실행하지 못했다는 타입 에러가 발생한다.

---

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

❓ 10번째 시도에서 실패시 패배 문구가 나오도록 순서도를 그렸는데 왜 >= 9 일까?