본문 바로가기
컴퓨터/언어,프로그래밍

자바스크립트 네번째 요약정리

스노우볼^^ 2009. 7. 7. 04:15

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       | 이미지 전송이 끝났는지 여부 반환
-----------------------------------------------------

[출처] 자바스크립트 네번째 요약정리|작성자 둘리


'컴퓨터 > 언어,프로그래밍' 카테고리의 다른 글

MFC API 차이  (0) 2009.07.08
자바스크립트 다섯번째 요약정리  (0) 2009.07.07
자바스크립트 두번째 요약정리  (0) 2009.07.07
자바스크립트 첫번째 요약정리  (0) 2009.07.07
FileOutputStream (파일 바이트 출력 스트림)과 FileWriter (파일 문자 출력 스트림)  (0) 2009.06.20
제주삼다수, 2L,... 오뚜기 진라면 매운... 상하목장 유기농 흰... 남양 프렌치카페 카... 고려인삼유통 홍삼 ... 종근당건강 오메가3... 요이치 카링 유무선...

'컴퓨터/언어,프로그래밍' Related Articles

티스토리툴바