브라우저 객체 모델이란?
-웹 브라우저 전체를 객체로 관리하는 것
-자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 > 요소를 객체화
주요 브라우저 내장 객체
| Window | 브라우저 창이 열릴 때마다 생기는 객체 | 최상위 객체 |
| Document | <body>태그 만나면 만들어지는 객체 | HTML 문서 정보 |
| History | 방문 기록 저장 객체 |
| Location | URL 정보 객체 |
| Navigator | 웹 브라우저 정보 객체 |
| Screen | 화면 정보 객체 |
웹 브라우저를 제어하는 Window 객체
-자바스크립트의 모든 객체는 Window객체에 포함된다
Window 객체의 속성
-접근하는 방법 : 객체 이름 뒤 마침표(.)를 찍고 속성이름 붙인다
window.innerHeight
1132
| document | 웹문서 접근 |
| frameElement | 현재창이 다른 요소 안에 포함되어 있으면 그 요소 반환 | 포함 안 되면 null 반환 |
| innerHeight | 내용 영역 높이 |
| innerWidth | 내용 영역 너비 |
| localStorage | 데이터 저장하는 로컬스토리지 반환 |
| location | 객체의 위치/ 현재url |
| name | 브라우저 창의 이름 |
| outerHeight | 브라우저 창 바깥의 높이 |
| outerWidth | 브라우저 창 바깥의 너비 |
| pageXOffset | 스크롤 화면 수평 이동하는 픽셀수 |
| pageYOffset | 스크롤 화면 수직 이동하는 픽셀수 |
| scrollX | = pageXOffset |
| scrollY | = pageYOffset |
| parent | 현재 창의 부모 프레임 |
| screenX | 브라우저 왼쪽 테두리가 모니터 왼쪽 테두리부터 떨어진 거리 |
| screenY | 브라우저 위쪽 테두리가 모니터 위쪽 테두리부터 떨어진 거리 |
| sessionStorage | 데이터 저장하는 세션 스토리지 반환 |
Window 객체의 함수
-window. 생략하고 함수 이름만 입력해도 된다
prompt()
| alert() | 알림창 |
| blur() | 포커스 제거 |
| close() | 창 닫기 |
| confirm() | 확인창 |
| focus | 포커스 부여 |
| moveBy() | 현재 창 지정한 크기만큼 이동 |
| moveTo() | 현재 창 지정한 좌표로 이동 |
| open() | 창 열기 |
| postMessage() | 다른 창으로 메시지 보내기 |
| print() | 인쇄 |
| prompt() | 프롬프트 창에 입력한 메시지 반환 |
| resizeBy() | 지정한 크기만큼 현재 창 크기 조절 |
| resizeTo() | 동적으로 브라우저 창 크기 조절 |
| scroll() | 특정 위치로 스크롤 |
| scrollBy() | 지정한 크기만큼 스크롤 |
| scrollTo() | 지정한 위치까지 스크롤 |
| setCursor() | 커서 변경 |
| showModalDialog() | 모달창 표시 |
| sizeToContent() | 내용 맞게 창 맞추기 |
| stop() | 로딩 중지 |
-모달 창 : 현재 브라우저 창 위에 띄우는 새로운 창 | <div>태그를 사용해 삽입하고 레이어로 표시한 창
새 창을 여는 open()함수
-웹문서를 불러오자마자 자동으로 새 창이 뜬다
-현재 창, 새 탭, 새로운 알림 창 등
-첫 번째 매개변수 : 문서 | 사이트 주소
-두 번째 매개변수 : 새창의 타깃 | 윈도우 이름 지정 | "" =새탭에 표시됨
-세 번째 매개변수 : 알림창으로 표시할 때 너비, 높이, 위치 ex. 왼쪽 위(left=0, top=0) 너비 300px, 높이 300px
window.open("https://www.daum.net", "", "left=0, top=0, width=300, height=300")
크기를 조절하는 resizeBy(), resizeTo()함수
-resizeBy()함수 : 현재 브라우저 창의 크기를 기준, 너비와 높이에 값 더해준다
-알림창 newWin 변수에 저장
var newWin = window.open("", "", "width=300, height=300")
-가로 100, 세로 100 픽셀씩 늘리려면
newWin.resizeBy(100,100)
-줄이려면 음수값 쓴다
-resizeTo()함수 : 최종 크기 지정한다
newWin.resizeTo(200,200)
위치 조절하는 moveBy(), moveTo()함수
-열려 있는 알림 창의 위치 조절한다
-x크기, y크기 매개변수로 사용한다
-moveBy()함수 : 현재 위치를 기준, 가로로 x픽셀, 세로로 y픽셀
-moveTo()함수 : 화면 왼쪽 모서리 기준, 가로로 x픽셀, 세로로 y픽셀 = 현재 위치와 상관없이 괄호 안 좌표로 옮긴다
newWin.moveTo(0,0)
함수 문법 살펴보기
-각 객체에는 여러가지 함수가 있다
-함수마다 사용하는 매개변수가 다르다
developer.mozilla.org/ko/docs/Web/API/Window#Methods
Window
Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다.
developer.mozilla.org
-위 사이트에서 window.open()함수를 클릭 > 문법(Syntanx) 항목 보고 매개변수 찾기
-예제 소스도 많다
팝업 창 표시 프로그램 - Window 객체 함수로 팝업 창 띄우기
-팝업 창 표시하고 원하는 위치로 옯기는 실습
-팝업창에 표시할 내용은 따로 html문서로 만들어 놓음
1. main.html, popup.html, popup.js 파일을 만든다
2. js파일에 window.open() 사용해 소스 입력
3. 팝업 창은 크롬이 기본적으로 차단한다. 팝업이 차단 상태인지 확인 필수
팝업을 차단하면 window.open()은 null 반환 if문 사용해서 알림 만들기
4. 만들어진 openPop()함수는 문서를 불러오자마자 실행
onload 이벤트 처리기 사용해 openPop()함수 실행
window.onload = openPop;
5. 팝업창에서 [창닫기]를 누르면 팝업창이 닫히도록 popup.html 에 다음을 추가한다
<a>태그 안에서 자바스크립트 사용 > 단순한 동작 한번만 실행할 때 <a>태그 안에서 사용
<p id="close"><a href="javascript:window.close();"> 창닫기 </a></p>
브라우저 정보가 담긴 Navigator 객체
-웹 브라우저와 관련된 정보 담겨 있다
-크롬, 익스플로러, 모바일로 접속했는지 정보 알 수 있다 > 방무자의 접속 브라우저에 맞춘 자바스크립트 적용 가능
렌더링 엔진
-Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류를 구별
-Rendering Engine이란 웹문서를 화면에 표시하기 위해 태그와 스타일 해석하는 프로그램
-웹 브라우저마다 내장된 렌더링 엔진이 다르다 = HTML, CSS 해석하는 방법 다르다
-CSS3 속성 앞에 -webkit- 또는 -oz-같은 접두어 붙여서 맞게 렌더링한다
자바스크립트 엔진 : 자바스크립트 소스를 해석한다, 내장되어 있다, 브라우저마다 다르다
-해당 웹 브라우저가 어떤 자바스크립트 엔진을 쓰는지 알아두자
-브라우저별 렌더링 & 자바스크립트 엔진
| 크롬 | 블링크(Blink) | V8 |
| 파이어폭스 | 게코(Gecko) | 스파이더몽키 |
| 인터넷 익스플로러 | 트라이덴트(Trident) | 차크라(Chakra) |
| 사파리 | 웹킷(Webkit) | 자바스크립트코어 |
| 오페라 | 블링크(Blink) | V8 |
-주소 표시줄에 chrome://version/ 입력하면 엔진 정보 알 수 있음
Navigator 객체의 속성
-브라우저 버전이나 플랫폼(OS)정보는 볼수만 있음(수정X)
-콘솔창에 navigator 치면 객체 정보가 모두 나온다
-Navigator 객체의 주요 속성
| appCodeName | 브라우저 이름(코드 이름) 문자열 반환 |
| appName | 브라우저 공식이름 문자열 반환 |
| appVersion | 브라우저 버전 문자열 반환 |
| battery | 배터리 충전 상태 |
| connection | 네트워크 정보 |
| cookieEnabled | 쿠키 정보 무시: false 아니면: true |
| geolocation | 모바일 기기 사용한 위치정보 |
| maxTouchPoints | 동시에 터치 가능한 포인트 몇개인지 |
| platform | 플랫폼 정보 |
| userAgent | 사용자 에이전트 문자열 반환 |
사용자 에이전트 문자열로 자바스크립트 엔진 확인
-Navigator 객체 정보 중 userAgent 속성 보면 > 사용자의 웹 브라우저 버전, 어떤 자바스크립트 엔진 사용하는지 정보
-사용자 에이전트(userAgent) 문자열 : 클라이언트에서 서버로 정보 보낼 때, 클라이언트에서 함께 보내는 정보
| 서버에서 이정보를 보고 브라우저 종류 확인 후 > 브라우저에 맞게 웹페이지 표시
-navigator.userAgent에 정보가 포함되어있음
-navigator.userAgent에 들어 있는 정보는 웹브라우저마다 다르고, 버전마다 다르다
-웹사이트 제작할 때 자주 사용하는 사용자 에이전트 문자열 확인하기
인터넷 익스플로러
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
엣지
-크롬, 사파리 브라우저 보다 먼저 엣지 브라우저 체크해야한다 (Edge가 있는지 확인)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebkit/537.36 (KHTML, like Gecko)
Chrome/42.0.2311.135 Safari/537.36 Edge/12.246
크롬
-사파리 브라우저보다 먼저 크롬 브라우저 체크해야 한다 (Chrome 있는지 확인)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebkit/537.36 (KHTML, like Gecko)
Chrome/42.0.2311.135 Safari/537.36
사파리, 오페라
-Safari 문자열 있는지 확인
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebkit/601.7.7 (KHTML, like Gecko)
Version/9.1.2 Safari/601.7.7
에이전트 문자열의 의미
-x로 표시된 것: 문자열 별로 다르게 사용하는 버전 | 빌드 번호 의미
| Mozilla/x.x | 모질라 버전 |
| Windows NT x.x | 컴퓨터 운영체제 |
| Win64; x64 | 윈도우 64비트 시스템 |
| WOW64 | 64비트 시스템에서 32비트 응용 프로그램 실행하는 환경 |
| Trident/x.x | Trident 엔진 버전 |
| rv: x.x | 브라우저 버전 |
| AppleWebKit/x.x | 웹킷 엔진의 빌드 번호 |
| KHTML | HTML 레이아웃 엔진, 오픈소스 렌더링 엔진 |
| like Gecko | 게코 기반의 다른 브라우저와 호환 |
| Firefox/x.x | 파이어폭스 브라우저 버전 |
| Chrome/x.x | 크롬 버전 |
| Safari/x.x | 사파리 브라우저 빌드 번호 |
그 밖의 브라우저 객체들
History 객체
-뒤로, 앞으로, 주소 표시줄에 입력해서 돌아다녔던 사이트 주소 저장되어 있음
-History 객체의 속성
| length | 방문한 사이트 개수 반환 |
-History 객체의 함수
| back() | 이전 페이지 불러오기 |
| forward() | 다음 페이지 불러오기 |
| go() | 현재 페이지 기준으로 상대 위치 불러오기 history.go(1) : 다음 페이지 | history.go(-1) : 이전 페이지 |
Location 객체
-주소 표시줄 관련
-현재 문서의 URL 주소 정보 가지고 있음
-이 정보 편집 > 현재 브라우저 창에 열릴 사이트나 문서 지정
-Location 객체의 속성
| hash | URL 중 #로 시작하는 부분 |
| host | URL의 호스트 이름, 포트 번호 |
| hostname | URL의 호스트 이름 |
| href | 전체 URL | 해당 주소로 이동 |
| pathname | URL 경로 |
| port | URL 포트 번호 |
| protocol | URL의 프로토콜 | http:// ftp:// |
| password | password 정보 저장 | 도메인 앞에 username 과 password 함께 입력해서 접속하는 URL일 경우 |
| username | username 정보 저장 | 도메인 앞에 username 과 password 함께 입력해서 접속하는 URL일 경우 |
| search | URL 중 ?로 시작하는 검색 내용 부분 |
-Location 객체의 함수
| assign() | 새 문서 주소 할당 > 새 문서 가져옴 |
| reload() | 새로고침 역할 |
| replace() | 현재 URL 지우고 다른 URL 문서로 교체 |
| toString() | 현재 URL을 문자열로 반환 |
Screen 객체
-접속하는 사용자의 화면 크기는 모두 다르다
-화면 크기나 정보를 알고 싶을 때 Screen 객체 사용
-Screen 객체의 속성
| availHeight | UI 제외한 부분의 높이 (UI : 작업표시줄, 메뉴 등) |
| availWidth | UI 제외한 부분의 너비 |
| colorDepth | 픽셀을 랜더링할 때 사용하는 색상 수 |
| height | UI 포함한 화면의 높이 |
| width | UI 포함한 화면의 너비 |
| orientation | 화면의 현재 방향 | 기본은 가로 |
| pixelDepth | 픽셀을 랜더링할 때 사용하는 비트 수 |
-Screen 객체의 함수
| lockOrientation() | 화면 방향 잠금 |
| unlockOrientation() | 화면 방향 잠금 해제 |
-Window 객체의 innerWidth/innerHeight outerWidth/outerHeight속성 : 웹 브라우저 창의 너비/높이
-Screen 객체의 availWidth/availHeigth width/height속성 : 화면 자체의 너비/높이
'JavaScript' 카테고리의 다른 글
| 드림코딩 : JS - 4. operator, if, for loop (0) | 2020.10.16 |
|---|---|
| 드림코딩 : JS - 3. data type, let vs var, hosting (0) | 2020.10.16 |
| Do it : JS -9. 폼과 자바스크립트 (0) | 2020.10.14 |
| Do it : JS -8. 문서 객체 모델(DOM) (0) | 2020.10.12 |
| Do it : JS -7. Array 객체 (0) | 2020.10.09 |