본문 바로가기
JavaScript

16장 예제 - 브라우저와 관련된 객체 (1)

쥬크버그 2023. 4. 11. 21:28

1. 브라우저와 관련된 객체 알아보기 

 

- 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냄 

 

- 자바스크립트의 내장객체 

 

 1) window

  : 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창안의 요소 중에서 최상위에 있음

 

 2) document

  : 웹 문서마다 하나씩 있으며, <body>태그를 만나면 만들어짐 . HTML 문서의 정보가 담겨있음

 

 3) navigator

  : 현재 사용하는 브라우저의 정보가 들어있음

 

 4) history

  : 현재 창에서 사용자의 방문기록을 저장

 

 5) location

  : 현재 페이지의 URL 정보가 담겨 있음

 

 6) screen

  : 현재 사용하는 화면정보를 다룸

 

2. window 객체의 프로퍼티 

 

 - 자바스크립트의 모든 객체는 window 객체 안에 포함

 

 1) document() 

   : 브라우저 창에 표시된 웹 문서에 접근 가능

 

 2) frameElement()

  : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환

 

 3) innerHeight()

  : 내용영역의 높이

 

 4) innerWidth()

   : 내용영역의 너비 

 

 5)  localStroge()

   : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환

 

 6) location()

  : window 객체의 위치 또는 현재  URL을 나타냄

 

 7) name()

  : 브라우저 창의 이름을 가져오거나 수정

 

 8) outerHeight()

   : 브라우저 창의 바깥 높이를 나타냄

 

 9) outerWidth() 

  : 브라우저 창의 바깥 너비를 나타냄

 

 10) pageXOffset()

  : 스크롤했을 때 수평으로 이동하는 픽셀수로, scrollX와 같음

 

 11) pageYoffset()

  : 스크롤했을 때 수직으로 이동하는 픽셀수로, scrollY와 같음

 

 12) parent() 

  : 현재 창이나 서브 프레임의 부모

 

 13) screenX()

  : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리 

 

 14) screenY()

  : 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리

 

 15) scrollX()

  : 스크롤했을 때 수평으로 이동하는 픽셀 수 

 

 16) scrollY()

  : 스크롤했을 때 수직으로 이동하는 픽셀 수 

 

 17) sessionStorage()

  : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환

 

3. window 객체의 메서드 

 

 1) alert() 

  : 알림창 표시

 

 2) blur()

  : 현재창에서 포커스를 제거

 

 3) close()

  : 현재창을 닫음

 

 4) confirm()

  : 확인창 표시 ([확인],[취소]버튼 이 있는)

 

 5) focus()

  : 현재 창에 포커스를 부여

 

 6) moveBy() 

  : 현재창을 지정한 크기만큼 이동

 

 7) moveTo()

  : 현재창을 지정한 좌표로 이동

 

 8) open()

  : 새로운 창을 염

 

 9) postMessage() 

  :  메시지를 다른 창으로 전달

 

 10) print()

  : 현재 문서를 인쇄 

 

 11) prompt()

  : 프롬프트창에 입력한 텍스트를 반환

 

 12) resizeBy()

  : 지정한 크기만큼 현재 창의 크기를 조절

 

 13) resizeTo()

  : 동적으로 브라우저 창의 크기를 조정

 

 14) scroll()

  : 문서에서 특정 위치로 스크롤

 

 15) scrollBy()

  : 지정한 크기만큼 스크롤

   

 16) scrollTo()

  : 지정한 위치까지 창의 크기를 맞춤

 

 17) sizeToContent()

  : 내용에 맞게 창의 크기를 맞춤

 

 18) stop()

  : 로딩을 중지 

 

4. open() 메서드 

 

 -window.open(경로, 창이름, 창옵션)

 

 - 웹 브라우저에 팝업 창 표시하기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹 브라우저에 팝업 창 표시하기</title>
  <style>
   
  </style>
</head>
<body>
  <p>문서를 열면 팝업 창이 표시됩니다.</p>
  <script>
    window.open("notice.html","","width=500,height=400");
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>공지사항</title>  
  <style>
    #content {
      border : 2px double skyblue;
      border-radius:10px;
      padding:10px;
    }
    ul {
      margin-left:15px;
      list-style-type:none;
    }
    ul li {margin : 10px 5px;}
    button{
      position:absolute;
      bottom:20px;
      right:20px;
    }
  </style>    
</head>
<body>
  <div id="content">
  <h1>공지사항</h1>
    <ul>
      <li>항목 1</li>
      <li>항목 2</li>
      <li>항목 3</li>
      <li>항목 4</li>
      <li>항목 5</li>
    </ul>    
    <button onclick="javascript:window.close();">닫기</button>
  </div>
</body>
</html>

- 창 이름 지정하기 

  : 팝업 창에 이름이 생겨서 지정한 창에만 내용이 나타남 

  : window.open("notice.html","pop","width=500,height=400");

 

 - 팝업 창 위치 지정하기 

  : left 속성 - 화면의 왼쪽 측면을 기준

    top 속성 - 화면의 위쪽을 기준

<DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>팝업 창 위치 지정하기</title>

</head>
<body>
 <p> 왼쪽에서 100픽셀, 위에서 200픽셀 떨어진 위치에 <br>팝업 창이 표시됩니다.</p>
 <script>
  window.open("notice.html","pop","width=500, height=400, left=100, top=200");
 </script>
</body>
</html>

 

- 팝업 차단 고려하기 

: 웹 브라우저에서 팝업을 차단하면 window.open()은 null을 반환

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>팝업이 차단된 브라우저의 알림 창 표시하기 </title>
</head>
<body onload="openPopup()">
  <p>문서를 열면 팝업 창이 표시됩니다.</p>

 <script>
  var blocked = false;
  function openPopup() {
    var newWin = window.open("notice.html","pop","width=500 height=400");
    if(newWin == null) {
      //팝업이 차단되어 있으면 알림 창 표시
      alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.");
    }
    newWin.moveBy(100,100); //현재 창을 100,100 좌표로 이동
  }
 </script>
</body>
</html>

 

5. close() 메서드 

 

 - 브라우저 창을 닫음

 - 버튼을 사용해 팝업 창 닫기

<button onclick="javascript:window.close();">닫기</button>

 

'JavaScript' 카테고리의 다른 글

16장 실습 3  (0) 2023.04.11
16장 예제 - 브라우저와 관련된 객체(2)  (0) 2023.04.11
16장 실습 2  (0) 2023.04.11
16장 실습  (0) 2023.04.11
16장 예제 - Array 객체 (2) Array 객체의 메서드  (0) 2023.04.11

'JavaScript' Related Articles

티스토리툴바