JavaScript

객체

내장 객체
브라우저 객체
문서 객체(DOM)
사용자 정의 객체

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

자바스크립트에서는 웹페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공
객체들을 계층구조로 분류

대표적인 브라우저 객체

웹 브라우저를 대상으로 이루어진 객체
new 연산자를 통해서 생성하지 않고 그냥 사용
- ex) document.write()
window: 창
document: 문서
history 객체: 웹 브라우저 기록 정보
location 객체: 주소 정보
navigation 객체: 웹 브라우저 정보(종류 판별 등)

history 객체

최근 방문한 주소에 관한 정보를 기억하고 있는 개체
메소드
back() : 이전에 열었던 페이지로 이동
forward() : 이전 페이지로 이동 후 다시 앞으로 이동
go() : 몇 단계 뒤에 있는 페이지로 이동
go(3) : 3단계 앞의 페이지로 이동
go(-2) : 2단계 다음 페이지로 이동

location 객체

현재 브라우저의 주소창에 표시된 주소 값에 관련된 내용을 다루는 객체
href = URL: 지정된 URL로 페이지 이동
pathname: 도메인을 제외한 실제 파일 경로
assign(URL): 지정된 URL로 페이지 이동
replace(URL): 현재 페이지를 URL로 대체. 이 경우에 history 기록이 남지 않음(back 버튼 적용 안됨) 최신 IE 됨
reload(): 문서 내용 새로 고침

locatioin.href() 메소드 : 크롬 사용 시 지원 안됨

해결 -> href 속성 사용
- location.href = "http://naver.com"

location 객체 예제

location.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript"> 
        function Move() {
            location.hred = "http://www.google.com";
        }


        function assignMove(){
            window.location.assign("http://naver.com");
        }

        function replaceMove() {
            // 뒤로가기 적용 안됨
            window.location.replace("http://youtube.com");
        }
    </script>
</head>
<body>
    <button onclick="Move()">구글</button>
    <button onclick="assignMove()">네이버</button>
    <button onclick="replaceMove()">유튜브</button>
</body>
</html>

navigator 객체

브라우저에 관한 정보 제공
appCodeName : 브라우저의 코드명
- appName : 브라우저의 종류
- appVersion : 브라우저의 버전
- cookieEnabled : 쿠키 사용 가능
- platform : 시스템 환경
- userAgent : 브라우저 기본 정보(종류/버전)
- systemLanguage : 시스템 언어

저작자표시 비영리 동일조건