728x90
반응형
SMALL
공부단 9일차 입니다.
브라우저 객체 모델
웹 브라우저 전제를 객체로 관리하는 것입니다.
브라우저 창이 열리면 가장 먼제 window객체가 생성이 되고 하위에 각 요소에 해당하는 객체들이 만들어 집니다.
자주 사용하는 브라우저 내장 객체
| 객체 | 설명 |
| window | 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체입니다. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체입니다. |
| document | <body> 태그를 만나면 만들어지는 객체입니다. HTML 문서 정보를 가지고 있습니다. |
| history | 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체입니다. |
| location | 현재 페이지에 대한 url 정보를 가지고 있는 객체입니다. |
| navigator | 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체입니다. |
| screen | 현재 사용 중인 화면 정보를 다루는 객체입니다. |
window 객체
웹 브라우저 창의 상태를 제어하는 객체로 자바스크립트 객체 중 최상위 객체이자 기본이 되는 객체입니다.
| 속성 | 설명 |
| document | 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다. |
| innerHeight | 내용 영역의 높이 |
| innerWidth | 내용 영역의 너비 |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환 |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리 |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리 |
| scrollX | 스크롤 했을 때 수평으로 이동하는 픽셀 수를 나타냅니다. |
| scrollY | 스크롤 했을 때 수직으로 이동하는 픽셀 수를 나타냅니다. |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다. |
Navigator 객체
웹 브라우저와 관련된 정보가 담겨 있습니다. Navigator 객체를 사용하면 현재 웹 문서에 접속한 사용자가 어떤 브라우저를 사용했는지 혹은 모바일로 접속했는지 등의 정보를 알 수 있습니다.
렌더링 엔진 (레이아웃 엔진)
브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램입니다.
Navigator 객체의 속성
| 속성 | 설명 |
| appCodeName | 브라우저 이름을 문자열로 반환 |
| appVersion | 브라우저 버전을 문자열로 반환 |
| connection | 브라우저 장치의 네트워크 정보가 담긴 객체를 반환 |
| geolocation | 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환 |
| userAgent | 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환 |
History 객체
| 속성 | 설명 |
| length | 방문한 사이트 개수를 반환 |
| 함수 | 설명 |
| back() | history 목록에서 이전 페이지를 현재 화면에 불러옵니다. |
| forword() | history 목록에서 다음 페이지를 현재 화면에 불러옵니다. |
| go() | history 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러옵니다. |
Location 객체
현재 문서의 url 주소 정보를 가지고 있는데, 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있습니다.
| 속성 | 설명 |
| hash | url 중 #로 시작하는 해시부분을 나타냅니다. |
| host | url의 호스트 이름과 포트 번호를 나타냅니다. |
| pathname | url 경로를 나타냅니다. |
| port | url의 포트번호를 나타냅니다. |
| search | url 중?로 시작하는 검색 내용 부분을 나타냅니다. |
| 함수 | 설명 |
| assign() | 현재 문서에 새 문서 주소를 할당해 새 문서를 가져옵니다. |
| reload() | 현재 문서를 다시 불러옵니다. |
| replace() | 현재 문서의 url을 지우고 다른 url의 문서로 교체합니다. |
| toString() | 현재 문서의 url을 문자열로 반환홥니다. |
Screen 객체
화면의 크기나 정보를 알고 싶을 때 사용합니다.
| 속성 | 설명 |
| height | UI 영역을 포함한 화면의 높이를 나타냅니다. |
| width | UI 영역을 포함한 화면의 너비를 나타냅니다. |
| 함수 | 설명 |
| lockOrientation() | 화면 방향을 잠급니다. |
| unlockOrientation() | 화면 방향 잠금을 해제합니다. |
728x90
반응형
LIST
'JavaScript' 카테고리의 다른 글
| [Javascript] Do it! 자바스크립트 입문 - 폼과 자바스크립트 (2) | 2024.01.14 |
|---|---|
| [Javascript] Do it! 자바스크립트 입문 - 속성, 이벤트, 스타일 - (DOM) (0) | 2024.01.12 |
| [Javascript] Do it! 자바스크립트 입문 - 문서 객체 모델 DOM (0) | 2024.01.12 |
| [Javascript] Do it! 자바스크립트 입문 - Array 객체 (0) | 2024.01.11 |
| [Javascript] Do it! 자바스크립트 입문 - 객체 (2) | 2024.01.10 |
댓글