[Do it!] 04. 객체 [브라우저 객체]
브라우저 객체
브라우저에 내장된 객체
window는 브라우저 객체의 최상위 객체이며 하위 객체가 포함되어 있음
계층적 구조로 이루어져있음.
브라우저 객체 모델(BOM, Browser Object Model)이라고 함
window => document(div, body, img, a, form, input...등) / screen / location / history / navigator
window 객체의 메서드 종류
| 종류 | 설명 |
| open('URL', '새 창 이름', '새 창 옵션') | URL 페이지를 새창으로 나타냄 |
| alert(data) | 경고 창을 나타내고 데이터를 보여줌 방문자가 [확인] 버튼을 누르면 alert()을 사용한 다음 위치의 코드를 수행 |
| prompt('질문', '답변') | 질문과 답변으로 질의응답 창을 나타냄 |
| confirm('질문 내용') | 질문 내용으로 확인이나 취소 창을 나타냄 [확인] -> true [취소] -> false |
| moveTo(x, y) | 지정한 새 창의 위치를 이동 |
| resize To(width, height) | 지정한 새 창의 크기를 변경 |
| setInterval(function(){코드}, 일정시간간격) | 지속적으로 일정한 시간 간격으로 함수를 호출하여 코드 실행 |
| setTimeout(function(){코드}, 일정시간간격) | 단 한 번 일정한 시간 간격으로 함수를 호출하여 코드 실행 |
open()
open() 메서드를 이용하면 지정한 URL 페이지를 새 브라우저 창에 나타냄
광고에 자주 사용되는 팝업 창을 만들 수 있음
최근 팝업 창을 사용자가 차단할 수 있어, 팝업창을 활용한 광고는 효과가 많이 떨어짐
open("URL", "새 창 이름", "새 창 옵션")
window.open("https://naver.com" "새창이름", "width=350, height=400, left=50, top=10, scrollbars=no");
새 창의 옵션 종류
| 속성 | 설명 |
| width | 새 창의 너비 설정 |
| height | 새 창의 높이 설정 |
| left | 새 창의 수평(x축) 위치 설정 |
| top | 새 창의 수직(y축) 위치 설정 |
| scrollbars | 새 창의 스크롤바 숨김/노출 설정 (숨김=no, 노출=yes) |
| location | 새 창의 URL 주소 입력 영역의 숨김/노출 설정 (숨김=no, 노출=yes) |
| status | 새 창의 상태표시줄 영역 숨김/노출 설정 (숨김=no, 노출=yes) |
| toolbars | 새 창의 도구 상자 영역의 숨김/노출 설정 (숨김=no, 노출=yes) |
alert()
경고 창을 나타낼 때 사용
window.alert() 메서드는 다음 기본형처럼 window 객체를 따로 작성하지 않아도 사용가능
alert("경고 메시지")
prompt()
질의응답 창을 나타낼 때 사용
window.propmpt() 메서드는 다음 기본형처럼 window 객체를 따로 작성하지 않아도 사용가능
prompt("질의 내용", "기본 답변")
confirm()
확인/취소 창을 나타낼 때 사용
window. confirm() 메서드는 다음 기본형처럼 window 객체를 따로 작성하지 않아도 사용가능
[확인] : true 반환
[취소] : false 반환
confirm("질의 내용");
일정한 시간 간격으로 코드 실행하기
setInterval() : 일정한 시간 간격으로 코드를 반복 실행 => 반복
setTimeout() : 일정한 시간 후에 코드를 실행하고 종료 => 한번만
setInterval() / clearInterval()
setInterval() : 일정한 시간 간격으로 코드를 반복 실행
clearInterval() : setInterval() 메서드를 취소
시간 간격은 1/1000초 단위(ms)로 작성해야함 => 3초 간격이라면 3000으로 작성해야함
참조 변수는 메서드를 제거하는 clearInterval() 메서드에서 사용
setInterval()메서드 기본형
var 참조 변수 = setInterval(function(){코드}, 시간간격(ms));
var 참조 변수 = setInterval("코드", 시간간격(ms));
3초 간격으로 변수 i값을 증가시킴
var intv = setInterval(function(){i++},3000);
var intv = setInterval("i++", 3000);
clearInterval()메서드 기본형
참조 변수는 앞의 setInterval()을 참조함
clearInterval("참조변수");
setTimeout() / clearTimeout()
setTimeout() : 일정 시간이 지나면 코드를 실행하고 종료. 응용하여 재귀호출하면 setInterval() 메서드처럼 사용가능
clearTimeout() : setTimeout() 메서드를 제거
시간 간격은 1/1000초 단위(ms)로 작성해야함 => 3초 간격이라면 3000으로 작성해야함
참조 변수는 메서드를 제거하는 clearTimeout() 메서드에서 사용
setTimeout()메서드 기본형
var 참조 변수 = setTimeout(function(){코드}, 시간간격(ms));
var 참조 변수 = setTimeout("코드", 시간간격(ms));
5초 뒤에 변수 i값을 증가시킴
var intv = setTimeout(function(){i++},5000);
var intv = setTimeout("i++", 5000);
claerTimeout()메서드 기본형
clearTimeout(참조 변수);
screen 객체
사용자의 모니터 정보(속성)를 제공하는 객체
screen 객체의 기본형
screen.속성;
screen 객체의 속성 종류
| 종류 | 설명 |
| screen.width | 화면의 너빗값을 반환 |
| screen.height | 화면의 높이값을 반환 |
| screen.availWidth | 작업 표시줄을 제외한 화면의 너빗값을 반환 |
| screen.availHeight | 작업 표시줄을 제외한 화면의 높이값을 반환 |
| screen.colorDepth | 사용자 모니터가 표현가 가능한컬러 bit를 반환 |
location 객체
사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체
현재 URL에 대한 정보(속성)와 새로고침(reload) 메서드 제공
location 객체 기본형
location.속성;
location.메서드();
location 객체의 속성 종류
| 종류 | 설명 |
| location.href | 주소 영역의 참조 주소를 설정하거나 URL을 반환 |
| location.hash | URL의 해시값(#에 명시된 값)을 반환 |
| location.hostname | URL의 호스트 이름을 설정하거나 반환 |
| location.host | URL의 호스트이름과 포트번호 반환 |
| location.protocol | URL의 프로토콜 반환 |
| location.search | URL의 쿼리(요청값)를 반환 |
| location.reload() | 브라우저 새로고침 |
history 객체
사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공
history 객체 기본형
history.속성;
history.메서드();
history.메서드(n);
history 객체의 속성 종류
| 종류 | 설명 |
| history.back() | 이전 방문 사이트로 이동 |
| history.forward() | 다음 방문 사이트로 이동 |
| history.go(이동 숫자) | 이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동 |
| history.length | 방문 기록에 저장된 목록의 개수를 반환 |
navigator 객체
현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체
navigator 객체 기본형
navigator.속성;
navigator 객체의 속성 종류
| 종류 | 설명 |
| navigator.appCodeName | 현재 브라우저의 코드명을 반환 |
| navigator.appName | 현재 브라우저의 이름을 반환 |
| navigator.appVersion | 현재 브라우저의 버전 정보를 반환 |
| navigator.language | 현재 브라우저가 사용하고 있는 언어를 반환 한국어일 경우, 'ko' 반환 |
| navigator.product | 현재 브라우저의 엔진 이름 반환 크롬일 경우 'Gecko' 반환 |
| navigator.platform | 현재 컴퓨터의 운영체제 정보를 제공 |
| navigator.onLine | 온라인 상태 여부에 대한 정보를 제공 |
| navigator.userAgent | 브라우저의 운영체제의 종합 정보를 제공 |