📝 TIL

[TIL] JS 숫자 야구 게임, BOM, 쿠키

오늘 ONEUL 2022. 4. 25. 21:31

✍ 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 형식으로 저장된다.
  • 예시) 아이디나 이메일 기억하기, 오늘 하루 동안 열지 않기, 제품을 구매한 사용자의 방문 경로 추적, 방문한 사용자의 이름 기억하기
  • 쿠키 참고 자료

 

 

 

 

 

저작자표시