SOCO
베스킨라빈스 31 (혼자)_재료 본문
베스킨 라빈스 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 |