Chap 6. BOM

86035 단어 국비수업JavaScriptJavaScript

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브라우저 엔진 이름
-> productGecko라고 표시 됨
(대부분의 브라우저는 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>
Farseer.net 라이트급 ORM 오픈 소스 프레임 V1.x 도입부: 저장 프로세스 실체 클래스 맵
SQL 쿼리 테이블, 저장 프로세스, 트리거 생성 시간 및 최종 수정 시간 예

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage