📖브라우저 객체
자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 다양한 기능과 효과를 만들 수 있다.
웹 브라우저 창에 문서가 표시되는 순간 사용자는 알 수 없지만 브라우저는 html소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체들을 생성한다.
웹 브라우저가 열면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체가 생성된다.
-> 하위 객체란 웹 문서와 주소표시줄처럼 브라우저 요소에 해당하는 각각의 다른 객체들을 말한다.
✔️브라우저의 계층구조
브라우저의 가장 최상위 객체는 window이다. window객체는 '브라우저'를 의미하며 안에 다양한 하위객체를 포함한다.
하위 객체의 종류로는 주소줄을 의미하는 location객체와 문서 영역을 의미하는 document객체와 운영체제를 의미하는 navigator객체, 방문기록을 저장하는 history객체, 해상도를 의미하는 screen객체가 있다.
📖window객체
window객체는 웹 브라우저의 상태를 제어하고 자바스크립트의 최상위에 존재한다. window객체의 프로퍼티를 사용하려면 반드시 window.를 먼저 붙여줘야한다.
✔️window객체의 프로퍼티
[종류]
1. document
: 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
2. frameElement
: 현재 창이 다른 요소안에 포함되어 있을 결우 그 요소를 반환하고,
포함되어 있지 않다면 null을 반환한다.
3. innerheight🌞
: 내용 영역의 높이를 나타낸다.
스크롤을 포함한 문서의 전체 높이를 말한다. padding이나 border를 제외한 height컨텐츠 영역을 말한다.
4. innerwidth🌞
: 내용 영역의 넓이를 나타낸다.
padding이나 border를 제외한 width컨텐츠 영역을 말한다.
5. localStorage
: 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 나타낸다.
6. location
: window객체의 위치 또는 현재 url정보를 나타낸다.
7.name
: 브라우저 창의 이름을 가져오거나 수정한다.
8. outerHeigth🌞
: border나 padding을 포함한 문서의 총 높이를 말한다.
9. outerWidth🌞
: border나 padding을 포함한 문서의 총 넓이를 말한다.
10. pageXOffset, scrollX🌞
: 스크롤 했을 때 수평으로 이동하는 픽셀 수를 의미한다.
11. pageYOffset, scrollY🌞
: 스크롤 했을 때 수직으로 이동하는 픽셀 수를 의미한다.
12. parent
: 현재 창이나 서브프레임의 부모이다.
13. screenX🌞
: 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져있는 거리를 나타낸다.
14. screenY🌞
: 브라우저 창의 위쪽 테두리가 모니터 위쪽에서 떨어져있는 거리를 나타낸다.
15. sseionStorage
: 로컬 스토리지처럼 웹 브라우저에 데이터를 저장하는 세션 스토리지를 반환한다.
✔️ window 객체 메서드
window객체의 메서드는 대화 창 (prompt같은 창)을 표시하거나 브라우저 창의 크기나 위치를 알아내고자 할때 사용한다.
window는 기본 객체라서 window.을 생략할 수 있다.
[종류]
1. alert() : 경고메세지나 알림 내용을 표시하는 창이다.(요즘 잘 안씀)
2. blur() : 현재 창에서 포커스를 해제한다.
3. close() : 현재 창을 닫는다.
4. confirm() : 확인 취소창을 말한다.
5. focus() : 현재 창에 포커스를 부여한다.
6. moveBy() : 현재 창을 지정한 크기만큼 이동한다.
7. moveTo() : 현재 창을 지정한 좌표로 이동시킨다.
8. open() : 새로운 창을 연다.
9. postMessage() : 메세지를 다른 창으로 전달한다.
10. print() : 현재 문서를 인쇄한다.
11. prompt() : 사용자가 입력한 텍스트를 반환한다.
12. resizeBy() : 지정한 크기만큼 현재 창의 크기를 조절한다.
13. resizeTo() : 동적으로 브라우저 창의 크기를 조절한다.
14. sizeToContent() : 내용에 맞게 창의 크기를 조절한다.
15. stop() : 로딩을 중지한다.
❗open메서드로 팝업창 만들기
open메서드를 이용하면 팝업창을 열 수 있다.
[기본형]
open('url경로', '새 창 이름', '새 창 옵션')
ex) /*
popup.html : 팝업창의 경로. 팝업창은 따로 html파일로 만들어 둬야한다.
pop1 : 팝업창의 이름.
width=300, height=400, left=300, top=50 :
*/
window.open(
"popup.html",
"pop1",
"width=300, height=400, left=300, top=50"
); |  |
|---|
❗ 일정한 간격으로 코드 실행하기
setInterval()은 일정한 시간 간격으로 코드를 반복 실행한다.
setTimeout()은 일정한 시간 이후에 코드를 한 번 실행하고 자동으로 종료한다.
✔️setInterval()/clearInterval()
setInterval()은 일정한 시간 간격으로 코드를 무한히 반복실행한다.
setInterval()을 멈추고 해제하고 싶다면 clearInterval()을 사용한다.
[기본형]
1. var 참조변수 = setInterval(function(){실행시키고 싶은 코드}, 시간간격(ms));🌞
2. var 참조변수 = setInterval('코드', 시간간격(ms));
setInterval()을 멈춘다.
3.clearInterval(참조변수)✔️setTimeout() / clearTimeout()
setTimeout()메서드는 일정 시간이 지나면 코드를 한 번 실행하고 종료한다.
clearTimeout은 setTimeout()메서드를 종료할 때 사용한다.
setTimeout()처럼 한 번만 실행하는 메서드를 계속 호출하여 끝없이 실행시키는 것을 '재귀 함수 호출'이라고 한다.
[기본형]
1.var 참조변수 = setTimeout(function(){실행시키고 싶은 코드}, 시간간격(ms));🌞
2.var 참조변수 = setTimeout('코드', 시간간격(ms));
setTimeout()을 멈춘다.
3.clearTimeout(참조변수)📖history객체
history객체는 사용자가 방문한 사이트의 기록을 남기고 , 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 메서드를 제공한다.
[기본형]
history.속성;
history.메서드(); -> 메서드를 실행한다.
history.메서드(값); -> 메서드를 실행할 때 값을 전달하여 실행시킨다.[메서드]
1. history.back();
: ()를 비워두면 바로 이전에 방문했던 페이지로 이동한다.
ex) history.back(3);처럼 숫자가 들어가면 해당 숫자 만큼 이전에 방문했던 페이지로 이동한다.
2.history.forward();
: 앞으로 가기. 다음 방문 사이트로 이동한다. ()안에 숫자가 들어가면 숫자만큼 앞으로 방문했던 사이트로 이동한다.
3. history.go(음수 또는 양수);
: ()안에 음수가 들어가면 뒤로가기, 양수가 들어가면 앞으로 가기이다.
[프로퍼티]
history.length : 방문기록에 조정된 목록의 개수를 반환한다.
📖location객체
location객체는 주소 표시줄에 있는 기능과 속성을 제공하는 객체이다.
현재 url에 대한 정보와 새로고침 메서드등이 있다.
[기본형]
location. 속성; -> 현재 속성값을 알고 싶을 때
location. 속성 = 값; -> 속성값을 다른 값으로 바꿀 때
location.메서드; -> 기능을 실행힐 때[프로퍼티]
1. location.href
: url주소를 바꾸거나 현재 url주소를 반환한다.
2. location.hash
: url의 해시값(#에 명시된 값)을 반환한다.
3.location.hostname
: url의 호스트 이름(서버주소)을 설정하거나 반환한다.
ex) https://www.naver.com:80/
4. location.host
: url의 호스트 이름(서버주소)과 포트번호를 반환한다.
5. location.protocol
: url의 프로토콜을 반환한다.
[메서드]
location.reload() : 페이지를 새로 고침한다.
📖navigator객체
navigator객체는 현재 방문자가 사용하는 브라우저의 정보와 운영체제의 정보를 제공하는 객체이다.
[기본형]
navigator.속성;[프로퍼티]
- navigator.appCodeName
: 현재 브라우저의 코드명을 반환한다. 현 시점의 모든 브라우저는 'Mozilla'를 반환한다.
- navigator.appName
: 현재 브라우저의 이름을 반환한다. 현 시점의 모든 브라우저는 'Netscape'를 반환한다.
- navigator.appVersion
: 현재 브라우저의 버전정보 반환한다.
- navigator.Language
: 현재 브라우저의 설정된 언어를 반환한다. 한국어는 ko를 반환한다.
- navigator.product
: 브라우저의 엔진 이름을 반환한다. 크롬의 경우 'Gecko'를 반환한다.
- navigator.platform
: 컴퓨터의 운영체제 종보를 반환한다. 운영체제가 윈도우이고 시스템 종류가 64비트라도 브러우저가 32비트로 설치되어 있으면 Win32로 나온다.
- navigator.userAgent
: 위의 모든 속성을 종합적으로 반환한다. 브라우저와 운영체제 정보를 나타낸다.
📖screen객체
screen객체는 사용자의 디바이스 모니터의 정보를 제공하는 객체이다.
예를 들어 모니터의 넓이나 높이 또는 컬러표현 방식을 제공한다.
[기본형]
- screen.속성;
- screen.메서드();[프로퍼티]
1. avaliHeight
: Ui영억(ex-> window 작업표시줄이나 mac의 독)을 제외한 영역의 높이를 반환한다.
=뷰포트랑 비슷한 개념
2. avaliWidth
: Ui영억을 제외한 영역의 넓이를 반환한다.
3. colorDepth
: 화면에서 픽셀을 렌더링할때 사용하는 색상 수를 나타낸다.
4. height
: ui영역을 포함한 높이를 반환한다.
5. width
: ui영역을 포함한 넓를 반환한다.
6. orientation
: 화면의 현재 방향을 나타낸다. ex) pc는 가로방향, 모바일을 세로방향이다.
7. pixelDepth
: 화면에서 픽셀을 렌더링 할때 사용하는 비트 수를 나타낸다.
[메서드]
1. lockOrientation
: 화면 방향을 잠글때 사용한다.
2.unlockOrientation
: 화면 방향을 잠글을 해제할때 사용한다.
