SOCO

베스킨라빈스 31 (혼자)_재료 본문

프론트/java script 재료

베스킨라빈스 31 (혼자)_재료

ssooda 2021. 6. 8. 12:23

베스킨 라빈스 31게임 도전

고민 1. 숫자를 어떻게 받아야할까

방법1)input 3개를 만든다 

 

방법2) 채택

input 1개를 만든다사용자에게 각 숫자 사이에 쉼표를 입력하라고 한다.사용자에게서 받은 문자열을 쉼표를 기준으로 split함으로써 배열 형태로 만든다

<input id = "reply" type="text">

<script>
  let reply 1 = [];
  reply1 = document.querySelector("#reply").value.split(',');
</script>

 

고민 2. 앞 순서 사람과의 중복 확인

방법1)

앞 순서의 사용자가 입력한 모든 값을 저장하는 배열을 만든다. : push

해당 차례의 사용자가 입력한 값이 배열내에 포함되어있는지 확인한다. : includes

 

방법2)

1~31까지의 숫자가 들어있는 배열을 만든다 : Array(31).fill().map

앞 순서의 사용자가 입력한 모든 값을 배열에서 제외한다 : splice

해당 차례의 사용자가 입력한 값이 배열내에 포함되어있지 않은지 확인한다

 

방법3) 채택

앞 사람이 선택한 값을 다른 배열(reply2)로 옮긴다.

해당 차례의 사용자가 입력한 값을 reply1에 저장한다.

바로 직전 사용자가 입력한 마지막 값+1에서 +3까지의 범위 내에 있는지 확인한다.

-배열 reply2로 옮기고 reply1은 비우기

<script>
  let reply2=[];
  reply1.map((element, index) => 
  reply2.push(element));
  reply1 = [];
</script>

-범위 내의 값인지 검사하기

if(reply2[0]!==undefined){
  let i=0;
  while(i<reply1.length-1){
    if(reply2[reply2.length-1]>=reply1[i] || reply2[reply2.length-1]+3<reply1[i]){
    alert ('범위 내의 값이 아닙니다')
    }
    i++;
   }
 }

*배열명.length 해야하는데 length만 해서 계속 오류 뜸

*빈 배열은 index가 0일 때 undefined

*while문 쓸 때 i++하는 걸 잊지 말 것!!

 

발견1.

input과 button이 같이 있어서 form으로 감싼 다음,

form에 이번트를 달아주려고 했는데,

button이 두 개다 보니, 버튼1만 누른 경우에도 버튼2까지 같이 작동하는 오류가 발생함.

그래서 button에 각각 id를 붙이고, 별도로 이벤트를 달아줌

+ form과 submit을 사용하는 경우 클릭 뿐만 아니라 ENTER키도 인식함.

+input과 click을 사용하는 경우에는 별도로 ENTER키 이벤트도 달아줘야했음

->word relay 2에 적용해둠

 

발견2.

append(``)에서만 백틱을 쓸 때 ${}을 사용할 수 있는 줄 알았는데,

alert(``)에서도 백틱안에 ${}을 사용함으로써 변수를 가져올 수 있었음

 

발견3.

console창에서

"4"==4가 true가 되길래 의심없이 해당 식을 if문 조건식으로 사용했었는데,

오류가 계속 발생함

다른 곳에서 오류를 찾아보다가 이상해서

"4"!==4도 해보니 true가 나옴...

Number("4")!==4로 해보고 조건식을 바꿈

 

나중에 확인하니 ==의 반대가 !==라고 착각함..

==의 반대는 != 이고

===의 반대가 !==임

**!=와 !==의 차이 : https://ssooccoo.tistory.com/18

 

==와 != vs ===와 !==

내가 한 실수 console창에 "4" == 4가 true로 나옴 "4" !==4도 true로 나옴 그래서 Number('"4" ) !== 4로 비교하는 코드를 짬 내가 실수한 부분은 ==와 대응하는 건 !=이고, ===와 대응하는 건 !==이라는 걸 놓침..

ssooccoo.tistory.com

 

 

*input으로 받은 값은 문자열임

*split(',')으로 문자열로 구성된 배열을 만듦

*배열명[index]는 문자열임

Number(reply1[0]) !== Number(reply2[reply2.length-1])+1

+의 경우 자료형을 문자열로 변환하는 연산자이기 때문에 Number로 변환해줘야하지만

-의 경우, Number로 변환하지 않고 - "1"로 해도 됨. 왜냐면 -는 숫자로 자료형을 변환하는 연산자이기 때문임

 

 

'프론트 > java script 재료' 카테고리의 다른 글

로또만들기_재료  (0) 2021.06.10
야구게임 만들기_재료  (0) 2021.06.06
계산기 만들기_재료  (0) 2021.06.06
console 창에서 마름모 만들기  (0) 2021.06.05
console 창에서 마름모 만들기_재료  (0) 2021.06.05