IT 개발 관련/Java Script

JS : BOM basic

felixorlby 2022. 3. 9. 18:27

JS : BOM basic

 

BOM(Browser Object Model)은 브라우저 창에 포함된 모든 요소들을 의미합니다.
브라우저 객체에는   

  1. window - 브라우저 전체를 의미. 브라우저 컨트롤용
  2. navigator - 브라우저 정보만 따로 제공
  3. location - 브라우저의 위치(url)에 대한 정보 제공
  4. screen - 모니터에 대한 정보 제공
  5. history - 인터넷 방문 기록에 대해 정보 제공

1. window

브라우저의 전체를 의미합니다.

  • 문법

window.요소명으로 호출하되 window 생략 가능

  • window 요소
    open("경로", "창이름", "옵션") // 새 창 하나 더
    alert("문자") // 경고창
    prompt("질문", "기본값") // 사용자 입력 창
    confirm("질문") // 확인, 취소창
    setTimeout(함수, 정수) // 정수 초 이후 함수 1번 실행
    setInterval(함수, 정수) // 정수 초 마다 함수 실행
  • 예시 코드
   <script>
           alert("alert창 띄우기");
   </script>
  • 웹페이지 출력 결과

2. navigator

브라우저 정보만 따로 제공

  • navigator 요소
appCodeName - 브라우저의 코드명 제공
appName - 브라우저의 이름 제공
appVersion - 브라우저의 기본 버전과 실행중인 플랫폼 제공
userAgent - 브라우저의 전체적 정보를 제공
  • 코드 예시
document.write("코드명 : " + navigator.appCodeName + "<br/>");
document.write("브라우저명 : " + navigator.appName + "<br/>");
document.write("플랫폼 버전 : " + navigator.appVersion + "<br/>");
document.write("전체정보 : " + navigator.userAgent + "<br/>");
  • 웹페이지 출력 결과

3. location

현재 브라우저가 위치한 url값을 제공하거나 혹은 url변경에 관여합니다.

  • location 요소
  location.hash - 주소창 url에서 # 뒤에 오는걸 반환
  location.host - 주소창 url에서 도메인명 반환
  location.hostname - 주소창 url에서 도메인명 반환(host에서 포트넘버를 뺀 것)
  location.href - 주소창 url에서 전체 주소 반환
  location.pathname - 주소창 url에서 메인 다음경로 반환
  location.port - 주소창 url에서 포트번호 반환
  location.protocol - 주소창 url에서 프로토콜 반환

 

  • location 코드
document.write("<h1>hash : " + location.hash + "</h1>");
document.write("<h1>host : " + location.host + "</h1>");
document.write("<h1>hostname : " + location.hostname + "</h1>");
document.write("<h1>href : " + location.href + "</h1>");
document.write("<h1>pathname : " + location.pathname + "</h1>");
document.write("<h1>port : " + location.port + "</h1>");
document.write("<h1>protocol : " + location.protocol + "</h1>");
  • location 코드 출력 결과

  • 코드 예시

href를 이용한 브라우저 주소 이동입니다.

  location.href = "https://www.naver.com";

주소의 위치를 네이버로 설정해주었기 때문에 웹페이지를 열면 바로 네이버로 이동합니다.

4. screen

 screen 객체는 화면 해상도 등의 정보를 제공합니다.

  • screen 요소 
availWidth - 사용 가능한 스크린 가로 너비값을 반환
availHeight - 사용 가능한 스크린 세로 높이값을 반환
availTop - 창이 위치할 수 있는 최상위 위치값 반환
availLeft - 창이 위치할 수 있는 최대 좌측위치 반환
  • screen 코드
document.write("스크린 너비 : " + screen.availWidth + "<br/>");
document.write("스크린 높이 : " + screen.availHeight + "<br/>");
document.write("스크린 최좌측 : " + screen.availLeft + "<br/>");
document.write("스크린 최상단 : " + screen.availTop + "<br/>");
  • 웹페이지 출력 결과

5. history

인터넷 방문 기록에 대해 정보제공

현재 켜진 브라우저로 방문한 페이지들에 대한 정보를 보여주는데
이전 페이지, 다음 페이지로 이동하는 버튼까지 추가로 만들 수 있습니다.

  • history 요소 
history.go(숫자) - 값만큼 다음, 이전페이지로
이동하고, 이전페이지는 -1, 다음페이지는 1입니다.
back() - 이전 페이지로 이동합니다.(숫자필요X)
forward() - 다음페이지로 이동합니다.
  • 코드 예시

세 개의 웹페이지를 만들어서 history 기능을 이해해보겠습니다.

-첫 번째 페이지(HTML)

<body>
    <h1>첫 페이지</h1>
    <a href="37_js-history2.html">두 번째 페이지 이동</a>    
</body>

-두 번째 페이지(HTML)

     <body>
      <h1 onclick="location.href='https://www.naver.com';">두 번째 페이지</h1>
      <p><a href="37_js-history3.html">마지막 페이지 이동</a></p>
      <input type="button" value="이전페이지" onclick="history.back();"/>
      <input type="button" value="다음페이지" onclick="history.go(1);"/>
      <input type="button" value="다음페이지(포워드)" onclick="history.forward();"/>
     </body>

-세 번째 페이지(HTML)

   <body>
    <h1>마지막 페이지</h1>
    <p><input type="button" value="이전페이지로" onclick="history.back();"></p>
    <p><input type="button" value="첫페이지로"
            onclick="location.href='37_js-history.html'"></p>
   </body>
  • 웹페이지 출력 결과

위 같은 세 개의 페이지를 만들어서 실행시키면 history 기능을 이용하여 이전 페이지나 다음 페이지로 

넘어가는 것을 확인할 수 있습니다.