[ JS ] Day 13 - ① 브라우저 객체

DOM 객체

(1) BOM 객체 

1. BOM, Browser Object Model: 웹 브라우저와 관련된 객체의 집합
2. window, location, navigator, history, screen, document 객체
3. 협의의 브라우저 객체 모델은 document 객체문서는 제외
4. 객체 모델DOM, Document Object Model 에 포함

객체	설명
window	창에 대한 전반적인 모든 상황을 제어하는 최상위 객체입니다. 자바스크립트에서 사용되는 모든 객체는 window 객체의 하위에 존재합니다. 예를 들어 상태 바에 메시지를 출력하려면 window 객체로 접근해야 합니다.
document	문서에 대한 정보를 제어하는 객체입니다. 이미지나 폼을 구현할 경우 웹페이지의 문서에 출력합니다. document 객체는 이미지를 출력하기 위한 image 객체, 입력양식을 구현하기 위한 form 객체 등 다양한 객체들을 하위 객체로 갖고 있습니다.
location	주소 정보를 제어하는 객체입니다.
history	웹 브라우저에 기록되어 있는 히스토리 정보를 제어하는 객체입니다.
navigator	웹 브라우저의 종류를 판별해 주는 객체입니다.

 

(2) 내장 객체

• 내장 객체는 자바 스크릱트로 프로그램을 작성하는 동안 자주 사용되는 것들을 묶 어서 미리 정의해 놓은 객체
• 종류
  • Date
  • Array
  • String
  • Math
  • Screen

 

(3) 계층 구조

KmZone

 

 

Window 객체

(1) 브라우저 객체 접근

• 웹페이지의 최상위 객체인 window 객체의 하위 객체 중 문서를 제어하는 document 객체의 글자를 출력하는 write() 메소드를 접근하는 것이 원칙
  • window.document.write("출력할 글자");
• 하지만, 모든 객체는 당연히 window 객체의 하위 객체이므로 window를 생략하여 사용함.
  • document.write("출력할 글자");
• 상태 표시바에 글자를 표시
  • 웹 브라우저의 상태바에 다양한 형태로 메시지를 제공하려면 window 객체의 status 속성을 사용해야함
  • 문자열은 별도의 지시가 없는 한 상태 바에 나타나도록 할 문자열은 defaultstatus 속성에 대입한다.

 

(2) 창 속성 종류

창속성	속성 지정 방법	설명
toolbar	Yes or No	도구모임을 보여줄지 설정
loaction		URL를 표시하는 주소 표시줄을 보여줄지 설정
status		상태 바를 보여줄지 설정
menubar		메뉴 표시줄을 보여줄지 설정
scrollbars		스크롤 바를 보여줄지 설정
directories		디렉토리 바를 보여줄지 설정
resizable		창의 크기 조절가능하게 할지 설정
height	Pixel 수	창의 높이를 픽셀 단위로 지정
width		창의 너비를 픽셀 단위로 지정

 

(3) 메소드

• window.open()
  • 새로운 창을 만들어 화면에 출력하는 기능을 담당하는 메소드
  • window.open("연결할 URL", "창 이름" [, "창의 속성"]);
• window.close();
• window.opener
  • 바로 새로 열린 창에서 자기를 열어준 부모창을 가리키는 속성
• setTimeout()
  • 일정한 시간이 지난 후에 "호출 함수"를 한번만 실행하는 메소드
  • 타이머 ID = setTimeout("호출함수","지연시간");
• ClearTimer()
  • clearTimeout(타이머ID);
• setInterval / cloaseInterval

 

 

Frame 객체

(1) 프레임의 위치를 지정하는 frames 속성

1. 브라우저 창이 HTML의  태그에 의해서 여러 개의 프레임으로 나뉜다.
2. 이들 프레임들 중에서 특정 위치의 프레임을 지정하기 위해서 frames 속성을 이용할수 있다.
3. frames 속성은 따로 선언되지 않아도 생성된다.
4. 생성된 프레임 개수만큼 배열 형태로 제공된다

(2) self 속성

• self 속성은 브라우저 창을 여러 개의 프레임으로 나누 후에 각자 자식의 프레임을 지칭하고자 할 때 사용되는 속성
• 브라우저 창을 왼쪽과 오른쪽으로 분할한 후, 각자 자신의 프레임에서만 작업을 수행할 때 self 속성으로 자신의 프레임을 제어할 수 있다.

 

 

History 객체

(1) 속성

• history.length; 브라우저에 로드되었던 주소를 기억하고 있는 히스토리 리스트의 개수를 알림.

(2) 메소드

• back(); 히스토리 리스트에 저장된 주소 중에서 현재 로드된 문서를 기준으로 바로 이전에 열었던 페이지로 이동
• forward(); 이전 페이지로 이동한 후 다시 앞으로 이동하기 위해 제공되는 메소드
• go(); 히스토리 리스트에 저장된 주소에서 몇 단계 뒤에 있는  페이지로 이동

 

 

Location 객체

주소 입력란에 입력된 주소에 대한 정보를 상세히 알려주는 객체

(1) 속성

• href 속성
  • 현재 문서의 URL 주소를 알려줌
  • 원하는 웹페이지로 이동할 경우에도 사용, 원하는 사이트 이동을 원할 시 반드시 프로토콜("http://")을 명시해야함.

(2) 메소드

• replace(); 현재 문서의 URL 주소를 갱신. 원하는 웹페이지 주소 지정. replace() 메소드는 이전 페이지의 주소를 기록하지 않으므로 [뒤로] 단추를 사용하여 이전 페이지를 되돌릴 수 없음.
• reload(); 웹 브라우저의 웹 문서의 내용이 변경되었을 경우 이 내용을 나타내기 위한 [새로고침] 단추와 동일한 역할을 함.

 

 

Navigator 객체

navigator 객체는 현재 사용하고 있는 웹 브라우저에 관한 정보를 제공한다. 주로 브라우저 종류나 버전을 파악하는데 많이 사용

(1) 속성

속성	설명
appName	웹 브라우저의 종류를 알려줍니다. 익스플로러에서는 [Microsoft Internet Explorer]라고 표시하고 넷스케이프에서는 [Navigator]라고 출력합니다.
appCodeName	웹 브라우저의 코드 이름을 알려줍니다.
platform	사용자의 시스템 환경을 알려줍니다.
userAgent	웹 브라우저의 종류와 버전을 알려줍니다.
appVersion	웹 브라우저의 버전을 알려줍니다.

(2) 메소드

• javaEnabled(); 자바를 지원하는지를 알려줌. 지원하면 true, 지원하지 않으면 false를 반환.

 

 

References

1. kmZone, http://egloos.zum.com/kmzone/v/4991342 
2. Java Script - 03. 브라우저객체, 강태광 강사님의 PPT