쿵쿵따 게임

ctrl + b : 파일,폴더창 여닫기

---

조건

 

< 내가 만들어본 쿵쿵따>

많은 것들을 다했지만... 결국 if문 한개를 onClickButton 함수에 추가해주었다.

prompt 취소 창을 선택하면 null값이 나오는 건 알겠는데 어떻게 화면을 못바꾸게 하는지 모르겠다. 

ㅡ> 전체를 조건식에 가둬서 number에 null 값이 들어가면 아예 실행이 안되도록 했다.

 

그런데 저 $input.value.length 로 조건비교 하는게 맞나 싶다.

ㅡ> newWord.length를 기존 조건식에 &&으로 우선순위로 추가

 

$input.value를 ' '로 초기화 한다고해서 단어가 초기화 안되고.... 값이 제시어로 올라가버리던데

(이건 취급 안해주더)

<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; // 새로 입력한 단어
  
  if(number === null){
   number // prompt 다시 출력해라
  }
 
  const onClickButton = () => {
    if($input.value.length !== 3){
        alert('다시 입력하세요!')
        $input.value ='';
      if (!word || word[word.length - 1] === newWord[0]) {
        word = newWord
        $word.textContent = word; // 화면을 바꿔주는 textContent
         // input 등 특정태그만 textContent 대신 value 사용.
        const order = Number($order.textContent);// 현재순서
        if (order + 1 > number) {
          $order.textContent = 1;
        } else {
          $order.textContent = order + 1
        }
      } else { // 올바르지 않다.
          alert("틀렸습니다!");
          $input.focus()
      }
      $input.value = '';
      $input.focus()
    }   
    };
    const onInput = (event) => {
      newWord = event.target.value;
    };
    
    $input.addEventListener('input', onInput);
    $button.addEventListener('click', onClickButton)
</script>

---

<정답> (모두 두번 반복했을 때 씹히는 건 언급도 안하셔서 그냥 나도 넘어갈련다.)

if number에 null이 들어오면 조건문이 false가 됨으로 아예 실행 x

<script>
  const number = Number(prompt('몇 명 참가하나요?'))
  if (number) {
    
    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] && newWord.length === 3)) {
          word = newWord
          $word.textContent = word; // 화면을 바꿔주는 textContent
          // input 등 특정태그만 textContent 대신 value 사용.
          const order = Number($order.textContent);// 현재순서
          if (order + 1 > number) {
            $order.textContent = 1;
          } else {
            $order.textContent = order + 1
          }
        } else { // 올바르지 않다.
          alert("틀렸습니다!");
          $input.focus()
        }
        $input.value = '';
        $input.focus()
      
    };
    const onInput = (event) => {
      newWord = event.target.value;
    };
 
    $input.addEventListener('input', onInput);
    $button.addEventListener('click', onClickButton)
  }
</script>

---

prompt 함수란?

JavaScript에서 prompt() 함수는 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용됩니다. 프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소" 버튼을 클릭해야 합니다.

프롬프트 상자 예시

이번 포스팅에서는 prompt() 함수를 다루는 방법을 소개합니다.

---

prompt() 함수 설명

prompt() 함수는 두 개의 인수를 가지는 함수이며, 사용하는 즉시 프롬프트 상자가 화면에 표시됩니다.

let promptObj = prompt(message, default);

첫 번째 인수는 프롬프트 상자에 표시되는 레이블이며, 두 번째 인수는 프롬프트 상자의 텍스트 박스에 표시되는 문자열입니다.

 

두 개의 인수는 생략 가능하며, 다음은 크롬 브라우저에서 prompt() 함수를 사용하는 예제입니다.

let promptObj = prompt('값을 입력하세요', 'Default Value');

실행 결과

위 사진에서 알 수 있듯이 프롬프트 상자는 두 개의 버튼 "확인"과 "취소"가 있습니다. "확인" 버튼을 클릭하면 사용자가 입력한 값을 문자열로 반환하며 "취소" 버튼을 클릭하면 null을 반환합니다.

 

▶ "확인" 버튼을 클릭한 경우

 

▶ "취소" 버튼을 클릭한 경우

그리고 prompt() 함수를 호출하면, 프롬프트 상자가 화면에 표시되고 prompt() 이후에 작성된 코드는 일시 중지됩니다. 프롬프트 상자가 닫히면 prompt() 함수 이후에 작성된 코드가 동작합니다.

---

prompt() 함수 사용 예시

▶ 사용자 입력을 숫자로 변환

프롬프트 상자에서 "확인" 버튼을 클릭하면 사용자가 입력한 값을 반환하는데 값 유형이 문자열입니다. 사용자 입력 값을 숫자로 얻고 싶은 경우 타입을 변환해야 합니다.

 

다음은 prompt() 함수를 사용하여 사용자에게 나이를 묻는 예제입니다. 나이가 19세 이상인 경우 alert() 창을 호출합니다.

let agePrompt = prompt('나이를 입력하세요.');

let age = Number(agePrompt);

if(age >= 20) {
  alert('통과');
}

출처: https://developer-talk.tistory.com/295

---