javascript-examples/Writerside/topics/Browser-Object-Model.md

BOM

• innerWidth, innerHeight

  뷰포트의 크기. 스크롤바 포함

• outerWidth, outerHeight

  브라우저의 크기

• scrollX = pageXOffset, scrollY = pageYOffset

  스크롤된 픽셀 크기

• screenX = screenLeft, screenY = screenTop

  모니터 좌표 (0, 0)에서부터 뷰포트 까지의 픽셀 거리

• open()

• close()

• moveTo()

• moveBy()

• resizeBy()

• resizeTo()

• scroll(option)

  window.scroll({top:100, left:100, behavior:"smooth"});
  

• scrollBy(x, y)

• scrollTo(x, y)

• addEventListener(eventType, listener)

  window.addEventListener('DOMContentLoaded', (event) => {
      //
  });
  

• removeEventListener(eventType, listener)

대화상자

• alert(message)

  알림 대화상자

• confirm(message)

  확인 대화상자. true/false를 반환

• prompt(message)

  입력 대화상자. 사용자가 입력한 텍스트를 반환하거나 null을 반환

타이머

• setTimeout(callback, ms)

  지연 시간 이후에 함수를 실행. 고유아이디를 반환.

• setInterval(callback, ms)

  지연 시간마다 함수를 반복 실행. 고유아이디를 반환.

• clearTimeout(id)

• clearInterval(id)

let uId = setInterval(() => {
    document.querySelector('#box').innerHTML = new Date();
}, 1000); // 1초마다 새로 고침
setTimeout(() => {
    clearInterval(uId);
}, 5000); // 5초 후에 새로 고침 중단

Console

• log(message)

• debug(message)

• info(message)

• warn(message)

• error(message)

• assert(expression, message)

  매개 변수가 false인 경우에 메시지와 함께 스택 추적을 출력합니다.

• clear()

  콘솔의 출력을 지웁니다.

• trace()

  콘솔에 스택 추적을 출력합니다.

• table(obj)

  배열이나 객체 등을 콘솔에 표 형태로 출력합니다.

History

• length

  방문 기록에 저장된 페이지 갯수

• back()

  뒤로 가기

• forward()

  앞으로 가기

• go(number)

  number가 0이면 새로 고침. -2이면 2 페이지 뒤로 가기.

Screen

• width, height

  모니터 화면의 전체 픽셀 크기

• availWidth, availHeight

  작업표시줄 등을 제외한 모니터 크기

• pixelDepth

• colorDepth

function getScreenSize(){
    return {
        width: window.screen.width,
        height: window.screen.height
    };
}

Location

• href

  현재 페이지의 URI

• protocol, host, hostname, port, pathname, search, hash

  URI 중 특정 부분

• assign(uri)

  다른 페이지로 이동

• replace(uri)

  다른 페이지로 이동. 히스토리를 남기지 않습니다.

• reload()

  새로 고침. 매개 변수로 true를 전달하면 강력 새로 고침.

Navigator

• onLine

  온라인 여부를 true / false로 반환

• cookieEnabled

  쿠키 사용 가능 여부

• language

• appName, appVersion, appCodeName, platform

• userAgent

• javaEnabled

function isConnected() {
    return navigator.onLine;
}
window.addEventListener("online", function () {
    console.log("연결됨");
});
window.addEventListener("offline", function () {
    console.log("연결 끊김");
});