728x90
반응형
5 - 1~3
0<= Math.random() < 1
사이의 난수를 만들어 준다.
Math.ceil() : 올림
Math.floor() : 내림
Math.round() : 반올림
5 - 4 form 태그
form 태그는 이벤트 리스너를 달 때 submit 사용.
=> 새로고침이 기본적으로 된다.
=> 그래서 변수 값 저장을 위해서는 기본 동작을 막아줘야 함.
=> form은 evet 객체가 생성된다.
$form.addEventListener('submit', (event) => {
event.preventDefault();
$input.value = '';
checkInput(value);
});
5 - 5~6
join ('구분자')함수
배열을 문자열로 변환하는 함수.
ans = [3, 1, 5, 6] 배열을 '3156' 문자열로 변환하려면
ans.join('') 로 사용하면 된다.
div와 span 태그의 차이
div는 block 요소에 해당하는 태그. 줄 바꿈이 일어난다. 잡히는 영역이 box 단위.
span은 inline 요소에 해당하는 태그. 줄 바꿈이 없다. 잡히는 영역이 딱 컨텐츠 영역까지만.
완성본
<html>
<head>
<meta charset="UTF-8">
<title>숫자야구</title>
</head>
<body>
<form id="form">
<div> 남은 시도 기회 : <span id="restTries">10</span> 번. </div>
<div> 1~9까지 중복 없이 적어보렴^^ </div>
<input required type="text" minlength="4" maxlength="4" id="input">
<button>확인</button>
</form>
<div id="logs"></div>
<script>
// 변수 선언 ============================================================================================
const $input = document.querySelector("#input"); // 정답 변수
const $form = document.querySelector("#form");
const $logs = document.querySelector("#logs");
const $restTries = document.querySelector("#restTries"); // 남은 시도 값
const tries = []; // 시도 값
let ball = 0;
let strike = 0;
let outCheck = 0;
// 숫자 넣을 공간 확보
const numbers = [];
for (let n = 0; n < 9; n += 1) {
numbers.push(n + 1);
}
// 문제 출제
const answer = [];
for (let n = 0; n < 4; n++) {
const index = Math.floor(Math.random() * numbers.length);
answer.push(numbers[index]);
numbers.splice(index, 1);
}
console.log(answer); // 문제 확인
// 입력값 확인
function checkInput(input) {
if (new Set(input).size !== 4) { // 중복된 숫자 유무? Set는 중복을 허용하지 않으므로
return alert('너 진짜 한글 모르냐.....'); // false 반환
}
if (tries.includes(input)) { // 이미 시도한 값인가?
return alert('너 혹시 치매임?????? 진지하게 나랑 병원 가싈???'); // false 반환
}
if (input.indexOf('0') > -1) { // 0이 들어가는가?
return alert('0 못 들어간다고 ㅡㅡ 멍청아'); // false 반환
}
return true;
}
// 확인을 클릭할 때마다 정답 확인 함수
$form.addEventListener('submit', (event) => {
event.preventDefault();
const value = $input.value;
$input.value = ''; // 답 적고 나서 빈 칸으로 돌려 놓음
// 입력값 상태 체크
if (!checkInput(value)) {
return;
}
// 스트라이크 / 볼 확인
for (let i = 0; i < answer.length; i++) {
const index = value.indexOf(answer[i]);
if (index > -1) { // 일치 숫자 확인
if (index === i) { // 위치 확인
strike++;
} else {
ball++;
}
}
}
// 결과 메세지 출력 및 값 재 세팅
if (strike === 0 && ball === 0) {
++outCheck;
$logs.append(`${value} : 아웃!!!! 현재까지 ${outCheck} 아웃`, document.createElement('br'));
} else {
$logs.append(`${value} : ${strike} 스트라이크 ${ball} 볼`, document.createElement('br'));
}
$restTries.textContent--; // 남은 시도 횟수 차감
tries.push(value); // 시도한 번호 추가
ball = 0;
strike = 0;
// 성공일 경우
if (answer.join('') === value) {
$logs.textContent = '정답!!!!!!!홈런!!!!!!!!!holy!!!!!!!!!!!';
return;
}
// 실패일 경우
if (tries.length >= 10 || outCheck >= 3) {
const message = document.createTextNode(`쯧쯧쯧, 정답은 ${answer.join('')}`);
$logs.appendChild(message);
return;
}
});
</script>
</body>
</html>
5 - 7
forEach( (element, index) => { }) 함수
배열 각각 요소에 대해서 안에 적힌 함수를 실행한다.
arr.forEach( (e, i) => {
arr[i]*2;
})
map ((element, index) => {}) 함수
기존 배열 수정 없이 각각 요소에 대해서 안에 적힌 함수를 실행 후
새로운 배열을 생성한다.
arr.map( (e, i) => {
return e*2;
})
fill(넣고 싶은 요소) 함수
arr(9); // 빈 배열 생성
arr(9).fill(0); // 0으로만 가득찬 배열 생성
arr(9).fill().map((e, i) => {
return i+1;
); // 1~9 순으로 찬 배열 생성
728x90
반응형
'자바스크립트(Java Script) > 자바스크립트(Java Script) 강의 정리' 카테고리의 다른 글
| 제로초 JS 입문 강의 7강 정리 (가위바위보 순서도) (0) | 2024.08.13 |
|---|---|
| 제로초 JS 입문 강의 6강 정리 (로또 추첨기) (0) | 2024.08.05 |
| 제로초 JS 입문 강의 4강 정리 (계산기 만들기) (0) | 2024.08.01 |
| 제로초 JS 입문 강의 3강 정리 (0) | 2024.07.30 |
| 제로초 JS 입문 강의 2강 정리 (0) | 2024.07.29 |
댓글