10장. 브라우저 내장객체II
document 객체
document 객체는 window 객체 바로 아래에 있는 것으로 BODY택 안에 있는 내용들과 직접적으로 연결되어 있다. 그렇기 때문에 document 객체에서는 툴바,상태선,문서위치 정보 등에는 접근할 수가 없다. 그런데 여기서 BODY 택이라고 하지만 정확히 말하면 꼭 그렇다고 볼 수는 없다. 왜냐면 HEAD안에 있는 TITLE 택의 정보에도 접근할 수 있으며, 문서의 변경 날짜 정보에도 접근할 수 있기 때문이다.
document 객체
속성
title
문서의 제목
location
문서의 URL 위치
lastModified
문서를 마지막으로 수정한 날짜
referrer
링크로 현재 문서에 왔을 때 이전 문서의 URL 위치
bgColor
문서의 배경색
fgColor
문서의 전경색
linkColor
문서에서 링크를 표시하는 색
alinkColor
링크를 클릭했을 때 나타나는 색
vlinkColor
이전에 방문했던 링크를 표시하는 색
anchors
문서에 있는 표식들의 배열
forms
문서에 있는 입력 양식들의 배열
links
문서에 있는 링크들의 배열
images
문서에 있는 이미지들이 배열
applets
문서에 있는 자바 애플릿들의 배열
embeds
문서에 있는 플러그인들의 배열
cookie
클라이언트 쪽의 PC에 저장한 정보
메소드
open()
문서에 데이터를 출력하기 위해 준비시키는 것
close()
문서에 데이터 출력하는 것을 마무리
clear()
브라어저에서 문서 지우기
write()
문서에 데이터 출력
writeln()
문서에 데이터 출력(줄바꾸기 포함)
이벤트
핸들러
onFocus
문서가 focus를 얻었을때
onBlur
문서가 focus를 잃었을때
history 객체
window 객체 바로 아래에 있는 것으로, 브라우저의 히스토리 리스트 정보를 저장해 두는 곳이다. history 객체에서 제공하는 여러 메소드들을 이용하여 방금 지나왔던 페이지로 이동할 수 있게 된다.
history 객체
속성
length
히스토리 리스트에 포함되어 있는 URL 주소의 개수
메소드
back()
히스토리 리스트에서 한단계 앞으로 이동
forward()
히스토리 리스트에서 한단계 뒤로 이동
go()
히스토리 리스트에서 임의의 위치로 이동
<form>
<input type="button" value = "이전의 문서나 url은 무엇일까요?
onclick="history.go(-1)" >
</fomr>
navigator 객체
navigator 객체
속 성
appName
애플리케이션 이름, 예:Netscape
appVersion
브라우저 현재 버전, 예:2.0 (Win16;I)
appCodeName
브라우저 현재 코드 이름, 예:Mozilla
userAgent
브라우저의 현재 User Agent
mimeTypes
브라우저에서 지원하고 있는 MIME 타입들
plugins
현재 브라우저에 설치된 플러그인 종류
메소드
javaEnabled()
현재 브라우저에서 자바를 지원하고 있는지 체크
다음의 예제를 실행하여 보자
document.write(navigator.appName)
document.write(navigator.appVersion)
document.write(navigator.appCodeName)
document.write(navigator.userAgent)
document.write( navigator.appName + " " + navigator.appVersion)
위의 실행된 결과이다.
애플리케이션 이름: Microsoft Internet Explorer
브라우저 버전: 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
브라우저 코드 이름: Mozilla
User Agent : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) 애플리케이션 이름: Microsoft Internet Explorer
브라우저 버전: 4.0 (compatible; MSIE 5.0; Windows NT; DigExt)
브라우저 코드 이름: Mozilla
User Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)
Image 객체
Image 객체는 넷스케이프 3.0버전부터 추가된 것이기 때문에 그 이하 버전에서는 사용할 수 없다.
Image 객체
속성
name
image객체의 이름
src
이미지 파일의 위치
lowsrc
이미지 파일의 위치
border
테두리선 굵기
height
이미지의 세로길이
width
이미지의 가로길이
hspace
이미지의 가로여백
vspace
이미지의 세로여백
complete
이미지 전송이 끝났는지 여부
prototype
image 객체에 특성을 추가하기 위한 것
이벤트
핸들러
onAbort
이미지 전송을 중단시켰을 때
onError
이미지 전송중 에러가 발생했을 때
onLoad
이미지가 브라우저에 나타날 때
다음의 이미지 속성을 나타내 보자
image 객체 활용
사용자의 요구가 있는 시점에서 이미지를 읽어들이지 않고 그 전에 모든 이미지를 미리 읽어들임으로써 바로바로 이미지의 치환이 가능하도록 하는 것이다. 이러한 것을 이미지를 미리 읽어들인다하여 Image Preloading 방법이라고 한다. 다음의 코드를 보자.
image1 = new Image()
image1.src = "images/image1.gif"
이제 이미지를 바꿀 때에는 다음과 같은 코드를 적어주면 된다.
document.img.src = image1.src
이제 이미지는 브라우저의 캐쉬메모리로부터 가져와 바로 보여줄 수 있다. 즉, 이미지를 미리 읽어들인 것이다.
<html> <head>
<script language="JavaScript">
image1over = new Image();
image1over.src = "images/image1over.gif";
image1out = new Image();
image1out.src = "images/image1out.gif";
</script></head>
<body>
<img src="images/image1out.gif" name="image1"
onmouseover="document.image1.src=image1over.src"
onmouseout="document.image1.src=image1out.src" >
<a href="#" onmouseover="document.image1.src=image1over.src"
onmouseout="document.image1.src=image1out.src" >
여기위로 마우스를 올려보세요 </a>
</body> </html>
Comments List