6. 브라우저 내장 객체
현재 브라우저가 보여주고 있는 문서에 관한 여러 가지 정보뿐만
아니라 윈도우 정보, 히스토리 정보, 문서가 존재하는 위치에 관한 정보
등을 모두 포함하고 있다.
객체들은 계층구조로 이루어져 있고 가장 최상위에는 window 객체가
있으며 아래에는 frames, document, history, location 객체가 있으며
각각의 개체들은 아래로 또다른 객체들이 파생된다.
window 객체
① window 객체의 특성
● status
브라우저 하단에 있는 상태바에 원하는 문자열을 출력한다.
● defaultStatus
status에 특별한 문자열을 지정하지 않았을 때 브라우저 상태바에
출력할 문자열을 지정한다.
window.defaultStatus="string" |
● self
window 객체의 self 특성은 자기 자신을 가리킨다. 즉 window 객체가
된다. 한 윈도우 안에서 여러 개의 프레임을 사용하는 경우에 유용하다.
● parent/top
- parent : window 객체간에 계층구조가 생길 때 상위 객체를 말한다.
- top : window 객체간에 계층구조가 생길 때 최상위 객체를 말한다.
● frames
frames 특성은 배열로써 현재 윈도우에 포함되어 있는 프레임들을
가리킨다.
frames[0]은 첫번째 프레임, frames[1]은 두번째 프레임을 가리킨다.
"frame1"이란 이름을 가진 프레임을 가리키려면 window.frames["frame1"]이라고
하면 된다.
● innerHeight/innerWidth
윈도우의 내용이 실제로 나타나는 영역의 높이와 너비 정보가 포함되어
있다.
● outerHeight/outerWidth
윈도우 바깥 테두리의 높이와 너비 정보가 포함되어 있다.
● locationbar/menubar/personalbar/scrollbar/statusbar/toolbar
각 특성의 visible 값을 true나 false로 설정함으로써 설정한다.
locationbar.visible = true
menubar.visible = false |
② window 객체의 메소드
● open()
새로운 윈도우를 하나 만들어낸다.
open("URL", "window name",
"윈도우 특징")
윈도우 특징
toolbar/location/directories/status/menubar/scrollbars/resizable/copyhistorywidth/height
window1 = window.open("", "new window",
"status=yes, resizable=yes, menubar=no") |
● close()
open() 메소드를 통해 만든 윈도우를 닫는 역할을 한다.
● alert()
정보나 경고 메시지를 전하기 위한 간단한 다이얼로그 박스이다.
오직 정보를 일방적으로 보기만 하도록 되어 있다.
● confirm()
사용자로부터 대답을 받기 위한 다이얼로그 박스이다. OK와 Cancel
중에 하나를 선택받는다.
answer = comfirm("나 좋아해?") |
● prompt()
사용자로부터 문자열을 직접 입력받는 다이얼로그 박스이다.
prompt("message", "defalut
answer")
name = prompt("이름이 뭐니", "문성국") |
리턴값이 문자열이기 때문에 정수나 실수를 입력받고 싶다면 리턴된
값을 parseInt()나 parseFloat() 함수를 이용해 변환시켜 줘야 한다.
● setTimeout()
지정된 시간동안 기다린 후 지정된 명령을 실행시킨다.
setTimeout("function", time) |
function : 지정된 시간이 지난 후 실행할 함수나 명령
time : 기다릴 시간(단위 : ms, 1/1000초)
testTimer = setTimeout("showTime()",
1000) |
● clearTimeout()
앞에서 지정한 setTimeout() 메소드로 지정한 것을 해제시킨다.
● setInterval()
일정한 간격을 두고 명령을 주기적으로 실행시킨다.
setInterval("function", time)
setInterval("showTime()", 1000) |
● back()/forward()/home()
home() : 브라우저가 지정한 홈페이지로 이동시킨다.
● stop()/print()
stop() : 웹페이지로부터의 전송을 중단시킨다.
print() : 현재 윈도우에 보여주고 있는 내용을 프린터로 출력한다.
frames 객체
윈도우 속에 포함되어 있는 모든 프레임에 대한 정보를 제공하는
객체이다. ".length"를 통해 총 프레임 개수를 알 수 있고
인덱스를 사용하여 각각의 프레임에 접근할 수 있다. window 객체와
특성, 메소드, 이벤트 핸들러까지도 모두 같다.
document 객체
window 객체 바로 아래에 있으며 HTML 문서의 <body>..</body>택
안에 있는 내용들과 직접적으로 연결되어 있다.
툴바, 상태선, 문서위치 정보 등에는 접근할 수 없다. 자바스크립트로
하는 모든 작업들은 window 객체 안에서 이루어지기 때문에 "window.document"라고
쓸 필요가 없다.
① document 객체의 특성
● title
HTML 문서의 <title>..</title>택 속에 들어있는 문서의
제목을 문자열 형태로 포함하고 있다.
document.write(document.title) |
● location
현재 브라우저에 나타나 있는 문서의 URL 주소를 문자열 형태로 포함하고
있다. location은 특성 정보이기 때문에 오직 하나의 정보를 하나의
형태로 제공한다. window.location 객체는 객체이기 때문에 여러 가지
특성을 가진다.
document.write(document.location) |
● lastModified
문서가 가장 최근에 변경된 날짜에 대한 정보를 문자열 형태로 포함하고
있다.
document.write(document.lastModified) |
● referrer
링크를 통해 다른 문서를 읽어들였을 때 그 링크가 있던 문서의 URL
주소를 문자열 형태로 포함하고 있다.
window.location = document.referrer //링크가
있는 문서로 되돌아간다. |
● bgColor/fgColor/linkColor/alinkColor/vlinkColor
이 특성들은 모두 <body>택에서 설정되는 성질들이다. 각각의
특성들은 각각의 설정 값들을 문자열의 형태로 포함하고 있고 이 특성들을
수정하게 되면 그 즉시 브라우저 화면에 결과가 반영된다.
document.bgColor = "white" |
● anchors
HTML 문서에 들어있는 모든 표식(anchor, <a name="">로
지정)에 대한 정보를 배열로 포함하고 있다. 내장 객체인 String 객체의
anchor와 혼동하지 않도록 유의해야 한다. 몇 개의 표식이 있는지 ".length"를
통해 알 수 있으며 인덱스를 이용해서 각각 접근이 가능하다.
document.write(document.anchors.length) |
● links
HTML 문서에 들어있는 모든 링크(link, <a href="">로
지정)에 대한 정보를 배열로 포함하고 있다. ".length"로
몇 개의 링크가 있는지 알 수 있으며 인덱스를 이용해서 각각 접근이
가능하다.
document.write(document.links.length) |
● forms
HTML 문서에 들어있는 모든 입력 양식(<form>..</form>)에
관한 정보를 배열로 포함하고 있다. ".length"를 통해 총
입력 양식의 수를 알 수 있고 인덱스를 통해 각각 접근할 수 있다.
document.write(document.forms.length) |
● images/applets/embeds
각각 문서 안에 포함되어 있는 이미지, 자바 애플릿, 플러그인들에
대한 정보를 배열로 포함하고 있다. ".length"를 통해 모두
몇 개인지 알 수 있고 인덱스로 각각 접근할 수 있다.
● layers
문서 안에 포함되어 있는 레이어들에 대한 정보를 배열로 포함하고
있다.
② document 객체의 메소드
● open()
지정된 윈도우에 데이터를 보낼 준비를 할 때 사용한다. window 객체의
open() 메소드와는 다르다.
● close()
지정된 윈도우에 데이터를 모두 보냈다는 것을 알린다.
● clear()
브라우저에 나타난 문서를 지워주는 역할을 한다. close() 메소드로
확실히 닫혀진 문서에 사용해야 할 것이다.
● write()/writeln()
지정된 문서에 데이터를 출력하는 기능을 가진다. writeln()은 문자열을
출력할 뿐만 아니라 줄도 바꾸어 준다.
document.write("message")
document.writeln("message") |
History 객체
window 객체 바로 아래에 있는 것으로 브라우저의 히스토리 리스트
정보를 저장해 두는 곳이다. history 정보라는 것은 브라우저가 가장
최근에 방문했던 URL 주소를 말한다.
① history 객체의 특성
● length
현재 히스토리 리스트에 포함된 URL 주소의 개수를 알려준다. 오직
참조만 가능하고 수정은 불가능하다.
● back()/forward()
히스토리 리스트의 앞뒤로 오고 갈 수 있게 해준다. 넷스케이프 툴바의
Back과 Forward 메뉴와 동일한 역할을 한다.
<input type="button" value="앞으로"
onClick="history.back()">
<input type="button" value="뒤로"
onClick="history.forward()"> |
location 객체
현재 열려진 윈도우의 URL 주소에 관한 정보를 제공하는 객체이다.
프레임이 사용된 경우 계층구조의 최상단에 있는 문서의 URL 주소만을
포함하게 되어 있고 하위 문서들은 frames객체를 이용하여 파악한다.
① location 객체의 특성
모두 현재 문서의 URL 주소에 관한 정보를 좀더 상세하고 구체적으로
제공하기 위한 것들이다.
- href : 문서의 URL 주소 정보를 나타낸다.
- host : URL 주소의 호스트 이름과 포트 번호를 나타낸다.
- hostname : URL 주소의 호스트 이름
- protocol : 프로토콜 종류
- pathname : 디렉토리 위치
- port : 포트 번호
- hash : 표식 이름
document.write(location.href)
document.write(location.host)
document.write(location.pathname) |
location 객체에 직접 URL 주소를 입력하면 곧바로 해당 URL 주소에
있는 문서를 가져오게 된다.
location = "http://www.yahoo.com"
location.href = "http://www.yahoo.com"
window.location ="http://www.yahoo.com" |
② location 객체의 메소드
● reload()
현재 브라우저의 문서를 다시 읽어들이도록 한다.
● replace()
현재 브라우저의 문서 대신에 매개변수를 통해 지정한 문서를 읽어들이도록
하는 기능을 가진다.
link 객체
HTML 문서에 들어 있는 모든 링크에 대한 정보를 제공하는 객체이다.
document 객체로부터 파생되고 있다.
document로부터 파생된 객체 중에 links라는 특성은 link 객체들을
배열로 모아놓은 변수이다. 그러므로 문서의 각각의 link 객체는 document.links[index]로
접근할 수 있다. location 객체의 모든 특성들을 포함하고 있다.
● target 특성 : href 속성이 가리키는 곳에 연결된 후에 정보를
보여줄 윈도우나 프레임
document.write(document.links[0].href)
document.write(document.links[1].host)
document.write(document.links[2].target) |
ahchor 객체
HTML 문서에 있는 모든 표식에 대한 정보를 제공하는 객체이다.
document 객체로부터 파생되고 있다.
document로부터 파생된 객체 중에 anchors라는 특성은 ahchor 객체들을
배열로 모아놓은 변수이다. 그러므로 각각의 개체들은 document.anchors[index]로
접근할 수 있다.
navigator 객체
현재 사용하고 있는 넷스케이프나 익스플로러에 관한 일반적인 정보를
제공하는 특이한 객체이다. 브라우저 내장 객체의 계층구조에 속하지
않는다.
① navigator 객체의 특성
● appName
현재 사용중인 브라우저의 애플리케이션 이름을 문자열로 포함한다.
document.write(navigator.appName) |
● appVersion
현재 사용중인 브라우저의 버전을 문자열로 포함한다.
document.write(navigator.appVersion) |
● appCodeName
현재 사용중인 브라우저의 코드 이름을 문자열로 포함한다.
document.write(navigator.appCodeName) |
● userAgent
현재 사용중인 브라우저의 User Agent 정보를 포함한다.
document.write(navigator.userAgent) |
● mimeTypes
현재 브라우저가 어떤 MIME 타입을 지원하는지 보여주는 배열 변수이다.
특성 type : MIME 타입의 이름(text/hmtl, video/mpeg)
description : MIME 타입에 대한 설명
enabledPlugin : MIME 타입이 처리할 Plugin 객체
suffixes : MIME 타입에 해당하는 파일의 확장자 리스트
for(var i=0 ; i < navigator.mimeTypes.length
; i++) {
document.write(navigator.mimeTypes[i].type
+ "<br>")
document.write(navigator.mimeTypes[i].description
+ "<br>")
document.write(navigator.mimeTypes[i].suffixes)
} |
● plugins
현재 브라우저가 지원하고 있는 플러그인 프로그램에 관한 정보를
보여주는 배열 변수이다.
특성 type : 플로그인의 이름
filename : 디스크에 있는 플러그인 파일의 이름
description : 플러그인에 대한 설명
[...] : 플러그인이 처리할 수 있는 mimTypes 객체의 배열
length : 배열의 크기
document.write(navigator.plugins.length)
document.write(navigator.plugins[index].description) |
● language
현재 브라우저가 사용하는 언어가 어떤 것인지 알려준다.
document.write(navigator.language) |
● platform
현재 브라우저가 실행되고 있는 시스템의 종류를 알려준다.
document.write(navigator.platform) |
image 객체
HTML 문서상의 이미지에 관한 정보를 접근하기 위한 객체이다. document
객체의 특성 images 배열 변수를 사용하여 접근한다.
① image 객체의 특성
● name
<img>택의 name 속성으로 지정된 값이다.
name 속성이 "myimage"라면 document.myimage로 접근할
수 있다.
document.write(document.images[index].name) |
● src/lowsrc
이미지 파일이 위치하는 곳의 URL 주소를 가지고 있다.
lowsrc는 해상도가 적은 이미지의 주소를 가진다. 주소를 직접 지정하면
이미지를 나타낸다.
document.images[index].src="/image/image.gif"
document.write(document.images[index].src) |
● border/height/width/hspace/vspace
모두 <img>택에서 설정했던 것들이다.
document.write(document.images[index].border)
document.write(document.images[index].width)
document.write(document.images[index].height)
document.write(document.images[index].hspace)
document.write(document.images[index].vspace) |
● complete
브라우저가 이미지 파일을 모두 전송 받았는지를 알려주는 Boolean
변수이다.
document.write(document.images[index].complete) |
|