안녕, 세상!

6. 웹브라우저 내장객체 본문

It공부/JavaScript

6. 웹브라우저 내장객체

dev_Lumin 2020. 7. 28. 16:10

웹 프로그램에서 사용할 수 있는 객체는 자바스크립트 자체에서 지원하는 내장 객체와 웹브라우저에서 사용하는 클라이언트 측 객체로 구분할 수 있습니다.

앞의 4장에서 자바스크립트 자체에서 지원하는 내장 객체를 보았다면, 이번에는 웹브라우저에서 사용하는 클라이언트 객체를 보겠습니다.

 

웹브라우저 내장객체는 웹브라우저 자체의 이름이나 버전 정보 또는 브라우저 상에 표시되는 웹페이지의 문서나 폼(form)과 같은 정보들을 자바스크립트 프로그램에서 제어할 수 있도록 제공되는 자바스크립트 내장 객체입니다.

 

자바스크립트는 클라이언트 측 객체인 HTML 문서가 브라우저에 로드되면 HTML 문서의 다양한 태그 등 관련 정에 기초하여 동적으로 제어할 수 있도록 객체를 생성합니다.

 

 

 

(1) 클라이언트 측 객체 구조

클라이언트 측 객체의 최상위 객체는 window 객체입니다.

window 계층 아래의 구조는 다음과 같습니다.

 

 

 

(2) window 객체

윈도우 객체는 최상위 객체이므로 자바스크립트 코드를 작성할 때 속성 앞에 window를 붙이지 않아도 됩니다.

예시로 자주 사용하던 document.write() 의 원래 문장은 window.document.write() 입니다.

 

그러나 예외적으로 다른 객체에도 동일한 이름의 메소드가 있는 경우에는 반드시 window라는 객체 이름을 사용해야 합니다.

예시로 window.open()과 window.close() 가 있습니다.

 

윈도우의 객체는 window 대신에 self나 this로 표현해도 됩니다.

윈도우 객체가 제공하는 status 속성을 이용할 때 다음과 같이 사용 가능합니다.

 

 

window.status

status

self.status

this.status 

 

 

모두 같습니다.

 

 

(1) 윈도우 객체의 속성

속성 설명
status 브라우저의 상태바에 출력할 문자열 설정
defaultStatus 브라우저의 상태바에 표시할 초기 문자열 설정
length 창안의 프레임 수
name 창 이름
self 현재 창 자신, window와 같음
window 현재 창 자신, self와 같음
parent 프레임에서 현재 프레임의 상위프레임
top 현재 프레임의 최상위 프레임
opener open() 메소드로 열린 창에서 볼 때 자기를 연 창, 즉 새 창을 열도록 한 문서
document document 오브젝트
frames 창안의 모든 프레임에 대한 배열정보
history history 오브젝트 및 배열
location  location 오브젝트
closed 창이 닫혀 있는 상태
locationbar location 바
menubar 창 메뉴 바
personalbar 창의 퍼스너 바
scrollbar 창의 스크롤 바
screenX 창의 X 좌표 값을 반환
screenY 창의 Y 좌표 값을 반환
statusbar 창의 상태 바
toolbar 창의 툴 바

 

 

(2) 윈도의 메소드 속성

메소드 의미
alert("내용") 경고용 대화상자를 보여줌
confirm("내용") 확인, 취소를 선택할 수 있는 대화상자를 보여줌
open("문서명", "창이름", "속성") 윈도우 열기
close() 윈도우 닫기
prompt("창제목", "내용") 입력창이 있는 대화상자를 보여줌
setTimeout("명령", "시간") 일정 간격으로 명령을 반복 수행, ms 단위
clearTimeout() setTimeout 메소드를 중지
eval() 문자열을 숫자로 바꿈
toString() 오브젝트를 문자열로 바꿈
blur() focus를 이동
focus() focus를 줌
valueOf() 오브젝트 값을 반환
moveBy(x, y) 브라우저를 x,y 만큼 이동
moveTo(x, y) 브라우저를 x, y 위치로 이동
resizeBy(x, y) 브라우저의 크기를 상대적 x,y 크기로 설정
resizeTo(x,y) 브라우저의 크기를 x,y 크기로 설정
scroll(x,y) 창을 스크롤 함
scrollBy(x,y) 현재 위치에서 스크롤을 x, y 만큼 이동
scrollTo(x,y) 스크롤을 x,y로 이동
captureEvents() 모든 타입의 이벤트를 판단
setInterval() 일정시간마다 지정된 처리를 반복
clearInterval() setInterval 메소드의 정지
handleEvent() 이벤트 취급자를 정함
print() 화면에 잇는 내용을 프린터로 출력
releaseEvent() 다른 계층의 이벤트로 이벤트를 넘김
routeEvent() 판단한 이벤트와 같은 계층의 이벤트
toSource() 오브젝트값을 문자열로 반환

 

 

 

① open() 메소드 

open 메소드의 속성은 다음과 같습니다.

속성 속성값 의미
menubar yes / no 메뉴바 표시여부
toolbar yes / no 툴바 표시 여부
location yes / no 주소 표시줄 표시 여부
resizable yes / no 창 크기 조절 가능 여부
status yes / no 상태 표시줄 표시 여부
scrollbars yes / no 스크롤바 표시 여부
fullscreen yes / no 전체 화면으로 표시
width pixel 창의 너비
height pixel 창의 높이
left pixel 화면에서 창이 왼쪽으로부터 떨어진 간격
top pixel 화면에서 창이 위쪽으로부터 떨어진 간격

 

윈도우 객체의 open(), close() 메소드의 형식은 다음과 같습니다.

 

 

var win1 = window.open("url", "name", "속성1, 속성2, ... , 속성n" , replace);

 

 

//name : 새로 열릴 창의 속성 또는 이름을 지정합니다.

name의 속성

_blank : 새 창에서 열립니다. (디폴트 값)

 _parent : 부모 프레임에서 열립니다.

_self : 현재 페이지를 대체합니다.

_top : 로드된 프레임 셋을 대체합니다.

name : 임의의 이름을 지정합니다. 동일한 이름에 다시 open()을 하면 해당 이름의 창에서 url이 열립니다.

 

//replace : 히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 결정

true : 현재 스토리를 대체함

false : 히스토리에 새 항목을 만듦

 

 

 

다음은 open() 메소드를 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language='javascript'>
  var win1=null;
  function win_open(loc){
    win1=window.open(loc, "open win1", "heigth=300, width=600, scrollbars=yes, toolbar=yes, resizable=yes",true);
  }
  </script>
</HEAD>
<BODY>
  버튼을 누르면 해당 창이 열립니다.<br>
  <form>
    <input type="button" value="다음" onClick="win_open('http://www.daum.net')">
    <input type="button" value="열린창닫기" onClick="win1.close()">
    <input type="button" value="현재창닫기" onClick="self.close()">
  </form>
</Body>
</HTML>
 cs

'열린 창닫기' 버튼을 누르면 열린 다음 창이 닫힙니다. 

하지만 '현재창닫기' 버튼은 IE(인터넷 익스플로러)에서는 작동하지만 크롬에서 작동하지 않습니다.

크롬의 보안정책 때문에 그렇습니다.

https://hyxn.tistory.com/4

 

자바스크립트 창 닫기 window.close()와 크롬(chrome)

고객요청으로 퀵바(따라다니는 메뉴? 퀵메뉴?)를 추가하는데 그 안에 닫기 기능을 넣었다. 아니......근데 안닫힌다...익스는 닫히는데 하;;; 우선 한숨부터 쉬고 한참동안 구글링을 했고 그 결과 �

hyxn.tistory.com

이곳을 참고하여 다음과 같이 코드를 바꿔봤습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language='javascript'>
  var win1=null;
  function win_open(loc){
    win1=window.open(loc, "open win1", "heigth=300, width=600, scrollbars=yes, toolbar=yes, resizable=yes",true);
  }
  function selfc() {
    window.open(location,'_self').close();
  }
  </script>
</HEAD>
<BODY>
  버튼을 누르면 해당 창이 열립니다.<br>
  <form>
    <input type="button" value="다음" onClick="win_open('http://www.daum.net')">
    <input type="button" value="열린창닫기" onClick="win1.close()">
    <input type="button" value="현재창닫기" onClick="selfc()">
  </form>
  <a href="javascript:selfc();">현재창닫기</a>
</body>
</HTML>
 cs

 

하지만 여전히 크롬 창이 닫히지 않습니다.

크롬 창에 관한 문제는 아직 해결하지 못했습니다.

 

 

 

 

 

② setTimeout()과 clearTimeout() 메소드

전에 사용해보고 예제가 있기 때문에 자세한 설명은 생략하겠습니다.

 

 

③ 윈도우 이동 메소드

moveBy(x, y) : 윈도우 창을 상대거리 만큼 이동시키는 메소드. x는 이동할 수평 길이, y는 이동할 수직길이

 

moveTo(x, y) : 윈도우 창을 절대 위치로 이동시키는 메소드. 좌측 상단을 (0, 0) 으로 기준 잡고 수평(x), 수직(x)의 위치로 이동시킴

 

scroll(x, y) : 윈도우 안의 문서의 내용을 상대 거리만큼 이동시키는 메소드

 

scroll(x, y) : 윈도우 안의 문서의 내용을 절대 위치로 이동시키는 메소드

 

 

④ resizeBy 와 resizeTo 메소드

resizeBy(x, y) : 윈도우 창의 크기를 상대거리 만큼 변동시키는 메소드  ex) resizeBy(20, -20);

 

resizeTo(x, y) : 윈도우 창의 크기를 절대 크기로 변동시키는 메소드

 

 

 

 

 

(3) history 객체

히스토리 객체는 사용자가 최근 방문했던 URL 리스트 정보를 기록해 두었다가 원하는 페이지로 이동할 수 있는 기능을 제공해주는 객체입니다.

 

(1) history 속성

length : 브라우저로 읽어온 URL 주소의 개수를 알아낼 수 있습니다.

 

 

    History.length

 

 

(2) history 메소드

back() : 현재의 웹브라우저에서 방문한 이전 페이지로 이동

 

     history.back();

 

forward() : 현재의 웹브라우저에서 방문한 다음 페이지로 이동

 

    history.forward();

 

go() : + 또는 - 숫자를 설정하여 숫자만큼 방문한 페이지로 이동

 

    history.go(번호, URL);

 

 

다음은 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script>
  function historylength(){
    alert("방문한 히스토리의 수는"+history.length+"개 입니다.");
  }
  </script>
</HEAD>
<BODY>
  <form>
    <input type="button" value="방문한 히스토리 수" onclick="historylength()"><br>
    <input type="button" value="이전페이지" onclick="history.back()">
    <input type="button" value="다음페이지" onclick="history.forward()">
    <input type="button" value="2단계 이전페이지" onclick="history.go(-2)">
  </form>
</body>
</HTML>
 cs

 

다음과 같이 히스토리 수도 잘 나오고 이전페이지와 2단계 이전페이지도 잘 나옵니다.

 

 

 

 

 

(4) location 객체

location 객체는 현재 URL에 대한 정보를 저장하고 관리하기 위하여 사용됩니다.

 

(1) location 객체의 속성

location 객체의 속성 설명
host 호스트 이름과 포트 번호를 설정하거나 검색
hostname 호스트 이름을 설정하거나 검색
href 전체 URL 주소를 설정하거나 검색
pathname 웹 문서의 경로를 설정하거나 검색
port 포트 번호를 설정하거나 검색
protocol 프로토콜의 종류를 설정하거나 검색
hash 표식 이름을 설정하거나 검색
search 검색 엔진을 호출할 때 사용

 

 

(2) location 객체의 메소드

Location 메소드 설명
toString() location.href를 반환해 주는 메소드
assign() location.href를 설정해 주는 메소드
reload() 문서를 새로 고치거나 다시 읽게 해주는 메소드
replace("URL") 현재 문서를 URL문서로 대체해 주는 메소드

 

 

 

다음은 href 를 이용해서 현재의 URL을 나타내는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script>
  function pageStatus() {
    var info ="웹 페이지 경로 : \n"+location.href;
    alert(info);
  }
  </script>
</HEAD>
<BODY>
  <form>
    <input type="button" value="웹페이지의 위치정보" onClick="pageStatus()">
  </form>
</body>
</HTML>
 
 cs

 

 

 

 

(5) Document 객체

네비게이터 계층구조에서 가장 많이 사용하는 내장 객체로 <body> ~ <body> 태그 사이에 존재하는 내용과 관련된 처리를 하는 다양한 하위 객체를 구성하고 있습니다. (Layer, link, image, .....)

 

다음은 Document 객체의 속성입니다.

Document 객체의 속성 설명
alinkColor 누르고 있는 동안 링크 문자열의 색 설정하는 속성
anchors HTML 문서안에 있는 <form> 태그에 관한 정보를 배열로 보유
applet 자바 애플릿을 참조하는 속성
applets 자바 애플릿의 모든 객체들을 참조하는 속성
bgColor 문서의 배경색을 설정하는 속성
fgColor 글자색을 설정하는 속성
linkColor 문서에서 하이퍼 텍스트의 링크의 색상을 설정하는 속성
vlinkColor 이전에 방문했던 링크를 나타내는 색상 속성
cookie 쿠키 명령을 전달하는 속성
forms 문서에 들어있는 이미지 입력양식을 참조하는 속성
images 문서에 들어있는 이미지 객체를 참조하는 속성
lastModified 문서가 마지막으로 수정된 날짜 속성
links HTML 문서 안에 있는 <a href> 태그에 관한 정보를 배열로 보유
plugin[] 브라우저가 지원하는 모든 플러그인 객체를 나타내는 속성
embeds  문서에 포함된 플러그인을 배열로 제공
referrer 링크된 이전문서의 URL 정보를 참조하는 속성
title 문서의 제목을 지정하거나 반환
domain 서버의 도메인명을 지정 또는 반환
location 문서의 URL 주소를 저장
URL 문서의 URL을 나타내는 속성

 

속성이므로 document.~ 형식으로 사용하면 됩니다.

 

 

(2) Document 객체의 메소드

document 객체의 메소드 설명
clear() 문서의 모든 내용을 삭제시키는 메소드
open() 문서의 데이터 정보를 나타내기 위한 메소드
close() open() 메소드를 이용해 열었던 문서를 닫아주는 메소드
write() HTML 태그 및 문자열을 출력해 주는 메소드
writeln() 줄바꾸기를 포함한 HTML태그 및 문자열 출력해 주는 메소드
selection() 마우스로 드래그한 문자열을 반환하는 메소드

 

 

 

 

(6) Image 객체

Image 객체는 HTML 문서의 <IMG> 태그에 의해 삽입되어 있는 이미지에 관한 정보를 저장하고 있는 객체로 웹 문서에 <IMG> 태그가 있다면 웹 브라우저는 자동으로 Image 객체를 생성합니다.

Image 객체는 HTML 문서에 삽입되어 있는 이미지들을 배열로 구성하여 가지고 있습니다.

사용 형식은 다음과 같습니다.

 

 

document.images.length;               // images : 이미지의 name 부분

document.images[이미지 배열번호]

 

 

다음은 Image 객체의 속성입니다.

image 객체의 속성 설명
align 이미지의 주변 글자들 간의 정렬방식을 저장하고 있는 속성
border 이미지의 테두리 두께를 저장하고 있는 속성
height 이미지의 세로 길이를 저장하는 속성
width 이미지의 가로 길이를 저장하는 속성
hspace 이미지와 주변글자들 간의 가로 여백을 저장하는 속성
vspace 이미지와 주변글자들 간의 세로 여백을 저장하는 속성
lowsrc 이미지 파일 URL 주소를 저장하는 속성
<IMG> 태그의 Lowsrc 속성에 있는 URL 주소는 해상도가 낮은 이미지 파일이 저장되어 있는 URL 주소로서 <IMG> 태그의 src에 지정되어 있는 이미지 파일(해상도가 높은 이미지 파일)이 완전히 전송될 때 까지만 보여주고자할 때 사용
name 이미지의 이름을 저장하는 속성
complete 이미지의 전송이 완료되었는지의 여부를 true와 false로 가지고 있는 속성
웹브라우저가 이미지 파일을 정상적으로 모두 전송 받았다면 true 값이 저장
prototype 이미지 객체의 새로운 속성을 만들 때 사용되는 속성

 

 

다음은 예제입니다.

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
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <script language="javascript">
  function imgsize(wd,ht){
    ironman.width+=wd;
    ironman.height+=ht;
    wid.innerText = "이미지가로길이:"+document.ironman.width;
    hei.innerText = "이미지세로길이:"+document.ironman.height;
  }
  </script>
  </head>
<body>
    <img src="C:///download/iamironman.jpg" name="ironman" border="2"><br>
    <script language="javascript">
    document.write("<h5 id='wid'> 이미지가로길이:"+document.ironman.width+"</h5>");
    document.write("<h5 id='hei'> 이미지세로길이:"+document.ironman.height+"</h5>");
    document.write("이미지이름:"+document.ironman.name +"<br>");
    document.write("이미지URL주소:"+document.ironman.src+"<br>");
    document.write("이미지전송완료여부:"+document.ironman.complete+"<br>");
    </script>
    <form>
      <input type=button onclick="imgsize(20,20)" value="크게">
      <input type=button onclick="imgsize(-20,-20)" value="작게">
 </body>
</HTML>
 cs

 결과는 이미지에 대한 정보들이 출력되며, '크게' 버튼과 '작게' 버튼을 누르면 이미지 크기도 변하고 '이미지가로길이: '의 값과 '이미지세로길이' 의 값도 변합니다.

IE에서는 모두 잘 실행이 되는데 크롬에서는 '이미지가로길이', '이미지세로길이' 의 값이 잘 안 나오고 이미지가 화면에 보임에도 불구하고 이미지 전송 여부가 false로 나옵니다.

일단 위의 실습은 IE에서 작동하는 것을 확인할 수 있습니다.

 

 

 

 

(7) Frame 객체

frame 객체는 <FRAMESET> ~ </FRAMESET> 태그이며, 웹브라우저 화면을 몇 개 창으로 분할할 것인지, 어떤 크기의 창으로 분할할 것인지 지정하는 태그입니다.

frame 객체는 window 객체의 하위 객체이며, window 객체와 동일한 구조를 가지고 있고 이 frame 객체에 포함되어 있는 속성 및 메소드가 window 객체에 포함되어 있는 속성 및 메소드가 동일하고 frame 객체에서 다룰 수 있는 이벤트도 window 객체와 동일합니다.

 

 

 

 

 

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

'It공부 > JavaScript' 카테고리의 다른 글

7. 입력 양식 객체  (0) 2020.07.29
5. 이벤트와 이벤트 핸들러  (0) 2020.07.27
4. 객체  (0) 2020.07.26
3. 함수  (0) 2020.07.24
2. 연산자와 제어 구조  (0) 2020.07.24
'It공부/JavaScript' Related Articles more
Comments