JavaScript

DOM 객체 다루기 - 끝말잇기 게임, 쿵쿵따

sangchu 2023. 1. 19. 17:01

순서도

순서를 넘기는 경우 아래와 같은 순서를 거쳐야한다.

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>끝말잇기</title>
  </head>

  <body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어: <span id="word"></span></div>
    <input type="text" />
    <button>입력</button>
    <script>
      const number = Number(prompt("몇 명이 참가하나요?"));
      const $button = document.querySelector("button");
      const $input = document.querySelector("input");
      const $word = document.querySelector("#word");
      const $order = document.querySelector("#order");
      let word; // 제시어
      let newWord; // 새로 입력한 단어

      const onClickButton = () => {
        if (!word || word[word.length - 1] === newWord[0]) {
          // 제시어가 없거나 올바르게 입력했을 때
          // 제시어(첫번째 순서)가 있는지 확인하는게 우선순위 높으므로 먼저 판별하도록 함
          word = newWord; // 제시어를 현재 단어로
          $word.textContent = word; // 화면에 띄우기
          const order = Number($order.textContent); // 현재 순서
          // 순서 정하기
          if (order + 1 > number) {
            $order.textContent = 1;
          } else {
            $order.textContent = order + 1;
          }
        } else {
          // 올바르게 입력하지 않았을때
          alert("올바르지 않은 단어입니다!");
        }
        
        // 위 과정이 다 수행됐을 때
        $input.value = ""; // 입력창 비우기
        $input.focus(); // 입력창 focus
      };

      const onInput = (event) => {
        newWord = event.target.value; // 현재 단어를 현재 input에 있는 단어로
      };

      $button.addEventListener("click", onClickButton);
      $input.addEventListener("input", onInput);
    </script>
  </body>
</html>

 

개념 정리

대화상자 띄우기

- promt : 대화 상자에 사용자가 입력한 메시지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null이 전달된다.

- alert : 단순 알림창. 호출하면 확인을 누르기 전까지 다음 스크립트 실행이 중단된다.

- confirm : 사용자에게 확인을 받을 때 사용. 확인을 누르면 true, 취소를 누르면 false를 전달한다.

 

HTML 태그 선택하기

document.querySelector("선택자");
document.querySelectorAll("선택자");
document.querySelector("#아이디");
document.querySelector(".클래스");

document.querySelector("span#order"); 처럼 붙여써서 id가 order인 span을 가져올 수 있다.

document.querySelector("선택자 내부선택자 내부선택자...");

공백이 있으면 자손이다. 너무 길어진다면 id 하나 주는 식으로 하는 것을 추천한다.

만약 내가 자식만 표현하고 싶으면 "선택자>자식" 이렇게 해야한다.(CSS랑 똑같다)

 

태그에 이벤트 달기

태그.addEventListener("이벤트 이름", 리스너함수);

리스너 함수는 이벤트가 발생할 때 실행되는 함수이다.

첫번째 인수로 이벤트 이름을 넣고, 두 번째 인수로 리스너 함수를 넣는다. 

이때, 리스너함수에 ()를 붙이면 안된다. ()는 함수를 호출한다는 뜻으로, 그냥 곧바로 undefiend가 반환되기 때문이다.

const 리스너함수 = (event) => {
	console.log(event.target.value);
};

리스너 함수에는 매개변수로 event 객체를 제공해서 이벤트와 관련된 정보를 얻을 수 있다.

여기서 event.target은 이벤트가 발생한 대상 태그를 가리킨다.

입력창.value; // 입력창의 값을 가져옴
입력창.value = 값; // 입력창에 값을 넣음

입력창에 입력된 값은 value 속성으로 가져온다.

태그.textContnet; // 태그 내부의 문자를 가져옴
태그.textContent = 값; // 태그 내부의 문자를 해당 값으로 설정함

입력 태그(input, select, textarea 등)가 아닌 일반 태그들의 내부 값을 가져올 때는 value가 아니라 textContent 속성을 사용한다.

입력창.focus();

입력창이나 버튼의 경우 focus 메서드를 호출하면 해당 태그가 하이라이트된다.

 

 

Self Check 쿵쿵따 게임 만들기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>쿵쿵따</title>
  </head>
  <body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어: <span id="word"></span></div>
    <input type="text" />
    <button>버튼</button>
  </body>
  <script>
  const $input = document.querySelector("input");
const $button = document.querySelector("button");
const $order = document.querySelector("#order");
const $word = document.querySelector("#word");
const number = Number(prompt("몇 명이 참가하나요?"));
let word; // 제시어
let newWord; // 현재 단어
let order = Number($order.textContent);

if (number) {
  const onClickButton = () => {
    if (
      newWord.length === 3 &&
      (!word || word[word.length - 1] === newWord[0])
    ) {
      word = newWord;
      $word.textContent = word;
      order++;
      if (order > number) order = 1;
      $order.textContent = order;
    } else {
      alert("올바르게 입력하지 않았습니다.");
    }
    $input.value = "";
    $input.focus();
  };
  const onInput = (e) => {
    newWord = e.target.value;
  };

  $button.addEventListener("click", onClickButton);
  $input.addEventListener("input", onInput);
}
</script>
</html>

끝말잇기와 다른 점은 쿵쿵따는 꼭 세글자여야한다. 그 조건을 넣었다.

 

그리고 이 Self Check에서는 처음에 몇 멍이 참가할 지 선택할 때 사용자가 취소를 누르면 코드를 실행되지 않게 처리하라고 해서 코드 전체에 if문으로 감싸주었다.

만약 prompt 에서 취소를 누르면 null값이 전달이 되고, 그 값이 Number로 형변환 될때 NaN이 되므로 if문 내부의 코드가 실행되지 않게된다.

 

 

 

참고: Let’s Get IT 자바스크립트 프로그래밍 책

'JavaScript' 카테고리의 다른 글

함수 호출한 것을 보면, 그 자리에 return한 값을 대체해보자.  (0) 2023.01.31
함수 사용하기 - 계산기 (고차 함수 사용, if 문 중첩 제거)  (0) 2023.01.21
순서도 그리기  (0) 2023.01.19
[모던 자바스크립트 Deep Dive] 18장 - 함수와 일급 객체  (0) 2023.01.09
[모던 자바스크립트 Deep Dive] 17장 - 생성자 함수에 의한 객체 생성  (2) 2023.01.09

'JavaScript'의 다른글

  • 현재글DOM 객체 다루기 - 끝말잇기 게임, 쿵쿵따

관련글

티스토리툴바