JS BOM( Browser Object Model ): 브라우저 객체 모델

BOM: 브라우저 객체 모델

브라우저에 내장된 객체를 브라우저 객체라고 합니다.

window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다.

 

window

window 객체는 브라우저의 창을 나타냅니다.

모든 전역 변수, 객체, 함수들은 window 객체의 멤버가 됩니다.

심지어 DOM의 document도 window 객체에 포함되기 때문에 아래 두 코드는 같은 결과를 나타냅니다.

• window.document.getElementById("header");
• document.getElementById("header");

---

window 객체

• window.open("URL", "새 창 이름", "새 창 옵션") - 새 창 열기
• window.close() - 현재 창 닫기
• window.innerHeight - 브라우저 창의 내부 높이(px 단위)
• window.innerWidth - 브라우저 창의 내부 너비(px 단위)
• window.moveTo(x, y) - 현재 창 이동
• window.resizeTo(width, height) - 현재 창 크기 조정

 

---

팝업

window.alert("ALERT");

• window.alert()는 앞에 window를 적지 않고 사용할 수 있습니다.
• 경고 상자를 끄고 진행하기 위해선 "확인"을 눌러주어야 합니다.

window.confirm("CONFIRM");

• window.confirm()은 앞에 window를 적지 않고 사용할 수 있습니다.
• 확인 상자는 "확인"과 "취소"가 나타나 선택해주어야 합니다.
• 확인 클릭 시 True 반환, 취소 클릭 시 False 반환

 

window.prompt("explain", "input");

• window.prompt()은 앞에 window를 적지 않고 사용할 수 있습니다.
• 입력 값을 입력하고 "확인" 또는 "취소"를 눌러주어야 합니다.
• "확인" 클릭 시 입력 값 반환, "취소" 클릭 시 null 반환

 

---

timing 객체

window.setTimeout(function, ms)

• 지정된 시간을 기다린 후 함수를 실행합니다.
• 접두사 없이 작성할 수 있습니다.

 

window.clearTimeout(timeoutVar)

• setTimeout()에 지정된 함수의 실행을 중지합니다.
• timeoutVar: setTimeout() 메서드에서 반환된 변수
• 접두사 없이 작성할 수 있습니다.

    <button onclick="timeoutVar = setTimeout(myFunction, 3000)">Timeout 시작</button>

    <button onclick="clearTimeout(timeoutVar)">Timeout 해제</button>

 

 

window.setInterval(function, ms)

• 지정된 시간마다 함수 반복 실행
• 접두사 없이 작성할 수 있습니다.
• 아래 예제는 1초마다 현재 시간을 출력하게 하여 시계처럼 보입니다.

      setInterval(getCurTime, 1000);

      function getCurTime() {

        const date = new Date();

        document.getElementById("time").innerHTML = date.toLocaleTimeString();

      }

 

window.clearInterval(timeoutVar)

• setInterval()에 지정된 함수의 실행을 중지합니다.
• timeoutVar는 setInterval() 메서드에서 반환된 변수입니다.
• 접두사 없이 작성할 수 있습니다.

 

---

screen 객체

window.screen 객체는 실제 사용할 때 앞에 window를 적지 않고 screen만 작성하여도 정상 작동합니다.

 

• screen.width - 사용자 화면의 너비(px 단위)
• screen.height - 사용자 화면의 높이(px 단위)
• screen.availWidth - 작업표시줄 같은 인터페이스 기능을 제외한 사용자 화면의 이용 가능 너비(px 단위)
• screen.availHeight -작업표시줄 같은 인터페이스 기능을 제외한 사용자 화면의 이용 가능 높이(px 단위)
• screen.colorDepth - 사용자 화면에서 색을 표현하는데 사용되는 비트 수 반환
• screen.pixelDepth - 사용자 화면 픽셀 깊이 반환

 

---

location 객체

window.location 객체는 현재 페이지의 주소(URL)을 가져오거나 다른 페이지로 리다이렉션할 때 사용됩니다.

window.location 객체는 앞에 window를 적지 않고 사용할 수 있습니다.

 

• location.href - 현재 페이지의 href(URL)를 반환
• location.hostname - 웹 호스트의 도메인 이름을 반환(www.google.com)
• location.pathname - 현재 페이지의 경로와 파일 이름을 반환
• location.protocol - 사용된 웹 프로토콜을 반환 (예. http: 또는 https:)
• location.port - 현재 페이지의 포트 번호를 반환
• location.assign() - 새 문서 로드
• location.search() - URL의 쿼리(요청값)을 반환
• location.reload() - 브라우저 새로 고침

 

---

history 객체

window.history는 브라우저의 history를 포함하고 있습니다. 사용자의 개인 정보와 연관이 있기 때문에 JS가 이 객체를 이용해 접근하는 것에 제한이 있습니다.

window.history는 앞에 window를 적지 않고 사용할 수 있습니다.

 

• window.history.back(num) - 이전 버튼과 같습니다. num이 없는 경우 Default는 1
• window.history.forward() - 다음 버튼과 같습니다.
• window.history.go(num) - num값이 -3인 경우 3단계 이전 방문 사이트로 이동합니다.
• history.length - 방문 기록에 저장된 목록 개수를 반환합니다.

 

---

Navigator 객체

window.navigator는 사용자의 브라우저에 대한 정보를 갖고 있습니다.

window.navigator는 앞에 window를 적지 않고 사용할 수 있습니다.

 

• navigator.cookieEnabled - 쿠키가 활성화 된 경우 True, 아닌 경우 False
• navigator.appName - 브라우저의 이름을 반환. 모든 브라우저 Netscape 반환
• navigator.appCodeName - 브라우저의 코드명을 반환. 모든 브라우저 Mozilla 반환
• navigator.appVersion- 브라우저에 대한 버전 정보를 반환 모든 브라우저 5.0 반환
• navigator.platform - 브라우저 플랫폼(OS)을 반환
• navigator.language - 브라우저의 언어 반환
• navigator.onLine - 브라우저가 온라인 상태면 True 반환
• navigator.javaEnabled() - Java가 활성화 된 경우 True, 아닌 경우 False
• navigator.userAgent - 브라우저와 OS의 종합 정보 반환