자바스크립트 네번째 요약정리
4강 자바스크립트 브라우져 내장객체
window
- Frame
- Document
- Location
- History
navigator
- Plugin
- Mime Type
1. 브라우져 내장객체 - window 객체
- window 객체
-> 웹브라우져에 관한 정보를 접근하기 위한 객체
- 형식
window.속성
window.메소드
- 예
window.status = "안녕하세요"
window.close()
-----------------------------------------------------
속성 | 설 명
-----------------------------------------------------
classes | 문서에 정의된 css 정보를 가짐
-----------------------------------------------------
defaultsStatus | 상태바의 초기 문자열 설정
-----------------------------------------------------
frames | 프레임들의 배열 정보
-----------------------------------------------------
opener | open() 이용하여 연 문서
-----------------------------------------------------
parent | 상위의 window 객체를 가르킴
-----------------------------------------------------
self | 현재 활성중인 창의 자신객체
-----------------------------------------------------
status | 상태바에 문자열 출력
-----------------------------------------------------
tags | 문서안의 모든 태그 정보
-----------------------------------------------------
top | 최상위의 window객체를 가르킴
-----------------------------------------------------
-----------------------------------------------------
method | 설 명
-----------------------------------------------------
close() | open()으로 연 창 닫기
-----------------------------------------------------
alert() | 간단한 경고 메시지 창 보여줌
-----------------------------------------------------
moveBy() | 상대적인 좌표이동
-----------------------------------------------------
moveTo() | 절대적인 좌표이동
-----------------------------------------------------
open() | 새로운 창 열기
-----------------------------------------------------
resizeTo() | 절대적인 창의 크기 설정
-----------------------------------------------------
scrollBy() | 상대적인 좌표로 스크롤 이동
-----------------------------------------------------
setInterval() | 일정 간격으로 함수 한번 호출
-----------------------------------------------------
setTimeout() | 일정 간격으로 함수를 재귀 호출
-----------------------------------------------------
print() | 화면에 있는 내용을 프린터로 출력
-----------------------------------------------------
<html>
<head>
<title>소스6-1</title>
<script language="javascript">
<!--
function now_status()
{
window.status="자바스크립트를 공부합시다..."
}
function new_open()
{
//window.open(페이지 파일명, 불러올 파일의 객체명, 속성)
// 속성 : width:크기, height:높이, toolbar=yes/no, top:위위치, left:왼쪽위치
window.open("new.html","newwindow","toolbar=no, status=yes, width=100, height=180")
}
function re_size(sel)
{
switch(sel)
{
case "up" : window.moveTo(0,-20)
break;
case "down" : window.moveBy(0,20)
break;
case "left" : window.moveBy(-20,0)
break;
case "right" : window.moveBy(20,0)
break;
}
}
//-->
</script>
</head>
<body onload="now_status()">
<form>
<input type=button value="open" onclick="new_open()"> <br><br>
<input type=button value="up" onclick="re_size('up')">
<input type=button value="down" onclick="re_size('down')">
<input type=button value="left" onclick="re_size('left')">
<input type=button value="right" onclick="re_size('right')">
</form>
</body>
</html>
2. 브라우저 내장객체 - history 객체
- history 객체
-> 클라이언트가 방문한 URL에 관한 정보를 보여주는 객체
- 형식
history.속성
history.메소드
- 예
history.length
history.back() // 브라우저 이전 화면으로 이동
-----------------------------------------------------
Property | 설 명
-----------------------------------------------------
length | browser로 읽은 URL 개수 알기
-----------------------------------------------------
-----------------------------------------------------
method | 설 명
-----------------------------------------------------
back() | Browser 이전 화면으로 이동
-----------------------------------------------------
forward() | Browser 다음 화면으로 이동
-----------------------------------------------------
go() | 상대적인 숫자를 설정하여 본 화면으로 이동
-----------------------------------------------------
<html>
<head>
<title>소스6-2</title>
<script language="javascript">
<!--
document.write(history.length)
//-->
</script>
</head>
<body>
<form>
<input type=button value="이전" onclick="history.back()">
<input type=button value="다음" onclick="history.forward()"><br><br>
<input type=button value="2단계 이전" onclick="history.go(-2)">
<input type=button value="2단계 다음" onclick="history.go(2)">
</form>
</body>
</html>
3. 브라우저 내장객체 - location 객체
- location 객체
-> 현재 브라우저에서 보고 있는 문서의 URL주소에 관한 정보를 가지고 있는 객체
- 형식
location.속성
location.메소드
- 예
location.href="http://www.naver.com"
location.reload()
-----------------------------------------------------
Property | 설 명
-----------------------------------------------------
href | 문서의 url주소를 설정하거나 알아냄
-----------------------------------------------------
host | url주소의 호스트 이름과 포트 설정을 알아냄
-----------------------------------------------------
hostname | url주소의 호스트 이름이나 IP주소를 설정을 알아냄
-----------------------------------------------------
port | 포트번호를 설정하거나 알아냄
-----------------------------------------------------
pathname | 문서의 디렉토리 위치를 설정하거나 알아냄
-----------------------------------------------------
search | 검색엔진을 호출할때 사용
-----------------------------------------------------
-----------------------------------------------------
method | 설 명
-----------------------------------------------------
reload() | 현재문서를 다시 읽어옴
-----------------------------------------------------
replace() | 현재문서는 다른 URL문서로 바꾸어줌
-----------------------------------------------------
<html>
<head>
<title>소스6-3</title>
<script language="javascript">
<!--
function re()
{
location.replace("http://www.naver.co.kr")
}
function go_site()
{
location.href="http://naver.co.kr"
}
document.write("1)href : "+location.href+"<br>")
document.write("2)host : "+location.host+"<br>")
document.write("3)pathname : "+location.pathname+"<br>")
document.write("4)port : "+location.port+"<br>")
document.write("5)protocol : "+location.protocol+"<br>")
//-->
</script>
</head>
<body>
<form>
<input type=button value="이동" onclick="re()">
<input type=button value="가자 네이버로" onclick="go_site()">
</form>
</body>
</html>
4. 브라우저 내장객체 - navigator 객체
- navigator 객체
-> 브라우저의 이름, 버전 등 브라우저 관련 정보를 제공하는 객체
- 형식
navigator.속성
- 예
navigator.appName
navigator.appVersion
-----------------------------------------------------
Property | 설 명
-----------------------------------------------------
appCodeName | 브라우저의 코드명 반환
-----------------------------------------------------
appVersion | 현재 사용중인 브라우저의 버전 반환
-----------------------------------------------------
appName | 현재 사용중인 브라우저 이름 반환
-----------------------------------------------------
mimeType | MIME형식의 정보 반환
-----------------------------------------------------
plugins | 플러그인 정보 반환
-----------------------------------------------------
platform | 사용중인 시스템코드 반환
-----------------------------------------------------
userAgent | 브라우저의 이름, 버전, 코드 포함하는 문자열 반환
-----------------------------------------------------
<html>
<head>
<title>소스6-4</title>
<script languagu="javascript">
<!--
document.write("1) 브라우저명 ="+navigator.appName+"<br>")
document.write("2) 브라우저버전 ="+navigator.appVersion+"<br>")
document.write("3) 브라우저코드 ="+navigator.appCodeName+"<br>")
document.write("4) 브라우저언어 ="+navigator.language+"<br>") // explorer에서는 지원안됨
document.write("5) 사용자시스템 ="+navigator.platform+"<br>")
document.write("6) 이름/버전 ="+navigator.userAgent+"<br>")
//-->
</script>
</head>
<body>
</body>
</html>
5. 브라우저 내장객체 - document 객체
- document 객체
-> 브라우저에서 보여주는 문서에 관련된 정보에 접근할 때 사용되는 객체
- 형식
document.속성
document.메서드
- 예
document.bgColor = "yellow"
document.write("하하하")
-----------------------------------------------------
Property | 설 명
-----------------------------------------------------
alinkColor | 누르고 있는 링크 문자열 색 설정
-----------------------------------------------------
bgColor | 창의 배경색 설정
-----------------------------------------------------
cookie | 쿠키를 사용할 수 있게 해줌
-----------------------------------------------------
fgColor | 글자색을 설정
-----------------------------------------------------
images | 이미지 배열 정보
-----------------------------------------------------
lastModified | 가장 최근에 수정한 날짜 정보
-----------------------------------------------------
title | 웹페이지 제목 설정 및 반환
-----------------------------------------------------
referrer | 링크된 문서의 URL 정보
-----------------------------------------------------
linkColor | 링크색을 설정
-----------------------------------------------------
-----------------------------------------------------
method | 설 명
-----------------------------------------------------
clear() | 문서의 내용을 지움
-----------------------------------------------------
close() | 연 문서 닫기
-----------------------------------------------------
getSelection | 마우스로 drag한 문자열 반환
-----------------------------------------------------
open() | 문서의 데어터를 출력 준비
-----------------------------------------------------
write() | 문자열을 문서에 출력
-----------------------------------------------------
writeln() | 중바꾸기를 포함한 문자열을 문서에 출력
-----------------------------------------------------
6. 브라우저 내장객체 - Image 객체
- Image 객체
-> 문서에 포함되어 있는 이미지에 관한 정보를 담고 있는 객체
- 형식
document.images.속성
document.images[배열번호]
이미지객체명.속성
- 예
document.images.src="movie.jpg"
document.images.length // 이미지의 개수 파악
-----------------------------------------------------
Property | 설 명
-----------------------------------------------------
src | 이미지 파일을 알아내거나 설정
-----------------------------------------------------
border | 이미지의 테두리 값 반환
-----------------------------------------------------
name | 이미지 이름
-----------------------------------------------------
height | 이미지 높이
-----------------------------------------------------
width | 이미지 너비
-----------------------------------------------------
prototype | 이미지 객체에 속성 추가시 사용
-----------------------------------------------------
complete | 이미지 전송이 끝났는지 여부 반환
-----------------------------------------------------
| [프로그래밍/JavaScript] 자바스크립트에서 아이프레임(iframe) 링크걸기 (0) | 2017.06.24 |
|---|---|
| 자바스크립트 다섯번째 요약정리 (0) | 2016.11.06 |
| 자바스크립트 세번째 요약정리 (0) | 2016.11.06 |
| 자바스크립트 두번째 요약정리 (0) | 2016.11.05 |
| 자바스크립트 첫번째 요약정리 (0) | 2016.11.05 |