[JS] 브라우저 객체

브라우저 객체

웹 브라우저와 관련된 객체의 집합입니다.

- 최상위 객체는 window 객체이다.
- window 하위 객체
- document(문서영역)
- location(주소창)
- history(방문기록, 페이지이동)
- navigator(사용자의 브라우저 정보, 운영체제의 정보) 
- screen(사용자 디바이스 정보) 
- window 식별자는 생략이 가능하다.

window 메서드

1. open(), close()

- open('새창 주소', '새창 제목', '새창 옵션') : 새창

- close() : 창 닫기

let popup = open(
     "https://www.naver.com",
     "팝업",
     "width=500; height=500; top=100; left=100; scrollbar=yes"
 );
 popup.close();

2. alert

사용자에게 경고문구 혹은 알림문구 띄울때 사용되는 메서드

alert("Hello");

3. prompt

사용자에게 하나의 문자열의 값을 받을 수 있는 메서드

let score = prompt("국어 점수는 몇점입니까?");
console.log(`국어 점수는 ${score}점 입니다.`);

4. confirm

사용자에게 진행여부를 확인할 수 있는 메서드

let isDel = confirm("정말로 삭제하시겠습니까?");
if (isDel) {
    console.log("삭제완료");
} else {
    console.log("삭제취소");
}

5. setInterval, clearInterval

정해진 시간 주기 마다 등록된 함수를 실행

let n = 0;
let intervalFn = setInterval(() => {
    n++;
    console.log(`${n} 누적`);
    if (n == 5) {
      clearInterval(intervalFn);
    }
}, 1000);

6. setTimeout, clearTimeout

정해진 시간 후에 등록된 함수 실행

setTimeout(() => {
    console.log("두번째 인수에 등록한 시간 후 콜백함수 실행");
}, 5000);

7. location

현제 url(주소)의 정보를 가지고 있는 객체로 프로토콜, 포트, 호스트 등의 정보를 가지고 있다.

location.href = '주소 (절대 경로 혹은 상대 경로)' 값 대입시 대입된 경로로 이동

 

setTimeout(() => {
    location.href = "https://naver.com";
}, 3000);

8. history

방문이력의 정보를 가진 객체

// 이전 페이지 방문
history.back();
// 다음 페이지 방문
history.forward();
// 이전 기록 다움 기록 (인수(-1): 이전 페이지, 인수(-3): 이전 이전 이전 페이지)
history.go();

9. navigator

os 및 브라우저 정보를 가지고 있는 객체

appCodeName: 클라이언트의 브라우저 코드명 반환
appName: 클라이언트의 브라우저 이름을 반환
userAgent: 클라이언트의 브라우저와 운영체제 종합 정보를 제공.

10. screen

디바이스의 크기 정보

width: 화면의 너빗값을 반환
height: 화면의 높잇값을 반환
availWidth: 작업표시줄을 제외한 화면의 너빗값 반환
availHeight: 작업표시줄을 제외한 화면의 높잇값 반환
colorDepth: 사용자 모니터가 표현 가능한 컬러 bit를 반환

11. document

html 문서의 정보를 가지고 있는 객체