Hoon222y

[JavaScript] 9장. 브라우저 객체 모델 본문

코딩/교육

[JavaScript] 9장. 브라우저 객체 모델

hoon222y 2019. 1. 10. 19:06

9장. 브라우저 객체 모델


9.1 브라우저 관련 객체

- 브라우저 관련 모델(BOM) : 웹 브라우저와 관련된 객체의 집합을 의미 

- window, location, navigator, history, screen, document 가 대표적은 브라우저 객체 모델이다. 


window : 브라우저창을 객체화

document : 현재 브라우저에서 보여지고 있는 웹 페이지를 객체화

location : 브라우저 url을 객체화 해놓은 것

navigator : 브라우저 정보 자체를 얻기 위한 목적으로 사용 

history : 사용자가 브라우저에서 사용한 이전 페이지에 대한 정보 + 페이지 흐름 제어 

screen : 사용자가 사용중인 모니터에 대한 정보를 반환


9.2 window 객체

- window 객체의 속성과 메서드를 출력

- 브라우저 기반 자바스크립트의 최상위 객체 


9.3 새로운 window 객체 생성

- open(URL , name, feature, replace) 를 통해서 새로운 window 객체를 생성할 수 있다. 

- 옵션 : 입력해도 되고 입력하지 않아도 되는 매개변수를 옵션이라고 하는데 open 에서 4개의 매개변수는 모두 옵션이다. 

- open () 메서드는 새로운 window 객체를 생성하는 메서드이기 때문에 팝업창을 열고 윈도우 객체를 리턴한다. 

- feature 라는 속성이 있으면 팝업이고, 없으면 새로운 탭이 발생한다. 

1
2
3
4
<script>
    var child = window.open('', '', 'width=300, height=200');
    child.document.write('<h1>From Parent Window</h1>');
</script>
cs


[예제]

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <script>
       window.open('child.html', '', 'width=300, height=200');
    </script>
</head>
<body>
</body>
</html>
cs

에서 호출

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'/>
    <title>INsertTitle</title>
    <script>
    if(window.opener){//다른 창에 의해서 열릴때만 오프너가 반응한다. 
        var fruit = prompt('좋아하는 과일을 입력하세요','사과');
        window.opener.document.body.innerHTML = '<h1>'+ fruit + '</h1>';
        window.close();        //팝업창은 자기의 역할이 다되면 닫아야함.
    }
    </script>
</head>
<body>
</body>
</html>
cs

 위에 코드에서 코드를 실행하면 아래 코드인 child.html이 실행되게 된다. 이때 child.html에서 window.opener가 사용되었는데 이는 다른 창에 의해서 열릴때만 반응하게 된다. 만약에 그냥 자기 자신에서 호출할 경우 실행이 되지 않는다. 따라서 이러한 경우를 막기 위해서 if(window.opener) 라는 조건을 걸어서 해결할 수 있다. 

 팝업창에서 자신을 연 부모창을 제어하는 경우 window.opener 를 사용해야 한다. 다른 창에 의해서 현재 창이 열리는 경우에만 opener가 활성화 된다. 만약 독립적으로 실행된다면 opener는 활성화되지 않는다.


9.4 window 객체의 기본 메서드

- OOBy() 형태 : 이러한 형태의 메서드는 현재 윈도우를 기준으로 상대적으로 속성을 변화

- OOTo() 형태 : 절대적인 기준으로 속성을 변화

1
2
3
4
5
6
7
8
9
<head>
    <script>
        var child = window.open('', '', 'width=300, height=200');
        child.moveTo(0, 0);            // 초기에 위치를 0,0으로 두고 
        setInterval(function () {   // 1초마다 함수를 실행합니다.
            child.moveBy(10, 10);    // 왼쪽으로 10 px,아래로 10px
        }, 1000);                    // 씩 이동
    </script>
</head>
cs


9.5 screen 객체

- 웹 브라우저의 화면이 아니라 운영체제 화면의 속성을 갖는 객체 


9.6 location 객체

- 웹 브라우저의 주소 표시줄과 관련된 객체

- 웹에서 주소를 지정하는 방법은 두가지가 있다. 절대 경로, 상대경로

 절대경로의 경우 http:// 로 시작해야 하고, 상대경로의 경우 호출하는 페이지와 같은 폴더 안에서 사용 가능하다. ( 수업시간 page.html 을 직접적으로 작성)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
    window.onload = function(){
        var url1 = document.getElementById('url1');
        var url2 = document.getElementById('url2');
        var assign = document.getElementById('assign');
        var replace = document.getElementById('replace');
        var reload = document.getElementById('reload');
 
        assign.onclick = function(){
            //location.href =url1.value;
            location.assign(url1.value);
        }
        replace.onclick = function(){
            //location.href =url2.value;
            location.replace(url2.value);
        }
        reload.onclick = function(){
            //location.href =location.href;
            location.reload();
        }    
    }
    </script>
</head>
<body>
     <h1>location example</h1>
     <hr />
    <script>
        document.write('<h3> href : ' + location.href+ '</h3>');
        document.write('<h3> host : ' + location.host+ '</h3>');
        document.write('<h3> hostname : ' + location.hostname+ '</h3>');
        document.write('<h3> port : ' + location.port+ '</h3>');
        document.write('<h3> pathname : ' + location.pathname+ '</h3>');
        document.write('<h3> protocal : ' + location.protocal+ '</h3>')
        document.write('<h3> search : ' + location.search+ '</h3>');
    </script>
    <hr/>
    <input type='text' id = 'url1' value='http://'><button id = 'assign'>assign</button>
    <br/>
    <input type='text' id = 'url2' value='http://'><button id = 'repalce'>replace</button>
    <br />
    <button id = 'reload'>reload</button>
</body>
</html>
cs

 여기서 살펴볼점은 assign()과 replace() 메서드 모두 페이지를 이동하지만 replace() 는 뒤로가기를 사용할 수 없다는 차이점이 있다. 

replace의 경우에는 현재 페이지를 히스토리에 저장하지 않고, 바로 다음 웹페이지로 이동한다.(= 현재 웹페이지를 다른 웹페이지로 바꿔치기 한다.) 반면 assign() 은 현재 정보를 히스토리에 저장하고 다음 웹페이지로 이동한다. 뒤로가기 버튼을 누르면 히스토리에 저장되어진 이전 페이지로 이동한다. replace() 에서 뒤로가기를 누르면 전전 페이지로 이동하는 효과를 볼 수 있다. 



9.7 navigator 객체 


+) history 객체 

- length, back(), forward(), go({URL,number})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>history</title>
    <script>
    window.onload = function(){
        document.body.innerHTML += '<h3>history.length: ' + history.length + '</h3>';
        
        document.getElementById('back').onclick = function(){
            history.back();
        }
        document.getElementById('forward').onclick = function(){
            history.forward();
        }
        document.getElementById('go').onclick = function(){
            var goNum = document.getElementById('goNum');
            history.go(goNum.value);
        }
    }
    </script>
</head>
<body>
    <h1> history example </h1>
    <hr />
    <button id='back'>Back</button>
    <button id='forward'>Forward</button>
    <input type='number' id='goNum' /><button id='go'>Go</button>
</body>
</html>
cs


9.8 window 객체의 onload 이벤트 속성

- 문서 객체의 속성 중 'on' 으로 시작하는 속성을 이벤트 속성이라고 한다. 이 이벤트 속성은 함수를 할당해야 한다. 

- window 객체 로드는 HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간 로드가 완료된 것이다. 


[과제]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page 1</title>
    <script>
    // 사용자가 입력한 이름과 성별 정보를 읽어 page2.html 문서로 이동하는 코드작성
    // 이때, 사용자 입력 값은 반드시 파라미터로 포함되어야 함
    // 사용자는 한글을 입력할 수 있다
        window.onload = function(){
            var userName = document.getElementById('userName');
            var gender = document.getElementById('gender');
            var goPage2 = document.getElementById('goPage2');
 
            goPage2.onclick = function(){
                var url = 'page2.html?name=';
                url += encodeURIComponent(userName.value);
                url += '&gender=';
                url += encodeURIComponent(gender.value);
 
                location.href = url;
            }        
        }
    </script>
</head>
<body>
    <h1>Page1.html</h1>
    <hr />
    이름 <input type='text' id='userName' />
    성별 <input type='text' id='gender' />
    <button id='goPage2'>go Page2</button>
</body>
</html>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page 2</title>
    <script>
        var search = location.search.substring(1);
        var params = search.split('&');
        var param1 = params[0].split('=');
        var param2 = params[1].split('=');
        var content;
 
        if(param1[0] === 'name' && param2[0] === 'gender') {
            content = '<h3>이름은 ' + decodeURIComponent(param1[1]) 
            + '이고 성별은 '+ decodeURIComponent(param2[1]) + '입니다.</h3>';
        } else {
            content = '<h3>올바른 파라미터를 찾을 수 없습니다.</h3>';
        }
        window.onload = function() {
            document.body.innerHTML += content;
        }
    </script>
</head>
<body>
    <h1>Page2.html</h1>
    <hr />
</body>
</html>
cs


'코딩 > 교육' 카테고리의 다른 글

[JavaScript] 11장. 이벤트  (0) 2019.01.10
[JavaScript] 10장. 문서 객체 모델  (0) 2019.01.10
[JavaScript] 5장. 함수  (1) 2019.01.09
[0109] 함수  (1) 2019.01.09
[Javascript] 3장 4장  (1) 2019.01.08
공유하기 링크
'코딩/교육' Related Articles more
Comments