[JS] 브라우저 객체 모델

[JS] 브라우저 객체 모델

2021. 10. 26. 16:17ㆍHTML + CSS + JS/JS 자바스크립트

728x90

1. 브라우저 객체

브라우저 객체는 브라우저에 내장된 객체를 의미한다.

window 는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체들이 포함되어있다.

window -> document, location, screen, navigator, history

1️⃣ window 객체

window 객체는 브라우저 객체의 최상위 객체이다.

- window 객체의 메서드 종류

open("url", "새창 이름", "새창 옵션") : url 페이지를 새 창으로 나타낸다 .

alert(data)

prompt("질문", "답변")

confrim("질문내용")

moveTo(x,y) : 지정한 새 창의 위치를 이동한다.

resizeTo(width, height) : 지정한 새 창의 크기를 변경한다.

setInterval(function() {}, 일정시간간격)

setTimeout(function() {}, 일정시간간격)

- open()

open() 메서드를 이용하면 지정한 url 페이지를 새 브라우저 창에 나타낼 수 있다.

이 메서드를 사용해서 팝업을 많이 만들었다고 하는데 요즘은 팝업을 잘 안띄우기 때문에 알아만 두기

open("url", "새 창 이름", "새 창 옵션")

width : 새 창의 너비를 설정

height : 새창의 높이를 설정

left : 새 창의 수평 위치를 설정

top : 새 창의 수직 위치를 설정

scrollbars : 새창의 스크롤 바 숨김 노출을 설정한다. no 숨김 yes 노출

location : 새 창의 url 주소 입력 영역의 숨김/ 노출을 설정한다.

status : 새 창의 상태 표시줄 영역의 숨김/노출을 설정한다.

toolbars: 새창의 도구 상자 영역을 숨김, 노출 설정한다.

- alert()

경고창을 나타낼 때 사용

- prompt()

질의응답 창을 나타낼 때 사용

- confrim()

확인/취소 창을 나타낼 때 사용

확인 버튼을 누르면 true, 취소 버튼을 누르면 false

- setInterval(), clearInterval()

setIntervar() 메서드는 코드를 일정 시간 간격으로 반복 실행하고, clearInterval() 메서드는 setInterval()을 취소한다.

- setTimeOut()/ clearTimeout()

setTimeOut() 메서드는 일정 시간이 지나면 코드를 실행하고 종료한다. clearTimeout()메서드는 setTimeout() 메서드를 제거한다.

2️⃣ screen 객체

screen 객체는 사용자의 모니터 정보를 제공하는 객체이다.

- screen 객체의 속성 종류

screen.width : 화면의 너비값 반환

screen.height : 화면의 높이값 반환

screen.availWidth : 작업 표시줄을 제외한 화면의 너비값 반환

screen.availHeight : 작업 표시줄을 제외한 화면의 높이값 반환

screen.colorDepth : 사용자 모니터가 표현 가능한 컬러 bit 반환

3️⃣ location 객체

location 객체는 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체다.

- location 객체의 속성 종류

location.href : 주소 영역의 함수 설정하거나 url 반환

location.hash : url 해시값(#에 명시된 값)을 반환

location.hostname : url 호스트 이름을 설정하거나 반환

location.host : url의 호스트 이름과 포트번호 반환

location.protocol : url 프로토콜 반환

location.search : url 쿼리 반환

location.reload() : 브라우저 새로고침

4️⃣ history 객체

history 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드 제공

- history 객체의 속성 종류

history.back : 이전 방문 사이트로 이동한다.

history.forward : 다음 방문 사이트로 이동한다.

history.go(이동숫자) : 이동 숫자에 -2 를 입력하면 2단계 이전의 방문사이트로 이동

history.length : 방문 기록에 저장된 목록의 개수 반환

5️⃣ navigator 객체

navigator 객체는 현재 방문자가 사용하는 브라우저와 운영체제 정보를 제공하는 객체이다.

- navigator 객체 속성과 종류

navigator.appCodeName : 현재 브라우저 코드명을 반환

navigator.appName : 현재 브라우저 이름을 반환

navigator.appVersion : 현재 브라우저 버전 정보를 반환

navigator.language : 현재 브라우저가 사용하고 있는 언어 반환

navigator.product : 현재 브랑줮 엔진 이름 반환

navigator.platform : 현재 컴퓨터의 운영체제 정보 제공

navigator.onLine : 온라인 상태 여부에 대한 정보 제공

navigator.userAgent : 브라우저와 운영체제의 종합 정보 제공

* 연습문제

브라우저 객체 모델 사용해 운영체제와 스크린 정보 얻기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 운영체제 및 스크린 정보 </title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script>
 var info = navigator.userAgent.toLowerCase();
 var oslmg = null;

    if(info.indexOf("windows") >= 0) {
        oslmg = "windows.png";
    }else if(info.indexOf("matchintosh") >= 0) {
        oslmg = "machintosh.png";
    }else if (info.indexOf("iphone") >= 0) {
        oslmg = "iphone.png";
    }else if(info.indexOf("android") >= 0) {
        oslmg = "android.png";
    }

    document.write("<img src=\"images/" + oslmg + "\">", "<br>");

    var scr = screen;
    var sc_w = screen.width;
    var sc_h = screen.height;

    document.write("모니터 해상도 너비 : "+ sc_w + "px", "<br>");
    document.write("모니터 해상도 높이 : " + sc_h  + "px" , "<br>");
</script>
</head>
<body>
</body>
</html>

728x90

'HTML + CSS + JS > JS 자바스크립트' 카테고리의 다른 글

[JS] 함수,arguments 연습문제 (0)	2021.10.27
[JS] 객체 연습문제 1, 2 (0)	2021.10.26
[JS] 객체 종류_ 내장 객체 (Date, String, Array, Math) 연습문제 (0)	2021.10.26
[JS] 선택문(switch)와 반복문(while, do-while, for) 연습문제 (0)	2021.10.26
[JS] 조건문 (if, if-else, 중첩 if )예제 (0)	2021.10.26

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS > JS 자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바