728x90
2022.12.16 - [JAVA SCRIPT] - 자바스크립트 기본!(객체4. Math객체) - Java Script
자바스크립트 기본!(객체4. Math객체) - Java Script
Math 객체의 특징 수학 계산과 관련된 메서드가 많이 포함 되어 있지만 수학식에서만 사용하는 것은 아닙니다. 무작위 수가 필요하거나 반올림이 필요한 프로그램 등에서도 Math객체의 메서드를
less-go.tistory.com
이전글과 이어집니다
브라우저 관련 객체의 계층구조
| 종류 | 설명 |
| window | 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다. |
| document | 웹 문서 마다 하나씩 있으며 <body> 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨있습니다. |
| navigator | 현재 사용하는 브라우저의 정보가 들어있습니다. |
| history | 현재 창에서 사용자의 방문 기록을 저장합니다. |
| location | 현재 페이지의 URL 정보가 담겨있습니다. |
| screen | 현재 사용하는 화면 정보를 다룹니다. |
Window 객체의 프로퍼티(property)
주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용합니다.
| 종류 | 설명 |
| document | 브라우저 차엥 표시된 웹 문서에 접근할 수 있습니다. |
| frameElement | 현재 창이 다른 요소안에 포함 되어 있을 경우 그 요소를 반환 하고, 반대로 포함되어 있지 않으면 null을 반환합니다. |
| innerHeight | 내용 영역의 높이를 나타냅니다. |
| innerWidth | 내용영역의 너비를 나타냅니다. |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지(영구사용가능)를 반환합니다. |
| location | window 객체의 위치 또는 현재 URL을 나타냅니다. |
| name | 브라우저 창의 이름을 가져오거나 수정합니다. |
| outerHeight | 브라우저 창의 바깥 높이를 나타냅니다. |
| outerWidth | 브라우저 창의 바깥 너비를 나타냅니다. |
| pageXOffset | 스크롤 했을때 수평으로 이동하는 픽셀 수로 scrollX와 같습니다. |
| pageYOffset | 스크롤 했을때 수직으로 이동하는 픽셀 수로 scrollY와 같습니다. |
| parent | 현재 창이나 서브프레임의 부모입니다. |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다. |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냅니다. |
| scrollX | 스크롤 했을 때 수평으로 이동하는 픽셀 수를 나타냅니다. |
| scrollY | 스크롤 했을 때 수직으로 이동하는 픽셀 수를 나타냅니다. |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지(임시사용)를 반환합니다. |
캐쉬(cache) : 내용 용량이 큰 파일을 임시 저장합니다.
브라우저에서 서버로 요청하지않고 기존의 파일을 읽어들입니다.
window 객체의 메서드(method)
| 종류 | 설명 |
| alert() | 알림 창을 표시합니다. |
| blur() | 현재 창에서 포커스를 제거합니다. |
| close() | 현재 창을 닫습니다. |
| confirm() | [확인], [취소] 버튼이 있는 확인 창을 표시합니다. |
| focus() | 현재 창에 포커스를 부여합니다. |
| moveBy() | 현재 창을 지정한 크기만큼 이동합니다. |
| moveTo() | 현재 창을 지정한 좌표로 이동합니다. |
| open() | 새로운 창을 엽니다. |
| postMessage() | 메시지를 다른 창으로 전달합니다. |
| print() | 현재 문서를 인쇄합니다. |
| prompt() | 프롬프트 창에 입력한 텍스트를 반환합니다. |
| resizeBy() | 지정한 크기만큼씩 스크롤 합니다. |
| resizeTo() | 동적으로 브라우저 창의 크기를 조절합니다. |
| scroll() | 문서에서 특저 위치로 스크롤 합니다. |
| scrollTo() | 지정한 위치 까지 스크롤 합니다. |
| sizeToContent | 내용에 맞게 창의 크기를 맞춥니다. |
| stop() | 로딩을 중지합니다. |
새로운 브라우저 창을 여는 open()메서드
링크를 클릭하거나 웹문서를 열때 새창이 자동(팝업창)으로 뜨게 하려면 window.open() 메서드를 사용
새 브라우저에서 창열기
window.open(경로, 창 이름, 창 옵션)
경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냅니다.
창 이름 : 팝업 창의 이름을 지정하면 이 창에 팝업내용이 나타나도록 할수있습니다.
이름을 지정하지 않으면 팝업창이 계속 새로 나타납니다.
창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기 지정할 수 있다. 위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타납니다.
예시는 다음과 같습니다.
<body>
<p>문서를 열면 팝업 창이 표시 됩니다.</p>
<script>
window.open("notice.html", "pop", "width=300, height=400, left= 100, top=200" );
//팝업창의 위치, 넓이와 높이. 그리고 팝업창이 새로 열릴지 pop으로 지정
//이름이 pop으로 지정되어있어 이미 pop이 열려있을때는 더이상 팝업창이 생성 안됨
//left, top을 이용해서
// 화면에서 좌측으로 100px, 위에서 200px이 떨어진곳으로 팝업창을 띄웁니다.
</script>
</body>navigator 객체
사용하는 브라우저가 많아지고, 웹 어플리케이션이 등장하면서 navigator 객체에 여러 프로퍼티가 등장하고 있습니다.
일부 브라우저에서만 지원하는 프로퍼티도 있습니다.
주요 프로퍼티
| 종류 | 설명 |
| battery | 배터리 충전 상태를 알려줍니다. |
| cookieEnabled | 쿠키 정보를 무시하면 false, 허용하면 true를 반환합니다. |
| gelocation | 모바일 기기를 이용한 위치 정보를 나타냅니다. |
| language | 브라우저 UI의 언어 정보를 나타냅니다. |
| oscpu | 현재 운영체제 정보를 나타냅니다. |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열입니다. |
history 객체
방문한 사이트 주소가 배열 형태로 저장됩니다.
배열은 read only.(보안상의 이유)
프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됩니다. |
| 메서드 | back() | history 목록에서 이전 페이지를 현재 화면으로 불러옵니다. |
| forward() | history 목록에서 다음 페이지를 현재 화면으로 불러옵니다. | |
| go() | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옵니다. 예를들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옵니다. |
|
location 객체
현재 문서의 URL 주소 정보가 담겨있습니다.
이 정보를 편집해서 브라우저 창에 열 사이트 / 문서지정
| 구분 | 설명 | |
| 프로퍼티 | hash | URL중에서 #으로 시작하는 해시부분의 정보를 담고 있습니다. |
| host | URL의 호스트 이름과 포트 번호를 담고있습니다. | |
| hostname | URL의 호스트 이름이 저장됩니다. | |
| href | 전체 URL입니다. 이 값을 변경하면 해당 주소로 이동할수 있습니다. | |
| pathname | URL 경로가 저장됩니다. | |
| port | URL의 포트번호를 담고 있습니다. | |
| protocol | URL의 프로토콜을 저장합니다. | |
| password | 도메인 이름아에서 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장합니다. | |
| search | URL 중에서 ?로 시작하는 검색 내용을 저장합니다. | |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속 하는 사이트의 URL일 경우에 username 정보를 저장합니다. |
|
| 메서드 | assign() | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옵니다. |
| reload() | 현재 문서를 다시 불러옵니다. | |
| replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체합니다. | |
| toString() | 현재 문서의 URL을 문자열로 반환합니다. | |
728x90
'JAVA SCRIPT' 카테고리의 다른 글
| 자바스크립트 기본!(문서객체모델, DOM - 2) - Java Script (0) | 2022.12.19 |
|---|---|
| 자바스크립트 기본!(문서객체모델, DOM) - Java Script (0) | 2022.12.19 |
| 자바스크립트 기본!(객체4. Math객체) - Java Script (0) | 2022.12.16 |
| 자바스크립트 기본!(객체3. Date 객체..) - Java Script (0) | 2022.12.16 |
| 자바스크립트 기본!(객체2, Array 객체, Array 메서드..) - Java Script (0) | 2022.12.16 |