본문 바로가기

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

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

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


제주삼다수, 2L,... 오뚜기 진라면 매운... 상하목장 유기농 흰... 남양 프렌치카페 카... 고려인삼유통 홍삼 ... 종근당건강 오메가3... 요이치 카링 유무선...