본문 바로가기

국비필기노트/HTML & CSS & JS

JS_객체(Window, Location, History, Navigator)

▶Window 객체

 

1) Window객체란?

윈도우 객체는 자바스크립트의 전역객체이다. 즉, 자바스크립트의 모든 객체는 window 객체의 하위 객체로서 존재한다. 그러므로 내장 객체에 대한 접근 방법은 window.내장객체이름.함수이름( ) ; 이지만, 모든 객체가 window안에 내장되어 있기 때문에, window객체를 명시적으로 선언하는 것은 내장객체이름.함수이름( ) ; 처럼 생략하는 것이 가능하다.

 

 

2) window.open( ) 함수

자바스크립트의 모든 기능이 window객체의 하위기능이기도 하지만, 그 중 브라우저의 창을 제어하는 것과 관련된 open( ) 함수가 window 객체에 직접적으로 포함되어있기에 이를 window( )로 예시를 들어보자

open함수는 새로운 창을 여는 함수이다.

 

*새로운 창 열기: window.open("페이지 url");  

function open1 ( ) {
     window.open('http//www.naver/com');
}

 

*클릭할 때 마다 창이 새로 열리는 팝업창: window.open("페이지 url", "창이름", "옵션");

function open2 ( ) {
     window.open('http//www.naver/com', ' ',
      'width=300, height=500, scrollbars=no,toolbar=no, menubar=no, status=no, location=no');
}

 

*한번 생성된 팝업창을 지속적으로 재 사용하는 팝업창: window.open("페이지 url", "mywin", "옵션");

function open3 ( ) {
     window.open('http//www.naver/com', 'mywin',
     'width=300, height=500, scrollbars=no,toolbar=no, menubar=no, status=no, location=no');
}

 

 

▶Location 객체 

 

1) Location 객체란?

웹 브라우저의 주소 표시줄을 제어한다.

 

 

2) Location 종류

 

문서의 url 주소 location.href document.write( location.href );
호스트 이름과 포트 location.host document.write( location.host );
프로토콜 종류 location.protocol document.write( location.protocol );
URL 조회부분 location.search document.write( location.search );
디렉토리 이하 경로 location.pathname document.write( location.pathname );
현재페이지 새로고침 reload( ) ;  function refresh( ) {
            location.reload( ) ;
}

 

혹은 document.write가 아닌 console창에서 직접 해당 키워드를 입력하여 정보확인 하는 용도로 사용을 할 수 있고

 

<input type = "button" value = "네이버로 이동하기" onclick="goNaver()" />

<script>
   function goNaver( ) {
        location.href = "http://www.naver.com" ;
   }
</script>

 

과 같은 용도로 사용도 가능하다.

 

 

▶history 객체

 

1) history.back( ) ;

이전 페이지로 이동한다.

 

2) history.forward( ) ; 

다음 페이지로 이동한다. 

 

function안의 메서드로 사용한다.

 

 

▶Navigator

 

브라우저 정보를 조회하는 내장객체로서 하나의 웹 서비스로 다양한 브라우저를 지원할 수 있도록 처리하기 위한 기준이 되는 정보를 추출할 수 있다. 

 

브라우저 이름 navigator.appName
브라우저 코드명 navigator.appCodeName
플랫폼 정보 navigator.platform 
브라우저 정보 navigator.appVersion
사용자 정보 navigator.userAgent