JS - 브라우저 객체 모델

IRISH·2023년 10월 23일
js
0

JS

목록 보기
6/80
post-thumbnail

1. 브라우저 객체의 구조

  • 브라우저 객체는 브라우저에 내장된 객체이며, WEB API에 속함
  • WEB API 자체는 자바스크립트의 기능은 아니지만, 자바스크립트를 통해 제어 가능
  • 브라우저 객체 종류
    • window : 브라우저 객체의 최상위 객체입니다.
    • screen : 우리가 브라우저를 보는 모니터 화면에 대한 기능을 담은 객체입니다.
    • location : 위치 정보에 대한 기능을 담은 객체입니다.
    • history : 사용자의 방문 기록에 대한 기능을 담은 객체입니다.
    • navigator : 사용자의 브라우저, 운영체제에 대한 기능을 담은 객체입니다.
    • document : HTML 문서의 속성이나 그 안의 태그를 선택, 생성, 편집할 수 있는 객체입니다.

2. 자주 쓰는 브라우저 객체 메서드와 사용법

window 객체

  • 최상위 객체

메소드

  • 작성한 URL로 새 창 열기 : open("URL","새 창 이름","새 창 옵션")
  • 데이터가 담긴 경고창 띄우기 : alert(data)
  • 질문이 담기고, 답변을 쓸 수 있는 창 띄우기 : prompt("질문","")
  • 질문이 담기고, 확인과 취소 버튼이 있는 창 띄우기 : confirm("질문")
  • 특정한 브라우저 창의 위치 이동 : moveTo(x,y)
  • 특정한 브라우저 창의 크기 변경 : resizeTo(width, height)
  • 일정한 시간 간격으로 반복해서 함수 호출 실행 : setInterval(function(){코드 내용}, 시간 간격)
  • 특정한 시간에 맞춰 함수 호출 실행 : setTimeout(function(){코드 내용}, 시간 간격)

팝업 띄우기

  • open은 팝업창을 띄울 때 사용할 수 있어서 매우 유용한 메서드
//1. URL로 새 창 띄우기
window.open("http://www.naver.com", "새창 네이버", "width=350, height=400, left=50, top=50, scrollbars=no");

//2. 저장된 html 문서로 새 창 띄우기
window.open("브라우저객체_open_팝업문서.html","팝업 제목","width=350, height=400, left=250, top=50");

2번의 경우에는 아래와 같이 별도의 팝업용 html문서를 만들고, 버튼을 클릭하면 window.close로 팝업 창을 닫게 할 수 있음

<body>
    <p>팝업 내용입니다.</p>
    <button onclick="window.close();">창 닫기</button>
</body>

반복 실행, 예약 실행

<body>
    <p id="showNum"></p>
    <button onclick="clearInterval(banbok)">정지</button>    

</body>
<script>
    let num=0;

    let banbok= setInterval(function(){        
            num++;
            document.getElementById("showNum").innerHTML= num;
    }, 1000); //1초마다 안의 코드 실행
</script>
  • 참고로 document.write는 태그도 줄바꿈도 없이 그냥 문자를 쓰는 것이라서 body에 작성한 버튼도 사라짐
    • 따라서 write를 쓰려면 document.write("

      "+num+"

      ");를 해줘야 버튼이 사라지지 않음
  • html 태그에 글자를 넣는 것은 innerHTML
  • getElementById는 CSS에서 #으로 특정 아이디를 선택하는 것과 동일
<body>
    <p id="showNum"></p>
</body>
<script>
let count= 10;

let countDown= setInterval(function(){
    count--;
    document.getElementById("showNum").innerHTML= count;

    if(count === 0)clearInterval(countDown);

}, 1000);
</script>
  • 위 코드는 "증가를 감소로 고치면 간단히 카운트 다운을 만들 수 있습니다. 버튼을 누르지 않아도 if문으로 제어가 가능" 하도록 한 구현
<body>
    <p id="showNum"></p>
</body>
<script>
    let count= 10;

    let countDown= setInterval(function(){
        count--;
        document.getElementById("showNum").innerHTML= count;

        if(count === 0)clearInterval(countDown);

    }, 1000);

    let timeOut= setTimeout(function(){
        document.getElementById("showNum").innerHTML= "카운트 다운이 끝났습니다.";

    }, 10000)
</script>
  • 위 코드는 "카운트 다운에서 10초가 지나면 0에서 그냥 멈췄다면, setTimeout을 이용해 10초 후에 특정 문장을 나타내도록" 구현

screen 객체

  • 스크린 객체는 다음과 같은 메서드로 사용자 기기의 화면(모니터, 액정)의 정보를 제공
    • 화면의 너비 값 반환 : screen.width
    • 화면의 높이 값 반환 : screen.height
    • 작업표시줄을 제외한 화면 너비 값 반환 : screen.availWidth
    • 작업표시줄을 제외한 화면 높이 값 반환 : screen.availHeight
    • 사용자의 모니터, 액정에서 표현할 수 있는 컬러 bit 값 반환 : screen.colorDepth
document.write(screen.width+"<br>"+screen.colorDepth);
  • 위 코드를 통해 실제 기기의 해상도 값을 알 수 있음

location 객체

  • location 객체는 사용자가 사용하고 있는 브라우저와 관련된 메서드와 속성을 제공
    • URL 정보를 참조, 변경, 반환 : location.href
    • URL의 #값 반환 : location.hash
    • URL의 요청값 반환 : location.search
    • 브라우저 새로고침 : location.reload()
<body>
<!-- 버튼 클릭시 -->
    <button onclick="gotoGoogle()"><a href="#google">구글로 이동</a></button>
    <button><a id="btn2" href="#reload">새로고침</a></button>
</body>
<script>

//특정 해쉬값이면 URL 이동
function gotoGoogle(){
    if(location.hash=="#google") {
        location.href="https://www.google.com/"
    }
}


//버튼 클릭시 새로고침
// btn2에 <button 라고 해도 됩니다.
document.getElementById("btn2").addEventListener("click", function (){
    location.reload();
    alert("리로드 되었습니다.");
});


//location.search는 쿼리값을 파라미터별로 따로 가져오기가 까다로우니 콘솔창에 직접 입력해서 테스트만 해봅시다.
//콘솔 창에 아래 명령어를 입력하면,검색한 쿼리값이 무엇인지 조회할 수 있습니다.
location.search

history 객체

  • history 객체는 다음과 같이 사용자가 방문한 기록 정보를 제공
    • 이전에 방문한 사이트로 이동 : history.back()
    • 다음에 방문한 사이트로 이동 : history.forward()
    • n단계 이전에 방문한 사이트로 이동 : history.go(이동할 단계 숫자)
    • 방문 기록에 저장된 목록 개수 반환 : history.length
//history.back()
document.getElementById("btnBack").addEventListener("click", function(){
    history.back();
})

//history.forward()
document.getElementById("btnForward").addEventListener("click", function(){
    history.forward();
})

//history.go(이동할 단계 숫자)
document.getElementById("btnBackStep").addEventListener("click", function(){
    let stepNum= prompt("이동할 이전 방문 페이지 단계는?","");
    history.go(stepNum);

})

//history.length
document.getElementById("btnShowHistory").addEventListener("click", function(){
    alert(history.length);
})
  • 브라우저에 버튼이 있어서 따로 쓸 일이 있을까 싶지만, 입력 폼을 받을 때 조건에 따라 이전 단계로 가는 등으로 사용되곤 함
  • navigator 객체는 방문자가 사용하는 브라우저의 정보, 운영체제의 정보를 제공
    • 브라우저가 사용하고 있는 언어 반환 : navigator.language
    • 브라우저의 엔진 이름 반환 : navigator.product
    • 컴퓨터 운영체제 정보 반환 : navigator.platform
    • 온라인 상태 여부 반환 : navigator.onLine
    • 브라우저, 운영체제의 종합적인 정보 반환 : navigator.userAgent

콘솔창에 위의 메서드들을 입력해보면 다음과 같이 나옴

navigator.language
'ko-KR'
navigator.product
'Gecko'
navigator.platform
'MacIntel'
navigator.onLine
true
navigator.userAgent
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
  • navigator.userAgent에 나오기도 하는 브라우저의 코드명, 이름, 버전 정보 메서드는 현재 시점에서는 모두 동일하게 나오기 때문에 생략하였습니다.
  • 만약 특정 브라우저에서 서비스가 원활하게 되지 않는다면, 안내문을 출력해서 다른 브라우저로 접속하도록 할 수 있겠습니다.

document 객체

  • 이 객체는 HTML 문서, 웹페이지 그 자체입니다. 상위 객체인 window안에 있는 웹문서입니다.
  • 따라서 문서 객체 모델(DOM)의 뿌리가 되는 객체이며, HTML 요소를 선택하고 조작하는데에 유용하게 사용됨

느낀점

  • 최근 회사에서 넥사크로라고 하는 Tool을 활용하여 화면을 개발하고 있다. 스크립트라는 공간에서 javascript를 사용해서 개발을 하고 있는데, <윈도우 / 히스토리 / 팝업 / 스크린>에 대한 정보가 부족해서 힘이 많이 들었다.
  • 이번 기회를 통해서 기초를 조금이나마 다질 수 있어서 좋았다.

참고

https://cucat.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EA%B0%9D%EC%B2%B4-%EB%AA%A8%EB%8D%B8-%EC%A0%95%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%B2%95

profile
IRISH
#Software Engineer #IRISH
이전 포스트

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

다음 포스트

JS - 문서 객체 모델(DOM), 노드 구조와 개념 정리

0개의 댓글