Chap 6. BOM

김승현·2021년 11월 11일

BOM

Browser Object Model의 약자로써 브라우저 객체들을 뜻함
브라우저의 정보나 URL 정보, 모니터 화면 정보등을 취득하거나 제어할 수 있는 객체
브라우저 객체의 최상위 객체 : window 객체
window 객체의 하위 객체 : document, location, screen, history, navigator가 있으며 계층적인 구조로 접근 가능
- document는 DOM으로 분류 (Document Object Model)

window 객체

자바스크립트에서 만들어지는 객체는 모두 window 객체의 하위에 존재
window 객체는 브라우저 창에 대한 설정을 할 수 있는 객체
document, location, screen, history, navigator 등 다양한 객체를 포함하고 있으며, 그외 유용한 함수들도 포함되어 있음

window 객체의 다양한 함수

함수	의미
open(url,name,specs,replace)	별도의 창을 열수 있는 함수
setTimeout(함수,시간(ms))	일정시간 후 함수를 한번 실행 /id값 리턴
clearTimeout(id)	setTimeout() 함수 실행 종료
setInterval(함수,시간(ms))	일정시간마다 함수를 반복 실행 / id값 리턴
clearInterval(id)	setInterval() 함수 종료

open 함수

높이와 너비를 입력하면 별도의 창으로 페이지를 오픈
(높이와 너비를 입력하지 않아도 자동 기본 사이즈로 오픈 됨)

👨‍🎓 작성 방법

var ret = open(url,name,specs,replace);

- 변수 :

새로만들어진 창 객체가 반환됨.
창 생성에 실패하면 null 반환.
이 객체를 통해서 새창을 제어할 수 있음

1. url : "주소" (오픈될 URL 주소)

2. name : "열릴 경로"

_blank : 새탭(기본값)
_parent : 부모 프레임
_self : 현재 페이지
_XXXX : XXXX는 임의의 이름을 붙이고 새로운 창 오픈 (이름 지정)

3. specs : "형태"

height = 값(px) : 높이 지정
width = 값(px) : 너비 지정
menubar = yes|no|1|0 : 메뉴바 사용 여부 지정
status = yes|no|1|0 : 상태바 사용 여부 지정
※ 형태의 인수값은 다양한 형태가 존재하지만 높이와 너비를 제외하고는 브라우저의 종류마다 지원여부 상이함

4. replace : "히스토리 목록"

true : 현재 히스토리를 대체
false : 히스토리에 새 항목을 만듦

opener 객체

자신을 열은 부모의 window 창을 표현할 때 사용

EX) 부모창

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>open 함수</title>

    <style>
        #print {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
    </style>

</head>

<body>
    <button id="btn">open</button><button id="btn2">close</button>
    <br><br><br><br>

    <h2>부모창</h2>
    <div id="print"></div>

    <input type="text" id="inputData"><button id="forward">전송</button>

    <script>
        var newWindow;

        // open 함수 적용 함수
        document.getElementById("btn").onclick = function() {

            newWindow = window.open("211110-1(child).html", "_blank", "height=500px, width=500px");
        };

        // close 함수 적용 함수
        document.getElementById("btn2").onclick = function() {
            newWindow.close();
        };

        // 부모, 자식 창 간에 데이터 전송 함수
        document.getElementById("forward").onclick = function() {

            var inputData = document.getElementById("inputData").value;

            // 자식 객체의 출력 장소 정보 가져 오기
            var childElement = newWindow.document.getElementById("print");


            childElement.innerHTML += "<span style='color:red;'>부모 : " + inputData + "</span><br>";


            document.getElementById("print").innerHTML += "<span style='color:red;'>부모 : " + inputData + "</span><br>";
        };
    </script>
</body>

</html>

EX) 자식창

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #print {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
    </style>

</head>

<body>
    <h2>자식창</h2>
    <div id="print"></div>

    <input type="text" id="inputData"><button id="forward">전송</button>

    <script>
        document.getElementById("forward").onclick = function() {

            var inputData = document.getElementById("inputData").value;

            // opener 객체 활용 부모 요소에 접근
            window.opener.document.getElementById("print").innerHTML += "<span style='color:blue;'>자식 : " + inputData + "</span><br>";


            document.getElementById("print").innerHTML += "<span style='color:blue;'>자식 : " + inputData + "</span><br>";

        };
    </script>

</body>

</html>

EX) setTimeout & clearTimeout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setTimeout & clearTimeout</title>
</head>

<body>
    <button id="btn">동작</button>
    <button id="btn2">취소</button>

    <script>
        var id;

        document.getElementById("btn").onclick = function() {

            id = setTimeout(function() {
                alert("동작");
            }, 1000);

        };

        document.getElementById("btn2").onclick = function() {
            window.clearTimeout(id);
        };
    </script>

</body></html>

EX) setInterval & clearInterval & Data 객체-> 시간값 표현

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>setInterval & clearInterval</title>
    <style>
        #print {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <h1>현재 시간 : <span id="time"></span></h1>

    <div id="print"></div>
    <button id="btn">동작</button>
    <button id="btn2">취소</button>

    <script>
        var id;
        var count = 0;

        document.getElementById("btn").onclick = function() {

            id = setInterval(function() {

                var date = new Date();
                var hour = ('0' + date.getHours()).slice(-2); // 현재 시간값 가져옴
                var minutes = ('0' + date.getMinutes()).slice(-2); // 현재 분 값 가져옴
                var second = ('0' + date.getSeconds()).slice(-2); // 현재 초 값 가져옴

                var element = document.getElementById("time");
                element.innerHTML = hour + ":" + minutes + ":" + second;

                if (hour == '12' && minutes == '17') {
                    document.getElementById("print").style.backgroundColor = 'yellow';
                } else {
                    document.getElementById("print").style.backgroundColor = 'white';
                }


            }, 1000);


        };

        document.getElementById("btn2").onclick = function() {
            clearInterval(id);
        };
    </script>

</body></html>


<br/><br/>

#### EX) window.onload 속성

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <style>
        #print {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <h1>현재 시간 : <span id="time"></span></h1>



    <script>
        window.onload = function() {

            setInterval(function() {

                var date = new Date();
                var hour = ('0' + date.getHours()).slice(-2); // 현재 시간값 가져옴
                var minutes = ('0' + date.getMinutes()).slice(-2); // 현재 분 값 가져옴
                var second = ('0' + date.getSeconds()).slice(-2); // 현재 초 값 가져옴

                var element = document.getElementById("time");
                element.innerHTML = hour + ":" + minutes + ":" + second;
            }, 1000);
        };
    </script>

</body>

</html>

screen 객체

사용자의 화면과 관련된 정보를 제공하는 객체

함수	의미
height	화면 높이
width	화면 너비
availWidth	실제화면에서 사용 가능한 너비
availHeight	실제화면에서 사용 가능한 높이
colorDepth	사용 가능한 색상수
pixelDepth	한 픽셀당 비트수

EX) screen 객체

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        #print {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
    </style>

    <p id="print"></p>
    <button onclick="load();">스크린정보 가져오기</button>

    <script>
        function load() {
            var print = document.getElementById("print");
            var str;
            str = "화면 높이값 : " + screen.height + "<br>";
            str += "화면 너비값 : " + screen.width + "<br>";
            str += "실사용 높이값 : " + screen.availHeight + "<br>";
            str += "실사용 너비값 : " + screen.availWidth + "<br>";
            str += "사용가능한 색상수 : " + screen.colorDepth + "<br>";
            str += "한 픽셀당 비트수 : " + screen.pixelDepth + "<br>";
            
            print.innerHTML = str;
            
        }
    </script>
</body>
</html>

location 객체

브라우저의 주소표시줄(URL)과 관련된 객체
프로토콜 종류, 호스트 이름, 문서 위치 등의 정보를 가짐

location 객체의 속성

속성	의미
hash	앵커 이름(#~) - 표시된 마크로 이동 (`<a href="#..">` 와 동일하게 사용 가능 - `<a name="이름">` 으로 마크를 표시하고 location.hash="이름" 으로 이동 가능
host	호스트 이름과 포트 번호
hostname	호스트 이름
href	문서 URL 주소
origin	호스트 이름, 프로토콜, 포트번호
pathname	디렉토리 경로
port	포트번호
protocol	프로토콜 종류
search	요청 매개변수 (ex. naver.com/index.html?name="홍길동"&age="20")

EX) location.hash

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
        #print {
            width: 500px;
            height: 2000px;
            border: 1px solid black;
        }
    </style>
    <script>
        function move(hash) {
            location.hash = hash;
        }
    </script>

    <a name="top" /><button onclick="move('bottom')">아래로</button>
    <p id="print"></p>
    <a name="bottom" /><button onclick="move('top')">위로</button>
</body>

</html>

location 객체의 메소드

메소드	의미
reload()	현재 문서를 다시 로드
assign('주소')	새로운 페이지 로드 (뒤로 가기 가능) - history 보존
replace('주소')	현재 페이지를 새 페이지로 교체 (뒤로 가기 불가) - 이동하기 전 페이지의 history를 삭제

EX) location.reload(), location.assign(), location.replace()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function() {
            var id = document.getElementById("print");
            var date = new Date();
            id.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" +
                date.getSeconds();
        }

        function btn1() {
            location.reload();
        }

        function btn2() {
            var site = document.getElementById("site").value;

            // history 유지
            location.assign(site);
        }

        function btn3() {
            var site = document.getElementById("site").value;

            // history 삭제
            location.replace(site);
        }
    </script>
    <p id="print"></p>
    <button onclick="btn1();">reload 버튼</button><br>
    <input type="text" id="site" />
    <button onclick="btn2();">assign버튼</button>
    <button onclick="btn3();">replace버튼</button>
</body>

</html>

navigator 객체

브라우저에 대한 정보 및 위치정보값를 가지는 객체

구분	의미
appCodeName	브라우저 코드명 - 최신 브라우저의 대부분은 호환성을 이유로 "Mozilla"라고 저장 - 보통의 브라우저들은 옛날 Mozilla로부터 파생된 경우가 많아 Mozilla 라고 표현
appName	브라우저 이름 - FireFox나 Chrome, Safari, IE의 경우 Netscape로 출력 됨
appVersion	브라우저 버전
platform	사용중인 운영체제
userAgent	브라우저 전체 정보 (appCodeName+appVersion)
cookieEnabled	쿠키 활성화 여부
geolocation	위도와 경도를 출력
language	브라우저 언어
product	브라우저 엔진 이름
-> product	Gecko라고 표시 됨 (대부분의 브라우저는 Mozilla 프로젝트에서 개발한 레이아웃 엔진을 사용함 -> Gecko)

EX) geolocation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
        var latitude; //위도를 저장하는 변수
        var longitude; //경도를 저장하는 변수
        window.onload = function(){
        navigator.geolocation.getCurrentPosition(showYourLocation);
        };
        function showYourLocation(position){
            latitude = position.coords.latitude;
            longitude = position.coords.longitude;
        }
        
             
        function btn1(){
            console.log("위도 : " + latitude);
            console.log("경도 : " + longitude);
            window.open("https://www.google.co.kr/maps/@"
                        +latitude+
                        ","+longitude+",17z");
        }
    </script>

    <button onclick="btn1();">지도찾기</button><br>
</body>
</html>

history 객체

history 객체는 브라우저의 세션 기록에 접근할 수 있도록 해주는 객체

history 객체의 메소드

메소드	의미
back	브라우저의 방문 기록에서 뒤 페이지로 이동 할 수 있다.
forward	브라우저의 방문 기록에서 앞 페이지로 이동 할 수 있다.
go	입력한 수 만큼의 페이지 이동이 가능하다. - 음수는 뒤로 , 양수는 앞으로

EX) back, forward, go

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <button onclick="back();">back 버튼</button>
    <button onclick="forward();">forward 버튼</button>
    <button onclick="go();">go 버튼</button>
    
    <script>
        function back(){
            history.back();
        }
        function forward(){
            history.forward();
        }
        function go(){
            history.go(2);
        }
    </script>
    
</body></html>

김승현

개발자로 매일 한 걸음

이전 포스트

Chap 5. 객체

다음 포스트

Chap 6. BOM

BOM

window 객체

window 객체의 다양한 함수

open 함수

- 변수 :

1. url : "주소" (오픈될 URL 주소)

2. name : "열릴 경로"

3. specs : "형태"

4. replace : "히스토리 목록"

opener 객체

EX) 부모창

EX) 자식창

EX) setTimeout & clearTimeout

EX) setInterval & clearInterval & Data 객체-> 시간값 표현

screen 객체

EX) screen 객체

location 객체

location 객체의 속성

EX) location.hash

location 객체의 메소드

EX) location.reload(), location.assign(), location.replace()

navigator 객체

EX) geolocation

history 객체

history 객체의 메소드

EX) back, forward, go

Chap 5. 객체

Chap 7. DOM

0개의 댓글