✍ Today I Learned
[숫자 야구 게임]
- 페이지가 리로딩되기 전까지의 게임이 기록되어야 하기 때문에 랜덤 숫자 생성은 버튼으로 하는 것이 좋다.
- if문에서는 실행될 확률이 높은 조건절을 위쪽으로 배치하는 것이 좋다. 나는 3S 상황이 가장 위쪽에 올라와있었는데 Out 상황의 확률이 더 높으므로 둘의 순서를 바꿔주었다.
- 기록을 측정하기 위해 시작 시간을 변수에 할당하는 시점은 함수의 가장 마지막 부분이어야 한다.
- 전역 변수의 선언이나 초기화는 스크립트의 시작 부분에서 하는 것이 좋다.
- 유저의 기록을
Map 구조에 저장했었는데 Index로 접근하여 정렬하는 것이 까다로운 관계로 Array와 Object의 조합으로 변경하는 것이 좋을 것 같다.
- 그러면
sort() 메서드를 이용해서 정렬할 수 있다.
Set은 중복 데이터를 저장하지 않기 때문에 중복 숫자 검사에 Set을 활용할 수 있다.- 버튼의 비활성화를 설정할 때 boolean 값에는 따옴표를 적지 않는다.. 부들부들..
'true' -> true
userArr.sort((a, b) => a.price - b.price);
// 중복 숫자 검사
function validNum() {
if(printZone.innerText.length != 3) {
alert('숫자 3개를 입력해주세요!');
} else if (new Set(printZone.innerText.split("")).size != 3) {
alert('중복된 숫자는 입력할 수 없습니다!');
} else {
compareNum(printZone.innerText);
printZone.innerText = '';
}
}
- 브라우저 객체 모델(BOM)이란? 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어하기 위해 사용되는 객체 모델이다. W3C의 표준 객체 모델은 아니다.
[window]
window.innerHeight - 브라우저 창의 내부 높이(픽셀 단위)window.innerWidth - 브라우저 창의 내부 너비(픽셀 단위)window.open() - 새 창 열기(과거 팝업창, 현재는 거의 사용하지 않음)window.close() - 현재 창 닫기window.moveTo() - 현재 창 이동window.resizeTo() - 현재 창 크기 조정
[screen]
screen.width - 화면 너비를 픽셀 단위로screen.height - 화면 높이를 픽셀 단위로screen.availWidth - 화면 사용 가능 너비를 픽셀 단위로screen.availHeight - 화면 사용 가능 높이를 픽셀 단위로screen.colorDepth - 색상 해상도screen.pixelDepth - 픽셀 깊이
screen.width와 screen.height는 현재 사용자의 모니터 화면의 크기를 반환하고, window.outerWidth와 window.outerHeight는 현재 브라우저 창의 크기를 반환한다.
[location]
window.location.href- 현재 페이지의 href(URL)를 반환window.location.hostname - 웹 호스트의 도메인 이름을 반환window.location.pathname - 현재 페이지의 경로와 파일 이름을 반환window.location.protocol - 사용된 웹 프로토콜을 반환(http: 또는 https:)window.location.assign('url') - 새 문서를 로드window.location.replace('url') - 새 문서를 로드 (이전 페이지를 history 객체에 저장하지 않음 = 뒤로 가기 불가능)window.location.search - URL의 쿼리 문자열 부분을 반환
[history]
history.back() - 브라우저에서 뒤로 가기를 클릭하는 것과 동일history.forward() - 브라우저에서 앞으로를 클릭하는 것과 동일history.go(number) - number의 값이 현재 페이지에 대한 상대 좌표로 사용되어 이동
[navigator]
navigator.appName - 브라우저의 애플리케이션 이름을 반환navigator.appCodeName - 브라우저의 애플리케이션 코드 이름을 반환navigator.platform - 브라우저의 플랫폼(운영체제)을 반환
[popup box]
alert("string msg") - 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다림cofirm("string msg") - 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환prompt("string msg", "default msg") - 사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환- 요즘은 잘 사용하지 않는 추세이다.
[timing]
setTimeout(function, milliseconds) - 지정된 밀리초 동안 기다린 후 함수 실행setInterval(function, milliseconds) - setTimeout()과 같지만 계속해서 함수의 실행을 반복clearTimeout(timeoutVariable) - setTimeout()에 지정된 함수의 실행 중지clearInterval(timeoutVariable) - setInterval()에 지정된 함수의 실행 중지
[Cookie]
- 쿠키란? 사용자의 컴퓨터에 작은 텍스트 파일로 저장되는 데이터이다. name=value 형식으로 저장된다.
- 예시) 아이디나 이메일 기억하기, 오늘 하루 동안 열지 않기, 제품을 구매한 사용자의 방문 경로 추적, 방문한 사용자의 이름 기억하기
- 쿠키 참고 자료