12. JavaScript - BOM

20812 단어 JavaScriptJavascript 기초BOMBOM
  • 혼자서 JavaScript를 공부하고 실습하면서 작성한 글입니다.
  • 처음 공부하고 있어서 부족하거나 잘못된 정보가 있을 수 있습니다. (2021.06.24 목)
  • 조금 더 자세히 알게 되거나 수정할 부분이 있으면 바로바로 수정하겠습니다.

BOM (Browser Object Model) - 브라우저 객체 모델

  • 브라우저에 계층적으로 내장된 객체들을 브라우저 객체 모델이라 한다.
  • window는 브라우저 객체의 최상위 객체가 된다.

window 객체

메서드 종류

종류설명
open(url,windowName[,option])새 창을 열 때 사용
alert()경고 창을 띄움
prompt()질의 응답 창을 띄움
confirm()확인 / 취소 창을 띄움
moveTo(x,y)창의 위치를 이동시킬 때 사용
resizeTo(width,height)창의 크기를 변경시킬 때 사용
setInterval(function, millseconds)일정 간격으로 지속적으로 실행문을 실행 시킬 때 사용
setTimeout(function, milliseconds)일정 간격으로 한 번만 실행문을 실행 시킬 때 사용
  • open()
<!DOCTYPE html>
<html>
  <head>
    <title>open()</title>
  </head>
  <body>
  
    <button onclick="myFunction()">naver</button>
    
    <script>
      function myFunction() {
        window.open("https://www.naver.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
      }
      
    </script>
    
  </body>
</html>

screen 객체

  • 사용자의 모니터 정보(속성)를 제공하는 객체.
종류설명
screen.width화면의 너빗값을 반환
screen.height화면의 높잇값을 반환
screen.availWidth작업 표시줄을 제외한 화면의 너빗값 반환
screen.availHeight작업 표시줄을 제외한 화면의 높잇값을 반환
screen.colorDepth사용자 모니터가 표현 가능한 컬러 bit를 반환
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <script>
      document.write("width: "+screen.width, "<br>");   
      // width:1536
        
      document.write("height: "+screen.height, "<br>"); 
      // height:864
        
      document.write("availWidth: "+screen.availWidth, "<br>");  
      // availWidth:1536
        
      document.write("availHeight: "+screen.availHeight, "<br>"); 
      // availHeight:824
        
      document.write("colorDepth: "+screen.colorDepth, "<br>");   
      // colorDepth:24
    </script>
  </body>
</html>

location 객체

  • 사용자 브라우저의 주소 창에 url에 대한 정보(속성)와 새로 고침 기능(메서드)을 제공하는 객체
종류설명
location.href주소 영역에 참조 주소를 설정하거나 url을 반환
location.hashurl에 해시값(#에 명시된 값)을 반환
location.hostnameurl에 호스트 이름을 설정하거나 반환
location.hosturl에 호스트 이름과 포트 번호를 반환
location.porturl에 포트 번호를 반환
location.protocolurl에 프로토콜을 반환
location.searchurl에 쿼리(요청 값)를 반환
location.reload()새로 고침
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <script>
      document.write("href :"+location.href, "<br>");
      // href :https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
        
      document.write("hash :"+location.hash, "<br>");
      // hash :
        
      document.write("hostname :"+location.hostname, "<br>");
      // hostname :www.w3schools.com
        
      document.write("host :"+location.host, "<br>");
      // host :www.w3schools.com
        
      document.write("protocol :"+location.protocol, "<br>");
      // protocol :https:

    </script>
  </body>
</html>

history 객체

  • 사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공
종류설명
history.back()이전 방문한 페이지로 이동
history.forward()다음 방문한 페이지로 이동
history.go(이동 숫자)이동 숫자가 -2 이면 2단계 이전 페이지로 이동
history.length방문 기록에 저장된 목록의 개수를 반환

navigator 객체

  • 현재 방문자가 사용하는 브라우저 정보와 운영체제의 정보를 제공하는 객체
종류설명
navigator.appCodeName방문자의 브라우저 코드명을 반환
navigator.appName방문자의 브라우저 이름을 반환
navigator.appVersion방문자의 브라우저 버전 정보를 반환
navigator.language방문자의 브라우저 사용 언어를 반환
navigator.product방문자의 브라우저 사용 엔진 이름 반환
navigator.platform방문자의 브라우저를 실행하는 운영체제를 반환
navigator.userAgent방문자의 브라우저와 운영체제 종합 정보를 제공
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <script>
      document.write("appCodeName: "+navigator.appCodeName,"<br><br>");
      // appCodeName: Mozilla
      
      document.write("appName: "+navigator.appName,"<br><br>");
      // appName: Netscape
      
      document.write("appVersion: "+navigator.appVersion,"<br><br>");
      // appVersion: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
      
      document.write("language: "+navigator.language,"<br><br>");
      // language: ko-KR
      
      document.write("product: "+navigator.product,"<br><br>");
      // product: Gecko
      
      document.write("platform: "+navigator.platform,"<br><br>");
      // platform: Win32
      
      document.write("userAgent: "+navigator.userAgent,"<br><br>");
      // userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
      
    </script>
  </body>
</html>
[W3D3]SpringBoot_part1
PROJECT(7)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage