티스토리 뷰

Programming/JavaScript, jQuery

[javascript 13강] BOM (브라우저 객체)

국브 2019. 2. 18. 23:23

 [javascript 13강] BOM (브라우저 객체)



이번글에서는 BOM 에대해서 알아보겠습니다.

BOM 은 Browser Object Model 의 약자로 브라우저 관련 객체를 뜻합니다.

즉 브라우저에서 제공되는 객체를 컨트롤 할수있는것입니다.

링크주소나, 화면이나, 브라우저 히스토리나(브라우저 이력), 주소이동 등..

 BOM 을 통해 컨트롤 할수 있습니다.

BOM 에 알아보기전.. 이전글들을 링크해두었습니다.

모르는 부분이 있으시다면 들어가서 읽어보시길 권합니다... ㅎ


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 7강] 반복문(제어문)

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 6강] 조건문(제어문)

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 8강] 함수

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 9강] 함수 심화

2019/02/13 - [Programming/JavaScript, jQuery] - [javascript 10강] 객체

2019/02/13 - [Programming/JavaScript, jQuery] - [javascript 11강] 객체 심화

2019/02/17 - [Programming/JavaScript, jQuery] - [javascript 12강] 내장객체




 window 객체


window 객체는 이미 많이 사용했던 것들입니다.

예를 들어 alert 나 console.log 등 이미 사용해보았습니다.

그럼 window 객체의 사용법 및 예제를 확인해보겠습니다.


 사용방법 및 문법 


1. alert


alert("내용");

(경고창 생성)


또는


window.alert("내용");

(원래는 alert 를 사용하기위해서는 위와같이 입력해야하지만.. 많이 사용하기에 "window." 를 생략하고 사용할수 있게 javascript 에서 발표되어 "alert" 만 입력해도 사용이 가능합니다)


2. console.log


console.log("내용");


또는


window.console.log("내용");

(원래는 console.log 를 사용하기위해서는 위와같이 입력해야하지만.. 많이 사용하기에 "window." 를 생략하고 사용할수 있게 javascript 에서 발표되어 "console.log" 만 입력해도 사용이 가능합니다)


3. open


window.open("주소","윈도우의 이름","옵션");

(새로운 브라우저를 열어 해당주소를 띄워준다)

("윈도우의 이름" 은 생략가능..)


-window.open 옵션-

width : 팝업창 가로

height : 팝업창 세로

toolbar=no : 단축도구창 표시안함

menubar=no : 메뉴창 표시안함

location=no : 주소창 표시안함

scrollbars=no : 스크롤바 표시안함

status=no : 하단 상태바창 표시안함

resizable=no : 창변형 하지않음

fullscreen=no : 전체화면 하지않음

channelmode=yes : F11 키 기능

left=0 : 왼쪽에 창을 고정

(ex. left=20 이런식으로 조절)

top=0 : 위쪽에 창을 고정

(ex. top=80 이런식으로 조절)


4. 위치 조정

var 변수명 = window.open("주소","윈도우의 이름","옵션");


변수명.moveTo("위치값","위치값");
(절대위치)


변수명.moveBy(+조절값 또는 -조절값","+조절값 또는 -조절값");
(상대위치)


5. 사이즈 조정

var 변수명 = window.open("주소","윈도우의 이름","옵션");


변수명.resizeTo("위치값","위치값");
(절대위치)

변수명.resizeBy("+조절값 또는 -조절값","+조절값 또는 -조절값");
(상대위치)


 예제 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            alert("alert 경고창");
            window.alert("window.alert 경고창");
            
            console.log("console.log 내용");
            window.console.log("window.console.log 내용");
            
            var newWindow = window.open("https://m.naver.com/","","width=500, height=300");
            
            //스크린샷으로 표현하기 어려워 생략하였습니다..
            //newWindow.moveTo(50,50);
            //newWindow.moveBy(2,2);
            //newWindow.resizeTo(100,100);
            //newWindow.resizeBy(-1,-1);
            
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


alert("alert 경고창"); 

의로 인해 처음으로 나오는 경고창입니다.



window.alert("window.alert 경고창");

의로 인해 두번째 나오는 경고창입니다.



window.open("https://m.naver.com/","","width=500, height=300");

으로 인해 네이버주소로 이동된 새로운 창을 확인할수 있습니다.

창의 이름은 생각하였으며.. 옵션값으로 넓이 500, 높이 300 을 주어 위와같이 나오게 됩니다.



마지막으로 콘솔창을 확인해보면..

console.log("console.log 내용"); , window.console.log("window.console.log 내용");

으로 인해 콘솔 내용 2개가 출력된것을 확인할수 있습니다.




 window 객체 onload


window 객체에서 가장많이 쓰이는것은 onload (이벤트)일 것입니다.

javascript 언어는 인터프린트 언어입니다. 즉 브라우저의 해석기로 실행됩니다.

(인터프린터 언어의 특징은.. 맨 위에서부터 순차적으로 읽어 실행합니다.)

위에서 부터 쭈욱 읽으면서 실행한다면.. 문제가 있습니다..

만약 자바 스크립트로 css 수정이나, html 태그에 속성을 추가하거나.. 등등 의 스크립트를 위해다 짜놓고 실행한다면..

스크립트가 먼저실행이 되고... html 구문들이 읽히기 때문에.. 원하던 바로 실행이 안되게 됩니다...

즉 이러한 문제를 해결하기위해 onload 이벤트가 있습니다.

모든 구문을 읽고난후에..  onload 이벤트 내용이 실행이 되는것이죠.


 사용방법 및 문법 


window.onload = function(){ 모든구문이 읽힌후 실행할 스크립트 };



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            window.onload = function(){
                console.log("1등");
            }
            
            console.log("2등");
            console.log("3등");
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


우선 결과를 보면 "2등", "3등", "1등" 순으로 출력이 된것을 확인할수 있습니다.

"2등", "3등" 의 출력은 인터프린터 언어이기 때문에 순차적으로 실행이 되었고..


           window.onload = function(){
                console.log("1등");
            }
            


위의 onload 구문이 제일 마지막에 출력되어..

"1등" 이라는 구문이 하단에 있는것을 확인할수 있습니다.




 screen 객체


내가 사용하고 있는 모니터에 관련된 객체 라고 생각하시면 됩니다.

해상도, 가로길이, 세로길이 등의 스크린 관련 정보를 얻을수 있습니다.


 사용방법 및 문법 


screen.width

(스크린(모니터)의 넓이)


screen.height

(스크린(모니터)의 높이)



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
        console.log(screen.width);
        console.log(screen.height);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


(사용방법 및 문법에서 이미 설명하여.. 설명은 생략하겠습니다..)




 location 객체


location 객체는 브라우저의 주소에 관한 객체라고 생각하시면됩니다.


 사용방법 및 문법 


1. href


location.href = "주소";

("주소" 로 이동);


2. assign


location.assign("주소");

("주소" 로 이동);


3. replace


location.replace("주소");

("주소" 로 이동);


3. reload


location.reload();

(새로고침);



 예제 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
        window.onload = function(){
        
            location.href = "https://m.naver.com/";
            
            //동일 기능이라 생략..
            //location.assign("주소");
            //location.replace("주소");
 
            //새로고침도 생략..
            //location.reload();
 
        }
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


(사용방법 및 문법에서 이미 설명하여.. 설명은 생략하겠습니다..)




 글을 마치며..


이번글을 통해 BOM 객체에 대해서 알아보았습니다.

자주 사용하는거 위주로 설명하였습니다.

한번씩 코딩해보시길 바랍니다.


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 15강] 이벤트  (0) 2019.02.21
[javascript 14강] DOM (문서 객체)  (0) 2019.02.19
[javascript 12강] 내장객체  (0) 2019.02.17
[javascript 11강] 객체 심화  (0) 2019.02.13
[javascript 10강] 객체  (0) 2019.02.13
댓글