윤제니

JavaScript - Document 객체, Location 객체, Screen 객체, History 객체, Navigator 객체 본문

JavaScript/JavaScript

JavaScript - Document 객체, Location 객체, Screen 객체, History 객체, Navigator 객체

꿈다루 2020. 5. 5. 13:50

Document 객체

  •   write() 메서드 : 출력 결과를 보기 위해 사용 

 

Location 객체

  • 브라우저의 주소창의 URL과 관련된 객체

  1) 속성

속성 설명
hash

주소의 앵커명(#)을 반환

https://jenny-daru.tistory.com#jenny

  =>  #jenny
host

주소의 호스트명과 포트번호를 반환

https://jenny-daru.tistory.com/

  => https://jenny-daru.tistory.com:8000
hostname

주소의 호스트명을 반환

https://jenny-daru.tistory.com/

  => https://jenny-daru.tistory.com
port

주소의 포트번호를 반환

https://jenny-daru.tistory.com/

  =>  8000
pathname

주소의 패스명을 반환

https://jenny-daru.tistory.com/jenny/javascript.html

  => /jenny/javascript.html
href

주소의 값을 반환

https://jenny-daru.tistory.com

  => https://jenny-daru.tistory.com
protocol

주소의 프로토콜명을 반환

https://jenny-daru.tistory.com/

  => http:
search

 주소의 쿼리 문자열을 반환

https://jenny-daru.tistory.com/search?write=5

  => ?write=5

 

  2) 메서드

  • reload( ) : 현재 페이지를 다시 로드
  • replace( ) : replace(url)일 때 url 값으로 이동 

 

 

Screen 객체

  • 모니터 화면 정보에 대한 객체

  screen 객체 속성 

속성 설명
width 화면의 너비를 반환
height 화면의 높이를 반환
availWidth 화면에서 작업표시줄을 제외한 너비를 반환
availHeigth 화면에서 작업표시줄을 제외한 높이를 반환
colorDepth 화면에서 사용 가능한 색상 수를 반환
pixelDepth 화면의 색상 해상도를 반환 
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>screen객체 속성</title>
  </head>
  <body></body>
  <script>
    var w = screen.width;
    var h = screen.height;
    alert("해상도 가로" + w + "세로" + h);
    window.open(
      "https://jenny-daru.tistory.com/",
      "jenny",
      "width=" + w + ", height=" + h
    );
  </script>
</html>

 

 >> 결과

 

 

History 객체

  • 페이지가 이동한 정보를 관리하는 객체

  history 객체 메서드

메서드 설명
back() 페이지 이동 정보에 따라 이전 페이지로 이동
forward() 페이지 이동 정보에 따라 이후 페이지로 이동
go()

go(n)일 때 n(숫자)값에 따라 음수이면 n 값 만큼의 이전 페이지로, 

양수이면 n값만큼의 이후 페이지로 이동

 

 

Navigator 객체

  • 브라우저 버전이나 브라우저명 등 브라우저 정보에 관한 객체

메서드 설명
appCodeName 브라우저의 코드명을 반환
appName 브라우저명을 반환
appVersion 브라우저의 버전을 반환
platform 플랫폼을 반환
userAgent 브라우저의 코드명과 버전을 반환

 

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용  (0) 2020.05.08
JavaScript - DOM(Document Object Model), 요소 선택, getElements~  (0) 2020.05.05
JavaScript - BOM(Browser Object Model), Window 객체  (0) 2020.05.04
JavaScript - 이벤트 객체, 기본이벤트 실행 방지, 이벤트 버블링 방지, 이벤트 강제실행, this  (0) 2020.05.04
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결  (3) 2020.05.04
'JavaScript/JavaScript' Related Articles more